ompchamber 1.1.0 → 1.2.0

package/src/client/components/workspace/btw-panel/index.tsx

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The side-question form — what the chat composer becomes while BTW mode is on.
+ *
+ * Stacked cards, top to bottom: the topic's turns (only once there is something
+ * to show, or an error to explain), the ask card (a question of its own), and
+ * the side session's composer (follow-ups, attachments, model chip). Nothing it
+ * produces enters the chat transcript — that is the point of a side question —
+ * and promotion is the one explicit action that moves an answer into the chat,
+ * as a session branched from it.
+ */
+
+import { useState } from 'preact/hooks';
+import type { BtwMode } from '@/client/hooks/chat/btw/mode';
+import { BtwAskCard } from '@/client/components/workspace/btw-panel/AskCard';
+import { BtwMessages } from '@/client/components/workspace/btw-panel/Messages';
+import { BtwComposer } from '@/client/components/workspace/btw-panel/Composer';
+import { btwImagesFrom, readBtwAttachments, type BtwAttachment } from '@/client/components/workspace/btw-panel/attachments';
+
+export interface BtwFormProps {
+  mode: BtwMode;
+  /** The chat's own model, shown until the topic reports the one it ran on. */
+  modelName?: string;
+  provider?: string;
+}
+
+export function BtwForm({ mode, modelName, provider }: BtwFormProps) {
+  const [attachments, setAttachments] = useState<BtwAttachment[]>([]);
+  const lastTurn = mode.activeTopic?.turns[mode.activeTopic.turns.length - 1];
+  // `busy` is the command in flight (a promote POST, say): promoting again from
+  // the same click burst would be a second request for work already running.
+  const canPromote = Boolean(mode.activeTopic) && !mode.runningTopicId && !mode.busy && lastTurn?.status === 'complete';
+  const showTurns = (mode.activeTopic?.turns.length ?? 0) > 0 || Boolean(mode.error);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {showTurns && (
+        <div className="bg-paper border border-ink/15 rounded-2xl shadow-xl flex flex-col max-h-[45vh] overflow-hidden">
+          <BtwMessages topic={mode.activeTopic} liveAnswer={mode.liveAnswer} error={mode.error} />
+        </div>
+      )}
+
+      <BtwAskCard
+        value={mode.askDraft}
+        onChange={mode.setAskDraft}
+        onSubmit={mode.submitAsk}
+        onNewQuestion={mode.resetQuestion}
+        onClose={mode.exit}
+        running={Boolean(mode.runningTopicId)}
+        topics={mode.topics}
+        activeTopicId={mode.activeTopic?.id ?? null}
+        onSelectTopic={mode.selectTopic}
+        onDeleteTopic={mode.removeTopic}
+        canPromote={canPromote}
+        onPromote={() => void mode.promote()}
+      />
+
+      <BtwComposer
+        value={mode.followUpDraft}
+        onChange={mode.setFollowUpDraft}
+        onSubmit={() => {
+          // Hand the images over and clear them: leaving them staged would
+          // re-send the same picture with every later follow-up.
+          mode.submitFollowUp(mode.followUpDraft, btwImagesFrom(attachments));
+          setAttachments([]);
+        }}
+        onStop={mode.abort}
+        running={Boolean(mode.runningTopicId)}
+        modelLabel={mode.activeTopic?.model?.name ?? modelName}
+        provider={mode.activeTopic?.model?.provider ?? provider}
+        attachments={attachments}
+        onFilesSelected={(files) => {
+          void readBtwAttachments(files).then((next) => setAttachments((prev) => [...prev, ...next]));
+        }}
+        onRemoveAttachment={(id) => setAttachments((prev) => prev.filter((attachment) => attachment.id !== id))}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -1,5 +1,7 @@
 import type { Dispatch, SetStateAction } from 'preact/compat';
 import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
+import { BtwForm } from '@/client/components/workspace/btw-panel/index';
+import { useBtwMode } from '@/client/hooks/chat/btw/mode';
 import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
 import { QueueList } from '@/client/components/workspace/chat-timeline/QueueList';
 import type { Attachment, QueuedMessage } from '@/shared/types';
@@ -7,6 +9,8 @@ import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 
 interface ComposerDockProps {
   isMobile: boolean;
+  /** Chamber session the side-question panel scopes to. */
+  sessionId: string | null;
   isGenerating: boolean;
   modelName?: string;
   generatingVerb: string;
@@ -45,6 +49,7 @@ interface ComposerDockProps {
  */
 export function ComposerDock({
   isMobile,
+  sessionId,
   isGenerating,
   modelName,
   generatingVerb,
@@ -75,12 +80,19 @@ export function ComposerDock({
   sessionThinkingLevel,
   variant,
 }: ComposerDockProps) {
+  // Side questions take over the composer entirely: the chat's own input is
+  // hidden while the form is open, so a stray Enter cannot send to the wrong
+  // conversation.
+  const btw = useBtwMode(sessionId, appSettings);
+
   return (
     <div
       className={`bg-transparent border-t-0 flex-shrink-0 space-y-2 ${isMobile ? 'px-3 pt-1' : 'p-4 pt-1'}`}
       style={isMobile ? { paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom, 0px))' } : undefined}
     >
-      <div className="mx-auto w-full max-w-[970px]">
+      {/* `relative` keeps the queue/indicator stack anchored above the input
+          while the side-question form takes the composer's place. */}
+      <div className="relative mx-auto w-full max-w-[970px]">
         {isGenerating && (
           <GeneratingIndicator
             modelName={modelName}
@@ -105,26 +117,30 @@ export function ComposerDock({
           })}
           isSteering
         />
-        <ChatInput
-          value={inputValue}
-          onChange={setInputValue}
-          rootPath={rootPath}
-          attachments={attachments}
-          onAttachmentsChange={setAttachments}
-          onSend={onSend}
-          isGenerating={isGenerating}
-          onStop={onStop}
-          appSettings={appSettings}
-          onThinkingLevelChange={onThinkingLevelChange}
-          onModelChange={onModelChange}
-          accessMode={accessMode}
-          onAccessModeChange={onAccessModeChange}
-          composerModelRef={composerModelRef}
-          deferredComposerPickRef={deferredComposerPickRef}
-          sessionModel={sessionModel}
-          sessionThinkingLevel={sessionThinkingLevel}
-          variant={variant}
-        />
+        {btw.open ? (
+          <BtwForm mode={btw} modelName={modelName} provider={provider} />
+        ) : (
+          <ChatInput
+            value={inputValue}
+            onChange={setInputValue}
+            rootPath={rootPath}
+            attachments={attachments}
+            onAttachmentsChange={setAttachments}
+            onSend={onSend}
+            isGenerating={isGenerating}
+            onStop={onStop}
+            appSettings={appSettings}
+            onThinkingLevelChange={onThinkingLevelChange}
+            onModelChange={onModelChange}
+            accessMode={accessMode}
+            onAccessModeChange={onAccessModeChange}
+            composerModelRef={composerModelRef}
+            deferredComposerPickRef={deferredComposerPickRef}
+            sessionModel={sessionModel}
+            sessionThinkingLevel={sessionThinkingLevel}
+            variant={variant}
+          />
+        )}
       </div>
     </div>
   );

package/src/client/components/workspace/chat-timeline/MinimapShortcuts.tsx

@@ -1,13 +1,40 @@
 import { useState } from 'preact/hooks';
+import type { UserTurnRef } from '@/shared/types';
+import { formatMessageStamp } from '@/shared/lib/format/time';
 
 interface MinimapShortcutsProps {
-  userMessages: any[];
-  onScrollTo: (id: string) => void;
+  /** Every user turn of the session, oldest first — not just the mounted
+   *  window, so the rail lists the whole conversation while the timeline holds
+   *  one page of it. */
+  turns: UserTurnRef[];
+  /** A jump is paging history to reach the clicked turn. */
+  jumping: boolean;
+  onJumpTurn: (turn: UserTurnRef) => void;
 }
 
-export function MinimapShortcuts({ userMessages, onScrollTo }: MinimapShortcutsProps) {
+/** Row pitch the rail keeps while it fits: a 1px line with 3px of breathing
+ *  room on each side — the spacing the hover wave was drawn around. */
+const ROW_PITCH_MAX = '7px';
+/** Rows never collapse below this, so a tick stays clickable. */
+const ROW_PITCH_MIN = '2px';
+/** Target ceiling for the rail as a share of the viewport: a session long
+ *  enough to overflow it tightens its rows rather than growing past the
+ *  timeline. Past the minimum pitch the class-level `max-h` takes over, so a
+ *  session with hundreds of turns still keeps every tick on screen. */
+const RAIL_TARGET_HEIGHT = '60vh';
+
+/**
+ * Jump rail: one tick per user turn of the FULL history. A turn outside the
+ * mounted window is still clickable — the click pages older windows in until
+ * that row exists, then centers it.
+ */
+export function MinimapShortcuts({ turns, jumping, onJumpTurn }: MinimapShortcutsProps) {
   const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
-  if (userMessages.length === 0) return null;
+  if (turns.length === 0) return null;
+
+  // Rows are laid out in normal flow (never absolutely positioned), so their
+  // hit boxes cannot overlap and each tick keeps its own hover.
+  const rowPitch = `clamp(${ROW_PITCH_MIN}, calc(${RAIL_TARGET_HEIGHT} / ${turns.length}), ${ROW_PITCH_MAX})`;
 
   const lineWidth = (idx: number): string => {
     if (hoveredIdx === null) return 'w-3';
@@ -19,25 +46,35 @@ export function MinimapShortcuts({ userMessages, onScrollTo }: MinimapShortcutsP
 
   return (
     <div
-      className="absolute right-0.5 top-1/2 -translate-y-1/2 z-20 flex flex-col items-center py-4 w-6"
+      className={`absolute right-0.5 top-1/2 -translate-y-1/2 z-20 flex flex-col items-center py-4 w-6 max-h-[min(60vh,100%)] ${jumping ? 'animate-pulse' : ''}`}
+      role="navigation"
+      aria-label={`Jump to your message (${turns.length} turns)`}
       onMouseLeave={() => setHoveredIdx(null)}
     >
-      {userMessages.map((msg, idx) => {
+      {turns.map((turn, idx) => {
         const isHovered = hoveredIdx === idx;
         return (
           <div
-            key={`minimap-${msg.id}`}
-            className="relative flex items-center justify-center w-full py-[3px] cursor-pointer"
+            key={`minimap-${turn.id}`}
+            className="relative flex min-h-0 items-center justify-center w-full cursor-pointer"
+            style={{ height: rowPitch }}
             onMouseEnter={() => setHoveredIdx(idx)}
-            onClick={() => onScrollTo(msg.id)}
+            onClick={() => onJumpTurn(turn)}
           >
             <button
+              type="button"
               className={`block h-px rounded-full transition-all duration-200 ease-out ${lineWidth(idx)} ${isHovered ? 'bg-ink h-[2px]' : 'bg-ink/25'}`}
               aria-label={`Jump to your message #${idx + 1}`}
             />
-            <div className={`absolute right-full mr-3 top-1/2 transform -translate-y-1/2 w-64 p-3 bg-ink text-canvas text-xs rounded-md shadow-lg pointer-events-none transition-opacity duration-200 z-30 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
-              <div className="line-clamp-3 whitespace-pre-wrap leading-relaxed">{msg.content}</div>
-              <div className="absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-ink rotate-45"></div>
+            <div
+              className={`absolute right-full mr-3 top-1/2 -translate-y-1/2 w-64 p-3 bg-ink text-canvas text-xs rounded-md shadow-lg pointer-events-none transition-opacity duration-200 z-30 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
+            >
+              <div className="flex items-center justify-between gap-2 pb-1.5 mb-1.5 border-b border-canvas/20 font-mono text-[10px] uppercase tracking-wider text-canvas/60">
+                <span>#{idx + 1} of {turns.length}</span>
+                {formatMessageStamp(turn) && <span>{formatMessageStamp(turn)}</span>}
+              </div>
+              <div className="line-clamp-3 whitespace-pre-wrap leading-relaxed">{turn.preview.trim() || '(no text)'}</div>
+              <div className="absolute top-1/2 -right-1 -translate-y-1/2 w-2 h-2 bg-ink rotate-45" />
             </div>
           </div>
         );

package/src/client/components/workspace/chat-timeline/TimelineBody.tsx

@@ -3,12 +3,15 @@ import { ArrowDown } from 'lucide-preact';
 import { MessageList } from '@/client/components/workspace/chat-timeline/MessageList';
 import { MinimapShortcuts } from '@/client/components/workspace/chat-timeline/MinimapShortcuts';
 import { LoadingOlderIndicator } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
-import type { ChatMessageData } from '@/shared/types';
+import type { ChatMessageData, UserTurnRef } from '@/shared/types';
 
 interface TimelineBodyProps {
   isMobile: boolean;
-  userMessages: ChatMessageData[];
-  onScrollTo: (id: string) => void;
+  /** Every user turn of the session (full history), for the jump rail. */
+  userTurns: UserTurnRef[];
+  /** A jump is paging history to reach the clicked turn. */
+  jumpingTurn: boolean;
+  onJumpTurn: (turn: UserTurnRef) => void;
   scrollRef: RefObject<HTMLDivElement>;
   contentRef: (node: HTMLDivElement | null) => void;
   handleScroll: () => void;
@@ -38,8 +41,9 @@ interface TimelineBodyProps {
  */
 export function TimelineBody({
   isMobile,
-  userMessages,
-  onScrollTo,
+  userTurns,
+  jumpingTurn,
+  onJumpTurn,
   scrollRef,
   contentRef,
   handleScroll,
@@ -66,7 +70,7 @@ export function TimelineBody({
       {/* Minimap Shortcuts — desktop only: the rail needs side room a
           phone does not have. */}
       {!isMobile && (
-        <MinimapShortcuts userMessages={userMessages} onScrollTo={onScrollTo} />
+        <MinimapShortcuts turns={userTurns} jumping={jumpingTurn} onJumpTurn={onJumpTurn} />
       )}
 
       {/* Timeline Body */}

package/src/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'preact/hooks';
 import type { ChangeEvent } from 'preact/compat';
 import { File as FileIcon, Paperclip, X } from 'lucide-preact';
 import type { Attachment } from '@/shared/types';
+import { attachmentName } from '@/shared/lib/chat/attachments';
 
 interface AttachmentToolbarProps {
   attachments: Attachment[];
@@ -39,7 +40,7 @@ export function AttachmentToolbar({ attachments, onFilesSelected, onRemove }: At
                 <FileIcon size={12} />
               </div>
             )}
-            <span className="truncate max-w-[120px] font-mono text-[10px] text-ink/80">{att.file.name}</span>
+            <span className="truncate max-w-[120px] font-mono text-[10px] text-ink/80">{attachmentName(att)}</span>
             <button
               onClick={() => onRemove(att.id)}
               className="absolute right-0.5 top-1/2 -translate-y-1/2 p-0.5 text-ink/40 hover:text-error hover:bg-error/10 rounded transition-colors"

package/src/client/components/workspace/chat-timeline/chat-input/DropOverlay.tsx

@@ -0,0 +1,17 @@
+import { UploadCloud } from 'lucide-preact';
+
+/**
+ * Covers the composer while a file drag hovers it. `pointer-events-none` is
+ * load-bearing: the overlay sits above the card, so without it the drop would
+ * land on the overlay and never reach the card's own handler.
+ */
+export function DropOverlay({ visible }: { visible: boolean }) {
+  if (!visible) return null;
+  return (
+    <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-ink/40 bg-canvas/90 text-ink">
+      <UploadCloud size={18} className="text-ink/60" />
+      <span className="text-[11px] font-semibold">Drop files to attach</span>
+      <span className="text-[10px] text-ink/50">Folders are expanded into their files</span>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { ClipboardEvent, SetStateAction } from 'preact/compat';
+import { AlertTriangle, X } from 'lucide-preact';
 import type { AIModelOption, Attachment, ModelEntry } from '@/shared/types';
 import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 import { ComposerToolbar } from '@/client/components/workspace/chat-timeline/chat-input/Toolbar';
@@ -9,6 +10,9 @@ import { selectableThinkingLevels } from '@/shared/lib/models/thinking-levels';
 import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
 import { resolveThinkingLevel, selectionFor } from '@/client/components/workspace/chat-timeline/chat-input/selection';
 import { NO_PENDING_PICK } from '@/client/hooks/chat/timeline/deferred-model';
+import { primeFileReads } from '@/client/hooks/chat/composer/file-reads';
+import { useComposerPipeline } from '@/client/hooks/chat/composer/pipeline';
+import { DropOverlay } from '@/client/components/workspace/chat-timeline/chat-input/DropOverlay';
 
 export function ChatInput({ 
   value, 
@@ -230,61 +234,61 @@ export function ChatInput({
     if (clipboard.files.length > 0) {
       e.preventDefault();
       const files = Array.from(clipboard.files);
-      addFiles(files);
+      // Same rule as a drop: the clipboard's file permission is released when
+      // this handler returns, so the reads are started here, in its tick.
+      acceptFiles(files, false, [], primeFileReads(files));
     }
   };
 
-  const addFiles = (files: File[]) => {
-    const newAttachments = files.map(file => ({
-      id: Math.random().toString(36).substring(7),
-      file,
-      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
-    }));
-    setAttachments(prev => [...prev, ...newAttachments]);
-    // Read image payloads as base64 so the omp model can receive them.
-    for (const att of newAttachments) {
-      if (!att.file.type.startsWith('image/')) continue;
-      const reader = new FileReader();
-      reader.onload = () => {
-        const result = reader.result as string;
-        const base64 = result.split(',')[1];
-        if (!base64) return;
-        setAttachments(prev => prev.map(a => (a.id === att.id ? { ...a, dataBase64: base64 } : a)));
-      };
-      reader.readAsDataURL(att.file);
-    }
-  };
-
-  const removeAttachment = (id: string) => {
-    setAttachments(prev => {
-      const att = prev.find(p => p.id === id);
-      if (att && att.preview) URL.revokeObjectURL(att.preview);
-      return prev.filter(p => p.id !== id);
-    });
-  };
-
-  const handleSendClick = (options?: { steering?: boolean }) => {
-    if (!value.trim() && attachments.length === 0) return;
-    onSend(attachments, options);
-    setAttachments([]);
-  };
+  // Attach-and-send pipeline: drop handling, the inline notice, and the send
+  // guard all live in the hook, because a drop registers files before this
+  // component re-renders and the send decision cannot read a stale prop.
+  const { notice, dismissNotice, isDragging, dropProps, acceptFiles, removeAttachment, submit } = useComposerPipeline({
+    attachments,
+    setAttachments,
+    value,
+    disabled,
+    rootPath,
+    onSend,
+  });
 
   const isMobile = variant === 'mobile';
 
   return (
-    <div className={`relative border border-ink/20 rounded-md bg-paper focus-within:border-ink transition-colors flex flex-col shadow-sm ${className}`}>
-      
+    <div
+      className={`relative border rounded-md bg-paper transition-colors flex flex-col shadow-sm ${
+        isDragging ? 'border-ink/40' : 'border-ink/20 focus-within:border-ink'
+      } ${className}`}
+      {...dropProps}
+    >
+      <DropOverlay visible={isDragging} />
+
       <AttachmentToolbar
         attachments={attachments}
-        onFilesSelected={addFiles}
+        onFilesSelected={(files) => acceptFiles(files)}
         onRemove={removeAttachment}
       />
 
+      {notice && (
+        <div className="flex items-start gap-1.5 border-b border-error/20 bg-error/5 px-3 py-1.5 text-[11px] text-error">
+          <AlertTriangle size={11} className="mt-0.5 shrink-0" />
+          <span className="min-w-0 flex-1 break-words">{notice}</span>
+          <button
+            type="button"
+            onClick={() => dismissNotice()}
+            className="shrink-0 text-error/60 hover:text-error transition-colors"
+            title="Dismiss"
+          >
+            <X size={11} />
+          </button>
+        </div>
+      )}
+
       {/* Textarea */}
       <ComposerTextarea
         value={value}
         onChange={onChange}
-        onSend={handleSendClick}
+        onSend={submit}
         disabled={disabled}
         appSettings={appSettings}
         rootPath={rootPath}
@@ -310,7 +314,7 @@ export function ChatInput({
         onThinkingLevelChange={onThinkingLevelChange}
         isGenerating={isGenerating}
         onStop={onStop}
-        onSend={() => handleSendClick()}
+        onSend={() => submit()}
         sendDisabled={disabled || (!value.trim() && attachments.length === 0)}
         accessMode={accessMode}
         onSelectAccess={onAccessModeChange}

package/src/client/components/workspace/chat-timeline/index.tsx

@@ -3,6 +3,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { ExtensionDialog } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
 import { AskFramesContext, splitAskFrames, type AskFramesHandle } from '@/client/hooks/chat/timeline/ask-frames';
 import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import type { UserTurnRef } from '@/shared/types/chat';
 import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
 import { EmptyWorkspacePrompt } from '@/client/components/workspace/chat-timeline/EmptyWorkspacePrompt';
 import { SessionSkeleton } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
@@ -47,6 +48,9 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     hasMore,
     loadingOlder, loadOlderError, sessionLoading,
     loadOlder,
+    userTurns,
+    jumpingTurn,
+    jumpToUserTurn,
     generatingVerb,
     messageQueue,
     removeMessage,
@@ -127,18 +131,14 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
 
   useSessionTitle(sessionId, sessionData?.title, onSessionTitle);
 
-  const handleScrollTo = useCallback((id: string) => {
-    const el = document.getElementById(id);
-    if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  }, []);
+  const handleJumpTurn = useCallback((turn: UserTurnRef) => {
+    void jumpToUserTurn(turn.id, turn.index);
+  }, [jumpToUserTurn]);
 
   const handleNewChat = useCallback((content: string) => setNewChatInitialContent(content), []);
 
   const modelNames = useModelNames();
   const providerNames = useProviderNames();
-  const userMessages = useMemo(() => localMessages.filter(m => m.role === 'user'), [localMessages]);
   const sessionProvider = typeof sessionData?.model === 'object' ? sessionData.model.provider : undefined;
   const sessionModelName = typeof sessionData?.model === 'object'
     ? (modelNames[sessionData.model.modelId] ?? sessionData.model.modelId)
@@ -210,8 +210,9 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
               ) : (
                 <TimelineBody
                   isMobile={isMobile}
-                  userMessages={userMessages}
-                  onScrollTo={handleScrollTo}
+                  userTurns={userTurns}
+                  jumpingTurn={jumpingTurn}
+                  onJumpTurn={handleJumpTurn}
                   scrollRef={scrollRef}
                   contentRef={contentRef}
                   handleScroll={handleScroll}
@@ -240,6 +241,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
             {!activeSubagent && (
               <ComposerDock
                 isMobile={isMobile}
+                sessionId={sessionId}
                 isGenerating={isGenerating}
                 modelName={sessionModelName}
                 generatingVerb={generatingVerb}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Read.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
-import { FileCode, FileText, Folder, FolderOpen, Info, Loader2 } from 'lucide-preact';
+import { FileCode, FileImage, FileText, Folder, FolderOpen, Info, Loader2 } from 'lucide-preact';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import { parseDirListing, parseNumberedCode } from '@/shared/lib/code/parser';
+import { getImageMimeType } from '@/shared/lib/fs/file-kind';
+import { buildFsRawUrl } from '@/shared/lib/fs/paths';
 import type { ToolCallData } from '@/shared/types/chat';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 import { extractLineMeta } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/read-line-meta';
@@ -23,9 +25,13 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
   const inputPath = getToolInputPath(tool?.input);
   const filePath = targetFilePath || inputPath || tool?.target || '';
   const cleanFetchPath = filePath.split('?')[0].split('#')[0].replace(/:\d+(?:-\d+)?$/, '');
+  // An image read has no text to show: the panel paints the picture instead of
+  // the code surface, and `/api/fs/raw` is what carries its bytes.
+  const isImage = getImageMimeType(cleanFetchPath) !== null;
+  const imageUrl = isImage ? buildFsRawUrl({ path: cleanFetchPath }) : null;
 
   useEffect(() => {
-    if (cleanFetchPath && !output && lazyContent === null && !loadingFile) {
+    if (cleanFetchPath && !isImage && !output && lazyContent === null && !loadingFile) {
       setLoadingFile(true);
       fetch(`/api/fs/read?path=${encodeURIComponent(cleanFetchPath)}`)
         .then((res) => res.json())
@@ -39,7 +45,7 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
           setLoadingFile(false);
         });
     }
-  }, [cleanFetchPath, output, lazyContent, loadingFile]);
+  }, [cleanFetchPath, output, lazyContent, loadingFile, isImage]);
 
   const details = (tool?.details ?? {}) as Record<string, any>;
   const rawContent =
@@ -107,6 +113,7 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
 
   const isDir = dirInfo.isDirectory;
   const lang = getLanguageFromPath(filePath);
+  const kindLabel = isDir ? 'Directory' : isImage ? 'Image' : lang;
 
   const visibleEntries = dirInfo.entries.slice(-MAX_OUTPUT_LINES);
   const skippedEntries = dirInfo.entries.length - visibleEntries.length;
@@ -126,17 +133,17 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
       <div className="flex items-center justify-between rounded-lg border border-ink/8 bg-paper px-3 py-2">
         <div className="flex min-w-0 items-center gap-2">
           <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-ink/5 text-ink/70">
-            {isDir ? <FolderOpen size={12} /> : <FileCode size={12} />}
+            {isDir ? <FolderOpen size={12} /> : isImage ? <FileImage size={12} /> : <FileCode size={12} />}
           </span>
           <span className="truncate font-mono text-[11px] font-medium text-ink">
             {filePath || (isDir ? 'Directory Listing' : 'File Content')}
           </span>
           <span className="rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/50">
-            {isDir ? 'Directory' : lang}
+            {kindLabel}
           </span>
         </div>
 
-        {rawContent && (
+        {rawContent && !isImage && (
           <CopyButton
             text={parsedCode.hasLineNumbers ? parsedCode.cleanCode : (rawContent || '')}
             className="flex shrink-0 cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[10.5px] text-ink/50 transition-colors hover:bg-ink/5 hover:text-ink"
@@ -146,7 +153,18 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
         )}
       </div>
 
-      {loadingFile ? (
+      {isImage && imageUrl ? (
+        /* An image read has no code to show: paint the bytes. */
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex max-h-80 items-center justify-center overflow-auto bg-canvas/60 p-3">
+            <img
+              src={imageUrl}
+              alt={cleanFetchPath}
+              className="max-h-72 max-w-full object-contain"
+            />
+          </div>
+        </div>
+      ) : loadingFile ? (
         <div className="flex items-center gap-2 rounded-lg border border-ink/8 bg-paper px-3 py-3 font-mono text-[11px] text-ink/50">
           <Loader2 size={12} className="animate-spin" />
           <span>Loading file content...</span>