@parallelworks/ui 0.44.0 → 0.46.0

package/dist/ai/components/Reasoning.js

@@ -1,29 +1,42 @@
-import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../../cx.js";
+import { ChevronRightIcon } from "../../icons.js";
+import { Disclosure } from "../../components/Disclosure.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/Reasoning.tsx
-/** The line a turn's reasoning folds under. It opens the reasoning in place,
-*  above the answer it led to, rather than in a panel the eye has to cross
-*  the page to read. */
-function ReasoningToggle({ open, onToggle, shimmer = false, children }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onToggle,
-		"aria-expanded": open,
-		className: "group/reasoning -ml-1 flex items-center gap-x-1 rounded-md px-1 py-0.5 text-sm theme-muted-text transition-colors hover:theme-text",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: clsx(shimmer && "animate-shimmer text-shimmer"),
-			children
-		}), /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("h-3.5 w-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") })]
+var toggleClasses = "-ml-1 rounded-md px-1 py-0.5 text-sm theme-muted-text transition-colors hover:theme-text";
+/** A turn's reasoning, folded under a line such as "Thought for 5s". It opens
+*  in place, above the answer it led to, rather than in a panel the eye has to
+*  cross the page to read; with `onOpenPanel` the host shows it elsewhere
+*  instead. */
+function Reasoning({ label, shimmer = false, open, onOpenChange, onOpenPanel, preview, children }) {
+	const shown = /* @__PURE__ */ jsx("span", {
+		className: cx(shimmer && "animate-shimmer text-shimmer"),
+		children: label
 	});
+	if (onOpenPanel) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onOpenPanel,
+		className: cx("flex items-center gap-1", toggleClasses),
+		children: [shown, /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			className: "h-3.5 w-3.5"
+		})]
+	}), preview] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Disclosure, {
+		summary: shown,
+		open,
+		onOpenChange,
+		summaryClassName: toggleClasses,
+		children: /* @__PURE__ */ jsx(ReasoningBody, { children })
+	}), !open && preview] });
 }
 /** The reasoning itself: smaller and quieter than the answer, hung off a
 *  hairline of the accent so it reads as the assistant's aside. */
 function ReasoningBody({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
+		className: cx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
 		children
 	});
 }
 //#endregion
-export { ReasoningBody, ReasoningToggle };
+export { Reasoning, ReasoningBody };

package/dist/ai/components/ShareDialog.js

@@ -1,9 +1,11 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { PiShareBold } from "../../icons/pi/PiShareBold.js";
+import { ShareIcon, TrashIcon } from "../../icons.js";
+import { Loader } from "../../components/Loader.js";
+import { toast } from "../../components/Toast.js";
 import { Tooltip } from "../../components/Tooltip.js";
+import { useStrings } from "../../components/Provider.js";
+import { Checkbox } from "../../components/Checkbox.js";
 import { Combobox } from "../../components/Combobox.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
-import Loader from "../../components/Loader.js";
 import { Select } from "../../components/Select.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -15,8 +17,9 @@ function isTeamPermission(p) {
 }
 function ShareDialog({ conversationId, isOpen, onClose }) {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.shareConversation;
-	const { adapter, notify } = useChat();
+	const { adapter } = useChat();
 	const sharing = adapter.sharing;
 	const [permissions, setPermissions] = useState([]);
 	const [teams, setTeams] = useState([]);
@@ -47,7 +50,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				setTeams(await sharing.listGroups());
 			} catch (error) {
 				console.error("Failed to load sharing data:", error);
-				notify.error(t.loadError);
+				toast.error(t.loadError);
 			} finally {
 				setLoading(false);
 			}
@@ -57,7 +60,6 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		isOpen,
 		conversationId,
 		sharing,
-		notify,
 		t.loadError
 	]);
 	const handleSave = useCallback(() => {
@@ -85,10 +87,10 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				}
 				for (const original of originalTeamPerms) if (!currentTeamPerms.find((p) => p.team === original.team) && original.id) await sharing.removePermission(conversationId, original.id);
 			} catch (error) {
-				notify.error(error instanceof Error ? error.message : String(error));
+				toast.error(error instanceof Error ? error.message : String(error));
 				return;
 			}
