repoburg 1.3.186 → 1.3.195

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

@@ -0,0 +1,292 @@
+import type { StateCreator } from 'zustand';
+import type { SessionDetail, Item, TokenUsage } from '../types/index.ts';
+import type { StoreState } from './store.ts';
+
+export type WsSlice = {
+  wsConnected: boolean;
+  setWsConnected: (connected: boolean) => void;
+  onTurnStarted: (sessionId: string, turnId: string) => void;
+  onItemStarted: (sessionId: string, turnId: string, item: Item) => void;
+  onItemUpdated: (sessionId: string, turnId: string, item: Item) => void;
+  onItemCompleted: (sessionId: string, turnId: string, item: Item) => void;
+  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;
+  onTurnFailed: (sessionId: string, turnId: string, error: string) => void;
+  onTurnCancelled: (sessionId: string, turnId: string) => void;
+  onSessionTitle: (sessionId: string, title: string) => void;
+};
+
+export const createWsSlice: StateCreator<StoreState, [], [], WsSlice> = (set, get) => ({
+  wsConnected: false,
+  setWsConnected: (connected) => set({ wsConnected: connected }),
+
+  onTurnStarted: (sessionId, turnId) => {
+    get().addLogEntry('DEBUG', `turn:started — ${turnId.slice(0, 8)}`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            is_running: 1,
+            status: 'running',
+            turns: detail.turns.map((t) => (t.id === turnId ? { ...t, status: 'running' } : t)),
+          },
+        },
+        sessions: state.sessions.map((s) => (s.id === sessionId ? { ...s, is_running: 1, status: 'running' } : s)),
+        activeTurnIndex:
+          state.activeSessionId === sessionId ? detail.turns.findIndex((t) => t.id === turnId) : state.activeTurnIndex,
+      };
+    });
+  },
+
+  onItemStarted: (sessionId, turnId, item) => {
+    get().addLogEntry('DEBUG', `item:started — ${item.type}`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: upsertItem(detail, turnId, item),
+        },
+      };
+    });
+  },
+
+  onItemUpdated: (sessionId, turnId, item) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: upsertItem(detail, turnId, item),
+        },
+      };
+    });
+  },
+
+  onItemCompleted: (sessionId, turnId, item) => {
+    get().addLogEntry('DEBUG', `item:completed — ${item.type}`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      const updatedDetail = upsertItem(detail, turnId, item);
+
+      let turns = updatedDetail.turns;
+      if (item.type === 'agent_message' && item.data?.text) {
+        turns = turns.map((t) => (t.id === turnId ? { ...t, agent_response: item.data!.text as string } : t));
+      }
+      if (item.type === 'reasoning' && item.data?.text) {
+        turns = turns.map((t) => {
+          if (t.id !== turnId) return t;
+          const thoughts = t.thoughts ? t.thoughts + '\n' + (item.data!.text as string) : (item.data!.text as string);
+          return { ...t, thoughts };
+        });
+      }
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: { ...updatedDetail, turns },
+        },
+      };
+    });
+  },
+
+  onItemDelta: (sessionId, turnId, itemId, delta) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: applyDelta(detail, turnId, itemId, delta),
+        },
+      };
+    });
+  },
+
+  onTurnCompleted: (sessionId, turnId, usage, hasUnreviewed) => {
+    const inTok = usage?.input_tokens ?? 0;
+    const outTok = usage?.output_tokens ?? 0;
+    get().addLogEntry('INFO', `turn:completed — ${inTok} in / ${outTok} out`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            is_running: 0,
+            status: 'active',
+            has_unreviewed: hasUnreviewed ? 1 : detail.has_unreviewed,
+            turns: detail.turns.map((t) =>
+              t.id === turnId
+                ? { ...t, status: 'completed', token_usage: usage ?? t.token_usage ?? null }
+                : t,
+            ),
+          },
+        },
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId
+            ? { ...s, is_running: 0, status: 'active', has_unreviewed: hasUnreviewed ? 1 : s.has_unreviewed }
+            : s,
+        ),
+      };
+    });
+  },
+
+  onTokenUsageUpdated: (sessionId, turnId, usage) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            turns: detail.turns.map((t) => (t.id === turnId ? { ...t, token_usage: usage } : t)),
+          },
+        },
+      };
+    });
+  },
+
+  onTurnFailed: (sessionId, turnId, error) => {
+    get().addLogEntry('ERROR', `turn:failed — ${error}`);
+    get().addToast('error', `Turn failed — ${error}`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      const isAbort = error.includes('cancelled') || error.includes('aborted');
+      const status = isAbort ? 'aborted' : 'failed';
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            is_running: 0,
+            status: isAbort ? 'active' : 'failed',
+            turns: detail.turns.map((t) => (t.id === turnId ? { ...t, status, error } : t)),
+          },
+        },
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, is_running: 0, status: isAbort ? 'active' : 'failed' } : s,
+        ),
+      };
+    });
+  },
+
+  onTurnCancelled: (sessionId, turnId) => {
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      const cancelledTurn = detail.turns.find((t) => t.id === turnId);
+      const restoredPrompt = cancelledTurn?.user_prompt ?? null;
+
+      const newTurns = detail.turns.filter((t) => t.id !== turnId);
+
+      return {
+        restoredPrompt,
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            is_running: 0,
+            status: 'active',
+            turns: newTurns,
+          },
+        },
+        sessions: state.sessions.map((s) => (s.id === sessionId ? { ...s, is_running: 0, status: 'active' } : s)),
+        activeTurnIndex: newTurns.length > 0 ? Math.min(state.activeTurnIndex, newTurns.length - 1) : 0,
+      };
+    });
+  },
+
+  onSessionTitle: (sessionId, title) => {
+    set((state) => ({
+      sessions: state.sessions.map((s) => (s.id === sessionId ? { ...s, title } : s)),
+      sessionDetails: state.sessionDetails[sessionId]
+        ? { ...state.sessionDetails, [sessionId]: { ...state.sessionDetails[sessionId], title } }
+        : state.sessionDetails,
+    }));
+  },
+});
+
+/** Insert or replace an item in the correct turn within a SessionDetail. */
+function upsertItem(detail: SessionDetail, turnId: string, item: Item): SessionDetail {
+  return {
+    ...detail,
+    turns: detail.turns.map((turn) => {
+      if (turn.id !== turnId) return turn;
+
+      const existingIdx = turn.items.findIndex((i) => i.external_item_id === item.external_item_id);
+
+      if (existingIdx >= 0) {
+        const newItems = [...turn.items];
+        newItems[existingIdx] = { ...item, id: newItems[existingIdx].id };
+        return { ...turn, items: newItems };
+      }
+
+      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 {
+    ...detail,
+    turns: detail.turns.map((turn) => {
+      if (turn.id !== turnId) return turn;
+
+      const existingIdx = turn.items.findIndex((i) => i.external_item_id === itemId);
+
+      if (existingIdx >= 0) {
+        const existing = turn.items[existingIdx];
+        const currentText = (existing.data?.text as string) ?? '';
+        const newText = currentText + delta;
+        const newItems = [...turn.items];
+        newItems[existingIdx] = {
+          ...existing,
+          data: { ...existing.data, text: newText },
+        };
+        return { ...turn, items: newItems, agent_response: newText };
+      }
+
+      // Item not found — create in-progress agent_message with delta text
+      const newItem: Item = {
+        id: `delta-${itemId}`,
+        turn_id: turnId,
+        external_item_id: itemId,
+        type: 'agent_message',
+        data: { text: delta },
+        status: 'in_progress',
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+      return { ...turn, items: [...turn.items, newItem], agent_response: delta };
+    }),
+  };
+}

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

@@ -96,15 +96,41 @@ body {
 .turn-header-icon { width: 24px; height: 24px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; font-weight: 700; color: #fff; }
 .turn-header-title { font-size: 14px; font-weight: 600; color: var(--text); }
 .turn-header-meta { font-size: 11px; color: var(--text-muted); }
+
+/* Collapsible tool calls */
+.tool-calls { margin-bottom: 16px; }
+.tool-calls-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 12px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: background 150ms ease-out;
+  user-select: none;
+}
+.tool-calls-header:hover { background: var(--surface-2); }
+.tool-calls-icon { display: flex; align-items: center; color: var(--text-3); flex-shrink: 0; }
+.tool-calls-summary { font-size: 13px; font-weight: 500; color: var(--text-2); flex: 1; }
+.tool-calls-chevron { color: var(--text-muted); transition: transform 150ms ease-out; flex-shrink: 0; }
+.tool-calls-body { margin-top: 8px; padding-left: 16px; border-left: 2px solid var(--border); }
+.intermediate-segment { margin-bottom: 16px; }
+.intermediate-segment:last-child { margin-bottom: 0; }
 .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 { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-0); border-top: 1px solid var(--border); flex-shrink: 0; }
-.cmd-bar:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
-.cmd-input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; }
-.cmd-input::placeholder { color: var(--text-muted); }
-.cmd-send { padding: 4px 10px; border-radius: var(--r-sm); font-size: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--dur-fast) var(--ease); display: flex; align-items: center; gap: 4px; }
-.cmd-send:hover { background: var(--surface-3); color: var(--text); }
+.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: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); }
+.cmd-textarea:disabled { opacity: 0.5; }
+.cmd-textarea:focus-visible { box-shadow: none; }
+.cmd-send-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); cursor: default; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
+.cmd-send-btn:not(:disabled) { background: var(--accent); color: #fff; cursor: pointer; }
+.cmd-send-btn:not(:disabled):hover { background: var(--accent-hover); }
+.cmd-send-btn:disabled { opacity: 0.4; }
+.cmd-stop-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--red); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
+.cmd-stop-btn:hover { background: #b91c1c; }
 
 /* === Right Panel === */
 .ide-right { background: var(--surface-0); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
@@ -185,6 +211,75 @@ body {
 .sb-spacer { flex: 1; }
 .sb-divider { color: var(--border); }
 
+/* Model selector — 3-level cascading popover */
+.model-selector { position: relative; }
+.model-selector-btn {
+  display: flex; align-items: center; gap: 4px;
+  background: none; border: none; cursor: pointer;
+  color: var(--text-muted); font-size: 11px;
+  padding: 2px 6px; border-radius: 3px;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.model-selector-btn:hover { background: var(--surface-1); color: var(--text-2); }
+.model-selector-provider { font-weight: 500; color: var(--accent); }
+.model-selector-sep { color: var(--border); margin: 0 1px; }
+.model-selector-model { color: var(--text-2); }
+.model-selector-reasoning { color: var(--text-muted); font-style: italic; }
+.model-selector-chevron { opacity: 0.5; flex-shrink: 0; }
+
+.model-selector-popover {
+  position: absolute; bottom: calc(100% + 4px); left: 0;
+  display: flex; gap: 1px;
+  background: var(--surface-0);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  z-index: 100;
+  min-width: 0;
+  overflow: hidden;
+}
+.model-selector-column {
+  min-width: 140px; max-width: 220px;
+  padding: 4px 0;
+  background: var(--surface-0);
+}
+.model-selector-col-header {
+  padding: 4px 10px;
+  font-size: 9px; font-weight: 600; text-transform: uppercase;
+  color: var(--text-muted); letter-spacing: 0.5px;
+}
+.model-selector-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 11px; color: var(--text-2);
+  transition: background var(--dur-fast) var(--ease);
+}
+.model-selector-item:hover { background: var(--surface-1); }
+.model-selector-item.selected { color: var(--accent); }
+.model-selector-item.disabled { cursor: default; opacity: 0.5; }
+.model-selector-item.disabled:hover { background: none; }
+.model-selector-item-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+.model-selector-item-name { font-weight: 500; white-space: nowrap; }
+.model-selector-item-desc { font-size: 9px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.model-selector-coming-soon {
+  display: flex; align-items: center; gap: 2px;
+  font-size: 9px; color: var(--text-muted); font-style: italic;
+}
+.model-selector-empty {
+  padding: 8px 10px;
+  font-size: 10px; color: var(--text-muted); font-style: italic;
+}
+
+/* Dialog select dropdowns */
+.dialog-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 26px;
+}
+
 /* === Badges === */
 .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 510; white-space: nowrap; }
 .badge-running { background: var(--green-soft); color: var(--green); }
@@ -202,7 +297,7 @@ body {
 
 /* === Status dots === */
 .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-.status-dot.running { background: var(--green); }
+.status-dot.running { background: var(--green); animation: dot-pulse 1.5s ease-in-out infinite; }
 .status-dot.queued  { background: var(--amber); }
 .status-dot.error   { background: var(--red); }
 .status-dot.done    { background: var(--accent); }
@@ -233,10 +328,22 @@ body {
 
 /* === Turn group === */
 .turn-group { margin-bottom: 24px; }
+.turn-block { margin-bottom: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+.turn-block:last-child { border-bottom: none; }
 .cmd-block { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; overflow-x: auto; margin-bottom: 12px; }
 .cmd-block code { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
 .cmd-output { background: var(--surface-0); border: 1px solid var(--border-muted); border-radius: var(--r-md); padding: 10px 14px; overflow-x: auto; margin-bottom: 12px; max-height: 200px; overflow-y: auto; }
 .cmd-output code { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
+
+/* Output truncation toggle */
+.cmd-output-toggle { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-1); color: var(--text-muted); font-size: 11px; font-family: var(--font-sans); padding: 4px 10px; cursor: pointer; margin-bottom: 12px; transition: all var(--dur-fast) var(--ease); }
+.cmd-output-toggle:hover { background: var(--surface-2); color: var(--text-2); }
+
+/* MCP tool call arguments + results */
+.mcp-args { margin-bottom: 12px; }
+.mcp-arg { margin-bottom: 6px; }
+.mcp-arg-key { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 3px; }
+.mcp-arg-value { font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
 .file-change-list { display: flex; flex-direction: column; gap: 2px; }
 .todo-list { list-style: none; padding-left: 0; }
 .todo-done { color: var(--text-3); text-decoration: line-through; }
@@ -285,4 +392,80 @@ body {
 
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
-}
+}
+
+/* === Skeleton Loading (F2) === */
+.skeleton-bars { width: 80%; max-width: 500px; margin: 20px 0; }
+.skeleton-bar { height: 10px; border-radius: var(--r-sm); background: var(--surface-1); margin-bottom: 8px; animation: shimmer 1.2s infinite; }
+.skeleton-bar:nth-child(1) { width: 60%; }
+.skeleton-bar:nth-child(2) { width: 85%; }
+.skeleton-bar:nth-child(3) { width: 70%; }
+.skeleton-bar:nth-child(4) { width: 90%; }
+.skeleton-bar:nth-child(5) { width: 50%; }
+@keyframes shimmer { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } }
+
+@keyframes dot-pulse {
+  from { opacity: 1; }
+  to { opacity: 0.4; }
+}
+
+/* === Diff Highlight (F4) === */
+.diff-file-header { transition: background 300ms ease-out; }
+.diff-file-header.diff-highlight { background: var(--accent-soft); }
+
+/* === Palette Footer (F5) === */
+.palette-footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border-muted); font-size: 11px; color: var(--text-muted); }
+.palette-footer-hint { display: flex; align-items: center; gap: 4px; }
+.kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
+
+/* === Toast Undo (F6) === */
+.toast-undo { font-size: 12px; font-weight: 500; color: var(--accent); background: transparent; border: none; cursor: pointer; padding: 2px 8px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 4px; transition: background var(--dur-fast) var(--ease); }
+.toast-undo:hover { background: var(--accent-soft); }
+
+/* === Workspace Sidebar (hierarchy + quick create) === */
+.tree-section-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
+.tree-section-add { width: 18px; height: 18px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
+.tree-section-add:hover { background: var(--accent-soft); color: var(--accent); }
+.tree-empty { padding: 4px 8px 4px 26px; font-size: 11px; color: var(--text-muted); font-style: italic; }
+
+/* === Sidebar sub-groups (Working / Finished) === */
+.tree-subgroup { margin-bottom: 1px; }
+.tree-subgroup-header { padding: 3px 8px 3px 18px; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 590; color: var(--text-muted); cursor: pointer; user-select: none; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
+.tree-subgroup-header:hover { background: rgba(0,0,0,0.04); color: var(--text-2); }
+.tree-subgroup.collapsed .tree-chevron { transform: rotate(-90deg); }
+.tree-subgroup.collapsed .tree-subgroup-items { display: none; }
+.tree-subgroup-label { text-transform: uppercase; letter-spacing: 0.05em; }
+.tree-subgroup-count { margin-left: auto; font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.tree-subgroup-items { padding-left: 0; }
+.tree-item-finished .tree-label { color: var(--text-muted); opacity: 0.6; }
+.tree-item-finished:hover .tree-label { opacity: 0.85; }
+
+/* === Context Menu === */
+.ctx-menu { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px; min-width: 160px; }
+.ctx-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
+.ctx-menu-item:hover { background: var(--accent-soft); color: var(--text); }
+.ctx-menu-item.ctx-danger:hover { background: rgba(220,38,38,0.08); color: var(--red); }
+.ctx-menu-item.ctx-disabled { opacity: 0.4; cursor: default; }
+.ctx-menu-item.ctx-disabled:hover { background: transparent; color: var(--text-2); }
+
+/* === Inline rename input in sidebar === */
+.tree-rename-input { flex: 1; border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 1px 6px; font-size: 12px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; box-shadow: var(--focus-ring); min-width: 0; }
+
+/* === Slash Popup === */
+.slash-popup { position: absolute; bottom: 100%; left: 12px; right: 12px; margin-bottom: 4px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 280px; overflow-y: auto; z-index: 100; }
+.slash-popup-header { padding: 6px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; }
+.slash-popup-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: var(--r-sm); }
+.slash-popup-back:hover { background: var(--surface-1); color: var(--text-2); }
+.slash-popup-empty { padding: 12px 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
+.slash-popup-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; cursor: pointer; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
+.slash-popup-item:hover, .slash-popup-item.selected { background: var(--accent-soft); }
+.slash-popup-label { font-size: 12px; font-weight: 500; color: var(--text-2); font-family: var(--font-mono); }
+.slash-popup-hint { font-size: 11px; color: var(--text-muted); }
+.slash-popup-item-main { display: flex; flex-direction: column; gap: 1px; }
+.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-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); }

package/agent-pane/frontend/src/test/component-helpers.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared helpers for component tests that use the Zustand store.
+ *
+ * NOTE: vi.mock calls CANNOT be wrapped in a function — vitest only hoists
+ * vi.mock when it's called at the top level of the test file. Each test file
+ * must include vi.mock calls directly at the top level.
+ *
+ * This module only provides the store reset utility.
+ */
+import { useStore } from '../store/store.ts';
+
+/** Reset useStore to initial state with optional overrides. */
+export function resetStore(overrides: Record<string, unknown> = {}): void {
+  useStore.setState({
+    sessions: [],
+    workspaces: [],
+    sessionDetails: {},
+    activeSessionId: null,
+    openTabs: [],
+    activeTurnIndex: 0,
+    activeRightTab: 'turns',
+    changesScope: 'session',
+    eventLog: [],
+    loading: false,
+    error: null,
+    showNewSessionDialog: false,
+    wsConnected: false,
+    toasts: [],
+    showCommandPalette: false,
+    submittingPrompt: null,
+    selectedChangePath: null,
+    restoredPrompt: null,
+    lastModelConfig: null,
+    ...overrides,
+  });
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Shared test fixtures for frontend tests.
+ *
+ * Factory functions for creating typed test objects with sensible defaults.
+ * Imported by store tests and component tests to keep fixture logic DRY.
+ */
+import type { Session, SessionDetail, Turn, Item, ItemType, TokenUsage, Workspace } from '@agentpane/shared';
+
+const NOW = '2025-01-01T00:00:00Z';
+
+/** Create a Session with optional overrides. */
+export function makeSession(id: string, overrides: Partial<Session> = {}): Session {
+  return {
+    id,
+    title: null,
+    runtime_type: 'codex',
+    model: null,
+    model_reasoning_effort: null,
+    cwd: null,
+    external_thread_id: null,
+    status: 'active',
+    is_running: 0,
+    lifecycle: 'working',
+    has_unreviewed: 0,
+    runtime_config: null,
+    created_at: NOW,
+    updated_at: NOW,
+    ...overrides,
+  };
+}
+
+/** Create a SessionDetail with turns and optional overrides. */
+export function makeDetail(id: string, turns: Turn[] = [], overrides: Partial<SessionDetail> = {}): SessionDetail {
+  return {
+    ...makeSession(id),
+    turns,
+    ...overrides,
+  };
+}
+
+/** Create a Turn with optional overrides. */
+export function makeTurn(id: string, sessionId: string, overrides: Partial<Turn> = {}): Turn {
+  return {
+    id,
+    session_id: sessionId,
+    user_prompt: 'test prompt',
+    agent_response: null,
+    thoughts: null,
+    token_usage: null,
+    external_turn_id: null,
+    status: 'completed',
+    error: null,
+    created_at: NOW,
+    updated_at: NOW,
+    items: [],
+    ...overrides,
+  };
+}
+
+/** Create an Item with a given type and optional data. */
+export function makeItem(id: string, turnId: string, type: ItemType = 'agent_message'): Item {
+  return {
+    id,
+    turn_id: turnId,
+    external_item_id: `ext-${id}`,
+    type,
+    data: { text: 'hello' },
+    status: 'completed',
+    created_at: NOW,
+    updated_at: NOW,
+  };
+}
+
+/** Create a TokenUsage object with optional overrides. */
+export function makeUsage(overrides: Partial<TokenUsage> = {}): TokenUsage {
+  return {
+    input_tokens: 100,
+    cached_input_tokens: 0,
+    cache_write_input_tokens: 0,
+    output_tokens: 200,
+    reasoning_output_tokens: 0,
+    ...overrides,
+  };
+}
+
+/** Create a Workspace with optional overrides. */
+export function makeWorkspace(id: string, path: string, overrides: Partial<Workspace> = {}): Workspace {
+  return {
+    id,
+    path,
+    label: null,
+    deleted: 0,
+    created_at: NOW,
+    ...overrides,
+  };
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Vitest setup file for frontend tests.
+ * Imports jest-dom matchers for DOM assertions.
+ */
+import '@testing-library/jest-dom/vitest';