@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/components/SlashMenu.js

@@ -0,0 +1,91 @@
+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/SlashMenu.tsx
+var MAX_SHOWN = 8;
+var TYPING_NAME = /^\/([\w:-]*)$/;
+function slashMatches(input, commands) {
+	const typed = TYPING_NAME.exec(input);
+	if (!typed) return [];
+	const query = (typed[1] ?? "").toLowerCase();
+	return commands.filter((c) => c.name.toLowerCase().startsWith(query)).slice(0, MAX_SHOWN);
+}
+/** The palette's open state and keys; the caller owns the input. */
+function useSlashMenu(input, config, setInput) {
+	const [active, setActive] = useState(0);
+	const [dismissed, setDismissed] = useState(false);
+	const matches = config ? slashMatches(input, config.commands) : [];
+	const exact = matches.length === 1 && `/${matches[0]?.name}` === input;
+	const open = matches.length > 0 && !dismissed && !exact;
+	const startsCommand = input.startsWith("/");
+	const onOpen = config?.onOpen;
+	useEffect(() => {
+		if (startsCommand) onOpen?.();
+	}, [startsCommand, onOpen]);
+	const query = TYPING_NAME.exec(input)?.[1] ?? null;
+	const [shownQuery, setShownQuery] = useState(query);
+	if (query !== shownQuery) {
+		setShownQuery(query);
+		setActive(0);
+		setDismissed(false);
+	}
+	const choose = (name) => setInput(`/${name} `);
+	/** True when the key belonged to the menu. */
+	const handleKey = (e) => {
+		if (!open) return false;
+		switch (e.key) {
+			case "ArrowDown":
+				setActive((i) => (i + 1) % matches.length);
+				break;
+			case "ArrowUp":
+				setActive((i) => (i - 1 + matches.length) % matches.length);
+				break;
+			case "Tab":
+			case "Enter": {
+				if (e.shiftKey) return false;
+				const pick = matches[Math.min(active, matches.length - 1)];
+				if (!pick) return false;
+				choose(pick.name);
+				break;
+			}
+			case "Escape":
+				setDismissed(true);
+				break;
+			default: return false;
+		}
+		e.preventDefault();
+		return true;
+	};
+	return {
+		open,
+		matches,
+		active,
+		choose,
+		handleKey
+	};
+}
+function SlashMenu({ label, matches, active, onChoose }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "listbox",
+		"aria-label": label,
+		"data-testid": "slash-menu",
+		className: "absolute bottom-full left-0 right-0 mb-2 z-20 overflow-hidden rounded-xl border theme-border bg-(--theme-panel-bg) shadow-lg",
+		children: matches.map((c, i) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "option",
+			"aria-selected": i === active,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => onChoose(c.name),
+			className: cx("flex w-full items-baseline gap-3 px-3 py-1.5 text-left text-sm", i === active ? "theme-hover" : "hover:theme-hover"),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "font-mono theme-text",
+				children: ["/", c.name]
+			}), c.description && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs theme-muted-text",
+				children: c.description
+			})]
+		}, c.name))
+	});
+}
+//#endregion
+export { SlashMenu, slashMatches, useSlashMenu };

package/dist/ai/components/agent/ActivityLine.d.ts

@@ -0,0 +1,21 @@
+/** The agent status words: one is picked per turn and held until it ends. */
+export declare const activityWords: readonly ['Thinking', 'Cogitating', 'Pondering', 'Percolating', 'Ruminating', 'Noodling', 'Conjuring', 'Simmering', 'Marinating', 'Tinkering', 'Scheming', 'Brewing', 'Wrangling', 'Finagling', 'Spelunking', 'Puttering', 'Composing', 'Synthesizing', 'Deliberating', 'Mulling', 'Contemplating', 'Vibing', 'Whittling', 'Concocting', 'Formulating', 'Hatching', 'Herding', 'Ideating', 'Manifesting', 'Moseying', 'Musing', 'Percussing', 'Reticulating', 'Schlepping', 'Stewing', 'Transmuting', 'Wibbling', 'Crunching', 'Forging', 'Cooking'];
+export declare function randomActivityWord(): string;
+/** Elapsed run time the way an agent status line prints it: 45s, 2m13s,
+ *  1h2m3s. */
+export declare function formatElapsed(seconds: number): string;
+/** Token counts the way an agent status line prints them: 512, 1.2k, 3.4M. */
+export declare function compactCount(n: number): string;
+/** The terminal's "it's working" line for a running turn: spinner, status
+ *  word, how long the turn has run, its token counts so far, and a way to
+ *  stop it. */
+export default function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping, word, testId, }: {
+    startedAt: string | null | undefined;
+    inputTokens?: number | undefined;
+    outputTokens?: number | undefined;
+    onStop?: (() => void) | undefined;
+    stopping?: boolean;
+    /** Replaces the turn's word, the way a running hook names itself. */
+    word?: string | undefined;
+    testId?: string;
+}): import("react").JSX.Element;

