@parallelworks/ui 0.51.0 → 0.52.0

package/dist/ai/components/ChatMessageList.js

@@ -4,17 +4,36 @@ import { useStrings } from "../../components/Provider.js";
 import { formatDuration } from "../../format.js";
 import { useElapsed } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
-import { useChat } from "../core/ChatProvider.js";
+import { useChat, useChatStream } from "../core/ChatProvider.js";
 import Markdown from "../ui/Markdown.js";
 import { Reasoning, ReasoningBody } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/ai/components/ChatMessageList.tsx
-function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
-	const { adapter, isStreaming: providerStreaming, isThinking, streamingReasoning, streamingParts, thinkingStartTime } = useChat();
+function ChatMessageList({ messages, allMessages, streamingMessage: streamingMessageProp, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
+	const { adapter, isStreaming: providerStreaming } = useChat();
+	const { isThinking, streamingContent, streamingReasoning, streamingParts, thinkingStartTime } = useChatStream();
 	const isStreaming = isStreamingProp ?? providerStreaming;
+	const conversationId = messages[0]?.conversationId;
+	const providerStreamingMessage = useMemo(() => providerStreaming && streamingContent ? {
+		id: "streaming",
+		role: "assistant",
+		content: streamingContent,
+		timestamp: "",
+		...conversationId ? { conversationId } : {}
+	} : null, [
+		providerStreaming,
+		streamingContent,
+		conversationId
+	]);
+	const streamingMessage = streamingMessageProp === void 0 ? providerStreamingMessage : streamingMessageProp;
+	const streamingPartsMessage = useMemo(() => ({
+		id: "streaming-parts",
+		role: "assistant",
+		parts: streamingParts
+	}), [streamingParts]);
 	const { strings } = useChatConfig();
 	const { common } = useStrings();
 	const tThinking = strings.thinking;
@@ -29,15 +48,8 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 	const bottomRef = useRef(null);
 	const containerRef = useRef(null);
 	const reasoningScrollRef = useRef(null);
-	const knownMessageIdsRef = useRef(/* @__PURE__ */ new Set());
-	const prevMessageCountRef = useRef(messages.length);
-	useEffect(() => {
-		const prev = prevMessageCountRef.current;
-		if (messages.length > 0 && (prev === 0 || messages.length < prev)) knownMessageIdsRef.current = new Set(messages.map((m) => m.id));
-		prevMessageCountRef.current = messages.length;
-	}, [messages]);
 	const messageCount = messages.length;
-	const streamingContent = streamingMessage?.content;
+	const streamingText = streamingMessage?.content;
 	const streamingMessageParts = streamingMessage?.parts;
 	const [finalThinkingDuration, setFinalThinkingDuration] = useState(null);
 	const [reasoningOpen, setReasoningOpen] = useState(false);
@@ -124,7 +136,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		if (!containerRef.current || !isNearBottomRef.current || !isStreaming || hasQueuedMessages) return;
 		containerRef.current.scrollTop = containerRef.current.scrollHeight;
 	}, [
-		streamingContent,
+		streamingText,
 		streamingParts,
 		streamingMessageParts,
 		messageCount,
@@ -133,9 +145,8 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 	]);
 	useEffect(() => {
 		if (!containerRef.current || !isNearBottomRef.current || isStreaming || !hadMessagesRef.current) return;
-		bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+		bottomRef.current?.scrollIntoView({ behavior: prefersReducedMotion() ? "auto" : "smooth" });
 	}, [messageCount, isStreaming]);
