@elizaos/ui 2.0.3-beta.3 → 2.0.3-beta.5

package/components/shell/ContinuousChatOverlay.js

@@ -6,8 +6,10 @@ import * as React from "react";
 import { client } from "../../api/client.js";
 import { parseSlashDraft, resolveClientShortcutExecution, runSlashExecution, splitLeadingSlashCommand, } from "../../chat/slash-menu.js";
 import { CHAT_PREFILL_EVENT, TUTORIAL_CHAT_CONTROL_EVENT, } from "../../events/index.js";
+import { LAYOUT_SHIFT_INTENT_ATTR, LAYOUT_SHIFT_INTENT_TRANSIENT, } from "../../hooks/useLayoutShiftMonitor.js";
 import { Z_SHELL_OVERLAY } from "../../lib/floating-layers.js";
 import { cn } from "../../lib/utils.js";
+import { goHome, goSpringboard } from "../../state/shell-surface-store.js";
 import { useViewChatBinding } from "../../state/view-chat-binding.js";
 import { copyTextToClipboard } from "../../utils/clipboard.js";
 import { CHAT_UPLOAD_ACCEPT, chatUploadKind, classifyComposerPaste, intakeAttachmentFiles, MAX_CHAT_IMAGES, summarizeDroppedAttachments, } from "../../utils/image-attachment.js";
@@ -44,9 +46,9 @@ const EMPTY_SLASH_CONTROLLER = {
  * useShellController).
  *
  * Layout is a fixed composer at the bottom with a pull-up history SHEET above
- * it. At rest the sheet is a slim peek (the grabber + the latest line); pull it
- * UP — anywhere on the sheet — or just start typing to spring it open into the
- * full transcript; pull the grabber back DOWN, or press Escape, to close.
+ * it. At rest the sheet is only the composer + grabber; pull the grabber UP, or
+ * just start typing, to spring it open into the full transcript. Pull the
+ * grabber back DOWN, or press Escape, to close.
  * Nothing else dismisses it — clicking or scrolling the view behind does
  * nothing. The composer never moves; the history slides up over it.
  *
