@cueplusplus/ui 0.13.0

package/dist/elements/voice-conversation.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { clamp } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MicIcon, MicOffIcon, PhoneOffIcon } from "lucide-react";
+//#region src/elements/voice-conversation.tsx
+const CAPTION = {
+	connecting: "Connecting",
+	listening: "Listening",
+	thinking: "Thinking",
+	speaking: "Speaking"
+};
+const HINT = {
+	connecting: "Opening the mic",
+	listening: "Listening for you",
+	thinking: "Working on it",
+	speaking: "Playing the reply"
+};
+/**
+* A live call: the orb tracks your voice, the caption names the turn, the transcript
+* follows.
+*
+* @example
+* import { VoiceConversation } from "@cueplusplus/ui/elements";
+*
+* <VoiceConversation
+*   mode="listening"
+*   amplitude={0.6}
+*   transcript={transcript}
+*   onToggleMute={toggleMute}
+*   onEnd={hangUp}
+* />
+*/
+function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, onInterrupt, onEnd, className, ...props }) {
+	const level = clamp(amplitude, 0, 1);
+	const active = mode === "listening" || mode === "speaking";
+	const canInterrupt = mode === "speaking" && onInterrupt !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "voice-conversation",
+		className: cn(paper, "flex w-full max-w-xs flex-col items-center gap-4 rounded-(--radius-overlay) px-5 py-5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onInterrupt,
+				disabled: !canInterrupt,
+				"aria-label": "Interrupt the assistant",
+				className: "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent relative flex size-24 items-center justify-center rounded-full outline-none disabled:cursor-default",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("absolute rounded-full transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/15" : "bg-surface-1"),
+						style: {
+							width: "6rem",
+							height: "6rem",
+							transform: `scale(${active ? .72 + level * .28 : .62})`,
+							opacity: active ? 1 : .5
+						}
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("absolute rounded-full transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/25" : "bg-surface-2"),
+						style: {
+							width: "4.25rem",
+							height: "4.25rem",
+							transform: `scale(${active ? .8 + level * .22 : .7})`
+						}
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("relative size-10 rounded-full transition-[transform,background-color] duration-150 ease-out motion-reduce:transition-none", mode === "connecting" && "bg-surface-3 animate-pulse", mode === "listening" && "bg-accent", mode === "thinking" && "bg-surface-3 animate-pulse", mode === "speaking" && "bg-stream"),
+						style: { transform: `scale(${active ? .9 + level * .2 : .85})` }
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(length:--cue-text-body) font-medium",
+					children: CAPTION[mode]
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: muted ? "Mic off" : canInterrupt ? "Tap to interrupt" : HINT[mode]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-[4.5rem] w-full flex-col gap-1.5",
+				children: transcript.map((turn) => /* @__PURE__ */ jsxs("div", {
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "w-8 shrink-0", turn.role === "user" ? "text-fg-subtle" : "text-stream/70"),
+						children: turn.role === "user" ? "you" : "ai"
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn("min-w-0 flex-1 break-words", turn.role === "user" ? "text-fg-muted" : "text-fg-muted"),
+						children: turn.text
+					})]
+				}, turn.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": muted ? "Turn the microphone on" : "Turn the microphone off",
+					"aria-pressed": muted,
+					onClick: onToggleMute,
+					disabled: !onToggleMute,
+					className: cn(ghostButton, "size-10 disabled:pointer-events-none disabled:opacity-30", muted && "bg-surface-2 text-fg"),
+					children: muted ? /* @__PURE__ */ jsx(MicOffIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "End the call",
+					onClick: onEnd,
+					disabled: !onEnd,
+					className: "flex size-10 items-center justify-center rounded-full bg-danger text-danger-fg transition-[opacity,scale] duration-150 hover:opacity-90 active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
+					children: /* @__PURE__ */ jsx(PhoneOffIcon, { className: "size-4" })
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { VoiceConversation };

package/dist/elements/web-preview.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps } from "react";
+//#region src/elements/web-preview.d.ts
+/**
+ * Chrome around a preview: a URL bar, reload, and open-in-new. It renders
+ * `children` as given and enforces no isolation of its own, so the caller is
+ * responsible for passing an already-sandboxed frame.
+ *
+ * @example
+ * import { WebPreview } from "@cueplusplus/ui/elements";
+ *
+ * <WebPreview origin="scf.auiusercontent.com" loading={false} onReload={reload}>
+ *   <iframe title="Preview" src={sandboxUrl} sandbox="allow-scripts" />
+ * </WebPreview>
+ */
+declare function WebPreview({ origin, loading, children, onReload, onOpenExternal, className, ...props }: Omit<ComponentProps<"div">, "origin" | "loading" | "children" | "onReload" | "onOpenExternal"> & {
+  /**
+   * Host the content is served from. Show the sandbox origin, not your own, so the
+   * isolation is legible. Displaying it does not create the isolation; the frame you
+   * pass as children must already be sandboxed.
+   */
+  origin: string;
+  /** Fades the frame out and shimmers a status while the sandbox is being set up. */
+  loading: boolean;
+  /** The frame itself. In production this is a sandboxed iframe, not inline markup. */
+  children: React.ReactNode;
+  /** Called from the reload control. */
+  onReload?: () => void;
+  /** Called from the open-in-new-tab control. */
+  onOpenExternal?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { WebPreview };

package/dist/elements/web-preview.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, field, ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon, RotateCwIcon } from "lucide-react";
+//#region src/elements/web-preview.tsx
+/**
+* Chrome around a preview: a URL bar, reload, and open-in-new. It renders
+* `children` as given and enforces no isolation of its own, so the caller is
+* responsible for passing an already-sandboxed frame.
+*
+* @example
+* import { WebPreview } from "@cueplusplus/ui/elements";
+*
+* <WebPreview origin="scf.auiusercontent.com" loading={false} onReload={reload}>
+*   <iframe title="Preview" src={sandboxUrl} sandbox="allow-scripts" />
+* </WebPreview>
+*/
+function WebPreview({ origin, loading, children, onReload, onOpenExternal, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "web-preview",
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 px-2.5 py-2",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Reload the preview",
+					onClick: onReload,
+					className: cn(ghostButton, "size-7 shrink-0"),
+					children: /* @__PURE__ */ jsx(RotateCwIcon, { className: cn("size-3.5", loading && "animate-spin motion-reduce:animate-none") })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(field, "flex min-w-0 flex-1 items-center gap-1.5 rounded-full px-2.5 py-1"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-muted min-w-0 truncate"),
+						children: origin
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Open the preview in a new tab",
+					onClick: onOpenExternal,
+					className: cn(ghostButton, "size-7 shrink-0"),
+					children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3.5" })
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "border-border relative min-h-[9rem] border-t",
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": loading,
+				className: cn("transition-opacity duration-300 motion-reduce:transition-none", loading && "invisible opacity-0"),
+				children
+			}), loading && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(ShimmerLabel, {
+					className: "text-fg-subtle relative inline-block text-(length:--cue-text-ui) leading-none",
+					children: "Loading preview"
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { WebPreview };

package/dist/elements/web-search.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from "react";
+//#region src/elements/web-search.d.ts
+/** One hit the agent read: the page's title and the site it sits on. */
+interface WebSearchResult {
+  /** The page's title, truncated to the row. */
+  title: string;
+  /** The site, in mono at the end of the row. With `cycle`, it keys the row. */
+  domain: string;
+}
+/**
+ * A search query and its results landing one by one as the agent reads.
+ *
+ * @example
+ * import { WebSearch } from "@cueplusplus/ui/elements";
+ *
+ * <WebSearch
+ *   query="assistant-ui composer"
+ *   results={[{ title: "Composer guide", domain: "docs.example.com" }]}
+ *   visibleResults={1}
+ *   searching={false}
+ *   cycle={0}
+ * />
+ */
+declare function WebSearch({ query, results, visibleResults, searching, cycle, className, ...props }: Omit<ComponentProps<"div">, "children" | "query" | "results" | "visibleResults" | "searching" | "cycle"> & {
+  /** Search query shown in the query pill. */
+  query: string;
+  /** Result cards available to reveal one by one. */
+  results: readonly WebSearchResult[];
+  /** How many results from the start are currently shown. */
+  visibleResults: number;
+  /** When true a shimmering Searching label replaces the result count. */
+  searching: boolean;
+  /** Identity key that remounts the list so entrance animation can replay. */
+  cycle: number;
+}): import("react").JSX.Element;
+//#endregion
+export { WebSearch, WebSearchResult };

package/dist/elements/web-search.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, field, mono } from "./surfaces.js";
+import { take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+//#region src/elements/web-search.tsx
+/**
+* A search query and its results landing one by one as the agent reads.
+*
+* @example
+* import { WebSearch } from "@cueplusplus/ui/elements";
+*
+* <WebSearch
+*   query="assistant-ui composer"
+*   results={[{ title: "Composer guide", domain: "docs.example.com" }]}
+*   visibleResults={1}
+*   searching={false}
+*   cycle={0}
+* />
+*/
+function WebSearch({ query, results, visibleResults, searching, cycle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "web-search",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: cn(field, "text-fg-muted inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-(length:--cue-text-ui)"),
+				children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-fg-subtle size-3" }), query]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-fg-muted text-(length:--cue-text-ui)",
+				children: searching ? /* @__PURE__ */ jsx(ShimmerLabel, {
+					className: "relative inline-block leading-none",
+					children: "Searching"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "cue-elements-fade-in cue-elements-animate-in duration-300",
+					children: "Read 3 sources"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-[5.75rem] flex-col",
+				children: take(results, visibleResults).map((result) => /* @__PURE__ */ jsxs("div", {
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 -mx-2.5 flex items-center gap-2.5 rounded-(--radius-surface) px-2.5 py-1.5 transition-colors duration-300",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "bg-surface-2 text-fg-muted flex size-4 shrink-0 items-center justify-center rounded-(--radius-control) text-(length:--cue-text-micro) font-medium",
+							children: result.domain.charAt(0).toUpperCase()
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: result.title
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-subtle shrink-0"),
+							children: result.domain
+						})
+					]
+				}, `${cycle}-${result.domain}`))
+			})
+		]
+	});
+}
+//#endregion
+export { WebSearch };

