@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/shell/ContinuousChatOverlay.js

@@ -1,25 +1,34 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { transcriptPlainText } from "@elizaos/shared/transcripts";
-import { FileText, Film, Home, LayoutGrid, Loader2, Maximize2, Mic, Minimize2, Music, RotateCcw, SendHorizontal, Settings as SettingsIcon, } from "lucide-react";
+import { Check, Copy, FileText, Film, LayoutGrid, Loader2, Maximize2, Mic, Minimize2, Music, RotateCcw, SendHorizontal, } from "lucide-react";
 import { AnimatePresence, animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform, } from "motion/react";
 import * as React from "react";
 import { client } from "../../api/client.js";
-import { parseSlashDraft, runSlashExecution, splitLeadingSlashCommand, } from "../../chat/slash-menu.js";
-import { TUTORIAL_CHAT_CONTROL_EVENT, } from "../../events/index.js";
+import { parseSlashDraft, resolveClientShortcutExecution, runSlashExecution, splitLeadingSlashCommand, } from "../../chat/slash-menu.js";
+import { CHAT_PREFILL_EVENT, TUTORIAL_CHAT_CONTROL_EVENT, } from "../../events/index.js";
 import { Z_SHELL_OVERLAY } from "../../lib/floating-layers.js";
 import { cn } from "../../lib/utils.js";
 import { useViewChatBinding } from "../../state/view-chat-binding.js";
 import { copyTextToClipboard } from "../../utils/clipboard.js";
-import { CHAT_UPLOAD_ACCEPT, chatUploadKind, filesToImageAttachments, MAX_CHAT_IMAGES, } from "../../utils/image-attachment.js";
+import { CHAT_UPLOAD_ACCEPT, chatUploadKind, classifyComposerPaste, intakeAttachmentFiles, MAX_CHAT_IMAGES, summarizeDroppedAttachments, } from "../../utils/image-attachment.js";
+import { InlineWidgetText } from "../chat/InlineWidgetText.js";
 import { MessageAttachments } from "../chat/MessageAttachments.js";
+import { SensitiveRequestBlock } from "../chat/MessageContent.js";
+import { conversationTranscriptText } from "../chat/message-parser-helpers.js";
 import { ThinkingBlock } from "../chat/ThinkingBlock.js";
+import { withTranscriptMarker } from "../chat/TranscriptViewerOverlay.js";
 import { SlashCommandMenu, useSlashMenu } from "./SlashCommandMenu.js";
