repoburg 1.3.188 → 1.3.196

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

@@ -0,0 +1,83 @@
+import type { StateCreator } from 'zustand';
+import type { LogEntry, RightTab, ChangesScope, ModelInfo } from '../types/index.ts';
+import type { StoreState, Toast } from './store.ts';
+import { fetchModels } from '../api/models.ts';
+
+export type UiSlice = {
+  activeRightTab: RightTab;
+  changesScope: ChangesScope;
+  eventLog: LogEntry[];
+  loading: boolean;
+  error: string | null;
+  showNewSessionDialog: boolean;
+  toasts: Toast[];
+  showCommandPalette: boolean;
+  selectedChangePath: string | null;
+  lastModelConfig: { provider: string; model: string; reasoning: string } | null;
+  models: ModelInfo[];
+  modelsLoading: boolean;
+  showModelSelector: boolean;
+
+  setActiveTurnIndex: (idx: number) => void;
+  switchRightTab: (tab: RightTab) => void;
+  setChangesScope: (scope: ChangesScope) => void;
+  setShowNewSessionDialog: (show: boolean) => void;
+  setShowCommandPalette: (show: boolean) => void;
+  setShowModelSelector: (show: boolean) => void;
+  setSelectedChangePath: (path: string | null) => void;
+  addToast: (type: Toast['type'], message: string, undoAction?: () => void, undoLabel?: string) => void;
+  removeToast: (id: string) => void;
+  addLogEntry: (level: LogEntry['level'], message: string) => void;
+  loadModels: (providerId: string) => Promise<void>;
+};
+
+export const createUiSlice: StateCreator<StoreState, [], [], UiSlice> = (set, get) => ({
+  activeRightTab: 'turns',
+  changesScope: 'session',
+  eventLog: [],
+  loading: false,
+  error: null,
+  showNewSessionDialog: false,
+  toasts: [],
+  showCommandPalette: false,
+  selectedChangePath: null,
+  lastModelConfig: null,
+  models: [],
+  modelsLoading: false,
+  showModelSelector: false,
+
+  setActiveTurnIndex: (idx) => set({ activeTurnIndex: idx }),
+  switchRightTab: (tab) => set({ activeRightTab: tab }),
+  setChangesScope: (scope) => set({ changesScope: scope }),
+  setShowNewSessionDialog: (show) => set({ showNewSessionDialog: show }),
+  setShowCommandPalette: (show) => set({ showCommandPalette: show }),
+  setShowModelSelector: (show) => set({ showModelSelector: show }),
+  setSelectedChangePath: (path) => set({ selectedChangePath: path }),
+
+  addToast: (type, message, undoAction, undoLabel) => {
+    const id = Math.random().toString(36).slice(2, 9);
+    set((state) => ({ toasts: [...state.toasts, { id, type, message, undoAction, undoLabel }] }));
+  },
+
+  removeToast: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+  },
+
+  addLogEntry: (level, message) => {
+    const time = new Date().toLocaleTimeString('en-GB', { hour12: false });
+    set((state) => ({
+      eventLog: [...state.eventLog, { time, level, message }],
+    }));
+  },
+
+  loadModels: async (providerId) => {
+    if (get().modelsLoading) return;
+    set({ modelsLoading: true, models: [] });
+    try {
+      const models = await fetchModels(providerId);
+      set({ models, modelsLoading: false });
+    } catch {
+      set({ modelsLoading: false });
+    }
+  },
+});

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

@@ -0,0 +1,77 @@
+import type { StateCreator } from 'zustand';
+import type { Workspace } from '../types/index.ts';
+import type { StoreState } from './store.ts';
+import {
+  fetchWorkspaces as apiFetchWorkspaces,
+  createWorkspace as apiCreateWorkspace,
+  hideWorkspace as apiHideWorkspace,
+  pickDirectory as apiPickDirectory,
+} from '../api/workspaces.ts';
+import { createSession as apiCreateSession } from '../api/sessions.ts';
+
+export type WorkspaceSlice = {
+  workspaces: Workspace[];
+  addWorkspace: (path: string) => Promise<void>;
+  removeWorkspace: (path: string) => Promise<void>;
+  createSessionInWorkspace: (cwd: string) => Promise<void>;
+  pickAndAddWorkspace: () => Promise<void>;
+};
+
+export const createWorkspaceSlice: StateCreator<StoreState, [], [], WorkspaceSlice> = (set, get) => ({
+  workspaces: [],
+
+  addWorkspace: async (path) => {
+    set({ error: null });
+    try {
+      const workspace = await apiCreateWorkspace(path.trim());
+      set((state) => ({ workspaces: [...state.workspaces, workspace] }));
+      get().addToast('success', `Workspace added — ${workspace.path}`);
+    } catch (err) {
+      get().addToast('error', `Failed to add workspace — ${(err as Error).message}`);
+    }
+  },
+
+  removeWorkspace: async (path) => {
+    set({ error: null });
+    try {
+      await apiHideWorkspace(path);
+      const workspaces = await apiFetchWorkspaces();
+      set({ workspaces });
+      get().addToast('info', 'Workspace hidden');
+    } catch (err) {
+      get().addToast('error', `Failed to hide workspace — ${(err as Error).message}`);
+    }
+  },
+
+  createSessionInWorkspace: async (cwd) => {
+    set({ error: null });
+    try {
+      const lastConfig = get().lastModelConfig;
+      const session = await apiCreateSession({
+        cwd,
+        runtime_type: lastConfig?.provider ?? 'codex',
+        model: lastConfig?.model,
+        model_reasoning_effort: lastConfig?.reasoning,
+      });
+      set((state) => ({
+        sessions: [session, ...state.sessions],
+      }));
+      await get().selectSession(session.id);
+      get().addLogEntry('INFO', `Session created in ${cwd} — ${session.id.slice(0, 8)}`);
+      get().addToast('success', `Session created in ${cwd.split('/').pop() || cwd}`);
+    } catch (err) {
+      set({ error: (err as Error).message });
+      get().addToast('error', `Failed to create session — ${(err as Error).message}`);
+    }
+  },
+
+  pickAndAddWorkspace: async () => {
+    try {
+      const result = await apiPickDirectory();
+      if (result.cancelled || !result.path) return;
+      await get().addWorkspace(result.path);
+    } catch (err) {
+      get().addToast('error', `Failed to pick directory — ${(err as Error).message}`);
+    }
+  },
+});

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

@@ -119,12 +119,18 @@ 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 { 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; }
@@ -205,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); }
@@ -259,6 +334,16 @@ body {
 .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; }
@@ -360,6 +445,27 @@ body {
 .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; }
+.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,
+  });
+}