@parallelworks/ui 0.26.0 → 0.28.0

package/dist/ai/components/PastedText.js

@@ -3,6 +3,8 @@ import { FiX } from "../../icons/fi/FiX.js";
 import { ImSpinner5 } from "../../icons/im/ImSpinner5.js";
 import { useChatConfig } from "../core/config.js";
 import { formatFileSize } from "../utils.js";
+import Markdown from "../ui/Markdown.js";
+import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
 import cx from "classnames";
 import { Fragment } from "react";
@@ -14,7 +16,7 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatFileSize(bytes)}`);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "paste-file-card",
-		className: cx("inline-flex max-w-full items-center gap-2.5 rounded-xl border px-3 py-2 align-top whitespace-normal", "bg-(--theme-muted-panel-bg)", error ? "border-red-500" : "theme-border"),
+		className: cx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
 		children: [
 			/* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
 			/* @__PURE__ */ jsxs("div", {
@@ -39,14 +41,27 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 		]
 	});
 }
-/** A user message as typed: an inline paste as its text, one sent as its file as a card. */
+/** A user message as typed: an inline paste as a code block in the language
+*  it reads as, one sent as its file as a card. The blank lines the composer puts around a
+*  paste would stack on the block's own spacing, so they are dropped. */
 function UserMessageText({ content, pastes }) {
 	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
-	return /* @__PURE__ */ jsx(Fragment$1, { children: splitPastes(content, pastes).map((segment, i) => {
-		if (typeof segment === "string") return /* @__PURE__ */ jsx(Fragment, { children: segment }, i);
-		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: segment.text }, i);
+	const segments = splitPastes(content, pastes);
+	const shows = (seg) => typeof seg !== "string" || seg.trim() !== "";
+	const blockSpacing = (i) => cx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, i) => {
+		if (typeof segment === "string") {
+			let text = segment;
+			if (i > 0) text = text.replace(/^\n+/, "");
+			if (i < segments.length - 1) text = text.replace(/\n+$/, "");
+			return text ? /* @__PURE__ */ jsx(Fragment, { children: text }, i) : null;
+		}
+		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
+			className: cx("chat-paste-code block", blockSpacing(i)),
+			children: /* @__PURE__ */ jsx(Markdown, { children: fencePaste(segment.text) })
+		}, i);
 		return /* @__PURE__ */ jsx("span", {
-			className: "my-1 block",
+			className: cx("flex [&>*]:flex-1", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(PasteFileCard, {
 				id: segment.id,
 				lines: segment.lines,

package/dist/ai/components/Reasoning.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/** 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. */
+export declare function ReasoningToggle({ open, onToggle, shimmer, children, }: {
+    open: boolean;
+    onToggle: () => void;
+    /** While the model is still thinking the label shimmers. */
+    shimmer?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The reasoning itself: smaller and quieter than the answer, hung off a
+ *  hairline of the accent so it reads as the assistant's aside. */
+export declare function ReasoningBody({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ai/components/Reasoning.js

@@ -0,0 +1,29 @@
+import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
+import cx from "classnames";
+import { 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: cx(shimmer && "animate-shimmer text-shimmer"),
+			children
+		}), /* @__PURE__ */ jsx(LuChevronRight, { className: cx("h-3.5 w-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") })]
+	});
+}
+/** 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: 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 };

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

@@ -10,6 +10,7 @@ import { thinkingHeading } from "../../agent/transcript.js";
 import { useChatConfig } from "../../core/config.js";
 import Markdown from "../../ui/Markdown.js";
 import { chatProseClasses } from "../../ui/prose.js";
+import { ReasoningBody, ReasoningToggle } from "../Reasoning.js";
 import cx from "classnames";
 import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -520,41 +521,50 @@ function formatThinkingDuration(ms) {
 	if (s < 60) return `${s}s`;
 	return `${Math.floor(s / 60)}m ${s % 60}s`;
 }
-/** 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. */
+/** The TUI's thought, drawn like a chat reply's: while it streams its label
+*  shimmers over the latest lines, then it folds to the label and opens in
+*  place on request. */
 function ReasoningBlock({ part, isStreaming }) {
 	const { strings } = useChatConfig();
 	const t = strings.thinking;
 	const [expanded, setExpanded] = useState(false);
 	const label = thinkingHeading(part.text) || (part.durationMs ? t.thoughtFor(formatThinkingDuration(part.durationMs)) : t.label);
 	const hasBody = part.text.trim() !== "";
-	const body = hasBody && /* @__PURE__ */ jsx("div", {
-		className: "ml-1 border-l theme-border pl-3 text-sm theme-muted-text",
-		"data-testid": "reasoning-body",
-		children: /* @__PURE__ */ jsx(Markdown, {
-			isStreaming: isStreaming ?? false,
-			children: part.text
-		})
+	const markdown = /* @__PURE__ */ jsx(Markdown, {
+		isStreaming: isStreaming ?? false,
+		children: part.text
 	});
-	if (isStreaming) return /* @__PURE__ */ jsx("div", {
+	if (isStreaming) return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		"data-testid": "reasoning-part",
-		children: body
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "animate-shimmer text-shimmer text-sm",
+			children: label
+		}), hasBody && /* @__PURE__ */ jsx(ReasoningBody, {
+			className: "chat-reasoning-tail",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex max-h-20 flex-col justify-end overflow-hidden",
+				"data-testid": "reasoning-body",
+				children: markdown
+			})
+		})]
+	});
+	if (!hasBody) return /* @__PURE__ */ jsx("div", {
+		className: "py-1.5 text-sm theme-muted-text",
+		"data-testid": "reasoning-part",
+		children: label
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		"data-testid": "reasoning-part",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => hasBody && setExpanded((v) => !v),
-			"aria-expanded": expanded,
-			className: cx("flex min-h-6 items-center gap-x-1 text-sm theme-muted-text transition-colors", hasBody && "hover:theme-text"),
-			children: [/* @__PURE__ */ jsx("span", { children: label }), hasBody && /* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3.5 h-3.5 transition-transform", expanded && "rotate-90") })]
-		}), expanded && /* @__PURE__ */ jsx("div", {
-			className: "mt-1.5",
-			children: body
-		})]
+		children: [/* @__PURE__ */ jsx(ReasoningToggle, {
+			open: expanded,
+			onToggle: () => setExpanded((v) => !v),
+			children: label
+		}), expanded && /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx("div", {
+			"data-testid": "reasoning-body",
+			children: markdown
+		}) })]
 	});
 }
 function TextBlock({ part, isStreaming }) {

package/dist/ai/core/ChatProvider.js

@@ -441,6 +441,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		try {
 			const useResponses = state.models.find((m) => m.id === modelString)?.supports_responses === true;
 			let thinkingStart = null;
+			let thinkingEnd = null;
 			const markStreamStart = () => {
 				if (thinkingStart === null) thinkingStart = Date.now();
 			};
@@ -460,6 +461,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 				},
 				onReasoning: (reasoning) => {
 					markStreamStart();
+					thinkingEnd = Date.now();
 					dispatch({
 						type: "APPEND_STREAMING_REASONING",
 						reasoning,
@@ -485,7 +487,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 					if (bgStream) bgStream.parts = liveParts;
 				}
 			}, controller.signal);
-			const thinkingDuration = assistantReasoning && thinkingStart !== null ? Date.now() - thinkingStart : null;
+			const thinkingDuration = assistantReasoning && thinkingStart !== null ? (thinkingEnd ?? Date.now()) - thinkingStart : null;
 			const assistantMessage = {
 				id: assistantMessageId || crypto.randomUUID(),
 				parentId: userMessageId,

package/dist/ai/core/parts.js

@@ -5,6 +5,23 @@
 *  rather than invented — an end without a start has nothing to render. */
 function applyPartDelta(parts, delta) {
 	switch (delta.type) {
+		case "text":
+		case "reasoning": {
+			const last = parts.at(-1);
+			if (last?.kind === delta.type) return [...parts.slice(0, -1), {
+				...last,
+				text: last.text + delta.text
+			}];
+			return [...parts, {
+				kind: delta.type,
+				text: delta.text
+			}];
+		}
+		case "retract": {
+			let end = parts.length;
+			while (end > 0 && isStreamedText(parts[end - 1])) end -= 1;
+			return end === parts.length ? parts : parts.slice(0, end);
+		}
 		case "tool_start": return [...parts, {
 			kind: "tool_call",
 			id: delta.id,
@@ -70,6 +87,9 @@ function applyPartDelta(parts, delta) {
 		default: return parts;
 	}
 }
+function isStreamedText(part) {
+	return part?.kind === "text" || part?.kind === "reasoning";
+}
 /** A turn can end (completed or stopped) with tool calls still marked
 *  running — the transport died before their tool_end arrived. A stored
 *  message must not spin forever, so close them out as interrupted. */

package/dist/ai/core/pasteLanguage.d.ts

@@ -0,0 +1,6 @@
+/** The highlighter's name for the language a paste is written in, or ''
+ *  when it is not recognisably one. */
+export declare function guessPasteLanguage(text: string): string;
+/** The paste as a fenced code block in its language. The fence outruns any
+ *  run of backticks inside the paste, so nothing in it can close the fence. */
+export declare function fencePaste(text: string): string;

package/dist/ai/core/pasteLanguage.js

@@ -0,0 +1,45 @@
+//#region src/ai/core/pasteLanguage.ts
+function meaningfulLines(text) {
+	return text.split("\n").filter((l) => l.trim() !== "" && !/^\s*#/.test(l));
+}
+function mostly(lines, test) {
+	return lines.length > 0 && lines.filter(test).length / lines.length >= .8;
+}
+function isJson(trimmed) {
+	if (!/^[[{]/.test(trimmed)) return false;
+	try {
+		JSON.parse(trimmed);
+		return true;
+	} catch {
+		return false;
+	}
+}
+var YAML_LINE = /^\s*(-\s+)?["']?[\w./-]+["']?\s*:(\s|$)|^\s*-(\s|$)|^---\s*$/;
+var TOML_LINE = /^\s*\[{1,2}[\w."-]+\]{1,2}\s*$|^\s*[\w."-]+\s*=\s*\S/;
+/** The highlighter's name for the language a paste is written in, or ''
+*  when it is not recognisably one. */
+function guessPasteLanguage(text) {
+	const trimmed = text.trim();
+	if (!trimmed) return "";
+	if (isJson(trimmed)) return "json";
+	const all = trimmed.split("\n");
+	if (all.some((l) => /^(diff --git |@@ -\d)/.test(l))) return "diff";
+	if (/^<(!doctype html|html)\b/i.test(trimmed)) return "html";
+	if (/^<[?!\w]/.test(trimmed) && trimmed.endsWith(">")) return "xml";
+	const first = all[0] ?? "";
+	if (/^#!.*\b(ba|z)?sh\b/.test(first) || mostly(meaningfulLines(trimmed), (l) => /^\$ /.test(l))) return "bash";
+	if (/^(select|insert|update|delete|create|alter|with)\s/i.test(first)) return "sql";
+	const lines = meaningfulLines(trimmed);
+	if (lines.length >= 2 && mostly(lines, (l) => YAML_LINE.test(l))) return "yaml";
+	if (lines.length >= 2 && mostly(lines, (l) => TOML_LINE.test(l))) return "toml";
+	return "";
+}
+/** The paste as a fenced code block in its language. The fence outruns any
+*  run of backticks inside the paste, so nothing in it can close the fence. */
+function fencePaste(text) {
+	const longest = Math.max(2, ...[...text.matchAll(/`+/g)].map((m) => m[0].length));
+	const fence = "`".repeat(longest + 1);
+	return `${fence}${guessPasteLanguage(text)}\n${text.replace(/\n+$/, "")}\n${fence}`;
+}
+//#endregion
+export { fencePaste, guessPasteLanguage };