-			notify.success(t.saveSuccess);
+			toast.success(t.saveSuccess);
 			onClose();
 		});
 	}, [
@@ -100,7 +102,6 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		orgCollaborateAccess,
 		originalOrgCollaborateAccess,
 		onClose,
-		notify,
 		t.saveSuccess
 	]);
 	const handleAddTeam = useCallback((teamId) => {
@@ -137,8 +138,8 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		onClose,
 		align: "center",
 		title: t.title,
-		confirmLabel: strings.modal.save,
-		cancelLabel: strings.modal.cancel,
+		confirmLabel: common.save,
+		cancelLabel: common.cancel,
 		onConfirm: handleSave,
 		confirmDisabled: saving,
 		children: /* @__PURE__ */ jsx("div", {
@@ -147,7 +148,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				className: "py-4",
 				children: /* @__PURE__ */ jsx(Loader, {
 					size: 24,
-					text: strings.modal.loading
+					label: common.loading
 				})
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -159,26 +160,22 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 						className: "space-y-2",
 						children: [/* @__PURE__ */ jsxs("label", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: orgViewAccess,
-								onChange: (e) => {
-									setOrgViewAccess(e.target.checked);
-									if (!e.target.checked) setOrgCollaborateAccess(false);
-								},
-								className: "rounded"
+								onCheckedChange: (on) => {
+									setOrgViewAccess(on);
+									if (!on) setOrgCollaborateAccess(false);
+								}
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-sm",
 								children: t.orgCanView
 							})]
 						}), /* @__PURE__ */ jsxs("label", {
 							className: "flex items-center gap-2 ml-4",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: orgCollaborateAccess,
-								onChange: (e) => setOrgCollaborateAccess(e.target.checked),
-								disabled: !orgViewAccess,
-								className: "rounded"
+								onCheckedChange: setOrgCollaborateAccess,
+								disabled: !orgViewAccess
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-sm",
 								children: t.allowCollaboration
@@ -213,13 +210,13 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 											"aria-label": perm.teamName || perm.team
 										})
 									}), /* @__PURE__ */ jsx(Tooltip, {
-										content: t.remove,
+										content: common.remove,
 										children: /* @__PURE__ */ jsx("button", {
 											type: "button",
 											onClick: () => handleRemoveTeam(perm.team),
 											className: "p-1 rounded hover:bg-red-500/10",
-											"aria-label": `${t.remove} ${perm.teamName || perm.team}`,
-											children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-3 h-3 text-red-500" })
+											"aria-label": `${common.remove} ${perm.teamName || perm.team}`,
+											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
 										})
 									})]
 								})]
@@ -261,7 +258,7 @@ function ShareButton({ conversationId, disabled = false }) {
 		disabled,
 		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text disabled:opacity-50",
 		title: strings.shareConversation.shareButton,
-		children: [/* @__PURE__ */ jsx(PiShareBold, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
+		children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
 	}), /* @__PURE__ */ jsx(ShareDialog, {
 		conversationId,
 		isOpen,

package/dist/ai/components/SlashMenu.js

@@ -1,5 +1,5 @@
+import { cx } from "../../cx.js";
 import { panelClassName, panelItemClassName } from "../../components/floating.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 //#region src/ai/components/SlashMenu.tsx
@@ -83,7 +83,7 @@ function SlashMenu({ label, listId, matches, active, onChoose }) {
 		role: "listbox",
 		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: clsx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-1", panelClassName),
+		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-1", panelClassName),
 		children: matches.map((c, i) => /* @__PURE__ */ jsxs("div", {
 			id: optionId(listId, i),
 			role: "option",
@@ -92,7 +92,7 @@ function SlashMenu({ label, listId, matches, active, onChoose }) {
 			"data-highlighted": i === active || void 0,
 			onMouseDown: (e) => e.preventDefault(),
 			onClick: () => onChoose(c.name),
-			className: clsx("items-baseline gap-3", panelItemClassName),
+			className: cx("items-baseline gap-3", panelItemClassName),
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "font-mono",
 				children: ["/", c.name]

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

@@ -1,10 +1,5 @@
 /** 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'];
-/** 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. */

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

@@ -1,10 +1,11 @@
-import { FaStop } from "../../../icons/fa/FaStop.js";
-import { LoaderIcon } from "../../../components/StatusIcons.js";
+import { cx } from "../../../cx.js";
+import { StopIcon } from "../../../icons.js";
+import { Loader } from "../../../components/Loader.js";
+import { formatCount, formatDuration } from "../../../format.js";
+import { useElapsed } from "../../../components/relativeTime.js";
 import { useChatConfig } from "../../core/config.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-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 = [
@@ -52,41 +53,6 @@ var activityWords = [
 function randomActivityWord() {
 	return activityWords[Math.floor(Math.random() * activityWords.length)] ?? activityWords[0];
 }
-/** 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);
@@ -104,27 +70,24 @@ function useTurnWord(startedAt) {
 *  stop it. */
 function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping = false, word, testId }) {
 	const { strings } = useChatConfig();
-	const elapsed = useElapsedSeconds(startedAt);
+	const elapsed = useElapsed(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)));
+	if (elapsed !== null) meta.push(formatDuration(elapsed));
+	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(formatCount(inputTokens ?? 0), formatCount(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__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 14,
+				color: "var(--theme-accent)"
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				"data-testid": testId ? `${testId}-word` : void 0,
-				className: "min-w-0 truncate text-(--theme-element)",
+				className: "min-w-0 truncate text-(--theme-accent)",
 				children: [word ?? turnWord, "…"]
 			}),
 			meta.length > 0 && /* @__PURE__ */ jsxs("span", {
@@ -142,11 +105,11 @@ function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping =
 				disabled: stopping,
 				"aria-label": strings.input.stopGenerating,
 				title: strings.input.stopGenerating,
-				className: clsx("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(FaStop, { className: "h-3 w-3" }), strings.activity.stop]
+				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(StopIcon, { className: "h-3 w-3" }), strings.activity.stop]
 			})
 		]
 	});
 }
 //#endregion
-export { activityWords, compactCount, ActivityLine as default, formatElapsed };
+export { activityWords, ActivityLine as default };