@cueplusplus/ui 0.2.0 → 0.5.0

package/dist/elements/composer.js

@@ -0,0 +1,505 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, field, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, mono, paper } from "./surfaces.js";
+import { clamp, pct } from "./range.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, CheckIcon, ChevronDownIcon, FileArchiveIcon, FileImageIcon, FileTextIcon, Loader2Icon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react";
+//#region src/elements/composer.tsx
+const ATTACHMENT_ICONS = {
+	image: FileImageIcon,
+	text: FileTextIcon,
+	archive: FileArchiveIcon
+};
+const BARS = Array.from({ length: 14 }, (_, i) => i);
+function barHeight(bar, tick) {
+	return 5 + Math.abs(Math.sin(bar * 1.35 + tick * .55)) * 13;
+}
+/**
+* Commands whose name starts with the slash query, or none when not typing one.
+*
+* @example
+* import { ComposerCommandItem, ComposerMenu, useSlashMatches } from "@cueplusplus/ui/elements";
+*
+* const matches = useSlashMatches(value, commands);
+*
+* <ComposerMenu open={matches.length > 0}>
+*   {matches.map((command, index) => (
+*     <ComposerCommandItem
+*       key={command.name}
+*       command={command}
+*       active={index === active}
+*       onClick={() => setValue(`/${command.name} `)}
+*     />
+*   ))}
+* </ComposerMenu>
+*/
+function useSlashMatches(value, commands) {
+	return useMemo(() => {
+		if (!commands || !value.startsWith("/")) return [];
+		const query = value.slice(1).toLowerCase();
+		return commands.filter((command) => command.name.startsWith(query));
+	}, [commands, value]);
+}
+/**
+* People matching a trailing @mention, or none when the caret is not in one.
+*
+* @example
+* import { ComposerMenu, ComposerPersonItem, applyMention, useMentionMatches } from "@cueplusplus/ui/elements";
+*
+* const matches = useMentionMatches(value, people);
+*
+* <ComposerMenu open={matches.length > 0} align="end">
+*   {matches.map((person, index) => (
+*     <ComposerPersonItem
+*       key={person.name}
+*       person={person}
+*       active={index === active}
+*       onClick={() => setValue(applyMention(value, person.name))}
+*     />
+*   ))}
+* </ComposerMenu>
+*/
+function useMentionMatches(value, people) {
+	return useMemo(() => {
+		if (!people) return [];
+		const match = /@([\w]*)$/.exec(value);
+		if (!match) return [];
+		const query = match[1]?.toLowerCase() ?? "";
+		return people.filter((person) => person.name.toLowerCase().startsWith(query));
+	}, [people, value]);
+}
+/** Replaces the trailing @mention with the chosen name. */
+function applyMention(value, name) {
+	return value.replace(/@[\w]*$/, `@${name} `);
+}
+/**
+* The unified input: attachments, commands, mentions, models, voice, and context in
+* one surface.
+*
+* @example
+* import {
+*   Composer,
+*   ComposerActions,
+*   ComposerAttachButton,
+*   ComposerBar,
+*   ComposerInput,
+*   ComposerSend,
+*   ComposerToolbar,
+* } from "@cueplusplus/ui/elements";
+*
+* <Composer>
+*   <ComposerBar>
+*     <ComposerInput value={value} placeholder="Ask anything" onChange={onChange} onSubmit={send} />
+*     <ComposerToolbar>
+*       <ComposerActions><ComposerAttachButton onClick={pick} /></ComposerActions>
+*       <ComposerActions><ComposerSend streaming={false} idle={!value} onClick={send} /></ComposerActions>
+*     </ComposerToolbar>
+*   </ComposerBar>
+* </Composer>
+*/
+function ElementsComposer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer",
+		className: cn("relative w-full max-w-lg", className),
+		...props
+	});
+}
+/**
+* The bar itself: the paper the input, the attachments and the toolbar sit on.
+* `dragActive` tints it while a file is over it, which is the only feedback a drop
+* target gets before the drop.
+*/
+function ComposerBar({ dragActive = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-bar",
+		"data-drag-active": dragActive || void 0,
+		className: cn(paper, "flex w-full flex-col gap-2 rounded-(--radius-overlay) p-2.5 transition-colors", dragActive && "bg-stream/10", className),
+		...props
+	});
+}
+/**
+* The popover the slash and mention menus are drawn in, anchored above the bar. It
+* animates open rather than mounting, so the caret never moves under it.
+*/
+function ComposerMenu({ open, align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-menu",
+		"data-open": open || void 0,
+		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-(--radius-overlay) p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
+		...props
+	});
+}
+/**
+* One row of a `ComposerMenu`, and the chassis the command, person and model rows are
+* built on.
+*/
+function ComposerMenuItem({ active = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "composer-menu-item",
+		"data-active": active || void 0,
+		className: cn("flex w-full items-center gap-2.5 rounded-(--radius-surface) px-2.5 py-2 text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1", className),
+		...props
+	});
+}
+/**
+* A slash command in the menu: its icon, `/name`, what it does, and the return key on
+* the active row.
+*/
+function ComposerCommandItem({ command, active, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(command.icon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "font-medium",
+				children: ["/", command.name]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted flex-1 truncate text-start text-(length:--cue-text-ui)",
+				children: command.description
+			}),
+			active && /* @__PURE__ */ jsx("kbd", {
+				className: "bg-surface-2 text-fg-muted rounded-(--radius-control) px-1 font-mono text-(length:--cue-text-micro)",
+				children: "↵"
+			})
+		]
+	});
+}
+/**
+* A mentionable person in the menu: their initial, their name, and whether they are an
+* agent or a human.
+*/
+function ComposerPersonItem({ person, active, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-2 text-fg-muted flex size-5 shrink-0 items-center justify-center rounded-full text-(length:--cue-text-micro) font-medium",
+				children: person.name[0]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-start",
+				children: person.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle"),
+				children: person.role
+			})
+		]
+	});
+}
+/** The rail the attachment chips wrap in, above the input. */
+function ComposerAttachments({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-attachments",
+		className: cn("flex flex-wrap gap-2", className),
+		...props
+	});
+}
+/**
+* One attached file as a chip: an icon for its kind, its name and size, and — while it
+* uploads — a progress hairline along the bottom edge. A finished one offers remove, a
+* failed one says so in its meta line.
+*/
+function ComposerAttachmentChip({ attachment, onRemove, className, ...props }) {
+	const Icon = ATTACHMENT_ICONS[attachment.kind ?? "text"];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-attachment",
+		"data-state": attachment.state,
+		className: cn(field, "relative flex items-center gap-2.5 overflow-hidden rounded-(--radius-surface) py-1.5 ps-1.5 pe-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-2 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "max-w-36 truncate text-(length:--cue-text-ui) font-medium",
+					children: attachment.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("text-(length:--cue-text-label)", attachment.state === "error" ? "text-danger/80" : "text-fg-subtle"),
+					children: attachment.meta
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ms-1 flex w-5 items-center justify-end",
+				children: attachment.state === "uploading" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 animate-spin motion-reduce:animate-none" }) : attachment.state === "done" && onRemove ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove ${attachment.name}`,
+					onClick: () => onRemove(attachment.name),
+					className: cn(ghostButton, "size-5 [&_svg]:size-3"),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				}) : attachment.state === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }) : null
+			}),
+			attachment.state === "uploading" && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "absolute inset-x-0 bottom-0 h-0.5 bg-stream/70 transition-[width] duration-300",
+				style: { width: `${pct(attachment.progress ?? 0, 100)}%` }
+			})
+		]
+	});
+}
+/**
+* The text field. Enter submits, guarded against IME composition so accepting a
+* candidate does not send the message.
+*/
+function ComposerInput({ onSubmit, onKeyDown, className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": "composer-input",
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+			onSubmit?.();
+		},
+		className: cn("placeholder:text-fg-subtle min-h-11 w-full bg-transparent px-3 text-(length:--cue-text-emphasis) caret-stream outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", className),
+		...props
+	});
+}
+/**
+* What replaces the input while the microphone is open: a level meter, a running clock
+* while recording, and a shimmering `Transcribing` once it stops.
+*/
+function ComposerVoice({ recording, seconds, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-voice",
+		"data-recording": recording || void 0,
+		className: cn("flex min-h-11 items-center gap-3 ps-3", className),
+		...props,
+		children: [
+			recording && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "size-1.5 animate-pulse rounded-full bg-stream"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-6 items-center gap-[3px]",
+				"aria-hidden": true,
+				children: BARS.map((bar) => /* @__PURE__ */ jsx("span", {
+					className: cn("w-0.5 rounded-full transition-[height,background-color] duration-150 motion-reduce:transition-none", recording ? "bg-accent" : "bg-surface-3"),
+					style: { height: recording ? barHeight(bar, seconds * 10) : 3 }
+				}, bar))
+			}),
+			recording ? /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: ["0:", String(seconds).padStart(2, "0")]
+			}) : /* @__PURE__ */ jsx(ShimmerLabel, {
+				className: "text-fg-muted relative text-(length:--cue-text-body)",
+				children: "Transcribing"
+			})
+		]
+	});
+}
+/** The row under the input, which holds the two `ComposerActions` clusters. */
+function ComposerToolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-toolbar",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+/** One cluster of controls in the toolbar. Two of them, one at each end. */
+function ComposerActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-actions",
+		className: cn("flex items-center gap-1.5", className),
+		...props
+	});
+}
+/**
+* The paperclip, as a plus. Disabled when no handler is given, rather than rendering a
+* control that does nothing.
+*/
+function ComposerAttachButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Add attachment",
+		"data-slot": "composer-attach",
+		disabled: !props.onClick,
+		className: cn(ghostButton, "size-8 disabled:pointer-events-none disabled:opacity-30", className),
+		...props,
+		children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+	});
+}
+/**
+* The model name in the toolbar, which opens the model menu. Carries `aria-expanded`
+* for it.
+*/
+function ComposerModelTrigger({ model, open, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		"data-slot": "composer-model-trigger",
+		className: cn("text-fg-muted hover:bg-surface-2 hover:text-fg flex h-8 items-center gap-1.5 rounded-full px-3 text-(length:--cue-text-body) transition-colors", className),
+		...props,
+		children: [model, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 opacity-60" })]
+	});
+}
+/** One model in the menu, with its metadata and a tick on the chosen one. */
+function ComposerModelItem({ entry, selected, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active: selected,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-start",
+				children: entry.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: entry.meta
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex w-4 justify-end",
+				children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 duration-200" })
+			})
+		]
+	});
+}
+/**
+* The context-window dial in the toolbar, with the breakdown on hover or focus. It
+* turns danger-coloured past 85%, which is the point where the next long tool result
+* starts costing the conversation its own history.
+*/
+function ComposerContext({ usage, className, ...props }) {
+	const used = usage.system + usage.tools + usage.messages;
+	const fraction = usage.total === 0 ? 0 : used / usage.total;
+	const warn = fraction > .85;
+	const circumference = 2 * Math.PI * 6;
+	const segments = [
+		{
+			label: "System",
+			value: usage.system,
+			className: "bg-surface-3"
+		},
+		{
+			label: "Tools",
+			value: usage.tools,
+			className: "bg-surface-3"
+		},
+		{
+			label: "Messages",
+			value: usage.messages,
+			className: "bg-accent"
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-context",
+		className: cn("group/ctx relative", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-(--radius-overlay) p-4", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: "Context"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: cn(mono, "tabular-nums", warn ? "text-danger" : "text-fg-subtle"),
+						children: [Math.round(fraction * 100), "%"]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-surface-2 flex h-[5px] w-full gap-px overflow-hidden rounded-full",
+					children: segments.map((segment) => /* @__PURE__ */ jsx("span", {
+						className: cn("h-full transition-[width] duration-700 motion-reduce:transition-none", segment.className),
+						style: { width: `${pct(segment.value, usage.total)}%` }
+					}, segment.label))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: segments.map((segment) => /* @__PURE__ */ jsxs("div", {
+						className: "text-fg-muted flex items-center gap-2.5 text-(length:--cue-text-body)",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: cn("size-1.5 rounded-full", segment.className)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1",
+								children: segment.label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn(mono, "text-fg-subtle tabular-nums"),
+								children: [segment.value, "k"]
+							})
+						]
+					}, segment.label))
+				}),
+				/* @__PURE__ */ jsx("div", { className: "bg-surface-2 h-px" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-fg-muted flex items-center justify-between text-(length:--cue-text-body)",
+					children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle tabular-nums"),
+						children: [
+							used,
+							"k / ",
+							usage.total,
+							"k"
+						]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Context usage",
+			className: cn(ghostButton, "size-8", warn && "text-danger"),
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 16 16",
+				className: "size-4 -rotate-90",
+				"aria-hidden": true,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6",
+					fill: "none",
+					strokeWidth: "2.5",
+					className: "stroke-fg-subtle"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6",
+					fill: "none",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					className: "stroke-current transition-[stroke-dashoffset] duration-700 motion-reduce:transition-none",
+					strokeDasharray: circumference,
+					strokeDashoffset: circumference * (1 - clamp(fraction, 0, 1))
+				})]
+			})
+		})]
+	});
+}
+/** The microphone, which becomes a filled stop while recording. */
+function ComposerVoiceButton({ active, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": active ? "Stop recording" : "Start voice input",
+		"data-slot": "composer-voice-button",
+		className: cn(active ? cn(inkButton, "flex size-8 items-center justify-center rounded-full") : cn(ghostButton, "size-8"), className),
+		...props,
+		children: active ? /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" }) : /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+	});
+}
+/**
+* Send, which becomes stop while the model is streaming. Dim when the input is empty
+* and there is nothing to send; the arrow and the square cross-fade rather than swap.
+*/
+function ComposerSend({ streaming, idle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": streaming ? "Stop generating" : "Send message",
+		"data-slot": "composer-send",
+		className: cn("grid size-8 place-items-center rounded-full", streaming || !idle ? inkButton : "bg-surface-2 text-fg-subtle transition-colors", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowUpIcon, { className: cn(iconSwap, "size-4", streaming ? iconSwapOut : iconSwapIn) }), /* @__PURE__ */ jsx(SquareIcon, { className: cn(iconSwap, "size-3 fill-current", streaming ? iconSwapIn : iconSwapOut) })]
+	});
+}
+//#endregion
+export { ComposerActions, ComposerAttachButton, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModelItem, ComposerModelTrigger, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerVoice, ComposerVoiceButton, ElementsComposer, applyMention, useMentionMatches, useSlashMatches };

