@cryptiklemur/lattice 1.3.0 → 1.5.0

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

package/client/src/styles/global.css

@@ -101,6 +101,13 @@ html, body {
   font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.6;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.prose {
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .prose code {
@@ -116,6 +123,79 @@ html, body {
   background: transparent;
 }
 
+.prose .table-wrapper {
+  overflow-x: auto;
+  margin: 0.75em 0;
+  border-radius: 0.5rem;
+  border: 1px solid oklch(from var(--color-base-content) l c h / 0.08);
+  background: oklch(from var(--color-base-100) l c h / 0.6);
+  scrollbar-width: thin;
+}
+
+.prose table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  margin: 0;
+  border: none;
+  line-height: 1.5;
+}
+
+.prose thead {
+  background: oklch(from var(--color-base-content) l c h / 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.prose th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 8px 14px;
+  color: oklch(from var(--color-base-content) l c h / 0.35);
+  border-bottom: 1px solid oklch(from var(--color-base-content) l c h / 0.1);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.prose td {
+  padding: 8px 14px;
+  color: oklch(from var(--color-base-content) l c h / 0.65);
+  border-bottom: 1px solid oklch(from var(--color-base-content) l c h / 0.04);
+  vertical-align: top;
+  white-space: normal;
+  min-width: 60px;
+}
+
+.prose td code {
+  font-size: 11px;
+  white-space: nowrap;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: oklch(from var(--color-primary) l c h / 0.08);
+  color: oklch(from var(--color-primary) l c h / 0.8);
+}
+
+.prose tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.prose tbody tr {
+  transition: background-color 150ms ease;
+}
+
+.prose tbody tr:nth-child(even) {
+  background: oklch(from var(--color-base-content) l c h / 0.015);
+}
+
+.prose tbody tr:hover {
+  background: oklch(from var(--color-primary) l c h / 0.04);
+}
+
 .bg-lattice-grid {
   background-color: transparent;
 }
@@ -156,6 +236,40 @@ html, body {
   }
 }
 
+/* Override DaisyUI drawer for smooth slide transitions on mobile.
+   DaisyUI defaults use opacity on the whole drawer-side which causes
+   an instant vanish. We keep drawer-side always opacity:1 and instead
+   slide the content panel + fade the overlay independently. */
+@media (max-width: 1023px) {
+  /* Keep the container itself always fully opaque so the slide is visible.
+     Use visibility + pointer-events to control interactivity. */
+  .drawer-side {
+    opacity: 1 !important;
+    transition: visibility 0s linear 0.25s !important;
+  }
+
+  .drawer-toggle:checked ~ .drawer-side {
+    transition: visibility 0s linear 0s !important;
+  }
+
+  /* Sidebar content: slide in/out using translate (matches DaisyUI's property) */
+  .drawer-side > *:not(.drawer-overlay) {
+    will-change: translate;
+    transition: translate 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Overlay: fade in/out */
+  .drawer-side > .drawer-overlay {
+    will-change: opacity;
+    opacity: 0;
+    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
+    opacity: 1;
+  }
+}
+
 .scrollbar-hidden {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -165,6 +279,15 @@ html, body {
   display: none;
 }
 
+@keyframes waveform {
+  0%, 100% { height: 4px; opacity: 0.3; }
+  50% { height: 16px; opacity: 0.8; }
+}
+
+.animate-waveform {
+  animation: waveform 0.6s ease-in-out infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;

package/client/src/utils/editorUrl.ts

@@ -0,0 +1,62 @@
+var JETBRAINS_IDS: Record<string, string> = {
+  webstorm: "webstorm",
+  intellij: "idea",
+  pycharm: "pycharm",
+  goland: "goland",
+};
+
+function toWindowsPath(linuxPath: string, wslDistro: string): string {
+  return "\\\\" + "wsl.localhost\\" + wslDistro + linuxPath.replace(/\//g, "\\");
+}
+
+function buildJetBrainsUrl(ideId: string, filePath: string, line?: number, projectName?: string): string {
+  var url = "jetbrains://" + ideId + "/navigate/reference?";
+  if (projectName) {
+    url += "project=" + encodeURIComponent(projectName);
+  }
+  if (filePath) {
+    url += (projectName ? "&" : "") + "path=" + encodeURIComponent(filePath);
+    if (line) {
+      url += "&line=" + line;
+    }
+  }
+  return url;
+}
+
+export interface EditorUrlOptions {
+  editorType: string;
+  projectPath: string;
+  filePath: string;
+  line?: number;
+  wslDistro?: string;
+  ideProjectName?: string;
+}
+
+export function getEditorUrl(editorType: string, projectPath: string, filePath: string, line?: number, wslDistro?: string, ideProjectName?: string): string | null {
+  var fullPath = filePath === "." ? projectPath : projectPath + "/" + filePath;
+  var resolvedPath = wslDistro ? toWindowsPath(fullPath, wslDistro) : fullPath;
+
+  var jetbrainsId = JETBRAINS_IDS[editorType];
+  if (jetbrainsId) {
+    if (ideProjectName) {
+      var jbPath = filePath === "." ? "" : filePath;
+      return buildJetBrainsUrl(jetbrainsId, jbPath, line, ideProjectName);
+    }
+    return buildJetBrainsUrl(jetbrainsId, resolvedPath, line);
+  }
+
+  if (editorType === "vscode" || editorType === "vscode-insiders" || editorType === "cursor") {
+    var scheme = editorType;
+    var isFile = filePath !== ".";
+    var lineSuffix = isFile ? ":" + (line || 1) : "";
+    if (wslDistro) {
+      return scheme + "://vscode-remote/wsl+" + wslDistro + fullPath + lineSuffix;
+    }
+    return scheme + "://file/" + resolvedPath + lineSuffix;
+  }
+  if (editorType === "sublime") {
+    return "subl://open?url=file://" + encodeURIComponent(resolvedPath) + (line ? "&line=" + line : "");
+  }
+
+  return null;
+}

package/client/vite.config.ts

@@ -1,9 +1,53 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
-  plugins: [tailwindcss(), react()],
+  plugins: [
+    tailwindcss(),
+    react(),
+    VitePWA({
+      registerType: "prompt",
+      workbox: {
+        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
+        globPatterns: ["**/*.{js,css,html,svg,png,woff2}"],
+        navigateFallback: "/index.html",
+        navigateFallbackDenylist: [/^\/ws/, /^\/api/],
+        runtimeCaching: [
+          {
+            urlPattern: /^https?:\/\/.*\.(?:js|css|woff2)$/,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "static-assets",
+              expiration: { maxEntries: 100, maxAgeSeconds: 30 * 24 * 60 * 60 },
+            },
+          },
+          {
+            urlPattern: /^https?:\/\/.*\.(?:svg|png|jpg|jpeg|gif|webp)$/,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "images",
+              expiration: { maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60 },
+            },
+          },
+        ],
+      },
+      manifest: {
+        name: "Lattice",
+        short_name: "Lattice",
+        description: "Multi-machine agentic dashboard for Claude Code",
+        display: "standalone",
+        start_url: "/",
+        theme_color: "#0d0d0d",
+        background_color: "#0d0d0d",
+        icons: [
+          { src: "/icons/icon-192.svg", sizes: "192x192", type: "image/svg+xml", purpose: "maskable" },
+          { src: "/icons/icon-512.svg", sizes: "512x512", type: "image/svg+xml", purpose: "maskable" },
+        ],
+      },
+    }),
+  ],
   server: {
     host: "0.0.0.0",
     open: true,
@@ -11,9 +55,18 @@ export default defineConfig({
       "/ws": {
         target: "ws://localhost:7654",
         ws: true,
+        configure: function (proxy) {
+          proxy.on("error", function () {});
+          proxy.on("proxyReqWs", function (_proxyReq, _req, socket) {
+            socket.on("error", function () {});
+          });
+        },
       },
       "/api": {
         target: "http://localhost:7654",
+        configure: function (proxy) {
+          proxy.on("error", function () {});
+        },
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Multi-machine agentic dashboard for Claude Code. Monitor sessions, manage MCP servers and skills, orchestrate across mesh-networked nodes.",
   "license": "MIT",
   "author": "Aaron Scherer <me@aaronscherer.me>",