repoburg 1.3.196 → 1.3.197

package/agent-pane/frontend/src/store/sessionSlice.ts

@@ -1,5 +1,5 @@
 import type { StateCreator } from 'zustand';
-import type { Session, SessionDetail, Turn } from '../types/index.ts';
+import type { Session, SessionDetail, Turn, Attachment } from '../types/index.ts';
 import type { StoreState, CreateSessionBody } from './store.ts';
 import {
   fetchSessions,
@@ -13,6 +13,7 @@ import {
   reopenSession as apiReopenSession,
   clearUnreviewed as apiClearUnreviewed,
   rewindSession as apiRewindSession,
+  restoreSession as apiRestoreSession,
   branchSession as apiBranchSession,
   updateModelConfig as apiUpdateModelConfig,
   updateRuntimeConfig as apiUpdateRuntimeConfig,
@@ -27,6 +28,7 @@ export type SessionSlice = {
   activeTurnIndex: number;
   submittingPrompt: string | null;
   restoredPrompt: string | null;
+  quotedText: string | null;
 
   init: () => Promise<void>;
   selectSession: (id: string) => Promise<void>;
@@ -36,10 +38,11 @@ export type SessionSlice = {
   renameSession: (id: string, title: string) => Promise<void>;
   markFinished: (id: string) => Promise<void>;
   reopenSession: (id: string) => Promise<void>;
-  submitPrompt: (prompt: string) => Promise<void>;
+  submitPrompt: (prompt: string, attachments?: Attachment[]) => Promise<void>;
   cancelTurn: () => Promise<void>;
   refreshActiveSession: () => Promise<void>;
   rewindToTurn: (sessionId: string, turnId: string) => Promise<void>;
+  restoreSession: (sessionId: string) => Promise<void>;
   branchFromTurn: (sessionId: string, turnId: string, title?: string) => Promise<void>;
   updateModelConfig: (model: string, reasoningEffort: string, runtimeType?: string) => Promise<void>;
   updateRuntimeConfig: (config: Record<string, unknown>) => Promise<void>;
@@ -53,6 +56,7 @@ export const createSessionSlice: StateCreator<StoreState, [], [], SessionSlice>
   activeTurnIndex: 0,
   submittingPrompt: null,
   restoredPrompt: null,
+  quotedText: null,
 
   init: async () => {
     try {
@@ -274,7 +278,7 @@ export const createSessionSlice: StateCreator<StoreState, [], [], SessionSlice>
     }
   },
 
-  submitPrompt: async (prompt) => {
+  submitPrompt: async (prompt, attachments) => {
     const sessionId = get().activeSessionId;
     if (!sessionId) return;
 
@@ -293,7 +297,7 @@ export const createSessionSlice: StateCreator<StoreState, [], [], SessionSlice>
     });
 
     try {
-      const turn = await apiSubmitPrompt(sessionId, prompt);
+      const turn = await apiSubmitPrompt(sessionId, prompt, attachments);
       get().addLogEntry('INFO', `Turn submitted — "${prompt.slice(0, 40)}"`);
 
       set((state) => {
@@ -343,12 +347,12 @@ export const createSessionSlice: StateCreator<StoreState, [], [], SessionSlice>
   rewindToTurn: async (sessionId, turnId) => {
     set({ error: null });
     try {
-      await apiRewindSession(sessionId, turnId);
+      const updated = await apiRewindSession(sessionId, turnId);
       const detail = await fetchSessionDetail(sessionId);
       set((state) => ({
         sessionDetails: { ...state.sessionDetails, [sessionId]: detail },
         sessions: state.sessions.map((s) =>
-          s.id === sessionId ? { ...s, external_thread_id: null, is_running: 0, status: 'active' } : s,
+          s.id === sessionId ? { ...s, external_thread_id: updated.external_thread_id, is_running: 0, status: 'active' } : s,
         ),
         activeTurnIndex: detail.turns.length > 0 ? detail.turns.length - 1 : 0,
       }));
@@ -359,6 +363,25 @@ export const createSessionSlice: StateCreator<StoreState, [], [], SessionSlice>
     }
   },
 
+  restoreSession: async (sessionId) => {
+    set({ error: null });
+    try {
+      const updated = await apiRestoreSession(sessionId);
+      const detail = await fetchSessionDetail(sessionId);
+      set((state) => ({
+        sessionDetails: { ...state.sessionDetails, [sessionId]: detail },
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, external_thread_id: updated.external_thread_id, is_running: 0, status: 'active' } : s,
+        ),
+        activeTurnIndex: detail.turns.length > 0 ? detail.turns.length - 1 : 0,
+      }));
+      get().addToast('info', 'Restored rewound session');
+    } catch (err) {
+      set({ error: (err as Error).message });
+      get().addToast('error', `Failed to restore — ${(err as Error).message}`);
+    }
+  },
+
   branchFromTurn: async (sessionId, turnId, title) => {
     set({ error: null });
     try {

package/agent-pane/frontend/src/store/store.test.ts

@@ -74,7 +74,7 @@ describe('upsertItem (via onItemStarted)', () => {
     expect(updated.turns[0].items[0].external_item_id).toBe('ext-i1');
   });
 
-  it('replaces existing item matching by external_item_id, keeps local id', () => {
+  it('replaces existing item matching by external_item_id, uses WS event id', () => {
     const existingItem = makeItem('local-i1', 't1');
     const turn = makeTurn('t1', 's1', { items: [existingItem] });
     const detail = makeDetail('s1', [turn]);
@@ -89,7 +89,7 @@ describe('upsertItem (via onItemStarted)', () => {
 
     const updated = useStore.getState().sessionDetails['s1'];
     expect(updated.turns[0].items).toHaveLength(1);
-    expect(updated.turns[0].items[0].id).toBe('local-i1');
+    expect(updated.turns[0].items[0].id).toBe('different-local-id');
     expect(updated.turns[0].items[0].data).toEqual({ text: 'updated' });
   });
 });
@@ -339,7 +339,7 @@ describe('onItemUpdated', () => {
 
     const items = useStore.getState().sessionDetails['s1'].turns[0].items;
     expect(items).toHaveLength(1);
-    expect(items[0].id).toBe('i1'); // local id preserved
+    expect(items[0].id).toBe('i2'); // uses WS event id (real DB id)
     expect(items[0].data).toEqual({ command: 'ls -la', output: 'done' });
   });
 
@@ -1199,8 +1199,8 @@ describe('simple setters', () => {
   });
 
   it('switchRightTab sets value', () => {
-    useStore.getState().switchRightTab('metrics');
-    expect(useStore.getState().activeRightTab).toBe('metrics');
+    useStore.getState().switchRightTab('changes');
+    expect(useStore.getState().activeRightTab).toBe('changes');
   });
 
   it('setChangesScope sets value', () => {

package/agent-pane/frontend/src/store/store.ts

@@ -3,10 +3,12 @@ import type { SessionSlice } from './sessionSlice.ts';
 import type { WorkspaceSlice } from './workspaceSlice.ts';
 import type { WsSlice } from './wsSlice.ts';
 import type { UiSlice } from './uiSlice.ts';
+import type { ThreadSlice } from './threadSlice.ts';
 import { createSessionSlice } from './sessionSlice.ts';
 import { createWorkspaceSlice } from './workspaceSlice.ts';
 import { createWsSlice } from './wsSlice.ts';
 import { createUiSlice } from './uiSlice.ts';
+import { createThreadSlice } from './threadSlice.ts';
 
 export interface CreateSessionBody {
   title?: string;
@@ -24,11 +26,12 @@ export interface Toast {
   undoLabel?: string;
 }
 
-export type StoreState = SessionSlice & WorkspaceSlice & WsSlice & UiSlice;
+export type StoreState = SessionSlice & WorkspaceSlice & WsSlice & UiSlice & ThreadSlice;
 
 export const useStore = create<StoreState>()((...a) => ({
   ...createSessionSlice(...a),
   ...createWorkspaceSlice(...a),
   ...createWsSlice(...a),
   ...createUiSlice(...a),
+  ...createThreadSlice(...a),
 }));

package/agent-pane/frontend/src/store/threadSlice.ts

@@ -0,0 +1,136 @@
+import type { StateCreator } from 'zustand';
+import type { DiscussionThread, Turn } from '../types/index.ts';
+import type { StoreState } from './store.ts';
+import { apiPost, apiPatch, apiDelete } from '../api/client.ts';
+
+export type ThreadSlice = {
+  createThread: (sessionId: string, params: {
+    itemId: string;
+    turnId: string;
+    startOffset: number;
+    endOffset: number;
+    selectedText: string;
+    message: string;
+  }) => Promise<void>;
+  followupThread: (sessionId: string, threadId: string, message: string) => Promise<void>;
+  resolveThread: (sessionId: string, threadId: string) => Promise<void>;
+  reopenThread: (sessionId: string, threadId: string) => Promise<void>;
+  deleteThread: (sessionId: string, threadId: string) => Promise<void>;
+
+  onThreadCreated: (sessionId: string, thread: DiscussionThread, turn: Turn) => void;
+  onThreadFollowup: (sessionId: string, threadId: string, turn: Turn) => void;
+  onThreadResolved: (sessionId: string, threadId: string, status: 'open' | 'resolved') => void;
+  onThreadDeleted: (sessionId: string, threadId: string) => void;
+};
+
+export const createThreadSlice: StateCreator<StoreState, [], [], ThreadSlice> = (set, get) => ({
+  createThread: async (sessionId, params) => {
+    try {
+      await apiPost(`/sessions/${sessionId}/threads`, params);
+      get().addLogEntry('INFO', `Thread created — "${params.message.slice(0, 40)}"`);
+    } catch (err) {
+      get().addToast('error', `Failed to create thread — ${(err as Error).message}`);
+    }
+  },
+
+  followupThread: async (sessionId, threadId, message) => {
+    try {
+      await apiPost(`/sessions/${sessionId}/threads/${threadId}/followup`, { message });
+      get().addLogEntry('INFO', `Thread follow-up — "${message.slice(0, 40)}"`);
+    } catch (err) {
+      get().addToast('error', `Failed to send follow-up — ${(err as Error).message}`);
+    }
+  },
+
+  resolveThread: async (sessionId, threadId) => {
+    try {
+      await apiPatch(`/sessions/${sessionId}/threads/${threadId}`, { status: 'resolved' });
+    } catch (err) {
+      get().addToast('error', `Failed to resolve thread — ${(err as Error).message}`);
+    }
+  },
+
+  reopenThread: async (sessionId, threadId) => {
+    try {
+      await apiPatch(`/sessions/${sessionId}/threads/${threadId}`, { status: 'open' });
+    } catch (err) {
+      get().addToast('error', `Failed to reopen thread — ${(err as Error).message}`);
+    }
+  },
+
+  deleteThread: async (sessionId, threadId) => {
+    try {
+      await apiDelete(`/sessions/${sessionId}/threads/${threadId}`);
+    } catch (err) {
+      get().addToast('error', `Failed to delete thread — ${(err as Error).message}`);
+    }
+  },
+
+  onThreadCreated: (sessionId, thread, turn) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            threads: [...(detail.threads ?? []), thread],
+            turns: [...detail.turns, { ...turn, items: [] }],
+          },
+        },
+      };
+    });
+  },
+
+  onThreadFollowup: (sessionId, _threadId, turn) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            turns: [...detail.turns, { ...turn, items: [] }],
+          },
+        },
+      };
+    });
+  },
+
+  onThreadResolved: (sessionId, threadId, status) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      const threads = (detail.threads ?? []).map((t) =>
+        t.id === threadId
+          ? { ...t, status, resolved_at: status === 'resolved' ? new Date().toISOString() : null }
+          : t,
+      );
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: { ...detail, threads },
+        },
+      };
+    });
+  },
+
+  onThreadDeleted: (sessionId, threadId) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            threads: (detail.threads ?? []).filter((t) => t.id !== threadId),
+            turns: detail.turns.filter((t) => t.thread_id !== threadId),
+          },
+        },
+      };
+    });
+  },
+});