package/dist/elements/work-collapse.d.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+//#region src/elements/work-collapse.d.ts
+/**
+ * A duration as a run's summary line says it: `3s`, `4m 12s`, `1h 3m`.
+ *
+ * Cline's three shapes, and the rule behind them is that each keeps exactly two
+ * significant units — nobody reading "worked for" wants `1h 3m 12s`, and
+ * everybody wants the seconds when the whole run took eleven of them. Anything
+ * that is not a finite, positive number of milliseconds is `0s`, because this
+ * formats a caller's arithmetic and a run that has not started yet is a real
+ * state.
+ *
+ * @example
+ * formatWorkDuration(3_000);     // "3s"
+ * formatWorkDuration(252_000);   // "4m 12s"
+ * formatWorkDuration(3_780_000); // "1h 3m"
+ */
+declare function formatWorkDuration(durationMs: number): string;
+/** What a collapsed run knows about itself. */
+interface WorkSummary {
+  /** How long the run took, in milliseconds. Omit when it is not known. */
+  durationMs?: number;
+  /** How many tool calls it made. Omit when it is not counted. */
+  toolCalls?: number;
+  /** Whether the run is still going, which decides the tense. */
+  running?: boolean;
+}
+/**
+ * The summary line: `Worked for 4m 12s and made 14 tool calls`.
+ *
+ * Every combination has an answer, including the two empty ones, because a
+ * collapsed run always has to say something: a trigger labelled `undefined` is
+ * a row a reader cannot decide whether to open. Cline's fallbacks are `Worked`
+ * and `Made 3 tool calls`; the present-tense half is Hermes's rule that a live
+ * run narrates in the present and settles into the past.
+ *
+ * @example
+ * formatWorkLabel({ durationMs: 252_000, toolCalls: 14 });
+ * // "Worked for 4m 12s and made 14 tool calls"
+ * @example
+ * formatWorkLabel({ durationMs: 252_000, toolCalls: 14, running: true });
+ * // "Working for 4m 12s, 14 tool calls so far"
+ */
+declare function formatWorkLabel({ durationMs, toolCalls, running }: WorkSummary): string;
+interface WorkCollapseProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onToggle"> {
+  /** How long the run took, in milliseconds. Omit when it is not known. */
+  durationMs?: number;
+  /** How many tool calls it made. Omit when it is not counted. */
+  toolCalls?: number;
+  /**
+   * Whether the run is still going: the label goes present tense and the sweep
+   * runs. Hermes's rule, and the one that keeps a collapsed live run from
+   * claiming to be finished.
+   */
+  running?: boolean;
+  /**
+   * The whole summary line, replacing the one {@link formatWorkLabel} would
+   * build. This is where a category summary goes — "Explored 3 files, ran 5
+   * commands", composed from `VERB_TRIADS` — which is a sentence no formatter
+   * over a duration and a count could produce.
+   */
+  label?: string;
+  /** Whether the rows are showing. */
+  open: boolean;
+  /** Called when the row is expanded or collapsed. */
+  onOpenChange?: (open: boolean) => void;
+  /** The rows the run folded away: tool calls, reasoning, whatever ran. */
+  children?: React.ReactNode;
+}
+/**
+ * A finished run, folded into one row: `Worked for 4m 12s and made 14 tool calls`.
+ *
+ * The counterpart to {@link TailStatus}. That one says what is happening while
+ * it happens; this one is what fourteen rows of it become once nobody needs
+ * them — and it is the element that makes a long transcript readable at a
+ * glance without hiding anything, because the rows are still there, one click
+ * away, in their original order.
+ *
+ * The expanded body deliberately draws no rail, no indent and no border. That
+ * is Cline's decision and its reasoning is worth keeping: the rows inside a
+ * work group are tool disclosures and reasoning panels that already carry their
+ * own nesting when *they* open, and a second level of indent around them makes
+ * a transcript that steps rightwards every time it explains itself. So an open
+ * `WorkCollapse` looks exactly like the transcript would have looked, plus one
+ * summary line above it.
+ *
+ * Open state is a prop, like everything else here: a scripted replay of this
+ * component is a caller changing `open`, and a component that owned the
+ * disclosure could not be replayed at all.
+ *
+ * @example
+ * import { WorkCollapse } from "@cueplusplus/ui/elements";
+ *
+ * <WorkCollapse durationMs={252_000} toolCalls={14} open={open} onOpenChange={setOpen}>
+ *   {rows}
+ * </WorkCollapse>
+ * @example
+ * // Live, in the present tense, with the label composed from the verb table.
+ * <WorkCollapse running toolCalls={5} label="Exploring 3 files, running 5 commands" open={false} />
+ */
+declare const WorkCollapse: React.ForwardRefExoticComponent<WorkCollapseProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { WorkCollapse, WorkCollapseProps, WorkSummary, formatWorkDuration, formatWorkLabel };