+import { selectVisibleShellMessages } from "./shell-state.js";
+import { TopicChipsBar } from "./TopicChipsBar.js";
+import { TopicGroup } from "./TopicGroup.js";
+import { deriveChannelTopics, groupMessagesByTopic } from "./topic-grouping.js";
 import { usePullGesture } from "./use-pull-gesture.js";
 import { usePromptSuggestions } from "./usePromptSuggestions.js";
 /** No-op slash controller so the overlay renders without a provider (stories). */
 const EMPTY_SLASH_CONTROLLER = {
     commands: [],
     loading: false,
+    naturalShortcutsEnabled: false,
     resolveChoices: () => [],
     resolveSection: () => undefined,
     navigateTab: () => { },
@@ -74,10 +83,6 @@ const SHEET_TOP_MARGIN = 72;
 // of resting free — so near-detent releases are deterministic + clean, and only
 // the clear gaps between detents keep the free-drag rest height.
 const SHEET_DETENT_MAGNET = 64;
-// Cap how many turns are actually rendered. Older messages stay in state (the
-// agent's context is untouched) — this only bounds DOM nodes so a long thread
-// can't jank scrolling on a phone, without pulling in a virtualizer.
-const MAX_RENDERED_MESSAGES = 80;
 // Feature flag: the resting one-tap prompt-suggestion strip. Off for now so the
 // composer can be tested without it; flip to true to bring the strip back.
 const SHOW_PROMPT_SUGGESTIONS = false;
@@ -128,7 +133,7 @@ function wavBytesToBase64(bytes) {
     let binary = "";
     const chunk = 0x8000;
     for (let i = 0; i < bytes.length; i += chunk) {
-        binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+        binary += String.fromCharCode(...Array.from(bytes.subarray(i, i + chunk)));
     }
     return btoa(binary);
 }
@@ -146,7 +151,7 @@ function SoftButton({ glyph, icon: Icon, label, onClick, onPointerDown, onPointe
     return (_jsx("button", { type: "button", "data-testid": testId, "aria-label": label, "aria-pressed": active, "aria-disabled": disabled, onClick: disabled ? undefined : onClick, onPointerDown: disabled ? undefined : onPointerDown, onPointerUp: disabled ? undefined : onPointerUp, onPointerCancel: disabled ? undefined : onPointerCancel, className: cn(
         // 44×44 hit target (WCAG 2.5.5) — comfortably thumb-tappable without
         // crowding the bar (split the difference back down from 48).
-        "grid h-11 w-11 shrink-0 place-items-center rounded-full border transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70", active
+        "grid h-11 w-11 shrink-0 place-items-center rounded-full border transition-colors", "  ", active
             ? "border-white/40 bg-white/85 text-black"
             : "border-white/15 bg-white/10 text-white/75 hover:bg-white/20 hover:text-white", disabled && "opacity-40"), children: Icon ? (_jsx(Icon, { className: "h-[22px] w-[22px]", "aria-hidden": true })) : glyph ? (_jsx(Glyph, { d: glyph })) : null }));
 }
@@ -154,13 +159,37 @@ function SoftButton({ glyph, icon: Icon, label, onClick, onPointerDown, onPointe
  *  settings). Smaller than SoftButton; same neutral resting → neutral-hover
  *  language (no blue), `active` gets the white fill. Renders a lucide icon. */
 function HeaderButton({ icon: Icon, label, onClick, active, disabled, testId, }) {
-    return (_jsx("button", { type: "button", "data-testid": testId, "aria-label": label, "aria-pressed": active, disabled: disabled, "aria-disabled": disabled || undefined, onClick: onClick, className: cn("grid h-9 w-9 shrink-0 place-items-center rounded-full border transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70", disabled
+    return (_jsx("button", { type: "button", "data-testid": testId, "aria-label": label, "aria-pressed": active, disabled: disabled, "aria-disabled": disabled || undefined, onClick: onClick, className: cn("grid h-9 w-9 shrink-0 place-items-center rounded-full border transition-colors", "  ", disabled
             ? // On the view it targets: shown but inert + dimmed (we disable, not hide).
                 "cursor-default border-white/10 bg-white/[0.05] text-white/35"
             : active
                 ? "border-white/40 bg-white/85 text-black"
                 : "border-white/15 bg-white/10 text-white/75 hover:bg-white/20 hover:text-white"), children: _jsx(Icon, { className: "h-[18px] w-[18px]", "aria-hidden": true }) }));
 }
+/** Horizontal travel (px) at which a conversation-swipe edge hint is fully lit. */
+const SWIPE_HINT_FULL = 96;
+/** Inert conversation-nav fallback for minimal mock controllers. */
+const EMPTY_CONVERSATION_NAV = {
+    hasPrev: false,
+    hasNext: false,
+    goPrev: () => { },
+    goNext: () => { },
+};
+/**
+ * A soft glass glow on the sheet edge the next/previous conversation will slide
+ * in from during a horizontal swipe (#8929). Brightens with the drag distance;
+ * inert and non-interactive.
+ */
+function SwipeEdgeHint({ side, active, amount, }) {
+    if (!active)
+        return null;
+    const opacity = Math.min(1, Math.max(0, amount) / SWIPE_HINT_FULL);
+    if (opacity <= 0)
+        return null;
+    return (_jsx("div", { "aria-hidden": true, "data-testid": `conversation-swipe-hint-${side}`, className: cn("pointer-events-none absolute inset-y-0 z-20 w-16", side === "left"
+            ? "left-0 bg-gradient-to-r from-white/25 to-transparent"
+            : "right-0 bg-gradient-to-l from-white/25 to-transparent"), style: { opacity } }));
+}
 /**
  * The drag handle at the top of the chat sheet — pull UP to open the history,
  * pull DOWN to close it. It is also keyboard-operable (Enter/Space toggles,
@@ -205,9 +234,13 @@ function SheetGrabber({ open, onOpen, onClose, binding, glow, opacity, pilled, }
         // vertically-centered textarea, so a tap on the composer lands natively
         // on the textarea and raises the keyboard (a programmatic focus from the
         // handle wouldn't). Pull gestures start from the bar / the upward zone.
-        "before:absolute before:-inset-x-6 before:-top-16 before:bottom-0 before:content-['']", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:rounded-full"), children: _jsx("span", { "aria-hidden": "true", className: cn(
-            // 30% wider bar (w-11 → w-14), a touch taller, brighter.
-            "h-2.5 w-16 rounded-full transition-colors duration-300", glow ? "bg-[rgba(255,180,120,0.8)]" : "bg-white/45") }) }));
+        "before:absolute before:-inset-x-6 before:-top-16 before:bottom-0 before:content-['']", "   "), children: _jsx("span", { "aria-hidden": "true", className: cn(
+            // The visible grabber line. Its show/hide is driven by the WRAPPER's
+            // `grabberOpacity` crossfade (fades in over [0.55, 0.95] of the open),
+            // strictly anti-phase with the pill bar so the two are never on screen
+            // together. The bar paints at full opacity — a prior regression pinned
+            // it to `opacity-0`, leaving the handle grabbable but invisible (#9142).
+            "h-2.5 w-16 rounded-full opacity-100 transition-colors duration-300", glow ? "bg-[rgba(255,180,120,0.8)]" : "bg-white/45") }) }));
 }
 /**
  * The fully-collapsed PILL — the chat reduced to a small glass capsule at the
@@ -234,22 +267,121 @@ function PillHandle({ binding, onOpen, glow, pilled, }) {
         // Interactive only while pilled. When NOT pilled the (faded) handle must
         // let taps fall through to the composer textarea below it — otherwise its
         // tall hit zone steals the tap and the keyboard never opens.
-        pilled ? "pointer-events-auto" : "pointer-events-none", "focus-visible:rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"), children: _jsx("span", { "aria-hidden": "true", className: cn(
-            // Identical to the SheetGrabber bar — the handle keeps the same white
-            // shape + color whether the chat is open or fully collapsed to the pill.
-            "h-2.5 w-16 rounded-full transition-colors duration-300", glow ? "bg-[rgba(255,180,120,0.8)]" : "bg-white/45") }) }));
+        pilled ? "pointer-events-auto" : "pointer-events-none", "   "), children: _jsx("span", { "aria-hidden": "true", className: cn(
+            // Identical to the SheetGrabber bar — same white shape + color whether
+            // the chat is open or collapsed to the pill. Its show/hide is driven by
+            // the WRAPPER's `pillOpacity` crossfade (anti-phase with the grabber).
+            // The bar paints at full opacity — a prior regression pinned it to
+            // `opacity-0`, leaving the pill handle grabbable but invisible (#9142).
+            "h-2.5 w-16 rounded-full opacity-100 transition-colors duration-300", glow ? "bg-[rgba(255,180,120,0.8)]" : "bg-white/45") }) }));
+}
+/** Humanize an action/tool symbol ("SEND_MESSAGE" → "Send message") for the
+ *  status label so it reads as prose, not a constant. */
+function humanizeStatusName(name) {
+    const cleaned = name.trim().replace(/[_-]+/g, " ").toLowerCase();
+    if (!cleaned)
+        return "";
+    return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+/** The phase label shown beside the breathing dots. Server-provided `label`
+ *  always wins; otherwise derive a concise phrase from the kind (+ action/tool
+ *  name when present). */
+function turnStatusLabel(status) {
+    if (status.label?.trim())
+        return status.label.trim();
+    switch (status.kind) {
+        case "thinking":
+            return "Thinking";
+        case "streaming":
+            return "Replying";
+        case "running_action":
+            return status.actionName
+                ? `Running ${humanizeStatusName(status.actionName)}`
+                : "Working";
+        case "running_tool":
+            return status.toolName
+                ? `Using ${humanizeStatusName(status.toolName)}`
+                : "Using a tool";
+        case "evaluating":
+            return "Reflecting";
+        case "waking":
+            return "Waking the agent";
+        case "speaking":
+            return "Speaking";
+    }
+}
+// Min time (ms) a phase label must stay on screen before the next one replaces
+// it. Without this, a fast thinking→action→streaming sequence flickers through
+// labels faster than the eye can read. The text content the user sees is
+// debounced; the dots animate continuously throughout.
+const STATUS_MIN_DWELL_MS = 320;
+/** Debounce a fast-changing status to a min on-screen dwell so a rapid
+ *  thinking→action→streaming sequence doesn't strobe the label. The dots animate
+ *  continuously; only the words wait their turn. Returns null when status is
+ *  null (between turns). */
+function useDebouncedTurnStatus(status) {
+    const [shown, setShown] = React.useState(status);
+    const lastChangeRef = React.useRef(0);
+    const timerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!status) {
+            setShown(null);
+            return;
+        }
+        const now = Date.now();
+        const elapsed = now - lastChangeRef.current;
+        if (elapsed >= STATUS_MIN_DWELL_MS) {
+            lastChangeRef.current = now;
+            setShown(status);
+            return;
+        }
+        if (timerRef.current !== null)
+            window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            lastChangeRef.current = Date.now();
+            setShown(status);
+            timerRef.current = null;
+        }, STATUS_MIN_DWELL_MS - elapsed);
+        return () => {
+            if (timerRef.current !== null) {
+                window.clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [status]);
+    return shown;
 }
-/** Three quiet, borderless dots that breathe while the assistant is replying. */
-// Just the three breathing dots — rendered INSIDE a bubble (the in-flight
-// assistant turn, so "thinking" is anchored where the reply will appear) or
-// wrapped in its own bubble by TypingDots for the pre-placeholder gap.
-function TypingDotsInner() {
-    return (_jsx("span", { className: "flex gap-1.5 py-1", "data-testid": "typing-dots", role: "status", "aria-label": "assistant is responding", children: [0, 1, 2].map((i) => (_jsx("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-white/70 motion-reduce:animate-none", style: { animationDelay: `${i * 180}ms` } }, i))) }));
+/**
+ * The breathing dots + phase label content of the status indicator, WITHOUT a
+ * bubble/motion wrapper — used both standalone (wrapped by TurnStatusIndicator)
+ * and inline inside the in-flight assistant bubble.
+ *
+ * Mirrors ChatVoiceStatusBar's a11y (`role="status"` + `aria-live="polite"`).
+ * Honors reduced motion (no pulse). Brand-safe: orange (the accent) ONLY for
+ * `speaking`; every other phase is neutral white. No blue anywhere. Degrades to
+ * plain dots when no status has arrived.
+ */
+function TurnStatusInner({ status, }) {
+    const shown = useDebouncedTurnStatus(status);
+    const speaking = shown?.kind === "speaking";
+    const label = shown ? turnStatusLabel(shown) : null;
+    return (_jsxs("span", { className: "inline-flex items-center gap-2", "data-testid": "turn-status-indicator", "data-status-kind": shown?.kind ?? "none", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "flex gap-1.5", "data-testid": "typing-dots", "aria-hidden": "true", children: [0, 1, 2].map((i) => (_jsx("span", { className: cn("h-1.5 w-1.5 animate-pulse rounded-full motion-reduce:animate-none", speaking ? "bg-[rgba(255,190,140,0.9)]" : "bg-white/70"), style: { animationDelay: `${i * 180}ms` } }, i))) }), label ? (_jsx("span", { className: cn("text-[13px] font-medium", speaking ? "text-[rgba(255,200,150,0.95)]" : "text-white/90"), "data-testid": "turn-status-label", children: label })) : null] }));
 }
-function TypingDots({ reduce }) {
+/**
+ * The rich, phase-aware status row shown while the assistant works (#8813),
+ * replacing the bare typing dots in the pre-placeholder gap. Wraps
+ * TurnStatusInner in its own glass bubble + fade so it reads as a turn.
+ */
+function TurnStatusIndicator({ status, reduce, }) {
+    const speaking = status?.kind === "speaking";
     return (_jsx(motion.div, { className: "mb-2.5 flex w-full justify-start", 
-        // Fade in/out so the dots dissolve with the reply rather than popping.
-        initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.45, ease: OVERLAY_EASE }, children: _jsx("div", { className: cn("rounded-2xl rounded-bl-md border border-white/10 bg-black/45 px-3.5 py-2 text-white/90", FLOAT_SHADOW), children: _jsx(TypingDotsInner, {}) }) }));
+        // Fade in/out so the row dissolves with the reply rather than popping.
+        initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.45, ease: OVERLAY_EASE }, children: _jsx("div", { className: cn("rounded-2xl rounded-bl-md border px-3.5 py-2", FLOAT_SHADOW, 
+            // Orange (the accent) ONLY for spoken replies; every other phase is
+            // neutral white glass. No blue anywhere.
+            speaking
+                ? "border-[rgba(255,180,120,0.45)] bg-black/55"
+                : "border-white/10 bg-black/45"), children: _jsx(TurnStatusInner, { status: status }) }) }));
 }
 /**
  * One turn of the transcript as a chat bubble — assistant on the left, user on
@@ -271,7 +403,7 @@ function ThreadLineText({ content }) {
         return content;
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-bold", "data-testid": "slash-command-token", children: slash.command }), slash.rest] }));
 }
-const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, onCopy, onOpenSettings, }) {
+const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, onCopy, onOpenSettings, turnStatus, }) {
     const isUser = message.role === "user";
     const isAssistant = message.role === "assistant";
     // Press-and-hold to copy an assistant answer — the only extraction affordance
@@ -325,7 +457,7 @@ const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, o
     // A failed turn the user can't recover from without wiring a provider: render
     // a structured gate (not the raw error text) with a one-tap jump to Settings.
     if (isAssistant && message.failureKind === "no_provider") {
-        return (_jsx(motion.div, { "data-testid": "thread-line", "data-role": message.role, "data-failure": "no_provider", initial: reduce ? { opacity: 0 } : { opacity: 0, y: 14 }, animate: reduce ? { opacity: 1 } : { opacity: 1, y: 0 }, exit: reduce ? { opacity: 0 } : { opacity: 0, y: -8 }, transition: { duration: reduce ? 0.15 : 0.52, ease: OVERLAY_EASE }, className: cn("flex w-full justify-start", floating ? "mb-1.5" : "mb-2.5"), children: _jsxs("div", { className: cn("max-w-[85%] rounded-2xl rounded-bl-md border border-amber-300/30 bg-black/60 px-3.5 py-3 text-white", FLOAT_SHADOW), children: [_jsx("div", { className: "mb-1 text-[14px] font-medium", children: "Connect a provider to chat" }), _jsx("div", { className: "mb-2.5 whitespace-pre-wrap text-[13px] leading-relaxed text-white/80 [overflow-wrap:anywhere]", children: message.content }), _jsx("button", { type: "button", "data-testid": "chat-no-provider-settings", onClick: () => onOpenSettings?.(), className: "rounded-full border border-white/20 bg-white/15 px-3 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60", children: "Open Settings" })] }) }));
+        return (_jsx(motion.div, { "data-testid": "thread-line", "data-role": message.role, "data-failure": "no_provider", initial: reduce ? { opacity: 0 } : { opacity: 0, y: 14 }, animate: reduce ? { opacity: 1 } : { opacity: 1, y: 0 }, exit: reduce ? { opacity: 0 } : { opacity: 0, y: -8 }, transition: { duration: reduce ? 0.15 : 0.52, ease: OVERLAY_EASE }, className: cn("flex w-full justify-start", floating ? "mb-1.5" : "mb-2.5"), children: _jsxs("div", { className: cn("max-w-[85%] rounded-2xl rounded-bl-md border border-amber-300/30 bg-black/60 px-3.5 py-3 text-white", FLOAT_SHADOW), children: [_jsx("div", { className: "mb-1 text-[14px] font-medium", children: "Connect a provider to chat" }), _jsx("div", { className: "mb-2.5 whitespace-pre-wrap text-[13px] leading-relaxed text-white/80 [overflow-wrap:anywhere]", children: message.content }), _jsx("button", { type: "button", "data-testid": "chat-no-provider-settings", onClick: () => onOpenSettings?.(), className: "rounded-full border border-white/20 bg-white/15 px-3 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-white/25   ", children: "Open Settings" })] }) }));
     }
     return (_jsx(motion.div, { "data-testid": "thread-line", "data-role": message.role, 
         // New turns rise+fade in. Transform/opacity only; reduced motion collapses
@@ -339,28 +471,43 @@ const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, o
             // behind. The light tone is for any embedding that supplies its own
             // surrounding scrim.
             isUser ? "rounded-br-md" : "rounded-bl-md", 
-            // Assistant bubbles own the press-and-hold copy gesture, so suppress
-            // the native long-press selection/callout that would fight it.
-            canCopy && "select-none [-webkit-touch-callout:none]", floating
+            // Message text must remain selectable for normal highlight/copy.
+            // Assistant bubbles still keep the press-and-hold copy shortcut.
+            "select-text [-webkit-touch-callout:default]", floating
                 ? cn("border", isUser
                     ? "border-white/15 bg-black/55 text-white"
                     : "border-white/10 bg-black/45 text-white/90", FLOAT_SHADOW)
                 : isUser
                     ? "bg-white/20 text-white"
-                    : "bg-white/10 text-white/90"), children: [isAssistant &&
-                    !message.content.trim() &&
-                    !message.attachments?.length ? (_jsx(TypingDotsInner, {})) : isUser ? (_jsx(ThreadLineText, { content: message.content })) : (message.content), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null, isAssistant && message.reasoning?.trim() ? (_jsx(ThinkingBlock, { reasoning: message.reasoning })) : null, _jsx(AnimatePresence, { children: copied ? (_jsx(motion.span, { "data-testid": "thread-line-copied", initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: { duration: 0.18 }, className: "pointer-events-none absolute -top-2 right-2 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-medium text-black shadow", children: "Copied" }, "copied")) : null })] }) }));
+                    : "bg-white/10 text-white/90"), children: [_jsx("div", { "data-chat-selectable": "true", children: isAssistant &&
+                        !message.content.trim() &&
+                        !message.attachments?.length ? (_jsxs(_Fragment, { children: [_jsx(TurnStatusInner, { status: turnStatus ?? null }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : isUser ? (_jsxs(_Fragment, { children: [_jsx(ThreadLineText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(InlineWidgetText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null, message.secretRequest ? (_jsx("div", { className: "pointer-events-auto", children: _jsx(SensitiveRequestBlock, { request: message.secretRequest }) })) : null, message.reasoning?.trim() ? (_jsx(ThinkingBlock, { reasoning: message.reasoning })) : null] })) }), _jsx(AnimatePresence, { children: copied ? (_jsx(motion.span, { "data-testid": "thread-line-copied", initial: reduce ? { opacity: 0 } : { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.18 }, className: "pointer-events-none absolute -top-2 right-2 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-medium text-black", children: "Copied" }, "copied")) : null })] }) }));
 });
 export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash: slashProp, }) {
-    const { messages, phase, responding, send, canSend, recording, startRecording, stopRecording, handsFree, toggleHandsFree, transcriptionMode, toggleTranscriptionMode, setDictationSink, setTranscriptSessionSink, setComposerHasDraft, transcript, needsAudioUnlock, unlockAudio, openSettings, navigateHome, navigateToViews, currentTab, clearConversation, stop, modelStatus, } = controller;
-    // The transcribe control is a voice feature, so it only belongs in the header
-    // while voice is actually on — a hands-free conversation, the mic open, or an
-    // in-progress transcription. When voice is off it's hidden (the `/transcribe`
-    // command still starts transcription from cold). `transcriptionMode` is part
-    // of the predicate so the button (then "stop transcription") and its badge
-    // stay put across the re-listen gaps where `recording` momentarily drops
-    // between utterances.
-    const voiceActive = Boolean(recording || handsFree || transcriptionMode);
+    const { messages, phase, responding, turnStatus, send, canSend, recording, startRecording, stopRecording, handsFree, toggleHandsFree, transcriptionMode, toggleTranscriptionMode, stopTranscriptionAndMic, setDictationSink, setTranscriptSessionSink, setComposerHasDraft, transcript, needsAudioUnlock, unlockAudio, openSettings, navigateHome, currentTab, clearConversation, stop, modelStatus, } = controller;
+    // Defensive default so a minimal mock controller (stories/tests) that predates
+    // the swipe-nav surface still renders without crashing.
+    const conversationNav = controller.conversationNav ?? EMPTY_CONVERSATION_NAV;
+    // True while a clear/swipe is fetching an uncached thread — gates the empty
+    // thread's loading spinner. Defaulted for minimal mock controllers.
+    const conversationLoading = controller.conversationLoading ?? false;
+    // Horizontal swipe between conversations (#8929). `swipeDx` is the live
+    // horizontal drag (+left toward the next/older chat, -right toward the
+    // newer/previous chat) and drives the edge hint. The gesture defers pointer
+    // capture until a horizontal commit, so vertical thread scrolling is
+    // unaffected; it is only bound while the sheet is open (below).
+    const [swipeDx, setSwipeDx] = React.useState(0);
+    const conversationSwipe = usePullGesture({
+        onDragX: setSwipeDx,
+        onSwipeLeft: () => {
+            setSwipeDx(0);
+            conversationNav.goNext();
+        },
+        onSwipeRight: () => {
+            setSwipeDx(0);
+            conversationNav.goPrev();
+        },
+    });
     // Copy an assistant answer (press-and-hold on its bubble). Stable identity so
     // the memoized ThreadLine isn't re-rendered every parent tick.
     const handleCopyMessage = React.useCallback((text) => {
@@ -431,6 +578,52 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // re-render. Drives the glass/content crossfade + scale; `threadHeight` stays
     // 0 until the input is fully formed, then takes over for input → chat.
     const openProgress = useMotionValue(pilled ? 0 : 1);
+    // Imperative animations triggered from gesture callbacks are outside React's
+    // effect cleanup, so keep one owner per motion value and stop stale springs
+    // before starting another.
+    const threadAnimationRef = React.useRef(null);
+    const openProgressAnimationRef = React.useRef(null);
+    const delayedNavigationTimerRef = React.useRef(null);
+    const prefillFocusFrameRef = React.useRef(null);
+    const prefillFocusTimerRef = React.useRef(null);
+    const stopThreadAnimation = React.useCallback(() => {
+        threadAnimationRef.current?.stop();
+        threadAnimationRef.current = null;
+    }, []);
+    const stopOpenProgressAnimation = React.useCallback(() => {
+        openProgressAnimationRef.current?.stop();
+        openProgressAnimationRef.current = null;
+    }, []);
+    const animateThreadHeight = React.useCallback((target) => {
+        stopThreadAnimation();
+        threadAnimationRef.current = animate(threadHeight, target, SHEET_SPRING);
+    }, [stopThreadAnimation, threadHeight]);
+    const animateOpenProgress = React.useCallback((target) => {
+        stopOpenProgressAnimation();
+        openProgressAnimationRef.current = animate(openProgress, target, OPEN_SPRING);
+    }, [openProgress, stopOpenProgressAnimation]);
+    const clearPrefillFocusSchedule = React.useCallback(() => {
+        if (prefillFocusFrameRef.current !== null &&
+            typeof window !== "undefined" &&
+            typeof window.cancelAnimationFrame === "function") {
+            window.cancelAnimationFrame(prefillFocusFrameRef.current);
+        }
+        if (prefillFocusTimerRef.current !== null &&
+            typeof window !== "undefined") {
+            window.clearTimeout(prefillFocusTimerRef.current);
+        }
+        prefillFocusFrameRef.current = null;
+        prefillFocusTimerRef.current = null;
+    }, []);
+    React.useEffect(() => () => {
+        stopThreadAnimation();
+        stopOpenProgressAnimation();
+        if (delayedNavigationTimerRef.current !== null) {
+            window.clearTimeout(delayedNavigationTimerRef.current);
+            delayedNavigationTimerRef.current = null;
+        }
+        clearPrefillFocusSchedule();
+    }, [stopThreadAnimation, stopOpenProgressAnimation, clearPrefillFocusSchedule]);
     // Latest `settleDrag` (defined below) exposed to the viewport-resize effect
     // (which runs earlier). A rotation can orphan an in-flight drag — re-settling
     // the morph keeps the pill↔input crossfade from stranding both bars visible.
@@ -460,22 +653,88 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // fling a history thread open to half instead of resting on the input bar).
     const suppressExpandOnFocusRef = React.useRef(false);
     const focusThreadRef = React.useRef(false);
-    // Recomputed only when the thread changes — NOT on every drag/draft re-render.
-    // Filter empty turns, then keep only the most recent window (cap DOM nodes).
-    const visibleMessages = React.useMemo(() => messages
-        // Drop empty turns — EXCEPT the in-flight assistant turn while a reply is
-        // streaming, so its bubble can show the breathing dots anchored where the
-        // text fills in (then the text replaces them). It's dropped again the
-        // moment we leave `responding`, so a failed/empty turn never lingers.
-        .filter((m) => m.content.trim() ||
-        (m.role === "assistant" && phase === "responding"))
-        .slice(-MAX_RENDERED_MESSAGES), [messages, phase]);
+    // Recomputed only when the thread or phase changes — NOT on every drag/draft
+    // re-render. Pure windowing (empty-turn filter + most-recent cap, with the
+    // streaming-assistant exception) lives in shell-state so it's unit-tested.
+    const visibleMessages = React.useMemo(() => selectVisibleShellMessages(messages, phase), [messages, phase]);
     const lastId = visibleMessages.at(-1)?.id ?? null;
     const lastContent = visibleMessages.at(-1)?.content ?? "";
+    // Copy the whole thread as a plain-text transcript from the full-state header
+    // — parity with the desktop ChatView header. Flashes a check on success.
+    const [conversationCopied, setConversationCopied] = React.useState(false);
+    const conversationCopiedTimerRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (conversationCopiedTimerRef.current) {
+            clearTimeout(conversationCopiedTimerRef.current);
+        }
+    }, []);
+    const handleCopyConversation = React.useCallback(() => {
+        const transcript = conversationTranscriptText(visibleMessages.map((m) => ({ role: m.role, text: m.content })), { agentName });
+        if (!transcript)
+            return;
+        void copyTextToClipboard(transcript);
+        setConversationCopied(true);
+        if (conversationCopiedTimerRef.current) {
+            clearTimeout(conversationCopiedTimerRef.current);
+        }
+        conversationCopiedTimerRef.current = setTimeout(() => setConversationCopied(false), 2000);
+    }, [agentName, visibleMessages]);
     // The last line id the scroll effect pinned to — lets it tell a NEW line
     // (always pin to bottom) from streaming growth of the current line (follow
     // only when the reader is already at the bottom).
     const scrollPinnedIdRef = React.useRef(lastId);
+    // Topic grouping + chips bar (#8928). Derived from the per-message Stage-1
+    // topic tags; when no message is tagged the transcript renders flat (the
+    // chips bar and groups simply don't appear), preserving the prior behavior.
+    const channelTopics = React.useMemo(() => deriveChannelTopics(visibleMessages), [visibleMessages]);
+    const topicSegments = React.useMemo(() => groupMessagesByTopic(visibleMessages), [visibleMessages]);
+    const hasTopics = channelTopics.length > 0;
+    const [collapsedTopics, setCollapsedTopics] = React.useState(() => new Set());
+    const setTopicCollapsed = React.useCallback((key, collapsed) => {
+        setCollapsedTopics((prev) => {
+            if (collapsed === prev.has(key))
+                return prev;
+            const next = new Set(prev);
+            if (collapsed)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+    }, []);
+    // Tapping a chip expands its group and scrolls its header into view.
+    const scrollToTopic = React.useCallback((topic) => {
+        setCollapsedTopics((prev) => {
+            if (!prev.has(topic))
+                return prev;
+            const next = new Set(prev);
+            next.delete(topic);
+            return next;
+        });
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        requestAnimationFrame(() => {
+            const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function"
+                ? CSS.escape(topic)
+                : topic.replace(/"/g, '\\"');
+            const el = threadRef.current?.querySelector(`[data-topic="${escaped}"]`);
+            el?.scrollIntoView({ behavior: "smooth", block: "start" });
+        });
+    }, []);
+    // Render one transcript line; shared by the flat and topic-grouped paths so
+    // the in-flight-turn detection stays identical.
+    const renderThreadLine = React.useCallback((m, index) => {
+        const isInFlight = index === visibleMessages.length - 1 &&
+            m.role === "assistant" &&
+            !m.content.trim();
+        return (_jsx(ThreadLine, { message: m, floating: true, reduce: reduce, onCopy: handleCopyMessage, onOpenSettings: openSettings, turnStatus: isInFlight ? turnStatus : undefined }, m.id));
+    }, [
+        visibleMessages.length,
+        reduce,
+        handleCopyMessage,
+        openSettings,
+        turnStatus,
+    ]);
     const booting = phase === "booting";
     const listening = phase === "listening";
     const hasDraft = draft.trim().length > 0;
@@ -516,6 +775,14 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // only when the reader is already resting at the bottom, so scrolling up to
     // read history is never yanked down.
     const wasOpenRef = React.useRef(false);
+    // Coalesces the per-token streaming-follow scroll into one rAF so a burst of
+    // tokens landing within a frame triggers at most one measure+write instead of
+    // a forced reflow per token. New-line / first-open pins stay synchronous below.
+    const followRafRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (followRafRef.current != null)
+            cancelAnimationFrame(followRafRef.current);
+    }, []);
     // biome-ignore lint/correctness/useExhaustiveDependencies: lastId/lastContent/sheetOpen are the triggers; the body reads refs
     React.useLayoutEffect(() => {
         const el = threadRef.current;
@@ -537,17 +804,43 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // more reliable than scrollIntoView inside this clipped flex column.
         const justOpened = !wasOpenRef.current;
         wasOpenRef.current = true;
-        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
-        if (isNewLine && !justOpened && !reduce && atBottom) {
-            endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-        }
-        else if (justOpened || isNewLine || atBottom) {
-            el.scrollTop = el.scrollHeight;
-        }
-        if (justOpened && focusThreadRef.current) {
-            el.focus();
-            focusThreadRef.current = false;
+        // New line or first open: pin synchronously (pre-paint) so the thread never
+        // flashes at the top. Infrequent — once per turn, not per token.
+        if (isNewLine || justOpened) {
+            const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+            // Pin to the latest line ONLY on first open, or when the reader is already
+            // resting at the bottom. If they have scrolled UP to read history, a new
+            // line must NOT yank them down — the previous code force-pinned on every
+            // new line (the `else` ran whenever !atBottom), which is exactly the
+            // "scroll up to the first message and get snapped back to the bottom" bug.
+            if (justOpened || atBottom) {
+                if (isNewLine && !justOpened && !reduce) {
+                    endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+                }
+                else {
+                    el.scrollTop = el.scrollHeight;
+                }
+            }
+            if (justOpened && focusThreadRef.current) {
+                el.focus();
+                focusThreadRef.current = false;
+            }
+            return;
         }
+        // Streaming growth of the current line: coalesce the bottom-follow into a
+        // single rAF (measure atBottom + write scrollTop at most once per frame).
+        // Same semantics as before — only follows when the reader is at the bottom.
+        if (followRafRef.current != null)
+            return;
+        followRafRef.current = requestAnimationFrame(() => {
+            followRafRef.current = null;
+            const node = threadRef.current;
+            if (!node)
+                return;
+            const atBottom = node.scrollHeight - node.scrollTop - node.clientHeight < 80;
+            if (atBottom)
+                node.scrollTop = node.scrollHeight;
+        });
     }, [lastId, lastContent, sheetOpen]);
     // The closed peek must always whisper the NEWEST line, but closing is an
     // animated height collapse: a one-shot scroll set runs before the height
@@ -600,9 +893,6 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         detentHaptic();
         inputRef.current?.focus();
     }, [canSend, send]);
-    const submit = React.useCallback(() => {
-        submitText(draft, pendingImages);
-    }, [submitText, draft, pendingImages]);
     // Tapping a suggestion sends it immediately (same path as submit), so the
     // strip is a one-tap shortcut, not just a draft pre-fill.
     const pickSuggestion = React.useCallback((text) => {
@@ -617,12 +907,22 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         inputRef.current?.focus();
     }, [canSend, send]);
     const addImageFiles = React.useCallback((files) => {
-        void filesToImageAttachments(files)
-            .then((attachments) => {
-            if (!attachments.length)
-                return;
-            setImageError(null);
-            setPendingImages((prev) => [...prev, ...attachments].slice(0, MAX_CHAT_IMAGES));
+        void intakeAttachmentFiles(files)
+            .then(({ attachments, droppedTooLarge }) => {
+            // The overlay is a pure component without an i18n translator, so it
+            // surfaces the "kept N, dropped M" notice inline in English (matching
+            // its other hardcoded strings) via the existing imageError channel.
+            const summary = summarizeDroppedAttachments({
+                acceptedCount: attachments.length,
+                droppedTooLarge,
+                droppedOverCount: [],
+            });
+            setImageError(summary
+                ? `Kept ${summary.kept}, dropped ${summary.dropped} (too large — max ${summary.maxMb}MB)`
+                : null);
+            if (attachments.length) {
+                setPendingImages((prev) => [...prev, ...attachments].slice(0, MAX_CHAT_IMAGES));
+            }
         })
             .catch((err) => {
             // Surface the failure inline rather than silently dropping the image —
@@ -647,6 +947,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             event.button !== 0 ||
             hasDraft ||
             recording ||
+            transcriptionMode ||
             // Voice input is gated while a reply is in flight; type + send to queue
             // another turn instead. Re-enabled the instant the reply finishes.
             responding)
@@ -669,7 +970,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             startRecording("dictate");
         }, 200);
         pttRef.current = { kind: "pending", pointerId, timer };
-    }, [hasDraft, recording, responding, startRecording]);
+    }, [hasDraft, recording, responding, startRecording, transcriptionMode]);
     // One funnel for BOTH pointerup (cancelled=false) and pointercancel
     // (cancelled=true). Always clears the pending timer + releases pointer capture
     // FIRST — before any early return — so a quick tap can never leak a stuck timer
@@ -678,7 +979,8 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         const phase = pttRef.current;
         if (phase.kind === "pending")
             window.clearTimeout(phase.timer);
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        if (typeof event.currentTarget.hasPointerCapture === "function" &&
+            event.currentTarget.hasPointerCapture(event.pointerId)) {
             event.currentTarget.releasePointerCapture(event.pointerId);
         }
         pttRef.current = { kind: "idle" };
@@ -701,11 +1003,13 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // turn finishes), but an active hands-free session can always be turned OFF.
         if (responding && !handsFree)
             return;
-        // While transcribing, the mic is the master voice control: a tap ENDS the
-        // transcription (which drops the transcript into the composer as an
-        // attachment) instead of starting a second, conflicting capture.
+        // While transcribing, the mic is the master voice control: a tap turns the
+        // mic OFF, which also ends transcription (mic = parent — turning off the mic
+        // turns off transcript). This is distinct from the transcript button, which
+        // turns transcript off but LEAVES THE MIC ON. The finished transcript still
+        // drops into the composer as an attachment.
         if (transcriptionMode) {
-            toggleTranscriptionMode();
+            stopTranscriptionAndMic();
             return;
         }
         // Quick tap = hands-free conversation: the agent speaks its replies back and
@@ -716,7 +1020,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         handsFree,
         toggleHandsFree,
         transcriptionMode,
-        toggleTranscriptionMode,
+        stopTranscriptionAndMic,
     ]);
     const hasThread = visibleMessages.length > 0;
     // Track the VISUAL viewport so the chat sizes to — and sits above — whatever
@@ -744,13 +1048,35 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     React.useEffect(() => {
         if (typeof window === "undefined")
             return undefined;
-        const sync = () => {
-            setViewport(readViewport());
+        const commit = () => {
+            // Bail out of the re-render when the viewport values are unchanged — vv
+            // `scroll` fires constantly while the keyboard animates but the height/
+            // inset frequently don't actually move between events.
+            setViewport((prev) => {
+                const next = readViewport();
+                return prev.height === next.height &&
+                    prev.keyboardInset === next.keyboardInset &&
+                    prev.innerHeight === next.innerHeight
+                    ? prev
+                    : next;
+            });
             const el = overlayRef.current;
             if (el) {
-                setBottomPad(Number.parseFloat(getComputedStyle(el).paddingBottom) || 0);
+                const pad = Number.parseFloat(getComputedStyle(el).paddingBottom) || 0;
+                setBottomPad((prev) => (prev === pad ? prev : pad));
             }
         };
+        // Coalesce the high-rate vv `scroll` to at most one commit per frame so the
+        // keyboard-animation storm can't drive >60 forced style reads + setStates/s.
+        let rafId = 0;
+        const sync = () => {
+            if (rafId !== 0)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = 0;
+                commit();
+            });
+        };
         // A viewport SIZE change (rotation) must never strand the pill↔input morph
         // mid-crossfade — rotation often cancels the in-flight pointer with no
         // pointerup, leaving the drag orphaned (openProgress frozen mid-range = BOTH
@@ -767,8 +1093,10 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         const vv = window.visualViewport;
         window.addEventListener("resize", syncAndSettle);
         vv?.addEventListener("resize", syncAndSettle);
-        vv?.addEventListener("scroll", sync);
+        vv?.addEventListener("scroll", sync, { passive: true });
         return () => {
+            if (rafId !== 0)
+                cancelAnimationFrame(rafId);
             window.removeEventListener("resize", syncAndSettle);
             vv?.removeEventListener("resize", syncAndSettle);
             vv?.removeEventListener("scroll", sync);
@@ -918,8 +1246,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // thread's flex-basis is the live height as a px string.
     const revealed = useTransform(threadHeight, (h) => Math.min(1, Math.max(0, h / Math.max(1, openH))));
     // At rest (threadHeight 0 = INPUT/CLOSED) the full-viewport dimming scrim sits
-    // at opacity 0 but stays a live composited layer the glass backdrop-filter
-    // samples through. Drive `visibility` off the SAME motion value so it drops out
+    // at opacity 0. Drive `visibility` off the SAME motion value so it drops out
     // of compositing/paint at rest (no reflow, compositor-only, zero re-render) and
     // flips back the instant the thread opens.
     const scrimVisibility = useTransform(threadHeight, (h) => h > 0 ? "visible" : "hidden");
@@ -932,9 +1259,9 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         clamp: true,
     });
     // --- Liquid-glass pill → input morph (driven by openProgress) ---------------
-    // The panel is ONE persistent element; the pill capsule and the full glass
-    // input crossfade by opacity (compositor-cheap — never tween backdrop-blur)
-    // while the whole panel scales up from a capsule. transform + opacity only.
+    // The panel is ONE persistent element; the pill capsule and the full
+    // input crossfade by opacity (compositor-cheap) while the whole panel scales
+    // up from a capsule. transform + opacity only.
     const panelScale = useTransform(openProgress, [0, 1], [0.9, 1]);
     // Glass surface + its content crossfade IN as the input forms (one wrapper, so
     // sheen/glow/thread/composer resolve together with the glass).
@@ -988,38 +1315,58 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         draggingRef.current = false;
         const open = pilled ? 0 : 1;
         if (reduce) {
+            stopThreadAnimation();
+            stopOpenProgressAnimation();
             threadHeight.set(baseH);
             openProgress.set(open);
         }
         else {
-            animate(threadHeight, baseH, SHEET_SPRING);
-            animate(openProgress, open, OPEN_SPRING);
+            animateThreadHeight(baseH);
+            animateOpenProgress(open);
         }
-    }, [threadHeight, openProgress, baseH, pilled, reduce]);
+    }, [
+        threadHeight,
+        openProgress,
+        baseH,
+        pilled,
+        reduce,
+        stopThreadAnimation,
+        stopOpenProgressAnimation,
+        animateThreadHeight,
+        animateOpenProgress,
+    ]);
     // Keep the ref the (earlier-declared) viewport-resize effect calls pointing at
     // the latest settleDrag, so a rotation re-settles with current pilled/baseH.
     settleDragRef.current = settleDrag;
     // Drive openProgress from the pilled flag for NON-drag transitions (tap the
     // pill, programmatic open/close): a live finger drag owns openProgress itself
     // (draggingRef gates this so it never fights the gesture).
-    // biome-ignore lint/correctness/useExhaustiveDependencies: openProgress is a stable motion value ref
     React.useEffect(() => {
         if (draggingRef.current)
             return;
         const open = pilled ? 0 : 1;
         if (reduce) {
+            stopOpenProgressAnimation();
             openProgress.set(open);
             return;
         }
-        const controls = animate(openProgress, open, OPEN_SPRING);
-        return () => controls.stop();
-    }, [pilled, reduce]);
+        animateOpenProgress(open);
+        return stopOpenProgressAnimation;
+    }, [
+        pilled,
+        reduce,
+        openProgress,
+        animateOpenProgress,
+        stopOpenProgressAnimation,
+    ]);
     const closeSheet = React.useCallback(() => {
         draggingRef.current = false;
+        stopThreadAnimation();
+        stopOpenProgressAnimation();
         setFreeH(null);
         setMaximized(false);
         setMode("input");
-    }, []);
+    }, [stopThreadAnimation, stopOpenProgressAnimation]);
     // Leaving the chat for Settings/Home: animate OUT of maximize and collapse the
     // sheet (closeSheet un-maximizes + springs the thread height down) BEFORE
     // swapping the page underneath, so it reads as the chat closing into the new
@@ -1029,7 +1376,13 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const navigateAndClose = React.useCallback((go) => {
         const wasMaximized = maximized;
         closeSheet();
-        window.setTimeout(go, reduce ? 0 : wasMaximized ? 260 : 190);
+        if (delayedNavigationTimerRef.current !== null) {
+            window.clearTimeout(delayedNavigationTimerRef.current);
+        }
+        delayedNavigationTimerRef.current = window.setTimeout(() => {
+            delayedNavigationTimerRef.current = null;
+            go();
+        }, reduce ? 0 : wasMaximized ? 260 : 190);
     }, [closeSheet, maximized, reduce]);
     // Maximize toggle. Maximizing from ANY open detent (half or a free rest) first
     // rises to the FULL detent, then drops the inset — so the height spring
@@ -1038,32 +1391,35 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // nothing). Un-maximizing drops back to the inset FULL detent.
     const toggleMaximize = React.useCallback(() => {
         if (maximized) {
+            stopThreadAnimation();
             setMaximized(false);
             return;
         }
         // Snap the morph fully open BEFORE flipping to full-bleed so no in-flight
         // pill-open spring can leak a sub-1 scale into the maximized frame (top gap).
         draggingRef.current = false;
+        stopThreadAnimation();
+        stopOpenProgressAnimation();
         openProgress.set(1);
         setFreeH(null);
         setMode("full");
         setMaximized(true);
-    }, [maximized, openProgress]);
+    }, [maximized, openProgress, stopThreadAnimation, stopOpenProgressAnimation]);
     // The single detent→detent animator: whenever the settled detent (or viewport)
     // changes and we're not mid finger-drag, spring the history height to it. The
     // gesture / open paths just flip sheetOpen/expanded and this reacts — no
     // per-frame React state, so the live drag stays buttery.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: baseH already encodes sheetOpen/expanded/freeH/viewportH; threadHeight is a stable ref
     React.useEffect(() => {
         if (draggingRef.current)
             return;
         if (reduce) {
+            stopThreadAnimation();
             threadHeight.set(baseH);
             return;
         }
-        const controls = animate(threadHeight, baseH, SHEET_SPRING);
-        return () => controls.stop();
-    }, [baseH, reduce]);
+        animateThreadHeight(baseH);
+        return stopThreadAnimation;
+    }, [baseH, reduce, threadHeight, animateThreadHeight, stopThreadAnimation]);
     // Snap to one of the three iOS-style detents and settle the live drag. A
     // detent change fires a light haptic so the snap feels physical on device.
     // "collapsed" hides the history entirely (just the input); "half" is the
@@ -1073,6 +1429,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // A detent always clears any free-drag rest height and (since only FULL
         // can be maximized) drops full-bleed when stepping anywhere else.
         draggingRef.current = false;
+        stopThreadAnimation();
         setFreeH(null);
         if (to !== "full")
             setMaximized(false);
@@ -1082,7 +1439,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         if (to === "collapsed")
             inputRef.current?.blur();
         detentHaptic();
-    }, []);
+    }, [stopThreadAnimation]);
     // Collapsing always drops input focus, so the mobile keyboard goes away the
     // moment the chat is dismissed (pull-down, Escape, or click-out) — the chat is
     // no longer "focused". Blurring (rather than the old refocus dance) also means
@@ -1194,6 +1551,37 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         window.addEventListener(TUTORIAL_CHAT_CONTROL_EVENT, onControl);
         return () => window.removeEventListener(TUTORIAL_CHAT_CONTROL_EVENT, onControl);
     }, [goToDetent]);
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return undefined;
+        const onPrefill = (event) => {
+            const detail = event.detail;
+            const text = typeof detail?.text === "string" ? detail.text : "";
+            if (!text.trim())
+                return;
+            setMode((m) => (m === "pill" ? "input" : m));
+            setDraft(text);
+            const focusComposer = () => {
+                prefillFocusFrameRef.current = null;
+                prefillFocusTimerRef.current = null;
+                const input = inputRef.current;
+                input?.focus();
+                if (detail?.select) {
+                    input?.setSelectionRange(0, text.length);
+                }
+            };
+            clearPrefillFocusSchedule();
+            if (typeof window.requestAnimationFrame === "function") {
+                prefillFocusFrameRef.current =
+                    window.requestAnimationFrame(focusComposer);
+            }
+            else {
+                prefillFocusTimerRef.current = window.setTimeout(focusComposer, 0);
+            }
+        };
+        window.addEventListener(CHAT_PREFILL_EVENT, onPrefill);
+        return () => window.removeEventListener(CHAT_PREFILL_EVENT, onPrefill);
+    }, [clearPrefillFocusSchedule]);
     // Push-to-talk dictation drops its final transcript into the composer draft
     // (no send): register the sink with the controller while this overlay is
     // mounted, appending to whatever the user has already typed.
@@ -1216,15 +1604,16 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             if (segments.length === 0)
                 return;
             const text = transcriptPlainText(segments);
+            const stamp = new Date(startedAtMs)
+                .toISOString()
+                .slice(0, 16)
+                .replace("T", " ");
+            const attachmentName = `Transcript ${stamp}.md`;
             if (text) {
-                const stamp = new Date(startedAtMs)
-                    .toISOString()
-                    .slice(0, 16)
-                    .replace("T", " ");
                 const attachment = {
                     data: textToBase64(text),
                     mimeType: "text/markdown",
-                    name: `Transcript ${stamp}.md`,
+                    name: attachmentName,
                 };
                 setPendingImages((prev) => [...prev, attachment].slice(0, MAX_CHAT_IMAGES));
                 expand();
@@ -1240,6 +1629,23 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                         audioContentType: "audio/wav",
                     }
                     : {}),
+            })
+                .then(({ transcript }) => {
+                // Link the pending attachment to the saved record so tapping it opens
+                // the editable viewer and edits persist — both via the client-only
+                // `transcriptId` field and a durable marker embedded in the markdown
+                // (which survives the server round-trip in the attachment's text).
+                if (!text)
+                    return;
+                setPendingImages((prev) => prev.map((a) => a.name === attachmentName &&
+                    a.mimeType === "text/markdown" &&
+                    !a.transcriptId
+                    ? {
+                        ...a,
+                        transcriptId: transcript.id,
+                        data: textToBase64(withTranscriptMarker(transcript.id, text)),
+                    }
+                    : a));
             })
                 .catch(() => {
                 /* archival is best-effort; a failed save just skips the record */
