@cryptiklemur/lattice 0.0.0

package/client/src/stores/session.ts

@@ -0,0 +1,322 @@
+import { Store } from "@tanstack/react-store";
+import type { HistoryMessage } from "@lattice/shared";
+
+export interface ContextUsage {
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheCreationTokens: number;
+  contextWindow: number;
+}
+
+export interface ContextBreakdownSegment {
+  label: string;
+  tokens: number;
+  id: string;
+  estimated: boolean;
+}
+
+export interface ContextBreakdown {
+  segments: ContextBreakdownSegment[];
+  contextWindow: number;
+  autocompactAt: number;
+}
+
+export interface SessionState {
+  messages: HistoryMessage[];
+  isProcessing: boolean;
+  activeProjectSlug: string | null;
+  activeSessionId: string | null;
+  activeSessionTitle: string | null;
+  currentStatus: { phase: string; toolName?: string; elapsed?: number; summary?: string } | null;
+  contextUsage: ContextUsage | null;
+  contextBreakdown: ContextBreakdown | null;
+  pendingPermissionCount: number;
+  lastResponseCost: number | null;
+  lastResponseDuration: number | null;
+  lastReadIndex: number | null;
+  historyLoading: boolean;
+  wasInterrupted: boolean;
+}
+
+var sessionStore = new Store<SessionState>({
+  messages: [],
+  isProcessing: false,
+  activeProjectSlug: null,
+  activeSessionId: null,
+  activeSessionTitle: null,
+  currentStatus: null,
+  contextUsage: null,
+  contextBreakdown: null,
+  pendingPermissionCount: 0,
+  lastResponseCost: null,
+  lastResponseDuration: null,
+  lastReadIndex: null,
+  historyLoading: false,
+  wasInterrupted: false,
+});
+
+var streamGeneration = 0;
+
+export function getStreamGeneration(): number {
+  return streamGeneration;
+}
+
+export function incrementStreamGeneration(): number {
+  streamGeneration++;
+  return streamGeneration;
+}
+
+var lastReadIndices = new Map<string, number>();
+var sessionsWithUpdates = new Set<string>();
+
+export function markSessionRead(sessionId: string, messageCount: number): void {
+  lastReadIndices.set(sessionId, messageCount);
+  sessionsWithUpdates.delete(sessionId);
+}
+
+export function getLastReadIndex(sessionId: string): number {
+  return lastReadIndices.get(sessionId) ?? -1;
+}
+
+export function markSessionHasUpdates(sessionId: string): void {
+  sessionsWithUpdates.add(sessionId);
+}
+
+export function sessionHasUpdates(sessionId: string): boolean {
+  return sessionsWithUpdates.has(sessionId);
+}
+
+export function setLastReadIndex(index: number): void {
+  sessionStore.setState(function (state) {
+    return { ...state, lastReadIndex: index };
+  });
+}
+
+var currentAssistantUuid: string | null = null;
+var currentAssistantIndex: number = -1;
+
+export function getSessionStore(): Store<SessionState> {
+  return sessionStore;
+}
+
+export function mergeToolResults(messages: HistoryMessage[]): HistoryMessage[] {
+  var result: HistoryMessage[] = [];
+  var toolStartMap = new Map<string, number>();
+  for (var i = 0; i < messages.length; i++) {
+    var msg = messages[i];
+    if (msg.type === "tool_start" && msg.toolId) {
+      toolStartMap.set(msg.toolId, result.length);
+      result.push({ ...msg });
+    } else if (msg.type === "tool_result" && msg.toolId) {
+      var startIdx = toolStartMap.get(msg.toolId);
+      if (startIdx !== undefined) {
+        result[startIdx] = { ...result[startIdx], content: msg.content };
+      }
+    } else {
+      result.push(msg);
+    }
+  }
+  for (var j = 0; j < result.length; j++) {
+    if (result[j].type === "tool_start" && !result[j].content) {
+      result[j] = { ...result[j], content: "(no output)" };
+    }
+  }
+  return result;
+}
+
+export function setSessionMessages(messages: HistoryMessage[]): void {
+  currentAssistantIndex = -1;
+  var merged = mergeToolResults(messages);
+  sessionStore.setState(function (state) {
+    return { ...state, messages: merged };
+  });
+}
+
+export function addSessionMessage(message: HistoryMessage): void {
+  sessionStore.setState(function (state) {
+    var newMessages = [...state.messages, message];
+    if (message.type === "assistant" && message.uuid) {
+      currentAssistantIndex = newMessages.length - 1;
+    }
+    return { ...state, messages: newMessages };
+  });
+}
+
+export function updateLastAssistantMessage(uuid: string, deltaText: string): void {
+  sessionStore.setState(function (state) {
+    var idx = currentAssistantIndex;
+    if (idx === -1 || idx >= state.messages.length || state.messages[idx].uuid !== uuid) {
+      idx = state.messages.findLastIndex(function (msg) {
+        return msg.uuid === uuid;
+      });
+      if (idx === -1) {
+        return state;
+      }
+      currentAssistantIndex = idx;
+    }
+    var updated = state.messages.slice();
+    updated[idx] = {
+      ...updated[idx],
+      text: (updated[idx].text || "") + deltaText,
+    };
+    return { ...state, messages: updated };
+  });
+}
+
+export function updateToolResult(toolId: string, content: string): void {
+  sessionStore.setState(function (state) {
+    var idx = state.messages.findLastIndex(function (msg) {
+      return msg.toolId === toolId && msg.type === "tool_start";
+    });
+    if (idx === -1) {
+      return state;
+    }
+    var updated = state.messages.slice();
+    updated[idx] = { ...updated[idx], content: content };
+    return { ...state, messages: updated };
+  });
+}
+
+export function setIsProcessing(processing: boolean): void {
+  sessionStore.setState(function (state) {
+    return { ...state, isProcessing: processing };
+  });
+}
+
+export function setActiveSession(projectSlug: string | null, sessionId: string | null, title?: string | null): void {
+  var prevSessionId = sessionStore.state.activeSessionId;
+  if (prevSessionId) {
+    markSessionRead(prevSessionId, sessionStore.state.messages.length);
+  }
+  currentAssistantUuid = null;
+  incrementStreamGeneration();
+  sessionStore.setState(function (state) {
+    return {
+      ...state,
+      activeProjectSlug: projectSlug,
+      activeSessionId: sessionId,
+      activeSessionTitle: title ?? null,
+      messages: [],
+      isProcessing: false,
+      currentStatus: null,
+      contextUsage: null,
+      contextBreakdown: null,
+      pendingPermissionCount: 0,
+      lastResponseCost: null,
+      lastResponseDuration: null,
+      lastReadIndex: null,
+      historyLoading: true,
+      wasInterrupted: false,
+    };
+  });
+}
+
+export function setSessionTitle(title: string | null): void {
+  sessionStore.setState(function (state) {
+    return { ...state, activeSessionTitle: title };
+  });
+}
+
+export function setCurrentStatus(status: SessionState["currentStatus"]): void {
+  sessionStore.setState(function (state) {
+    return { ...state, currentStatus: status };
+  });
+}
+
+export function setContextUsage(usage: ContextUsage): void {
+  sessionStore.setState(function (state) {
+    var prev = state.contextUsage;
+    var contextWindow = usage.contextWindow > 0 ? usage.contextWindow : (prev ? prev.contextWindow : 0);
+    return {
+      ...state,
+      contextUsage: {
+        inputTokens: usage.inputTokens,
+        outputTokens: usage.outputTokens,
+        cacheReadTokens: usage.cacheReadTokens,
+        cacheCreationTokens: usage.cacheCreationTokens,
+        contextWindow: contextWindow,
+      },
+    };
+  });
+}
+
+export function clearSession(): void {
+  var prevSessionId = sessionStore.state.activeSessionId;
+  if (prevSessionId) {
+    markSessionRead(prevSessionId, sessionStore.state.messages.length);
+  }
+  currentAssistantUuid = null;
+  currentAssistantIndex = -1;
+  sessionStore.setState(function () {
+    return {
+      messages: [],
+      isProcessing: false,
+      activeProjectSlug: null,
+      activeSessionId: null,
+      activeSessionTitle: null,
+      currentStatus: null,
+      contextUsage: null,
+      contextBreakdown: null,
+      pendingPermissionCount: 0,
+      lastResponseCost: null,
+      lastResponseDuration: null,
+      lastReadIndex: null,
+      historyLoading: false,
+      wasInterrupted: false,
+    };
+  });
+}
+
+export function setLastResponseStats(cost: number, duration: number): void {
+  sessionStore.setState(function (state) {
+    return { ...state, lastResponseCost: cost, lastResponseDuration: duration };
+  });
+}
+
+export function setWasInterrupted(interrupted: boolean): void {
+  sessionStore.setState(function (state) {
+    return { ...state, wasInterrupted: interrupted };
+  });
+}
+
+export function setContextBreakdown(breakdown: ContextBreakdown): void {
+  sessionStore.setState(function (state) {
+    return { ...state, contextBreakdown: breakdown };
+  });
+}
+
+export function getCurrentAssistantUuid(): string | null {
+  return currentAssistantUuid;
+}
+
+export function setCurrentAssistantUuid(uuid: string | null): void {
+  currentAssistantUuid = uuid;
+  if (uuid === null) {
+    currentAssistantIndex = -1;
+  }
+}
+
+export function incrementPendingPermissions(): void {
+  sessionStore.setState(function (state) {
+    return { ...state, pendingPermissionCount: state.pendingPermissionCount + 1 };
+  });
+}
+
+export function updatePermissionStatus(requestId: string, status: string): void {
+  sessionStore.setState(function (state) {
+    var idx = state.messages.findLastIndex(function (msg) {
+      return msg.toolId === requestId && msg.type === "permission_request";
+    });
+    if (idx === -1) {
+      return { ...state, pendingPermissionCount: Math.max(0, state.pendingPermissionCount - 1) };
+    }
+    var updated = state.messages.slice();
+    updated[idx] = { ...updated[idx], permissionStatus: status as HistoryMessage["permissionStatus"] };
+    return {
+      ...state,
+      messages: updated,
+      pendingPermissionCount: Math.max(0, state.pendingPermissionCount - 1),
+    };
+  });
+}

