@parallelworks/ui 0.22.0 → 0.24.0

package/dist/ai/adapter/mock/mockAdapter.js

@@ -45,7 +45,8 @@ function createMockChatAdapter(options) {
 					provider: "Mock Provider",
 					tool_calling_mode: "none"
 				}],
-				unreachableSessions: []
+				unreachableSessions: [],
+				providerIssues: []
 			};
 		} },
 		streamCompletion: store.recordingStream(async (req, handlers, signal) => {

package/dist/ai/adapter/openai/openaiAdapter.js

@@ -31,16 +31,19 @@ function createOpenAIChatAdapter(options) {
 			const providerLabel = providerLabelFor(baseUrl);
 			if (options.models?.length) return {
 				models: options.models.map((id) => staticModel(id, providerLabel)),
-				unreachableSessions: []
+				unreachableSessions: [],
+				providerIssues: []
 			};
 			const res = await doFetch(`${baseUrl}/models`, { headers });
 			if (!res.ok) throw new ChatAdapterError(await errorMessageFromResponse(res), { status: res.status });
+			const body = await res.json();
 			return {
-				models: ((await res.json()).data ?? []).map((m) => ({
+				models: (body.data ?? []).map((m) => ({
 					...staticModel(m.id, providerLabel),
 					...m
 				})),
-				unreachableSessions: []
+				unreachableSessions: [],
+				providerIssues: body.provider_issues ?? []
 			};
 		} },
 		streamCompletion: store.recordingStream(createOpenAICompatibleStream({

package/dist/ai/adapter/openai/wire.d.ts

@@ -1,4 +1,4 @@
-import type { ChatModel, TokenUsage, ToolCall, ToolCallDelta, UnreachableSession } from '../../types.js';
+import type { ChatModel, ProviderIssue, TokenUsage, ToolCall, ToolCallDelta, UnreachableSession } from '../../types.js';
 export interface CompletionMessage {
     role: string;
     content?: unknown;
@@ -37,4 +37,5 @@ export interface ModelsWireResponse {
     object: string;
     data: ChatModel[] | null;
     unreachable_sessions?: UnreachableSession[] | null;
+    provider_issues?: ProviderIssue[] | null;
 }

package/dist/ai/adapter/types.d.ts

@@ -1,4 +1,4 @@
-import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, ToolCall, UnreachableSession } from '../types.js';
+import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ProviderIssue, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, ToolCall, UnreachableSession } from '../types.js';
 import type { CompletionMessage } from './openai/wire.js';
 export declare class ChatAdapterError extends Error {
     status?: number | undefined;
@@ -10,6 +10,7 @@ export declare class ChatAdapterError extends Error {
 export interface ModelsList {
     models: ChatModel[];
     unreachableSessions: UnreachableSession[];
+    providerIssues: ProviderIssue[];
 }
 export interface StreamRequest {
     model: string;

package/dist/ai/components/ChatEmptyState.js

@@ -11,6 +11,7 @@ import useDragDrop from "../core/useDragDrop.js";
 import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
+import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import cx from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -75,6 +76,7 @@ function ChatEmptyState({ targetSession }) {
 			className: "flex-1 flex flex-col min-w-0",
 			children: [
 				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
+				/* @__PURE__ */ jsx(ProviderIssueBanner, {}),
 				sessionUnreachable && !sessionBannerDismissed && /* @__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: [

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

@@ -1,8 +1,9 @@
 import { type ReactNode } from 'react';
-import type { AttachmentMeta } from '../types.js';
+import type { AttachmentMeta, MessagePaste } from '../types.js';
 import { type SlashMenuConfig } from './SlashMenu.js';
+import { type ComposerPastes } from './usePasteCards.js';
 interface ChatInputProps {
-    onSend: (content: string, attachmentIds?: string[], attachmentMeta?: AttachmentMeta) => void;
+    onSend: (content: string, attachmentIds?: string[], attachmentMeta?: AttachmentMeta, pastes?: MessagePaste[]) => void;
     disabled?: boolean;
     placeholder?: string | undefined;
     conversationId?: string;
@@ -33,6 +34,7 @@ interface ChatInputProps {
         onStop: () => void;
         stopping?: boolean;
     };
+    pastes?: ComposerPastes | undefined;
 }
 export interface ChatInputHandle {
     addFiles: (files: FileList | File[]) => void;

package/dist/ai/components/ChatInput.js

@@ -7,7 +7,9 @@ import AttachmentUpload from "./AttachmentUpload.js";
 import useDragDrop from "../core/useDragDrop.js";
 import { ComposerContext, ComposerSettings } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
+import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
+import { usePasteCards } from "./usePasteCards.js";
 import cx from "classnames";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -84,8 +86,12 @@ function streamControls(chat, turn) {
 		queuedCount: chat.queuedMessages.length
 	};
 }
-var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, flush = false, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, context, settingsLeft, settingsRight, turn }, ref) {
+var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, flush = false, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, context, settingsLeft, settingsRight, turn, pastes }, ref) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
+	const { cards, handleTextPaste, removeCard, takeCards, blocking: pastesBlocking } = usePasteCards(pastes, input, (value) => {
+		setInput(value);
+		storeDraft(conversationId, value);
+	});
 	const [attachments, setAttachments] = useState([]);
 	const [showAttachments, setShowAttachments] = useState(false);
 	const textareaRef = useRef(null);
@@ -118,8 +124,9 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		if (previousConversationRef.current !== conversationId) {
 			previousConversationRef.current = conversationId;
 			setInput(readDraft(conversationId));
+			takeCards();
 		}
-	}, [conversationId]);
+	}, [conversationId, takeCards]);
 	const setInputAndPersist = (value) => {
 		setInput(value);
 		storeDraft(conversationId, value);
@@ -128,16 +135,16 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 	const pendingCount = attachments.length - uploadedCount;
 	const canFlushQueue = !isStreaming && queuedCount > 0 && !disabled;
 	const { canSend, emphasised } = sendability({
-		hasText: input.trim().length > 0,
+		hasText: input.trim().length > 0 || cards.length > 0,
 		canFlushQueue,
 		allowEmpty,
 		disabled,
 		modelReady: isSelectedModelAvailable || !requireModel,
-		pendingCount
+		pendingCount: pendingCount + (pastesBlocking ? 1 : 0)
 	});
 	const handleSubmit = () => {
 		if (!canSend) return;
-		if (!input.trim() && canFlushQueue) {
+		if (!input.trim() && cards.length === 0 && canFlushQueue) {
 			flushQueuedMessages();
 			return;
 		}
@@ -152,7 +159,12 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 				size: a.size
 			};
 		}
-		onSend(input.trim(), attachmentIds.length > 0 ? attachmentIds : void 0, attachmentIds.length > 0 ? meta : void 0);
+		const sentPastes = takeCards();
+		const content = [input.trim(), ...sentPastes.map((p) => p.placeholder)].filter(Boolean).join("\n\n");
+		const ids = attachmentIds.length > 0 ? attachmentIds : void 0;
+		const attachmentMeta = attachmentIds.length > 0 ? meta : void 0;
+		if (sentPastes.length > 0) onSend(content, ids, attachmentMeta, sentPastes);
+		else onSend(content, ids, attachmentMeta);
 		setInput("");
 		clearDraft(conversationId);
 		setAttachments([]);
@@ -177,11 +189,13 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		}, 0);
 	}, []);
 	const handlePaste = (e) => {
-		if (!attachmentsAvailable) return;
 		const files = Array.from(e.clipboardData?.files ?? []);
-		if (files.length === 0) return;
-		e.preventDefault();
-		handleFilesDropped(files);
+		if (attachmentsAvailable && files.length > 0) {
+			e.preventDefault();
+			handleFilesDropped(files);
+			return;
+		}
+		if (pastes && handleTextPaste(e.clipboardData.getData("text/plain"))) e.preventDefault();
 	};
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
 	return /* @__PURE__ */ jsxs("div", {
@@ -201,6 +215,18 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 					})
 				}),
 				context && /* @__PURE__ */ jsx(ComposerContext, { children: context }),
+				cards.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mb-2 flex flex-wrap gap-2",
+					"data-testid": "composer-pastes",
+					children: cards.map((card) => /* @__PURE__ */ jsx(PasteFileCard, {
+						id: card.paste?.id,
+						lines: card.lines,
+						bytes: card.bytes,
+						saving: !card.paste && !card.error,
+						error: card.error,
+						onRemove: () => removeCard(card.key)
+					}, card.key))
+				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "relative",
 					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {

package/dist/ai/components/ChatMessage.js

@@ -15,6 +15,7 @@ import Markdown from "../ui/Markdown.js";
 import { chatProseClasses } from "../ui/prose.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
+import { UserMessageText } from "./PastedText.js";
 import { Avatar } from "../ui/Avatar.js";
 import cx from "classnames";
 import { memo, useEffect, useRef, useState } from "react";
@@ -190,11 +191,17 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 							className: "flex-shrink-0 mb-0.5"
 						}), /* @__PURE__ */ jsx("div", {
 							className: "px-4 py-2.5 chat-ink rounded-2xl rounded-bl-md max-w-[70%] inline-block whitespace-pre-wrap text-base leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
-							children: message.content
+							children: /* @__PURE__ */ jsx(UserMessageText, {
+								content: message.content,
+								pastes: message.pastes
+							})
 						})]
 					}) : isUser ? /* @__PURE__ */ jsx("div", {
 						className: "px-4 py-2.5 chat-ink rounded-2xl rounded-br-md max-w-[70%] inline-block whitespace-pre-wrap text-base leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
-						children: message.content
+						children: /* @__PURE__ */ jsx(UserMessageText, {
+							content: message.content,
+							pastes: message.pastes
+						})
 					}) : /* @__PURE__ */ jsx("div", {
 						ref: contentRef,
 						className: cx(chatProseClasses, collapsed && "chat-message-clamp"),

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

@@ -6,6 +6,8 @@ interface ChatMessageListProps {
     streamingMessage?: Message | null;
     queuedMessages?: Message[];
     onRemoveQueued?: (id: string) => void;
+    /** Which queued messages can still be taken back; all of them when unset. */
+    canRemoveQueued?: (id: string) => boolean;
     editingMessageId?: string | null | undefined;
     showAuthor?: boolean;
     currentUsername?: string;
@@ -31,5 +33,5 @@ interface ChatMessageListProps {
      *  for the first frame is not announced twice. */
     workingIndicator?: boolean;
 }
-export default function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator, }: ChatMessageListProps): import("react").JSX.Element;
+export default function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator, }: ChatMessageListProps): import("react").JSX.Element;
 export {};

package/dist/ai/components/ChatMessageList.js

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Duration } from "luxon";
 //#region src/ai/components/ChatMessageList.tsx
-function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
+function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, 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();
 	const isStreaming = isStreamingProp ?? providerStreaming;
 	const { strings } = useChatConfig();
@@ -266,7 +266,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 							flush,
 							attachmentDownloadUrl,
 							onOpenAttachment
-						}), onRemoveQueued && /* @__PURE__ */ jsx("button", {
+						}), onRemoveQueued && (canRemoveQueued?.(msg.id) ?? true) && /* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": strings.queue.remove,
 							title: strings.queue.remove,

package/dist/ai/components/ChatThread.js

@@ -8,6 +8,7 @@ import useDragDrop from "../core/useDragDrop.js";
 import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
+import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton } from "./ShareDialog.js";
 import ChatMessageList from "./ChatMessageList.js";
 import cx from "classnames";
@@ -118,6 +119,7 @@ function ChatThread({ conversationId }) {
 			children: [
 				isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-lg" }),
 				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
+				/* @__PURE__ */ jsx(ProviderIssueBanner, {}),
 				/* @__PURE__ */ jsx(ChatMessageList, {
 					messages,
 					allMessages: messages,

package/dist/ai/components/ModelSelector.js

@@ -2,9 +2,11 @@ import { FaCheck } from "../../icons/fa/FaCheck.js";
 import { FaChevronDown } from "../../icons/fa/FaChevronDown.js";
 import { FaCloud } from "../../icons/fa/FaCloud.js";
 import { FaCog } from "../../icons/fa/FaCog.js";
+import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
 import { FaRobot } from "../../icons/fa/FaRobot.js";
 import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
 import { useChatConfig } from "../core/config.js";
+import { providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
 import cx from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -46,8 +48,8 @@ function groupModelsByProvider(models) {
 }
 function ModelSelector({ targetSession, variant = "default" }) {
 	const bare = variant === "bare";
-	const { providers, models, unreachableSessions, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
-	const { extraLinks, LinkComponent } = useChatConfig();
+	const { providers, models, unreachableSessions, providerIssues, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
+	const { extraLinks, LinkComponent, strings } = useChatConfig();
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [dropdownPosition, setDropdownPosition] = useState({
@@ -115,6 +117,10 @@ function ModelSelector({ targetSession, variant = "default" }) {
 	const selectedModelInfo = models.find((m) => m.id === selectedProvider);
 	const selectedModelName = selectedModelInfo ? getModelLabel(selectedModelInfo) : null;
 	const selectedProviderName = selectedModelInfo?.provider || null;
+	const issueLabel = (issue) => issue.status === "unauthorized" ? strings.providerIssue.keyRejected : strings.providerIssue.unreachable;
+	const issueDetail = (issue) => issue.message || (issue.status === "unauthorized" ? strings.providerIssue.keyRejectedHint : strings.providerIssue.unreachableHint);
+	const issueSummary = (issue) => `${issueLabel(issue)} \u2014 ${issueDetail(issue)}`;
+	const selectedModelIssue = providerIssueFor(providerIssues, selectedModelInfo);
 	const handleSelect = (modelId) => {
 		setSelectedProvider(modelId);
 		setIsOpen(false);
@@ -183,15 +189,22 @@ function ModelSelector({ targetSession, variant = "default" }) {
 					className: "flex-1 min-w-0 text-left",
 					children: selectedModelName ? /* @__PURE__ */ jsxs("div", {
 						className: "flex items-baseline gap-1.5 min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							title: selectedModelName,
-							className: cx("truncate", bare ? "text-[11px] theme-muted-text" : "text-sm font-medium text-(--theme-panel)"),
-							children: selectedModelName
-						}), selectedProviderName && /* @__PURE__ */ jsx("span", {
-							title: selectedProviderName,
-							className: cx("theme-muted-text truncate flex-shrink-0 max-w-[45%]", bare ? "text-[10px]" : "text-xs"),
-							children: selectedProviderName
-						})]
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								title: selectedModelName,
+								className: cx("truncate", bare ? "text-[11px] theme-muted-text" : "text-sm font-medium text-(--theme-panel)"),
+								children: selectedModelName
+							}),
+							selectedProviderName && /* @__PURE__ */ jsx("span", {
+								title: selectedProviderName,
+								className: cx("theme-muted-text truncate flex-shrink-0 max-w-[45%]", bare ? "text-[10px]" : "text-xs"),
+								children: selectedProviderName
+							}),
+							selectedModelIssue && /* @__PURE__ */ jsx(FaExclamationTriangle, {
+								title: issueSummary(selectedModelIssue),
+								className: "h-3.5 w-3.5 text-amber-500 flex-shrink-0 self-center"
+							})
+						]
 					}) : /* @__PURE__ */ jsx("span", {
 						className: cx(bare ? "text-[11px]" : "text-sm", targetSessionStatus === "connecting" ? "text-amber-600" : "theme-muted-text"),
 						children: triggerText
@@ -287,58 +300,77 @@ function ModelSelector({ targetSession, variant = "default" }) {
 						const platformSuffix = providerInfo && platform && platform.toLowerCase() !== providerName.toLowerCase() ? platform : null;
 						const isOwner = providerInfo?.user === currentUser.username;
 						const settingsHref = providerInfo && extraLinks.providerSettings ? extraLinks.providerSettings(providerInfo.user, providerInfo.name) : null;
-						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-							className: "px-3 py-1.5 theme-muted-panel sticky top-0",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ jsx(CspIcon, {
-										cspKind: providerInfo?.cspKind ?? "other",
-										className: "h-3 w-3"
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "text-xs font-semibold theme-muted-text uppercase tracking-wide",
-										children: providerName
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "min-w-0 flex-1 truncate text-xs theme-muted-text",
-										children: platformSuffix ? `· ${platformSuffix}` : ""
-									}),
-									/* @__PURE__ */ jsxs("span", {
-										className: "text-xs theme-muted-text",
-										children: [
-											"(",
-											providerModels.length,
-											")"
-										]
-									}),
-									isOwner && settingsHref && /* @__PURE__ */ jsx(LinkComponent, {
-										target: {
-											kind: "external",
-											href: settingsHref
-										},
-										onClick: (e) => e.stopPropagation(),
-										className: "p-0.5 rounded hover:theme-hover theme-muted-text hover:text-blue-600 transition-colors",
-										title: "Manage provider",
-										children: /* @__PURE__ */ jsx(FaCog, { className: "h-3 w-3" })
-									})
-								]
+						const issue = providerIssueFor(providerIssues, providerModels[0]);
+						return /* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 py-1.5 theme-muted-panel sticky top-0",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ jsx(CspIcon, {
+											cspKind: providerInfo?.cspKind ?? "other",
+											className: "h-3 w-3"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-xs font-semibold theme-muted-text uppercase tracking-wide",
+											children: providerName
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "min-w-0 flex-1 truncate text-xs theme-muted-text",
+											children: platformSuffix ? `· ${platformSuffix}` : ""
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "text-xs theme-muted-text",
+											children: [
+												"(",
+												providerModels.length,
+												")"
+											]
+										}),
+										issue && /* @__PURE__ */ jsx("span", {
+											className: "text-[10px] text-amber-600 bg-amber-500/10 px-1.5 py-0.5 rounded-full flex-shrink-0",
+											children: issueLabel(issue)
+										}),
+										isOwner && settingsHref && /* @__PURE__ */ jsx(LinkComponent, {
+											target: {
+												kind: "external",
+												href: settingsHref
+											},
+											onClick: (e) => e.stopPropagation(),
+											className: "p-0.5 rounded hover:theme-hover theme-muted-text hover:text-blue-600 transition-colors",
+											title: "Manage provider",
+											children: /* @__PURE__ */ jsx(FaCog, { className: "h-3 w-3" })
+										})
+									]
+								})
+							}),
+							issue && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2 px-4 py-1.5 bg-amber-500/5",
+								children: [/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "h-3 w-3 text-amber-500 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("span", {
+									className: "text-xs text-amber-600 line-clamp-2",
+									children: issueDetail(issue)
+								})]
+							}),
+							providerModels.map((model) => {
+								const modelName = getModelLabel(model);
+								const isSelected = model.id === selectedProvider;
+								return /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									"aria-disabled": !!issue,
+									title: issue ? issueSummary(issue) : void 0,
+									onClick: () => {
+										if (!issue) handleSelect(model.id);
+									},
+									className: cx("w-full flex items-center gap-3 px-4 py-2 text-left", issue ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-blue-500/5 transition-colors", isSelected && "bg-blue-500/10"),
+									children: [/* @__PURE__ */ jsx("span", {
+										title: modelName,
+										className: cx("flex-1 min-w-0 text-sm truncate", isSelected ? "text-blue-600 font-medium" : ""),
+										style: !isSelected ? { color: "var(--theme-panel, #1f2937)" } : void 0,
+										children: modelName
+									}), isSelected && /* @__PURE__ */ jsx(FaCheck, { className: "h-3.5 w-3.5 text-blue-600 flex-shrink-0" })]
+								}, model.id);
 							})