package/agent-pane/frontend/src/store/wsSlice.ts

@@ -1,7 +1,13 @@
 import type { StateCreator } from 'zustand';
-import type { SessionDetail, Item, TokenUsage } from '../types/index.ts';
+import type { SessionDetail, Item, TokenUsage, ContextUsage } from '../types/index.ts';
 import type { StoreState } from './store.ts';
 
+export type BackgroundTaskInfo = {
+  task_id: string;
+  task_type: string;
+  description: string;
+};
+
 export type WsSlice = {
   wsConnected: boolean;
   setWsConnected: (connected: boolean) => void;
@@ -12,9 +18,11 @@ export type WsSlice = {
   onItemDelta: (sessionId: string, turnId: string, itemId: string, delta: string) => void;
   onTurnCompleted: (sessionId: string, turnId: string, usage?: TokenUsage | null, hasUnreviewed?: boolean) => void;
   onTokenUsageUpdated: (sessionId: string, turnId: string, usage: TokenUsage) => void;
+  onContextUsageUpdated: (sessionId: string, ctx: ContextUsage) => void;
   onTurnFailed: (sessionId: string, turnId: string, error: string) => void;
   onTurnCancelled: (sessionId: string, turnId: string) => void;
   onSessionTitle: (sessionId: string, title: string) => void;
+  onBackgroundTasksChanged: (sessionId: string, tasks: BackgroundTaskInfo[]) => void;
 };
 
 export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, get) => ({
@@ -78,6 +86,20 @@ export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, ge
   onItemCompleted: (sessionId, turnId, item) => {
     get().addLogEntry('DEBUG', `item:completed — ${item.type}`);
 
+    // Toast on background_task completion — user needs to know the monitor/subagent finished
+    if (item.type === 'background_task' && (item.status === 'completed' || item.status === 'failed')) {
+      const data = item.data || {};
+      const taskType = (data.task_type as string) || 'unknown';
+      const desc = (data.description as string) || 'background task';
+      const isSubagent = taskType === 'local_agent';
+      const taskLabel = isSubagent ? 'Subagent' : taskType === 'local_bash' ? 'Monitor' : 'Task';
+      if (item.status === 'completed') {
+        get().addToast('success', `${taskLabel} completed: ${desc}`);
+      } else {
+        get().addToast('error', `${taskLabel} failed: ${desc}`);
+      }
+    }
+
     set((state) => {
       const detail = state.sessionDetails[sessionId];
       if (!detail) return {};
@@ -169,6 +191,19 @@ export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, ge
     });
   },
 
+  onContextUsageUpdated: (sessionId, ctx) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: { ...detail, contextUsage: ctx },
+        },
+      };
+    });
+  },
+
   onTurnFailed: (sessionId, turnId, error) => {
     get().addLogEntry('ERROR', `turn:failed — ${error}`);
     get().addToast('error', `Turn failed — ${error}`);
@@ -187,7 +222,14 @@ export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, ge
             ...detail,
             is_running: 0,
             status: isAbort ? 'active' : 'failed',
-            turns: detail.turns.map((t) => (t.id === turnId ? { ...t, status, error } : t)),
+            turns: detail.turns.map((t) => {
+              if (t.id !== turnId) return t;
+              // Mark all in_progress items as failed — the turn failed so they'll never complete.
+              const items = t.items.map((item) =>
+                item.status === 'in_progress' ? { ...item, status: 'failed' as const } : item,
+              );
+              return { ...t, status, error, items };
+            }),
           },
         },
         sessions: state.sessions.map((s) =>
@@ -232,6 +274,19 @@ export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, ge
         : state.sessionDetails,
     }));
   },
