@cryptiklemur/lattice 1.2.0 → 1.4.0

package/client/src/providers/WebSocketProvider.tsx

@@ -5,6 +5,7 @@ import { WebSocketContext, getWebSocketUrl } from "../hooks/useWebSocket";
 import type { WebSocketStatus } from "../hooks/useWebSocket";
 import { showToast } from "../components/ui/Toast";
 import { getSessionStore } from "../stores/session";
+import { sendNotification } from "../hooks/useNotifications";
 
 interface WebSocketProviderProps {
   children: ReactNode;
@@ -40,6 +41,7 @@ export function WebSocketProvider(props: WebSocketProviderProps) {
       backoffRef.current = 1000;
       if (hasConnectedRef.current) {
         showToast("Reconnected to daemon", "info");
+        sendNotification("Lattice", "Reconnected to daemon", "connection");
         ws.send(JSON.stringify({ type: "settings:get" }));
 
         var sessionState = getSessionStore().state;
@@ -57,6 +59,21 @@ export function WebSocketProvider(props: WebSocketProviderProps) {
     ws.onmessage = function (event: MessageEvent) {
       try {
         var msg = JSON.parse(event.data as string) as ServerMessage;
+
+        if (msg.type === "chat:done" && document.hidden) {
+          var sessionState = getSessionStore().state;
+          var sessionTitle = sessionState.activeSessionTitle || "Session";
+          sendNotification("Claude responded", sessionTitle, "chat-done");
+        }
+
+        if (msg.type === "mesh:node_online") {
+          sendNotification("Lattice", (msg as any).nodeId + " came online", "mesh");
+        }
+
+        if (msg.type === "mesh:node_offline") {
+          sendNotification("Lattice", (msg as any).nodeId + " went offline", "mesh");
+        }
+
         var listeners = listenersRef.current.get(msg.type);
         if (listeners) {
           listeners.forEach(function (cb) {
@@ -75,6 +92,7 @@ export function WebSocketProvider(props: WebSocketProviderProps) {
       wsRef.current = null;
       if (hasConnectedRef.current) {
         showToast("Disconnected from daemon. Reconnecting...", "warning");
+        sendNotification("Lattice", "Lost connection to daemon", "connection");
       }
       scheduleReconnect();
     };

package/client/src/router.tsx

@@ -2,7 +2,7 @@ import { createRouter, createRootRoute, createRoute, createMemoryHistory } from
 import { Outlet } from "@tanstack/react-router";
 import { useState, useEffect, useRef } from "react";
 import { Sidebar } from "./components/sidebar/Sidebar";
-import { ChatView } from "./components/chat/ChatView";
+import { WorkspaceView } from "./components/workspace/WorkspaceView";
 import { SetupWizard } from "./components/setup/SetupWizard";
 import { SettingsView } from "./components/settings/SettingsView";
 import { ProjectSettingsView } from "./components/project-settings/ProjectSettingsView";
@@ -12,12 +12,14 @@ import { NodeSettingsModal } from "./components/sidebar/NodeSettingsModal";
 import { AddProjectModal } from "./components/sidebar/AddProjectModal";
 import { useSidebar } from "./hooks/useSidebar";
 import { useWebSocket } from "./hooks/useWebSocket";
-import { exitSettings, getSidebarStore, handlePopState, closeDrawer } from "./stores/sidebar";
+import { useSwipeDrawer } from "./hooks/useSwipeDrawer";
+import { exitSettings, getSidebarStore, handlePopState, closeDrawer, toggleDrawer } from "./stores/sidebar";
 
 function LoadingScreen() {
   var ws = useWebSocket();
   var [dataReceived, setDataReceived] = useState(false);
   var [minTimeElapsed, setMinTimeElapsed] = useState(false);
+  var [initialLoadDone, setInitialLoadDone] = useState(false);
   var canvasRef = useRef<HTMLCanvasElement>(null);
   var frameRef = useRef<number>(0);
 
@@ -37,16 +39,19 @@ function LoadingScreen() {
     return function () { ws.unsubscribe("projects:list", handleProjects); };
   }, [ws]);
 
-  var ready = dataReceived && minTimeElapsed;
-  var [visible, setVisible] = useState(true);
+  var initialReady = dataReceived && minTimeElapsed;
+  var isDisconnected = initialLoadDone && ws.status !== "connected";
+  var ready = initialReady && !isDisconnected;
+  var visible = !initialReady || isDisconnected;
 
   useEffect(function () {
-    if (!ready) return;
-    var timer = setTimeout(function () {
-      setVisible(false);
-    }, 300);
-    return function () { clearTimeout(timer); };
-  }, [ready]);
+    if (initialReady && !initialLoadDone) {
+      var timer = setTimeout(function () {
+        setInitialLoadDone(true);
+      }, 300);
+      return function () { clearTimeout(timer); };
+    }
+  }, [initialReady, initialLoadDone]);
 
   useEffect(function () {
     var canvas = canvasRef.current;
@@ -228,17 +233,20 @@ function LoadingScreen() {
     };
   }, []);
 
-  if (!visible) {
+  if (!visible && initialReady) {
     return null;
   }
 
-  var statusText = ws.status === "connecting" ? "Connecting..."
-    : ws.status === "disconnected" ? "Reconnecting..."
+  var statusText = isDisconnected
+    ? "Reconnecting..."
+    : ws.status === "connecting" ? "Connecting..."
     : "Loading projects...";
 
+  var bgClass = isDisconnected ? "bg-base-100/90" : "bg-base-100";
+
   return (
     <div
-      className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-base-100"
+      className={"fixed inset-0 z-[9999] flex flex-col items-center justify-center " + bgClass}
       style={{ opacity: ready ? 0 : 1, transition: "opacity 300ms ease-out", pointerEvents: ready ? "none" : "auto" }}
     >
       <div className="flex flex-col items-center gap-7">
@@ -309,11 +317,27 @@ function RemoveProjectConfirm() {
 }
 
 function RootLayout() {
-  var [setupComplete, setSetupComplete] = useState(function () {
-    return localStorage.getItem("lattice-setup-complete") === "1";
-  });
+  var [setupComplete, setSetupComplete] = useState<boolean | null>(null);
+  var ws = useWebSocket();
+
+  useEffect(function () {
+    function handleSettingsData(msg: { type: string; config?: { setupComplete?: boolean } }) {
+      if (msg.type !== "settings:data") return;
+      setSetupComplete(msg.config?.setupComplete === true);
+    }
+    ws.subscribe("settings:data", handleSettingsData as any);
+    if (ws.status === "connected") {
+      ws.send({ type: "settings:get" });
+    }
+    return function () {
+      ws.unsubscribe("settings:data", handleSettingsData as any);
+    };
+  }, [ws.status]);
 
   var sidebar = useSidebar();
+  var drawerSideRef = useRef<HTMLDivElement>(null);
+
+  useSwipeDrawer(drawerSideRef, sidebar.drawerOpen, toggleDrawer, closeDrawer);
 
   useEffect(function () {
     function handleKeyDown(e: KeyboardEvent) {
@@ -332,6 +356,10 @@ function RootLayout() {
     };
   }, []);
 
+  if (setupComplete === null) {
+    return <LoadingScreen />;
+  }
+
   if (!setupComplete) {
     return (
       <SetupWizard onComplete={function () { setSetupComplete(true); }} />
@@ -354,14 +382,14 @@ function RootLayout() {
           <Outlet />
         </div>
 
-        <div className="drawer-side z-50 h-full">
+        <div ref={drawerSideRef} className="drawer-side z-50 h-full">
           <label
             htmlFor="sidebar-drawer"
             aria-label="close sidebar"
             className="drawer-overlay"
             onClick={closeDrawer}
           />
-          <div className="h-full w-[284px] flex flex-col overflow-hidden">
+          <div className="h-full w-full lg:w-[284px] flex flex-col overflow-hidden">
             <Sidebar onSessionSelect={closeDrawer} />
           </div>
         </div>
@@ -393,7 +421,7 @@ function IndexPage() {
   if (sidebar.activeView.type === "project-dashboard") {
     return <ProjectDashboardView />;
   }
-  return <ChatView />;
+  return <WorkspaceView />;
 }
 
 var rootRoute = createRootRoute({

package/client/src/stores/session.ts

@@ -37,6 +37,11 @@ export interface SessionState {
   lastReadIndex: number | null;
   historyLoading: boolean;
   wasInterrupted: boolean;
+  promptSuggestion: string | null;
+  failedInput: string | null;
+  messageQueue: string[];
+  isBusy: boolean;
+  isPlanMode: boolean;
 }
 
 var sessionStore = new Store<SessionState>({
@@ -54,6 +59,11 @@ var sessionStore = new Store<SessionState>({
   lastReadIndex: null,
   historyLoading: false,
   wasInterrupted: false,
+  promptSuggestion: null,
+  failedInput: null,
+  messageQueue: [],
+  isBusy: false,
+  isPlanMode: false,
 });
 
 var streamGeneration = 0;
@@ -208,6 +218,11 @@ export function setActiveSession(projectSlug: string | null, sessionId: string |
       lastReadIndex: null,
       historyLoading: true,
       wasInterrupted: false,
+      promptSuggestion: null,
+      failedInput: null,
+      messageQueue: [],
+      isBusy: false,
+      isPlanMode: false,
     };
   });
 }
@@ -264,6 +279,11 @@ export function clearSession(): void {
       lastReadIndex: null,
       historyLoading: false,
       wasInterrupted: false,
+      promptSuggestion: null,
+      failedInput: null,
+      messageQueue: [],
+      isBusy: false,
+      isPlanMode: false,
     };
   });
 }
@@ -280,6 +300,122 @@ export function setWasInterrupted(interrupted: boolean): void {
   });
 }
 
+export function setPromptSuggestion(suggestion: string | null): void {
+  sessionStore.setState(function (state) {
+    return { ...state, promptSuggestion: suggestion };
+  });
+}
+
+export function setFailedInput(text: string | null): void {
+  sessionStore.setState(function (state) {
+    return { ...state, failedInput: text };
+  });
+}
+
+export function setSessionBusy(busy: boolean): void {
+  sessionStore.setState(function (state) {
+    return { ...state, isBusy: busy };
+  });
+}
+
+export function setIsPlanMode(active: boolean): void {
+  sessionStore.setState(function (state) {
+    return { ...state, isPlanMode: active };
+  });
+}
+
+export function addPromptQuestion(requestId: string, questions: Array<{ question: string; header: string; options: Array<{ label: string; description: string; preview?: string }>; multiSelect: boolean }>): void {
+  sessionStore.setState(function (state) {
+    return {
+      ...state,
+      messages: [...state.messages, {
+        type: "prompt_question",
+        toolId: requestId,
+        promptQuestions: questions,
+        promptStatus: "pending",
+        timestamp: Date.now(),
+      } as HistoryMessage],
+    };
+  });
+}
+
+export function resolvePromptQuestion(requestId: string, answers: Record<string, string>): void {
+  sessionStore.setState(function (state) {
+    return {
+      ...state,
+      messages: state.messages.map(function (msg) {
+        if (msg.type === "prompt_question" && msg.toolId === requestId) {
+          return { ...msg, promptAnswers: answers, promptStatus: "answered" };
+        }
+        return msg;
+      }),
+    };
+  });
+}
+
+export function addTodoUpdate(todos: Array<{ id: string; content: string; status: string; priority: string }>): void {
+  sessionStore.setState(function (state) {
+    var existingIndex = -1;
+    for (var i = state.messages.length - 1; i >= 0; i--) {
+      if (state.messages[i].type === "todo_update") {
+        existingIndex = i;
+        break;
+      }
+    }
+    if (existingIndex >= 0) {
+      var updated = state.messages.slice();
+      updated[existingIndex] = { ...updated[existingIndex], todos: todos, timestamp: Date.now() } as HistoryMessage;
+      return { ...state, messages: updated };
+    }
+    return {
+      ...state,
+      messages: [...state.messages, {
+        type: "todo_update",
+        todos: todos,
+        timestamp: Date.now(),
+      } as HistoryMessage],
+    };
+  });
+}
+
+export function enqueueMessage(text: string): void {
+  sessionStore.setState(function (state) {
+    return { ...state, messageQueue: [...state.messageQueue, text] };
+  });
+}
+
+export function dequeueMessage(): string | null {
+  var queue = sessionStore.state.messageQueue;
+  if (queue.length === 0) return null;
+  var first = queue[0];
+  sessionStore.setState(function (state) {
+    return { ...state, messageQueue: state.messageQueue.slice(1) };
+  });
+  return first;
+}
+
+export function removeQueuedMessage(index: number): void {
+  sessionStore.setState(function (state) {
+    var updated = state.messageQueue.slice();
+    updated.splice(index, 1);
+    return { ...state, messageQueue: updated };
+  });
+}
+
+export function updateQueuedMessage(index: number, text: string): void {
+  sessionStore.setState(function (state) {
+    var updated = state.messageQueue.slice();
+    updated[index] = text;
+    return { ...state, messageQueue: updated };
+  });
+}
+
+export function clearMessageQueue(): void {
+  sessionStore.setState(function (state) {
+    return { ...state, messageQueue: [] };
+  });
+}
+
 export function setContextBreakdown(breakdown: ContextBreakdown): void {
   sessionStore.setState(function (state) {
     return { ...state, contextBreakdown: breakdown };

package/client/src/stores/sidebar.ts

@@ -5,7 +5,8 @@ export type { ProjectSettingsSection };
 
 export type SettingsSection =
   | "appearance" | "claude" | "environment"
-  | "mcp" | "skills" | "nodes";
+  | "mcp" | "skills" | "nodes" | "editor"
+  | "rules" | "memory" | "notifications";
 
 export type SidebarMode = "project" | "settings";
 
@@ -30,7 +31,7 @@ export interface SidebarState {
   confirmRemoveSlug: string | null;
 }
 
-var SETTINGS_SECTIONS: SettingsSection[] = ["appearance", "claude", "environment", "mcp", "skills", "nodes"];
+var SETTINGS_SECTIONS: SettingsSection[] = ["appearance", "claude", "environment", "mcp", "skills", "nodes", "editor", "rules", "memory", "notifications"];
 
 function parseInitialUrl(): { projectSlug: string | null; sessionId: string | null; settingsSection: SettingsSection | null; projectSettingsSection: ProjectSettingsSection | null } {
   var path = window.location.pathname;

package/client/src/stores/workspace.ts

@@ -0,0 +1,254 @@
+import { Store } from "@tanstack/react-store";
+
+export type TabType = "chat" | "files" | "terminal" | "notes" | "tasks";
+
+export interface Tab {
+  id: string;
+  type: TabType;
+  label: string;
+  closeable: boolean;
+}
+
+export interface Pane {
+  id: string;
+  tabIds: string[];
+  activeTabId: string;
+}
+
+export interface WorkspaceState {
+  tabs: Tab[];
+  panes: Pane[];
+  activePaneId: string;
+  splitDirection: "horizontal" | "vertical" | null;
+  splitRatio: number;
+}
+
+var CHAT_TAB: Tab = { id: "chat", type: "chat", label: "Chat", closeable: false };
+
+var DEFAULT_PANE: Pane = { id: "pane-1", tabIds: ["chat"], activeTabId: "chat" };
+
+var workspaceStore = new Store<WorkspaceState>({
+  tabs: [CHAT_TAB],
+  panes: [DEFAULT_PANE],
+  activePaneId: "pane-1",
+  splitDirection: null,
+  splitRatio: 0.5,
+});
+
+export function getWorkspaceStore(): Store<WorkspaceState> {
+  return workspaceStore;
+}
+
+export function openTab(type: TabType): void {
+  workspaceStore.setState(function (state) {
+    var existing = state.tabs.find(function (t) { return t.type === type; });
+    if (existing) {
+      var paneWithTab = state.panes.find(function (p) {
+        return p.tabIds.indexOf(existing!.id) !== -1;
+      });
+      if (paneWithTab) {
+        return {
+          ...state,
+          activePaneId: paneWithTab.id,
+          panes: state.panes.map(function (p) {
+            if (p.id === paneWithTab!.id) {
+              return { ...p, activeTabId: existing!.id };
+            }
+            return p;
+          }),
+        };
+      }
+      return state;
+    }
+    var labels: Record<TabType, string> = {
+      chat: "Chat",
+      files: "Files",
+      terminal: "Terminal",
+      notes: "Notes",
+      tasks: "Tasks",
+    };
+    var tab: Tab = {
+      id: type,
+      type: type,
+      label: labels[type],
+      closeable: type !== "chat",
+    };
+    var newPanes = state.panes.map(function (p) {
+      if (p.id === state.activePaneId) {
+        return {
+          ...p,
+          tabIds: [...p.tabIds, tab.id],
+          activeTabId: tab.id,
+        };
+      }
+      return p;
+    });
+    return {
+      ...state,
+      tabs: [...state.tabs, tab],
+      panes: newPanes,
+    };
+  });
+}
+
+export function closeTab(tabId: string): void {
+  workspaceStore.setState(function (state) {
+    var tab = state.tabs.find(function (t) { return t.id === tabId; });
+    if (!tab || !tab.closeable) return state;
+
+    var filteredTabs = state.tabs.filter(function (t) { return t.id !== tabId; });
+    var newPanes = state.panes.map(function (p) {
+      var idx = p.tabIds.indexOf(tabId);
+      if (idx === -1) return p;
+      var newTabIds = p.tabIds.filter(function (id) { return id !== tabId; });
+      var newActiveTabId = p.activeTabId === tabId
+        ? (newTabIds.length > 0 ? newTabIds[newTabIds.length - 1] : "")
+        : p.activeTabId;
+      return { ...p, tabIds: newTabIds, activeTabId: newActiveTabId };
+    });
+
+    var emptyPane = newPanes.find(function (p) { return p.tabIds.length === 0; });
+    if (emptyPane && newPanes.length > 1) {
+      var remainingPanes = newPanes.filter(function (p) { return p.tabIds.length > 0; });
+      return {
+        tabs: filteredTabs,
+        panes: remainingPanes,
+        activePaneId: remainingPanes[0].id,
+        splitDirection: null,
+        splitRatio: 0.5,
+      };
+    }
+
+    return {
+      ...state,
+      tabs: filteredTabs,
+      panes: newPanes,
+    };
+  });
+}
+
+export function setActiveTab(tabId: string): void {
+  workspaceStore.setState(function (state) {
+    var paneWithTab = state.panes.find(function (p) {
+      return p.tabIds.indexOf(tabId) !== -1;
+    });
+    if (!paneWithTab) return state;
+    return {
+      ...state,
+      activePaneId: paneWithTab.id,
+      panes: state.panes.map(function (p) {
+        if (p.id === paneWithTab!.id) {
+          return { ...p, activeTabId: tabId };
+        }
+        return p;
+      }),
+    };
+  });
+}
+
+export function resetWorkspace(): void {
+  workspaceStore.setState(function () {
+    return {
+      tabs: [CHAT_TAB],
+      panes: [{ id: "pane-1", tabIds: ["chat"], activeTabId: "chat" }],
+      activePaneId: "pane-1",
+      splitDirection: null,
+      splitRatio: 0.5,
+    };
+  });
+}
+
+export function splitPane(tabId: string, direction: "horizontal" | "vertical"): void {
+  workspaceStore.setState(function (state) {
+    if (state.panes.length >= 2) return state;
+
+    var sourcePane = state.panes.find(function (p) {
+      return p.tabIds.indexOf(tabId) !== -1;
+    });
+    if (!sourcePane) return state;
+    if (sourcePane.tabIds.length < 2) return state;
+
+    var newPaneId = "pane-" + Date.now();
+    var newSourceTabIds = sourcePane.tabIds.filter(function (id) { return id !== tabId; });
+    var newSourceActiveTabId = sourcePane.activeTabId === tabId
+      ? newSourceTabIds[newSourceTabIds.length - 1]
+      : sourcePane.activeTabId;
+
+    var updatedSourcePane: Pane = {
+      ...sourcePane,
+      tabIds: newSourceTabIds,
+      activeTabId: newSourceActiveTabId,
+    };
+
+    var newPane: Pane = {
+      id: newPaneId,
+      tabIds: [tabId],
+      activeTabId: tabId,
+    };
+
+    var newPanes = state.panes.map(function (p) {
+      if (p.id === sourcePane!.id) return updatedSourcePane;
+      return p;
+    });
+    newPanes.push(newPane);
+
+    return {
+      ...state,
+      panes: newPanes,
+      activePaneId: newPaneId,
+      splitDirection: direction,
+      splitRatio: 0.5,
+    };
+  });
+}
+
+export function closePane(paneId: string): void {
+  workspaceStore.setState(function (state) {
+    if (state.panes.length <= 1) return state;
+
+    var closingPane = state.panes.find(function (p) { return p.id === paneId; });
+    var remainingPane = state.panes.find(function (p) { return p.id !== paneId; });
+    if (!closingPane || !remainingPane) return state;
+
+    var mergedTabIds = [...remainingPane.tabIds, ...closingPane.tabIds];
+
+    return {
+      ...state,
+      panes: [{
+        ...remainingPane,
+        tabIds: mergedTabIds,
+      }],
+      activePaneId: remainingPane.id,
+      splitDirection: null,
+      splitRatio: 0.5,
+    };
+  });
+}
+
+export function setPaneActiveTab(paneId: string, tabId: string): void {
+  workspaceStore.setState(function (state) {
+    return {
+      ...state,
+      activePaneId: paneId,
+      panes: state.panes.map(function (p) {
+        if (p.id === paneId) {
+          return { ...p, activeTabId: tabId };
+        }
+        return p;
+      }),
+    };
+  });
+}
+
+export function setSplitRatio(ratio: number): void {
+  var clamped = Math.min(0.8, Math.max(0.2, ratio));
+  workspaceStore.setState(function (state) {
+    return { ...state, splitRatio: clamped };
+  });
+}
+
+export function setActivePaneId(paneId: string): void {
+  workspaceStore.setState(function (state) {
+    return { ...state, activePaneId: paneId };
+  });
+}