package/dist/ai/index.d.ts

@@ -39,6 +39,6 @@ export { useKeyboardShortcuts } from './core/useKeyboardShortcuts.js';
 export { type ChatStrings, defaultChatStrings } from './strings.js';
 export * from './types.js';
 export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
-export { NoticeBar, NoticeCard, type NoticeTone } from './ui/Notice.js';
+export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
 export { RenameDialog, type RowDialogStrings, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -43,5 +43,5 @@ import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
 import ComposerFrame from "./components/ComposerFrame.js";
-import { NoticeBar, NoticeCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, DEFAULT_PERMISSION_MODE, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useRowDialogs, wordEmphasisRanges };
+import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, DEFAULT_PERMISSION_MODE, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useRowDialogs, wordEmphasisRanges };

package/dist/ai/strings.d.ts

@@ -35,6 +35,15 @@ export interface ChatStrings {
     };
     queue: {
         remove: string;
+        /** Under a message that goes out once the running reply finishes. */
+        waiting: string;
+        /** Under a message a steering host hands to the agent between steps. */
+        waitingNextStep: string;
+        /** Under a message the host has already handed to the running turn. */
+        handedOver: string;
+        /** The visible label of the remove control; `remove` names it for
+         *  assistive technology. */
+        removeShort: string;
     };
     activity: {
         tokens: (input: string, output: string) => string;

package/dist/ai/strings.js

@@ -32,7 +32,13 @@ var defaultChatStrings = {
 		title: "Billing group \"{group}\" is over its allocation",
 		message: "It has reached its allocation limit. Messages to this provider are paused until your administrator increases the allocation."
 	},
-	queue: { remove: "Remove queued message" },
+	queue: {
+		remove: "Remove queued message",
+		waiting: "Queued · sends when this reply finishes",
+		waitingNextStep: "Queued · reaches the agent after its current step",
+		handedOver: "Sent to the running turn",
+		removeShort: "Remove"
+	},
 	providerIssue: {
 		keyRejected: "API key rejected",
 		unreachable: "Endpoint unreachable",

package/dist/ai/ui/Notice.d.ts

@@ -10,6 +10,14 @@ export declare function NoticeBar({ tone, title, children, action, onAction, tes
     onAction?: () => void;
     testId?: string;
 }): import("react").JSX.Element;
+/** What a command printed, kept verbatim under the command that printed it. */
+export declare function OutputCard({ title, text, onDismiss, dismissLabel, testId, }: {
+    title: string;
+    text: string;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    testId?: string;
+}): import("react").JSX.Element;
 /** An inline notice next to the composer. One with no dismiss states a fact
  *  that is still true; one with a dismiss is a message the reader can put away. */
 export declare function NoticeCard({ tone, children, onDismiss, dismissLabel, testId, }: {

package/dist/ai/ui/Notice.js

@@ -56,6 +56,32 @@ function NoticeBar({ tone, title, children, action, onAction, testId }) {
 		]
 	});
 }
+/** What a command printed, kept verbatim under the command that printed it. */
+function OutputCard({ title, text, onDismiss, dismissLabel, testId }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-testid": testId,
+		"aria-label": title,
+		className: "relative my-3 rounded-lg border theme-border theme-muted-panel px-3 py-2",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: cx("font-mono text-[11px] theme-muted-text", onDismiss && "pr-6"),
+				children: title
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "mt-1 whitespace-pre-wrap break-words font-mono text-xs theme-text",
+				children: text
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				"aria-label": dismissLabel,
+				title: dismissLabel,
+				className: "absolute top-1.5 right-1.5 rounded p-1 theme-muted-text hover:theme-hover",
+				children: /* @__PURE__ */ jsx(IoMdClose, { className: "h-3.5 w-3.5" })
+			})
+		]
+	});
+}
 /** An inline notice next to the composer. One with no dismiss states a fact
 *  that is still true; one with a dismiss is a message the reader can put away. */
 function NoticeCard({ tone = "neutral", children, onDismiss, dismissLabel, testId }) {
@@ -76,4 +102,4 @@ function NoticeCard({ tone = "neutral", children, onDismiss, dismissLabel, testI
 	});
 }
 //#endregion