package/dist/elements/computer-use.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from "react";
+//#region src/elements/computer-use.d.ts
+/**
+ * One thing the agent did to the screen, and where it did it. `x` and `y` are
+ * percentages of the frame, so the trail survives a resize.
+ */
+interface ComputerStep {
+  /** Stable identity for the step key. */
+  id: string;
+  /** Verb the agent performed: click, type, scroll. */
+  action: string;
+  /** What it acted on. */
+  target: string;
+  /** Horizontal position as a percentage of the viewport width. */
+  x: number;
+  /** Vertical position as a percentage of the viewport height. */
+  y: number;
+}
+/**
+ * The screen the agent is driving, with a cursor trail and what it is doing right now.
+ *
+ * @example
+ * import { ComputerUse } from "@cueplusplus/ui/elements";
+ *
+ * <ComputerUse url="github.com/..." steps={steps} activeIndex={2}>
+ *   <iframe title="Session" src={streamUrl} />
+ * </ComputerUse>
+ */
+declare function ComputerUse({ url, steps, activeIndex, children, className, ...props }: Omit<ComponentProps<"div">, "url" | "steps" | "activeIndex" | "children"> & {
+  /** What the session is pointed at. */
+  url: string;
+  /** Actions taken, in order. Each carries the coordinates the cursor moved to. */
+  steps: readonly ComputerStep[];
+  /** Which step is happening now. The two before it stay as a fading trail. */
+  activeIndex: number;
+  /** The viewport being driven: a video stream, a screenshot, an iframe. */
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { ComputerStep, ComputerUse };

package/dist/elements/computer-use.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { at, indexIn } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MousePointer2Icon } from "lucide-react";
+//#region src/elements/computer-use.tsx
+/**
+* The screen the agent is driving, with a cursor trail and what it is doing right now.
+*
+* @example
+* import { ComputerUse } from "@cueplusplus/ui/elements";
+*
+* <ComputerUse url="github.com/..." steps={steps} activeIndex={2}>
+*   <iframe title="Session" src={streamUrl} />
+* </ComputerUse>
+*/
+function ComputerUse({ url, steps, activeIndex, children, className, ...props }) {
+	const index = indexIn(steps, activeIndex);
+	const active = at(steps, index);
+	const trail = steps.slice(Math.max(0, index - 2), index + 1);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "computer-use",
+		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-2 px-3 py-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 gap-1",
+					children: [
+						"bg-danger/50",
+						"bg-warn/50",
+						"bg-ok/50"
+					].map((tint) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-2 rounded-full", tint)
+					}, tint))
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(field, mono, "text-fg-muted min-w-0 flex-1 truncate rounded-full px-2.5 py-1"),
+					children: url
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border relative min-h-[8.5rem] overflow-hidden border-t",
+				children: [
+					children,
+					trail.map((step, i) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute size-2 rounded-full bg-stream transition-opacity duration-300",
+						style: {
+							left: `${step.x}%`,
+							top: `${step.y}%`,
+							opacity: .18 * (i + 1)
+						}
+					}, step.id)),
+					active && /* @__PURE__ */ jsx(MousePointer2Icon, {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute size-4 fill-stream text-stream transition-[left,top] duration-500 ease-out motion-reduce:transition-none",
+						style: {
+							left: `${active.x}%`,
+							top: `${active.y}%`
+						}
+					})
+				]
+			}),
+			active && /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center gap-2 border-t px-3.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted shrink-0"),
+						children: active.action
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+						children: active.target
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+						children: [
+							index + 1,
+							"/",
+							steps.length
+						]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { ComputerUse };