-						}), providerModels.map((model) => {
-							const modelName = getModelLabel(model);
-							const isSelected = model.id === selectedProvider;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => handleSelect(model.id),
-								className: cx("w-full flex items-center gap-3 px-4 py-2 text-left cursor-pointer", "hover:bg-blue-500/5 transition-colors", isSelected && "bg-blue-500/10"),
-								children: [/* @__PURE__ */ jsx("span", {
-									title: modelName,
-									className: cx("flex-1 min-w-0 text-sm truncate", isSelected ? "text-blue-600 font-medium" : ""),
-									style: !isSelected ? { color: "var(--theme-panel, #1f2937)" } : void 0,
-									children: modelName
-								}), isSelected && /* @__PURE__ */ jsx(FaCheck, { className: "h-3.5 w-3.5 text-blue-600 flex-shrink-0" })]
-							}, model.id);
-						})] }, providerKey);
+						] }, providerKey);
 					})
 				]
 			})]

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

@@ -0,0 +1,15 @@
+import type { MessagePaste } from '../types.js';
+/** A paste sent, or about to be sent, as its saved file. */
+export declare function PasteFileCard({ id, lines, bytes, saving, error, onRemove, }: {
+    id?: number | undefined;
+    lines: number;
+    bytes: number;
+    saving?: boolean;
+    error?: string | undefined;
+    onRemove?: (() => void) | undefined;
+}): import("react").JSX.Element;
+/** A user message as typed: an inline paste as its text, one sent as its file as a card. */
+export declare function UserMessageText({ content, pastes, }: {
+    content: string;
+    pastes?: MessagePaste[] | null | undefined;
+}): import("react").JSX.Element;