-export { NoticeBar, NoticeCard };
+export { NoticeBar, NoticeCard, OutputCard };

package/dist/ai/ui/sidebar.js

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
-var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-panel)_8%,transparent)]";
+var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-accent)_12%,transparent)]";
 var HIGHLIGHT_HOVER = "hover:bg-[color-mix(in_oklab,var(--theme-panel)_5%,transparent)]";
 /** The column a conversation list lives in: it animates between its width
 *  and a rail, unless a drag is setting the width right now. */
@@ -37,7 +37,7 @@ function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }
 function SidebarGroupHeading({ children, tone = "default", testId }) {
 	return /* @__PURE__ */ jsx("h4", {
 		"data-testid": testId,
-		className: cx("mt-4 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
+		className: cx("mt-5 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
 		children
 	});
 }
@@ -46,7 +46,7 @@ function SidebarGroupHeading({ children, tone = "default", testId }) {
 function SidebarRow({ selected, menuItems, openMenu, className, children }) {
 	const { active, openMenu: openRowMenu } = useRowMenuActive(openMenu);
 	return /* @__PURE__ */ jsxs("li", {
-		className: cx("group relative flex items-center justify-between rounded-lg px-2 py-1 transition-colors duration-150", selected || active ? HIGHLIGHT_SELECTED : HIGHLIGHT_HOVER, className),
+		className: cx("group relative flex items-center justify-between rounded-lg px-2 py-[3px] transition-colors duration-150", selected || active ? HIGHLIGHT_SELECTED : HIGHLIGHT_HOVER, className),
 		...rowContextMenuProps(openRowMenu, menuItems),
 		children: [children, /* @__PURE__ */ jsx(MoreButton, {
 			active,

package/dist/file-explorer/FileExplorer.js

@@ -81,6 +81,9 @@ function isStorageDirectory(node) {
 function getErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
+function isWithinRoots(roots) {
+	return (path) => roots.some(([, root]) => path.startsWith(root));
+}
 /** Directory paths from the storage root down to `path`. */
 function getAncestorDirPaths(path) {
 	const isDir = path.endsWith("/");
@@ -189,6 +192,8 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const [accessDrawerOpen, setAccessDrawerOpen] = useState(false);
 	const [connectionIssuesMessage, updateConnectionIssuesMessage] = useState(/* @__PURE__ */ new Map());
 	const [hasCorsIssue, setHasCorsIssue] = useState(/* @__PURE__ */ new Map());
+	const [previewNode, setPreviewNode] = useState(null);
+	const [previewOpen, setPreviewOpen] = useState(false);
 	const storageRoots = useMemo(() => {
 		const roots = /* @__PURE__ */ new Map();
 		for (const node of rootNodes) {
@@ -197,32 +202,52 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		}
 		return roots;
 	}, [rootNodes, parentToChildrenMap]);
+	const storageRootPaths = useMemo(() => new Map(storages.map((storage) => [storage.id, storage.rootPath])), [storages]);
 	const seenStorageRootsRef = useRef(storageRoots);
-	const forgetStorages = useEffectEvent((removed) => {
-		const isUnder = (path) => removed.some(([, root]) => path !== root && path.startsWith(root));
-		const isWithin = (path) => removed.some(([, root]) => path.startsWith(root));
+	const seenRootPathsRef = useRef(storageRootPaths);
+	const dropStorageListings = (roots) => {
+		const isUnder = (path) => roots.some(([, root]) => path !== root && path.startsWith(root));
+		const isWithin = isWithinRoots(roots);
 		for (const path of [...fetchesInFlightRef.current.keys()]) if (isWithin(path)) fetchesInFlightRef.current.delete(path);
-		setListings((prev) => removed.reduce((next, [, root]) => clearListingsUnder(next, root), prev));
+		setListings((prev) => roots.reduce((next, [, root]) => clearListingsUnder(next, root), prev));
 		setLoadingPaths((prev) => new Set([...prev].filter((path) => !isWithin(path))));
 		setExpandedPaths((prev) => new Set([...prev].filter((path) => !isUnder(path))));
-		const withoutRemoved = (prev) => {
+		setCheckedItems((prev) => new Set([...prev].filter((path) => !isWithin(path))));
+		const withoutDropped = (prev) => {
 			const next = new Map(prev);
-			for (const [id] of removed) next.delete(id);
+			for (const [id] of roots) next.delete(id);
 			return next;
 		};
-		updateConnectionIssuesMessage(withoutRemoved);
-		setHasCorsIssue(withoutRemoved);
+		updateConnectionIssuesMessage(withoutDropped);
+		setHasCorsIssue(withoutDropped);
+	};
+	const forgetStorages = useEffectEvent((removed) => {
+		dropStorageListings(removed);
 		const selectedRoot = removed.find(([, root]) => normalizedSelectedPath.startsWith(root))?.[1];
 		if (selectedRoot) {
 			const parent = getParentPath(selectedRoot);
 			setSelectedPath(treeMap[parent] ? parent : "");
 		}
 	});
+	const rerootStorages = useEffectEvent((rerooted) => {
+		dropStorageListings(rerooted);
+		clearPreviewCache(isWithinRoots(rerooted));
+		if (previewNode && rerooted.some(([id]) => id === previewNode.storageId)) {
+			setPreviewOpen(false);
+			setPreviewNode(null);
+		}
+		const selectedRoot = rerooted.find(([, root]) => normalizedSelectedPath.startsWith(root))?.[1];
+		if (selectedRoot && selectedRoot !== normalizedSelectedPath) setSelectedPath(selectedRoot);
+	});
 	useEffect(() => {
+		const seenRootPaths = seenRootPathsRef.current;
 		const removed = [...seenStorageRootsRef.current].filter(([id]) => !storageRoots.has(id));
+		const rerooted = [...storageRoots].filter(([id]) => seenRootPaths.has(id) && seenRootPaths.get(id) !== storageRootPaths.get(id));
 		seenStorageRootsRef.current = storageRoots;
+		seenRootPathsRef.current = storageRootPaths;
 		if (removed.length > 0) forgetStorages(removed);
-	}, [storageRoots]);
+		if (rerooted.length > 0) rerootStorages(rerooted);
+	}, [storageRoots, storageRootPaths]);
 	const [uploadModalOpen, setUploadModalOpen] = useState(false);
 	const [createFolderTarget, setCreateFolderTarget] = useState(null);
 	const [pendingUpload, setPendingUpload] = useState(null);
@@ -231,8 +256,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const folderInputRef = useRef(null);
 	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 	const [pendingDelete, setPendingDelete] = useState(null);
-	const [previewNode, setPreviewNode] = useState(null);
-	const [previewOpen, setPreviewOpen] = useState(false);
 	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
 	const { openMenu, contextMenu } = useRowMenu();

package/dist/file-explorer/FilePreview/previewCache.d.ts

@@ -22,5 +22,5 @@ export declare function loadPreviewContent<T>(path: string, loader: (signal: Abo
 export declare function fetchPreviewObject(path: string, url: string, signal: AbortSignal, headers?: HeadersInit): Promise<Response>;
 export declare function peekPreviewUrl(path: string): UrlResult | undefined;
 export declare function peekPreviewContent<T>(path: string): T | undefined;
-export declare function clearPreviewCache(): void;
+export declare function clearPreviewCache(isCleared?: (path: string) => boolean): void;
 export {};

package/dist/file-explorer/FilePreview/previewCache.js

@@ -89,10 +89,12 @@ function peekPreviewUrl(path) {
 function peekPreviewContent(path) {
 	return contentCache.get(path)?.value;
 }
-function clearPreviewCache() {
-	for (const record of contentCache.values()) disposeContent(record);
-	contentCache.clear();
-	urlCache.clear();
+function clearPreviewCache(isCleared = () => true) {
+	for (const [path, record] of contentCache) if (isCleared(path)) {
+		disposeContent(record);
+		contentCache.delete(path);
+	}
+	for (const path of urlCache.keys()) if (isCleared(path)) urlCache.delete(path);
 }
 //#endregion
 export { clearPreviewCache, fetchPreviewObject, loadPreviewContent, loadPreviewUrl, peekPreviewContent, peekPreviewUrl };

package/dist/file-explorer/lib/types.d.ts

@@ -26,6 +26,7 @@ export type TStorage = {
     canShare?: boolean | undefined;
     canManageAccess?: boolean | undefined;
     previewLimits?: Partial<PreviewLimits> | undefined;
+    rootPath?: string | undefined;
 };
 /** A file the host is asked to name or download: its storage, key and name. */
 export interface ExplorerObject {