package/dist/elements/confidence-marker.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps } from "react";
+//#region src/elements/confidence-marker.d.ts
+/**
+ * How far a claim can be trusted: `grounded` in a source, `inferred` from one, or
+ * `uncertain` — the model's own guess. It decides the underline and the basis chip.
+ */
+type Confidence = "grounded" | "inferred" | "uncertain";
+/** One clause of an answer, with how far it can be trusted and what it rests on. */
+interface ConfidenceClaim {
+  /** Stable identity, compared against hoveredId. */
+  id: string;
+  /** The claim, rendered inline with its confidence underline. */
+  text: string;
+  /** Drives the underline: solid green, solid amber, dotted red. */
+  confidence: Confidence;
+  /** What backs the claim, shown in the hover pill. */
+  basis: string;
+}
+/**
+ * Which claims came from a source, which were inferred, and which are guesses.
+ *
+ * @example
+ * import { ConfidenceMarker } from "@cueplusplus/ui/elements";
+ *
+ * <ConfidenceMarker claims={claims} hoveredId={hoveredId} onHover={setHoveredId} />
+ */
+declare function ConfidenceMarker({ claims, hoveredId, onHover, className, ...props }: Omit<ComponentProps<"div">, "children" | "claims" | "hoveredId" | "onHover"> & {
+  /**
+   * The answer split into claims. Each is underlined according to how well it is
+   * supported.
+   */
+  claims: readonly ConfidenceClaim[];
+  /** Which claim is hovered. Pass an empty string for none. */
+  hoveredId: string;
+  /** Called with the hovered claim id, or an empty string on exit. */
+  onHover?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { Confidence, ConfidenceClaim, ConfidenceMarker };