package/client/src/stores/sidebar.ts

@@ -0,0 +1,336 @@
+import { Store } from "@tanstack/react-store";
+import type { ProjectSettingsSection } from "@lattice/shared";
+
+export type { ProjectSettingsSection };
+
+export type SettingsSection =
+  | "appearance" | "claude" | "environment"
+  | "mcp" | "skills" | "nodes";
+
+export type SidebarMode = "project" | "settings";
+
+export type ActiveView =
+  | { type: "dashboard" }
+  | { type: "project-dashboard" }
+  | { type: "chat" }
+  | { type: "settings"; section: SettingsSection }
+  | { type: "project-settings"; section: ProjectSettingsSection };
+
+export interface SidebarState {
+  activeProjectSlug: string | null;
+  activeSessionId: string | null;
+  sidebarMode: SidebarMode;
+  activeView: ActiveView;
+  previousView: ActiveView | null;
+  userMenuOpen: boolean;
+  projectDropdownOpen: boolean;
+  drawerOpen: boolean;
+  nodeSettingsOpen: boolean;
+}
+
+var SETTINGS_SECTIONS: SettingsSection[] = ["appearance", "claude", "environment", "mcp", "skills", "nodes"];
+
+function parseInitialUrl(): { projectSlug: string | null; sessionId: string | null; settingsSection: SettingsSection | null; projectSettingsSection: ProjectSettingsSection | null } {
+  var path = window.location.pathname;
+  var parts = path.split("/").filter(function (p) { return p.length > 0; });
+  if (parts[0] === "settings") {
+    var section = parts[1] as SettingsSection;
+    if (section && SETTINGS_SECTIONS.indexOf(section) !== -1) {
+      return { projectSlug: null, sessionId: null, settingsSection: section, projectSettingsSection: null };
+    }
+    return { projectSlug: null, sessionId: null, settingsSection: "appearance", projectSettingsSection: null };
+  }
+  if (parts.length >= 2 && parts[1] === "settings") {
+    return { projectSlug: parts[0], sessionId: null, settingsSection: null, projectSettingsSection: (parts[2] || "general") as ProjectSettingsSection };
+  }
+  if (parts.length >= 2) {
+    return { projectSlug: parts[0], sessionId: parts[1], settingsSection: null, projectSettingsSection: null };
+  }
+  if (parts.length === 1) {
+    return { projectSlug: parts[0], sessionId: null, settingsSection: null, projectSettingsSection: null };
+  }
+  return { projectSlug: null, sessionId: null, settingsSection: null, projectSettingsSection: null };
+}
+
+var initialUrl = parseInitialUrl();
+
+var sidebarStore = new Store<SidebarState>({
+  activeProjectSlug: initialUrl.settingsSection ? null : initialUrl.projectSlug,
+  activeSessionId: initialUrl.settingsSection ? null : initialUrl.sessionId,
+  sidebarMode: (initialUrl.settingsSection || initialUrl.projectSettingsSection) ? "settings" : "project",
+  activeView: initialUrl.settingsSection
+    ? { type: "settings", section: initialUrl.settingsSection }
+    : initialUrl.projectSettingsSection
+    ? { type: "project-settings", section: initialUrl.projectSettingsSection }
+    : initialUrl.projectSlug
+    ? (initialUrl.sessionId ? { type: "chat" } : { type: "project-dashboard" })
+    : { type: "dashboard" },
+  previousView: null,
+  userMenuOpen: false,
+  projectDropdownOpen: false,
+  drawerOpen: false,
+  nodeSettingsOpen: false,
+});
+
+function pushUrl(projectSlug: string | null, sessionId: string | null): void {
+  var path = "/";
+  if (projectSlug) {
+    path = "/" + projectSlug;
+    if (sessionId) {
+      path = path + "/" + sessionId;
+    }
+  }
+  if (window.location.pathname !== path) {
+    window.history.pushState(null, "", path);
+  }
+}
+
+export function getSidebarStore(): Store<SidebarState> {
+  return sidebarStore;
+}
+
+export function setActiveProjectSlug(slug: string | null): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeProjectSlug: slug,
+      activeSessionId: null,
+      sidebarMode: "project",
+      activeView: slug ? { type: "project-dashboard" } : { type: "dashboard" },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  pushUrl(slug, null);
+}
+
+export function setActiveSessionId(sessionId: string | null): void {
+  var state = sidebarStore.state;
+  sidebarStore.setState(function (s) {
+    return {
+      ...s,
+      activeSessionId: sessionId,
+      activeView: sessionId ? { type: "chat" } : s.activeView,
+    };
+  });
+  pushUrl(state.activeProjectSlug, sessionId);
+}
+
+export function navigateToSession(projectSlug: string, sessionId: string): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeProjectSlug: projectSlug,
+      activeSessionId: sessionId,
+      sidebarMode: "project",
+      activeView: { type: "chat" },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  pushUrl(projectSlug, sessionId);
+}
+
+export function openSettings(section: SettingsSection): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      sidebarMode: "settings",
+      previousView: state.activeView.type !== "settings" ? state.activeView : state.previousView,
+      activeView: { type: "settings", section: section },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  var path = "/settings/" + section;
+  if (window.location.pathname !== path) {
+    window.history.pushState(null, "", path);
+  }
+}
+
+export function setSettingsSection(section: SettingsSection): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeView: { type: "settings", section: section },
+    };
+  });
+  var path = "/settings/" + section;
+  if (window.location.pathname !== path) {
+    window.history.replaceState(null, "", path);
+  }
+}
+
+export function openProjectSettings(section: ProjectSettingsSection): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      sidebarMode: "settings",
+      previousView: state.activeView.type !== "settings" && state.activeView.type !== "project-settings" ? state.activeView : state.previousView,
+      activeView: { type: "project-settings", section: section },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  var state = sidebarStore.state;
+  var path = "/" + state.activeProjectSlug + "/settings/" + section;
+  if (window.location.pathname !== path) {
+    window.history.pushState(null, "", path);
+  }
+}
+
+export function setProjectSettingsSection(section: ProjectSettingsSection): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeView: { type: "project-settings", section: section },
+    };
+  });
+  var state = sidebarStore.state;
+  var path = "/" + state.activeProjectSlug + "/settings/" + section;
+  if (window.location.pathname !== path) {
+    window.history.replaceState(null, "", path);
+  }
+}
+
+export function exitSettings(): void {
+  var state = sidebarStore.state;
+  var restored = state.previousView ?? { type: "chat" } as ActiveView;
+  sidebarStore.setState(function (s) {
+    return {
+      ...s,
+      sidebarMode: "project",
+      activeView: restored,
+      previousView: null,
+    };
+  });
+  if (state.activeView.type === "project-settings") {
+    pushUrl(state.activeProjectSlug, null);
+  } else {
+    pushUrl(state.activeProjectSlug, state.activeSessionId);
+  }
+}
+
+export function goToProjectDashboard(): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeSessionId: null,
+      sidebarMode: "project",
+      activeView: { type: "project-dashboard" },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  var state = sidebarStore.state;
+  pushUrl(state.activeProjectSlug, null);
+}
+
+export function goToDashboard(): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      activeProjectSlug: null,
+      activeSessionId: null,
+      sidebarMode: "project",
+      activeView: { type: "dashboard" },
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+  pushUrl(null, null);
+}
+
+export function handlePopState(): void {
+  var url = parseInitialUrl();
+  if (url.settingsSection) {
+    sidebarStore.setState(function (state) {
+      return {
+        ...state,
+        sidebarMode: "settings",
+        activeView: { type: "settings", section: url.settingsSection! },
+        userMenuOpen: false,
+        projectDropdownOpen: false,
+      };
+    });
+  } else if (url.projectSettingsSection) {
+    sidebarStore.setState(function (state) {
+      return {
+        ...state,
+        activeProjectSlug: url.projectSlug,
+        sidebarMode: "settings",
+        activeView: { type: "project-settings", section: url.projectSettingsSection! },
+        userMenuOpen: false,
+        projectDropdownOpen: false,
+      };
+    });
+  } else {
+    sidebarStore.setState(function (state) {
+      return {
+        ...state,
+        activeProjectSlug: url.projectSlug,
+        activeSessionId: url.sessionId,
+        sidebarMode: "project",
+        activeView: url.projectSlug
+          ? (url.sessionId ? { type: "chat" } : { type: "project-dashboard" })
+          : { type: "dashboard" },
+        userMenuOpen: false,
+        projectDropdownOpen: false,
+      };
+    });
+  }
+}
+
+export function toggleUserMenu(): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      userMenuOpen: !state.userMenuOpen,
+      projectDropdownOpen: false,
+    };
+  });
+}
+
+export function toggleProjectDropdown(): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      projectDropdownOpen: !state.projectDropdownOpen,
+      userMenuOpen: false,
+    };
+  });
+}
+
+export function closeMenus(): void {
+  sidebarStore.setState(function (state) {
+    return {
+      ...state,
+      userMenuOpen: false,
+      projectDropdownOpen: false,
+    };
+  });
+}
+
+export function toggleDrawer(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, drawerOpen: !state.drawerOpen };
+  });
+}
+
+export function closeDrawer(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, drawerOpen: false };
+  });
+}
+
+export function openNodeSettings(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, nodeSettingsOpen: true, userMenuOpen: false };
+  });
+}
+
+export function closeNodeSettings(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, nodeSettingsOpen: false };
+  });
+}

