{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-screen",
  "title": "Settings Screen",
  "description": "A full settings page built only from Spotcheck parts. Drop it in, then cut it down.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json",
    "https://spotcheckui.com/r/app-frame.json",
    "https://spotcheckui.com/r/button.json",
    "https://spotcheckui.com/r/checkbox.json",
    "https://spotcheckui.com/r/combobox.json",
    "https://spotcheckui.com/r/date-picker.json",
    "https://spotcheckui.com/r/dialog.json",
    "https://spotcheckui.com/r/field.json",
    "https://spotcheckui.com/r/hold-button.json",
    "https://spotcheckui.com/r/ledger-table.json",
    "https://spotcheckui.com/r/radio-group.json",
    "https://spotcheckui.com/r/segmented.json",
    "https://spotcheckui.com/r/select.json",
    "https://spotcheckui.com/r/status-pill.json",
    "https://spotcheckui.com/r/switch.json",
    "https://spotcheckui.com/r/tabs.json",
    "https://spotcheckui.com/r/toast.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/settings-screen.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { AppFrame } from \"@/registry/spotcheck/components/spotcheck/app-frame\"\nimport { Button } from \"@/registry/spotcheck/components/spotcheck/button\"\nimport { Checkbox } from \"@/registry/spotcheck/components/spotcheck/checkbox\"\nimport { Combobox } from \"@/registry/spotcheck/components/spotcheck/combobox\"\nimport { DatePicker } from \"@/registry/spotcheck/components/spotcheck/date-picker\"\nimport { Dialog, DialogClose, DialogContent, DialogTrigger } from \"@/registry/spotcheck/components/spotcheck/dialog\"\nimport { Field, Input } from \"@/registry/spotcheck/components/spotcheck/field\"\nimport { HoldButton } from \"@/registry/spotcheck/components/spotcheck/hold-button\"\nimport { LedgerTable, type LedgerColumn } from \"@/registry/spotcheck/components/spotcheck/ledger-table\"\nimport { RadioGroup } from \"@/registry/spotcheck/components/spotcheck/radio-group\"\nimport { Segmented } from \"@/registry/spotcheck/components/spotcheck/segmented\"\nimport { Select } from \"@/registry/spotcheck/components/spotcheck/select\"\nimport { StatusPill } from \"@/registry/spotcheck/components/spotcheck/status-pill\"\nimport { Switch } from \"@/registry/spotcheck/components/spotcheck/switch\"\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/spotcheck/components/spotcheck/tabs\"\nimport { ToastProvider, toast } from \"@/registry/spotcheck/components/spotcheck/toast\"\n\nconst NAME_LIMIT = 32\nconst MODELS = [\n  { value: \"atlas-l\", label: \"atlas-l\" },\n  { value: \"atlas-m\", label: \"atlas-m\" },\n  { value: \"atlas-s\", label: \"atlas-s\" },\n]\nconst REGIONS = [\"Mumbai\", \"Hyderabad\", \"Singapore\", \"Frankfurt\", \"Virginia\", \"Oregon\"]\nconst RETENTION = [\n  { value: \"30\", label: \"30 days\" },\n  { value: \"90\", label: \"90 days\" },\n  { value: \"365\", label: \"One year\" },\n]\n\ntype ApiKey = { id: string; name: string; used: number; status: \"active\" | \"expiring\" }\n\nconst KEYS: ApiKey[] = [\n  { id: \"k1\", name: \"ci-runner\", used: 18204, status: \"active\" },\n  { id: \"k2\", name: \"staging-worker\", used: 4310, status: \"active\" },\n  { id: \"k3\", name: \"old-notebook\", used: 92, status: \"expiring\" },\n]\n\nconst KEY_COLUMNS: LedgerColumn<ApiKey>[] = [\n  { key: \"name\", label: \"Key\", emphasis: true },\n  { key: \"used\", label: \"Calls\", numeric: true, render: (key) => key.used.toLocaleString(\"en-US\") },\n  {\n    key: \"status\",\n    label: \"Status\",\n    render: (key) => <StatusPill tone={key.status === \"active\" ? \"ok\" : \"warn\"}>{key.status}</StatusPill>,\n  },\n]\n\nexport function SettingsScreen() {\n  const [name, setName] = React.useState(\"support-qa\")\n  const nameError = name.trim() ? undefined : \"Give the workspace a name so people can find it.\"\n\n  return (\n    <ToastProvider>\n      <AppFrame title=\"console / settings\">\n        <div className=\"p-4\">\n          <Tabs defaultValue=\"general\">\n            <TabsList>\n              <TabsTab value=\"general\">General</TabsTab>\n              <TabsTab value=\"alerts\">Alerts</TabsTab>\n              <TabsTab value=\"keys\">API keys</TabsTab>\n              <TabsTab value=\"danger\">Danger</TabsTab>\n            </TabsList>\n\n            <TabsPanel value=\"general\" className=\"flex max-w-120 flex-col gap-4\">\n              <Field label=\"Workspace name\" hint={`${name.length}/${NAME_LIMIT}`} error={nameError}>\n                <Input value={name} maxLength={NAME_LIMIT} onChange={(event) => setName(event.target.value)} />\n              </Field>\n              <div className=\"grid gap-4 sm:grid-cols-2\">\n                <Field label=\"Default model\">\n                  <Select label=\"Default model\" options={MODELS} defaultValue=\"atlas-m\" />\n                </Field>\n                <Field label=\"Region\">\n                  <Combobox label=\"Region\" options={REGIONS} defaultValue=\"Mumbai\" />\n                </Field>\n              </div>\n              <div className=\"flex flex-wrap items-center gap-4\">\n                <DatePicker label=\"Billing starts\" defaultMonth={new Date(2026, 10, 1)} />\n                <Button\n                  variant=\"accent\"\n                  disabled={Boolean(nameError)}\n                  onClick={() => toast.add({ title: \"Saved\", description: `${name} is up to date.` })}\n                >\n                  Save\n                </Button>\n              </div>\n            </TabsPanel>\n\n            <TabsPanel value=\"alerts\" className=\"flex flex-col items-start gap-4\">\n              <Switch defaultChecked>Email me when an eval fails</Switch>\n              <Switch>Post spend alerts to the team</Switch>\n              <Checkbox defaultChecked>Include weekends</Checkbox>\n              <div className=\"flex items-center gap-3\">\n                <span className=\"spotcheck-label\">Digest</span>\n                <Segmented label=\"Digest\" options={[\"Off\", \"Daily\", \"Weekly\"]} defaultValue=\"Daily\" />\n              </div>\n              <RadioGroup label=\"Keep traces for\" options={RETENTION} defaultValue=\"90\" />\n            </TabsPanel>\n\n            <TabsPanel value=\"keys\" className=\"flex flex-col items-start gap-4\">\n              <LedgerTable\n                title=\"API keys\"\n                rows={KEYS}\n                columns={KEY_COLUMNS}\n                rowKey=\"id\"\n                defaultSort={{ key: \"used\", dir: \"desc\" }}\n                className=\"w-full\"\n              />\n              <Dialog>\n                <DialogTrigger render={<Button variant=\"ink\" />}>New key</DialogTrigger>\n                <DialogContent title=\"New API key\" description=\"It's shown once, so copy it somewhere safe.\">\n                  <Field label=\"Key name\">\n                    <Input defaultValue=\"my-worker\" />\n                  </Field>\n                  <div className=\"mt-4 flex gap-3\">\n                    <DialogClose render={<Button variant=\"accent\" />}>Create key</DialogClose>\n                    <DialogClose render={<Button variant=\"ghost\" />}>Cancel</DialogClose>\n                  </div>\n                </DialogContent>\n              </Dialog>\n            </TabsPanel>\n\n            <TabsPanel value=\"danger\" className=\"flex flex-col items-start gap-3\">\n              <p className=\"max-w-[52ch] text-sm\">\n                This removes every run, dataset and key in the workspace. It can&apos;t be undone.\n              </p>\n              <HoldButton confirmedLabel=\"Workspace deleted · press to reset\">Hold to delete workspace</HoldButton>\n            </TabsPanel>\n          </Tabs>\n        </div>\n      </AppFrame>\n    </ToastProvider>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "screens"
  ],
  "type": "registry:component"
}