@cryptiklemur/lattice 1.3.0 → 1.5.0

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,
+  };
+}

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,22 +2,25 @@ 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";
 import { DashboardView } from "./components/dashboard/DashboardView";
 import { ProjectDashboardView } from "./components/dashboard/ProjectDashboardView";
+import { AnalyticsView } from "./components/analytics/AnalyticsView";
 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 +40,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 +234,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 +318,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 +357,10 @@ function RootLayout() {
     };
   }, []);
 
+  if (setupComplete === null) {
+    return <LoadingScreen />;
+  }
+
   if (!setupComplete) {
     return (
       <SetupWizard onComplete={function () { setSetupComplete(true); }} />
@@ -354,14 +383,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 +422,10 @@ function IndexPage() {
   if (sidebar.activeView.type === "project-dashboard") {
     return <ProjectDashboardView />;
   }
-  return <ChatView />;
+  if (sidebar.activeView.type === "analytics") {
+    return <AnalyticsView />;
+  }
+  return <WorkspaceView />;
 }
 
 var rootRoute = createRootRoute({

package/client/src/stores/analytics.ts

@@ -0,0 +1,54 @@
+import { Store } from "@tanstack/react-store";
+import type { AnalyticsPayload, AnalyticsPeriod, AnalyticsScope } from "@lattice/shared";
+
+export interface AnalyticsState {
+  data: AnalyticsPayload | null;
+  loading: boolean;
+  error: string | null;
+  period: AnalyticsPeriod;
+  scope: AnalyticsScope;
+  projectSlug: string | null;
+}
+
+var analyticsStore = new Store<AnalyticsState>({
+  data: null,
+  loading: false,
+  error: null,
+  period: "7d",
+  scope: "global",
+  projectSlug: null,
+});
+
+export function getAnalyticsStore(): Store<AnalyticsState> {
+  return analyticsStore;
+}
+
+export function setAnalyticsData(data: AnalyticsPayload): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, data: data, loading: false, error: null };
+  });
+}
+
+export function setAnalyticsLoading(loading: boolean): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, loading: loading };
+  });
+}
+
+export function setAnalyticsError(error: string): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, error: error, loading: false };
+  });
+}
+
+export function setAnalyticsPeriod(period: AnalyticsPeriod): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, period: period };
+  });
+}
+
+export function setAnalyticsScope(scope: AnalyticsScope, projectSlug?: string): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, scope: scope, projectSlug: projectSlug || null };
+  });
+}

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,13 +5,15 @@ export type { ProjectSettingsSection };
 
 export type SettingsSection =
   | "appearance" | "claude" | "environment"
-  | "mcp" | "skills" | "nodes";
+  | "mcp" | "skills" | "nodes" | "editor"
+  | "rules" | "memory" | "notifications";
 
 export type SidebarMode = "project" | "settings";
 
 export type ActiveView =
   | { type: "dashboard" }
   | { type: "project-dashboard" }
+  | { type: "analytics" }
   | { type: "chat" }
   | { type: "settings"; section: SettingsSection }
   | { type: "project-settings"; section: ProjectSettingsSection };
@@ -30,7 +32,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;
@@ -245,6 +247,13 @@ export function goToDashboard(): void {
   pushUrl(null, null);
 }
 
+export function goToAnalytics(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, activeView: { type: "analytics" }, sidebarMode: "project" };
+  });
+  pushUrl(sidebarStore.state.activeProjectSlug, null);
+}
+
 export function handlePopState(): void {
   var url = parseInitialUrl();
   if (url.settingsSection) {