@@ -1304,6 +1710,19 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         setSlashDismissed(true);
         inputRef.current?.focus();
     }, [slash, controller, submitText, toggleMaximize, toggleTranscriptionMode]);
+    const submit = React.useCallback(() => {
+        const shortcut = pendingImages.length === 0
+            ? resolveClientShortcutExecution(slash.commands, draft, slash.resolveSection, {
+                allowNatural: slash.naturalShortcutsEnabled,
+                resolveChoices: slash.resolveChoices,
+            })
+            : null;
+        if (shortcut) {
+            runExecution(shortcut);
+            return;
+        }
+        submitText(draft, pendingImages);
+    }, [draft, pendingImages, runExecution, slash, submitText]);
     const pickSlashItem = React.useCallback((index) => {
         const exec = slashMenu.resolve(index);
         if (exec)
@@ -1393,10 +1812,12 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             preFocusCollapsedRef.current = true;
             detentHaptic();
         }
-        if (reduce)
+        if (reduce) {
+            stopOpenProgressAnimation();
             openProgress.set(1);
+        }
         else
-            animate(openProgress, 1, OPEN_SPRING);
+            animateOpenProgress(1);
         // Raise the keyboard on the SAME tap that opens the pill. While pilled, the
         // composer content is `inert`, and React only clears that on the next
         // render — too late for iOS WebKit, which honors focus() only synchronously
@@ -1410,13 +1831,24 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         contentRef.current?.removeAttribute("inert");
         suppressExpandOnFocusRef.current = true;
         inputRef.current?.focus();
-    }, [openProgress, reduce, hasThread, goToDetent]);
+    }, [
+        openProgress,
+        reduce,
+        hasThread,
+        goToDetent,
+        stopOpenProgressAnimation,
+        animateOpenProgress,
+    ]);
     // --- Pull gesture --------------------------------------------------------
     // The grabber is the draggable handle. A live drag sets the threadHeight motion
     // value DIRECTLY (no React state → no re-render per frame, so it tracks the
     // finger 1:1); release fires onPullUp/onPullDown (distance OR velocity, via
     // usePullGesture) to snap to a detent.
     const onDragOffset = React.useCallback((offset) => {
+        if (!draggingRef.current) {
+            stopThreadAnimation();
+            stopOpenProgressAnimation();
+        }
         draggingRef.current = true;
         // PILL drag: map the upward travel to the pill→input morph (openProgress).
         // The thread stays at 0 until the input is fully formed; only the EXCESS
@@ -1458,6 +1890,8 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         clampHeight,
         threadHeight,
         openProgress,
+        stopThreadAnimation,
+        stopOpenProgressAnimation,
     ]);
     const pullBinding = usePullGesture({
         onDrag: onDragOffset,
@@ -1478,10 +1912,12 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 else {
                     // Pill → bare input bar (no thread to open into).
                     setMode("input");
-                    if (reduce)
+                    if (reduce) {
+                        stopThreadAnimation();
                         threadHeight.set(0);
+                    }
                     else
-                        animate(threadHeight, 0, SHEET_SPRING);
+                        animateThreadHeight(0);
                     detentHaptic();
                 }
                 return;
@@ -1652,9 +2088,9 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                     opacity: revealed,
                     visibility: scrimVisibility,
                     pointerEvents: sheetOpen ? "auto" : "none",
-                } }), recording && transcript ? (_jsxs("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: cn("pointer-events-none relative mb-2 w-full max-w-3xl text-center text-sm italic text-white/85", FLOAT_SHADOW), children: [transcript, _jsx("span", { "aria-hidden": "true", children: "\u2026" })] })) : null, needsAudioUnlock ? (_jsx("div", { role: "status", "aria-live": "polite", className: "pointer-events-none relative mb-2 flex w-full justify-center", children: _jsxs("button", { type: "button", onClick: unlockAudio, "data-testid": "overlay-voice-audio-unlock", className: cn("pointer-events-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors", "border-warn/40 bg-warn/15 text-warn hover:bg-warn/25", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-warn/70", FLOAT_SHADOW), children: [_jsx(Glyph, { d: SPEAKER_MUTED_GLYPH }), _jsx("span", { children: "Tap to enable sound" })] }) })) : null, modelStatus.kind === "downloading" || modelStatus.kind === "loading" ? (_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-testid": "overlay-model-download-status", className: "pointer-events-none relative mb-2 flex w-full justify-center", children: _jsxs("span", { className: cn("inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-sm font-medium text-white/85 backdrop-blur-sm", FLOAT_SHADOW), children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[#FF5800]" }), modelStatus.kind === "downloading" ? (_jsxs("span", { children: ["Downloading ", modelStatus.modelName ?? "local model", typeof modelStatus.percent === "number"
+                } }), recording && transcript ? (_jsxs("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: cn("pointer-events-none relative mb-2 w-full max-w-3xl text-center text-sm italic text-white/85", FLOAT_SHADOW), children: [transcript, _jsx("span", { "aria-hidden": "true", children: "\u2026" })] })) : null, needsAudioUnlock ? (_jsx("div", { role: "status", "aria-live": "polite", className: "pointer-events-none relative mb-2 flex w-full justify-center", children: _jsxs("button", { type: "button", onClick: unlockAudio, "data-testid": "overlay-voice-audio-unlock", className: cn("pointer-events-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors", "border-warn/40 bg-warn/15 text-warn hover:bg-warn/25", "  ", FLOAT_SHADOW), children: [_jsx(Glyph, { d: SPEAKER_MUTED_GLYPH }), _jsx("span", { children: "Tap to enable sound" })] }) })) : null, modelStatus.kind === "downloading" || modelStatus.kind === "loading" ? (_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-testid": "overlay-model-download-status", className: "pointer-events-none relative mb-2 flex w-full justify-center", children: _jsxs("span", { className: cn("inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-sm font-medium text-white/85", FLOAT_SHADOW), children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[#FF5800]" }), modelStatus.kind === "downloading" ? (_jsxs("span", { children: ["Downloading ", modelStatus.modelName ?? "local model", typeof modelStatus.percent === "number"
                                     ? ` — ${Math.round(modelStatus.percent)}%`
-                                    : "…"] })) : (_jsxs("span", { children: ["Loading ", modelStatus.modelName ?? "local model", "\u2026"] }))] }) })) : null, suggestionsVisible ? (_jsx(motion.fieldset, { "aria-label": "Suggested prompts", className: cn("pointer-events-auto relative m-0 mb-2 flex w-full max-w-3xl flex-wrap items-center justify-center gap-2 border-0 p-0"), style: { order: -1, opacity: suggestionsOpacity }, "data-testid": "chat-suggestions", children: suggestions.map((s, i) => (_jsx("button", { type: "button", "data-testid": `chat-suggestion-${i}`, "aria-label": s, onClick: () => pickSuggestion(s), className: cn("max-w-full truncate rounded-full border border-white/15 bg-black/40 px-3 py-1.5", "text-[12px] text-white/80 backdrop-blur-xl transition-colors", "shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_10px_30px_-12px_rgba(0,0,0,0.6)]", "hover:border-white/30 hover:bg-white/15 hover:text-white", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"), children: s }, s))) })) : null, _jsxs("div", { className: cn("pointer-events-none relative flex w-full flex-col items-center", fullBleed ? "max-w-none" : "max-w-3xl"), children: [!fullBleed ? (_jsx(SheetGrabber, { open: sheetOpen, onOpen: () => {
+                                    : "…"] })) : (_jsxs("span", { children: ["Loading ", modelStatus.modelName ?? "local model", "\u2026"] }))] }) })) : null, suggestionsVisible ? (_jsx(motion.fieldset, { "aria-label": "Suggested prompts", className: cn("pointer-events-auto relative m-0 mb-2 flex w-full max-w-3xl flex-wrap items-center justify-center gap-2 border-0 p-0"), style: { order: -1, opacity: suggestionsOpacity }, "data-testid": "chat-suggestions", children: suggestions.map((s, i) => (_jsx("button", { type: "button", "data-testid": `chat-suggestion-${i}`, "aria-label": s, onClick: () => pickSuggestion(s), className: cn("max-w-full truncate rounded-full border border-white/15 bg-black/40 px-3 py-1.5", "text-[12px] text-white/80 transition-colors", "hover:border-white/30 hover:bg-white/15 hover:text-white", "  "), children: s }, s))) })) : null, _jsxs("div", { className: cn("pointer-events-none relative flex w-full flex-col items-center", fullBleed ? "max-w-none" : "max-w-3xl"), children: [!fullBleed ? (_jsx(SheetGrabber, { open: sheetOpen, onOpen: () => {
                             if (!hasThread)
                                 return;
                             goToDetent("half");
@@ -1687,23 +2123,14 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                             // home screen — only the pill-capsule child re-enables pointer events.
                             pointerEvents: pilled ? "none" : "auto",
                         }, className: cn(
-                        // overflow-VISIBLE on the outer fieldset: the glass layer's soft drop
-                        // shadow + the pill's tall grab zone must bleed past the box. The
-                        // rounded thread-clip lives on the inner content wrapper instead, so
-                        // clipping the scroll never clips the shadow into a hard square edge.
+                        // overflow-VISIBLE on the outer fieldset: the pill's tall grab zone
+                        // must bleed past the box. The rounded thread-clip lives on the inner
+                        // content wrapper instead, so clipping the scroll never clips a hard
+                        // square edge over the content.
                         "relative m-0 flex w-full min-w-0 flex-col overflow-visible border-0 p-0"), children: [_jsx(motion.div, { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0 z-0", fullBleed ? "border-0" : "border border-white/[0.16]", 
-                                // Liquid glass: a near-clear tint that lets the backdrop show
-                                // through, BLURRED + over-saturated + brightness-knocked-down so
-                                // bright content (the orange ambient) stops white text from washing
-                                // out — instead of a heavy dark fill. blur(16px)+saturate+brightness
-                                // compose into ONE backdrop-filter pass (blur radius never animated,
-                                // so it stays cheap on the per-frame-resizing surface). The base
-                                // bg-black/45 is the legible fallback when backdrop-filter is
-                                // unavailable; the supports- rule thins it to glass once the filter
-                                // is doing the darkening.
-                                "bg-black/45 backdrop-blur-lg backdrop-saturate-[1.8] backdrop-brightness-[0.68] supports-[backdrop-filter]:bg-black/[0.12]", fullBleed
-                                    ? "shadow-none"
-                                    : "shadow-[inset_0_1px_0_rgba(255,255,255,0.26),inset_0_0_0_0.5px_rgba(255,255,255,0.08),0_18px_50px_-16px_rgba(0,0,0,0.72)]"), style: {
+                                // A solid dark fill so white text stays legible over any view
+                                // behind (a bright view, a dark view, or the warm ambient field).
+                                "bg-black/45"), style: {
                                     opacity: glassOpacity,
                                     borderRadius: fullBleed ? 0 : panelRadius,
                                     // Full-bleed: extend the glass UP through the safe-area-top so the
@@ -1725,7 +2152,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                     opacity: glassOpacity,
                                     pointerEvents: pilled ? "none" : "auto",
                                     borderRadius: fullBleed ? 0 : panelRadius,
-                                }, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-0 z-0 h-20 bg-gradient-to-b from-white/[0.07] to-transparent" }), _jsx(motion.div, { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 h-28 blur-xl bg-[rgba(255,180,120,0.30)]", initial: false, animate: { opacity: listening ? 1 : 0 }, transition: { duration: reduce ? 0 : 1.1, ease: "easeInOut" } }), _jsx(motion.div, { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 h-28 blur-xl bg-[rgba(255,140,80,0.18)]", initial: false, animate: { opacity: responding ? 1 : 0 }, transition: { duration: reduce ? 0 : 1.1, ease: "easeInOut" } }), !pilled ? (_jsxs(motion.div
+                                }, children: [sheetOpen ? (_jsxs(_Fragment, { children: [_jsx(SwipeEdgeHint, { side: "left", active: swipeDx < 0 && conversationNav.hasPrev, amount: -swipeDx }), _jsx(SwipeEdgeHint, { side: "right", active: swipeDx > 0 && conversationNav.hasNext, amount: swipeDx })] })) : null, _jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-0 z-0 h-20 bg-gradient-to-b from-white/[0.07] to-transparent" }), !pilled ? (_jsxs(motion.div
                                     // Always mounted (when not pilled) so it can FADE + LERP its
                                     // space open/closed with the live height instead of popping in
                                     // on a mount. `headerVisible` (live-height boolean) gates
@@ -1756,7 +2183,9 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                             paddingTop: fullBleed
                                                 ? "calc(var(--safe-area-top, 0px) + 0.5rem)"
                                                 : headerPadTop,
-                                        }, className: cn("relative z-10 flex shrink-0 items-center justify-between gap-1.5 overflow-hidden px-3"), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(HeaderButton, { icon: maximized ? Minimize2 : Maximize2, label: maximized ? "exit full screen" : "full screen", active: maximized, onClick: toggleMaximize, testId: "chat-full-maximize" }), _jsx(HeaderButton, { icon: RotateCcw, label: "clear conversation", onClick: () => clearConversation(), testId: "chat-full-clear" })] }), transcriptionMode ? (_jsx("div", { "data-testid": "chat-transcribing-badge", className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-[var(--brand-orange,#ff6a00)]/15 px-2.5 py-0.5 text-[11px] font-medium text-[var(--brand-orange,#ff6a00)]", children: "Transcribing \u2014 say \u201Cexit transcription mode\u201D to stop" })) : null, _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(HeaderButton, { icon: Home, label: "home", disabled: currentTab === "chat", onClick: () => navigateAndClose(() => navigateHome?.()), testId: "chat-full-home" }), _jsx(HeaderButton, { icon: LayoutGrid, label: "views", disabled: currentTab === "views", onClick: () => navigateAndClose(() => navigateToViews?.()), testId: "chat-full-views" }), _jsx(HeaderButton, { icon: SettingsIcon, label: "settings", disabled: currentTab === "settings", onClick: () => navigateAndClose(() => openSettings()), testId: "chat-full-settings" })] })] })) : null, hasThread ? (_jsx(motion.div, { "data-testid": "chat-thread", className: cn("relative z-10 min-h-0 w-full shrink grow-0 overflow-hidden", 
+                                        }, className: cn("relative z-10 flex shrink-0 items-center justify-between gap-1.5 overflow-hidden px-3"), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(HeaderButton, { icon: maximized ? Minimize2 : Maximize2, label: maximized ? "exit full screen" : "full screen", active: maximized, onClick: toggleMaximize, testId: "chat-full-maximize" }), hasThread ? (_jsx(HeaderButton, { icon: conversationCopied ? Check : Copy, label: conversationCopied
+                                                            ? "conversation copied"
+                                                            : "copy conversation", onClick: handleCopyConversation, testId: "chat-full-copy-conversation" })) : null, _jsx(HeaderButton, { icon: RotateCcw, label: "clear conversation", onClick: () => clearConversation(), testId: "chat-full-clear" })] }), transcriptionMode ? (_jsx("div", { "data-testid": "chat-transcribing-badge", className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-[var(--brand-orange,#ff6a00)]/15 px-2.5 py-0.5 text-[11px] font-medium text-[var(--brand-orange,#ff6a00)]", children: "Transcribing \u2014 say \u201Cexit transcription mode\u201D to stop" })) : null, _jsx("div", { className: "flex items-center gap-1.5", children: _jsx(HeaderButton, { icon: LayoutGrid, label: "springboard", onClick: () => navigateAndClose(() => navigateHome?.()), testId: "chat-full-springboard" }) })] })) : null, hasThread || sheetOpen ? (_jsx(motion.div, { "data-testid": "chat-thread", className: cn("relative z-10 min-h-0 w-full shrink grow-0 overflow-hidden", 
                                         // When open, fade the top edge into the glass so the topmost
                                         // message dissolves under the drag handle instead of butting
                                         // against it.
@@ -1772,20 +2201,34 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                         style: {
                                             flexBasis: threadFlexBasis,
                                             paddingTop: threadGrabberClearance,
-                                        }, children: _jsx("div", { id: "continuous-thread", ref: threadRef, role: "log", "aria-label": "conversation history", "aria-live": "polite", "aria-hidden": !sheetOpen ? true : undefined, tabIndex: sheetOpen ? 0 : -1, onKeyDown: (e) => {
+                                        }, children: _jsxs("div", { id: "continuous-thread", ref: threadRef, role: "log", "aria-label": "conversation history", "aria-live": "polite", "aria-hidden": !sheetOpen ? true : undefined, tabIndex: sheetOpen ? 0 : -1, onKeyDown: (e) => {
                                                 if (e.key === "Escape") {
                                                     e.preventDefault();
                                                     collapse();
                                                 }
-                                            }, className: "relative flex h-full w-full touch-pan-y flex-col overflow-y-auto px-5 [scrollbar-width:none] focus-visible:outline-none [&::-webkit-scrollbar]:hidden", children: _jsxs("div", { className: "mt-auto flex flex-col pb-3 pt-1", children: [_jsx(AnimatePresence, { initial: false, children: visibleMessages.map((m) => (_jsx(ThreadLine, { message: m, floating: true, reduce: reduce, onCopy: handleCopyMessage, onOpenSettings: openSettings }, m.id))) }), _jsx(AnimatePresence, { children: responding &&
-                                                            !(visibleMessages.at(-1)?.role === "assistant" &&
-                                                                !visibleMessages.at(-1)?.content.trim()) ? (_jsx(TypingDots, { reduce: reduce })) : null }), _jsx("div", { ref: endRef })] }) }) })) : null, hasImages || imageError ? (_jsxs("div", { className: "relative z-10 flex shrink-0 flex-col gap-1.5 px-3 pt-2", children: [hasImages ? (_jsx("div", { className: "flex flex-wrap gap-2", children: pendingImages.map((img, i) => {
+                                            }, ...(sheetOpen ? conversationSwipe : {}), className: "relative flex h-full w-full touch-pan-y flex-col overflow-y-auto px-5 [scrollbar-width:none]  [&::-webkit-scrollbar]:hidden", children: [visibleMessages.length === 0 && conversationLoading ? (_jsx("div", { "data-testid": "chat-thread-loading", className: "pointer-events-none absolute inset-0 grid place-items-center", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-[#FF5800]" }) })) : null, hasTopics ? (_jsx(TopicChipsBar, { topics: channelTopics, onSelectTopic: scrollToTopic, className: "sticky top-0 z-[2] -mx-5 mb-1 bg-gradient-to-b from-black/40 to-transparent px-5" })) : null, _jsxs("div", { className: "mt-auto flex flex-col pb-3 pt-1", children: [hasTopics
+                                                            ? // Topic-grouped transcript: each cluster collapses via a
+                                                                // gesture on its header (no visible buttons).
+                                                                (() => {
+                                                                    let lineIndex = 0;
+                                                                    return topicSegments.map((segment) => {
+                                                                        const lines = segment.messages.map((m) => renderThreadLine(m, lineIndex++));
+                                                                        return (_jsx(TopicGroup, { topic: segment.topic, count: segment.messages.length, collapsed: collapsedTopics.has(segment.key), onCollapsedChange: (collapsed) => setTopicCollapsed(segment.key, collapsed), children: _jsx(AnimatePresence, { initial: false, children: lines }) }, segment.messages[0]?.id ?? segment.key));
+                                                                    });
+                                                                })()
+                                                            : // Flat transcript (no topic tags) — unchanged behavior.
+                                                                // Only the LAST, content-less assistant turn (the
+                                                                // in-flight one) reads turnStatus — every settled bubble
+                                                                // gets undefined so its memo identity is unchanged.
+                                                                null, hasTopics ? null : (_jsx(AnimatePresence, { initial: false, children: visibleMessages.map((m, i) => renderThreadLine(m, i)) })), _jsx(AnimatePresence, { children: responding &&
+                                                                !(visibleMessages.at(-1)?.role === "assistant" &&
+                                                                    !visibleMessages.at(-1)?.content.trim()) ? (_jsx(TurnStatusIndicator, { status: turnStatus, reduce: reduce })) : null }), _jsx("div", { ref: endRef })] })] }) })) : null, hasImages || imageError ? (_jsxs("div", { className: "relative z-10 flex shrink-0 flex-col gap-1.5 px-3 pt-2", children: [hasImages ? (_jsx("div", { className: "flex flex-wrap gap-2", children: pendingImages.map((img, i) => {
                                                     const kind = chatUploadKind(img.mimeType);
                                                     const removeButton = (_jsx("button", { type: "button", "aria-label": `remove ${img.name}`, onClick: () => removeImage(i), 
                                                         // Small visual disc, but a 44px-class hit zone via the
                                                         // invisible `before` overlay so it's thumb-tappable
                                                         // without crowding the tile.
-                                                        className: "absolute -right-1.5 -top-1.5 grid h-5 w-5 place-items-center rounded-full border border-white/20 bg-black/70 text-xs text-white/90 backdrop-blur transition-colors before:absolute before:-inset-3 before:content-[''] hover:bg-black/90", children: "\u00D7" }));
+                                                        className: "absolute -right-1.5 -top-1.5 grid h-5 w-5 place-items-center rounded-full border border-white/20 bg-black/70 text-xs text-white/90 transition-colors before:absolute before:-inset-3 before:content-[''] hover:bg-black/90", children: "\u00D7" }));
                                                     const tileKey = `${img.name}-${img.mimeType}-${img.data.length}`;
                                                     if (kind === "image") {
                                                         return (_jsxs("div", { className: "group relative h-14 w-14 shrink-0", children: [_jsx("img", { src: `data:${img.mimeType};base64,${img.data}`, alt: img.name, className: "h-14 w-14 rounded-lg border border-white/20 object-cover" }), removeButton] }, tileKey));
@@ -1835,11 +2278,22 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                                         expand();
                                                     }
                                                 }, onBlur: () => setComposerFocused(false), onPaste: (e) => {
-                                                    // Paste images/files straight into the composer (cmd/ctrl+V).
-                                                    const files = Array.from(e.clipboardData?.files ?? []);
-                                                    if (files.length > 0) {
+                                                    // Shared with the desktop composer: a pasted image/file
+                                                    // attaches, a large plain-text paste becomes a collapsed
+                                                    // text-attachment chip, and small text falls through to the
+                                                    // textarea as normal.
+                                                    const intent = classifyComposerPaste({
+                                                        files: Array.from(e.clipboardData?.files ?? []),
+                                                        text: e.clipboardData?.getData("text") ?? "",
+                                                    });
+                                                    if (intent.kind === "files") {
+                                                        e.preventDefault();
+                                                        addImageFiles(intent.files);
+                                                        return;
+                                                    }
+                                                    if (intent.kind === "text-attachment") {
                                                         e.preventDefault();
-                                                        addImageFiles(files);
+                                                        setPendingImages((prev) => [...prev, intent.attachment].slice(0, MAX_CHAT_IMAGES));
                                                     }
                                                 }, onKeyDown: (e) => {
                                                     // The slash menu intercepts navigation/commit keys when open.
@@ -1888,30 +2342,28 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                                     }
                                                 }, placeholder: booting
                                                     ? `Ask ${agentName} — waking up…`
-                                                    : (viewChatBinding?.placeholder ?? `Ask ${agentName}`), "aria-label": "message", "data-testid": "chat-composer-textarea", "aria-describedby": booting ? "cc-booting-hint" : undefined, ...comboboxAria, className: "max-h-[8.5rem] min-h-8 min-w-0 flex-1 resize-none self-center border-none bg-transparent px-1.5 py-1 text-left text-sm leading-relaxed text-white/[0.92] outline-none [scrollbar-width:none] placeholder:text-white/45 [&::-webkit-scrollbar]:hidden" }), _jsxs("span", { id: "cc-booting-hint", className: "sr-only", children: [agentName, " is waking up \u2014 you can type now; your message sends and the reply arrives in a moment."] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 sm:gap-2", children: [voiceActive ? (_jsx(SoftButton, { icon: FileText, label: transcriptionMode
-                                                            ? "stop transcription"
-                                                            : "transcription mode", active: transcriptionMode, onClick: toggleTranscriptionMode, testId: "chat-composer-transcribe" })) : null, _jsx("div", { className: "shrink-0", children: (hasDraft || hasImages) && !recording ? (_jsx(SoftButton, { icon: SendHorizontal, label: !canSend
-                                                                ? "send (agent stopped)"
-                                                                : responding
-                                                                    ? "send another"
-                                                                    : "send", disabled: !canSend, 
-                                                            // Keep focus in the textarea on tap: without this the
-                                                            // button steals focus, the textarea blurs, the keyboard
-                                                            // retracts and the composer relayouts between pointerdown
-                                                            // and click — so the first tap only dismissed the keyboard
-                                                            // and a second tap was needed to actually send. Chromium
-                                                            // still dispatches click after a preventDefaulted
-                                                            // pointerdown, so onClick fires on the first tap and the
-                                                            // keyboard stays up for the next message.
-                                                            onPointerDown: (e) => e.preventDefault(), onClick: submit, testId: "chat-composer-action" })) : !recording && responding ? (_jsx(SoftButton, { glyph: STOP_GLYPH, label: "stop generating", onClick: () => stop(), testId: "chat-composer-stop" })) : (_jsx(SoftButton, { icon: Mic, label: pttHolding
-                                                                ? "release to send"
-                                                                : transcriptionMode
-                                                                    ? "stop transcription"
-                                                                    : handsFree
-                                                                        ? "end conversation"
-                                                                        : recording
-                                                                            ? "stop listening"
-                                                                            : "talk", active: recording || handsFree || transcriptionMode, onClick: handleMicClick, onPointerDown: beginPushToTalkPress, onPointerUp: (e) => finishPushToTalkPress(e, false), onPointerCancel: (e) => finishPushToTalkPress(e, true), testId: "chat-composer-mic" })) })] })] })] }), _jsx(motion.div, { className: "absolute inset-x-0 bottom-0 z-30 flex justify-center", style: {
+                                                    : (viewChatBinding?.placeholder ?? `Ask ${agentName}`), "aria-label": "message", "data-testid": "chat-composer-textarea", "aria-describedby": booting ? "cc-booting-hint" : undefined, ...comboboxAria, className: "max-h-[8.5rem] min-h-8 min-w-0 flex-1 resize-none self-center border-none bg-transparent px-1.5 py-1 text-left text-sm leading-relaxed text-white/[0.92] outline-none [scrollbar-width:none] placeholder:text-white/45 [&::-webkit-scrollbar]:hidden" }), _jsxs("span", { id: "cc-booting-hint", className: "sr-only", children: [agentName, " is waking up \u2014 you can type now; your message sends and the reply arrives in a moment."] }), _jsx("div", { className: "flex shrink-0 items-center gap-1.5 sm:gap-2", children: _jsx("div", { className: "shrink-0", children: (hasDraft || hasImages) && !recording ? (_jsx(SoftButton, { icon: SendHorizontal, label: !canSend
+                                                            ? "send (agent stopped)"
+                                                            : responding
+                                                                ? "send another"
+                                                                : "send", disabled: !canSend, 
+                                                        // Keep focus in the textarea on tap: without this the
+                                                        // button steals focus, the textarea blurs, the keyboard
+                                                        // retracts and the composer relayouts between pointerdown
+                                                        // and click — so the first tap only dismissed the keyboard
+                                                        // and a second tap was needed to actually send. Chromium
+                                                        // still dispatches click after a preventDefaulted
+                                                        // pointerdown, so onClick fires on the first tap and the
+                                                        // keyboard stays up for the next message.
+                                                        onPointerDown: (e) => e.preventDefault(), onClick: submit, testId: "chat-composer-action" })) : !recording && responding ? (_jsx(SoftButton, { glyph: STOP_GLYPH, label: "stop generating", onClick: () => stop(), testId: "chat-composer-stop" })) : (_jsx(SoftButton, { icon: Mic, label: pttHolding
+                                                            ? "release to send"
+                                                            : transcriptionMode
+                                                                ? "stop transcription"
+                                                                : handsFree
+                                                                    ? "end conversation"
+                                                                    : recording
+                                                                        ? "stop listening"
+                                                                        : "talk", active: recording || handsFree || transcriptionMode, onClick: handleMicClick, onPointerDown: beginPushToTalkPress, onPointerUp: (e) => finishPushToTalkPress(e, false), onPointerCancel: (e) => finishPushToTalkPress(e, true), testId: "chat-composer-mic" })) }) })] })] }), _jsx(motion.div, { className: "absolute inset-x-0 bottom-0 z-30 flex justify-center", style: {
                                     opacity: pillOpacity,
                                     pointerEvents: pilled ? "auto" : "none",
                                 }, children: _jsx(PillHandle, { binding: pullBinding, onOpen: openFromPill, glow: listening || responding, pilled: pilled }) })] })] })] }));