@cryptiklemur/lattice 1.2.0 → 1.4.0

package/client/src/hooks/useSession.ts

@@ -12,6 +12,7 @@ import type {
   ChatStatusMessage,
   ChatContextUsageMessage,
   ChatContextBreakdownMessage,
+  ChatPromptSuggestionMessage,
   SessionHistoryMessage,
   ServerMessage,
 } from "@lattice/shared";
@@ -40,18 +41,37 @@ import {
   getStreamGeneration,
   mergeToolResults,
   setWasInterrupted,
+  setPromptSuggestion,
+  setFailedInput,
+  enqueueMessage,
+  dequeueMessage,
+  removeQueuedMessage,
+  updateQueuedMessage,
+  clearMessageQueue,
+  setSessionBusy,
+  addPromptQuestion,
+  addTodoUpdate,
+  setIsPlanMode,
 } from "../stores/session";
 import type { SessionState } from "../stores/session";
 
 var subscriptionsActive = 0;
 var activeStreamGeneration = 0;
+var lastSentText: string | null = null;
+var lastUsedModel: string | undefined = undefined;
+var lastUsedEffort: string | undefined = undefined;
 
 export type { SessionState };
 
 export interface UseSessionReturn extends SessionState {
-  sendMessage: (text: string, model?: string, effort?: string) => void;
+  sendMessage: (text: string, attachmentIds?: string[], model?: string, effort?: string) => void;
   activateSession: (projectSlug: string, sessionId: string) => void;
+  clearFailedInput: () => void;
   lastReadIndex: number | null;
+  enqueueMessage: (text: string) => void;
+  removeQueuedMessage: (index: number) => void;
+  updateQueuedMessage: (index: number, text: string) => void;
+  clearMessageQueue: () => void;
 }
 
 export function useSession(): UseSessionReturn {
@@ -60,6 +80,7 @@ export function useSession(): UseSessionReturn {
   var { send, subscribe, unsubscribe } = useWebSocket();
   var sendRef = useRef(send);
   sendRef.current = send;
+  var sendMessageRef = useRef(function (_text: string, _attachmentIds?: string[], _model?: string, _effort?: string) {});
 
   function activateSession(projectSlug: string, sessionId: string) {
     setActiveSession(projectSlug, sessionId);
@@ -67,12 +88,15 @@ export function useSession(): UseSessionReturn {
     sendRef.current({ type: "session:activate", projectSlug, sessionId });
   }
 
-  function sendMessage(text: string, model?: string, effort?: string) {
+  function sendMessage(text: string, attachmentIds?: string[], model?: string, effort?: string) {
     var currentSessionId = getSessionStore().state.activeSessionId;
-    if (!currentSessionId || !text.trim()) {
+    if (!currentSessionId || (!text.trim() && (!attachmentIds || attachmentIds.length === 0))) {
       return;
     }
     var msg = { type: "chat:send" as const, text: text } as ChatSendMessage & { model?: string; effort?: string };
+    if (attachmentIds && attachmentIds.length > 0) {
+      msg.attachmentIds = attachmentIds;
+    }
     if (model && model !== "default") {
       msg.model = model;
     }
@@ -80,10 +104,18 @@ export function useSession(): UseSessionReturn {
       msg.effort = effort;
     }
     activeStreamGeneration = getStreamGeneration();
-    sendRef.current(msg as ChatSendMessage);
+    lastSentText = text;
+    lastUsedModel = model;
+    lastUsedEffort = effort;
+    setFailedInput(null);
+    setPromptSuggestion(null);
     setIsProcessing(true);
+    setSessionBusy(false);
+    sendRef.current(msg as ChatSendMessage);
   }
 
+  sendMessageRef.current = sendMessage;
+
   useEffect(function () {
     subscriptionsActive++;
     if (subscriptionsActive > 1) {
@@ -147,6 +179,7 @@ export function useSession(): UseSessionReturn {
     function handleDone(msg: ServerMessage) {
       if (isStaleStream()) return;
       var m = msg as { type: string; cost: number; duration: number; sessionId?: string };
+      lastSentText = null;
       setIsProcessing(false);
       setCurrentStatus(null);
       setCurrentAssistantUuid(null);
@@ -155,6 +188,14 @@ export function useSession(): UseSessionReturn {
       if (activeId) {
         markSessionRead(activeId, getSessionStore().state.messages.length);
       }
+      var queue = getSessionStore().state.messageQueue;
+      if (queue.length > 0) {
+        var combined = queue.join("\n\n");
+        clearMessageQueue();
+        setTimeout(function () {
+          sendMessageRef.current(combined, [], lastUsedModel, lastUsedEffort);
+        }, 100);
+      }
     }
 
     function handleError(msg: ServerMessage) {
@@ -163,6 +204,10 @@ export function useSession(): UseSessionReturn {
       setIsProcessing(false);
       setCurrentStatus(null);
       setCurrentAssistantUuid(null);
+      if (lastSentText) {
+        setFailedInput(lastSentText);
+        lastSentText = null;
+      }
       if (m.message) {
         addSessionMessage({
           type: "assistant",
@@ -243,6 +288,8 @@ export function useSession(): UseSessionReturn {
             lastReadIndex: null,
             historyLoading: false,
             wasInterrupted: m.interrupted || false,
+            isBusy: m.busy || false,
+            isPlanMode: false,
           };
         });
         var storedIndex = getLastReadIndex(m.sessionId);
@@ -266,6 +313,43 @@ export function useSession(): UseSessionReturn {
       setSessionMessages(m.messages);
     }
 
+    function handlePromptSuggestion(msg: ServerMessage) {
+      var m = msg as ChatPromptSuggestionMessage;
+      setPromptSuggestion(m.suggestion);
+    }
+
+    function handleSessionBusy(msg: ServerMessage) {
+      var m = msg as { type: string; sessionId: string; busy: boolean };
+      var sessionState = getSessionStore().state;
+      if (m.sessionId === sessionState.activeSessionId) {
+        if (m.busy && sessionState.isProcessing) {
+          return;
+        }
+        setSessionBusy(m.busy);
+      }
+    }
+
+    function handlePromptRequest(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as { type: string; requestId: string; questions: Array<{ question: string; header: string; options: Array<{ label: string; description: string; preview?: string }>; multiSelect: boolean }> };
+      addPromptQuestion(m.requestId, m.questions);
+    }
+
+    function handlePromptResolved(_msg: ServerMessage) {
+      // No-op — client already updated state when it sent the response
+    }
+
+    function handleTodoUpdate(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as { type: string; todos: Array<{ id: string; content: string; status: string; priority: string }> };
+      addTodoUpdate(m.todos);
+    }
+
+    function handlePlanMode(msg: ServerMessage) {
+      var m = msg as { type: string; active: boolean };
+      setIsPlanMode(m.active);
+    }
+
     subscribe("chat:user_message", handleUserMessage);
     subscribe("chat:delta", handleDelta);
     subscribe("chat:tool_start", handleToolStart);
@@ -278,6 +362,12 @@ export function useSession(): UseSessionReturn {
     subscribe("chat:context_usage", handleContextUsage);
     subscribe("chat:context_breakdown", handleContextBreakdown);
     subscribe("session:history", handleHistory);
+    subscribe("chat:prompt_suggestion", handlePromptSuggestion);
+    subscribe("session:busy", handleSessionBusy);
+    subscribe("chat:prompt_request", handlePromptRequest);
+    subscribe("chat:prompt_resolved", handlePromptResolved);
+    subscribe("chat:todo_update", handleTodoUpdate);
+    subscribe("chat:plan_mode", handlePlanMode);
 
     return function () {
       subscriptionsActive--;
@@ -293,6 +383,12 @@ export function useSession(): UseSessionReturn {
       unsubscribe("chat:context_usage", handleContextUsage);
       unsubscribe("chat:context_breakdown", handleContextBreakdown);
       unsubscribe("session:history", handleHistory);
+      unsubscribe("chat:prompt_suggestion", handlePromptSuggestion);
+      unsubscribe("session:busy", handleSessionBusy);
+      unsubscribe("chat:prompt_request", handlePromptRequest);
+      unsubscribe("chat:prompt_resolved", handlePromptResolved);
+      unsubscribe("chat:todo_update", handleTodoUpdate);
+      unsubscribe("chat:plan_mode", handlePlanMode);
     };
   }, [subscribe, unsubscribe]);
 
@@ -304,6 +400,7 @@ export function useSession(): UseSessionReturn {
     activeSessionTitle: state.activeSessionTitle,
     sendMessage,
     activateSession,
+    clearFailedInput: function () { setFailedInput(null); },
     currentStatus: state.currentStatus,
     contextUsage: state.contextUsage,
     contextBreakdown: state.contextBreakdown,
@@ -313,5 +410,14 @@ export function useSession(): UseSessionReturn {
     lastReadIndex: state.lastReadIndex,
     historyLoading: state.historyLoading,
     wasInterrupted: state.wasInterrupted,
+    promptSuggestion: state.promptSuggestion,
+    failedInput: state.failedInput,
+    messageQueue: state.messageQueue,
+    isBusy: state.isBusy,
+    isPlanMode: state.isPlanMode,
+    enqueueMessage,
+    removeQueuedMessage,
+    updateQueuedMessage,
+    clearMessageQueue,
   };
 }

package/client/src/hooks/useSpinnerVerb.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { useWebSocket } from "./useWebSocket";
+import type { ServerMessage, SettingsDataMessage } from "@lattice/shared";
+
+var DEFAULT_VERBS = ["Thinking", "Analyzing", "Processing", "Computing", "Evaluating"];
+
+export function useSpinnerVerb(active: boolean): string {
+  var [verbs, setVerbs] = useState<string[]>(DEFAULT_VERBS);
+  var [currentVerb, setCurrentVerb] = useState(DEFAULT_VERBS[0]);
+  var ws = useWebSocket();
+
+  useEffect(function () {
+    function handleSettings(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      if (data.spinnerVerbs && data.spinnerVerbs.length > 0) {
+        setVerbs(data.spinnerVerbs);
+      }
+    }
+    ws.subscribe("settings:data", handleSettings);
+    return function () { ws.unsubscribe("settings:data", handleSettings); };
+  }, [ws]);
+
+  useEffect(function () {
+    if (!active) return;
+    function pickRandom() {
+      var idx = Math.floor(Math.random() * verbs.length);
+      setCurrentVerb(verbs[idx]);
+    }
+    pickRandom();
+    var timer = setInterval(pickRandom, 3000);
+    return function () { clearInterval(timer); };
+  }, [active, verbs]);
+
+  return currentVerb;
+}

package/client/src/hooks/useSwipeDrawer.ts

@@ -0,0 +1,275 @@
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+
+var LOCK_THRESHOLD = 15;
+var SNAP_THRESHOLD = 0.35; // fraction of drawer width to snap open/close
+var VELOCITY_THRESHOLD = 0.4; // px/ms — fast flick overrides position
+var TRANSITION = "translate 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+var OVERLAY_TRANSITION = "opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+var CONTENT_TRANSITION = "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+
+/**
+ * Discord-style drag-follow drawer. The sidebar follows your finger
+ * in real time and snaps open/closed on release based on position + velocity.
+ *
+ * Works from anywhere on the page. Vertical scrolling is not interrupted.
+ */
+export function useSwipeDrawer(
+  drawerSideRef: RefObject<HTMLElement | null>,
+  isOpen: boolean,
+  onOpen: () => void,
+  onClose: () => void,
+) {
+  var stateRef = useRef({ isOpen: isOpen, onOpen: onOpen, onClose: onClose });
+  stateRef.current = { isOpen: isOpen, onOpen: onOpen, onClose: onClose };
+
+  useEffect(function () {
+    var startX = 0;
+    var startY = 0;
+    var lastX = 0;
+    var lastTime = 0;
+    var velocity = 0;
+    var tracking = false;
+    var dragging = false; // true once direction locked to horizontal
+    var direction: "h" | "v" | null = null;
+
+    var panel: HTMLElement | null = null;
+    var overlay: HTMLElement | null = null;
+    var content: HTMLElement | null = null;
+    var drawerWidth = 0;
+
+    function getElements() {
+      var side = drawerSideRef.current;
+      if (!side) return false;
+      // panel = the sidebar content (not the overlay)
+      panel = side.querySelector(":scope > *:not(.drawer-overlay)") as HTMLElement | null;
+      overlay = side.querySelector(":scope > .drawer-overlay") as HTMLElement | null;
+      // content = the main content area (sibling of drawer-side)
+      var parent = side.parentElement;
+      if (parent) {
+        content = parent.querySelector(":scope > .drawer-content") as HTMLElement | null;
+      }
+      if (panel) {
+        drawerWidth = panel.getBoundingClientRect().width;
+      }
+      return !!panel;
+    }
+
+    function setDragStyles(offsetX: number) {
+      if (!panel) return;
+      // offsetX: 0 = fully open, -drawerWidth = fully closed
+      var clamped = Math.max(-drawerWidth, Math.min(0, offsetX));
+      var progress = 1 + clamped / drawerWidth; // 0 = closed, 1 = open
+
+      panel.style.transition = "none";
+      panel.style.translate = clamped + "px";
+
+      if (overlay) {
+        overlay.style.transition = "none";
+        overlay.style.opacity = String(progress);
+      }
+
+      if (content) {
+        var scale = 1 - progress * 0.03;
+        content.style.transition = "none";
+        content.style.transform = "scale(" + scale + ")";
+        content.style.transformOrigin = "left center";
+      }
+    }
+
+    function clearDragStyles() {
+      if (panel) {
+        panel.style.transition = "";
+        panel.style.translate = "";
+      }
+      if (overlay) {
+        overlay.style.transition = "";
+        overlay.style.opacity = "";
+      }
+      if (content) {
+        content.style.transition = "";
+        content.style.transform = "";
+        content.style.transformOrigin = "";
+      }
+    }
+
+    function animateToOpen() {
+      if (!panel) return;
+      panel.style.transition = TRANSITION;
+      panel.style.translate = "0%";
+      if (overlay) {
+        overlay.style.transition = OVERLAY_TRANSITION;
+        overlay.style.opacity = "1";
+      }
+      if (content) {
+        content.style.transition = CONTENT_TRANSITION;
+        content.style.transform = "scale(0.97)";
+        content.style.transformOrigin = "left center";
+      }
+    }
+
+    function animateToClosed() {
+      if (!panel) return;
+      panel.style.transition = TRANSITION;
+      panel.style.translate = "-100%";
+      if (overlay) {
+        overlay.style.transition = OVERLAY_TRANSITION;
+        overlay.style.opacity = "0";
+      }
+      if (content) {
+        content.style.transition = CONTENT_TRANSITION;
+        content.style.transform = "scale(1)";
+        content.style.transformOrigin = "left center";
+      }
+    }
+
+    function cleanupAfterAnimation() {
+      // After the CSS transition finishes, remove inline styles
+      // so the checkbox-driven DaisyUI styles take over again
+      setTimeout(function () {
+        clearDragStyles();
+      }, 280);
+    }
+
+    function onTouchStart(e: TouchEvent) {
+      if (window.innerWidth >= 1024) return;
+      var t = e.touches[0];
+      startX = t.clientX;
+      startY = t.clientY;
+      lastX = t.clientX;
+      lastTime = Date.now();
+      velocity = 0;
+      tracking = true;
+      dragging = false;
+      direction = null;
+    }
+
+    function onTouchMove(e: TouchEvent) {
+      if (!tracking) return;
+      var t = e.touches[0];
+      var now = Date.now();
+
+      // Calculate velocity
+      var dt = now - lastTime;
+      if (dt > 0) {
+        velocity = (t.clientX - lastX) / dt;
+      }
+      lastX = t.clientX;
+      lastTime = now;
+
+      // Lock direction
+      if (direction === null) {
+        var dx = Math.abs(t.clientX - startX);
+        var dy = Math.abs(t.clientY - startY);
+        if (dx >= LOCK_THRESHOLD || dy >= LOCK_THRESHOLD) {
+          if (dx > dy) {
+            direction = "h";
+            dragging = true;
+            if (!getElements()) {
+              tracking = false;
+              return;
+            }
+            // Make drawer-side visible during drag if it's currently hidden
+            var side = drawerSideRef.current;
+            if (side) {
+              side.style.visibility = "visible";
+              side.style.pointerEvents = "auto";
+              side.style.opacity = "1";
+            }
+          } else {
+            direction = "v";
+            tracking = false;
+            return;
+          }
+        } else {
+          return;
+        }
+      }
+
+      if (!dragging) return;
+
+      var deltaX = t.clientX - startX;
+      var isOpen = stateRef.current.isOpen;
+
+      if (isOpen) {
+        // Dragging from open position: offset relative to 0 (fully open)
+        setDragStyles(Math.min(0, deltaX));
+      } else {
+        // Dragging from closed position: offset relative to -drawerWidth
+        setDragStyles(-drawerWidth + Math.max(0, deltaX));
+      }
+    }
+
+    function onTouchEnd() {
+      if (!tracking || !dragging) {
+        tracking = false;
+        direction = null;
+        return;
+      }
+
+      var deltaX = lastX - startX;
+      var isOpen = stateRef.current.isOpen;
+
+      tracking = false;
+      dragging = false;
+      direction = null;
+
+      // Decide: snap open or closed?
+      // Fast flick overrides position
+      var shouldOpen: boolean;
+
+      if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
+        shouldOpen = velocity > 0;
+      } else if (isOpen) {
+        // Currently open: close if dragged past threshold
+        shouldOpen = deltaX > -drawerWidth * SNAP_THRESHOLD;
+      } else {
+        // Currently closed: open if dragged past threshold
+        shouldOpen = deltaX > drawerWidth * SNAP_THRESHOLD;
+      }
+
+      if (shouldOpen) {
+        animateToOpen();
+        if (!isOpen) stateRef.current.onOpen();
+      } else {
+        animateToClosed();
+        if (isOpen) stateRef.current.onClose();
+      }
+
+      cleanupAfterAnimation();
+    }
+
+    function onTouchCancel() {
+      if (dragging) {
+        clearDragStyles();
+        // Restore drawer-side to CSS-driven state
+        var side = drawerSideRef.current;
+        if (side) {
+          side.style.visibility = "";
+          side.style.pointerEvents = "";
+          side.style.opacity = "";
+        }
+        if (content) {
+          content.style.transition = "";
+          content.style.transform = "";
+          content.style.transformOrigin = "";
+        }
+      }
+      tracking = false;
+      dragging = false;
+      direction = null;
+    }
+
+    document.addEventListener("touchstart", onTouchStart, { passive: true });
+    document.addEventListener("touchmove", onTouchMove, { passive: true });
+    document.addEventListener("touchend", onTouchEnd, { passive: true });
+    document.addEventListener("touchcancel", onTouchCancel, { passive: true });
+
+    return function () {
+      document.removeEventListener("touchstart", onTouchStart);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }, [drawerSideRef]);
+}

package/client/src/hooks/useVoiceRecorder.ts

@@ -0,0 +1,123 @@
+import { useState, useCallback, useRef } from "react";
+
+export interface UseVoiceRecorderReturn {
+  isRecording: boolean;
+  isSupported: boolean;
+  isSpeaking: boolean;
+  elapsed: number;
+  interimTranscript: string;
+  start: () => void;
+  stop: () => string;
+  cancel: () => void;
+}
+
+export function useVoiceRecorder(): UseVoiceRecorderReturn {
+  var [isRecording, setIsRecording] = useState(false);
+  var [isSpeaking, setIsSpeaking] = useState(false);
+  var [elapsed, setElapsed] = useState(0);
+  var [interimTranscript, setInterimTranscript] = useState("");
+
+  var recognitionRef = useRef<SpeechRecognition | null>(null);
+  var timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  var finalTranscriptRef = useRef("");
+  var startTimeRef = useRef(0);
+
+  var SpeechRecognitionClass = typeof window !== "undefined"
+    ? (window as unknown as { SpeechRecognition?: typeof SpeechRecognition; webkitSpeechRecognition?: typeof SpeechRecognition }).SpeechRecognition
+      || (window as unknown as { webkitSpeechRecognition?: typeof SpeechRecognition }).webkitSpeechRecognition
+    : undefined;
+
+  var isSupported = !!SpeechRecognitionClass;
+
+  var cleanup = useCallback(function () {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setIsRecording(false);
+    setIsSpeaking(false);
+    setElapsed(0);
+    setInterimTranscript("");
+    recognitionRef.current = null;
+  }, []);
+
+  var start = useCallback(function () {
+    if (!SpeechRecognitionClass || isRecording) return;
+
+    var recognition = new SpeechRecognitionClass();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.lang = navigator.language || "en-US";
+
+    recognitionRef.current = recognition;
+    finalTranscriptRef.current = "";
+
+    recognition.onresult = function (event: SpeechRecognitionEvent) {
+      var interim = "";
+      var final = "";
+      for (var i = 0; i < event.results.length; i++) {
+        var result = event.results[i];
+        if (result.isFinal) {
+          final += result[0].transcript;
+        } else {
+          interim += result[0].transcript;
+        }
+      }
+      finalTranscriptRef.current = final;
+      setInterimTranscript(final + interim);
+    };
+
+    recognition.onspeechstart = function () {
+      setIsSpeaking(true);
+    };
+
+    recognition.onspeechend = function () {
+      setIsSpeaking(false);
+    };
+
+    recognition.onerror = function (event: SpeechRecognitionErrorEvent) {
+      console.error("[voice] Recognition error:", event.error);
+      cleanup();
+    };
+
+    recognition.onend = function () {
+      cleanup();
+    };
+
+    recognition.start();
+    setIsRecording(true);
+    startTimeRef.current = Date.now();
+
+    timerRef.current = setInterval(function () {
+      setElapsed(Math.floor((Date.now() - startTimeRef.current) / 1000));
+    }, 1000);
+  }, [SpeechRecognitionClass, isRecording, cleanup]);
+
+  var stop = useCallback(function (): string {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+    var transcript = finalTranscriptRef.current || interimTranscript;
+    cleanup();
+    return transcript;
+  }, [interimTranscript, cleanup]);
+
+  var cancel = useCallback(function () {
+    if (recognitionRef.current) {
+      recognitionRef.current.abort();
+    }
+    finalTranscriptRef.current = "";
+    cleanup();
+  }, [cleanup]);
+
+  return {
+    isRecording,
+    isSupported,
+    isSpeaking,
+    elapsed,
+    interimTranscript,
+    start,
+    stop,
+    cancel,
+  };
+}

package/client/src/hooks/useWorkspace.ts

@@ -0,0 +1,48 @@
+import { useStore } from "@tanstack/react-store";
+import {
+  getWorkspaceStore,
+  openTab,
+  closeTab,
+  setActiveTab,
+  resetWorkspace,
+  splitPane,
+  closePane,
+  setPaneActiveTab,
+  setSplitRatio,
+  setActivePaneId,
+} from "../stores/workspace";
+import type { WorkspaceState, TabType } from "../stores/workspace";
+
+export interface UseWorkspaceReturn extends WorkspaceState {
+  activeTabId: string;
+  openTab: (type: TabType) => void;
+  closeTab: (tabId: string) => void;
+  setActiveTab: (tabId: string) => void;
+  resetWorkspace: () => void;
+  splitPane: (tabId: string, direction: "horizontal" | "vertical") => void;
+  closePane: (paneId: string) => void;
+  setPaneActiveTab: (paneId: string, tabId: string) => void;
+  setSplitRatio: (ratio: number) => void;
+  setActivePaneId: (paneId: string) => void;
+}
+
+export function useWorkspace(): UseWorkspaceReturn {
+  var state = useStore(getWorkspaceStore(), function (s) { return s; });
+  return {
+    tabs: state.tabs,
+    panes: state.panes,
+    activePaneId: state.activePaneId,
+    splitDirection: state.splitDirection,
+    splitRatio: state.splitRatio,
+    activeTabId: state.panes.find(function (p) { return p.id === state.activePaneId; })?.activeTabId ?? state.panes[0]?.activeTabId ?? "chat",
+    openTab: openTab,
+    closeTab: closeTab,
+    setActiveTab: setActiveTab,
+    resetWorkspace: resetWorkspace,
+    splitPane: splitPane,
+    closePane: closePane,
+    setPaneActiveTab: setPaneActiveTab,
+    setSplitRatio: setSplitRatio,
+    setActivePaneId: setActivePaneId,
+  };
+}