+
+  onBackgroundTasksChanged: (sessionId, tasks) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: { ...detail, backgroundTasks: tasks },
+        },
+      };
+    });
+  },
 });
 
 /** Insert or replace an item in the correct turn within a SessionDetail. */
@@ -244,16 +299,30 @@ function upsertItem(detail: SessionDetail, turnId: string, item: Item): SessionD
       const existingIdx = turn.items.findIndex((i) => i.external_item_id === item.external_item_id);
 
       if (existingIdx >= 0) {
+        // Replace with the WS event's item — use the real DB id, not the delta-* placeholder.
         const newItems = [...turn.items];
-        newItems[existingIdx] = { ...item, id: newItems[existingIdx].id };
+        newItems[existingIdx] = item;
         return { ...turn, items: newItems };
       }
 
+      // New item not found by external_item_id — clean up any delta placeholder
+      // agent_message items (created by applyDelta with a fallback stream-text ID
+      // when streamingMessageIds wasn't set). Without this, the placeholder and the
+      // completed item coexist, causing duplicate rendering in thread cards.
+      if (item.type === 'agent_message') {
+        const cleanedItems = turn.items.filter(
+          (i) => !(i.type === 'agent_message' && i.id.startsWith('delta-')),
+        );
+        return { ...turn, items: [...cleanedItems, item] };
+      }
+
       return { ...turn, items: [...turn.items, item] };
     }),
   };
 }
 