package/dist/ai/components/PastedText.js

@@ -0,0 +1,59 @@
+import { FiFile } from "../../icons/fi/FiFile.js";
+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 { splitPastes } from "../core/pastes.js";
+import cx from "classnames";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/PastedText.tsx
+/** A paste sent, or about to be sent, as its saved file. */
+function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
+	const t = useChatConfig().strings.paste;
+	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"),
+		children: [
+			/* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 text-left leading-tight",
+				children: [/* @__PURE__ */ jsx("div", {
+					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"),
+					children: detail
+				})]
+			}),
+			saving && /* @__PURE__ */ jsx(ImSpinner5, { className: "h-3.5 w-3.5 flex-shrink-0 animate-spin theme-muted-text" }),
+			onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRemove,
+				"aria-label": t.remove,
+				title: t.remove,
+				className: "flex-shrink-0 rounded p-0.5 theme-muted-text hover:theme-text",
+				children: /* @__PURE__ */ jsx(FiX, { className: "h-3.5 w-3.5" })
+			})
+		]
+	});
+}
+/** A user message as typed: an inline paste as its text, one sent as its file as a card. */
+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);
+		return /* @__PURE__ */ jsx("span", {
+			className: "my-1 block",
+			children: /* @__PURE__ */ jsx(PasteFileCard, {
+				id: segment.id,
+				lines: segment.lines,
+				bytes: segment.bytes
+			})
+		}, i);
+	}) });
+}
+//#endregion
+export { PasteFileCard, UserMessageText };

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