-	const lastIndex = messages.findLastIndex((m) => !m.pseudo);
 	if (messages.length === 0 && !streamingMessage && !hasQueuedMessages) return /* @__PURE__ */ jsxs("div", {
 		className: "chat-thread flex-1 overflow-y-auto flex flex-col bg-(--theme-panel-bg)",
 		children: [
@@ -152,42 +163,33 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		...label ? {
-			role: "log",
-			"aria-relevant": "additions",
-			"aria-label": label
-		} : {},
+		role: "log",
+		"aria-relevant": "additions",
+		"aria-label": label ?? strings.thread.label,
+		"aria-busy": isStreaming || void 0,
 		className: "chat-thread flex-1 overflow-y-auto theme-scrollbar flex flex-col bg-(--theme-panel-bg)",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "w-full max-w-[var(--chat-column,50rem)] mx-auto pt-4 pb-6 flex-1 px-4",
 				children: [
-					messages.map((message, i) => {
-						if (message.pseudo) return null;
-						const isNew = !knownMessageIdsRef.current.has(message.id);
-						if (isNew) knownMessageIdsRef.current.add(message.id);
-						return /* @__PURE__ */ jsx("div", {
-							className: isNew ? "animate-chat-enter" : "",
-							children: /* @__PURE__ */ jsx(ChatMessage_default, {
-								message,
-								allMessages,
-								flush,
-								latest: i === lastIndex && !streamingMessage,
-								isEditing: editingMessageId === message.id,
-								showAuthor,
-								currentUsername,
-								attachmentDownloadUrl,
-								onOpenAttachment,
-								onNavigateBranch,
-								onEdit: onEditMessage,
-								onSaveEdit,
-								onCancelEdit,
-								onRegenerate: onRegenerateMessage,
-								onRetry: onRetryMessage,
-								onOpenReasoning,
-								onApprovalAnswer
-							})
-						}, message.id);
+					/* @__PURE__ */ jsx(MessageRows, {
+						messages,
+						allMessages,
+						streaming: !!streamingMessage,
+						flush,
+						editingMessageId,
+						showAuthor,
+						currentUsername,
+						attachmentDownloadUrl,
+						onOpenAttachment,
+						onNavigateBranch,
+						onEditMessage,
+						onSaveEdit,
+						onCancelEdit,
+						onRegenerateMessage,
+						onRetryMessage,
+						onOpenReasoning,
+						onApprovalAnswer
 					}),
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
@@ -223,11 +225,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
 						className: cx("animate-chat-enter py-1", !flush && "px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
-							message: {
-								id: "streaming-parts",
-								role: "assistant",
-								parts: streamingParts
-							},
+							message: streamingPartsMessage,
 							isStreaming
 						})
 					}, "streaming-parts"),
@@ -307,6 +305,9 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		]
 	});
 }
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 /** "Thinking (12s)" while it thinks, then how long it took. Its own component,
 *  so the clock re-renders only this label, not the list. */
 function ThinkingLabel({ startedAt, finalDuration }) {
@@ -315,5 +316,42 @@ function ThinkingLabel({ startedAt, finalDuration }) {
 	if (startedAt) return elapsed ? `${t.label} (${formatDuration(elapsed)})` : t.ellipsis;
 	return t.thoughtFor(formatDuration(finalDuration ?? 0));
 }
+/** The conversation so far. Memoized apart from the list, which re-renders
+*  for every streamed token, so a long conversation is not walked per token. */
+var MessageRows = memo(function MessageRows({ messages, allMessages, streaming, flush, editingMessageId, showAuthor, currentUsername, attachmentDownloadUrl, onOpenAttachment, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer }) {
+	const shownRef = useRef(/* @__PURE__ */ new Set());
+	const shown = shownRef.current;
+	const appended = shown.size > 0 && messages.some((m) => shown.has(m.id));
+	useLayoutEffect(() => {
+		shownRef.current = new Set(messages.map((m) => m.id));
+	}, [messages]);
+	const lastIndex = messages.findLastIndex((m) => !m.pseudo);
+	return messages.map((message, i) => {
+		if (message.pseudo) return null;
+		const isNew = appended && !shown.has(message.id);
+		return /* @__PURE__ */ jsx("div", {
+			className: isNew ? "animate-chat-enter" : void 0,
+			children: /* @__PURE__ */ jsx(ChatMessage_default, {
+				message,
+				allMessages,
+				flush,
+				latest: i === lastIndex && !streaming,
+				isEditing: editingMessageId === message.id,
+				showAuthor,
+				currentUsername,
+				attachmentDownloadUrl,
+				onOpenAttachment,
+				onNavigateBranch,
+				onEdit: onEditMessage,
+				onSaveEdit,
+				onCancelEdit,
+				onRegenerate: onRegenerateMessage,
+				onRetry: onRetryMessage,
+				onOpenReasoning,
+				onApprovalAnswer
+			})
+		}, message.id);
+	});
+});
 //#endregion
 export { ChatMessageList as default };

package/dist/ai/components/ChatSidebar.js

@@ -1,5 +1,6 @@
 import { cx } from "../../cx.js";
 import { ImageIcon, NewChatIcon, UsersIcon } from "../../icons.js";
+import { isPlainClick } from "../../components/AppLink.js";
 import { EmptyState } from "../../components/EmptyState.js";
 import { RelativeTime } from "../../components/relativeTime.js";
 import { SearchInput } from "../../components/SearchInput.js";
@@ -26,7 +27,9 @@ function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 				id: conv.id
 			},
 			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
