repoburg 1.3.183 → 1.3.186

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

@@ -0,0 +1,492 @@
+import { create } from 'zustand';
+import type { Session, SessionDetail, Turn, Item, LogEntry, RightTab, ChangesScope, TokenUsage } from '../types/index.ts';
+import {
+  fetchSessions,
+  fetchSessionDetail,
+  createSession as apiCreateSession,
+  deleteSession as apiDeleteSession,
+  submitPrompt as apiSubmitPrompt,
+  cancelTurn as apiCancelTurn,
+} from '../api/sessions.ts';
+
+export interface CreateSessionBody {
+  title?: string;
+  runtime_type?: string;
+  model?: string;
+  cwd?: string;
+}
+
+export interface Toast {
+  id: string;
+  type: 'success' | 'error' | 'info' | 'warn';
+  message: string;
+}
+
+interface StoreState {
+  // Data
+  sessions: Session[];
+  sessionDetails: Record<string, SessionDetail>;
+  activeSessionId: string | null;
+  openTabs: string[];
+  activeTurnIndex: number;
+  activeRightTab: RightTab;
+  changesScope: ChangesScope;
+  eventLog: LogEntry[];
+  loading: boolean;
+  error: string | null;
+  showNewSessionDialog: boolean;
+  wsConnected: boolean;
+  toasts: Toast[];
+  showCommandPalette: boolean;
+  submittingPrompt: string | null;
+
+  // Actions — REST
+  init: () => Promise<void>;
+  selectSession: (id: string) => Promise<void>;
+  closeTab: (id: string) => void;
+  setActiveTurnIndex: (idx: number) => void;
+  switchRightTab: (tab: RightTab) => void;
+  setChangesScope: (scope: ChangesScope) => void;
+  createSession: (body: CreateSessionBody) => Promise<void>;
+  deleteSession: (id: string) => Promise<void>;
+  submitPrompt: (prompt: string) => Promise<void>;
+  cancelTurn: () => Promise<void>;
+  refreshActiveSession: () => Promise<void>;
+  setShowNewSessionDialog: (show: boolean) => void;
+  setWsConnected: (connected: boolean) => void;
+  addLogEntry: (level: LogEntry['level'], message: string) => void;
+  addToast: (type: Toast['type'], message: string) => void;
+  removeToast: (id: string) => void;
+  setShowCommandPalette: (show: boolean) => void;
+
+  // Actions — WebSocket event handlers
+  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;
+  onTurnCompleted: (sessionId: string, turnId: string, usage: TokenUsage) => void;
+  onTurnFailed: (sessionId: string, turnId: string, error: string) => void;
+}
+
+export const useStore = create<StoreState>((set, get) => ({
+  sessions: [],
+  sessionDetails: {},
+  activeSessionId: null,
+  openTabs: [],
+  activeTurnIndex: 0,
+  activeRightTab: 'turns',
+  changesScope: 'session',
+  eventLog: [],
+  loading: false,
+  error: null,
+  showNewSessionDialog: false,
+  wsConnected: false,
+  toasts: [],
+  showCommandPalette: false,
+  submittingPrompt: null,
+
+  // === REST Actions ===
+
+  init: async () => {
+    set({ loading: true, error: null });
+    try {
+      const sessions = await fetchSessions();
+      set({ sessions, loading: false });
+      if (sessions.length > 0 && !get().activeSessionId) {
+        await get().selectSession(sessions[0].id);
+      }
+    } catch (err) {
+      set({ loading: false, error: (err as Error).message });
+    }
+  },
+
+  selectSession: async (id) => {
+    // Check cache first
+    if (get().sessionDetails[id]) {
+      const detail = get().sessionDetails[id];
+      set({
+        activeSessionId: id,
+        activeTurnIndex: detail.turns.length > 0 ? detail.turns.length - 1 : 0,
+        activeRightTab: 'turns',
+        openTabs: get().openTabs.includes(id) ? get().openTabs : [...get().openTabs, id],
+      });
+      return;
+    }
+
+    set({ loading: true, error: null });
+    try {
+      const detail = await fetchSessionDetail(id);
+      set((state) => ({
+        sessionDetails: { ...state.sessionDetails, [id]: detail },
+        activeSessionId: id,
+        activeTurnIndex: detail.turns.length > 0 ? detail.turns.length - 1 : 0,
+        activeRightTab: 'turns',
+        openTabs: state.openTabs.includes(id) ? state.openTabs : [...state.openTabs, id],
+        loading: false,
+      }));
+    } catch (err) {
+      set({ loading: false, error: (err as Error).message });
+    }
+  },
+
+  closeTab: (id) => {
+    set((state) => {
+      const newTabs = state.openTabs.filter((t) => t !== id);
+      if (state.activeSessionId === id && newTabs.length > 0) {
+        const newActive = newTabs[newTabs.length - 1];
+        const detail = state.sessionDetails[newActive];
+        return {
+          openTabs: newTabs,
+          activeSessionId: newActive,
+          activeTurnIndex: detail && detail.turns.length > 0 ? detail.turns.length - 1 : 0,
+        };
+      }
+      return {
+        openTabs: newTabs,
+        activeSessionId: state.activeSessionId === id ? null : state.activeSessionId,
+      };
+    });
+  },
+
+  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 }),
+  setWsConnected: (connected) => set({ wsConnected: connected }),
+
+  addToast: (type, message) => {
+    const id = Math.random().toString(36).slice(2, 9);
+    set((state) => ({ toasts: [...state.toasts, { id, type, message }] }));
+    // Auto-dismiss after 4s
+    setTimeout(() => {
+      set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+    }, 4000);
+  },
+
+  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 }],
+    }));
+  },
+
+  createSession: async (body) => {
+    set({ error: null });
+    try {
+      const session = await apiCreateSession(body);
+      set((state) => ({
+        sessions: [session, ...state.sessions],
+        showNewSessionDialog: false,
+      }));
+      await get().selectSession(session.id);
+      get().addLogEntry('INFO', `Session created — ${session.id.slice(0, 8)}`);
+      get().addToast('success', `Session created — ${session.title || session.id.slice(0, 8)}`);
+    } catch (err) {
+      set({ error: (err as Error).message });
+      get().addToast('error', `Failed to create session — ${(err as Error).message}`);
+    }
+  },
+
+  deleteSession: async (id) => {
+    set({ error: null });
+    try {
+      await apiDeleteSession(id);
+      set((state) => {
+        const newDetails = { ...state.sessionDetails };
+        delete newDetails[id];
+        const newTabs = state.openTabs.filter((t) => t !== id);
+        let newActive = state.activeSessionId;
+        let newTurnIndex = state.activeTurnIndex;
+        if (state.activeSessionId === id) {
+          newActive = newTabs.length > 0 ? newTabs[newTabs.length - 1] : null;
+          const detail = newActive ? newDetails[newActive] : null;
+          newTurnIndex = detail && detail.turns.length > 0 ? detail.turns.length - 1 : 0;
+        }
+        return {
+          sessions: state.sessions.filter((s) => s.id !== id),
+          sessionDetails: newDetails,
+          openTabs: newTabs,
+          activeSessionId: newActive,
+          activeTurnIndex: newTurnIndex,
+        };
+      });
+      get().addLogEntry('INFO', `Session deleted — ${id.slice(0, 8)}`);
+      get().addToast('info', 'Session deleted');
+    } catch (err) {
+      set({ error: (err as Error).message });
+      get().addToast('error', `Failed to delete session — ${(err as Error).message}`);
+    }
+  },
+
+  submitPrompt: async (prompt) => {
+    const sessionId = get().activeSessionId;
+    if (!sessionId) return;
+
+    set({ error: null, submittingPrompt: prompt });
+
+    // Mark session as running immediately (visual feedback)
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: { ...detail, is_running: 1, status: 'running' },
+        },
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, is_running: 1, status: 'running' } : s,
+        ),
+      };
+    });
+
+    try {
+      const turn = await apiSubmitPrompt(sessionId, prompt);
+      get().addLogEntry('INFO', `Turn submitted — "${prompt.slice(0, 40)}"`);
+
+      // Add the real turn to session detail (now with real ID for WS events)
+      set((state) => {
+        const detail = state.sessionDetails[sessionId];
+        if (!detail) return { submittingPrompt: null };
+        const newTurn: Turn = { ...turn, items: [] };
+        return {
+          submittingPrompt: null,
+          sessionDetails: {
+            ...state.sessionDetails,
+            [sessionId]: {
+              ...detail,
+              turns: [...detail.turns, newTurn],
+            },
+          },
+          activeTurnIndex: detail.turns.length, // index of new turn
+        };
+      });
+    } catch (err) {
+      set({ submittingPrompt: null, error: (err as Error).message });
+      get().addLogEntry('ERROR', `Turn failed — ${(err as Error).message}`);
+      get().addToast('error', `Failed to send prompt — ${(err as Error).message}`);
+
+      // Revert running state
+      set((state) => ({
+        sessionDetails: state.sessionDetails[sessionId]
+          ? { ...state.sessionDetails, [sessionId]: { ...state.sessionDetails[sessionId], is_running: 0, status: 'active' } }
+          : state.sessionDetails,
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, is_running: 0, status: 'active' } : s,
+        ),
+      }));
+    }
+  },
+
+  cancelTurn: async () => {
+    const sessionId = get().activeSessionId;
+    if (!sessionId) return;
+
+    try {
+      await apiCancelTurn(sessionId);
+      get().addLogEntry('INFO', 'Turn cancelled');
+    } catch (err) {
+      set({ error: (err as Error).message });
+    }
+  },
+
+  refreshActiveSession: async () => {
+    const sessionId = get().activeSessionId;
+    if (!sessionId) return;
+
+    try {
+      const detail = await fetchSessionDetail(sessionId);
+      set((state) => ({
+        sessionDetails: { ...state.sessionDetails, [sessionId]: detail },
+        activeTurnIndex: detail.turns.length > 0 ? Math.min(state.activeTurnIndex, detail.turns.length - 1) : 0,
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, is_running: detail.is_running, status: detail.status } : s,
+        ),
+      }));
+    } catch (err) {
+      set({ error: (err as Error).message });
+    }
+  },
+
+  // === WebSocket Event Handlers ===
+
+  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,
+        ),
+        // If this is the active session, switch to the running turn
+        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) => {
+    // No log for item:updated — too noisy (fires frequently during streaming)
+
+    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);
+
+      // Update turn-level fields from 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 },
+        },
+      };
+    });
+  },
+
+  onTurnCompleted: (sessionId, turnId, usage) => {
+    get().addLogEntry('INFO', `turn:completed — ${usage.input_tokens} in / ${usage.output_tokens} out`);
+
+    set((state) => {
+      const detail = state.sessionDetails[sessionId];
+      if (!detail) return {};
+
+      return {
+        sessionDetails: {
+          ...state.sessionDetails,
+          [sessionId]: {
+            ...detail,
+            is_running: 0,
+            status: 'active',
+            turns: detail.turns.map((t) =>
+              t.id === turnId ? { ...t, status: 'completed', token_usage: usage } : t,
+            ),
+          },
+        },
+        sessions: state.sessions.map((s) =>
+          s.id === sessionId ? { ...s, is_running: 0, status: 'active' } : s,
+        ),
+      };
+    });
+  },
+
+  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,
+        ),
+      };
+    });
+  },
+}));
+
+/** 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;
+
+      // Find existing item by external_item_id (SDK uses same ID across started/updated/completed)
+      const existingIdx = turn.items.findIndex(
+        (i) => i.external_item_id === item.external_item_id,
+      );
+
+      if (existingIdx >= 0) {
+        // Replace existing item
+        const newItems = [...turn.items];
+        newItems[existingIdx] = { ...item, id: newItems[existingIdx].id };
+        return { ...turn, items: newItems };
+      }
+
+      // Insert new item
+      return { ...turn, items: [...turn.items, item] };
+    }),
+  };
+}