{"name":"agent-tool-grid-01","type":"registry:block","description":"Block: agent-tool-grid-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-agent/agent-tool-grid-01.tsx","content":"'use client'\n\nimport { Bot, Code2, Database, FileJson2, MonitorSmartphone, ShieldCheck } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst tools = [\n  { name: 'Registry fetch', detail: '/r/{name}.json', icon: FileJson2 },\n  { name: 'SDK plan', detail: '@timui/agent', icon: Bot },\n  { name: 'CLI install', detail: 'shadcn add URL', icon: Code2 },\n  { name: 'Preview smoke', detail: 'LOAD_PREVIEW', icon: MonitorSmartphone },\n  { name: 'Data contract', detail: 'registry-index', icon: Database },\n  { name: 'A11y guard', detail: '44px targets', icon: ShieldCheck },\n]\n\nexport default function AgentToolGrid01() {\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 className=\"flex items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Agent tools</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Choose capability</h1>\n        </div>\n        <Badge className=\"rounded-md\" variant=\"secondary\">\n          6 tools\n        </Badge>\n      </header>\n\n      <main className=\"mt-5 grid flex-1 grid-cols-2 gap-3 overflow-y-auto pb-safe-bottom\">\n        {tools.map((tool) => {\n          const Icon = tool.icon\n          return (\n            <Button\n              key={tool.name}\n              className=\"h-auto min-h-[132px] flex-col items-start justify-between rounded-lg border bg-card p-4 text-left text-card-foreground hover:bg-muted\"\n              variant=\"ghost\"\n            >\n              <span className=\"grid size-10 place-items-center rounded-lg bg-primary/10 text-primary\">\n                <Icon className=\"size-5\" />\n              </span>\n              <span className=\"block\">\n                <span className=\"block text-sm font-semibold\">{tool.name}</span>\n                <span className=\"mt-1 block text-xs font-normal text-muted-foreground\">\n                  {tool.detail}\n                </span>\n              </span>\n            </Button>\n          )\n        })}\n      </main>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-agent/agent-tool-grid-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-tool-grid-01.tsx","isActive":true,"mdxBody":"```tsx\n'use client'\n\nimport { Bot, Code2, Database, FileJson2, MonitorSmartphone, ShieldCheck } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst tools = [\n  { name: 'Registry fetch', detail: '/r/{name}.json', icon: FileJson2 },\n  { name: 'SDK plan', detail: '@timui/agent', icon: Bot },\n  { name: 'CLI install', detail: 'shadcn add URL', icon: Code2 },\n  { name: 'Preview smoke', detail: 'LOAD_PREVIEW', icon: MonitorSmartphone },\n  { name: 'Data contract', detail: 'registry-index', icon: Database },\n  { name: 'A11y guard', detail: '44px targets', icon: ShieldCheck },\n]\n\nexport default function AgentToolGrid01() {\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 className=\"flex items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Agent tools</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Choose capability</h1>\n        </div>\n        <Badge className=\"rounded-md\" variant=\"secondary\">\n          6 tools\n        </Badge>\n      </header>\n\n      <main className=\"mt-5 grid flex-1 grid-cols-2 gap-3 overflow-y-auto pb-safe-bottom\">\n        {tools.map((tool) => {\n          const Icon = tool.icon\n          return (\n            <Button\n              key={tool.name}\n              className=\"h-auto min-h-[132px] flex-col items-start justify-between rounded-lg border bg-card p-4 text-left text-card-foreground hover:bg-muted\"\n              variant=\"ghost\"\n            >\n              <span className=\"grid size-10 place-items-center rounded-lg bg-primary/10 text-primary\">\n                <Icon className=\"size-5\" />\n              </span>\n              <span className=\"block\">\n                <span className=\"block text-sm font-semibold\">{tool.name}</span>\n                <span className=\"mt-1 block text-xs font-normal text-muted-foreground\">\n                  {tool.detail}\n                </span>\n              </span>\n            </Button>\n          )\n        })}\n      </main>\n    </section>\n  )\n}\n\n```","title":"Agent Tool Grid · Choose capability"}}