-			onClick: onOpen,
+			onClick: (e) => {
+				if (isPlainClick(e)) onOpen();
+			},
 			children: [conv.isOwner === false && /* @__PURE__ */ jsx(UsersIcon, {
 				className: "h-3 w-3 shrink-0 theme-muted-text",
 				title: t.sharedWithYou
@@ -82,10 +85,11 @@ function ChatSidebar({ actions = true, top }) {
 		label: tSidebar[key],
 		items
 	})), [filteredConversations, tSidebar]);
-	const handleNewChat = () => {
-		closeDrawer();
-		clearCurrentConversation();
-		navigation.toNewChat();
+	const handleNewChat = (e) => {
+		if (isPlainClick(e)) {
+			closeDrawer();
+			clearCurrentConversation();
+		}
 	};
 	const list = /* @__PURE__ */ jsx(ConversationSidebar, {
 		collapsed: sidebarCollapsed,
@@ -123,8 +127,8 @@ function ChatSidebar({ actions = true, top }) {
 		},
 		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
+			children: [/* @__PURE__ */ jsxs(LinkComponent, {
+				target: { kind: "newChat" },
 				onClick: handleNewChat,
 				className: "flex items-center h-9 px-2 gap-3 rounded-lg font-medium transition-colors hover:chat-tint",
 				title: tSidebar.newChat,

package/dist/ai/components/ChatThread.js

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 function ChatThread({ conversationId }) {
 	const chatInputRef = useRef(null);
 	const [editingState, setEditingState] = useState(null);
-	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, isStreaming, streamingContent, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
+	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
 	const { slots, strings } = useChatConfig();
 	const requestedConversationIdRef = useRef(null);
 	useEffect(() => {
@@ -69,17 +69,6 @@ function ChatThread({ conversationId }) {
 	}, []);
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
 	const attachmentsAvailable = !!adapter.attachments;
-	const streamingMessage = useMemo(() => isStreaming && streamingContent ? {
-		id: "streaming",
-		conversationId,
-		role: "assistant",
-		content: streamingContent,
-		timestamp: ""
-	} : null, [
-		isStreaming,
-		streamingContent,
-		conversationId
-	]);
 	const messages = currentConversation?.messages || [];
 	const showAuthor = useMemo(() => {
 		return new Set(messages.flatMap((m) => m.author ? [m.author.username] : [])).size > 1 || currentConversation?.isOwner === false;
@@ -107,7 +96,6 @@ function ChatThread({ conversationId }) {
 				/* @__PURE__ */ jsx(ChatMessageList, {
 					messages,
 					allMessages: messages,
-					streamingMessage,
 					queuedMessages,
 					onRemoveQueued: removeQueuedMessage,
 					editingMessageId: editingState?.messageId,

package/dist/ai/components/DragOverlay.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function DragOverlay({ className }) {
 	const t = useChatConfig().strings.attachmentUpload;
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
+		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-(--theme-accent)/10 border-2 border-dashed border-(--theme-accent) backdrop-blur-sm pointer-events-none", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-lg font-medium text-blue-600",
+				className: "text-lg font-medium theme-text",
 				children: t.dropFilesHere
 			}), /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-blue-500/80",
+				className: "text-sm theme-muted-text",
 				children: t.releaseToUpload
 			})]
 		})

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

@@ -0,0 +1,10 @@
+import type { AttachmentRef } from '../types.js';
+/** The files sent with a message. One the reader can download is a link to
+ *  it, so it can be saved or opened in a new tab like any other; a host that
+ *  previews attachments takes the plain click. */
+export default function MessageAttachments({ attachments, downloadUrl, onOpen, className, }: {
+    attachments: AttachmentRef[];
+    downloadUrl?: ((id: string) => string) | undefined;
+    onOpen?: ((attachment: AttachmentRef) => void) | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/ai/components/MessageAttachments.js

@@ -0,0 +1,78 @@
+import { cx } from "../../cx.js";
+import { DownloadIcon, FileIcon } from "../../icons.js";
+import { safeUrl } from "../../safeUrl.js";
+import { isPlainClick } from "../../components/AppLink.js";
+import { formatBytes } from "../../format.js";
+import { useChatConfig } from "../core/config.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/MessageAttachments.tsx
+var chipClasses = "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg bg-(--theme-muted-panel-bg)";
+/** The files sent with a message. One the reader can download is a link to
+*  it, so it can be saved or opened in a new tab like any other; a host that
+*  previews attachments takes the plain click. */
+function MessageAttachments({ attachments, downloadUrl, onOpen, className }) {
+	const t = useChatConfig().strings.attachmentManager;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("mt-3 flex flex-wrap items-start gap-2", className),
+		children: attachments.map((att) => {
+			const isImage = att.contentType?.startsWith("image/");
+			const name = att.filename || (isImage ? t.unnamedImage : t.unnamedFile);
+			const url = att.id && downloadUrl ? downloadUrl(att.id) : void 0;
+			const href = safeUrl(url);
+			const thumbnail = isImage && url;
+			const body = thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: name,
+				className: "max-h-[200px] max-w-[200px] object-cover",
+				loading: "lazy"
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(FileIcon, {
+					"aria-hidden": "true",
+					className: "h-3.5 w-3.5 flex-shrink-0"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "max-w-[150px] truncate",
+					children: name
+				}),
+				att.size ? /* @__PURE__ */ jsxs("span", {
+					className: "theme-muted-text",
+					children: [
+						"(",
+						formatBytes(att.size),
+						")"
+					]
+				}) : null,
+				href && /* @__PURE__ */ jsx(DownloadIcon, {
+					"aria-hidden": "true",
+					className: "h-3 w-3 flex-shrink-0"
+				})
+			] });
+			const className = thumbnail ? "block overflow-hidden rounded-lg border theme-border" : cx(chipClasses, !href && "theme-muted-text", (href || onOpen) && "transition-colors hover:theme-hover");
+			if (href) return /* @__PURE__ */ jsx("a", {
+				href,
+				download: att.filename || true,
+				onClick: onOpen && ((e) => {
+					if (isPlainClick(e)) {
+						e.preventDefault();
+						onOpen(att);
+					}
+				}),
+				className,
+				children: body
+			}, att.id);
+			if (onOpen) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpen(att),
+				"aria-label": thumbnail ? void 0 : t.open(name),
+				className,
+				children: body
+			}, att.id);
+			return /* @__PURE__ */ jsx("span", {
+				className,
+				children: body
+			}, att.id);
+		})
+	});
+}
+//#endregion
+export { MessageAttachments as default };

package/dist/ai/components/ModelSelector.js

@@ -21,7 +21,7 @@ function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
 	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
-	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("text-purple-500", className) });
+	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("theme-muted-text", className) });
 }
 function getProviderKeyFromModelId(modelId) {
 	const idx = modelId.indexOf("/");
@@ -60,7 +60,7 @@ function ModelSelector({ targetSession }) {
 	const groups = useMemo(() => {
 		const status = (label, description) => ({
 			label,
-			icon: /* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-amber-500" }),
+			icon: /* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-(--theme-warning)" }),
 			description,
 			items: []
 		});
@@ -143,7 +143,7 @@ function ModelSelector({ targetSession }) {
 					className: "max-w-[45%] shrink-0 truncate text-xs",
 					children: selected.provider
 				}),
-				issue && /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
+				issue && /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-(--theme-warning)" })
 			] }) : /* @__PURE__ */ jsx("span", {
 				className: cx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
 				children: targetSessionStatus === "connecting" ? t.connecting : t.select

package/dist/ai/components/PastedText.js

@@ -15,7 +15,7 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatBytes(bytes)}`);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "paste-file-card",
-		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"),
+		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-(--theme-error)" : "chat-hairline"),
 		children: [
 			/* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
 			/* @__PURE__ */ jsxs("div", {
@@ -24,7 +24,7 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 					className: "truncate text-sm font-medium theme-text",
 					children: id ? `paste-${id}.txt` : t.title
 				}), /* @__PURE__ */ jsx("div", {
-					className: cx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
+					className: cx("truncate text-xs", error ? "text-(--theme-error-text)" : "theme-muted-text"),
 					children: detail
 				})]
 			}),

package/dist/ai/components/ProviderIssueBanner.js

@@ -1,4 +1,6 @@
-import { SettingsIcon, WarningIcon } from "../../icons.js";
+import { buttonClasses } from "../../components/buttonClasses.js";
+import { SettingsIcon } from "../../icons.js";
+import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
 import { issueDetail, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -18,29 +20,23 @@ function ProviderIssueBanner() {
 	const providerKey = getProviderKeyFromModelId(selectedModel.id);
 	const provider = providers.find((p) => `${p.user}:${p.name}` === providerKey);
 	const settingsHref = provider?.user === currentUser.username ? extraLinks.providerSettings?.(provider.user, provider.name) : void 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
-		children: [
-			/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 min-w-0",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-amber-700",
-					children: title
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-xs text-amber-600/80 mt-0.5",
-					children: issueDetail(t, issue)
-				})]
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: "warning",
+		size: "sm",
+		className: "mx-4 mt-2",
+		title,
+		action: settingsHref && /* @__PURE__ */ jsxs(LinkComponent, {
+			target: {
+				kind: "external",
+				href: settingsHref
+			},
+			className: buttonClasses({
+				variant: "outline",
+				size: "sm"
 			}),
-			settingsHref && /* @__PURE__ */ jsxs(LinkComponent, {
-				target: {
-					kind: "external",
-					href: settingsHref
-				},
-				className: "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-500/10",
-				children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
-			})
-		]
+			children: [/* @__PURE__ */ jsx(SettingsIcon, {}), strings.modelPicker.manageProvider]
+		}),
+		children: issueDetail(t, issue)
 	});
 }
 //#endregion

package/dist/ai/components/ShareDialog.js

@@ -214,9 +214,9 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 										children: /* @__PURE__ */ jsx("button", {
 											type: "button",
 											onClick: () => handleRemoveTeam(perm.team),
-											className: "p-1 rounded hover:bg-red-500/10",
+											className: "p-1 rounded hover:bg-(--theme-error-muted)",
 											"aria-label": `${common.remove} ${perm.teamName || perm.team}`,
-											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
+											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-(--theme-error)" })
 										})
 									})]
 								})]

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

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

@@ -7,63 +7,20 @@ import { useChatConfig } from "../../core/config.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 //#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)] ?? activityWords[0];
+function randomIndex() {
+	return Math.floor(Math.random() * 1e6);
 }
 /** A status word held for the whole turn and re-rolled when a new one starts. */
-function useTurnWord(startedAt) {
-	const [word, setWord] = useState(randomActivityWord);
+function useTurnWord(startedAt, words) {
+	const [pick, setPick] = useState(randomIndex);
 	const turn = useRef(startedAt);
 	useEffect(() => {
 		if (turn.current !== startedAt) {
 			turn.current = startedAt;
-			setWord(randomActivityWord());
+			setPick(randomIndex());
 		}
 	}, [startedAt]);
-	return word;
+	return words.length > 0 ? words[pick % words.length] ?? "" : "";
 }
 /** 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
@@ -71,7 +28,7 @@ function useTurnWord(startedAt) {
 function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping = false, word, testId }) {
 	const { strings } = useChatConfig();
 	const elapsed = useElapsed(startedAt);
-	const turnWord = useTurnWord(startedAt);
+	const turnWord = useTurnWord(startedAt, strings.activity.words);
 	const meta = [];
 	if (elapsed !== null) meta.push(formatDuration(elapsed));
 	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(formatCount(inputTokens ?? 0), formatCount(outputTokens ?? 0)));
@@ -112,4 +69,4 @@ function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping =
 	});
 }
 //#endregion
-export { activityWords, ActivityLine as default };
+export { ActivityLine as default };