package/dist/elements/work-collapse.js

@@ -0,0 +1,131 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel } from "./surfaces.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+//#region src/elements/work-collapse.tsx
+/**
+* A duration as a run's summary line says it: `3s`, `4m 12s`, `1h 3m`.
+*
+* Cline's three shapes, and the rule behind them is that each keeps exactly two
+* significant units — nobody reading "worked for" wants `1h 3m 12s`, and
+* everybody wants the seconds when the whole run took eleven of them. Anything
+* that is not a finite, positive number of milliseconds is `0s`, because this
+* formats a caller's arithmetic and a run that has not started yet is a real
+* state.
+*
+* @example
+* formatWorkDuration(3_000);     // "3s"
+* formatWorkDuration(252_000);   // "4m 12s"
+* formatWorkDuration(3_780_000); // "1h 3m"
+*/
+function formatWorkDuration(durationMs) {
+	if (!Number.isFinite(durationMs) || durationMs <= 0) return "0s";
+	const total = Math.round(durationMs / 1e3);
+	if (total < 60) return `${total}s`;
+	if (total < 3600) {
+		const minutes = Math.floor(total / 60);
+		const seconds = total % 60;
+		return seconds === 0 ? `${minutes}m` : `${minutes}m ${seconds}s`;
+	}
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m`;
+}
+/**
+* The summary line: `Worked for 4m 12s and made 14 tool calls`.
+*
+* Every combination has an answer, including the two empty ones, because a
+* collapsed run always has to say something: a trigger labelled `undefined` is
+* a row a reader cannot decide whether to open. Cline's fallbacks are `Worked`
+* and `Made 3 tool calls`; the present-tense half is Hermes's rule that a live
+* run narrates in the present and settles into the past.
+*
+* @example
+* formatWorkLabel({ durationMs: 252_000, toolCalls: 14 });
+* // "Worked for 4m 12s and made 14 tool calls"
+* @example
+* formatWorkLabel({ durationMs: 252_000, toolCalls: 14, running: true });
+* // "Working for 4m 12s, 14 tool calls so far"
+*/
+function formatWorkLabel({ durationMs, toolCalls, running = false }) {
+	const spent = durationMs === void 0 ? void 0 : formatWorkDuration(durationMs);
+	const calls = toolCalls === void 0 ? void 0 : `${toolCalls} tool call${toolCalls === 1 ? "" : "s"}`;
+	if (running) {
+		if (spent !== void 0 && calls !== void 0) return `Working for ${spent}, ${calls} so far`;
+		if (spent !== void 0) return `Working for ${spent}`;
+		if (calls !== void 0) return `${calls} so far`;
+		return "Working";
+	}
+	if (spent !== void 0 && calls !== void 0) return `Worked for ${spent} and made ${calls}`;
+	if (spent !== void 0) return `Worked for ${spent}`;
+	if (calls !== void 0) return `Made ${calls}`;
+	return "Worked";
+}
+/**
+* A finished run, folded into one row: `Worked for 4m 12s and made 14 tool calls`.
+*
+* The counterpart to {@link TailStatus}. That one says what is happening while
+* it happens; this one is what fourteen rows of it become once nobody needs
+* them — and it is the element that makes a long transcript readable at a
+* glance without hiding anything, because the rows are still there, one click
+* away, in their original order.
+*
+* The expanded body deliberately draws no rail, no indent and no border. That
+* is Cline's decision and its reasoning is worth keeping: the rows inside a
+* work group are tool disclosures and reasoning panels that already carry their
+* own nesting when *they* open, and a second level of indent around them makes
+* a transcript that steps rightwards every time it explains itself. So an open
+* `WorkCollapse` looks exactly like the transcript would have looked, plus one
+* summary line above it.
+*
+* Open state is a prop, like everything else here: a scripted replay of this
+* component is a caller changing `open`, and a component that owned the
+* disclosure could not be replayed at all.
+*
+* @example
+* import { WorkCollapse } from "@cueplusplus/ui/elements";
+*
+* <WorkCollapse durationMs={252_000} toolCalls={14} open={open} onOpenChange={setOpen}>
+*   {rows}
+* </WorkCollapse>
+* @example
+* // Live, in the present tense, with the label composed from the verb table.
+* <WorkCollapse running toolCalls={5} label="Exploring 3 files, running 5 commands" open={false} />
+*/
+const WorkCollapse = React.forwardRef(function WorkCollapse({ durationMs, toolCalls, running = false, label, open, onOpenChange, children, className, ...elementProps }, ref) {
+	const summary = label ?? formatWorkLabel({
+		durationMs,
+		toolCalls,
+		running
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "work-collapse",
+		"data-open": String(open),
+		"data-running": String(running),
+		className: cn("flex w-full flex-col gap-1.5", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => onOpenChange?.(!open),
+			className: "hover:bg-surface-1 -mx-2 flex items-center gap-2.5 rounded-(--radius-control) px-2 py-1 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none",
+			children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+				"aria-hidden": true,
+				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90")
+			}), /* @__PURE__ */ jsx(ShimmerLabel, {
+				active: running,
+				className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
+				children: summary
+			})]
+		}), open && children !== void 0 ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "work-collapse-content",
+			className: "flex flex-col gap-2",
+			children
+		}) : null]
+	});
+});
+//#endregion
+export { WorkCollapse, formatWorkDuration, formatWorkLabel };

package/dist/flow/_frame.d.ts

@@ -0,0 +1,52 @@
+//#region src/flow/_frame.d.ts
+/**
+ * On a graph canvas the frame *is* the state.
+ *
+ * A node in a signal graph has to answer two questions from across the room:
+ * what kind of thing is this, and what is it doing right now. Text answers
+ * neither at 60% zoom. A coloured frame answers both, which is why every console
+ * this group is ported from — dmxhub's bridge above all — encodes node state as
+ * the colour of a one-pixel rim and nothing else.
+ *
+ * Two axes, resolved in one order:
+ *
+ * - **State wins over tone.** A selected node is a selected node whether it is an
+ *   input or a merge; a node carrying live signal is the accent whatever it does
+ *   with that signal. Identity only shows through when the node has nothing more
+ *   urgent to say.
+ * - **Tone is the resting identity.** Input reads as `info` (it comes from
+ *   elsewhere), output as `accent` (it is what this console emits), and anything
+ *   in between as the quiet grey that also serves as the default.
+ *
+ * The colour is published as a custom property rather than painted directly, so
+ * a React Flow node wrapper can set it once (`useFlowTheme().nodeStyles`) and
+ * every card inside inherits it — and so a card that says nothing about tone or
+ * state stays inheritable instead of overriding its own graph.
+ */
+/** What kind of node this is: where it sits in the signal path. */
+type FlowNodeTone = "input" | "output" | "processing";
+/** What the node is doing right now. Outranks {@link FlowNodeTone}. */
+type FlowNodeState = "idle" | "live" | "selected" | "disabled";
+/** The custom property a node's frame colour travels on. */
+declare const FLOW_NODE_FRAME_PROPERTY = "--cue-node-frame";
+/** The frame of a node that has published no colour of its own. */
+declare const FLOW_NODE_FRAME_FALLBACK = "var(--cue-fg-subtle)";
+/** `outline-color` for any node frame: the published colour, else the grey. */
+declare const FLOW_NODE_FRAME_COLOR = "var(--cue-node-frame, var(--cue-fg-subtle))";
+/**
+ * The frame colour for a node, as a token reference.
+ *
+ * Returns `undefined` when neither axis says anything — the caller then leaves
+ * the property unset and inherits whatever the node wrapper published, which is
+ * what makes `nodeStyles` work.
+ *
+ * @param tone - Where the node sits in the signal path.
+ * @param state - What it is doing right now. Outranks `tone`.
+ * @returns A `var(--cue-*)` reference, or `undefined` to inherit.
+ * @example
+ * flowFrameColor("input");             // "var(--cue-info)"
+ * flowFrameColor("input", "selected"); // "var(--cue-fg)"
+ */
+declare function flowFrameColor(tone?: FlowNodeTone, state?: FlowNodeState): string | undefined;
+//#endregion
+export { FLOW_NODE_FRAME_COLOR, FLOW_NODE_FRAME_FALLBACK, FLOW_NODE_FRAME_PROPERTY, FlowNodeState, FlowNodeTone, flowFrameColor };

package/dist/flow/_frame.js

@@ -0,0 +1,38 @@
+//#region src/flow/_frame.ts
+/** The custom property a node's frame colour travels on. */
+const FLOW_NODE_FRAME_PROPERTY = "--cue-node-frame";
+/** The frame of a node that has published no colour of its own. */
+const FLOW_NODE_FRAME_FALLBACK = "var(--cue-fg-subtle)";
+/** `outline-color` for any node frame: the published colour, else the grey. */
+const FLOW_NODE_FRAME_COLOR = `var(${FLOW_NODE_FRAME_PROPERTY}, ${FLOW_NODE_FRAME_FALLBACK})`;
+const TONE_FRAMES = {
+	input: "var(--cue-info)",
+	output: "var(--cue-accent)",
+	processing: FLOW_NODE_FRAME_FALLBACK
+};
+/** `idle` is deliberately absent: an idle node falls through to its tone. */
+const STATE_FRAMES = {
+	selected: "var(--cue-fg)",
+	live: "var(--cue-accent)",
+	disabled: FLOW_NODE_FRAME_FALLBACK
+};
+/**
+* The frame colour for a node, as a token reference.
+*
+* Returns `undefined` when neither axis says anything — the caller then leaves
+* the property unset and inherits whatever the node wrapper published, which is
+* what makes `nodeStyles` work.
+*
+* @param tone - Where the node sits in the signal path.
+* @param state - What it is doing right now. Outranks `tone`.
+* @returns A `var(--cue-*)` reference, or `undefined` to inherit.
+* @example
+* flowFrameColor("input");             // "var(--cue-info)"
+* flowFrameColor("input", "selected"); // "var(--cue-fg)"
+*/
+function flowFrameColor(tone, state) {
+	if (state !== void 0 && state in STATE_FRAMES) return STATE_FRAMES[state];
+	return tone === void 0 ? void 0 : TONE_FRAMES[tone];
+}
+//#endregion
+export { FLOW_NODE_FRAME_COLOR, FLOW_NODE_FRAME_FALLBACK, FLOW_NODE_FRAME_PROPERTY, flowFrameColor };