@cueplusplus/ui 0.3.0 → 0.6.0

package/manifest/components/elements-data-table.json

@@ -0,0 +1,68 @@
+{
+  "name": "ElementsDataTable",
+  "slug": "elements-data-table",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A small comparison table the model can answer with directly.",
+  "props": [
+    {
+      "name": "rows",
+      "type": "readonly ModelUsage[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Table rows with model name, context window, and cost."
+    },
+    {
+      "name": "cycle",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Identity key that remounts the body so row entrance can replay."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-micro"
+  ],
+  "summary": "A small comparison table the model can answer with directly.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { DataTable } from \"@cueplusplus/ui/elements\";\n\n<DataTable\n  rows={[{ name: \"Sonnet\", context: \"200k\", cost: \"$3\" }]}\n  cycle={0}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/elements-data-table",
+  "mdUrl": "/docs/components/elements-data-table.md",
+  "jsonUrl": "/r/components/elements-data-table.json",
+  "specimens": [
+    {
+      "title": "ElementsDataTable",
+      "group": "elements-knowledge",
+      "components": [
+        "ElementsDataTable"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"what the research cost\" wide>\n    <ElementsDataTable rows={USAGE} cycle={0} />\n  </Specimen>\n  <Specimen label=\"one row\" wide>\n    <ElementsDataTable rows={USAGE.slice(0, 1)} cycle={1} />\n  </Specimen>\n</Specimens>",
+      "note": "A small table the model can answer with directly — three columns, no sorting, no virtualisation, no header menu. It is `ElementsDataTable` because the package already sells a real one at `@cueplusplus/ui/instruments`: that one is a data grid, this one is a paragraph shaped like a grid, and the rename keeps a consumer from reaching for the wrong one.",
+      "interaction": "none. `cycle` remounts the body, so a new answer's rows stagger in rather than mutating in place."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/elements-timeline.json

@@ -0,0 +1,69 @@
+{
+  "name": "ElementsTimeline",
+  "slug": "elements-timeline",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Events on a time axis, with what already happened and what is still coming.",
+  "props": [
+    {
+      "name": "events",
+      "type": "readonly TimelineEvent[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Events in chronological order, past and scheduled together."
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many events have been resolved."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"events\" | \"visibleCount\"> & {\n  /** Events in chronological order, past and scheduled together. */\n  events: readonly TimelineEvent[];\n  /** How many events have been resolved. */\n  visibleCount: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Events on a time axis, with what already happened and what is still coming.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Timeline } from \"@cueplusplus/ui/elements\";\n\n<Timeline events={events} visibleCount={events.length} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/elements-timeline",
+  "mdUrl": "/docs/components/elements-timeline.md",
+  "jsonUrl": "/r/components/elements-timeline.json",
+  "specimens": [
+    {
+      "title": "ElementsTimeline",
+      "group": "elements-agents",
+      "components": [
+        "ElementsTimeline"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"past, now and scheduled\" wide>\n    <ElementsTimeline events={EVENTS} visibleCount={EVENTS.length} />\n  </Specimen>\n  <Specimen label=\"two events in\" wide>\n    <ElementsTimeline events={EVENTS} visibleCount={2} />\n  </Specimen>\n</Specimens>",
+      "note": "Events on one axis, with what already happened and what is still coming in the same list — `past`, `now` and `future` are one union, so a schedule and a history are the same component. It publishes as `ElementsTimeline` because cue already sells a `Timeline`; the spec asked for `ToolTimeline`, which turned out to be the next bench's name.",
+      "interaction": "none. The now marker is the only one that pulses, and it holds still for a reader who asked for less motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/elicitation-form.json

@@ -0,0 +1,103 @@
+{
+  "name": "ElicitationForm",
+  "slug": "elicitation-form",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A server pausing mid-tool-call to ask you for the fields it still needs.",
+  "props": [
+    {
+      "name": "server",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which server paused to ask."
+    },
+    {
+      "name": "message",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Why the input is needed, in the server's words."
+    },
+    {
+      "name": "fields",
+      "type": "readonly ElicitationField[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The schema the server sent, already resolved to display values."
+    },
+    {
+      "name": "state",
+      "type": "\"request\" | \"accepted\" | \"declined\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "Swaps the action row for the outcome once the user answers."
+    },
+    {
+      "name": "onAccept",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the filled form is sent back."
+    },
+    {
+      "name": "onDecline",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the request is refused."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"server\"\n  | \"message\"\n  | \"fields\"\n  | \"state\"\n  | \"onAccept\"\n  | \"onDecline\"\n> & {\n  /** Which server paused to ask. */\n  server: string;\n  /** Why the input is needed, in the server's words. */\n  message: string;\n  /** The schema the server sent, already resolved to display values. */\n  fields: readonly ElicitationField[];\n  /** Swaps the action row for the outcome once the user answers. */\n  state: ElicitationState;\n  /** Called when the filled form is sent back. */\n  onAccept?: () => void;\n  /** Called when the request is refused. */\n  onDecline?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A server pausing mid-tool-call to ask you for the fields it still needs.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ElicitationForm } from \"@cueplusplus/ui/elements\";\n\n<ElicitationForm\n  server=\"github-mcp\"\n  message=\"Confirm where the release notes should be published.\"\n  fields={fields}\n  state=\"request\"\n  onAccept={send}\n  onDecline={decline}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/elicitation-form",
+  "mdUrl": "/docs/components/elicitation-form.md",
+  "jsonUrl": "/r/components/elicitation-form.json",
+  "specimens": [
+    {
+      "title": "ElicitationForm",
+      "group": "elements-composer",
+      "components": [
+        "ElicitationForm"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"asking\" wide>\n    <ElicitationForm\n      server=\"eos-desk\"\n      message=\"Confirm which universe to patch into before I write anything to the show file.\"\n      fields={FIELDS}\n      state={elicitation}\n      onAccept={() => setElicitation(\"accepted\")}\n      onDecline={() => setElicitation(\"declined\")}\n    />\n  </Specimen>\n  <Specimen label=\"answered\" wide>\n    <ElicitationForm\n      server=\"eos-desk\"\n      message=\"Confirm which universe to patch into before I write anything to the show file.\"\n      fields={FIELDS}\n      state=\"accepted\"\n    />\n  </Specimen>\n  <Specimen label=\"refused\" wide>\n    <ElicitationForm\n      server=\"eos-desk\"\n      message=\"Confirm which universe to patch into before I write anything to the show file.\"\n      fields={FIELDS}\n      state=\"declined\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A server pausing mid-tool-call to ask for the fields it still needs — MCP's elicitation, drawn. The fields arrive already resolved to display values, so the element renders a schema without ever having parsed one, and `state` swaps the two buttons for the outcome the moment the user answers. Declining is a first-class answer here, not a dismissal.",
+      "interaction": "each field's control is chosen by its `kind` — a value chip, a row of options, or a switch — and the required ones are marked on the label rather than announced only on failure."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/empty-state-composer.json

@@ -0,0 +1,64 @@
+{
+  "name": "EmptyStateComposer",
+  "slug": "empty-state-composer",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A composer-shaped invitation under the suggestions. It is a display rather than a\nworking input — the placeholder is a string and send takes a handler — for the\nscreen whose real composer is somewhere else.",
+  "props": [
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Resting text in the input bar."
+    },
+    {
+      "name": "onSend",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the send control. Omit it and the control renders disabled."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"placeholder\"> & {\n  /** Resting text in the input bar. */\n  placeholder: string;\n  /** Called from the send control. Omit it and the control renders disabled. */\n  onSend?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-title"
+  ],
+  "summary": "A composer-shaped invitation under the suggestions.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/empty-state-composer",
+  "mdUrl": "/docs/components/empty-state-composer.md",
+  "jsonUrl": "/r/components/empty-state-composer.json",
+  "specimens": [
+    {
+      "title": "ChatEmptyState",
+      "group": "elements-composer",
+      "components": [
+        "ChatEmptyState",
+        "EmptyStateGreeting",
+        "EmptyStateSuggestions",
+        "EmptyStateSuggestion",
+        "EmptyStateComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"greeting, ways in, composer\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>What is the rig doing tonight?</EmptyStateGreeting>\n      <EmptyStateSuggestions>\n        {OPENERS.map((opener, index) => (\n          <EmptyStateSuggestion key={opener} index={index}>\n            {opener}\n          </EmptyStateSuggestion>\n        ))}\n      </EmptyStateSuggestions>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" onSend={() => undefined} />\n    </ChatEmptyState>\n  </Specimen>\n  <Specimen label=\"greeting only\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>Ready when you are.</EmptyStateGreeting>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" />\n    </ChatEmptyState>\n  </Specimen>\n</Specimens>",
+      "note": "The first screen, composed rather than configured: a greeting, some ways in, and a composer-shaped invitation. `EmptyStateComposer` is a display and not a working input — the placeholder is a string and send takes a handler — for the screen whose real composer is somewhere else. The suggestions stagger their entrance from `index`, so the row arrives left to right instead of all at once. Named `ChatEmptyState` because cue already publishes a layout `EmptyState`.",
+      "interaction": "each suggestion is a button with cue's focus ring; the greeting is an `h2`, so a screen reader lands on the sentence rather than the pills."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/empty-state-greeting.json

@@ -0,0 +1,49 @@
+{
+  "name": "EmptyStateGreeting",
+  "slug": "empty-state-greeting",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The one line at the top of a blank thread. A heading, so a screen reader lands on it.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"h2\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-title"
+  ],
+  "summary": "The one line at the top of a blank thread.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/empty-state-greeting",
+  "mdUrl": "/docs/components/empty-state-greeting.md",
+  "jsonUrl": "/r/components/empty-state-greeting.json",
+  "specimens": [
+    {
+      "title": "ChatEmptyState",
+      "group": "elements-composer",
+      "components": [
+        "ChatEmptyState",
+        "EmptyStateGreeting",
+        "EmptyStateSuggestions",
+        "EmptyStateSuggestion",
+        "EmptyStateComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"greeting, ways in, composer\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>What is the rig doing tonight?</EmptyStateGreeting>\n      <EmptyStateSuggestions>\n        {OPENERS.map((opener, index) => (\n          <EmptyStateSuggestion key={opener} index={index}>\n            {opener}\n          </EmptyStateSuggestion>\n        ))}\n      </EmptyStateSuggestions>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" onSend={() => undefined} />\n    </ChatEmptyState>\n  </Specimen>\n  <Specimen label=\"greeting only\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>Ready when you are.</EmptyStateGreeting>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" />\n    </ChatEmptyState>\n  </Specimen>\n</Specimens>",
+      "note": "The first screen, composed rather than configured: a greeting, some ways in, and a composer-shaped invitation. `EmptyStateComposer` is a display and not a working input — the placeholder is a string and send takes a handler — for the screen whose real composer is somewhere else. The suggestions stagger their entrance from `index`, so the row arrives left to right instead of all at once. Named `ChatEmptyState` because cue already publishes a layout `EmptyState`.",
+      "interaction": "each suggestion is a button with cue's focus ring; the greeting is an `h2`, so a screen reader lands on the sentence rather than the pills."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/empty-state-suggestion.json

@@ -0,0 +1,57 @@
+{
+  "name": "EmptyStateSuggestion",
+  "slug": "empty-state-suggestion",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One thing worth asking, as a pill. `index` staggers its entrance so the row arrives\nleft to right rather than all at once.",
+  "props": [
+    {
+      "name": "index",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Position in the row. Staggers the entrance so the pills arrive in order."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"button\"> & {\n  /** Position in the row. Staggers the entrance so the pills arrive in order. */\n  index?: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-title"
+  ],
+  "summary": "One thing worth asking, as a pill.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/empty-state-suggestion",
+  "mdUrl": "/docs/components/empty-state-suggestion.md",
+  "jsonUrl": "/r/components/empty-state-suggestion.json",
+  "specimens": [
+    {
+      "title": "ChatEmptyState",
+      "group": "elements-composer",
+      "components": [
+        "ChatEmptyState",
+        "EmptyStateGreeting",
+        "EmptyStateSuggestions",
+        "EmptyStateSuggestion",
+        "EmptyStateComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"greeting, ways in, composer\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>What is the rig doing tonight?</EmptyStateGreeting>\n      <EmptyStateSuggestions>\n        {OPENERS.map((opener, index) => (\n          <EmptyStateSuggestion key={opener} index={index}>\n            {opener}\n          </EmptyStateSuggestion>\n        ))}\n      </EmptyStateSuggestions>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" onSend={() => undefined} />\n    </ChatEmptyState>\n  </Specimen>\n  <Specimen label=\"greeting only\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>Ready when you are.</EmptyStateGreeting>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" />\n    </ChatEmptyState>\n  </Specimen>\n</Specimens>",
+      "note": "The first screen, composed rather than configured: a greeting, some ways in, and a composer-shaped invitation. `EmptyStateComposer` is a display and not a working input — the placeholder is a string and send takes a handler — for the screen whose real composer is somewhere else. The suggestions stagger their entrance from `index`, so the row arrives left to right instead of all at once. Named `ChatEmptyState` because cue already publishes a layout `EmptyState`.",
+      "interaction": "each suggestion is a button with cue's focus ring; the greeting is an `h2`, so a screen reader lands on the sentence rather than the pills."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/empty-state-suggestions.json

@@ -0,0 +1,49 @@
+{
+  "name": "EmptyStateSuggestions",
+  "slug": "empty-state-suggestions",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The row the suggestion pills wrap in.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-title"
+  ],
+  "summary": "The row the suggestion pills wrap in.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/empty-state-suggestions",
+  "mdUrl": "/docs/components/empty-state-suggestions.md",
+  "jsonUrl": "/r/components/empty-state-suggestions.json",
+  "specimens": [
+    {
+      "title": "ChatEmptyState",
+      "group": "elements-composer",
+      "components": [
+        "ChatEmptyState",
+        "EmptyStateGreeting",
+        "EmptyStateSuggestions",
+        "EmptyStateSuggestion",
+        "EmptyStateComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"greeting, ways in, composer\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>What is the rig doing tonight?</EmptyStateGreeting>\n      <EmptyStateSuggestions>\n        {OPENERS.map((opener, index) => (\n          <EmptyStateSuggestion key={opener} index={index}>\n            {opener}\n          </EmptyStateSuggestion>\n        ))}\n      </EmptyStateSuggestions>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" onSend={() => undefined} />\n    </ChatEmptyState>\n  </Specimen>\n  <Specimen label=\"greeting only\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>Ready when you are.</EmptyStateGreeting>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" />\n    </ChatEmptyState>\n  </Specimen>\n</Specimens>",
+      "note": "The first screen, composed rather than configured: a greeting, some ways in, and a composer-shaped invitation. `EmptyStateComposer` is a display and not a working input — the placeholder is a string and send takes a handler — for the screen whose real composer is somewhere else. The suggestions stagger their entrance from `index`, so the row arrives left to right instead of all at once. Named `ChatEmptyState` because cue already publishes a layout `EmptyState`.",
+      "interaction": "each suggestion is a button with cue's focus ring; the greeting is an `h2`, so a screen reader lands on the sentence rather than the pills."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/end-of-turn-summary.json

@@ -0,0 +1,77 @@
+{
+  "name": "EndOfTurnSummary",
+  "slug": "end-of-turn-summary",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "What the turn came to, in one line: `3 files changed +48 −12`.\n\nA rollup, not a control: it says what happened and offers nothing to do about\nit, because the things to do about it — review, keep, reject — belong to a\nbar above the composer that acts on the whole run, and a per-turn row with\nthose buttons on it is a row that can be pressed after the next turn has\nalready changed the same files.\n\nThe counts are drawn only when there are some. A turn that read four files\nand wrote nothing says `No files changed` and stops, rather than saying it\nwith two zeroes.",
+  "props": [
+    {
+      "name": "files",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many files the turn touched."
+    },
+    {
+      "name": "additions",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Lines added across them."
+    },
+    {
+      "name": "deletions",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Lines removed across them."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The whole line, replacing the one {@link formatChangeSummary} would build —\nfor a turn whose result is not a diff at all: `2 cues written`,\n`Nothing to change`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-ok",
+    "--cue-text-ui"
+  ],
+  "summary": "What the turn came to, in one line: `3 files changed +48 −12`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { EndOfTurnSummary } from \"@cueplusplus/ui/elements\";\n\n<EndOfTurnSummary files={3} additions={48} deletions={12} />\n<EndOfTurnSummary files={0} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/end-of-turn-summary",
+  "mdUrl": "/docs/components/end-of-turn-summary.md",
+  "jsonUrl": "/r/components/end-of-turn-summary.json",
+  "specimens": [
+    {
+      "title": "EndOfTurnSummary",
+      "group": "elements-thread",
+      "components": [
+        "EndOfTurnSummary"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"three files\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={3} additions={48} deletions={12} />\n    </div>\n  </Specimen>\n  <Specimen label=\"one file, additions only\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={1} additions={6} />\n    </div>\n  </Specimen>\n  <Specimen label=\"nothing changed\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={0} />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "What the turn came to, in one line. A rollup and not a control: review, keep and reject act on the whole run and belong above the composer, where they cannot be pressed after the next turn has already changed the same files. The + and − are CodeDiff's glyphs, so one transcript never shows two conventions for the same number, and a turn that changed nothing says so instead of saying it with two zeroes.",
+      "interaction": "none. It is a sentence with two tinted numbers in it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/env-var-input.json

@@ -102,12 +102,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",

package/manifest/components/error-state.json

@@ -0,0 +1,80 @@
+{
+  "name": "ErrorState",
+  "slug": "error-state",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A quiet failure banner with a retry path, not a modal in your face.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Primary failure headline shown in the banner."
+    },
+    {
+      "name": "detail",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Supporting detail under the title explaining what went wrong."
+    },
+    {
+      "name": "retrying",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the banner swaps to a spinning Retrying status instead of the error."
+    },
+    {
+      "name": "onRetry",
+      "type": "() => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the retry control is pressed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"role\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-radius-overlay",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A quiet failure banner with a retry path, not a modal in your face.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ErrorState } from \"@cueplusplus/ui/elements\";\n\n<ErrorState\n  title=\"Request failed\"\n  detail=\"The model timed out.\"\n  retrying={false}\n  onRetry={() => {}}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/error-state",
+  "mdUrl": "/docs/components/error-state.md",
+  "jsonUrl": "/r/components/error-state.json",
+  "specimens": [
+    {
+      "title": "ErrorState",
+      "group": "elements-agents",
+      "components": [
+        "ErrorState"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"failed\" wide>\n    <ErrorState\n      title=\"The desk refused the patch\"\n      detail=\"Universe 3 is not enabled on this show file. Enable it on the desk, or patch into universes 1 and 2.\"\n      retrying={false}\n      onRetry={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"retrying\" wide>\n    <ErrorState\n      title=\"The desk refused the patch\"\n      detail=\"Universe 3 is not enabled on this show file.\"\n      retrying\n      onRetry={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A failure banner, not a modal: it sits in the flow where the answer would have been, says what broke and what to do, and leaves the rest of the page alone. Retrying is a different element entirely rather than a disabled button — `role='alert'` while it is a failure, `role='status'` while it is trying again, which is the difference between interrupting a screen reader and not.",
+      "interaction": "Retry is a named button that tints on hover. The retrying state has no control at all, because there is nothing to press while it works."
+    }
+  ],
+  "todo": true
+}