ompchamber 1.0.0 → 1.2.0

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/SubagentView.tsx

@@ -8,6 +8,7 @@ import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter
 import { useSubagentTranscript } from '@/client/hooks/chat/subagent';
 import { useModelNames } from '@/client/hooks/models/use-model-names';
 import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { subagentHeaderTitle } from '@/shared/lib/omp/subagent/label';
 import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
@@ -62,6 +63,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
 
   const progress = status?.progress ?? subagent.progress;
   const modelName = progress?.resolvedModel ?? subagent.agent;
+  const headerTitle = subagentHeaderTitle(status ?? subagent);
   const compactTokens = formatCompactTokens(progress?.tokens);
   const meta = compactTokens ? `${compactTokens} tok` : '';
   const rawTask = status?.task ?? status?.assignment ?? status?.description
@@ -85,7 +87,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 min-w-0">
             <span className="font-mono text-[12px] font-semibold text-ink truncate">
-              {status?.agent ?? subagent.agent}
+              {headerTitle}
             </span>
             <span className="shrink-0 rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/50">
               {STATUS_LABEL[effectiveStatus]}

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';
@@ -8,6 +9,10 @@ import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/c
 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, 
@@ -31,6 +36,12 @@ export function ChatInput({
   /** Written on every model/thinking pick so the send path can snapshot the
    *  selection into queued items without lifting ChatInput state. */
   composerModelRef,
+  /** A pick the user made while a turn was streaming, still waiting for the
+   *  next prompt. While set, the session's own model must NOT be adopted over
+   *  it — the composer shows what the next prompt will actually run. Omitted
+   *  by composers that never stream (the New Chat modal), where there is
+   *  nothing to defer and adoption must behave as before. */
+  deferredComposerPickRef = NO_PENDING_PICK,
 }: {
   value: string;
   onChange: (v: string) => void;
@@ -58,6 +69,7 @@ export function ChatInput({
    */
   variant?: 'desktop' | 'mobile';
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef?: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
 }) {
   const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
 
@@ -102,12 +114,18 @@ export function ChatInput({
   // this effect re-runs right after a spawn (sessionModel changes while the
   // session's own thinking_level_change entry is not readable yet), and any
   // concrete fallback here claims a level the run never used.
+  //
+  // A pick still waiting for the next prompt wins: the session's model is what
+  // the RUNNING turn uses, and adopting it would erase the user's choice from
+  // the composer even though it is what the next prompt will run with.
   useEffect(() => {
     if (!sessionModel?.provider || !sessionModel.modelId) return;
+    if (deferredComposerPickRef.current) return;
     let active = true;
     fetchModelsData()
       .then((data) => {
         if (!active || !sessionModel) return;
+        if (deferredComposerPickRef.current) return;
         const match = (data.modelList || []).find(
           (m) => m.id === sessionModel.modelId && m.provider === sessionModel.provider
         );
@@ -119,18 +137,21 @@ export function ChatInput({
     return () => {
       active = false;
     };
-  }, [sessionModel?.provider, sessionModel?.modelId]);
+  }, [sessionModel?.provider, sessionModel?.modelId, deferredComposerPickRef]);
 
   // Adopt the active session's last-used thinking level. Runs after the model
   // sync effect above so it overrides the catalog default for this session.
+  // Same rule as the model: a pick waiting for the next prompt is not
+  // overridden by the level the running turn recorded.
   useEffect(() => {
     if (!sessionThinkingLevel) return;
+    if (deferredComposerPickRef.current?.thinkingLevel) return;
     setSelectedModel(prev => {
       if (!prev) return prev;
       const level = resolveThinkingLevel(prev.thinkingLevels, sessionThinkingLevel, prev.thinkingLevel);
       return level === prev.thinkingLevel ? prev : { ...prev, thinkingLevel: level };
     });
-  }, [sessionThinkingLevel]);
+  }, [sessionThinkingLevel, deferredComposerPickRef]);
 
   // Sync selected model from server and event listener
   useEffect(() => {
@@ -139,6 +160,9 @@ export function ChatInput({
       try {
         const data = await fetchModelsData();
         if (!active) return;
+        // A pick waiting for the next prompt owns the composer's selection:
+        // every branch below would replace it with a session/catalog default.
+        if (deferredComposerPickRef.current) return;
         if (Array.isArray(data.modelList) && data.modelList.length > 0) {
           // 1. The active session's last-used model is authoritative; even when
           // it is missing from the catalog, never replace it with the default.
@@ -183,7 +207,7 @@ export function ChatInput({
       active = false;
       unsubscribe();
     };
-  }, []);
+  }, [deferredComposerPickRef]);
 
   // Thinking Dropdown State - Reactive with selectedModel
   const thinkingLevels = useMemo(() => {
@@ -210,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}
@@ -290,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,
@@ -75,6 +79,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     accessMode,
     handleAccessModeChange,
     composerModelRef,
+    deferredComposerPickRef,
     extensionDialogs,
     resolveExtensionDialog,
     respondToExtensionUi,
@@ -126,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)
@@ -180,6 +181,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
         accessMode={accessMode}
         onAccessModeChange={handleAccessModeChange}
         composerModelRef={composerModelRef}
+        deferredComposerPickRef={deferredComposerPickRef}
         sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
         sessionThinkingLevel={sessionData?.thinkingLevel}
         generatingVerb={generatingVerb}
@@ -208,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}
@@ -238,6 +241,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
             {!activeSubagent && (
               <ComposerDock
                 isMobile={isMobile}
+                sessionId={sessionId}
                 isGenerating={isGenerating}
                 modelName={sessionModelName}
                 generatingVerb={generatingVerb}
@@ -263,6 +267,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 accessMode={accessMode}
                 onAccessModeChange={handleAccessModeChange}
                 composerModelRef={composerModelRef}
+                deferredComposerPickRef={deferredComposerPickRef}
                 sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
                 sessionThinkingLevel={sessionData?.thinkingLevel}
                 variant={variant}

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

@@ -124,9 +124,9 @@ export function Goal({ tool }: { tool: ToolCallData }) {
             {payload.summary && (
               <div>
                 <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">Summary</span>
-                <p className="mt-0.5 font-sans text-[12px] text-ink font-medium leading-relaxed">
-                  {payload.summary}
-                </p>
+                <div className="mt-0.5 rounded border border-ink/6 bg-ink/[0.03] p-2">
+                  <MarkdownRenderer content={payload.summary} className="font-medium" />
+                </div>
               </div>
             )}
 

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>