@cryptiklemur/lattice 1.2.0 → 1.4.0

package/client/src/components/workspace/TerminalView.tsx

@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { Plus, X } from "lucide-react";
+import { TerminalInstance } from "./TerminalInstance";
+
+interface TerminalTab {
+  id: string;
+  label: string;
+}
+
+var nextTermNum = 1;
+
+function makeTab(): TerminalTab {
+  var num = nextTermNum++;
+  return { id: `term-${num}-${Date.now()}`, label: `Terminal ${num}` };
+}
+
+export function TerminalView() {
+  var initialTab = makeTab();
+  var [tabs, setTabs] = useState<TerminalTab[]>([initialTab]);
+  var [activeId, setActiveId] = useState<string>(initialTab.id);
+
+  function addTab() {
+    var tab = makeTab();
+    setTabs(function(prev) { return [...prev, tab]; });
+    setActiveId(tab.id);
+  }
+
+  function closeTab(id: string) {
+    setTabs(function(prev) {
+      if (prev.length === 1) {
+        var replacement = makeTab();
+        setActiveId(replacement.id);
+        return [replacement];
+      }
+      var next = prev.filter(function(t) { return t.id !== id; });
+      if (id === activeId) {
+        var idx = prev.findIndex(function(t) { return t.id === id; });
+        var newActive = next[Math.min(idx, next.length - 1)];
+        setActiveId(newActive.id);
+      }
+      return next;
+    });
+  }
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      <div role="tablist" className="flex items-center h-8 bg-base-200 border-b border-base-content/15 flex-shrink-0 overflow-x-auto">
+        {tabs.map(function(tab) {
+          var isActive = tab.id === activeId;
+          return (
+            <div
+              key={tab.id}
+              tabIndex={0}
+              role="tab"
+              aria-selected={isActive}
+              className={[
+                "flex items-center gap-1 px-3 h-full text-[12px] cursor-pointer select-none border-r border-base-content/15 flex-shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200",
+                isActive
+                  ? "bg-base-100 text-base-content"
+                  : "text-base-content/50 hover:text-base-content hover:bg-base-100/50",
+              ].join(" ")}
+              onClick={function() { setActiveId(tab.id); }}
+              onKeyDown={function(e) {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveId(tab.id);
+                }
+              }}
+            >
+              <span>{tab.label}</span>
+              {tabs.length > 1 && (
+                <button
+                  className="ml-1 rounded hover:bg-base-300 p-1 sm:p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+                  aria-label={"Close " + tab.label}
+                  onClick={function(e) {
+                    e.stopPropagation();
+                    closeTab(tab.id);
+                  }}
+                >
+                  <X className="!size-3" />
+                </button>
+              )}
+            </div>
+          );
+        })}
+        <button
+          className="flex items-center justify-center w-10 sm:w-8 h-full text-base-content/50 hover:text-base-content hover:bg-base-100/50 flex-shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+          aria-label="New terminal"
+          onClick={addTab}
+          title="New terminal"
+        >
+          <Plus className="!size-4" />
+        </button>
+      </div>
+      <div className="flex-1 min-h-0 relative">
+        {tabs.map(function(tab) {
+          return (
+            <div
+              key={tab.id}
+              className="absolute inset-0"
+              style={{ display: tab.id === activeId ? "block" : "none" }}
+            >
+              <TerminalInstance instanceId={tab.id} visible={tab.id === activeId} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/WorkspaceView.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { WifiOff } from "lucide-react";
+import { useWorkspace } from "../../hooks/useWorkspace";
+import { useOnline } from "../../hooks/useOnline";
+import { TabBar } from "./TabBar";
+import { SplitPane } from "./SplitPane";
+import { ChatView } from "../chat/ChatView";
+import { TerminalView } from "./TerminalView";
+import { FileBrowser } from "./FileBrowser";
+import { NotesView } from "./NotesView";
+import { ScheduledTasksView } from "./ScheduledTasksView";
+import type { Pane, Tab } from "../../stores/workspace";
+
+var TAB_COMPONENTS: Record<string, () => React.JSX.Element> = {
+  chat: ChatView,
+  files: FileBrowser,
+  terminal: TerminalView,
+  notes: NotesView,
+  tasks: ScheduledTasksView,
+};
+
+function PaneContent({ pane, tabs, isActive, onFocus }: {
+  pane: Pane;
+  tabs: Tab[];
+  isActive: boolean;
+  onFocus: () => void;
+}) {
+  var online = useOnline();
+  var paneTabs = pane.tabIds.map(function (id) {
+    return tabs.find(function (t) { return t.id === id; });
+  }).filter(function (t): t is Tab { return t != null; });
+
+  return (
+    <div
+      className="flex flex-col h-full w-full overflow-hidden"
+      onClick={onFocus}
+    >
+      <TabBar paneId={pane.id} isActivePane={isActive} />
+      {!online && (
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-warning/10 border-b border-warning/20 flex-shrink-0">
+          <WifiOff size={13} className="text-warning flex-shrink-0" />
+          <span className="text-[12px] text-warning">Disconnected — viewing only</span>
+        </div>
+      )}
+      <div className="flex-1 min-h-0 relative">
+        {paneTabs.map(function (tab) {
+          var Component = TAB_COMPONENTS[tab.type];
+          if (!Component) return null;
+          var isTabActive = tab.id === pane.activeTabId;
+          return (
+            <div
+              key={tab.id}
+              className="absolute inset-0"
+              style={{ display: isTabActive ? "flex" : "none", flexDirection: "column" }}
+            >
+              <Component />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function WorkspaceView() {
+  var { tabs, panes, activePaneId, splitDirection, splitRatio, setSplitRatio, setActivePaneId } = useWorkspace();
+  var online = useOnline();
+
+  if (!splitDirection || panes.length < 2) {
+    var singlePane = panes[0];
+    return (
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        <TabBar paneId={singlePane?.id} />
+        {!online && (
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-warning/10 border-b border-warning/20 flex-shrink-0 order-0 sm:order-none">
+            <WifiOff size={13} className="text-warning flex-shrink-0" />
+            <span className="text-[12px] text-warning">Disconnected — viewing only</span>
+          </div>
+        )}
+        <div className="flex-1 min-h-0 relative order-0 sm:order-none">
+          {tabs.map(function (tab) {
+            var Component = TAB_COMPONENTS[tab.type];
+            if (!Component) return null;
+            var isActive = singlePane ? tab.id === singlePane.activeTabId : tab.id === "chat";
+            return (
+              <div
+                key={tab.id}
+                className="absolute inset-0"
+                style={{ display: isActive ? "flex" : "none", flexDirection: "column" }}
+              >
+                <Component />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <SplitPane direction={splitDirection} ratio={splitRatio} onRatioChange={setSplitRatio}>
+      <PaneContent
+        pane={panes[0]}
+        tabs={tabs}
+        isActive={activePaneId === panes[0].id}
+        onFocus={function () { setActivePaneId(panes[0].id); }}
+      />
+      <PaneContent
+        pane={panes[1]}
+        tabs={tabs}
+        isActive={activePaneId === panes[1].id}
+        onFocus={function () { setActivePaneId(panes[1].id); }}
+      />
+    </SplitPane>
+  );
+}

package/client/src/hooks/useAttachments.ts

@@ -0,0 +1,280 @@
+import { useState, useCallback, useRef } from "react";
+import { useWebSocket } from "./useWebSocket";
+import type { ServerMessage } from "@lattice/shared";
+
+var CHUNK_SIZE = 64 * 1024;
+var MAX_FILE_SIZE = 50 * 1024 * 1024;
+var MAX_ATTACHMENTS = 20;
+var CHUNK_TIMEOUT_MS = 10000;
+
+export type AttachmentStatus = "uploading" | "ready" | "failed";
+
+export interface ClientAttachment {
+  id: string;
+  name: string;
+  type: "file" | "image" | "paste";
+  mimeType: string;
+  size: number;
+  lineCount?: number;
+  status: AttachmentStatus;
+  progress: number;
+  error?: string;
+  previewUrl?: string;
+  content?: string;
+}
+
+export interface UseAttachmentsReturn {
+  attachments: ClientAttachment[];
+  addFile: (file: File) => void;
+  addPaste: (text: string) => void;
+  removeAttachment: (id: string) => void;
+  retryAttachment: (id: string) => void;
+  clearAll: () => void;
+  readyIds: string[];
+  hasUploading: boolean;
+  canAttach: boolean;
+}
+
+function guessMimeType(file: File): string {
+  if (file.type) return file.type;
+  var ext = file.name.split(".").pop()?.toLowerCase() || "";
+  var map: Record<string, string> = {
+    ts: "application/typescript",
+    tsx: "application/typescript",
+    js: "application/javascript",
+    jsx: "application/javascript",
+    json: "application/json",
+    yaml: "application/yaml",
+    yml: "application/yaml",
+    md: "text/markdown",
+    txt: "text/plain",
+    csv: "text/csv",
+    py: "text/x-python",
+    rs: "text/x-rust",
+    go: "text/x-go",
+    rb: "text/x-ruby",
+    sh: "text/x-shellscript",
+    css: "text/css",
+    html: "text/html",
+    xml: "application/xml",
+    svg: "image/svg+xml",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+  };
+  return map[ext] || "application/octet-stream";
+}
+
+function isImageType(mime: string): boolean {
+  return mime.startsWith("image/") && mime !== "image/svg+xml";
+}
+
+export function useAttachments(): UseAttachmentsReturn {
+  var [attachments, setAttachments] = useState<ClientAttachment[]>([]);
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var pendingResolvers = useRef(new Map<string, { resolve: () => void; reject: (err: string) => void; timer: ReturnType<typeof setTimeout> }>());
+  var fileCache = useRef(new Map<string, File>());
+
+  var updateAttachment = useCallback(function (id: string, updates: Partial<ClientAttachment>) {
+    setAttachments(function (prev) {
+      return prev.map(function (a) {
+        return a.id === id ? { ...a, ...updates } : a;
+      });
+    });
+  }, []);
+
+  var uploadFile = useCallback(function (attachment: ClientAttachment, file: File) {
+    var reader = new FileReader();
+    reader.onload = function () {
+      var buffer = reader.result as ArrayBuffer;
+      var bytes = new Uint8Array(buffer);
+      var totalChunks = Math.ceil(bytes.length / CHUNK_SIZE);
+
+      var chunkIndex = 0;
+
+      function sendNextChunk() {
+        if (chunkIndex >= totalChunks) {
+          send({
+            type: "attachment:complete",
+            attachmentId: attachment.id,
+            attachmentType: attachment.type,
+            name: attachment.name,
+            mimeType: attachment.mimeType,
+            size: attachment.size,
+            lineCount: attachment.lineCount,
+          });
+          return;
+        }
+
+        var start = chunkIndex * CHUNK_SIZE;
+        var end = Math.min(start + CHUNK_SIZE, bytes.length);
+        var chunk = bytes.slice(start, end);
+        var base64 = btoa(String.fromCharCode.apply(null, chunk as unknown as number[]));
+
+        send({
+          type: "attachment:chunk",
+          attachmentId: attachment.id,
+          chunkIndex,
+          totalChunks,
+          data: base64,
+        });
+
+        var currentChunk = chunkIndex;
+        var timer = setTimeout(function () {
+          pendingResolvers.current.delete(attachment.id + ":" + currentChunk);
+          updateAttachment(attachment.id, { status: "failed", error: "Upload timed out" });
+        }, CHUNK_TIMEOUT_MS);
+
+        pendingResolvers.current.set(attachment.id + ":" + currentChunk, {
+          resolve: function () {
+            clearTimeout(timer);
+            chunkIndex++;
+            var progress = Math.round((chunkIndex / totalChunks) * 100);
+            updateAttachment(attachment.id, { progress });
+            sendNextChunk();
+          },
+          reject: function (err: string) {
+            clearTimeout(timer);
+            updateAttachment(attachment.id, { status: "failed", error: err });
+          },
+          timer,
+        });
+      }
+
+      function handleProgress(msg: ServerMessage) {
+        var m = msg as { type: string; attachmentId: string; received: number; total: number };
+        if (m.attachmentId !== attachment.id) return;
+        var key = attachment.id + ":" + (m.received - 1);
+        var resolver = pendingResolvers.current.get(key);
+        if (resolver) {
+          pendingResolvers.current.delete(key);
+          resolver.resolve();
+        }
+        if (m.received === m.total) {
+          updateAttachment(attachment.id, { status: "ready", progress: 100 });
+          unsubscribe("attachment:progress", handleProgress);
+          unsubscribe("attachment:error", handleError);
+        }
+      }
+
+      function handleError(msg: ServerMessage) {
+        var m = msg as { type: string; attachmentId: string; error: string };
+        if (m.attachmentId !== attachment.id) return;
+        updateAttachment(attachment.id, { status: "failed", error: m.error });
+        unsubscribe("attachment:progress", handleProgress);
+        unsubscribe("attachment:error", handleError);
+      }
+
+      subscribe("attachment:progress", handleProgress);
+      subscribe("attachment:error", handleError);
+      sendNextChunk();
+    };
+    reader.readAsArrayBuffer(file);
+  }, [send, subscribe, unsubscribe, updateAttachment]);
+
+  var addFile = useCallback(function (file: File) {
+    if (file.size > MAX_FILE_SIZE) {
+      return;
+    }
+    if (attachments.length >= MAX_ATTACHMENTS) {
+      return;
+    }
+
+    var id = crypto.randomUUID();
+    var mime = guessMimeType(file);
+    var type: "file" | "image" = isImageType(mime) ? "image" : "file";
+
+    var previewUrl: string | undefined;
+    if (type === "image") {
+      previewUrl = URL.createObjectURL(file);
+    }
+
+    var att: ClientAttachment = {
+      id,
+      name: file.name,
+      type,
+      mimeType: mime,
+      size: file.size,
+      status: "uploading",
+      progress: 0,
+      previewUrl,
+    };
+
+    fileCache.current.set(id, file);
+    setAttachments(function (prev) { return [...prev, att]; });
+    uploadFile(att, file);
+  }, [attachments.length, uploadFile]);
+
+  var addPaste = useCallback(function (text: string) {
+    if (attachments.length >= MAX_ATTACHMENTS) return;
+
+    var id = crypto.randomUUID();
+    var blob = new Blob([text], { type: "text/plain" });
+    var file = new File([blob], "pasted-text.txt", { type: "text/plain" });
+    var lineCount = text.split("\n").length;
+
+    var att: ClientAttachment = {
+      id,
+      name: "Pasted text",
+      type: "paste",
+      mimeType: "text/plain",
+      size: blob.size,
+      lineCount,
+      status: "uploading",
+      progress: 0,
+      content: text,
+    };
+
+    fileCache.current.set(id, file);
+    setAttachments(function (prev) { return [...prev, att]; });
+    uploadFile(att, file);
+  }, [attachments.length, uploadFile]);
+
+  var removeAttachment = useCallback(function (id: string) {
+    setAttachments(function (prev) {
+      var removed = prev.find(function (a) { return a.id === id; });
+      if (removed && removed.previewUrl) {
+        URL.revokeObjectURL(removed.previewUrl);
+      }
+      return prev.filter(function (a) { return a.id !== id; });
+    });
+    fileCache.current.delete(id);
+  }, []);
+
+  var retryAttachment = useCallback(function (id: string) {
+    var file = fileCache.current.get(id);
+    var att = attachments.find(function (a) { return a.id === id; });
+    if (!file || !att) return;
+    updateAttachment(id, { status: "uploading", progress: 0, error: undefined });
+    uploadFile(att, file);
+  }, [attachments, uploadFile, updateAttachment]);
+
+  var clearAll = useCallback(function () {
+    attachments.forEach(function (a) {
+      if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+    });
+    setAttachments([]);
+    fileCache.current.clear();
+  }, [attachments]);
+
+  var readyIds = attachments
+    .filter(function (a) { return a.status === "ready"; })
+    .map(function (a) { return a.id; });
+
+  var hasUploading = attachments.some(function (a) { return a.status === "uploading"; });
+  var canAttach = attachments.length < MAX_ATTACHMENTS;
+
+  return {
+    attachments,
+    addFile,
+    addPaste,
+    removeAttachment,
+    retryAttachment,
+    clearAll,
+    readyIds,
+    hasUploading,
+    canAttach,
+  };
+}

package/client/src/hooks/useEditorConfig.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { useWebSocket } from "./useWebSocket";
+import type { ServerMessage, SettingsDataMessage } from "@lattice/shared";
+
+export function useEditorConfig() {
+  var ws = useWebSocket();
+  var [editorType, setEditorType] = useState("vscode");
+  var [wslDistro, setWslDistro] = useState<string | undefined>(undefined);
+
+  useEffect(function () {
+    function handleSettings(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      var cfg = data.config as any;
+      if (cfg.editor?.type) {
+        setEditorType(cfg.editor.type);
+      }
+      if (data.wslDistro) {
+        setWslDistro(data.wslDistro);
+      }
+    }
+    ws.subscribe("settings:data", handleSettings);
+    ws.send({ type: "settings:get" });
+    return function () { ws.unsubscribe("settings:data", handleSettings); };
+  }, []);
+
+  return { editorType: editorType, wslDistro: wslDistro };
+}

package/client/src/hooks/useIdleDetection.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "react";
+
+var IDLE_TIMEOUT = 60 * 1000;
+
+export function useIdleDetection(): boolean {
+  var [isIdle, setIsIdle] = useState(false);
+  var timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(function () {
+    function resetTimer() {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setIsIdle(false);
+      timerRef.current = setTimeout(function () {
+        setIsIdle(true);
+      }, IDLE_TIMEOUT);
+    }
+
+    function handleVisibilityChange() {
+      if (document.hidden) {
+        setIsIdle(true);
+      } else {
+        resetTimer();
+      }
+    }
+
+    var events = ["mousemove", "keydown", "mousedown", "touchstart", "scroll"];
+    events.forEach(function (event) {
+      document.addEventListener(event, resetTimer, { passive: true });
+    });
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    resetTimer();
+
+    return function () {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      events.forEach(function (event) {
+        document.removeEventListener(event, resetTimer);
+      });
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+
+  return isIdle;
+}

package/client/src/hooks/useInstallPrompt.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
+}
+
+export function useInstallPrompt() {
+  var [promptEvent, setPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
+  var [isInstalled, setIsInstalled] = useState(false);
+  var [dismissed, setDismissed] = useState(function () {
+    return localStorage.getItem("lattice-install-dismissed") === "1";
+  });
+
+  useEffect(function () {
+    if (window.matchMedia("(display-mode: standalone)").matches) {
+      setIsInstalled(true);
+      return;
+    }
+
+    function handleBeforeInstall(e: Event) {
+      e.preventDefault();
+      setPromptEvent(e as BeforeInstallPromptEvent);
+    }
+
+    window.addEventListener("beforeinstallprompt", handleBeforeInstall);
+    return function () {
+      window.removeEventListener("beforeinstallprompt", handleBeforeInstall);
+    };
+  }, []);
+
+  function install() {
+    if (!promptEvent) return;
+    promptEvent.prompt();
+    promptEvent.userChoice.then(function (choice) {
+      if (choice.outcome === "dismissed") {
+        setDismissed(true);
+        localStorage.setItem("lattice-install-dismissed", "1");
+      }
+      setPromptEvent(null);
+    });
+  }
+
+  function dismiss() {
+    setDismissed(true);
+    localStorage.setItem("lattice-install-dismissed", "1");
+    setPromptEvent(null);
+  }
+
+  var canInstall = !!promptEvent && !isInstalled && !dismissed;
+
+  return { canInstall: canInstall, install: install, dismiss: dismiss };
+}

package/client/src/hooks/useNotifications.ts

@@ -0,0 +1,54 @@
+import { useState } from "react";
+
+export function useNotificationPreference() {
+  var [enabled, setEnabled] = useState(function () {
+    return localStorage.getItem("lattice-notifications-enabled") === "1";
+  });
+
+  var permission = typeof Notification !== "undefined" ? Notification.permission : "denied";
+
+  function toggle() {
+    if (!enabled) {
+      if (permission === "default") {
+        Notification.requestPermission().then(function (result) {
+          if (result === "granted") {
+            setEnabled(true);
+            localStorage.setItem("lattice-notifications-enabled", "1");
+          }
+        });
+      } else if (permission === "granted") {
+        setEnabled(true);
+        localStorage.setItem("lattice-notifications-enabled", "1");
+      }
+    } else {
+      setEnabled(false);
+      localStorage.setItem("lattice-notifications-enabled", "0");
+    }
+  }
+
+  return { enabled: enabled, permission: permission, toggle: toggle };
+}
+
+export function sendNotification(title: string, body: string, tag?: string, onClick?: () => void): void {
+  var allowed = localStorage.getItem("lattice-notifications-enabled") === "1";
+  if (!allowed) return;
+  if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
+
+  var notification = new Notification(title, {
+    body: body,
+    icon: "/icons/icon-192.svg",
+    tag: tag || "lattice",
+    silent: false,
+  });
+
+  var timer = setTimeout(function () {
+    notification.close();
+  }, 10000);
+
+  notification.onclick = function () {
+    clearTimeout(timer);
+    window.focus();
+    notification.close();
+    if (onClick) onClick();
+  };
+}

package/client/src/hooks/useOnline.ts

@@ -0,0 +1,6 @@
+import { useWebSocket } from "./useWebSocket";
+
+export function useOnline(): boolean {
+  var ws = useWebSocket();
+  return ws.status === "connected";
+}