{"name":"agent-run-timeline-01","type":"registry:block","description":"Block: agent-run-timeline-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-agent/agent-run-timeline-01.tsx","content":"'use client'\n\nimport { CheckCircle2, CircleDot, Clock3, Loader2 } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst events = [\n  { title: 'Intent parsed', detail: 'mobile agent console, React, safe area', state: 'done' },\n  { title: 'Registry ranked', detail: 'templates, blocks, primitives scored', state: 'done' },\n  { title: 'Source installed', detail: 'agent-command-center-01 and button', state: 'active' },\n  { title: 'Preview verified', detail: 'waiting for runtime smoke', state: 'queued' },\n]\n\nexport default function AgentRunTimeline01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background px-5 py-5 pt-safe-top text-foreground\">\n      <header>\n        <div className=\"flex items-center justify-between gap-3\">\n          <div>\n            <p className=\"text-xs font-medium text-muted-foreground\">Execution timeline</p>\n            <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Agent run</h1>\n          </div>\n          <Badge className=\"rounded-md\" variant=\"secondary\">\n            74%\n          </Badge>\n        </div>\n      </header>\n\n      <main className=\"mt-6 flex-1 overflow-y-auto pb-safe-bottom\">\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"grid gap-4\">\n            {events.map((event, index) => {\n              const isDone = event.state === 'done'\n              const isActive = event.state === 'active'\n              return (\n                <div key={event.title} className=\"grid grid-cols-[28px_1fr] gap-3\">\n                  <div className=\"flex flex-col items-center\">\n                    <span className=\"grid size-7 place-items-center rounded-full bg-muted\">\n                      {isDone ? (\n                        <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                      ) : isActive ? (\n                        <Loader2 className=\"size-4 animate-spin text-primary\" />\n                      ) : (\n                        <CircleDot className=\"size-4 text-muted-foreground\" />\n                      )}\n                    </span>\n                    {index < events.length - 1 ? (\n                      <span className=\"mt-2 h-12 w-px bg-border\" />\n                    ) : null}\n                  </div>\n                  <div className=\"min-w-0 pb-4\">\n                    <div className=\"flex min-h-[28px] items-center justify-between gap-2\">\n                      <h2 className=\"truncate text-sm font-semibold\">{event.title}</h2>\n                      <span className=\"flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n                        <Clock3 className=\"size-3.5\" />\n                        {isDone ? 'done' : event.state}\n                      </span>\n                    </div>\n                    <p className=\"mt-1 text-sm leading-6 text-muted-foreground\">{event.detail}</p>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </main>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-agent/agent-run-timeline-01.tsx"}],"categories":["mobile-agent"],"registryDependencies":["badge"],"meta":{"frameworks":["react"],"category":"mobile-agent","tags":["mobile","mobile-agent"],"clientOnly":true,"viewport":"mobile-first","previewPath":"registry/default/blocks/mobile-agent/agent-run-timeline-01.tsx","isActive":true,"mdxBody":"```tsx\n'use client'\n\nimport { CheckCircle2, CircleDot, Clock3, Loader2 } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst events = [\n  { title: 'Intent parsed', detail: 'mobile agent console, React, safe area', state: 'done' },\n  { title: 'Registry ranked', detail: 'templates, blocks, primitives scored', state: 'done' },\n  { title: 'Source installed', detail: 'agent-command-center-01 and button', state: 'active' },\n  { title: 'Preview verified', detail: 'waiting for runtime smoke', state: 'queued' },\n]\n\nexport default function AgentRunTimeline01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background px-5 py-5 pt-safe-top text-foreground\">\n      <header>\n        <div className=\"flex items-center justify-between gap-3\">\n          <div>\n            <p className=\"text-xs font-medium text-muted-foreground\">Execution timeline</p>\n            <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Agent run</h1>\n          </div>\n          <Badge className=\"rounded-md\" variant=\"secondary\">\n            74%\n          </Badge>\n        </div>\n      </header>\n\n      <main className=\"mt-6 flex-1 overflow-y-auto pb-safe-bottom\">\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"grid gap-4\">\n            {events.map((event, index) => {\n              const isDone = event.state === 'done'\n              const isActive = event.state === 'active'\n              return (\n                <div key={event.title} className=\"grid grid-cols-[28px_1fr] gap-3\">\n                  <div className=\"flex flex-col items-center\">\n                    <span className=\"grid size-7 place-items-center rounded-full bg-muted\">\n                      {isDone ? (\n                        <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                      ) : isActive ? (\n                        <Loader2 className=\"size-4 animate-spin text-primary\" />\n                      ) : (\n                        <CircleDot className=\"size-4 text-muted-foreground\" />\n                      )}\n                    </span>\n                    {index < events.length - 1 ? (\n                      <span className=\"mt-2 h-12 w-px bg-border\" />\n                    ) : null}\n                  </div>\n                  <div className=\"min-w-0 pb-4\">\n                    <div className=\"flex min-h-[28px] items-center justify-between gap-2\">\n                      <h2 className=\"truncate text-sm font-semibold\">{event.title}</h2>\n                      <span className=\"flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n                        <Clock3 className=\"size-3.5\" />\n                        {isDone ? 'done' : event.state}\n                      </span>\n                    </div>\n                    <p className=\"mt-1 text-sm leading-6 text-muted-foreground\">{event.detail}</p>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </main>\n    </section>\n  )\n}\n\n```","title":"Agent Run Timeline · Agent run"}}