@ottocode/web-sdk 0.1.270 → 0.1.271

package/dist/hooks/index.js

@@ -9,6 +9,7 @@ import {
   createMessage as apiCreateMessage,
   abortSession as apiAbortSession,
   deleteSession as apiDeleteSession,
+  markSessionViewed as apiMarkSessionViewed,
   updateSession as apiUpdateSession,
   getSessionQueue as apiGetSessionQueue,
   removeFromQueue as apiRemoveFromQueue,
@@ -95,7 +96,8 @@ function convertSession(apiSession) {
     ...apiSession,
     title: apiSession.title ?? null,
     createdAt: typeof apiSession.createdAt === "string" ? new Date(apiSession.createdAt).getTime() : apiSession.createdAt,
-    lastActiveAt: typeof apiSession.lastActiveAt === "string" ? new Date(apiSession.lastActiveAt).getTime() : apiSession.lastActiveAt
+    lastActiveAt: typeof apiSession.lastActiveAt === "string" ? new Date(apiSession.lastActiveAt).getTime() : apiSession.lastActiveAt,
+    lastViewedAt: typeof apiSession.lastViewedAt === "string" ? new Date(apiSession.lastViewedAt).getTime() : apiSession.lastViewedAt
   };
 }
 function convertMessage(apiMessage) {
@@ -145,6 +147,12 @@ var sessionsMixin = {
       throw new Error(extractErrorMessage(response.error));
     return convertSession(response.data);
   },
+  async markSessionViewed(sessionId) {
+    const response = await apiMarkSessionViewed({ path: { sessionId } });
+    if (response.error)
+      throw new Error(extractErrorMessage(response.error));
+    return convertSession(response.data);
+  },
   async deleteSession(sessionId) {
     const response = await apiDeleteSession({ path: { sessionId } });
     if (response.error)
@@ -872,6 +880,7 @@ class ApiClient {
   getSessionsPage = sessionsMixin.getSessionsPage;
   createSession = sessionsMixin.createSession;
   updateSession = sessionsMixin.updateSession;
+  markSessionViewed = sessionsMixin.markSessionViewed;
   deleteSession = sessionsMixin.deleteSession;
   abortSession = sessionsMixin.abortSession;
   abortMessage = sessionsMixin.abortMessage;
@@ -1184,29 +1193,117 @@ function useFiles(options = {}) {
 import { useQuery as useQuery3, useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
 // src/stores/gitStore.ts
-import { create as create8 } from "zustand";
+import { create as create9 } from "zustand";
 
 // src/stores/sessionFilesStore.ts
-import { create as create7 } from "zustand";
+import { create as create8 } from "zustand";
 
 // src/stores/researchStore.ts
-import { create as create6 } from "zustand";
+import { create as create7 } from "zustand";
 
 // src/stores/settingsStore.ts
-import { create as create5 } from "zustand";
+import { create as create6 } from "zustand";
 
 // src/stores/tunnelStore.ts
-import { create as create4 } from "zustand";
+import { create as create5 } from "zustand";
 
 // src/stores/fileBrowserStore.ts
-import { create as create3 } from "zustand";
+import { create as create4 } from "zustand";
 
 // src/stores/mcpStore.ts
-import { create as create2 } from "zustand";
+import { create as create3 } from "zustand";
 
 // src/stores/skillsStore.ts
+import { create as create2 } from "zustand";
+
+// src/stores/viewerTabsStore.ts
 import { create } from "zustand";
-var useSkillsStore = create((set) => ({
+function titleFromPath(path) {
+  return path.split("/").pop() || path;
+}
+function upsertTab(tabs, tab) {
+  const existingIndex = tabs.findIndex((item) => item.id === tab.id);
+  if (existingIndex === -1) {
+    return [...tabs, tab];
+  }
+  const next = [...tabs];
+  next[existingIndex] = tab;
+  return next;
+}
+var useViewerTabsStore = create((set) => ({
+  tabs: [],
+  activeTabId: null,
+  openGitDiffTab: (path, staged) => {
+    const id = `git-diff:${staged ? "staged" : "unstaged"}:${path}`;
+    set((state) => ({
+      tabs: upsertTab(state.tabs, {
+        id,
+        type: "git-diff",
+        title: titleFromPath(path),
+        path,
+        staged
+      }),
+      activeTabId: id
+    }));
+  },
+  openSessionFileDiffTab: (path, operations) => {
+    const id = `session-file-diff:${path}`;
+    set((state) => ({
+      tabs: upsertTab(state.tabs, {
+        id,
+        type: "session-file-diff",
+        title: titleFromPath(path),
+        path,
+        operations,
+        selectedOperationIndex: Math.max(0, operations.length - 1)
+      }),
+      activeTabId: id
+    }));
+  },
+  openFileTab: (path) => {
+    const id = `file:${path}`;
+    set((state) => ({
+      tabs: upsertTab(state.tabs, {
+        id,
+        type: "file",
+        title: titleFromPath(path),
+        path
+      }),
+      activeTabId: id
+    }));
+  },
+  openSkillFileTab: (skill, file) => {
+    const displayFile = file ?? "SKILL.md";
+    const id = `skill-file:${skill}:${displayFile}`;
+    set((state) => ({
+      tabs: upsertTab(state.tabs, {
+        id,
+        type: "skill-file",
+        title: titleFromPath(displayFile),
+        skill,
+        file
+      }),
+      activeTabId: id
+    }));
+  },
+  setActiveTab: (id) => set({ activeTabId: id }),
+  closeTab: (id) => set((state) => {
+    const closingIndex = state.tabs.findIndex((tab) => tab.id === id);
+    const tabs = state.tabs.filter((tab) => tab.id !== id);
+    let activeTabId = state.activeTabId;
+    if (state.activeTabId === id) {
+      activeTabId = tabs[closingIndex]?.id ?? tabs[closingIndex - 1]?.id ?? null;
+    }
+    return { tabs, activeTabId };
+  }),
+  updateSessionFileOperationIndex: (id, index) => set((state) => ({
+    tabs: state.tabs.map((tab) => tab.id === id && tab.type === "session-file-diff" ? { ...tab, selectedOperationIndex: index } : tab)
+  })),
+  closeAllTabs: () => set({ tabs: [], activeTabId: null })
+}));
+
+// src/stores/skillsStore.ts
+var useSkillsStore = create2((set, get) => ({
   isExpanded: false,
   skills: [],
   globalEnabled: true,
@@ -1244,12 +1341,18 @@ var useSkillsStore = create((set) => ({
   setSkills: (skills) => set({ skills }),
   setSkillsConfig: ({ skills, globalEnabled, totalCount, enabledCount }) => set({ skills, globalEnabled, totalCount, enabledCount }),
   selectSkill: (name) => set({ selectedSkill: name, isViewerOpen: false, viewingFile: null }),
-  openViewer: (file) => set({ isViewerOpen: true, viewingFile: file }),
+  openViewer: (file) => {
+    const selectedSkill = get().selectedSkill;
+    if (selectedSkill) {
+      useViewerTabsStore.getState().openSkillFileTab(selectedSkill, file);
+    }
+    set({ isViewerOpen: true, viewingFile: file });
+  },
   closeViewer: () => set({ isViewerOpen: false, viewingFile: null })
 }));
 
 // src/stores/mcpStore.ts
-var useMCPStore = create2((set) => ({
+var useMCPStore = create3((set) => ({
   isExpanded: false,
   servers: [],
   loading: new Set,
@@ -1305,7 +1408,22 @@ var useMCPStore = create2((set) => ({
 }));
 
 // src/stores/fileBrowserStore.ts
-var useFileBrowserStore = create3((set) => ({
+function getAncestorDirs(path) {
+  const normalizedPath = path.replace(/\\/g, "/").replace(/^\.\//, "");
+  const parts = normalizedPath.split("/").filter(Boolean);
+  return parts.slice(0, -1).map((_, index) => parts.slice(0, index + 1).join("/"));
+}
+function revealFileState(state, path) {
+  const expandedDirs = new Set(state.expandedDirs);
+  for (const dir of getAncestorDirs(path)) {
+    expandedDirs.add(dir);
+  }
+  return {
+    selectedFile: path,
+    expandedDirs
+  };
+}
+var useFileBrowserStore = create4((set) => ({
   isExpanded: false,
   selectedFile: null,
   isViewerOpen: false,
@@ -1340,10 +1458,14 @@ var useFileBrowserStore = create3((set) => ({
     isViewerOpen: false,
     selectedFile: null
   }),
-  openFile: (path) => set({
-    selectedFile: path,
-    isViewerOpen: true
-  }),
+  openFile: (path) => {
+    useViewerTabsStore.getState().openFileTab(path);
+    set((state) => ({
+      ...revealFileState(state, path),
+      isViewerOpen: true
+    }));
+  },
+  revealFile: (path) => set((state) => revealFileState(state, path)),
   closeViewer: () => set({
     isViewerOpen: false,
     selectedFile: null
@@ -1360,7 +1482,7 @@ var useFileBrowserStore = create3((set) => ({
 }));
 
 // src/stores/tunnelStore.ts
-var useTunnelStore = create4((set) => ({
+var useTunnelStore = create5((set) => ({
   isExpanded: false,
   status: "idle",
   url: null,
@@ -1408,7 +1530,7 @@ var useTunnelStore = create4((set) => ({
 }));
 
 // src/stores/settingsStore.ts
-var useSettingsStore = create5((set) => ({
+var useSettingsStore = create6((set) => ({
   isExpanded: false,
   toggleSidebar: () => {
     set((state) => {
@@ -1430,7 +1552,7 @@ var useSettingsStore = create5((set) => ({
 }));
 
 // src/stores/researchStore.ts
-var useResearchStore = create6((set, get) => ({
+var useResearchStore = create7((set, get) => ({
   isExpanded: false,
   activeResearchSessionId: null,
   parentSessionId: null,
@@ -1477,7 +1599,7 @@ var useResearchStore = create6((set, get) => ({
 }));
 
 // src/stores/sessionFilesStore.ts
-var useSessionFilesStore = create7((set) => ({
+var useSessionFilesStore = create8((set) => ({
   isExpanded: false,
   selectedFile: null,
   allOperations: [],
@@ -1515,13 +1637,16 @@ var useSessionFilesStore = create7((set) => ({
     allOperations: [],
     selectedOperationIndex: 0
   }),
-  openDiff: (file, operations) => set({
-    selectedFile: file,
-    allOperations: operations,
-    selectedOperationIndex: operations.length - 1,
-    isDiffOpen: true,
-    isExpanded: true
-  }),
+  openDiff: (file, operations) => {
+    useViewerTabsStore.getState().openSessionFileDiffTab(file, operations);
+    set({
+      selectedFile: file,
+      allOperations: operations,
+      selectedOperationIndex: operations.length - 1,
+      isDiffOpen: true,
+      isExpanded: true
+    });
+  },
   selectOperation: (index) => set({ selectedOperationIndex: index }),
   closeDiff: () => set({
     isDiffOpen: false,
@@ -1532,7 +1657,7 @@ var useSessionFilesStore = create7((set) => ({
 }));
 
 // src/stores/gitStore.ts
-var useGitStore = create8((set) => ({
+var useGitStore = create9((set) => ({
   isExpanded: false,
   activeSessionId: null,
   selectedFile: null,
@@ -1558,12 +1683,15 @@ var useGitStore = create8((set) => ({
   },
   expandSidebar: () => set({ isExpanded: true }),
   collapseSidebar: () => set({ isExpanded: false, isDiffOpen: false, selectedFile: null }),
-  openDiff: (file, staged) => set({
-    selectedFile: file,
-    selectedFileStaged: staged,
-    isDiffOpen: true,
-    isExpanded: true
-  }),
+  openDiff: (file, staged) => {
+    useViewerTabsStore.getState().openGitDiffTab(file, staged);
+    set({
+      selectedFile: file,
+      selectedFileStaged: staged,
+      isDiffOpen: true,
+      isExpanded: true
+    });
+  },
   closeDiff: () => set({
     isDiffOpen: false,
     selectedFile: null
@@ -1803,6 +1931,25 @@ function useUpdateSession(sessionId) {
     }
   });
 }
+function useMarkSessionViewed() {
+  const queryClient = useQueryClient3();
+  return useMutation3({
+    mutationFn: (sessionId) => apiClient.markSessionViewed(sessionId),
+    onSuccess: (updatedSession) => {
+      queryClient.setQueryData(sessionsQueryKey, (old) => {
+        if (!old)
+          return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            items: page.items.map((session) => session.id === updatedSession.id ? { ...session, ...updatedSession } : session)
+          }))
+        };
+      });
+    }
+  });
+}
 function useDeleteSession() {
   const queryClient = useQueryClient3();
   return useMutation3({
@@ -1832,7 +1979,12 @@ function useMessages(sessionId, options = {}) {
 function useSendMessage(sessionId) {
   const queryClient = useQueryClient4();
   return useMutation4({
-    mutationFn: (data) => apiClient.sendMessage(sessionId, data),
+    mutationFn: async (data) => {
+      await apiClient.markSessionViewed(sessionId).catch(() => {
+        return;
+      });
+      return apiClient.sendMessage(sessionId, data);
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["messages", sessionId] });
       queryClient.invalidateQueries({ queryKey: sessionsQueryKey });
@@ -1956,8 +2108,8 @@ class SSEClient {
 }
 
 // src/stores/toolApprovalStore.ts
-import { create as create9 } from "zustand";
-var useToolApprovalStore = create9((set) => ({
+import { create as create10 } from "zustand";
+var useToolApprovalStore = create10((set) => ({
   pendingApprovals: [],
   addPendingApproval: (approval) => set((state) => ({
     pendingApprovals: [...state.pendingApprovals, approval]
@@ -2717,9 +2869,9 @@ import {
 } from "@ottocode/api";
 
 // src/stores/toastStore.ts
-import { create as create10 } from "zustand";
+import { create as create11 } from "zustand";
 var toastId = 0;
-var useToastStore = create10((set) => ({
+var useToastStore = create11((set) => ({
   toasts: [],
   addToast: (toast) => {
     const id = `toast-${++toastId}`;
@@ -3115,8 +3267,8 @@ function useWorkingDirectory() {
 import { useEffect as useEffect5, useCallback as useCallback3 } from "react";
 
 // src/stores/focusStore.ts
-import { create as create11 } from "zustand";
-var useFocusStore = create11((set) => ({
+import { create as create12 } from "zustand";
+var useFocusStore = create12((set) => ({
   currentFocus: null,
   sessionIndex: 0,
   gitFileIndex: 0,
@@ -3128,9 +3280,9 @@ var useFocusStore = create11((set) => ({
 }));
 
 // src/stores/sidebarStore.ts
-import { create as create12 } from "zustand";
+import { create as create13 } from "zustand";
 import { persist } from "zustand/middleware";
-var useSidebarStore = create12()(persist((set) => ({
+var useSidebarStore = create13()(persist((set) => ({
   isCollapsed: false,
   toggleCollapse: () => set((state) => ({ isCollapsed: !state.isCollapsed })),
   setCollapsed: (collapsed) => set({ isCollapsed: collapsed })
@@ -3139,14 +3291,47 @@ var useSidebarStore = create12()(persist((set) => ({
 }));
 
 // src/stores/filePickerStore.ts
-import { create as create13 } from "zustand";
-var useFilePickerStore = create13((set) => ({
+import { create as create14 } from "zustand";
+var useFilePickerStore = create14((set) => ({
   isOpen: false,
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),
   toggle: () => set((state) => ({ isOpen: !state.isOpen }))
 }));
 
+// src/stores/terminalStore.ts
+import { create as create15 } from "zustand";
+var DEFAULT_HEIGHT = 300;
+var MIN_HEIGHT = 150;
+var useTerminalStore = create15((set) => ({
+  isOpen: false,
+  panelHeight: DEFAULT_HEIGHT,
+  activeTabId: null,
+  isMaximized: false,
+  get isExpanded() {
+    return this.isOpen;
+  },
+  get selectedTerminalId() {
+    return this.activeTabId;
+  },
+  openPanel: () => set({ isOpen: true }),
+  closePanel: () => set({ isOpen: false, isMaximized: false }),
+  togglePanel: () => set((s) => ({
+    isOpen: !s.isOpen,
+    isMaximized: !s.isOpen ? s.isMaximized : false
+  })),
+  setPanelHeight: (height) => set({ panelHeight: Math.max(MIN_HEIGHT, height) }),
+  selectTab: (id) => set({ activeTabId: id, isOpen: true }),
+  toggleMaximize: () => set((s) => ({ isMaximized: !s.isMaximized })),
+  expandSidebar: () => set({ isOpen: true }),
+  collapseSidebar: () => set({ isOpen: false, activeTabId: null, isMaximized: false }),
+  toggleSidebar: () => set((s) => ({
+    isOpen: !s.isOpen,
+    isMaximized: !s.isOpen ? s.isMaximized : false
+  })),
+  selectTerminal: (id) => set({ activeTabId: id, isOpen: true })
+}));
+
 // src/hooks/useKeyboardShortcuts.ts
 function useKeyboardShortcuts({
   sessionIds,
@@ -3179,12 +3364,59 @@ function useKeyboardShortcuts({
   } = useSidebarStore();
   const { isExpanded: isGitExpanded, toggleSidebar: toggleGit } = useGitStore();
   const closeDiff = useGitStore((state) => state.closeDiff);
+  const toggleSessionFiles = useSessionFilesStore((state) => state.toggleSidebar);
+  const toggleFileBrowser = useFileBrowserStore((state) => state.toggleSidebar);
+  const toggleTunnel = useTunnelStore((state) => state.toggleSidebar);
+  const toggleMCP = useMCPStore((state) => state.toggleSidebar);
+  const toggleSkills = useSkillsStore((state) => state.toggleSidebar);
+  const toggleSettings = useSettingsStore((state) => state.toggleSidebar);
   const toggleResearch = useResearchStore((state) => state.toggleSidebar);
+  const toggleTerminalPanel = useTerminalStore((state) => state.togglePanel);
   const currentSessionIndex = sessionIds.indexOf(activeSessionId || "");
   const handleKeyDown = useCallback3((e) => {
     const target = e.target;
     const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
     const isInTerminal = !!target.closest("[data-terminal-viewer]");
+    const isShortcutModifierPressed = e.ctrlKey || e.metaKey;
+    if (isShortcutModifierPressed && !e.shiftKey && !e.altKey && e.key >= "1" && e.key <= "7") {
+      e.preventDefault();
+      switch (e.key) {
+        case "1":
+          toggleGit();
+          if (isGitExpanded && currentFocus === "git") {
+            setFocus("input");
+          } else {
+            setFocus("git");
+            resetGitFileIndex();
+          }
+          break;
+        case "2":
+          toggleSessionFiles();
+          setFocus("input");
+          break;
+        case "3":
+          toggleFileBrowser();
+          setFocus("input");
+          break;
+        case "4":
+          toggleTunnel();
+          setFocus("input");
+          break;
+        case "5":
+          toggleMCP();
+          setFocus("input");
+          break;
+        case "6":
+          toggleSkills();
+          setFocus("input");
+          break;
+        case "7":
+          toggleSettings();
+          setFocus("input");
+          break;
+      }
+      return;
+    }
     if ((e.ctrlKey || e.metaKey) && e.key === "h") {
       e.preventDefault();
       if (currentFocus === "sessions") {
@@ -3241,6 +3473,11 @@ function useKeyboardShortcuts({
       toggleGit();
       return;
     }
+    if ((e.ctrlKey || e.metaKey) && e.key === "j") {
+      e.preventDefault();
+      toggleTerminalPanel();
+      return;
+    }
     if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "r") {
       e.preventDefault();
       toggleResearch();
@@ -3364,6 +3601,13 @@ function useKeyboardShortcuts({
     resetGitFileIndex,
     setSessionListCollapsed,
     toggleGit,
+    toggleSessionFiles,
+    toggleFileBrowser,
+    toggleTunnel,
+    toggleMCP,
+    toggleSkills,
+    toggleSettings,
+    toggleTerminalPanel,
     toggleResearch,
     toggleSessionList,
     onSelectSession,
@@ -3380,8 +3624,8 @@ function useKeyboardShortcuts({
     closeDiff
   ]);
   useEffect5(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [handleKeyDown]);
   return {
     currentFocus,
@@ -3934,9 +4178,18 @@ var defaultQueueState = {
 function useQueueState(sessionId) {
   const { data } = useQuery6({
     queryKey: ["queueState", sessionId],
-    queryFn: () => defaultQueueState,
+    queryFn: async () => {
+      if (!sessionId)
+        return defaultQueueState;
+      const queueState = await apiClient.getQueueState(sessionId);
+      return {
+        currentMessageId: queueState.currentMessageId,
+        queuedMessages: queueState.queuedMessages,
+        queueLength: queueState.queuedMessages.length
+      };
+    },
     enabled: !!sessionId,
-    initialData: defaultQueueState,
+    placeholderData: defaultQueueState,
     staleTime: Infinity
   });
   return data ?? defaultQueueState;
@@ -4008,8 +4261,8 @@ import {
 } from "@ottocode/api";
 
 // src/stores/pendingResearchStore.ts
-import { create as create14 } from "zustand";
-var usePendingResearchStore = create14((set, get) => ({
+import { create as create16 } from "zustand";
+var usePendingResearchStore = create16((set, get) => ({
   pendingContexts: new Map,
   addContext: (parentSessionId, context) => {
     set((state) => {
@@ -4158,8 +4411,8 @@ function useExportToSession() {
 import { useEffect as useEffect8, useRef as useRef3 } from "react";
 
 // src/stores/ottorouterStore.ts
-import { create as create15 } from "zustand";
-var useOttoRouterStore = create15((set) => ({
+import { create as create17 } from "zustand";
+var useOttoRouterStore = create17((set) => ({
   balance: null,
   usdcBalance: null,
   network: "mainnet",
@@ -4188,8 +4441,8 @@ var useOttoRouterStore = create15((set) => ({
 }));
 
 // src/stores/topupApprovalStore.ts
-import { create as create16 } from "zustand";
-var useTopupApprovalStore = create16((set) => ({
+import { create as create18 } from "zustand";
+var useTopupApprovalStore = create18((set) => ({
   pendingTopup: null,
   isProcessing: false,
   selectedMethod: null,
@@ -4342,8 +4595,8 @@ function useSetuPayments(sessionId) {
 import { useEffect as useEffect9, useCallback as useCallback6 } from "react";
 
 // src/stores/usageStore.ts
-import { create as create17 } from "zustand";
-var useUsageStore = create17((set) => ({
+import { create as create19 } from "zustand";
+var useUsageStore = create19((set) => ({
   usage: {},
   isLoading: {},
   lastFetched: {},
@@ -4592,9 +4845,9 @@ import { useEffect as useEffect12, useCallback as useCallback8, useState as useS
 import { useQueryClient as useQueryClient9 } from "@tanstack/react-query";
 
 // src/stores/onboardingStore.ts
-import { create as create18 } from "zustand";
+import { create as create20 } from "zustand";
 var STEPS = ["wallet", "defaults"];
-var useOnboardingStore = create18((set, get) => ({
+var useOnboardingStore = create20((set, get) => ({
   isOpen: false,
   currentStep: "wallet",
   manageMode: false,
@@ -5500,6 +5753,7 @@ export {
   useModels,
   useMessages,
   useMessageQueuePosition,
+  useMarkSessionViewed,
   useMCPServers,
   useMCPAuthStatus,
   useKeyboardShortcuts,
@@ -5537,4 +5791,4 @@ export {
   sessionsQueryKey
 };
 
-//# debugId=8234074EBB3B7D1264756E2164756E21
+//# debugId=26C8EA5B27C5271C64756E2164756E21