+
+
 /** Append a text delta to an existing agent_message item, or create one if not found. */
 function applyDelta(detail: SessionDetail, turnId: string, itemId: string, delta: string): SessionDetail {
   return {

package/agent-pane/frontend/src/styles/app.css

@@ -119,7 +119,8 @@ body {
 .user-message { font-size: 14px; color: var(--text); background: var(--accent-soft); padding: 12px 16px; border-radius: var(--r-md); border: 1px solid rgba(217,119,6,0.15); }
 
 /* === Command input === */
-.cmd-bar { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; background: var(--surface-0); border-top: 1px solid var(--border); flex-shrink: 0; }
+.cmd-bar { position: relative; display: flex; flex-direction: column; padding: 0; background: var(--surface-0); border-top: 1px solid var(--border); flex-shrink: 0; }
+.cmd-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; }
 .cmd-bar:focus-within { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4); }
 .cmd-textarea { flex: 1; border: none; background: transparent; color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; resize: none; overflow-y: auto; line-height: 1.5; padding: 6px 0; }
 .cmd-textarea::placeholder { color: var(--text-muted); }
@@ -143,11 +144,6 @@ body {
 .right-section { margin-bottom: 20px; }
 .right-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
 
-.metric-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-muted); }
-.metric-row:last-child { border: none; }
-.metric-label { color: var(--text-3); }
-.metric-val { color: var(--text); font-weight: 510; font-variant-numeric: tabular-nums; }
-
 /* === Turns panel === */
 .turn-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 12px; color: var(--text-3); transition: all var(--dur-fast) var(--ease); position: relative; }
 .turn-item:hover { background: rgba(0,0,0,0.04); color: var(--text-2); }