@@ -0,0 +1 @@
+export default function ProviderIssueBanner(): import("react").JSX.Element | null;

package/dist/ai/components/ProviderIssueBanner.js

@@ -0,0 +1,30 @@
+import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
+import { useChatConfig } from "../core/config.js";
+import { providerIssueFor } from "../core/providerIssues.js";
+import { useChat } from "../core/ChatProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ProviderIssueBanner.tsx
+function ProviderIssueBanner() {
+	const { strings } = useChatConfig();
+	const { models, providerIssues, selectedProvider } = useChat();
+	const selectedModel = models.find((m) => m.id === selectedProvider);
+	const issue = providerIssueFor(providerIssues, selectedModel);
+	if (!issue) return null;
+	const title = issue.status === "unauthorized" ? strings.providerIssue.bannerKeyRejected(issue.provider) : strings.providerIssue.bannerUnreachable(issue.provider);
+	const detail = issue.message || (issue.status === "unauthorized" ? strings.providerIssue.keyRejectedHint : strings.providerIssue.unreachableHint);
+	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(FaExclamationTriangle, { 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: detail
+			})]
+		})]
+	});
+}
+//#endregion
+export { ProviderIssueBanner as default };

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

@@ -0,0 +1,30 @@
+import type { MessagePaste } from '../types.js';
+export type PasteUploadResult = {
+    paste: MessagePaste;
+} | {
+    error: string;
+} | {
+    unsupported: true;
+};
+/** Pastes over inlineMaxBytes are saved with the target and sent by placeholder; undefined keeps them text. */
+export interface ComposerPastes {
+    inlineMaxBytes: number | undefined;
+    upload: (text: string) => Promise<PasteUploadResult>;
+}
+/** A paste waiting in the composer as a file card; paste is set once saved. */
+export interface PasteCard {
+    key: string;
+    text: string;
+    lines: number;
+    bytes: number;
+    paste?: MessagePaste;
+    error?: string;
+}
+/** Keeps the composer's cards in step with the model, so text or card shows how each paste is sent. */
+export declare function usePasteCards(pastes: ComposerPastes | undefined, input: string, setInput: (value: string) => void): {
+    cards: PasteCard[];
+    handleTextPaste: (raw: string) => boolean;
+    removeCard: (key: string) => void;
+    takeCards: () => MessagePaste[];
+    blocking: boolean;
+};