@cryptiklemur/lattice 0.0.0

package/client/src/hooks/useProjects.ts

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from "react";
+import { useStore } from "@tanstack/react-store";
+import type { ProjectInfo } from "@lattice/shared";
+import type { ProjectsListMessage } from "@lattice/shared";
+import type { ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "./useWebSocket";
+import { setActiveProjectSlug, getSidebarStore } from "../stores/sidebar";
+
+export interface UseProjectsResult {
+  projects: ProjectInfo[];
+  activeProject: ProjectInfo | null;
+  setActiveProject: (project: ProjectInfo | null) => void;
+}
+
+export function useProjects(): UseProjectsResult {
+  var ws = useWebSocket();
+  var [projects, setProjects] = useState<ProjectInfo[]>([]);
+  var activeProjectSlug = useStore(getSidebarStore(), function (state) { return state.activeProjectSlug; });
+
+  var handleRef = useRef<(msg: ServerMessage) => void>(function () {});
+
+  useEffect(function () {
+    handleRef.current = function (msg: ServerMessage) {
+      if (msg.type === "projects:list") {
+        var list = (msg as ProjectsListMessage).projects;
+        setProjects(list);
+        var storeState = getSidebarStore().state;
+        var currentSlug = storeState.activeProjectSlug;
+        if (currentSlug !== null) {
+          var found = list.find(function (p) { return p.slug === currentSlug; });
+          if (!found && list.length > 0) {
+            setActiveProjectSlug(list[0].slug);
+          }
+        }
+      }
+    };
+  });
+
+  useEffect(function () {
+    function handler(msg: ServerMessage) {
+      handleRef.current(msg);
+    }
+
+    ws.subscribe("projects:list", handler);
+
+    return function () {
+      ws.unsubscribe("projects:list", handler);
+    };
+  }, [ws]);
+
+  useEffect(function () {
+    if (ws.status === "connected") {
+      ws.send({ type: "settings:get" });
+    }
+  }, [ws.status, ws]);
+
+  var activeProject = activeProjectSlug !== null
+    ? (projects.find(function (p) { return p.slug === activeProjectSlug; }) ?? null)
+    : null;
+
+  function setActiveProject(project: ProjectInfo | null): void {
+    setActiveProjectSlug(project ? project.slug : null);
+  }
+
+  return { projects, activeProject, setActiveProject };
+}

package/client/src/hooks/useSaveState.ts

@@ -0,0 +1,59 @@
+import { useState, useRef, useEffect } from "react";
+
+export type SaveState = "idle" | "saved" | "error";
+
+export interface UseSaveStateReturn {
+  dirty: boolean;
+  saving: boolean;
+  saveState: SaveState;
+  markDirty: () => void;
+  startSave: () => void;
+  confirmSave: () => void;
+  resetFromServer: () => void;
+}
+
+export function useSaveState(): UseSaveStateReturn {
+  var [dirty, setDirty] = useState(false);
+  var [saving, setSaving] = useState(false);
+  var [saveState, setSaveState] = useState<SaveState>("idle");
+  var saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(function () {
+    return function () {
+      if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    };
+  }, []);
+
+  function markDirty() {
+    setDirty(true);
+    setSaveState("idle");
+  }
+
+  function startSave() {
+    setSaving(true);
+    setSaveState("idle");
+
+    if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    saveTimeout.current = setTimeout(function () {
+      setSaving(false);
+      setSaveState("error");
+      setTimeout(function () { setSaveState("idle"); }, 3000);
+    }, 5000);
+  }
+
+  function confirmSave() {
+    setSaving(false);
+    setSaveState("saved");
+    setDirty(false);
+    if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    saveTimeout.current = setTimeout(function () { setSaveState("idle"); }, 1800);
+  }
+
+  function resetFromServer() {
+    setDirty(false);
+    setSaveState("idle");
+    setSaving(false);
+  }
+
+  return { dirty, saving, saveState, markDirty, startSave, confirmSave, resetFromServer };
+}

package/client/src/hooks/useSession.ts

@@ -0,0 +1,317 @@
+import { useEffect, useRef } from "react";
+import { useStore } from "@tanstack/react-store";
+import type { HistoryMessage } from "@lattice/shared";
+import type {
+  ChatDeltaMessage,
+  ChatSendMessage,
+  ChatToolStartMessage,
+  ChatToolResultMessage,
+  ChatPermissionRequestMessage,
+  ChatPermissionResolvedMessage,
+  ChatUserMessage,
+  ChatStatusMessage,
+  ChatContextUsageMessage,
+  ChatContextBreakdownMessage,
+  SessionHistoryMessage,
+  ServerMessage,
+} from "@lattice/shared";
+import { useWebSocket } from "./useWebSocket";
+import { setActiveSessionId as setSidebarSessionId } from "../stores/sidebar";
+import {
+  getSessionStore,
+  setSessionMessages,
+  addSessionMessage,
+  updateLastAssistantMessage,
+  updateToolResult,
+  setIsProcessing,
+  setActiveSession,
+  setSessionTitle,
+  setCurrentStatus,
+  setContextUsage,
+  setContextBreakdown,
+  getCurrentAssistantUuid,
+  setCurrentAssistantUuid,
+  incrementPendingPermissions,
+  updatePermissionStatus,
+  setLastResponseStats,
+  getLastReadIndex,
+  setLastReadIndex,
+  markSessionRead,
+  getStreamGeneration,
+  mergeToolResults,
+  setWasInterrupted,
+} from "../stores/session";
+import type { SessionState } from "../stores/session";
+
+var subscriptionsActive = 0;
+var activeStreamGeneration = 0;
+
+export type { SessionState };
+
+export interface UseSessionReturn extends SessionState {
+  sendMessage: (text: string, model?: string, effort?: string) => void;
+  activateSession: (projectSlug: string, sessionId: string) => void;
+  lastReadIndex: number | null;
+}
+
+export function useSession(): UseSessionReturn {
+  var store = getSessionStore();
+  var state = useStore(store, function (s) { return s; });
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var sendRef = useRef(send);
+  sendRef.current = send;
+
+  function activateSession(projectSlug: string, sessionId: string) {
+    setActiveSession(projectSlug, sessionId);
+    setSidebarSessionId(sessionId);
+    sendRef.current({ type: "session:activate", projectSlug, sessionId });
+  }
+
+  function sendMessage(text: string, model?: string, effort?: string) {
+    var currentSessionId = getSessionStore().state.activeSessionId;
+    if (!currentSessionId || !text.trim()) {
+      return;
+    }
+    var msg = { type: "chat:send" as const, text: text } as ChatSendMessage & { model?: string; effort?: string };
+    if (model && model !== "default") {
+      msg.model = model;
+    }
+    if (effort) {
+      msg.effort = effort;
+    }
+    activeStreamGeneration = getStreamGeneration();
+    sendRef.current(msg as ChatSendMessage);
+    setIsProcessing(true);
+  }
+
+  useEffect(function () {
+    subscriptionsActive++;
+    if (subscriptionsActive > 1) {
+      return function () { subscriptionsActive--; };
+    }
+
+    function isStaleStream(): boolean {
+      return activeStreamGeneration !== getStreamGeneration();
+    }
+
+    function handleUserMessage(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as ChatUserMessage;
+      setCurrentAssistantUuid(null);
+      addSessionMessage({
+        type: "user",
+        uuid: m.uuid,
+        text: m.text,
+        timestamp: Date.now(),
+      } as HistoryMessage);
+    }
+
+    function handleDelta(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as ChatDeltaMessage;
+      var uuid = getCurrentAssistantUuid();
+
+      if (!uuid) {
+        var newUuid = "assistant-" + Date.now();
+        setCurrentAssistantUuid(newUuid);
+        addSessionMessage({
+          type: "assistant",
+          uuid: newUuid,
+          text: m.text,
+          timestamp: Date.now(),
+        } as HistoryMessage);
+      } else {
+        updateLastAssistantMessage(uuid, m.text);
+      }
+    }
+
+    function handleToolStart(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as ChatToolStartMessage;
+      setCurrentAssistantUuid(null);
+      addSessionMessage({
+        type: "tool_start",
+        toolId: m.toolId,
+        name: m.name,
+        args: m.args,
+        timestamp: Date.now(),
+      } as HistoryMessage);
+    }
+
+    function handleToolResult(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as ChatToolResultMessage;
+      updateToolResult(m.toolId, m.content);
+    }
+
+    function handleDone(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as { type: string; cost: number; duration: number; sessionId?: string };
+      setIsProcessing(false);
+      setCurrentStatus(null);
+      setCurrentAssistantUuid(null);
+      setLastResponseStats(m.cost || 0, m.duration || 0);
+      var activeId = getSessionStore().state.activeSessionId;
+      if (activeId) {
+        markSessionRead(activeId, getSessionStore().state.messages.length);
+      }
+    }
+
+    function handleError(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as { type: string; message?: string };
+      setIsProcessing(false);
+      setCurrentStatus(null);
+      setCurrentAssistantUuid(null);
+      if (m.message) {
+        addSessionMessage({
+          type: "assistant",
+          uuid: "error-" + Date.now(),
+          text: "Error: " + m.message,
+          timestamp: Date.now(),
+        } as HistoryMessage);
+      }
+    }
+
+    function handleStatus(msg: ServerMessage) {
+      if (isStaleStream()) return;
+      var m = msg as ChatStatusMessage;
+      setCurrentStatus({ phase: m.phase, toolName: m.toolName, elapsed: m.elapsed, summary: m.summary });
+    }
+
+    function handleContextUsage(msg: ServerMessage) {
+      var m = msg as ChatContextUsageMessage;
+      setContextUsage({
+        inputTokens: m.inputTokens,
+        outputTokens: m.outputTokens,
+        cacheReadTokens: m.cacheReadTokens,
+        cacheCreationTokens: m.cacheCreationTokens,
+        contextWindow: m.contextWindow,
+      });
+    }
+
+    function handleContextBreakdown(msg: ServerMessage) {
+      var m = msg as ChatContextBreakdownMessage;
+      setContextBreakdown({
+        segments: m.segments,
+        contextWindow: m.contextWindow,
+        autocompactAt: m.autocompactAt,
+      });
+    }
+
+    function handlePermissionRequest(msg: ServerMessage) {
+      var m = msg as ChatPermissionRequestMessage;
+      setCurrentAssistantUuid(null);
+      addSessionMessage({
+        type: "permission_request",
+        toolId: m.requestId,
+        name: m.tool,
+        args: m.args,
+        title: m.title,
+        decisionReason: m.decisionReason,
+        permissionRule: m.permissionRule,
+        permissionStatus: "pending",
+        timestamp: Date.now(),
+      } as HistoryMessage);
+      incrementPendingPermissions();
+    }
+
+    function handlePermissionResolved(msg: ServerMessage) {
+      var m = msg as ChatPermissionResolvedMessage;
+      updatePermissionStatus(m.requestId, m.status);
+    }
+
+    function handleHistory(msg: ServerMessage) {
+      var m = msg as SessionHistoryMessage;
+      setCurrentAssistantUuid(null);
+      if (m.sessionId) {
+        var projectSlug = m.projectSlug || getSessionStore().state.activeProjectSlug;
+        setSidebarSessionId(m.sessionId);
+        activeStreamGeneration = getStreamGeneration();
+        getSessionStore().setState(function (state) {
+          return {
+            ...state,
+            activeProjectSlug: projectSlug,
+            activeSessionId: m.sessionId,
+            activeSessionTitle: m.title ?? null,
+            messages: mergeToolResults(m.messages),
+            isProcessing: false,
+            currentStatus: null,
+            pendingPermissionCount: 0,
+            lastResponseCost: null,
+            lastResponseDuration: null,
+            lastReadIndex: null,
+            historyLoading: false,
+            wasInterrupted: m.interrupted || false,
+          };
+        });
+        var storedIndex = getLastReadIndex(m.sessionId);
+        if (storedIndex >= 0 && storedIndex < m.messages.length) {
+          setLastReadIndex(storedIndex);
+        }
+        markSessionRead(m.sessionId, m.messages.length);
+      } else {
+        setSessionMessages(m.messages);
+        setIsProcessing(false);
+        setCurrentStatus(null);
+        if (m.projectSlug) {
+          getSessionStore().setState(function (state) {
+            return { ...state, activeProjectSlug: m.projectSlug };
+          });
+        }
+        if (m.title) {
+          setSessionTitle(m.title);
+        }
+      }
+      setSessionMessages(m.messages);
+    }
+
+    subscribe("chat:user_message", handleUserMessage);
+    subscribe("chat:delta", handleDelta);
+    subscribe("chat:tool_start", handleToolStart);
+    subscribe("chat:tool_result", handleToolResult);
+    subscribe("chat:done", handleDone);
+    subscribe("chat:error", handleError);
+    subscribe("chat:permission_request", handlePermissionRequest);
+    subscribe("chat:permission_resolved", handlePermissionResolved);
+    subscribe("chat:status", handleStatus);
+    subscribe("chat:context_usage", handleContextUsage);
+    subscribe("chat:context_breakdown", handleContextBreakdown);
+    subscribe("session:history", handleHistory);
+
+    return function () {
+      subscriptionsActive--;
+      unsubscribe("chat:user_message", handleUserMessage);
+      unsubscribe("chat:delta", handleDelta);
+      unsubscribe("chat:tool_start", handleToolStart);
+      unsubscribe("chat:tool_result", handleToolResult);
+      unsubscribe("chat:done", handleDone);
+      unsubscribe("chat:error", handleError);
+      unsubscribe("chat:permission_request", handlePermissionRequest);
+      unsubscribe("chat:permission_resolved", handlePermissionResolved);
+      unsubscribe("chat:status", handleStatus);
+      unsubscribe("chat:context_usage", handleContextUsage);
+      unsubscribe("chat:context_breakdown", handleContextBreakdown);
+      unsubscribe("session:history", handleHistory);
+    };
+  }, [subscribe, unsubscribe]);
+
+  return {
+    messages: state.messages,
+    isProcessing: state.isProcessing,
+    activeProjectSlug: state.activeProjectSlug,
+    activeSessionId: state.activeSessionId,
+    activeSessionTitle: state.activeSessionTitle,
+    sendMessage,
+    activateSession,
+    currentStatus: state.currentStatus,
+    contextUsage: state.contextUsage,
+    contextBreakdown: state.contextBreakdown,
+    pendingPermissionCount: state.pendingPermissionCount,
+    lastResponseCost: state.lastResponseCost,
+    lastResponseDuration: state.lastResponseDuration,
+    lastReadIndex: state.lastReadIndex,
+    historyLoading: state.historyLoading,
+    wasInterrupted: state.wasInterrupted,
+  };
+}

package/client/src/hooks/useSidebar.ts

@@ -0,0 +1,74 @@
+import { useStore } from "@tanstack/react-store";
+import {
+  getSidebarStore,
+  setActiveProjectSlug,
+  setActiveSessionId,
+  openSettings,
+  setSettingsSection,
+  openProjectSettings,
+  setProjectSettingsSection,
+  exitSettings,
+  toggleUserMenu,
+  toggleProjectDropdown,
+  closeMenus,
+  goToProjectDashboard,
+  goToDashboard,
+  toggleDrawer,
+  closeDrawer,
+  openNodeSettings,
+  closeNodeSettings,
+  navigateToSession,
+} from "../stores/sidebar";
+import type { SidebarState, SettingsSection, ProjectSettingsSection } from "../stores/sidebar";
+
+export function useSidebar(): SidebarState & {
+  setActiveProjectSlug: (slug: string | null) => void;
+  setActiveSessionId: (sessionId: string | null) => void;
+  openSettings: (section: SettingsSection) => void;
+  setSettingsSection: (section: SettingsSection) => void;
+  openProjectSettings: (section: ProjectSettingsSection) => void;
+  setProjectSettingsSection: (section: ProjectSettingsSection) => void;
+  exitSettings: () => void;
+  toggleUserMenu: () => void;
+  toggleProjectDropdown: () => void;
+  closeMenus: () => void;
+  goToProjectDashboard: () => void;
+  goToDashboard: () => void;
+  toggleDrawer: () => void;
+  closeDrawer: () => void;
+  openNodeSettings: () => void;
+  closeNodeSettings: () => void;
+  navigateToSession: (projectSlug: string, sessionId: string) => void;
+} {
+  var store = getSidebarStore();
+  var state = useStore(store, function (s) { return s; });
+
+  return {
+    activeProjectSlug: state.activeProjectSlug,
+    activeSessionId: state.activeSessionId,
+    sidebarMode: state.sidebarMode,
+    activeView: state.activeView,
+    previousView: state.previousView,
+    userMenuOpen: state.userMenuOpen,
+    projectDropdownOpen: state.projectDropdownOpen,
+    drawerOpen: state.drawerOpen,
+    setActiveProjectSlug: setActiveProjectSlug,
+    setActiveSessionId: setActiveSessionId,
+    openSettings: openSettings,
+    setSettingsSection: setSettingsSection,
+    openProjectSettings: openProjectSettings,
+    setProjectSettingsSection: setProjectSettingsSection,
+    exitSettings: exitSettings,
+    toggleUserMenu: toggleUserMenu,
+    toggleProjectDropdown: toggleProjectDropdown,
+    closeMenus: closeMenus,
+    goToProjectDashboard: goToProjectDashboard,
+    goToDashboard: goToDashboard,
+    toggleDrawer: toggleDrawer,
+    closeDrawer: closeDrawer,
+    navigateToSession: navigateToSession,
+    openNodeSettings: openNodeSettings,
+    closeNodeSettings: closeNodeSettings,
+    nodeSettingsOpen: state.nodeSettingsOpen,
+  };
+}

package/client/src/hooks/useSkills.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import type { SkillInfo } from "@lattice/shared";
+import type { ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "./useWebSocket";
+
+export function useSkills(): SkillInfo[] {
+  var ws = useWebSocket();
+  var [skills, setSkills] = useState<SkillInfo[]>([]);
+
+  useEffect(function () {
+    function handleSkillsList(msg: ServerMessage) {
+      if (msg.type === "skills:list") {
+        var listMsg = msg as { type: string; skills: SkillInfo[] };
+        setSkills(listMsg.skills);
+      }
+    }
+    ws.subscribe("skills:list", handleSkillsList);
+    return function () {
+      ws.unsubscribe("skills:list", handleSkillsList);
+    };
+  }, [ws]);
+
+  useEffect(function () {
+    if (ws.status === "connected") {
+      ws.send({ type: "skills:list_request" });
+    }
+  }, [ws.status, ws]);
+
+  return skills;
+}

package/client/src/hooks/useTheme.ts

@@ -0,0 +1,114 @@
+import { useStore } from "@tanstack/react-store";
+import { useEffect } from "react";
+import { getThemeStore, toggleMode, setThemeForMode } from "../stores/theme";
+import { themes, type ThemeEntry } from "../themes/index";
+
+function hexToOklch(hex: string): string {
+  var r = parseInt(hex.slice(0, 2), 16) / 255;
+  var g = parseInt(hex.slice(2, 4), 16) / 255;
+  var b = parseInt(hex.slice(4, 6), 16) / 255;
+
+  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+
+  var x = 0.4124564 * r + 0.3575761 * g + 0.1804375 * b;
+  var y = 0.2126729 * r + 0.7151522 * g + 0.0721750 * b;
+  var z = 0.0193339 * r + 0.1191920 * g + 0.9503041 * b;
+
+  var l_ = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
+  var m_ = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
+  var s_ = 0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z;
+
+  var l3 = Math.cbrt(l_);
+  var m3 = Math.cbrt(m_);
+  var s3 = Math.cbrt(s_);
+
+  var L = 0.2104542553 * l3 + 0.7936177850 * m3 - 0.0040720468 * s3;
+  var a = 1.9779984951 * l3 - 2.4285922050 * m3 + 0.4505937099 * s3;
+  var bOk = 0.0259040371 * l3 + 0.7827717662 * m3 - 0.8086757660 * s3;
+
+  var C = Math.sqrt(a * a + bOk * bOk);
+  var h = Math.atan2(bOk, a) * 180 / Math.PI;
+  if (h < 0) h += 360;
+
+  return (L * 100).toFixed(1) + "% " + C.toFixed(3) + " " + h.toFixed(0);
+}
+
+function contrastContent(hex: string): string {
+  var r = parseInt(hex.slice(0, 2), 16);
+  var g = parseInt(hex.slice(2, 4), 16);
+  var b = parseInt(hex.slice(4, 6), 16);
+  var lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return lum > 0.5 ? "15% 0.01 0" : "98% 0.01 0";
+}
+
+function applyTheme(entry: ThemeEntry): void {
+  var root = document.documentElement;
+  var t = entry.theme;
+
+  root.style.setProperty("--base00", "#" + t.base00);
+  root.style.setProperty("--base01", "#" + t.base01);
+  root.style.setProperty("--base02", "#" + t.base02);
+  root.style.setProperty("--base03", "#" + t.base03);
+  root.style.setProperty("--base04", "#" + t.base04);
+  root.style.setProperty("--base05", "#" + t.base05);
+  root.style.setProperty("--base06", "#" + t.base06);
+  root.style.setProperty("--base07", "#" + t.base07);
+  root.style.setProperty("--base08", "#" + t.base08);
+  root.style.setProperty("--base09", "#" + t.base09);
+  root.style.setProperty("--base0A", "#" + t.base0A);
+  root.style.setProperty("--base0B", "#" + t.base0B);
+  root.style.setProperty("--base0C", "#" + t.base0C);
+  root.style.setProperty("--base0D", "#" + t.base0D);
+  root.style.setProperty("--base0E", "#" + t.base0E);
+  root.style.setProperty("--base0F", "#" + t.base0F);
+
+  root.style.setProperty("--color-base-100", "oklch(" + hexToOklch(t.base00) + ")");
+  root.style.setProperty("--color-base-200", "oklch(" + hexToOklch(t.base01) + ")");
+  root.style.setProperty("--color-base-300", "oklch(" + hexToOklch(t.base02) + ")");
+  root.style.setProperty("--color-base-content", "oklch(" + hexToOklch(t.base05) + ")");
+  root.style.setProperty("--color-primary", "oklch(" + hexToOklch(t.base0D) + ")");
+  root.style.setProperty("--color-primary-content", "oklch(" + contrastContent(t.base0D) + ")");
+  root.style.setProperty("--color-secondary", "oklch(" + hexToOklch(t.base0E) + ")");
+  root.style.setProperty("--color-secondary-content", "oklch(" + contrastContent(t.base0E) + ")");
+  root.style.setProperty("--color-accent", "oklch(" + hexToOklch(t.base0C) + ")");
+  root.style.setProperty("--color-accent-content", "oklch(" + contrastContent(t.base0C) + ")");
+  root.style.setProperty("--color-neutral", "oklch(" + hexToOklch(t.base02) + ")");
+  root.style.setProperty("--color-neutral-content", "oklch(" + hexToOklch(t.base04) + ")");
+  root.style.setProperty("--color-info", "oklch(" + hexToOklch(t.base0C) + ")");
+  root.style.setProperty("--color-info-content", "oklch(" + contrastContent(t.base0C) + ")");
+  root.style.setProperty("--color-success", "oklch(" + hexToOklch(t.base0B) + ")");
+  root.style.setProperty("--color-success-content", "oklch(" + contrastContent(t.base0B) + ")");
+  root.style.setProperty("--color-warning", "oklch(" + hexToOklch(t.base0A) + ")");
+  root.style.setProperty("--color-warning-content", "oklch(" + contrastContent(t.base0A) + ")");
+  root.style.setProperty("--color-error", "oklch(" + hexToOklch(t.base08) + ")");
+  root.style.setProperty("--color-error-content", "oklch(" + contrastContent(t.base08) + ")");
+
+  root.dataset.theme = entry.theme.variant === "dark" ? "lattice-dark" : "lattice-light";
+  root.style.colorScheme = entry.theme.variant === "dark" ? "dark" : "light";
+}
+
+export function useTheme() {
+  var store = getThemeStore();
+  var state = useStore(store, function (s) { return s; });
+
+  var currentThemeId = state.mode === "dark" ? state.darkThemeId : state.lightThemeId;
+  var currentEntry = themes.find(function (e) { return e.id === currentThemeId; }) ?? themes[0];
+
+  useEffect(function () {
+    applyTheme(currentEntry);
+  }, [currentEntry]);
+
+  function setTheme(themeId: string): void {
+    setThemeForMode(themeId);
+  }
+
+  return {
+    mode: state.mode,
+    currentThemeId,
+    toggleMode,
+    setTheme,
+    themes,
+  };
+}

package/client/src/hooks/useWebSocket.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from "react";
+import type { ClientMessage, ServerMessage } from "@lattice/shared";
+
+export type WebSocketStatus = "connecting" | "connected" | "disconnected";
+
+export interface WebSocketContextValue {
+  status: WebSocketStatus;
+  send: (msg: ClientMessage) => void;
+  subscribe: (type: string, callback: (msg: ServerMessage) => void) => void;
+  unsubscribe: (type: string, callback: (msg: ServerMessage) => void) => void;
+}
+
+export var WebSocketContext = createContext<WebSocketContextValue | null>(null);
+
+export function useWebSocket(): WebSocketContextValue {
+  var ctx = useContext(WebSocketContext);
+  if (!ctx) {
+    throw new Error("useWebSocket must be used within a WebSocketProvider");
+  }
+  return ctx;
+}
+
+export function getWebSocketUrl(): string {
+  var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return protocol + "//" + window.location.host + "/ws";
+}