package/client/src/stores/theme.ts

@@ -0,0 +1,44 @@
+import { Store } from "@tanstack/react-store";
+
+export interface ThemeState {
+  mode: "dark" | "light";
+  darkThemeId: string;
+  lightThemeId: string;
+}
+
+function loadInitialState(): ThemeState {
+  var mode = localStorage.getItem("lattice-theme-mode");
+  var darkThemeId = localStorage.getItem("lattice-theme-dark");
+  var lightThemeId = localStorage.getItem("lattice-theme-light");
+
+  return {
+    mode: mode === "light" ? "light" : "dark",
+    darkThemeId: darkThemeId ?? "dracula",
+    lightThemeId: lightThemeId ?? "ayu-light",
+  };
+}
+
+var themeStore = new Store<ThemeState>(loadInitialState());
+
+export function getThemeStore(): Store<ThemeState> {
+  return themeStore;
+}
+
+export function toggleMode(): void {
+  themeStore.setState(function (state) {
+    var next: ThemeState["mode"] = state.mode === "dark" ? "light" : "dark";
+    localStorage.setItem("lattice-theme-mode", next);
+    return { ...state, mode: next };
+  });
+}
+
+export function setThemeForMode(themeId: string): void {
+  themeStore.setState(function (state) {
+    if (state.mode === "dark") {
+      localStorage.setItem("lattice-theme-dark", themeId);
+      return { ...state, darkThemeId: themeId };
+    }
+    localStorage.setItem("lattice-theme-light", themeId);
+    return { ...state, lightThemeId: themeId };
+  });
+}