@cryptiklemur/lattice 4.0.2 → 5.0.0

package/src/client/components/ui/UpdateBanner.tsx

@@ -1,110 +0,0 @@
-import { useState, useEffect } from "react";
-import { ArrowUpCircle, X, Loader2, ExternalLink, RefreshCw } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import type { ServerMessage } from "#shared";
-
-interface UpdateState {
-  currentVersion: string;
-  latestVersion: string | null;
-  updateAvailable: boolean;
-  releaseUrl: string | null;
-}
-
-export function UpdateBanner() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [update, setUpdate] = useState<UpdateState | null>(null);
-  var [dismissed, setDismissed] = useState(false);
-  var [applying, setApplying] = useState(false);
-  var [applyResult, setApplyResult] = useState<{ success: boolean; message: string } | null>(null);
-
-  useEffect(function () {
-    function handleStatus(msg: ServerMessage) {
-      if (msg.type !== "update:status") return;
-      var data = msg as UpdateState & { type: string };
-      setUpdate({ currentVersion: data.currentVersion, latestVersion: data.latestVersion, updateAvailable: data.updateAvailable, releaseUrl: data.releaseUrl });
-      if (data.updateAvailable) setDismissed(false);
-    }
-
-    function handleApplyResult(msg: ServerMessage) {
-      if (msg.type !== "update:apply_result") return;
-      var data = msg as { type: string; success: boolean; message?: string };
-      setApplying(false);
-      setApplyResult({ success: data.success, message: data.message ?? "" });
-    }
-
-    subscribe("update:status", handleStatus);
-    subscribe("update:apply_result", handleApplyResult);
-    send({ type: "update:check" } as any);
-
-    return function () {
-      unsubscribe("update:status", handleStatus);
-      unsubscribe("update:apply_result", handleApplyResult);
-    };
-  }, []);
-
-  if (!update || !update.updateAvailable || dismissed) return null;
-
-  if (applyResult) {
-    return (
-      <div className={
-        "flex items-center gap-2 px-4 py-2 text-[12px] border-b " +
-        (applyResult.success
-          ? "bg-success/10 border-success/20 text-success"
-          : "bg-error/10 border-error/20 text-error")
-      }>
-        <span className="flex-1">{applyResult.message}</span>
-        {applyResult.success && (
-          <button
-            onClick={function () { window.location.reload(); }}
-            className="flex items-center gap-1 text-[11px] font-mono font-bold hover:underline"
-          >
-            <RefreshCw size={11} />
-            Reload
-          </button>
-        )}
-        <button onClick={function () { setDismissed(true); }} className="btn btn-ghost btn-xs btn-square opacity-50 hover:opacity-100">
-          <X size={12} />
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-primary/8 border-b border-primary/15 text-[12px] text-base-content/70">
-      <ArrowUpCircle size={14} className="text-primary flex-shrink-0" />
-      <span className="flex-1">
-        <span className="font-semibold text-base-content">v{update.latestVersion}</span>
-        {" "}available
-        <span className="text-base-content/40 ml-1">(current: v{update.currentVersion})</span>
-      </span>
-      {update.releaseUrl && (
-        <a
-          href={update.releaseUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-0.5 text-[11px] text-primary/50 hover:text-primary transition-colors"
-        >
-          <ExternalLink size={10} />
-          Notes
-        </a>
-      )}
-      {applying ? (
-        <Loader2 size={12} className="text-primary animate-spin" />
-      ) : (
-        <button
-          onClick={function () { setApplying(true); send({ type: "update:apply" } as any); }}
-          className="btn btn-primary btn-xs"
-        >
-          Update
-        </button>
-      )}
-      <button
-        onClick={function () { setDismissed(true); }}
-        aria-label="Dismiss update"
-        className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content"
-      >
-        <X size={12} />
-      </button>
-    </div>
-  );
-}

package/src/client/components/ui/UpdatePrompt.tsx

@@ -1,47 +0,0 @@
-import { useEffect, useState } from "react";
-import { RefreshCw } from "lucide-react";
-
-export function UpdatePrompt() {
-  var [showUpdate, setShowUpdate] = useState(false);
-  var [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);
-
-  useEffect(function () {
-    if (!("serviceWorker" in navigator)) return;
-
-    navigator.serviceWorker.ready.then(function (reg) {
-      reg.addEventListener("updatefound", function () {
-        var newWorker = reg.installing;
-        if (!newWorker) return;
-        var worker: ServiceWorker = newWorker;
-        worker.addEventListener("statechange", function () {
-          if (worker.state === "installed" && navigator.serviceWorker.controller) {
-            setRegistration(reg);
-            setShowUpdate(true);
-          }
-        });
-      });
-    });
-  }, []);
-
-  function handleReload() {
-    if (registration && registration.waiting) {
-      registration.waiting.postMessage({ type: "SKIP_WAITING" });
-    }
-    window.location.reload();
-  }
-
-  if (!showUpdate) return null;
-
-  return (
-    <div className="fixed bottom-4 right-4 z-[9998] bg-base-300 border border-base-content/15 rounded-xl shadow-2xl px-4 py-3 flex items-center gap-3 max-w-sm">
-      <RefreshCw size={16} className="text-primary flex-shrink-0" />
-      <div className="flex-1 min-w-0">
-        <div className="text-[13px] text-base-content font-semibold">Update available</div>
-        <div className="text-[11px] text-base-content/40">A new version of Lattice is ready.</div>
-      </div>
-      <button onClick={handleReload} className="btn btn-primary btn-xs">
-        Reload
-      </button>
-    </div>
-  );
-}

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

@@ -1,156 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { Bookmark, MessageSquare, ExternalLink } from "lucide-react";
-import { useBookmarks } from "../../hooks/useBookmarks";
-import { useSession } from "../../hooks/useSession";
-import { useProjects } from "../../hooks/useProjects";
-import { openTab } from "../../stores/workspace";
-import type { MessageBookmark } from "#shared";
-
-function relativeTime(ts: number): string {
-  var diff = Date.now() - ts;
-  var seconds = Math.floor(diff / 1000);
-  if (seconds < 60) return seconds + "s ago";
-  var minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return minutes + "m ago";
-  var hours = Math.floor(minutes / 60);
-  if (hours < 24) return hours + "h ago";
-  var days = Math.floor(hours / 24);
-  return days + "d ago";
-}
-
-interface GroupedBookmarks {
-  projectSlug: string;
-  sessions: Array<{
-    sessionId: string;
-    bookmarks: MessageBookmark[];
-  }>;
-}
-
-export function BookmarksView() {
-  var { allBookmarks, requestAllBookmarks } = useBookmarks();
-  var { activateSession } = useSession();
-  var { projects } = useProjects();
-
-  useEffect(function () {
-    requestAllBookmarks();
-  }, []);
-
-  var grouped = useMemo(function () {
-    var projectMap = new Map<string, Map<string, MessageBookmark[]>>();
-    for (var i = 0; i < allBookmarks.length; i++) {
-      var bm = allBookmarks[i];
-      if (!projectMap.has(bm.projectSlug)) {
-        projectMap.set(bm.projectSlug, new Map());
-      }
-      var sessionMap = projectMap.get(bm.projectSlug)!;
-      if (!sessionMap.has(bm.sessionId)) {
-        sessionMap.set(bm.sessionId, []);
-      }
-      sessionMap.get(bm.sessionId)!.push(bm);
-    }
-    var result: GroupedBookmarks[] = [];
-    projectMap.forEach(function (sessionMap, projectSlug) {
-      var sessions: GroupedBookmarks["sessions"] = [];
-      sessionMap.forEach(function (bookmarks, sessionId) {
-        sessions.push({ sessionId, bookmarks });
-      });
-      sessions.sort(function (a, b) {
-        return b.bookmarks[0].createdAt - a.bookmarks[0].createdAt;
-      });
-      result.push({ projectSlug, sessions });
-    });
-    result.sort(function (a, b) {
-      var aLatest = a.sessions[0]?.bookmarks[0]?.createdAt ?? 0;
-      var bLatest = b.sessions[0]?.bookmarks[0]?.createdAt ?? 0;
-      return bLatest - aLatest;
-    });
-    return result;
-  }, [allBookmarks]);
-
-  function getProjectTitle(slug: string): string {
-    for (var i = 0; i < projects.length; i++) {
-      if (projects[i].slug === slug) return projects[i].title;
-    }
-    return slug;
-  }
-
-  function handleBookmarkClick(bm: MessageBookmark) {
-    activateSession(bm.projectSlug, bm.sessionId);
-    openTab("chat");
-    setTimeout(function () {
-      var el = document.getElementById("msg-" + bm.messageUuid);
-      if (el) {
-        el.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "center" });
-        el.classList.add("ring-2", "ring-warning/40");
-        setTimeout(function () { el!.classList.remove("ring-2", "ring-warning/40"); }, 2000);
-      }
-    }, 500);
-  }
-
-  return (
-    <div className="flex flex-col h-full w-full overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 border-b border-base-content/10 bg-base-100 flex-shrink-0">
-        <Bookmark size={16} className="text-warning" />
-        <span className="text-sm font-semibold text-base-content">Bookmarks</span>
-        <span className="text-[10px] font-mono text-base-content/30 ml-auto">{allBookmarks.length} total</span>
-      </div>
-      <div className="flex-1 overflow-y-auto p-4">
-        {allBookmarks.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-base-content/30 gap-3">
-            <Bookmark size={32} className="text-base-content/15" />
-            <div className="text-[13px] font-mono">No bookmarks yet</div>
-            <div className="text-[11px] text-base-content/20 max-w-[260px] text-center">
-              Bookmark messages in chat to quickly find them later.
-            </div>
-          </div>
-        ) : (
-          <div className="flex flex-col gap-4">
-            {grouped.map(function (group) {
-              return (
-                <div key={group.projectSlug}>
-                  <div className="text-[10px] uppercase tracking-widest text-base-content/40 font-mono font-bold mb-2">
-                    {getProjectTitle(group.projectSlug)}
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    {group.sessions.map(function (session) {
-                      return (
-                        <div key={session.sessionId} className="bg-base-200/50 border border-base-content/8 rounded-lg overflow-hidden">
-                          <div className="flex items-center gap-2 px-3 py-1.5 border-b border-base-content/5">
-                            <MessageSquare size={11} className="text-base-content/30" />
-                            <span className="text-[11px] font-mono text-base-content/40 truncate">{session.sessionId.slice(0, 12)}...</span>
-                          </div>
-                          <div className="flex flex-col">
-                            {session.bookmarks.map(function (bm) {
-                              return (
-                                <button
-                                  key={bm.id}
-                                  type="button"
-                                  onClick={function () { handleBookmarkClick(bm); }}
-                                  className="flex items-start gap-2 px-3 py-2 hover:bg-base-content/5 transition-colors text-left w-full"
-                                >
-                                  <Bookmark size={10} className="text-warning/60 mt-0.5 flex-shrink-0" />
-                                  <div className="min-w-0 flex-1">
-                                    <div className="text-[12px] text-base-content/70 line-clamp-2">{bm.messageText}</div>
-                                    <div className="flex items-center gap-2 mt-0.5">
-                                      <span className="text-[9px] text-base-content/25 font-mono">{bm.messageType}</span>
-                                      <span className="text-[9px] text-base-content/20 font-mono">{relativeTime(bm.createdAt)}</span>
-                                    </div>
-                                  </div>
-                                  <ExternalLink size={10} className="text-base-content/20 mt-1 flex-shrink-0" />
-                                </button>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,174 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ArrowLeft, FileCode, FileX } from "lucide-react";
-import type { FsListResultMessage, FsReadResultMessage, ServerMessage } from "#shared";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useSidebar } from "../../hooks/useSidebar";
-import { useProjects } from "../../hooks/useProjects";
-import { useEditorConfig } from "../../hooks/useEditorConfig";
-import { getEditorUrl } from "../../utils/editorUrl";
-import { FileTree, buildNodes } from "./FileTree";
-import { FileViewer } from "./FileViewer";
-import type { TreeNode } from "./FileTree";
-
-export function FileBrowser() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var { activeProjectSlug } = useSidebar();
-  var { activeProject } = useProjects();
-  var { editorType, wslDistro } = useEditorConfig();
-  var projectSlugRef = useRef<string | null>(null);
-  projectSlugRef.current = activeProjectSlug;
-  var [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
-  var [selectedPath, setSelectedPath] = useState<string | null>(null);
-  var [fileContent, setFileContent] = useState<string | null>(null);
-  var [loadingContent, setLoadingContent] = useState(false);
-  var [mobileShowViewer, setMobileShowViewer] = useState(false);
-  var nodesRef = useRef<TreeNode[]>([]);
-
-  nodesRef.current = rootNodes;
-
-  var handleListResult = useCallback(function (msg: ServerMessage) {
-    var listMsg = msg as FsListResultMessage;
-    var newNodes = buildNodes(listMsg.entries);
-
-    if (listMsg.path === "" || listMsg.path === ".") {
-      setRootNodes(newNodes);
-      return;
-    }
-
-    function updateNodes(nodes: TreeNode[]): TreeNode[] {
-      return nodes.map(function (node) {
-        if (node.entry.path === listMsg.path) {
-          return Object.assign({}, node, { children: newNodes, expanded: true });
-        }
-        if (node.children) {
-          return Object.assign({}, node, { children: updateNodes(node.children) });
-        }
-        return node;
-      });
-    }
-
-    setRootNodes(function (prev) {
-      return updateNodes(prev);
-    });
-  }, []);
-
-  var handleReadResult = useCallback(function (msg: ServerMessage) {
-    var readMsg = msg as FsReadResultMessage;
-    setFileContent(readMsg.content);
-    setLoadingContent(false);
-  }, []);
-
-  var selectedPathRef = useRef<string | null>(null);
-  selectedPathRef.current = selectedPath;
-
-  var handleFsChanged = useCallback(function (msg: ServerMessage) {
-    var changedPath = (msg as { path: string }).path;
-    if (changedPath === selectedPathRef.current) {
-      send({ type: "fs:read", path: changedPath, projectSlug: projectSlugRef.current || undefined });
-    }
-  }, [send]);
-
-  useEffect(function () {
-    subscribe("fs:list_result", handleListResult);
-    subscribe("fs:read_result", handleReadResult);
-    subscribe("fs:changed", handleFsChanged);
-
-    send({ type: "fs:list", path: ".", projectSlug: projectSlugRef.current || undefined });
-
-    return function () {
-      unsubscribe("fs:list_result", handleListResult);
-      unsubscribe("fs:read_result", handleReadResult);
-      unsubscribe("fs:changed", handleFsChanged);
-    };
-  }, [handleListResult, handleReadResult, handleFsChanged, send, subscribe, unsubscribe]);
-
-  function handleToggle(path: string) {
-    function findAndToggle(nodes: TreeNode[]): TreeNode[] {
-      return nodes.map(function (node) {
-        if (node.entry.path === path) {
-          if (!node.expanded && !node.children) {
-            send({ type: "fs:list", path: path, projectSlug: projectSlugRef.current || undefined });
-            return Object.assign({}, node, { expanded: true });
-          }
-          return Object.assign({}, node, { expanded: !node.expanded });
-        }
-        if (node.children) {
-          return Object.assign({}, node, { children: findAndToggle(node.children) });
-        }
-        return node;
-      });
-    }
-    setRootNodes(function (prev) {
-      return findAndToggle(prev);
-    });
-  }
-
-  function handleSelect(path: string) {
-    setSelectedPath(path);
-    setFileContent(null);
-    setLoadingContent(true);
-    setMobileShowViewer(true);
-    send({ type: "fs:read", path: path, projectSlug: activeProjectSlug || undefined });
-  }
-
-  var editorUrlForSelected = selectedPath && activeProject
-    ? getEditorUrl(editorType, activeProject.path, selectedPath, undefined, wslDistro, activeProject.ideProjectName)
-    : null;
-
-  return (
-    <div className="flex h-full w-full overflow-hidden bg-base-100">
-      <div className={"w-full sm:w-[220px] sm:flex-shrink-0 sm:border-r sm:border-base-content/15 overflow-y-auto p-2" + (mobileShowViewer ? " hidden sm:block" : " block")}>
-        <div className="text-[11px] font-semibold tracking-[0.06em] uppercase text-base-content/40 px-2 pb-2 pt-1">
-          Files
-        </div>
-        <FileTree
-          nodes={rootNodes}
-          selectedPath={selectedPath}
-          onToggle={handleToggle}
-          onSelect={handleSelect}
-        />
-      </div>
-
-      <div className={"flex-1 flex-col overflow-hidden" + (mobileShowViewer ? " flex" : " hidden sm:flex")}>
-        {selectedPath && (
-          <button
-            className="sm:hidden flex items-center gap-1 px-2 py-1.5 text-[12px] text-base-content/60 hover:text-base-content border-b border-base-content/15"
-            onClick={function () { setMobileShowViewer(false); }}
-          >
-            <ArrowLeft size={14} />
-            <span>Back to files</span>
-          </button>
-        )}
-
-        {!selectedPath && (
-          <div className="h-full flex flex-col items-center justify-center gap-3">
-            <FileCode size={28} className="text-base-content/15" />
-            <div className="text-base-content/40 text-[13px]">Select a file from the tree to view its contents</div>
-          </div>
-        )}
-
-        {selectedPath && loadingContent && (
-          <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
-            Loading...
-          </div>
-        )}
-
-        {selectedPath && !loadingContent && fileContent !== null && (
-          <FileViewer
-            path={selectedPath}
-            content={fileContent}
-            editorUrl={editorUrlForSelected}
-          />
-        )}
-
-        {selectedPath && !loadingContent && fileContent === null && (
-          <div className="h-full flex flex-col items-center justify-center gap-3">
-            <FileX size={28} className="text-base-content/15" />
-            <div className="text-base-content/40 text-[13px]">Cannot display this file</div>
-            <div className="text-base-content/30 text-[11px]">Binary files and files over 512KB are not shown</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,129 +0,0 @@
-import { ChevronRight, FileIcon } from "lucide-react";
-import type { FileEntry } from "#shared";
-
-export interface TreeNode {
-  entry: FileEntry;
-  children: TreeNode[] | null;
-  expanded: boolean;
-}
-
-export function buildNodes(entries: FileEntry[]): TreeNode[] {
-  return entries.map(function (entry) {
-    return { entry, children: null, expanded: false };
-  });
-}
-
-interface FileTreeItemProps {
-  node: TreeNode;
-  depth: number;
-  selectedPath: string | null;
-  onToggle: (path: string) => void;
-  onSelect: (path: string) => void;
-}
-
-function FileTreeItem(props: FileTreeItemProps) {
-  var { node, depth, selectedPath, onToggle, onSelect } = props;
-  var isSelected = selectedPath === node.entry.path;
-  var isDir = node.entry.isDirectory;
-
-  function handleActivate() {
-    if (isDir) {
-      onToggle(node.entry.path);
-    } else {
-      onSelect(node.entry.path);
-    }
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleActivate();
-    }
-  }
-
-  return (
-    <div role="treeitem" aria-expanded={isDir ? node.expanded : undefined} aria-selected={isSelected}>
-      <div
-        tabIndex={0}
-        onClick={handleActivate}
-        onKeyDown={handleKeyDown}
-        className={
-          "flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer text-[13px] rounded select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200 " +
-          (isSelected ? "bg-base-300 text-primary" : "text-base-content hover:bg-base-200")
-        }
-        style={{ paddingLeft: (8 + depth * 16) + "px" }}
-      >
-        {isDir ? (
-          <ChevronRight
-            size={12}
-            className="flex-shrink-0 text-base-content/40 transition-transform duration-[120ms]"
-            style={{ transform: node.expanded ? "rotate(90deg)" : "none" }}
-          />
-        ) : (
-          <FileIcon
-            size={12}
-            className="flex-shrink-0 text-base-content/40"
-          />
-        )}
-        <span
-          className={
-            "truncate " +
-            (isDir ? "text-info" : "text-base-content")
-          }
-        >
-          {node.entry.name}
-        </span>
-      </div>
-      {isDir && node.expanded && node.children && (
-        <div role="group">
-          {node.children.map(function (child) {
-            return (
-              <FileTreeItem
-                key={child.entry.path}
-                node={child}
-                depth={depth + 1}
-                selectedPath={selectedPath}
-                onToggle={onToggle}
-                onSelect={onSelect}
-              />
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface FileTreeProps {
-  nodes: TreeNode[];
-  selectedPath: string | null;
-  onToggle: (path: string) => void;
-  onSelect: (path: string) => void;
-}
-
-export function FileTree(props: FileTreeProps) {
-  var { nodes, selectedPath, onToggle, onSelect } = props;
-
-  return (
-    <div role="tree" aria-label="File tree">
-      {nodes.length === 0 ? (
-        <div className="px-2 py-3 text-[12px] text-base-content/40">
-          Loading...
-        </div>
-      ) : (
-        nodes.map(function (node) {
-          return (
-            <FileTreeItem
-              key={node.entry.path}
-              node={node}
-              depth={0}
-              selectedPath={selectedPath}
-              onToggle={onToggle}
-              onSelect={onSelect}
-            />
-          );
-        })
-      )}
-    </div>
-  );
-}