Step inspector
The settings for one workflow step beside the canvas, and its input, output and timing from the last run.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/step-inspector-settings.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/step-inspector-settings.json
Usage & API
Example
import { Mark } from "@/components/ai/step-inspector-settings"
<Mark
mark={mark}
/>Props Mark
| Prop | Type & description | Required |
|---|---|---|
mark | AppMark | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The settings panel titles the step and can close. Identity fields cover the name. An AI step adds Model, Prompt, Output format and the schema of fields it returns. The prompt and other text fields have Insert a variable, which opens a search over earlier steps and inserts the path at the cursor. Retries has fewer and more, a wait menu of Fixed, 10s or Exponential, and a timeout in seconds. Test step shows Testing while the test runs, then the output, the error and how long it took. The preview canvas lays the steps out, marks the selected one, and shows unsaved changes against a Save button. No step selected is the empty state. Ctrl Enter can submit the test from the prompt.
Example
import { Mark } from "@/components/ai/step-inspector-run"
<Mark
mark={mark}
/>Props Mark
| Prop | Type & description | Required |
|---|---|---|
mark | AppMark | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The run panel names the step and badges Succeeded, Failed, Skipped, Running or Queued. The duration uses a short seconds format. Input, Output and Logs are tabs. JSON can be expanded and collapsed by depth. Logs show the time, the level and the line. Rerun from here is the action when you pass a handler. A skipped step explains that it did not run because an earlier step failed. A step with no logs yet says so. The preview canvas selects a step to fill the panel, and the empty canvas says to pick a step, with a note that input, output and logs are kept for 30 days. Close dismisses the panel.
Choosing a layout
Use settings while the workflow is being built, when the prompt, the model and the retry policy are the thing being edited, and a test against sample data should sit in the same panel. Use the run panel while a person is looking at a finished or failed execution and needs the payload and the log without leaving the canvas.
Adding the step is the step picker. A failed agent run with retry and skip, outside the canvas, is run recovery. The inspector is one node. It does not list every trigger on the agent, and it does not draw the whole graph by itself, though both variants ship a small canvas beside the panel in the preview.
Does Test step run the workflow?
It calls onTest and then renders the StepTest you pass back: running, passed or failed, plus output, error, timing and when. It does not execute the prompt. Save, in the preview, is also local state around the panel, not a deploy.
Can a variable from a later step be inserted?
The menu lists the groups you pass, which the type describes as outputs of steps that run before this one. There is no control that reaches forward. A path is inserted as a token in the text field, at the selection.