{"name":"mobile-agent-console","type":"registry:page","description":"Mobile template: mobile-agent-console","dependencies":["lucide-react"],"files":[{"path":"templates/mobile-app/mobile-agent-console.tsx","content":"'use client'\n\nimport { ArrowUp, Bot, CheckCircle2, Code2, Home, Layers, Search, Settings2 } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nconst steps = ['Select mobile template', 'Install registry deps', 'Patch theme tokens']\n\nexport default function MobileAgentConsolePage() {\n  return (\n    <main className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"flex items-center justify-between px-5 pb-4 pt-safe-top\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Agent console</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Build session</h1>\n        </div>\n        <Button aria-label=\"Settings\" className=\"size-11 rounded-lg\" size=\"icon\" variant=\"outline\">\n          <Settings2 className=\"size-5\" />\n        </Button>\n      </header>\n\n      <section className=\"flex flex-1 flex-col gap-4 overflow-y-auto px-5 pb-24\">\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"grid size-11 place-items-center rounded-lg bg-primary text-primary-foreground\">\n              <Bot className=\"size-5\" />\n            </div>\n            <div>\n              <Badge className=\"rounded-md\" variant=\"secondary\">\n                Timkit registry\n              </Badge>\n              <h2 className=\"mt-2 text-base font-semibold\">Mobile checkout flow</h2>\n            </div>\n          </div>\n          <div className=\"mt-4 grid gap-2\">\n            {steps.map((step, index) => (\n              <div\n                key={step}\n                className=\"flex min-h-[44px] items-center gap-2 rounded-lg bg-muted px-3 text-sm\"\n              >\n                {index < 2 ? (\n                  <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                ) : (\n                  <Code2 className=\"size-4 text-muted-foreground\" />\n                )}\n                {step}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"max-w-[86%] rounded-lg bg-muted p-3 text-sm leading-relaxed\">\n          Use mobile-marketplace and replace the product cards with the checkout summary.\n        </div>\n        <div className=\"ml-auto max-w-[86%] rounded-lg bg-primary p-3 text-sm leading-relaxed text-primary-foreground\">\n          I found the template and will install button, input, badge, and card dependencies.\n        </div>\n\n        <form className=\"fixed inset-x-0 bottom-[68px] mx-auto flex max-w-md gap-2 bg-background/95 px-5 py-3 backdrop-blur\">\n          <Input className=\"min-h-[44px] rounded-lg\" placeholder=\"Describe the next UI change\" />\n          <Button aria-label=\"Send\" className=\"size-11 rounded-lg\" size=\"icon\" type=\"button\">\n            <ArrowUp className=\"size-4\" />\n          </Button>\n        </form>\n      </section>\n\n      <nav className=\"fixed inset-x-0 bottom-0 mx-auto flex max-w-md justify-around border-t bg-background/95 px-5 py-3 pb-safe-bottom backdrop-blur\">\n        {[Home, Search, Layers, Settings2].map((Icon, index) => (\n          <Button\n            key={index}\n            aria-label={`Tab ${index + 1}`}\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant={index === 0 ? 'secondary' : 'ghost'}\n          >\n            <Icon className=\"size-5\" />\n          </Button>\n        ))}\n      </nav>\n    </main>\n  )\n}\n","type":"registry:page","target":"app/mobile-agent-console/page.tsx"}],"categories":["mobile-app"],"registryDependencies":["badge","button","input"],"meta":{"frameworks":["react"],"category":"mobile-app","tags":["mobile","template","mobile-app"],"clientOnly":true,"viewport":"mobile-first","source":"packages/react/src/templates","previewPath":"registry/default/templates/mobile-app/mobile-agent-console.tsx"}}