{"name":"mobile-agent-workbench","type":"registry:page","description":"Mobile template: mobile-agent-workbench","dependencies":["lucide-react"],"files":[{"path":"templates/mobile-app/mobile-agent-workbench.tsx","content":"'use client'\n\nimport {\n  Bot,\n  CheckCircle2,\n  Code2,\n  FileJson2,\n  Home,\n  Layers3,\n  Search,\n  Settings2,\n  TerminalSquare,\n} from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nconst recommendations = [\n  { name: 'agent-command-center-01', type: 'block' },\n  { name: 'agent-tool-grid-01', type: 'block' },\n  { name: 'mobile-agent-console', type: 'page' },\n]\n\nconst checks = ['Registry JSON fetched', 'Dependencies mapped', 'Preview protocol ready']\n\nexport default function MobileAgentWorkbenchPage() {\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=\"px-5 pb-4 pt-safe-top\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div>\n            <p className=\"text-xs font-medium text-muted-foreground\">Timkit for agents</p>\n            <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Build workbench</h1>\n          </div>\n          <Button\n            aria-label=\"Settings\"\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <Settings2 className=\"size-5\" />\n          </Button>\n        </div>\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=\"mb-4 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 className=\"min-w-0\">\n              <Badge className=\"rounded-md\" variant=\"secondary\">\n                Agent plan\n              </Badge>\n              <h2 className=\"mt-2 truncate text-base font-semibold\">Mobile SaaS console</h2>\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            {recommendations.map((item) => (\n              <div\n                key={item.name}\n                className=\"flex min-h-[44px] items-center gap-3 rounded-lg bg-muted px-3 text-sm\"\n              >\n                {item.type === 'page' ? (\n                  <FileJson2 className=\"size-4 text-primary\" />\n                ) : (\n                  <Layers3 className=\"size-4 text-primary\" />\n                )}\n                <span className=\"min-w-0 flex-1 truncate\">{item.name}</span>\n                <span className=\"text-xs text-muted-foreground\">{item.type}</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            <TerminalSquare className=\"size-4\" />\n            Install 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/mobile-agent-workbench.json\n          </code>\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <h2 className=\"text-sm font-semibold\">Verification</h2>\n          <div className=\"mt-3 grid gap-2\">\n            {checks.map((check) => (\n              <div key={check} className=\"flex min-h-[44px] items-center gap-2 text-sm\">\n                <CheckCircle2 className=\"size-4 text-emerald-600\" />\n                {check}\n              </div>\n            ))}\n          </div>\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=\"Ask for the next UI patch\" />\n          <Button aria-label=\"Generate\" className=\"size-11 rounded-lg\" size=\"icon\" type=\"button\">\n            <Code2 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, Layers3, 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-workbench/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-workbench.tsx"}}