@cueplusplus/ui 0.13.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CUE++ contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,34 @@
+# Third-party notice — assistant-ui Elements
+
+The files in this directory are vendored from [assistant-ui/assistant-ui](https://github.com/assistant-ui/assistant-ui)
+at commit `31a049fcfa846a76da7c8e2c0bcd62960825dbd4` (2026-08-22), from `packages/ui/src/components/elements/`.
+They are rewritten onto CUE++ tokens by `scripts/elements-sync/`, which also records every
+byte it fetched in `scripts/elements-sync/elements-sync.lock.json`.
+
+Elements are distributed only as copy-in source through a shadcn registry — there is no npm
+package to depend on — so vendoring is the intended use, and the licence below is the whole
+obligation it carries.
+
+```
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/README.md

@@ -0,0 +1,237 @@
+# @cueplusplus/ui
+
+Components for console software: dense, keyboard-first interfaces where a screen is mostly data.
+Base UI underneath for behaviour and accessibility, Tailwind v4 on top for the paint.
+
+## Install
+
+The `@cueplusplus` scope is served by **GitHub Packages**, not npmjs.com, and GitHub Packages
+authenticates *every* install. That is two settings, in two places, and the split is not
+cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
+with `401`.
+
+Commit the scope routing, and nothing else, at the root of your project:
+
+```ini
+# .npmrc
+@cueplusplus:registry=https://npm.pkg.github.com
+```
+
+Then write the credential once, at the **user** level, where pnpm reads it from. It is a
+**classic** personal access token with `read:packages` — GitHub Packages accepts neither
+fine-grained PATs nor OIDC:
+
+```sh
+pnpm config set //npm.pkg.github.com/:_authToken ghp_…
+```
+
+```sh
+pnpm add @cueplusplus/ui @cueplusplus/tokens @cueplusplus/theme-cue @base-ui/react
+```
+
+Three peers are required and declared: `react` ^19, `react-dom` ^19 and `@base-ui/react` ^1.7.
+`tailwindcss` ^4 is a declared peer too, but an optional one — needed for the default styling
+lane, and without it you own the CSS. Every other peer is optional and scoped to a subpath.
+`@cueplusplus/tokens` arrives as a dependency; installing it by name just makes the token
+constants importable in your own code. The theme package is not a peer at all — see below.
+
+CI, Vercel and the token's expiry are in
+[`docs/CONSUMING.md` §1](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#1-registry-access).
+
+## Quick start
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@cueplusplus/ui/styles.css";
+@import "@cueplusplus/theme-cue/theme.css";
+```
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import { Button } from "@cueplusplus/ui";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export default function App() {
+  return (
+    <ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system">
+      <Button variant="primary">Run cue</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+The order of those three `@import`s is load-bearing, and the `themes` prop is not optional in
+practice: this library contains no palette. Install and register a `@cueplusplus/theme-*` package,
+or every surface paints `@cueplusplus/theme-base`'s blank base — greys, one desaturated accent,
+the platform monospace — with nothing erroring to tell you.
+
+To stop the defaults flashing on first paint, add `prepaintScript()` beside the provider and hand
+both the same array — [§4 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#4-the-provider)
+is the whole layout.
+
+## What it ships
+
+Common components come from the root entry. Groups that need an optional peer have a subpath of
+their own, so importing a button never pulls a charting library into your bundle.
+
+| Import specifier | What is in it |
+| --- | --- |
+| `@cueplusplus/ui` | the root barrel: every component that costs no optional peer, the brand marks and the container icons included |
+| `@cueplusplus/ui/primitives` | the leaves: buttons, chips, avatars, dots and the two loading shapes |
+| `@cueplusplus/ui/forms` | everything a user types into, toggles, picks from or drags |
+| `@cueplusplus/ui/overlays` | everything that floats: dialogs, sheets, menus, tooltips, the command palette |
+| `@cueplusplus/ui/chrome` | console furniture: panels, rows, bars, tabs, the tree outline and the `Inspector` layout |
+| `@cueplusplus/ui/layout` | page structure: cards, stacks, grids, `Bento`, the `Preview` frame, disclosure and the navigation shapes |
+| `@cueplusplus/ui/layout/carousel` | needs `embla-carousel-react` |
+| `@cueplusplus/ui/layout/resizable` | needs `react-resizable-panels` |
+| `@cueplusplus/ui/instruments` | the readouts: meters, sparklines, tables, logs, `CodeBlock` and the two device frames |
+| `@cueplusplus/ui/instruments/data-table` | needs `@tanstack/react-table` |
+| `@cueplusplus/ui/instruments/log-viewer` | needs `@tanstack/react-virtual`, `anser` |
+| `@cueplusplus/ui/charts` | Recharts in this system's tokens, plus the categorical palette and the ramps; needs `recharts` |
+| `@cueplusplus/ui/date` | calendars, pickers and segmented date/time fields; needs `react-day-picker`, `date-fns`, `react-aria-components`, `@internationalized/date` |
+| `@cueplusplus/ui/color` | the picker suite the configurator edits with, hex and oklch; needs `react-aria-components` |
+| `@cueplusplus/ui/configurator` | the floating panel that edits the token layer live and exports what it edited; needs `react-aria-components` |
+| `@cueplusplus/ui/flow` | React Flow wearing the tokens: node cards, handles, signal-carrying wires; needs `@xyflow/react` (+ `./flow.css`) |
+| `@cueplusplus/ui/chat` | the multi-agent transcript: messages, composer, HITL questions, agent colour |
+| `@cueplusplus/ui/agent-runtime` | the streaming layer under Chat; needs `@assistant-ui/react` |
+| `@cueplusplus/ui/elements` | the agent's own surface, vendored from assistant-ui and repainted onto the tokens; needs `lucide-react` and `heat-graph` (+ `./elements.css`) |
+| `@cueplusplus/ui/elements/markdown` | `MarkdownText`; needs `react-markdown`, `rehype-sanitize` |
+| `@cueplusplus/ui/elements/generative` | the generative-UI renderer and its spec (+ `./elements/generative.css`) |
+| `@cueplusplus/ui/elements/replay` | the scripted session-replay frame |
+| `@cueplusplus/ui/dmx` | 512 bytes at wire rate: the bar, the strip, the patch bar, the channel grid |
+| `@cueplusplus/ui/midi` | sequencer instruments: keyboard, musical clock, ruler, analyser, threshold rail |
+| `@cueplusplus/ui/system` | `ThemeProvider`, `prepaintScript`, the `Density` island, the portal frame, `isSafeTokenValue` |
+| `@cueplusplus/ui/theming` | `createTheme()`, `contrastReport()` and the `--cue-*` vocabulary as constants |
+
+Four stylesheet exports. `@cueplusplus/ui/styles.css` is always imported; the other three are
+imported only if you use what they paint — `@cueplusplus/ui/elements.css`,
+`@cueplusplus/ui/flow.css` and `@cueplusplus/ui/elements/generative.css`.
+
+## Showing a component: `Preview`, `Inspector`, `CodeBlock`
+
+Three pieces for a page that shows components rather than only using them — a docs page, a design
+review, a settings screen with a live sample. Each is exported from the root barrel as well as from
+its group's subpath, and none needs an optional peer.
+
+### `Preview` — one component on a stage
+
+From `@cueplusplus/ui/layout`. A frame with a stage for the specimen, a `tools` slot at the top
+right and a `footer`. `label` is required, because the frame is a `role="group"` named by it. The
+stage can carry its own `theme`, `mode`, `density` and `font`; with none of them set it carries no
+attribute and inherits the page.
+
+**A stage `theme` needs that theme's stylesheet on the page.** Naming a theme does not load it: the
+stage is scoped with `[data-theme="<name>"]`, so `@cueplusplus/theme-<name>/theme.css` has to be
+imported like any other palette, or the stage paints the blank base with nothing erroring. The
+example below shows `terminal` on a `cue` page, so both are imported and both are registered:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@cueplusplus/ui/styles.css";
+@import "@cueplusplus/theme-cue/theme.css";
+@import "@cueplusplus/theme-terminal/theme.css";
+```
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import terminal from "@cueplusplus/theme-terminal";
+import { Chip } from "@cueplusplus/ui";
+import { Preview } from "@cueplusplus/ui/layout";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export default function ChipPage() {
+  return (
+    <ThemeProvider themes={[cue, terminal]} theme="cue" density="compact" mode="system">
+      <Preview label="Chip preview" theme="terminal" resizable footer="terminal · compact">
+        <Chip tone="accent">Standby</Chip>
+      </Preview>
+    </ThemeProvider>
+  );
+}
+```
+
+- Only the stage changes theme. `tools`, `footer`, the resize grips and anything they open stay in
+  the page's theme, so the controls that drive a specimen always look like the page around them.
+- `resizable` adds a grip per axis, 160–1280 × 96–960 px by default, that works by pointer and by
+  keyboard (arrows step 8 px, Shift+arrow 64 px). Pass `{ axis, minWidth, maxWidth, minHeight,
+  maxHeight }` to narrow it. A resizable Preview fills its container's width.
+- It is a client component (`"use client"`).
+
+### `Inspector` — the layout of a settings panel
+
+From `@cueplusplus/ui/chrome`. Titled sections of label-and-control rows, then a footer — the shape
+of a properties sidebar or a wrench menu. The controls are the library's own.
+
+```tsx
+import { Button, Input, SegmentedControl } from "@cueplusplus/ui";
+import { Inspector } from "@cueplusplus/ui/chrome";
+
+const sizes = [
+  { value: "sm", label: "Small" },
+  { value: "md", label: "Medium" },
+  { value: "lg", label: "Large" },
+];
+
+export function ButtonInspector() {
+  return (
+    <Inspector.Root>
+      <Inspector.Section label="Variants">
+        <Inspector.Row label="Size">
+          <SegmentedControl items={sizes} defaultValue="md" />
+        </Inspector.Row>
+        <Inspector.Row label="Label" htmlFor="button-label">
+          <Input id="button-label" defaultValue="Run cue" />
+        </Inspector.Row>
+      </Inspector.Section>
+      <Inspector.Footer note="preset · primary" action={<Button size="sm">Reset</Button>} />
+    </Inspector.Root>
+  );
+}
+```
+
+- A row names its control. With `htmlFor` the label is a `<label>` for that id; without it the row
+  lays `label` on the control as `aria-label`, unless the control already names itself.
+- A row is one column until the Inspector is 18rem wide, then label beside control. It is a
+  container query, so it follows the popover or sidebar the Inspector sits in, not the viewport.
+- `Inspector` itself has no hooks and no `"use client"`, so a server component can render it.
+
+### `CodeBlock` — code with a caption and a copy button
+
+From `@cueplusplus/ui/instruments`.
+
+```tsx
+import { CodeBlock } from "@cueplusplus/ui/instruments";
+
+export function ButtonSource() {
+  return <CodeBlock label="button.tsx" language="jsx" code={'<Button variant="primary">Run cue</Button>'} />;
+}
+```
+
+- `code` is printed verbatim, and the copy button copies exactly that. `label` is the caption and
+  defaults to the language; `language` defaults to `"tsx"`.
+- There is no syntax-highlighter palette. `language="jsx"` picks out tag names, attribute names and
+  punctuation in three inks the theme already has; every other language prints plain.
+
+## The machine-readable half
+
+This package ships its own manifest: `@cueplusplus/ui/manifest.json` is an index of every
+component with a SHA-256 for each companion document, and
+`@cueplusplus/ui/manifest/components/<name>.json` is one component in full — props, variants, the
+tokens it paints with, and the hand-written notes on when it is the wrong choice. Beside them,
+`@cueplusplus/ui/manifest/tokens.json` is the token vocabulary and
+`@cueplusplus/ui/manifest/fixtures.json` the playground fixture catalogue. An agent or a code
+generator should read those rather than guess a prop name.
+
+The same surfaces are published at <https://ui.cueplusplus.com>, with the docs site, the live
+kitchen sink and the CUE++ agent skills beside them.
+
+## Where the rest is
+
+- Installing and using it from another project: [`docs/CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md)
+- Every component, with props and a live example: <https://ui.cueplusplus.com/docs/components>
+- Theming, density and the `--cue-*` contract: <https://ui.cueplusplus.com/docs/theming>
+- The whole surface on one page: <https://ui.cueplusplus.com/kitchen-sink>
+- Every machine-readable surface, with copy-paste snippets: <https://ui.cueplusplus.com/ai>
+- What changed in the version you have: `node_modules/@cueplusplus/ui/CHANGELOG.md`

package/dist/agent-runtime/_glyphs.js

@@ -0,0 +1,43 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/agent-runtime/_glyphs.tsx
+/**
+* Shared agent-runtime glyphs.
+*
+* Drawn inline for the same reason as `chat/_glyphs.tsx`: a chevron on a branch
+* stepper should not put an icon dependency on the render path of a transcript,
+* and hand-set strokes stay hairline-thin at the 8–12px sizes console density
+* asks for. `currentColor` everywhere — the tone comes from the parent.
+*
+* @internal Not part of the public API.
+*/
+/** A leftward chevron — the direction the previous branch lies in. */
+function ChevronLeftGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m10 3-5 5 5 5" })
+	});
+}
+/** A rightward chevron — the direction the next branch lies in. */
+function ChevronRightGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+//#endregion
+export { ChevronLeftGlyph, ChevronRightGlyph };

package/dist/agent-runtime/branch-picker.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+//#region src/agent-runtime/branch-picker.d.ts
+/** Which way along the sibling branches a click moves. */
+type BranchDirection = "previous" | "next";
+interface BranchPickerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+  /** 1-based position of the branch on show — what the readout prints. */
+  index: number;
+  /** How many sibling branches exist. Below 2 the picker renders nothing. */
+  count: number;
+  /** Called with the direction to move in. Never called past either end. */
+  onNavigate: (direction: BranchDirection) => void;
+  /** Accessible name of the previous button. Defaults to `"Previous branch"`. */
+  previousLabel?: string;
+  /** Accessible name of the next button. Defaults to `"Next branch"`. */
+  nextLabel?: string;
+  /** Block both buttons — a run is in flight and the runtime cannot switch mid-run. */
+  disabled?: boolean;
+  /** Accessible name for the group. Defaults to `"Branches"`. */
+  "aria-label"?: string;
+}
+/**
+ * The `‹ 2 / 3 ›` stepper that walks a turn's regenerated siblings.
+ *
+ * It keeps a segmented control's two promises — exactly one branch is on show,
+ * and the set cannot be emptied — without being one. A row of N numbered
+ * segments is the wrong shape for a count that is usually 2 and occasionally 9,
+ * and a segmented control's recessed frame fights the message bubble it sits
+ * in. Two ghost icon buttons around a mono readout stay quiet until the reader
+ * has a reason to look at them.
+ *
+ * A single branch is not a choice, so below two branches this renders nothing
+ * at all: the host can hand it every turn's `branch` without deciding which
+ * turns deserve a control. It belongs in an agent turn's `footer` — a user
+ * bubble is a solid accent fill, and a stepper drawn on it is unreadable.
+ *
+ * The picker never moves the thread itself. It reports a direction and the host
+ * asks the runtime; under an ExternalStore runtime the switch arrives back at
+ * the adapter's `setMessages`, which is the host's to write.
+ *
+ * @example
+ * <Message agent="planner" footer={<BranchPicker index={2} count={3} onNavigate={go} disabled={busy} />}>…</Message>
+ */
+declare const BranchPicker: React.ForwardRefExoticComponent<BranchPickerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BranchDirection, BranchPicker, BranchPickerProps };

package/dist/agent-runtime/branch-picker.js

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/agent-runtime/branch-picker.tsx
+/**
+* The `‹ 2 / 3 ›` stepper that walks a turn's regenerated siblings.
+*
+* It keeps a segmented control's two promises — exactly one branch is on show,
+* and the set cannot be emptied — without being one. A row of N numbered
+* segments is the wrong shape for a count that is usually 2 and occasionally 9,
+* and a segmented control's recessed frame fights the message bubble it sits
+* in. Two ghost icon buttons around a mono readout stay quiet until the reader
+* has a reason to look at them.
+*
+* A single branch is not a choice, so below two branches this renders nothing
+* at all: the host can hand it every turn's `branch` without deciding which
+* turns deserve a control. It belongs in an agent turn's `footer` — a user
+* bubble is a solid accent fill, and a stepper drawn on it is unreadable.
+*
+* The picker never moves the thread itself. It reports a direction and the host
+* asks the runtime; under an ExternalStore runtime the switch arrives back at
+* the adapter's `setMessages`, which is the host's to write.
+*
+* @example
+* <Message agent="planner" footer={<BranchPicker index={2} count={3} onNavigate={go} disabled={busy} />}>…</Message>
+*/
+const BranchPicker = React.forwardRef(function BranchPicker({ className, index, count, onNavigate, previousLabel = "Previous branch", nextLabel = "Next branch", disabled, "aria-label": ariaLabel = "Branches", ...elementProps }, ref) {
+	if (count < 2) return null;
+	const position = Math.min(Math.max(index, 1), count);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "branch-picker",
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-index": position,
+		"data-count": count,
+		className: cn("inline-flex items-center gap-(--cue-space-1)", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				icon: ChevronLeftGlyph,
+				"aria-label": previousLabel,
+				"data-slot": "branch-picker-previous",
+				disabled: disabled === true || position <= 1,
+				onClick: () => onNavigate("previous")
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "branch-picker-position",
+				className: "font-mono text-(length:--cue-text-micro) tabular-nums text-fg-subtle",
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					children: [
+						position,
+						" / ",
+						count
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [
+						"branch ",
+						position,
+						" of ",
+						count
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				icon: ChevronRightGlyph,
+				"aria-label": nextLabel,
+				"data-slot": "branch-picker-next",
+				disabled: disabled === true || position >= count,
+				onClick: () => onNavigate("next")
+			})
+		]
+	});
+});
+//#endregion
+export { BranchPicker };

package/dist/agent-runtime/index.d.ts

@@ -0,0 +1,4 @@
+import { BranchDirection, BranchPicker, BranchPickerProps } from "./branch-picker.js";
+import { ToolCallCard, ToolCallCardProps, ToolCallStatus } from "./tool-call-card.js";
+import { AgentThread, AgentToolCall, AgentTurn, AgentTurnStatus, UseAgentThreadOptions, useAgentThread } from "./use-agent-thread.js";
+export { type AgentThread, type AgentToolCall, type AgentTurn, type AgentTurnStatus, type BranchDirection, BranchPicker, type BranchPickerProps, ToolCallCard, type ToolCallCardProps, type ToolCallStatus, type UseAgentThreadOptions, useAgentThread };

package/dist/agent-runtime/index.js

@@ -0,0 +1,4 @@
+import { BranchPicker } from "./branch-picker.js";
+import { ToolCallCard } from "./tool-call-card.js";
+import { useAgentThread } from "./use-agent-thread.js";
+export { BranchPicker, ToolCallCard, useAgentThread };

package/dist/agent-runtime/tool-call-card.d.ts

@@ -0,0 +1,69 @@
+import { AskDanger } from "../chat/ask-box.js";
+import * as React from "react";
+//#region src/agent-runtime/tool-call-card.d.ts
+/** Where a tool call has got to. `idle` is a call parked on a human. */
+type ToolCallStatus = "working" | "done" | "failed" | "idle";
+interface ToolCallCardProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** Name of the tool being called. */
+  tool: string;
+  /** The call's arguments, rendered verbatim as preformatted text. Pass a string you already formatted — JSON, a command line. An empty string counts as absent. */
+  args?: string;
+  /** What the tool returned, rendered verbatim. A string is shown as text; pass your own renderer for rich output and own that decision. `null`, `false`, an empty string or an empty array count as absent. */
+  result?: React.ReactNode;
+  /** Where the call has got to. Omit to draw no status line at all. */
+  status?: ToolCallStatus;
+  /** What the tool is doing right now. Shown beside the spinner while `working`, and as the text while `idle`. */
+  activity?: React.ReactNode;
+  /** Risk rating for the call, chipped the way an AskBox approval is. Omit for a routine call. */
+  danger?: AskDanger;
+  /** Slug of the agent making the call, so the rail takes its colour. Named in assistive text as well as inked. */
+  agent?: string;
+  /** Slug of the orchestrator, so its calls take the theme accent. */
+  rootAgent?: string;
+  /** Open state when controlled. Pass with `onOpenChange`. */
+  open?: boolean;
+  /** Initial open state. Defaults to `false`. */
+  defaultOpen?: boolean;
+  /** Called with the state the card is asking to move to. */
+  onOpenChange?: (open: boolean) => void;
+  /** Eyebrow over the arguments block. Defaults to `"arguments"`. */
+  argsLabel?: React.ReactNode;
+  /** Eyebrow over the result block. Defaults to `"result"`. */
+  resultLabel?: React.ReactNode;
+  /** What a finished call says. Defaults to `"Completed"`. */
+  doneLabel?: React.ReactNode;
+  /** What a failed call says. Defaults to `"Failed"`. */
+  failedLabel?: React.ReactNode;
+  /** Extra detail under the result — an approval `AskBox`, a nested transcript. */
+  children?: React.ReactNode;
+}
+/**
+ * An LLM's own tool call, shown while it runs and after.
+ *
+ * The two neighbours it is deliberately not: `AskBox` is a question put to a
+ * human and it waits for an answer; `DelegationCard` is another agent's work
+ * folded into a lane. This is the model reaching for a tool by itself — nobody
+ * is being asked anything, and nothing downstream is another agent's turn. It
+ * borrows both their surfaces on purpose, so a transcript mixing all three
+ * reads as one family: the tool name and risk chip are `AskBox`'s, the status
+ * line and the disclosure are `DelegationCard`'s.
+ *
+ * Arguments and results are rendered verbatim: there is no markdown or HTML
+ * path here on purpose. Both are untrusted text — half of it is the model's
+ * own output and the other half is whatever the tool returned — and a
+ * component that quietly parsed them would make every consumer of this library
+ * one prompt away from an injection. `args` is text you already formatted;
+ * `result` takes nodes, so a caller who wants rich output passes their own
+ * renderer and owns that decision.
+ *
+ * The body is mounted and unmounted rather than height-animated. A call's
+ * result lands mid-render and its arguments grow while they stream, and
+ * animating the height of something that changes size on its own is how a panel
+ * ends up permanently mid-transition.
+ *
+ * @example
+ * <ToolCallCard tool="read_file" args={'{ "path": "cue.json" }'} status="working" activity="reading 12 KB" />
+ */
+declare const ToolCallCard: React.ForwardRefExoticComponent<ToolCallCardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToolCallCard, ToolCallCardProps, ToolCallStatus };