{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-trace-1","type":"registry:block","title":"Agent steps","description":"An agent turn with a search, a diff, test output, a lint failure and a fix still running.","dependencies":[],"registryDependencies":["@reui/code-block","trace"],"files":[{"path":"c-trace-1.tsx","type":"registry:block","content":"import { CodeBlock } from \"@/components/reui/code-block/code-block\"\n\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceDescription,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from \"@/components/ui/trace\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst patch = `export const csp = {\n  frameSrc: [\"'self'\"],\n  frameSrc: [\"'self'\", \"*.stripe.com\"],\n  connectSrc: [\"'self'\", \"*.stripe.com\"],\n}`\n\nconst testOutput = `✓ middleware/csp.test.ts (12 tests)\nTests  12 passed`\n\nconst lintOutput = `middleware/csp.ts\n  14:7  error  'nonce' is unused`\n\n// Each title says what happened, because TraceIcon is hidden from assistive\n// tech and the title is all a screen reader gets.\nexport function Pattern() {\n  return (\n    // Trace sizes its rows; the root sets the size of what they expand to.\n    <div className=\"w-full max-w-md text-sm\">\n      <Trace>\n        <TraceLine>\n          <TraceIcon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TraceIcon>\n          <TraceTitle>Searched the codebase for frameSrc</TraceTitle>\n          <TraceDescription>3 results</TraceDescription>\n        </TraceLine>\n        <TraceCollapsible defaultOpen>\n          <TraceCollapsibleTrigger>\n            <TraceLine>\n              <TraceIcon>\n                <IconPlaceholder\n                  lucide=\"PencilIcon\"\n                  tabler=\"IconPencil\"\n                  hugeicons=\"PenIcon\"\n                  phosphor=\"PencilIcon\"\n                  remixicon=\"RiPencilLine\"\n                />\n              </TraceIcon>\n              <TraceTitle>Edited middleware/csp.ts</TraceTitle>\n              <TraceDescription>+2 -1</TraceDescription>\n            </TraceLine>\n          </TraceCollapsibleTrigger>\n          <TraceCollapsibleContent>\n            <CodeBlock\n              code={patch}\n              language=\"typescript\"\n              diff={{ added: [3, 4], removed: [2] }}\n              label=\"Patch for middleware/csp.ts\"\n            />\n          </TraceCollapsibleContent>\n        </TraceCollapsible>\n        <TraceCollapsible>\n          <TraceCollapsibleTrigger>\n            <TraceLine>\n              <TraceIcon>\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconTerminal\"\n                  hugeicons=\"ComputerTerminal01Icon\"\n                  phosphor=\"TerminalIcon\"\n                  remixicon=\"RiTerminalLine\"\n                />\n              </TraceIcon>\n              <TraceTitle>Ran pnpm vitest run csp</TraceTitle>\n              <TraceDescription>12 passed</TraceDescription>\n            </TraceLine>\n          </TraceCollapsibleTrigger>\n          <TraceCollapsibleContent>\n            <CodeBlock\n              code={testOutput}\n              language=\"bash\"\n              highlight={false}\n              label=\"Test output\"\n            />\n          </TraceCollapsibleContent>\n        </TraceCollapsible>\n        <TraceCollapsible>\n          <TraceCollapsibleTrigger>\n            <TraceLine status=\"error\">\n              <TraceIcon>\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconTerminal\"\n                  hugeicons=\"ComputerTerminal01Icon\"\n                  phosphor=\"TerminalIcon\"\n                  remixicon=\"RiTerminalLine\"\n                />\n              </TraceIcon>\n              <TraceTitle>pnpm lint failed with 1 error</TraceTitle>\n            </TraceLine>\n          </TraceCollapsibleTrigger>\n          <TraceCollapsibleContent>\n            <CodeBlock\n              code={lintOutput}\n              language=\"bash\"\n              lineLevels={{ error: [2] }}\n              label=\"Lint output\"\n            />\n          </TraceCollapsibleContent>\n        </TraceCollapsible>\n        <TraceLine status=\"running\">\n          <TraceIcon>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"PenIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n          </TraceIcon>\n          <TraceTitle>Removing the unused nonce</TraceTitle>\n        </TraceLine>\n      </Trace>\n    </div>\n  )\n}","target":"components/examples/c-trace-1.tsx"}],"meta":{"order":1,"gridSize":2,"label":"Agent Steps"}}