{"name":"agent-command-center-01","type":"registry:block","description":"Block: agent-command-center-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-agent/agent-command-center-01.tsx","content":"'use client'\n\nimport {\n  Bot,\n  CheckCircle2,\n  CircleDot,\n  Code2,\n  GitBranch,\n  Layers3,\n  Play,\n  TerminalSquare,\n} from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst signals = [\n  { label: 'Registry', value: '658 items', icon: Layers3 },\n  { label: 'Plan', value: '6 picks', icon: GitBranch },\n  { label: 'Preview', value: 'Vue + React', icon: Play },\n]\n\nconst steps = [\n  { label: 'Read agent-index.json', state: 'done' },\n  { label: 'Fetch mobile-agent blocks', state: 'done' },\n  { label: 'Install registry dependencies', state: 'active' },\n  { label: 'Run local preview smoke', state: 'queued' },\n]\n\nexport default function AgentCommandCenter01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"border-b px-5 pb-4 pt-safe-top\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-3\">\n            <div className=\"grid size-11 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground\">\n              <Bot className=\"size-5\" />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"text-xs font-medium text-muted-foreground\">Agent workspace</p>\n              <h1 className=\"truncate text-lg font-semibold tracking-normal\">Command center</h1>\n            </div>\n          </div>\n          <Badge className=\"rounded-md\" variant=\"secondary\">\n            Running\n          </Badge>\n        </div>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-4 overflow-y-auto px-5 py-5\">\n        <div className=\"grid grid-cols-3 gap-3\">\n          {signals.map((signal) => {\n            const Icon = signal.icon\n            return (\n              <div key={signal.label} className=\"rounded-lg border bg-card p-3\">\n                <Icon className=\"size-4 text-primary\" />\n                <p className=\"mt-3 text-[11px] font-medium text-muted-foreground\">{signal.label}</p>\n                <p className=\"mt-1 text-sm font-semibold\">{signal.value}</p>\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-4 flex items-center justify-between gap-3\">\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground\">Current intent</p>\n              <h2 className=\"mt-1 text-base font-semibold tracking-normal\">\n                Build a mobile AI console\n              </h2>\n            </div>\n            <Button aria-label=\"Run plan\" className=\"size-11 rounded-lg\" size=\"icon\">\n              <Play className=\"size-4\" />\n            </Button>\n          </div>\n          <div className=\"grid gap-2\">\n            {steps.map((step) => (\n              <div\n                key={step.label}\n                className=\"flex min-h-[44px] items-center gap-3 rounded-lg bg-muted px-3 text-sm\"\n              >\n                {step.state === 'done' ? (\n                  <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                ) : step.state === 'active' ? (\n                  <TerminalSquare className=\"size-4 text-primary\" />\n                ) : (\n                  <CircleDot className=\"size-4 text-muted-foreground\" />\n                )}\n                <span className=\"min-w-0 flex-1 truncate\">{step.label}</span>\n                <span className=\"text-xs text-muted-foreground\">{step.state}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-3 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n            <Code2 className=\"size-4\" />\n            Next command\n          </div>\n          <code className=\"block overflow-x-auto rounded-md bg-muted px-3 py-2 text-xs\">\n            npx shadcn@latest add https://ui.timkit.cn/r/agent-chat-01.json\n          </code>\n        </div>\n      </main>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-agent/agent-command-center-01.tsx"}],"categories":["mobile-agent"],"registryDependencies":["badge","button"],"meta":{"frameworks":["react"],"category":"mobile-agent","tags":["mobile","mobile-agent"],"clientOnly":true,"viewport":"mobile-first","previewPath":"registry/default/blocks/mobile-agent/agent-command-center-01.tsx","isActive":true,"mdxBody":"```tsx\n'use client'\n\nimport {\n  Bot,\n  CheckCircle2,\n  CircleDot,\n  Code2,\n  GitBranch,\n  Layers3,\n  Play,\n  TerminalSquare,\n} from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst signals = [\n  { label: 'Registry', value: '658 items', icon: Layers3 },\n  { label: 'Plan', value: '6 picks', icon: GitBranch },\n  { label: 'Preview', value: 'Vue + React', icon: Play },\n]\n\nconst steps = [\n  { label: 'Read agent-index.json', state: 'done' },\n  { label: 'Fetch mobile-agent blocks', state: 'done' },\n  { label: 'Install registry dependencies', state: 'active' },\n  { label: 'Run local preview smoke', state: 'queued' },\n]\n\nexport default function AgentCommandCenter01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"border-b px-5 pb-4 pt-safe-top\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-3\">\n            <div className=\"grid size-11 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground\">\n              <Bot className=\"size-5\" />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"text-xs font-medium text-muted-foreground\">Agent workspace</p>\n              <h1 className=\"truncate text-lg font-semibold tracking-normal\">Command center</h1>\n            </div>\n          </div>\n          <Badge className=\"rounded-md\" variant=\"secondary\">\n            Running\n          </Badge>\n        </div>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-4 overflow-y-auto px-5 py-5\">\n        <div className=\"grid grid-cols-3 gap-3\">\n          {signals.map((signal) => {\n            const Icon = signal.icon\n            return (\n              <div key={signal.label} className=\"rounded-lg border bg-card p-3\">\n                <Icon className=\"size-4 text-primary\" />\n                <p className=\"mt-3 text-[11px] font-medium text-muted-foreground\">{signal.label}</p>\n                <p className=\"mt-1 text-sm font-semibold\">{signal.value}</p>\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-4 flex items-center justify-between gap-3\">\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground\">Current intent</p>\n              <h2 className=\"mt-1 text-base font-semibold tracking-normal\">\n                Build a mobile AI console\n              </h2>\n            </div>\n            <Button aria-label=\"Run plan\" className=\"size-11 rounded-lg\" size=\"icon\">\n              <Play className=\"size-4\" />\n            </Button>\n          </div>\n          <div className=\"grid gap-2\">\n            {steps.map((step) => (\n              <div\n                key={step.label}\n                className=\"flex min-h-[44px] items-center gap-3 rounded-lg bg-muted px-3 text-sm\"\n              >\n                {step.state === 'done' ? (\n                  <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                ) : step.state === 'active' ? (\n                  <TerminalSquare className=\"size-4 text-primary\" />\n                ) : (\n                  <CircleDot className=\"size-4 text-muted-foreground\" />\n                )}\n                <span className=\"min-w-0 flex-1 truncate\">{step.label}</span>\n                <span className=\"text-xs text-muted-foreground\">{step.state}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-3 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n            <Code2 className=\"size-4\" />\n            Next command\n          </div>\n          <code className=\"block overflow-x-auto rounded-md bg-muted px-3 py-2 text-xs\">\n            npx shadcn@latest add https://ui.timkit.cn/r/agent-chat-01.json\n          </code>\n        </div>\n      </main>\n    </section>\n  )\n}\n\n```","title":"Agent Command Center · Command center"}}