package/dist/ai/components/agent/ActivityLine.js

@@ -0,0 +1,151 @@
+import { LoaderIcon, StopSolidIcon } from "../../../icons.js";
+import { useChatConfig } from "../../core/config.js";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+//#region src/ai/components/agent/ActivityLine.tsx
+/** The agent status words: one is picked per turn and held until it ends. */
+var activityWords = [
+	"Thinking",
+	"Cogitating",
+	"Pondering",
+	"Percolating",
+	"Ruminating",
+	"Noodling",
+	"Conjuring",
+	"Simmering",
+	"Marinating",
+	"Tinkering",
+	"Scheming",
+	"Brewing",
+	"Wrangling",
+	"Finagling",
+	"Spelunking",
+	"Puttering",
+	"Composing",
+	"Synthesizing",
+	"Deliberating",
+	"Mulling",
+	"Contemplating",
+	"Vibing",
+	"Whittling",
+	"Concocting",
+	"Formulating",
+	"Hatching",
+	"Herding",
+	"Ideating",
+	"Manifesting",
+	"Moseying",
+	"Musing",
+	"Percussing",
+	"Reticulating",
+	"Schlepping",
+	"Stewing",
+	"Transmuting",
+	"Wibbling",
+	"Crunching",
+	"Forging",
+	"Cooking"
+];
+function randomActivityWord() {
+	return activityWords[Math.floor(Math.random() * activityWords.length)];
+}
+/** Elapsed run time the way an agent status line prints it: 45s, 2m13s,
+*  1h2m3s. */
+function formatElapsed(seconds) {
+	const total = Math.max(0, Math.floor(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	if (hours > 0) return `${hours}h${minutes}m${rest}s`;
+	if (minutes > 0) return `${minutes}m${rest}s`;
+	return `${rest}s`;
+}
+/** Token counts the way an agent status line prints them: 512, 1.2k, 3.4M. */
+function compactCount(n) {
+	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+	return String(Math.floor(n));
+}
+function secondsSince(iso) {
+	return Math.max(0, DateTime.now().diff(DateTime.fromISO(iso)).as("seconds"));
+}
+/** Seconds since `startedAt`, re-read every second; null when there is no
+*  start to count from. */
+function useElapsedSeconds(startedAt) {
+	const [elapsed, setElapsed] = useState(() => startedAt ? secondsSince(startedAt) : null);
+	useEffect(() => {
+		if (!startedAt) {
+			setElapsed(null);
+			return;
+		}
+		setElapsed(secondsSince(startedAt));
+		const id = setInterval(() => setElapsed(secondsSince(startedAt)), 1e3);
+		return () => clearInterval(id);
+	}, [startedAt]);
+	return elapsed;
+}
+/** A status word held for the whole turn and re-rolled when a new one starts. */
+function useTurnWord(startedAt) {
+	const [word, setWord] = useState(randomActivityWord);
+	const turn = useRef(startedAt);
+	useEffect(() => {
+		if (turn.current !== startedAt) {
+			turn.current = startedAt;
+			setWord(randomActivityWord());
+		}
+	}, [startedAt]);
+	return word;
+}
+/** The terminal's "it's working" line for a running turn: spinner, status
+*  word, how long the turn has run, its token counts so far, and a way to
+*  stop it. */
+function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping = false, word, testId }) {
+	const { strings } = useChatConfig();
+	const elapsed = useElapsedSeconds(startedAt);
+	const turnWord = useTurnWord(startedAt);
+	const meta = [];
+	if (elapsed !== null) meta.push(formatElapsed(elapsed));
+	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(compactCount(inputTokens ?? 0), compactCount(outputTokens ?? 0)));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: "flex min-h-8 items-center gap-2 px-1 text-sm",
+		children: [
+			/* @__PURE__ */ jsx(LoaderIcon, {
+				className: "h-3.5 w-3.5 shrink-0 animate-spin text-(--theme-element) motion-reduce:hidden",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden shrink-0 leading-none text-(--theme-element) motion-reduce:inline",
+				"aria-hidden": "true",
+				children: "●"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-testid": testId ? `${testId}-word` : void 0,
+				className: "min-w-0 truncate text-(--theme-element)",
+				children: [word ?? turnWord, "…"]
+			}),
+			meta.length > 0 && /* @__PURE__ */ jsxs("span", {
+				"data-testid": testId ? `${testId}-meta` : void 0,
+				className: "shrink-0 text-xs tabular-nums theme-muted-text",
+				children: [
+					"(",
+					meta.join(" · "),
+					")"
+				]
+			}),
+			onStop && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onStop,
+				disabled: stopping,
+				"aria-label": strings.input.stopGenerating,
+				title: strings.input.stopGenerating,
+				className: cx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
+				children: [/* @__PURE__ */ jsx(StopSolidIcon, { className: "h-3 w-3" }), strings.activity.stop]
+			})
+		]
+	});
+}
+//#endregion
+export { activityWords, compactCount, ActivityLine as default, formatElapsed, randomActivityWord };

