{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-dashboard",
  "title": "Command Dashboard",
  "description": "A searchable operations dashboard with service health and a keyboard-accessible command surface.",
  "registryDependencies": [
    "@rivetui/button",
    "@rivetui/card",
    "@rivetui/command-bar",
    "@rivetui/keyboard-shortcut",
    "@rivetui/search-field",
    "@rivetui/status"
  ],
  "files": [
    {
      "path": "registry/rivetui/blocks/command-dashboard/command-dashboard.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/rivetui/components/button/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/rivetui/components/card/card\";\nimport {\n  CommandBar,\n  type CommandBarAction,\n  CommandBarTrigger,\n} from \"@/registry/rivetui/components/command-bar/command-bar\";\nimport { KeyboardShortcut } from \"@/registry/rivetui/components/keyboard-shortcut/keyboard-shortcut\";\nimport { SearchField } from \"@/registry/rivetui/components/search-field/search-field\";\nimport { Status } from \"@/registry/rivetui/components/status/status\";\n\ntype DashboardService = {\n  id: string;\n  name: string;\n  description: string;\n  environment: string;\n  state: \"attention\" | \"healthy\" | \"paused\";\n};\n\ntype CommandDashboardProps = React.ComponentProps<\"section\"> & {\n  commandBarHotkey?: boolean;\n  onCommandSelect?: (action: CommandBarAction) => void;\n  services?: readonly DashboardService[];\n};\n\nconst exampleServices: readonly DashboardService[] = [\n  {\n    id: \"gateway\",\n    name: \"API Gateway\",\n    description: \"Routes public traffic across three regions.\",\n    environment: \"Production\",\n    state: \"healthy\",\n  },\n  {\n    id: \"worker\",\n    name: \"Event Worker\",\n    description: \"Processes billing and lifecycle events.\",\n    environment: \"Production\",\n    state: \"attention\",\n  },\n  {\n    id: \"console\",\n    name: \"Admin Console\",\n    description: \"Internal operational interface.\",\n    environment: \"Preview\",\n    state: \"paused\",\n  },\n];\n\nconst statusTone = {\n  healthy: \"success\",\n  attention: \"warning\",\n  paused: \"neutral\",\n} as const;\n\nfunction CommandDashboard({\n  className,\n  commandBarHotkey = true,\n  onCommandSelect,\n  services = exampleServices,\n  ...props\n}: CommandDashboardProps) {\n  const [query, setQuery] = React.useState(\"\");\n  const filteredServices = services.filter((service) =>\n    [service.name, service.description, service.environment, service.state]\n      .join(\" \")\n      .toLocaleLowerCase()\n      .includes(query.trim().toLocaleLowerCase()),\n  );\n  const commands: readonly CommandBarAction[] = [\n    {\n      id: \"deploy\",\n      label: \"Create deployment\",\n      description: \"Start a production deployment\",\n      group: \"Deploy\",\n    },\n    {\n      id: \"logs\",\n      label: \"Open live logs\",\n      description: \"Stream logs from the selected service\",\n      group: \"Inspect\",\n    },\n    {\n      id: \"incident\",\n      label: \"Declare incident\",\n      description: \"Open the incident response workflow\",\n      group: \"Operations\",\n    },\n  ];\n\n  return (\n    <section\n      aria-labelledby=\"command-dashboard-title\"\n      className={cn(\"w-full max-w-5xl border border-border bg-background\", className)}\n      {...props}\n    >\n      <header className=\"grid gap-5 border-b border-border p-5 sm:p-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end\">\n        <div>\n          <p className=\"font-mono text-[0.625rem] uppercase tracking-[0.14em] text-muted-foreground\">\n            Operations / Overview\n          </p>\n          <h2\n            id=\"command-dashboard-title\"\n            className=\"mt-3 text-2xl font-semibold tracking-[-0.04em]\"\n          >\n            Command dashboard\n          </h2>\n          <p className=\"mt-2 max-w-xl text-sm leading-6 text-muted-foreground\">\n            Search services, inspect health, and open common operational actions.\n          </p>\n        </div>\n        <CommandBar\n          actions={commands}\n          hotkey={commandBarHotkey}\n          label=\"Operational commands\"\n          placeholder=\"Search operational commands\"\n          onActionSelect={onCommandSelect}\n        >\n          <CommandBarTrigger render={<Button type=\"button\" variant=\"outline\" />}>\n            Quick actions\n            <KeyboardShortcut keys={[\"mod\", \"K\"]} size=\"sm\" />\n          </CommandBarTrigger>\n        </CommandBar>\n      </header>\n\n      <div className=\"border-b border-border p-5 sm:p-6\">\n        <SearchField\n          value={query}\n          onValueChange={setQuery}\n          placeholder=\"Search services, environments, or states\"\n          aria-label=\"Search services\"\n        />\n      </div>\n\n      <div className=\"grid gap-px bg-border sm:grid-cols-2 xl:grid-cols-3\">\n        {filteredServices.map((service) => (\n          <Card key={service.id} className=\"border-0\">\n            <CardHeader>\n              <CardTitle>{service.name}</CardTitle>\n              <CardDescription>{service.environment}</CardDescription>\n              <CardAction>\n                <Status tone={statusTone[service.state]} className=\"text-xs capitalize\">\n                  {service.state}\n                </Status>\n              </CardAction>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm leading-6 text-muted-foreground\">{service.description}</p>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"mt-5 px-0\">\n                Open service\n              </Button>\n            </CardContent>\n          </Card>\n        ))}\n        {filteredServices.length === 0 ? (\n          <div className=\"col-span-full bg-background px-5 py-14 text-center\">\n            <p className=\"text-sm font-medium\">No services found</p>\n            <p className=\"mt-1 text-sm text-muted-foreground\">\n              Try another name, environment, or state.\n            </p>\n          </div>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n\nexport type { CommandDashboardProps, DashboardService };\nexport { CommandDashboard, exampleServices };\n",
      "type": "registry:component",
      "target": "components/blocks/command-dashboard.tsx"
    }
  ],
  "categories": [
    "dashboard",
    "developer-tools"
  ],
  "type": "registry:block"
}