@@ -224,17 +226,14 @@ function SheetGrabber({ open, onOpen, onClose, binding, glow, opacity, pilled, }
         }, ...binding, className: cn("appearance-none border-0 bg-transparent text-left", 
         // ABSOLUTELY positioned over the panel top (zero layout height — it
         // floats slightly on top of the input row, so collapsed height == the
-        // input bar). The bar sits a touch lower; the BIG invisible `before` hit
-        // zone reaches UP into the empty space above the panel (3× taller/wider
-        // than the bar) so it's easy to grab without covering the edge buttons.
+        // input bar). Keep the invisible hit target local to the visible handle:
+        // it should be forgiving, not register drags far above the bar.
         // z-20 keeps it above the input row (z-10) so it always wins the drag.
-        "absolute left-1/2 top-0.5 z-20 -translate-x-1/2 flex cursor-grab touch-none select-none items-center justify-center px-16 py-1 active:cursor-grabbing", 
-        // The hit zone reaches UP into the empty space above the panel (easy to
-        // grab) and stops at the handle's own bottom — it never reaches the
-        // 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-['']", "   "), children: _jsx("span", { "aria-hidden": "true", className: cn(
+        "absolute left-1/2 top-0.5 z-20 -translate-x-1/2 flex cursor-grab touch-none select-none items-center justify-center px-16 py-2 active:cursor-grabbing", 
+        // The hit zone reaches only a small distance above the panel and stops
+        // at the handle's own bottom, so the handle does not steal taps intended
+        // for the composer or feel like it starts in empty space.
+        "before:absolute before:-inset-x-4 before:-top-4 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
@@ -364,7 +363,7 @@ function useDebouncedTurnStatus(status) {
 function TurnStatusInner({ status, }) {
     const shown = useDebouncedTurnStatus(status);
     const speaking = shown?.kind === "speaking";
-    const label = shown ? turnStatusLabel(shown) : null;
+    const label = shown && shown.kind !== "thinking" ? 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] }));
 }
 /**
@@ -403,7 +402,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, turnStatus, }) {
+const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, onCopy, onOpenSettings, turnStatus, suppressReasoning, }) {
     const isUser = message.role === "user";
     const isAssistant = message.role === "assistant";
     // Press-and-hold to copy an assistant answer — the only extraction affordance
@@ -481,7 +480,7 @@ const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, o
                     ? "bg-white/20 text-white"
                     : "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 })] }) }));
+                        !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, !suppressReasoning && 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, turnStatus, send, canSend, recording, startRecording, stopRecording, handsFree, toggleHandsFree, transcriptionMode, toggleTranscriptionMode, stopTranscriptionAndMic, setDictationSink, setTranscriptSessionSink, setComposerHasDraft, transcript, needsAudioUnlock, unlockAudio, openSettings, navigateHome, currentTab, clearConversation, stop, modelStatus, } = controller;
@@ -523,12 +522,12 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const viewChatBinding = useViewChatBinding();
     // Escape dismisses the slash menu without clearing the draft; typing reopens.
     const [slashDismissed, setSlashDismissed] = React.useState(false);
-    // The chat-history sheet: closed (a slim peek + grabber) ↔ open (full
-    // scrollable history). The ONLY open/close driver — opened by a pull-up drag,
-    // by focusing the composer, or by sending; closed by a pull-down drag or
-    // Escape. Never by click-out, scroll, or blur.
+    // The chat-history sheet: closed (composer + grabber) ↔ open (full scrollable
+    // history). The ONLY open/close driver — opened by a pull-up drag, by focusing
+    // the composer, or by sending; closed by a pull-down drag or Escape. Never by
+    // click-out, scroll, or blur.
     // The sheet's vertical position is ONE ordinal — the single source of truth for
-    // how far the chat is open: `input` (composer-only peek) → `half` (reading
+    // how far the chat is open: `input` (composer-only) → `half` (reading
     // height) → `full` (near-fullscreen). `sheetOpen`/`expanded` are derived
     // read-only views so the two can never disagree (no impossible "open but not
     // open" combos). `pilled` sits BELOW input; `maximized` drops the inset at full.
@@ -563,10 +562,6 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // tell a FIRST tap (keyboard up → just dismiss + restore) from a SECOND tap
     // (keyboard already down → close the chat).
     const composerFocusedAtPressRef = React.useRef(false);
-    // Composer focus ⟺ the soft keyboard is up on mobile. This is the reliable
-    // keyboard signal: Capacitor's resize:"body" shrinks innerHeight too, so a
-    // visualViewport-derived keyboardInset reads 0 and can't gate the layout.
-    const [composerFocused, setComposerFocused] = React.useState(false);
     // The live thread (history) height in px, as a MOTION VALUE — driven directly
     // by the pointer during a drag and spring-animated to a detent on release.
     // Keeping it off React state means a drag updates the DOM height every frame
@@ -622,6 +617,11 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             window.clearTimeout(delayedNavigationTimerRef.current);
             delayedNavigationTimerRef.current = null;
         }
+        if (layoutShiftIntentTimerRef.current !== null) {
+            window.clearTimeout(layoutShiftIntentTimerRef.current);
+            layoutShiftIntentTimerRef.current = null;
+        }
+        overlayRef.current?.removeAttribute(LAYOUT_SHIFT_INTENT_ATTR);
         clearPrefillFocusSchedule();
     }, [stopThreadAnimation, stopOpenProgressAnimation, clearPrefillFocusSchedule]);
     // Latest `settleDrag` (defined below) exposed to the viewport-resize effect
@@ -629,6 +629,19 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // the morph keeps the pill↔input crossfade from stranding both bars visible.
     const settleDragRef = React.useRef(null);
     const draggingRef = React.useRef(false);
+    // At rest the collapsed composer should not carry hidden transcript/header
+    // DOM. During an upward pull, though, the sheet needs a mounted body so the
+    // MotionValue-driven height can follow the finger before the release commits
+    // to an open detent. This boolean changes only at gesture boundaries; the
+    // per-frame drag still stays outside React.
+    const [dragPreviewVisible, setDragPreviewVisible] = React.useState(false);
+    const dragPreviewVisibleRef = React.useRef(false);
+    const setDragPreviewMounted = React.useCallback((visible) => {
+        if (dragPreviewVisibleRef.current === visible)
+            return;
+        dragPreviewVisibleRef.current = visible;
+        setDragPreviewVisible(visible);
+    }, []);
     // Push-to-talk phase (single source of truth) + a label-only mirror.
     const pttRef = React.useRef({ kind: "idle" });
     const [pttHolding, setPttHolding] = React.useState(false);
@@ -642,6 +655,20 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const overlayRef = React.useRef(null);
     const panelRef = React.useRef(null);
     const threadRef = React.useRef(null);
+    const layoutShiftIntentTimerRef = React.useRef(null);
+    const markLayoutShiftIntent = React.useCallback(() => {
+        const overlay = overlayRef.current;
+        if (!overlay || typeof window === "undefined")
+            return;
+        overlay.setAttribute(LAYOUT_SHIFT_INTENT_ATTR, LAYOUT_SHIFT_INTENT_TRANSIENT);
+        if (layoutShiftIntentTimerRef.current !== null) {
+            window.clearTimeout(layoutShiftIntentTimerRef.current);
+        }
+        layoutShiftIntentTimerRef.current = window.setTimeout(() => {
+            layoutShiftIntentTimerRef.current = null;
+            overlayRef.current?.removeAttribute(LAYOUT_SHIFT_INTENT_ATTR);
+        }, 180);
+    }, []);
     // The composer content (textarea + thread). Held so we can imperatively clear
     // its `inert` (set while pilled) the instant the pill is tapped open, before
     // React re-renders — iOS only raises the keyboard for a focus() that lands on
@@ -659,6 +686,20 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const visibleMessages = React.useMemo(() => selectVisibleShellMessages(messages, phase), [messages, phase]);
     const lastId = visibleMessages.at(-1)?.id ?? null;
     const lastContent = visibleMessages.at(-1)?.content ?? "";
+    // biome-ignore lint/correctness/useExhaustiveDependencies: these values are the event keys for transient layout-motion intent.
+    React.useEffect(() => {
+        markLayoutShiftIntent();
+    }, [
+        visibleMessages.length,
+        lastId,
+        lastContent,
+        responding,
+        turnStatus?.kind,
+        turnStatus?.label,
+        turnStatus?.actionName,
+        turnStatus?.toolName,
+        markLayoutShiftIntent,
+    ]);
     // 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);
@@ -724,15 +765,15 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // 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));
+        const isLastAssistant = index === visibleMessages.length - 1 && m.role === "assistant";
+        const isInFlight = isLastAssistant && !m.content.trim();
+        return (_jsx(ThreadLine, { message: m, floating: true, reduce: reduce, onCopy: handleCopyMessage, onOpenSettings: openSettings, turnStatus: isInFlight ? turnStatus : undefined, suppressReasoning: responding && isLastAssistant }, m.id));
     }, [
         visibleMessages.length,
         reduce,
         handleCopyMessage,
         openSettings,
+        responding,
         turnStatus,
     ]);
     const booting = phase === "booting";
@@ -783,19 +824,18 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         if (followRafRef.current != null)
             cancelAnimationFrame(followRafRef.current);
     }, []);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: lastId/lastContent/sheetOpen are the triggers; the body reads refs
+    const threadPresented = sheetOpen || dragPreviewVisible;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: lastId/lastContent/sheetOpen/dragPreviewVisible are the triggers; the body reads refs
     React.useLayoutEffect(() => {
         const el = threadRef.current;
         if (!el)
             return;
         const isNewLine = lastId !== scrollPinnedIdRef.current;
         scrollPinnedIdRef.current = lastId;
-        // CLOSED peek: always pin to the bottom so it whispers the LATEST line (the
-        // one nearest the composer) — even though it can't be user-scrolled, the
-        // clipped content must show the end of the thread, not the top.
         if (!sheetOpen) {
             wasOpenRef.current = false;
-            el.scrollTop = el.scrollHeight;
+            if (dragPreviewVisible)
+                el.scrollTop = el.scrollHeight;
             return;
         }
         // OPEN: jump to the bottom on first open; a NEW line re-pins (smooth); while
@@ -841,25 +881,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             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
-    // finishes shrinking, leaving the peek parked mid-thread as clientHeight
-    // drops. Observe the peek while closed and re-pin to the bottom on every size
-    // change (animation frames, web-font reflow, viewport resize) until it
-    // settles. Disconnects the moment the sheet opens.
-    React.useEffect(() => {
-        const el = threadRef.current;
-        if (!el || sheetOpen || typeof ResizeObserver === "undefined")
-            return;
-        const pin = () => {
-            el.scrollTop = el.scrollHeight;
-        };
-        pin();
-        const ro = new ResizeObserver(pin);
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [sheetOpen]);
+    }, [lastId, lastContent, sheetOpen, dragPreviewVisible]);
     // Send `text` (and optional images) through the normal chat pipeline, clearing
     // the composer. Shared by the send button, the slash menu (agent commands),
     // and suggestion taps.
@@ -887,7 +909,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // Sending COMMITS to the open chat: a deliberate message means this is now
         // an active conversation, so dismissing the keyboard afterwards keeps the
         // thread open (preFocusCollapsedRef gates that) instead of collapsing the
-        // whole conversation back to the bare input peek — even when the chat was
+        // whole conversation back to the bare input bar — even when the chat was
         // opened by tapping the collapsed input.
         preFocusCollapsedRef.current = false;
         detentHaptic();
@@ -1023,6 +1045,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         stopTranscriptionAndMic,
     ]);
     const hasThread = visibleMessages.length > 0;
+    const hasRevealableThread = hasThread || conversationLoading;
     // Track the VISUAL viewport so the chat sizes to — and sits above — whatever
     // the mobile keyboard leaves visible. `height` shrinks when the keyboard opens
     // (on iOS innerHeight does not, so read visualViewport); `keyboardInset` is how
@@ -1077,28 +1100,27 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 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
-        // the grabber bar and the pill bar visible). Re-settle to a clean 0/1 end so
-        // the crossfade always resolves to exactly one bar. (No-op at rest; a live
-        // legit drag rotating is rare and settling is the right call there too.)
-        // Plain `sync` (no settle) stays on vv `scroll` — that fires constantly while
-        // the keyboard animates and must not interrupt an open sheet.
-        const syncAndSettle = () => {
+        // A real WINDOW resize (rotation/desktop resize) must never strand the
+        // pill↔input morph mid-crossfade — rotation often cancels the in-flight
+        // pointer with no pointerup, leaving the drag orphaned. Re-settle to a clean
+        // 0/1 end there. `visualViewport.resize`, however, fires continuously during
+        // soft-keyboard animation; settling on those events fights typing, detent
+        // drags, and keyboard open/close. For vv resize/scroll, update measurements
+        // only and let the current sheet state remain authoritative.
+        const syncAndSettleWindow = () => {
             sync();
             settleDragRef.current?.();
         };
-        syncAndSettle();
+        syncAndSettleWindow();
         const vv = window.visualViewport;
-        window.addEventListener("resize", syncAndSettle);
-        vv?.addEventListener("resize", syncAndSettle);
+        window.addEventListener("resize", syncAndSettleWindow);
+        vv?.addEventListener("resize", sync);
         vv?.addEventListener("scroll", sync, { passive: true });
         return () => {
             if (rafId !== 0)
                 cancelAnimationFrame(rafId);
-            window.removeEventListener("resize", syncAndSettle);
-            vv?.removeEventListener("resize", syncAndSettle);
+            window.removeEventListener("resize", syncAndSettleWindow);
+            vv?.removeEventListener("resize", sync);
             vv?.removeEventListener("scroll", sync);
         };
     }, [readViewport]);
@@ -1171,6 +1193,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const layoutShrink = Math.max(0, baseInnerHeightRef.current - viewport.innerHeight);
     const nativeLift = Math.max(0, nativeKeyboardHeight - layoutShrink);
     const effectiveKeyboardInset = Math.max(keyboardInset, nativeLift);
+    const keyboardLiftActive = effectiveKeyboardInset > 0;
     // FULL-SCREEN derived gate: maximized only takes effect AT the full detent, so
     // a stale flag can never leak into half/collapsed/pill. Drives the edge-to-edge
     // panel styles + a zero top margin.
@@ -1228,9 +1251,10 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // bug). They show only when the panel actually renders at/over half (or is
     // full-bleed), tracking the finger frame-by-frame; the prev===next guard keeps
     // re-renders to the two threshold crossings.
-    const evalHeaderVisible = React.useCallback((h) => !pilled && (fullBleed || h >= halfH - 1), [pilled, fullBleed, halfH]);
+    const evalHeaderVisible = React.useCallback((h) => threadPresented && !pilled && (fullBleed || h >= halfH - 1), [threadPresented, pilled, fullBleed, halfH]);
     const [headerVisible, setHeaderVisible] = React.useState(false);
     useMotionValueEvent(threadHeight, "change", (h) => {
+        markLayoutShiftIntent();
         const next = evalHeaderVisible(h);
         setHeaderVisible((prev) => (prev === next ? prev : next));
     });
@@ -1252,10 +1276,12 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const scrimVisibility = useTransform(threadHeight, (h) => h > 0 ? "visible" : "hidden");
     const suggestionsOpacity = useTransform(threadHeight, (h) => Math.max(0, 1 - h / Math.max(1, openH * 0.5)));
     const threadFlexBasis = useTransform(threadHeight, (h) => `${h}px`);
-    // Corner radius tracks the live height so it can't flash as a tall full-pill
-    // mid-pull: a perfect pill at rest (collapsed input, matching the round
-    // buttons) relaxing to a calm 24px the instant the thread starts opening.
-    const panelRadius = useTransform(threadHeight, [0, 12], [9999, 24], {
+    // Corner radius tracks the live height with real pixel radii. `9999px` works
+    // for a static pill, but while the panel grows the browser keeps reclamping it
+    // against the changing box, so the corners visibly swim before snapping to the
+    // sheet radius. A 32px radius still renders as a capsule for the collapsed
+    // composer, then relaxes gradually into the open sheet.
+    const panelRadius = useTransform(threadHeight, [0, 160], [32, 24], {
         clamp: true,
     });
     // --- Liquid-glass pill → input morph (driven by openProgress) ---------------
@@ -1303,16 +1329,23 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // is hidden, so the thread viewport would start at the panel's very top —
     // tucking the topmost line under the floating drag handle (a partial bubble
     // pinned beneath the grabber at a small free-rest height). Inset the thread
-    // down by the grabber's height in that window only: 0 at the collapsed peek
+    // down by the grabber's height in that window only: 0 in the collapsed state
     // (threadHeight ~0, so the closed input bar stays exactly its own height),
     // ramping to the inset once a thread is actually open, then back to 0 as the
     // header reveals at half+ (it provides the clearance itself).
     const threadGrabberClearance = useTransform(threadHeight, [0, 40, halfH - 64, halfH], [0, 20, 20, 0], { clamp: true });
+    // The glass should lead the gesture; transcript content fades in only after
+    // there is enough vertical space to avoid clipped bubble slivers during the
+    // first few pixels of a pull.
+    const threadContentOpacity = useTransform(threadHeight, [72, 128], [0, 1], {
+        clamp: true,
+    });
     // Sub-threshold release: spring back to the current detent (no state change).
     // Also settles the pill→input morph to its resting end (0 while pilled, 1 once
     // open) so a half-finished pill drag springs cleanly back to the capsule.
     const settleDrag = React.useCallback(() => {
         draggingRef.current = false;
+        setDragPreviewMounted(false);
         const open = pilled ? 0 : 1;
         if (reduce) {
             stopThreadAnimation();
@@ -1334,6 +1367,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         stopOpenProgressAnimation,
         animateThreadHeight,
         animateOpenProgress,
+        setDragPreviewMounted,
     ]);
     // Keep the ref the (earlier-declared) viewport-resize effect calls pointing at
     // the latest settleDrag, so a rotation re-settles with current pilled/baseH.
@@ -1433,13 +1467,22 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         setFreeH(null);
         if (to !== "full")
             setMaximized(false);
-        // "collapsed" is the input peek (sheet closed); half/full open the thread.
+        // "collapsed" is the input bar (sheet closed); half/full open the thread.
         setMode(to === "collapsed" ? "input" : to);
         // Stepping all the way down closes the keyboard (the chat is dismissed).
         if (to === "collapsed")
             inputRef.current?.blur();
         detentHaptic();
     }, [stopThreadAnimation]);
+    const openFromGrabber = React.useCallback(() => {
+        if (hasRevealableThread) {
+            preFocusCollapsedRef.current = false;
+            focusThreadRef.current = true;
+            goToDetent("half");
+            return;
+        }
+        inputRef.current?.focus();
+    }, [goToDetent, hasRevealableThread]);
     // 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
@@ -1501,13 +1544,13 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     // handle) can return to that prior resting state. Clears any free-rest so the
     // height matches the detent (no stale freeH pinning it below half).
     const expand = React.useCallback(() => {
-        if (!hasThread)
+        if (!hasRevealableThread)
             return;
         preFocusCollapsedRef.current = !sheetOpen;
         setFreeH(null);
         // Open to at least HALF; if already at half/full, keep the taller mode.
         setMode((m) => (m === "half" || m === "full" ? m : "half"));
-    }, [hasThread, sheetOpen]);
+    }, [hasRevealableThread, sheetOpen]);
     // Interactive tour control: the tutorial drives the chat into a clean, known
     // state at the start of each frame (so the spotlight always lands on the right
     // control) and pre-fills the composer for the guided "ask to navigate" demo.
@@ -1742,15 +1785,16 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             // this (focus may be gone by the time the click fires) to tell a first
             // "dismiss the keyboard" tap from a second "close the chat" tap.
             composerFocusedAtPressRef.current = focused;
-            // Keyboard already down → outside taps do nothing here (the chat only
-            // closes via a pull-down, the scrim, or Escape).
+            // Keyboard already down -> outside taps do nothing here; the grabber,
+            // scrim, Escape key, and pull-down gesture own disclosure/collapse.
             if (!focused)
                 return;
             const target = event.target;
             if (target && panelRef.current?.contains(target))
                 return;
-            // Leave a tap on the GRABBER to onTap, which both drops the keyboard AND
-            // returns to the pre-focus resting state — blurring here would preempt it.
+            // Leave a tap on the GRABBER to the gesture onTap; blurring here would
+            // preempt the disclosure toggle and make press-time focus impossible to
+            // distinguish from click-time focus.
             if (target instanceof Element &&
                 target.closest('[data-testid="chat-sheet-grabber"]')) {
                 return;
@@ -1797,13 +1841,13 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     const openFromPill = React.useCallback(() => {
         draggingRef.current = false;
         // A pill tap OPENS the chat. With a conversation to show, go straight to the
-        // HALF detent — a tap reveals the thread exactly like a flick-up, so a SINGLE
-        // tap always opens the chat (never the old "tap lands on a bare input bar,
-        // tap again to actually open" two-step). Mark it deliberately open so
+        // HALF detent — a tap reveals the thread/loader exactly like a flick-up, so a
+        // SINGLE tap always opens the chat (never the old "tap lands on a bare input
+        // bar, tap again to actually open" two-step). Mark it deliberately open so
         // dismissing the keyboard then KEEPS it at half (preFocusCollapsedRef gates
         // that). With no thread yet, there's nothing to open into — just form the
         // bare input bar, and treat a later keyboard dismiss as a re-collapse.
-        if (hasThread) {
+        if (hasRevealableThread) {
             goToDetent("half");
             preFocusCollapsedRef.current = false;
         }
@@ -1834,7 +1878,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     }, [
         openProgress,
         reduce,
-        hasThread,
+        hasRevealableThread,
         goToDetent,
         stopOpenProgressAnimation,
         animateOpenProgress,
@@ -1859,6 +1903,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             const up = Math.max(0, offset);
             openProgress.set(Math.min(1, up / PILL_OPEN_DISTANCE));
             const excess = up - PILL_OPEN_DISTANCE;
+            setDragPreviewMounted(excess > 0 && hasRevealableThread);
             threadHeight.set(excess > 0 ? clampHeight(excess) : 0);
             return;
         }
@@ -1869,11 +1914,15 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // on release (the dead, unresponsive collapse gesture). The thread stays at
         // 0 (nothing to size below the input).
         if (!sheetOpen && offset < 0) {
+            setDragPreviewMounted(false);
             const down = -offset;
             openProgress.set(Math.max(0, 1 - down / PILL_OPEN_DISTANCE));
             threadHeight.set(0);
             return;
         }
+        if (!sheetOpen) {
+            setDragPreviewMounted(offset > 0 && hasRevealableThread);
+        }
         // Pin the dead direction at each end so the panel feels held: collapsed →
         // only upward (positive); full → only downward (negative); half → both.
         const off = !sheetOpen
@@ -1884,6 +1933,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         threadHeight.set(clampHeight(baseH + off));
     }, [
         pilled,
+        hasRevealableThread,
         sheetOpen,
         expanded,
         baseH,
@@ -1892,20 +1942,35 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         openProgress,
         stopThreadAnimation,
         stopOpenProgressAnimation,
+        setDragPreviewMounted,
     ]);
     const pullBinding = usePullGesture({
         onDrag: onDragOffset,
-        // Pulls STEP one detent at a time (peek→half→full and back) rather than
-        // jumping straight to the ends — the iOS sheet feel. The inline closures are
-        // rebuilt every render, so they always read the current detent.
+        onDragReset: settleDrag,
+        swipeEnabled: !sheetOpen,
+        onSwipeLeft: () => {
+            settleDrag();
+            if (!sheetOpen)
+                goSpringboard();
+        },
+        onSwipeRight: () => {
+            settleDrag();
+            if (!sheetOpen)
+                goHome();
+        },
+        // Flicks step one detent; released drags from the collapsed input honor the
+        // live height so a long pull can land full instead of snapping back to half.
+        // The inline closures are rebuilt every render, so they always read the
+        // current detent.
         onPullUp: () => {
+            setDragPreviewMounted(false);
             if (pilled) {
                 // PILL → INPUT, or straight into the chat when there's history: a flick
                 // up opens. Mirror the slow-drag path so a flick and a slow drag BOTH
                 // reach the chat (no hard stop at the bare input). Releasing draggingRef
                 // first lets the pilled→openProgress effect spring the morph 0→1.
                 draggingRef.current = false;
-                if (hasThread) {
+                if (hasRevealableThread) {
                     focusThreadRef.current = true;
                     goToDetent("half");
                 }
@@ -1923,9 +1988,15 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 return;
             }
             if (!sheetOpen) {
-                if (!hasThread)
+                if (!hasRevealableThread)
                     return settleDrag();
-                goToDetent("half");
+                const releasedH = Math.max(0, Math.min(threadHeight.get(), panelMaxH));
+                if (releasedH >= halfH + SHEET_DETENT_MAGNET) {
+                    goToDetent("full");
+                }
+                else {
+                    goToDetent("half");
+                }
                 focusThreadRef.current = true;
             }
             else if (!expanded) {
@@ -1937,6 +2008,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             }
         },
         onPullDown: () => {
+            setDragPreviewMounted(false);
             if (pilled)
                 return settleDrag(); // already the lowest detent
             // Step down ONE detent based on the EFFECTIVE height (so a free-rest above
@@ -1955,39 +2027,31 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 setMode("pill");
                 setMaximized(false);
                 draggingRef.current = false;
+                setDragPreviewMounted(false);
                 inputRef.current?.blur();
                 detentHaptic();
             }
         },
         // A tap (no drag) on the handle. A tap on the PILL brings the input back.
-        // When OPEN, the handle is the bar ABOVE the thread, so tapping it with the
-        // keyboard up dismisses it and returns to the pre-focus resting state.
-        // When COLLAPSED the handle's hit zone OVERLAPS the composer, so a tap there
-        // is just "focus to type" — it must only focus the input, never dismiss or
-        // collapse (the native focus already raised the keyboard, and the tap pierces
-        // through to the input). Tapping OUTSIDE the panel is what drops the keyboard.
+        // When OPEN, the grabber acts as a disclosure toggle: tap once to close.
+        // When COLLAPSED, tap opens the thread or its loader; thread-less chats focus
+        // the composer because there is nothing above the input to reveal.
         onTap: () => {
             if (pilled) {
                 openFromPill();
                 return;
             }
             if (sheetOpen) {
-                const composerFocused = typeof document !== "undefined" &&
-                    document.activeElement === inputRef.current;
-                // Keyboard up → drop it and return to the pre-focus resting state (an
-                // already-open sheet stays open; an auto-opened one re-collapses).
-                // Keyboard down → the grabber is just the open chat's top bar; a tap
-                // there does nothing (collapse is a pull-down / Escape / scrim tap).
-                if (composerFocused)
-                    dismissKeyboardToPriorState();
+                collapse();
                 return;
             }
-            inputRef.current?.focus();
+            openFromGrabber();
         },
         // A deliberate (slow) drag: REST exactly where released instead of snapping
         // to a detent — drag the sheet to any size and it stays.
         onSettleFree: (direction) => {
             draggingRef.current = false;
+            setDragPreviewMounted(false);
             if (pilled) {
                 // From the pill: a slow drag under the halfway-open mark (openProgress
                 // < 0.5) springs back to the capsule; past it we commit to LEAVING the
@@ -2007,15 +2071,21 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 // Leaving the pill: fall through to the magnetism below, which sets the
                 // mode (input / half / full) from where the drag was released — so pill →
                 // input → chat reads as one continuum.
-                if (hasThread)
+                if (hasRevealableThread)
                     focusThreadRef.current = true;
             }
             // From the collapsed input, a downward drag has nothing to "size" below
-            // it — collapse straight to the pill (matches the flick-down path).
+            // it. Require the input→pill morph to cross halfway before committing;
+            // small thumb drift should spring back to the input, not collapse the chat.
             if (!sheetOpen && direction === "down") {
-                setMode("pill");
-                inputRef.current?.blur();
-                detentHaptic();
+                if (openProgress.get() <= 0.5) {
+                    setMode("pill");
+                    inputRef.current?.blur();
+                    detentHaptic();
+                }
+                else {
+                    settleDrag();
+                }
                 return;
             }
             const h = Math.max(0, Math.min(threadHeight.get(), panelMaxH));
@@ -2025,7 +2095,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             // between them keep the free-drag rest height. goToDetent commits the
             // honest flags so data-detent + the maximize header match the height.
             if (h <= SHEET_DETENT_MAGNET) {
-                // Near the bottom → collapse to the input peek.
+                // Near the bottom → collapse to the input bar.
                 closeSheet();
                 return;
             }
@@ -2050,12 +2120,11 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // Full-bleed (maximized) removes the side inset so the chat is edge-to-edge.
         fullBleed ? "px-0" : "px-3 sm:px-4"), 
         // Lift the whole overlay above the on-screen keyboard (`bottom`); padding
-        // below the composer is conditional: when the composer is FOCUSED (keyboard
-        // up), only a small gap (0.75rem, matching the side margin) sits between the
-        // composer and the keyboard — the home-gesture clearance isn't needed
-        // because the keyboard covers it. At rest, clear the home-gesture zone (max
-        // safe-area / android inset) plus a hair, keeping the chat low without
-        // touching that zone.
+        // below the composer is conditional on an actual keyboard lift, not focus
+        // alone. With the keyboard up, only a small gap (0.75rem, matching the side
+        // margin) sits between composer and keyboard. At rest, clear the
+        // home-gesture zone (max safe-area / android inset) plus a hair, keeping the
+        // chat low without touching that zone.
         style: {
             zIndex: Z_SHELL_OVERLAY,
             bottom: effectiveKeyboardInset,
@@ -2066,7 +2135,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
             // chat lifted off the gesture zone as before.
             paddingBottom: fullBleed
                 ? 0
-                : composerFocused
+                : keyboardLiftActive
                     ? "0.75rem"
                     : "calc(var(--eliza-mobile-nav-offset, 0px) + max(var(--safe-area-bottom, 0px), var(--android-gesture-inset-bottom, 0px)) + 0.25rem)",
         }, "data-testid": "continuous-chat-overlay", "data-open": sheetOpen ? "true" : undefined, children: [_jsx(motion.div, { "aria-hidden": "true", "data-testid": "chat-sheet-backdrop", "data-active": sheetOpen ? "true" : "false", onClick: sheetOpen
@@ -2090,12 +2159,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                     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", "  ", 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 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");
-                            focusThreadRef.current = true;
-                        }, onClose: collapse, binding: pullBinding, glow: listening || responding, opacity: grabberOpacity, pilled: pilled })) : null, _jsxs(motion.fieldset, { ref: panelRef, "aria-label": "Chat composer", "data-testid": "chat-sheet", "data-variant": sheetOpen ? "open" : "closed", "data-detent": pilled
+                                    : "…"] })) : (_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: openFromGrabber, onClose: collapse, binding: pullBinding, glow: listening || responding, opacity: grabberOpacity, pilled: pilled })) : null, _jsxs(motion.fieldset, { ref: panelRef, "aria-label": "Chat composer", "data-testid": "chat-sheet", "data-variant": sheetOpen ? "open" : "closed", "data-detent": pilled
                             ? "pill"
                             : !sheetOpen
                                 ? "collapsed"
@@ -2105,7 +2169,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                         : "half"
                                     : expanded
                                         ? "full"
-                                        : "half", "data-maximized": fullBleed ? "true" : undefined, "data-revealed": sheetOpen ? "true" : "false", "data-chat-state": chatState, "data-header-shown": headerVisible ? "true" : "false", 
+                                        : "half", "data-maximized": fullBleed ? "true" : undefined, "data-revealed": threadPresented ? "true" : "false", "data-chat-state": chatState, "data-header-shown": headerVisible ? "true" : "false", 
                         // ONE persistent element across pill ↔ input ↔ chat (never remounts —
                         // that pop was the core jank). It's a transparent scale/position
                         // container; the liquid glass lives in an inner layer faded by
@@ -2152,19 +2216,17 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                     opacity: glassOpacity,
                                     pointerEvents: pilled ? "none" : "auto",
                                     borderRadius: fullBleed ? 0 : panelRadius,
-                                }, 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
-                                    // interactivity + the a11y tree so the faded/collapsed header
-                                    // can't be clicked or read.
+                                }, 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" }), threadPresented ? (_jsxs(motion.div
+                                    // Mounted while the sheet is open, or while an upward drag is
+                                    // previewing the sheet before release. It can FADE + LERP its
+                                    // space as the live height crosses the header threshold.
+                                    // `headerVisible` gates interactivity + the a11y tree.
                                     , { 
-                                        // 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
-                                        // interactivity + the a11y tree so the faded/collapsed header
-                                        // can't be clicked or read.
-                                        inert: !headerVisible || undefined, style: {
+                                        // Mounted while the sheet is open, or while an upward drag is
+                                        // previewing the sheet before release. It can FADE + LERP its
+                                        // space as the live height crosses the header threshold.
+                                        // `headerVisible` gates interactivity + the a11y tree.
+                                        inert: !sheetOpen || !headerVisible || undefined, style: {
                                             // Full-bleed is always fully open: show the header at full
                                             // opacity and UNCAP its height. The reveal lerp tops out at
                                             // 100px, but the safe-area top padding (status-bar height +
@@ -2185,11 +2247,11 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                                 : 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" }), 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", 
+                                                            : "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, threadPresented ? (_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.
-                                        sheetOpen &&
+                                        threadPresented &&
                                             "[mask-image:linear-gradient(to_bottom,transparent_0,#000_34px)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0,#000_34px)]"), 
                                         // Flex-basis IS the motion value (px string) — set 1:1 during a drag,
                                         // spring-animated to a detent on release; no `animate`/`transition`,
@@ -2201,12 +2263,12 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                         style: {
                                             flexBasis: threadFlexBasis,
                                             paddingTop: threadGrabberClearance,
-                                        }, 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) => {
+                                        }, children: _jsxs(motion.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();
                                                 }
-                                            }, ...(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
+                                            }, ...(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", style: { opacity: threadContentOpacity }, 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).
                                                                 (() => {
@@ -2257,7 +2319,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                         // edge-to-edge), so the composer carries the home-gesture
                                         // clearance itself — except while the keyboard is up, which
                                         // already covers that zone.
-                                        style: fullBleed && !composerFocused
+                                        style: fullBleed && !keyboardLiftActive
                                             ? {
                                                 paddingBottom: "calc(0.5rem + max(var(--safe-area-bottom, 0px), var(--android-gesture-inset-bottom, 0px)))",
                                             }
@@ -2268,7 +2330,6 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                                     if (e.target.value.trim().length > 0)
                                                         expand();
                                                 }, onFocus: () => {
-                                                    setComposerFocused(true);
                                                     // A pill-open focus only raises the keyboard; it must not
                                                     // expand a history thread (see suppressExpandOnFocusRef).
                                                     if (suppressExpandOnFocusRef.current) {
@@ -2277,7 +2338,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                                     else {
                                                         expand();
                                                     }
-                                                }, onBlur: () => setComposerFocused(false), onPaste: (e) => {
+                                                }, onPaste: (e) => {
                                                     // 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