package/dist/ai/components/agent/AgentMessageParts.d.ts

@@ -0,0 +1,54 @@
+import { type PartRendererProps } from '../../core/config.js';
+import type { ApprovalPart, MessagePart, NoticePart, ReasoningPart, SubagentPart, TodoSnapshotPart, ToolCallPart } from '../../types.js';
+export declare function ToolCallBlock({ part }: {
+    part: ToolCallPart;
+}): import("react").JSX.Element;
+/** Drawn the way the TUI draws a delegated Task: a tool-shaped header
+ *  `Task(description)`, and under it the latest action while running or
+ *  `Done (summary)` once finished. Expanding shows the whole activity feed. */
+export declare function SubagentCard({ part }: {
+    part: SubagentPart;
+}): import("react").JSX.Element;
+export declare function ApprovalBlock({ part, onApprovalAnswer, }: {
+    part: ApprovalPart;
+    onApprovalAnswer?: PartRendererProps['onApprovalAnswer'];
+}): import("react").JSX.Element;
+export declare function TodoSnapshotBlock({ part }: {
+    part: TodoSnapshotPart;
+}): import("react").JSX.Element;
+export declare function NoticeBlock({ part }: {
+    part: NoticePart;
+}): import("react").JSX.Element;
+/** The TUI's thought: the body shows while it streams, then folds to its
+ *  label and opens on request. The composer's activity line carries the
+ *  live signal, so nothing here animates. */
+export declare function ReasoningBlock({ part, isStreaming, }: {
+    part: ReasoningPart;
+    isStreaming?: boolean;
+}): import("react").JSX.Element;
+type RunMember = {
+    part: ToolCallPart | ReasoningPart;
+    index: number;
+};
+type RenderItem = {
+    kind: 'single';
+    part: MessagePart;
+    index: number;
+} | {
+    kind: 'reasoning';
+    parts: ReasoningPart[];
+    index: number;
+} | {
+    kind: 'rollup';
+    members: RunMember[];
+};
+/** Two thoughts with nothing visible between them read as one, not as a
+ *  stack of identical lines. */
+export declare function mergeReasoning(parts: ReasoningPart[]): ReasoningPart;
+export declare function buildRenderItems(parts: MessagePart[]): RenderItem[];
+export default function AgentMessageParts({ message, isStreaming, onApprovalAnswer, }: {
+    message: PartRendererProps['message'];
+    isStreaming?: boolean;
+    onApprovalAnswer?: PartRendererProps['onApprovalAnswer'];
+}): import("react").JSX.Element;
+export {};