@@ -155,6 +151,7 @@ body {
 .turn-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent); border-radius: var(--r-pill); }
 .turn-item-icon { width: 18px; height: 18px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; font-weight: 700; color: #fff; }
 .turn-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.turn-item-status { font-size: 10px; color: var(--amber); flex-shrink: 0; }
 .turn-item-meta { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
 
 /* === File changes === */
@@ -193,23 +190,14 @@ body {
 .scope-btn:hover { color: var(--text-2); }
 .scope-btn.active { background: var(--surface-0); color: var(--text); box-shadow: var(--inset-highlight); }
 
-/* === Log entries === */
-.log-entry { padding: 5px 0; font-size: 11px; line-height: 1.5; border-bottom: 1px solid var(--border-muted); font-family: var(--font-mono); }
-.log-entry:last-child { border: none; }
-.log-time { color: var(--text-muted); margin-right: 8px; }
-.log-level { font-weight: 700; margin-right: 6px; }
-.log-info { color: var(--accent); }
-.log-warn { color: var(--amber); }
-.log-error { color: var(--red); }
-.log-debug { color: var(--text-muted); }
-.log-msg { color: var(--text-2); }
-
 /* === Status Bar === */
 .ide-statusbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 24px; background: var(--surface-0); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
 .sb-item { display: flex; align-items: center; gap: 3px; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
 .sb-item:hover { color: var(--text-2); }
 .sb-spacer { flex: 1; }
 .sb-divider { color: var(--border); }
+.sb-context { display: flex; align-items: center; gap: 5px; }
+.sb-context-text { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
 
 /* Model selector — 3-level cascading popover */
 .model-selector { position: relative; }
@@ -465,7 +453,150 @@ body {
 .slash-popup-check { color: var(--accent); font-size: 13px; }
 
 /* === Skill Badges === */
-.skill-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 0; }
+.skill-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; }
 .skill-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 11px; font-family: var(--font-mono); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); }
 .skill-badge-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
-.skill-badge-remove:hover { color: var(--red); }
+.skill-badge-remove:hover { color: var(--red); }
+
+/* === Attachment Preview Area (input bar) === */
+.attachment-preview-area { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; }
+.attachment-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); max-width: 180px; position: relative; transition: border-color var(--dur-fast) var(--ease); }
+.attachment-chip:hover { border-color: var(--accent); }
+.attachment-thumb { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
+.attachment-file-icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
+.attachment-info { display: flex; flex-direction: column; gap: 0; overflow: hidden; min-width: 0; }
+.attachment-name { font-size: 10px; font-family: var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
+.attachment-size { font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.attachment-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
+.attachment-remove:hover { color: var(--red); background: rgba(239,68,68,0.1); }
+
+/* === Paperclip Button === */
+.attachment-clip-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
+.attachment-clip-btn:hover { color: var(--accent); background: var(--surface-2); }
+.attachment-clip-btn:disabled { opacity: 0.3; cursor: default; }
+
+/* === Drag-over Highlight === */
+.cmd-bar.drag-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
+
+/* === Image Preview Modal === */
+.image-preview-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 32px; animation: modal-fade-in 150ms ease-out; }
+@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
+.image-preview-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.image-preview-content img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--border); }
+.image-preview-info { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
+.image-preview-close { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); }
+.image-preview-close:hover { background: var(--red); color: #fff; }
+
+/* === Attachment Pills (render area) === */
+.attachment-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.attachment-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease); }
+.attachment-pill:hover { border-color: var(--accent); }
+.attachment-pill-thumb { width: 16px; height: 16px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
+.attachment-pill-icon { color: var(--text-muted); flex-shrink: 0; }
+.attachment-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
+/* === Tasks Panel === */
+.right-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; font-size: 10px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 8px; }
+.task-count-badge { font-size: 10px; font-weight: 500; }
+.task-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; transition: border-color var(--dur-fast) var(--ease); }
+.task-card.task-running { border-color: var(--accent); }
+.task-card.task-failed { border-color: var(--red); }
+.task-card-header { display: flex; align-items: center; gap: 8px; }
+.task-card-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); flex-shrink: 0; }
+.task-card-type { font-size: 13px; font-weight: 600; color: var(--text); }
+.task-card-status { display: flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm); flex-shrink: 0; }
+.task-status-running { color: var(--accent); background: var(--accent-soft); }
+.task-status-done { color: var(--green); background: var(--green-soft); }
+.task-status-failed { color: var(--red); background: var(--red-soft); }
+.task-card-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
+.task-card-desc { font-size: 12px; color: var(--text-2); margin-top: 6px; font-family: var(--font-mono); }
+.task-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+.task-card-body { margin-top: 8px; }
+.task-output { max-height: 300px; }
+.task-card-placeholder { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
+.task-card-context { font-size: 10px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* === Discussion Threads === */
+/* Highlight marks on anchored text */
+mark[data-thread-id] { background: rgba(217, 119, 6, 0.18); border-radius: 2px; cursor: pointer; padding: 0 1px; transition: background var(--dur-fast) var(--ease); }
+mark[data-thread-id]:hover { background: rgba(217, 119, 6, 0.3); }
+mark[data-thread-id].thread-mark-resolved { background: transparent; border-bottom: 2px dashed var(--text-muted); }
+
+/* Floating selection actions (Discuss + Quote) */
+.selection-actions { position: fixed; z-index: 9999; display: flex; gap: 4px; }
+.discuss-button { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-0); color: var(--accent); font-size: 11px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: all var(--dur-fast) var(--ease); }
+.discuss-button:hover { background: var(--accent-soft); border-color: var(--accent); }
+
+/* Thread creation popover */
+.thread-create-popover { position: fixed; z-index: 9999; min-width: 280px; max-width: 360px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 10px; display: flex; flex-direction: column; gap: 8px; transform: translateX(-100%); }
+.thread-create-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.thread-create-quote { font-size: 11px; color: var(--text-muted); font-style: italic; flex: 1; line-height: 1.4; }
+.thread-create-close { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: var(--r-sm); flex-shrink: 0; }
+.thread-create-close:hover { background: var(--surface-1); color: var(--text); }
+.thread-create-input { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; resize: none; line-height: 1.5; transition: border-color var(--dur-fast) var(--ease); }
+.thread-create-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
+.thread-create-footer { display: flex; align-items: center; justify-content: space-between; }
+.thread-create-hint { font-size: 10px; color: var(--text-muted); }
+.thread-create-send { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: none; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-size: 11px; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
+.thread-create-send:disabled { opacity: 0.4; cursor: default; }
+.thread-create-send:not(:disabled):hover { background: var(--accent-hover); }
+
+/* Threads sidebar — filter tabs */
+.thread-filter-tabs { display: flex; gap: 2px; margin-bottom: 12px; padding: 2px; background: var(--surface-1); border-radius: var(--r-md); }
+.thread-filter-tab { flex: 1; padding: 4px 8px; border: none; background: transparent; color: var(--text-3); font-size: 10px; font-weight: 500; cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
+.thread-filter-tab:hover { color: var(--text-2); }
+.thread-filter-tab.active { background: var(--surface-0); color: var(--text); box-shadow: var(--inset-highlight); }
+
+/* Thread card */
+.thread-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
+.thread-card.thread-resolved { opacity: 0.7; }
+.thread-card-highlighted { border-color: var(--accent); background: var(--accent-soft); }
+.thread-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; cursor: pointer; }
+.thread-card-quote { font-size: 11px; color: var(--text-muted); font-style: italic; line-height: 1.4; flex: 1; }
+.thread-card-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.thread-status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
+.thread-status-open { background: var(--accent-soft); color: var(--accent); }
+.thread-status-resolved { background: var(--green-soft); color: var(--green); }
+
+/* Thread conversation */
+.thread-card-conversation { margin-top: 8px; max-height: 300px; overflow-y: auto; }
+.thread-card-turn { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-muted); }
+.thread-card-turn:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
+.thread-card-user-message { font-size: 12px; color: var(--text); background: var(--accent-soft); padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid rgba(217,119,6,0.15); margin-bottom: 4px; }
+.thread-card-ai-response { font-size: 12px; color: var(--text-2); padding: 4px 0; line-height: 1.5; }
+.thread-card-ai-response p { margin-bottom: 6px; }
+.thread-card-ai-response code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-1); padding: 1px 4px; border-radius: var(--r-sm); color: var(--accent); }
+.thread-card-ai-response pre { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; overflow-x: auto; margin-bottom: 6px; }
+.thread-card-ai-response pre code { background: none; padding: 0; }
+.thread-card-pending { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
+.thread-card-placeholder { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
+
+/* Follow-up input */
+.thread-card-followup { display: flex; gap: 4px; margin-top: 8px; }
+.thread-card-followup-input { flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; resize: none; line-height: 1.5; transition: border-color var(--dur-fast) var(--ease); }
+.thread-card-followup-input:focus { border-color: var(--accent); }
+.thread-card-followup-input:disabled { opacity: 0.5; }
+.thread-card-followup-send { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
+.thread-card-followup-send:disabled { opacity: 0.4; cursor: default; }
+.thread-card-followup-send:not(:disabled):hover { background: var(--accent-hover); }
+
+.thread-locate-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; display: flex; align-items: center; transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
+.thread-locate-btn:hover { color: var(--accent); background: var(--accent-soft); }
+
+/* Thread mark flash animation */
+.thread-mark-flash { animation: mark-flash 1.5s ease-out; }
+@keyframes mark-flash { 0% { background: rgba(217,119,6,0.5); } 100% { background: rgba(217,119,6,0.18); } }
+
+/* Thread actions */
+.thread-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-muted); }
+.thread-action-btn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
+.thread-action-btn:hover { background: var(--surface-1); color: var(--text); }
+.thread-action-btn.thread-action-danger:hover { background: rgba(220,38,38,0.08); color: var(--red); border-color: rgba(220,38,38,0.2); }
+
+/* === Agent call card (non-clickable status display) === */
+.agent-call-card { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
+.agent-call-icon { color: var(--text-2); display: flex; align-items: center; }
+.agent-call-desc { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+.agent-call-status { font-size: 10px; font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--r-sm); }
+.agent-call-status.running { color: var(--accent); background: var(--accent-soft); }
+.agent-call-status.done { color: var(--green); background: rgba(34,197,94,0.08); }
+.agent-call-status.failed { color: var(--red); background: rgba(239,68,68,0.08); }