@cryptiklemur/lattice 4.0.2 → 5.0.0

package/src/client/components/chat/ToolResultRenderer.tsx

@@ -1,348 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
-import { createPortal } from "react-dom";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { Columns2, AlignLeft, FileText, Image } from "lucide-react";
-
-interface ToolResultRendererProps {
-  toolName: string;
-  args: string;
-  result: string;
-}
-
-function parseArgs(argsStr: string): Record<string, unknown> {
-  try {
-    return JSON.parse(argsStr);
-  } catch {
-    return {};
-  }
-}
-
-function isImagePath(path: string): boolean {
-  var ext = path.split(".").pop()?.toLowerCase() || "";
-  return ["png", "jpg", "jpeg", "gif", "svg", "webp", "bmp", "ico"].includes(ext);
-}
-
-function hasMarkdownTable(text: string): boolean {
-  return /\|.+\|[\r\n]+\|[\s-:]+\|/.test(text);
-}
-
-function computeLineDiff(oldText: string, newText: string): Array<{ type: "same" | "add" | "remove"; text: string }> {
-  var oldLines = oldText.split("\n");
-  var newLines = newText.split("\n");
-  var result: Array<{ type: "same" | "add" | "remove"; text: string }> = [];
-
-  var prefixLen = 0;
-  while (prefixLen < oldLines.length && prefixLen < newLines.length && oldLines[prefixLen] === newLines[prefixLen]) {
-    prefixLen++;
-  }
-
-  var suffixLen = 0;
-  while (
-    suffixLen < oldLines.length - prefixLen &&
-    suffixLen < newLines.length - prefixLen &&
-    oldLines[oldLines.length - 1 - suffixLen] === newLines[newLines.length - 1 - suffixLen]
-  ) {
-    suffixLen++;
-  }
-
-  var contextBefore = Math.max(0, prefixLen - 3);
-  for (var i = contextBefore; i < prefixLen; i++) {
-    result.push({ type: "same", text: oldLines[i] });
-  }
-
-  for (var j = prefixLen; j < oldLines.length - suffixLen; j++) {
-    result.push({ type: "remove", text: oldLines[j] });
-  }
-  for (var k = prefixLen; k < newLines.length - suffixLen; k++) {
-    result.push({ type: "add", text: newLines[k] });
-  }
-
-  var suffixStart = Math.max(oldLines.length - suffixLen, prefixLen);
-  var contextAfter = Math.min(suffixStart + 3, oldLines.length);
-  for (var l = suffixStart; l < contextAfter; l++) {
-    result.push({ type: "same", text: oldLines[l] });
-  }
-
-  return result;
-}
-
-function DiffUnified(props: { oldText: string; newText: string }) {
-  var lines = computeLineDiff(props.oldText, props.newText);
-  return (
-    <div className="font-mono text-[11px] leading-relaxed overflow-x-auto">
-      {lines.map(function (line, i) {
-        var bg = line.type === "add" ? "bg-success/10" : line.type === "remove" ? "bg-error/10" : "";
-        var prefix = line.type === "add" ? "+" : line.type === "remove" ? "-" : " ";
-        var color = line.type === "add" ? "text-success/70" : line.type === "remove" ? "text-error/70" : "text-base-content/40";
-        return (
-          <div key={i} className={bg + " px-2 whitespace-pre-wrap break-words"}>
-            <span className={color + " select-none inline-block w-4"}>{prefix}</span>
-            <span className={color}>{line.text}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function DiffSideBySide(props: { oldText: string; newText: string }) {
-  var lines = computeLineDiff(props.oldText, props.newText);
-  var leftLines: Array<{ text: string; type: string }> = [];
-  var rightLines: Array<{ text: string; type: string }> = [];
-
-  for (var i = 0; i < lines.length; i++) {
-    if (lines[i].type === "same") {
-      leftLines.push({ text: lines[i].text, type: "same" });
-      rightLines.push({ text: lines[i].text, type: "same" });
-    } else if (lines[i].type === "remove") {
-      leftLines.push({ text: lines[i].text, type: "remove" });
-    } else if (lines[i].type === "add") {
-      rightLines.push({ text: lines[i].text, type: "add" });
-    }
-  }
-
-  var maxLen = Math.max(leftLines.length, rightLines.length);
-  while (leftLines.length < maxLen) leftLines.push({ text: "", type: "pad" });
-  while (rightLines.length < maxLen) rightLines.push({ text: "", type: "pad" });
-
-  return (
-    <div className="font-mono text-[11px] leading-relaxed overflow-x-auto grid grid-cols-2 gap-0">
-      <div className="border-r border-base-content/8">
-        {leftLines.map(function (line, i) {
-          var bg = line.type === "remove" ? "bg-error/10" : "";
-          var color = line.type === "remove" ? "text-error/70" : line.type === "same" ? "text-base-content/40" : "text-transparent";
-          return (
-            <div key={i} className={bg + " px-2 whitespace-pre-wrap break-words min-h-[1.4em]"}>
-              <span className={color}>{line.text}</span>
-            </div>
-          );
-        })}
-      </div>
-      <div>
-        {rightLines.map(function (line, i) {
-          var bg = line.type === "add" ? "bg-success/10" : "";
-          var color = line.type === "add" ? "text-success/70" : line.type === "same" ? "text-base-content/40" : "text-transparent";
-          return (
-            <div key={i} className={bg + " px-2 whitespace-pre-wrap break-words min-h-[1.4em]"}>
-              <span className={color}>{line.text}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function DiffRenderer(props: { oldText: string; newText: string }) {
-  var [mode, setMode] = useState<"unified" | "split">("unified");
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-1">
-        <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold">Diff</div>
-        <div className="flex items-center gap-0.5">
-          <button
-            type="button"
-            onClick={function () { setMode("unified"); }}
-            className={"icon-action p-0.5 rounded transition-colors " + (mode === "unified" ? "text-primary/70 bg-primary/10" : "text-base-content/25 hover:text-base-content/40")}
-            title="Unified view"
-          >
-            <AlignLeft size={11} />
-          </button>
-          <button
-            type="button"
-            onClick={function () { setMode("split"); }}
-            className={"icon-action p-0.5 rounded transition-colors " + (mode === "split" ? "text-primary/70 bg-primary/10" : "text-base-content/25 hover:text-base-content/40")}
-            title="Side-by-side view"
-          >
-            <Columns2 size={11} />
-          </button>
-        </div>
-      </div>
-      <div className="rounded-md bg-base-100/50 overflow-hidden">
-        {mode === "unified" ? (
-          <DiffUnified oldText={props.oldText} newText={props.newText} />
-        ) : (
-          <DiffSideBySide oldText={props.oldText} newText={props.newText} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ImageRenderer(props: { path: string }) {
-  var [error, setError] = useState(false);
-  var [modalOpen, setModalOpen] = useState(false);
-  var imgSrc = "/api/file?path=" + encodeURIComponent(props.path);
-  var imageModalRef = useRef<HTMLDivElement>(null);
-  var closeImageModal = useCallback(function () { setModalOpen(false); }, []);
-  useFocusTrap(imageModalRef, closeImageModal, modalOpen);
-
-  useEffect(function () {
-    if (!modalOpen) return;
-    var root = document.getElementById("root");
-    if (root) root.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
-    document.documentElement.style.overflow = "hidden";
-    return function () {
-      if (root) root.style.overflow = "";
-      document.body.style.overflow = "";
-      document.documentElement.style.overflow = "";
-    };
-  }, [modalOpen]);
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-1.5 text-[11px] text-base-content/40">
-        <Image size={12} />
-        <span className="font-mono">{props.path}</span>
-      </div>
-    );
-  }
-  return (
-    <>
-      <div>
-        <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-1">Screenshot</div>
-        <img
-          src={imgSrc}
-          alt={props.path}
-          className="max-w-full max-h-[240px] rounded-md border border-base-content/10 cursor-pointer hover:border-primary/30 hover:shadow-lg transition-all object-contain"
-          onError={function () { setError(true); }}
-          onClick={function () { setModalOpen(true); }}
-          loading="lazy"
-        />
-        <div className="text-[10px] text-base-content/25 font-mono mt-1 truncate">{props.path}</div>
-      </div>
-      {modalOpen && createPortal(
-        <div
-          ref={imageModalRef}
-          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 sm:p-8 cursor-pointer overscroll-contain"
-          onClick={function () { setModalOpen(false); }}
-          onWheel={function (e) { e.stopPropagation(); }}
-          onTouchMove={function (e) { e.stopPropagation(); }}
-          role="dialog"
-          aria-label="Image preview"
-          tabIndex={0}
-        >
-          <div className="relative max-w-[95vw] max-h-[90vh] sm:max-w-[85vw] sm:max-h-[85vh]" onClick={function (e) { e.stopPropagation(); }}>
-            <img
-              src={imgSrc}
-              alt={props.path}
-              className="max-w-full max-h-[90vh] sm:max-h-[85vh] rounded-lg shadow-2xl object-contain"
-            />
-            <div className="absolute -top-10 right-0 flex items-center gap-3">
-              <a
-                href={imgSrc}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[11px] font-mono text-white/50 hover:text-white/80 transition-colors"
-                onClick={function (e) { e.stopPropagation(); }}
-              >
-                Open in tab
-              </a>
-              <button
-                onClick={function () { setModalOpen(false); }}
-                className="text-white/50 hover:text-white transition-colors text-lg leading-none"
-                aria-label="Close preview"
-              >
-                &times;
-              </button>
-            </div>
-            <div className="text-[11px] text-white/30 font-mono mt-2 truncate text-center">{props.path}</div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-function FileHeader(props: { path: string }) {
-  var parts = props.path.split("/");
-  var filename = parts[parts.length - 1] || props.path;
-  var ext = filename.split(".").pop() || "";
-  return (
-    <div className="flex items-center gap-1.5 mb-1">
-      <FileText size={10} className="text-base-content/25" />
-      <span className="text-[10px] font-mono text-base-content/40 truncate">{filename}</span>
-      {ext && <span className="text-[9px] font-mono text-base-content/20 uppercase">{ext}</span>}
-    </div>
-  );
-}
-
-export function ToolResultRenderer(props: ToolResultRendererProps) {
-  var args = parseArgs(props.args);
-  var result = props.result;
-
-  if ((props.toolName === "Edit" || props.toolName === "MultiEdit") && args.old_string && args.new_string) {
-    return (
-      <div className="px-2.5 py-2">
-        <DiffRenderer oldText={String(args.old_string)} newText={String(args.new_string)} />
-        {result && !result.includes("has been updated successfully") && (
-          <div className="mt-2">
-            <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-0.5">Result</div>
-            <pre className="font-mono text-[11px] text-base-content/45 whitespace-pre-wrap break-words m-0 leading-relaxed bg-base-100/50 rounded-md p-2 max-h-[160px] overflow-y-auto">
-              {result}
-            </pre>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (props.toolName === "mcp__playwright__browser_take_screenshot" || props.toolName === "mcp__playwright__browser_snapshot") {
-    var screenshotMatch = result.match(/\[Screenshot[^\]]*\]\(([^)]+)\)/);
-    var pathMatch = result.match(/path:\s*['"]?([^\s'"]+\.(?:png|jpg|jpeg))/i);
-    var imagePath = screenshotMatch ? screenshotMatch[1] : pathMatch ? pathMatch[1] : null;
-    if (imagePath) {
-      return (
-        <div className="px-2.5 py-2">
-          <ImageRenderer path={imagePath} />
-        </div>
-      );
-    }
-  }
-
-  if (props.toolName === "Read" && args.file_path && isImagePath(String(args.file_path))) {
-    return (
-      <div className="px-2.5 py-2">
-        <ImageRenderer path={String(args.file_path)} />
-      </div>
-    );
-  }
-
-  if (props.toolName === "Read" && args.file_path && result) {
-    return (
-      <div className="px-2.5 py-2">
-        <FileHeader path={String(args.file_path)} />
-        <pre className="font-mono text-[11px] text-base-content/45 whitespace-pre-wrap break-words m-0 leading-relaxed bg-base-100/50 rounded-md p-2 max-h-[240px] overflow-y-auto">
-          {result}
-        </pre>
-      </div>
-    );
-  }
-
-  if (result && hasMarkdownTable(result)) {
-    return (
-      <div className="px-2.5 py-2">
-        <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-0.5">Result</div>
-        <div className="prose prose-sm max-w-none text-[11px] [&_table]:text-[11px] [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_th]:text-base-content/60 [&_td]:text-base-content/45 [&_table]:border-base-content/10 [&_th]:border-base-content/10 [&_td]:border-base-content/10 [&_th]:bg-base-100/50">
-          <Markdown remarkPlugins={[remarkGfm]}>{result}</Markdown>
-        </div>
-      </div>
-    );
-  }
-
-  if (!result) return null;
-
-  return (
-    <div className="px-2.5 py-2">
-      <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-0.5">Result</div>
-      <pre className="font-mono text-[11px] text-base-content/45 whitespace-pre-wrap break-words m-0 leading-relaxed bg-base-100/50 rounded-md p-2 max-h-[240px] overflow-y-auto">
-        {result}
-      </pre>
-    </div>
-  );
-}

package/src/client/components/chat/VoiceRecorder.tsx

@@ -1,85 +0,0 @@
-import { Mic } from "lucide-react";
-
-interface VoiceRecorderProps {
-  isRecording: boolean;
-  isSupported: boolean;
-  isSpeaking: boolean;
-  elapsed: number;
-  interimTranscript: string;
-  onStart: () => void;
-  onStop: () => void;
-  onCancel: () => void;
-}
-
-function formatTime(seconds: number): string {
-  var m = Math.floor(seconds / 60);
-  var s = seconds % 60;
-  return m + ":" + (s < 10 ? "0" : "") + s;
-}
-
-export function VoiceRecorder(props: VoiceRecorderProps) {
-  if (!props.isRecording) {
-    return (
-      <button
-        aria-label={props.isSupported ? "Start voice input" : "Voice input not supported"}
-        disabled={!props.isSupported}
-        onClick={props.onStart}
-        className={
-          "w-7 h-7 rounded-md flex items-center justify-center transition-colors flex-shrink-0 " +
-          (props.isSupported
-            ? "text-base-content/30 hover:text-base-content/50 border border-base-content/10 hover:border-base-content/20"
-            : "text-base-content/15 cursor-not-allowed")
-        }
-        title={props.isSupported ? "Voice input" : "Voice input not supported in this browser"}
-      >
-        <Mic size={13} />
-      </button>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2 flex-1 min-w-0">
-      <button
-        aria-label="Stop recording"
-        onClick={props.onStop}
-        className="w-7 h-7 rounded-md flex items-center justify-center bg-error/15 text-error border border-error/30 animate-pulse flex-shrink-0"
-      >
-        <Mic size={13} />
-      </button>
-
-      <div className="flex items-center gap-[2px] h-5" aria-hidden="true">
-        {Array.from({ length: 8 }).map(function (_, i) {
-          return (
-            <div
-              key={i}
-              className={
-                "w-[2px] rounded-sm bg-error transition-all duration-300 " +
-                (props.isSpeaking ? "animate-waveform" : "")
-              }
-              style={{
-                height: props.isSpeaking ? undefined : "4px",
-                opacity: props.isSpeaking ? undefined : 0.3,
-                animationDelay: (i * 0.1) + "s",
-              }}
-            />
-          );
-        })}
-      </div>
-
-      <span className="text-[12px] text-error font-mono flex-shrink-0">{formatTime(props.elapsed)}</span>
-
-      {props.interimTranscript && (
-        <span className="text-[11px] text-base-content/30 truncate flex-1 min-w-0">
-          {props.interimTranscript.slice(-60)}
-        </span>
-      )}
-
-      <button
-        onClick={props.onCancel}
-        className="text-[11px] text-base-content/40 hover:text-base-content/60 border border-base-content/10 rounded-md px-2 py-0.5 flex-shrink-0"
-      >
-        Cancel
-      </button>
-    </div>
-  );
-}

package/src/client/components/chat/toolSummary.ts

@@ -1,41 +0,0 @@
-export function formatToolSummary(name: string, argsStr: string): string {
-  try {
-    var args = JSON.parse(argsStr);
-    if (name === "Read" && args.file_path) return args.file_path;
-    if (name === "Write" && args.file_path) return args.file_path;
-    if (name === "Edit" && args.file_path) return args.file_path;
-    if (name === "MultiEdit" && args.file_path) return args.file_path;
-    if (name === "Grep" && args.pattern) return args.pattern + (args.path ? " in " + args.path : "");
-    if (name === "Glob" && args.pattern) return args.pattern + (args.path ? " in " + args.path : "");
-    if (name === "Bash" && (args.command || args.description)) {
-      var cmd = args.description || args.command;
-      return cmd.length > 60 ? cmd.slice(0, 57) + "..." : cmd;
-    }
-    if (name === "LS" && args.path) return args.path;
-    if (name === "Agent" && args.description) return args.description;
-    if (name === "Skill" && args.skill) return args.skill;
-    if (name === "NotebookEdit" && args.file_path) return args.file_path;
-    if (name === "WebSearch" && args.query) return args.query;
-    if (name === "WebFetch" && args.url) return args.url.length > 60 ? args.url.slice(0, 57) + "..." : args.url;
-    if (name === "TodoWrite" || name === "TaskCreate" || name === "TaskUpdate") {
-      if (args.description) return args.description.length > 50 ? args.description.slice(0, 47) + "..." : args.description;
-    }
-    if (name.startsWith("mcp__playwright__")) {
-      var short = name.replace("mcp__playwright__browser_", "");
-      if (args.url) return short + " " + args.url;
-      if (args.element) return short + " " + args.element;
-      if (args.filename) return short + " → " + args.filename;
-      return short;
-    }
-    if (name.startsWith("mcp__")) {
-      var parts = name.split("__");
-      return parts.length >= 3 ? parts.slice(2).join(".") : name;
-    }
-    if (args.file_path) return args.file_path;
-    if (args.path) return args.path;
-    if (args.query) return args.query;
-    return "";
-  } catch {
-    return "";
-  }
-}

package/src/client/components/dashboard/DashboardView.tsx

@@ -1,200 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { useMesh } from "../../hooks/useMesh";
-import { useProjects } from "../../hooks/useProjects";
-import { useSidebar } from "../../hooks/useSidebar";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useTimeTick } from "../../hooks/useTimeTick";
-import { LatticeLogomark } from "../ui/LatticeLogomark";
-import { QuickStats } from "../analytics/QuickStats";
-import {
-  Network, FolderOpen, MessageSquare, Menu,
-  ChevronRight, CircleDot, Circle,
-} from "lucide-react";
-import type { ServerMessage, SessionSummary, LatticeConfig } from "#shared";
-import { formatSessionTitle } from "../../utils/formatSessionTitle";
-import { openSessionTab } from "../../stores/workspace";
-
-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";
-}
-
-export function DashboardView() {
-  useTimeTick();
-  var { nodes } = useMesh();
-  var { projects } = useProjects();
-  var sidebar = useSidebar();
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [sessions, setSessions] = useState<SessionSummary[]>([]);
-  var [localConfig, setLocalConfig] = useState<LatticeConfig | null>(null);
-
-  var onlineNodes = useMemo(function () {
-    return nodes.filter(function (n) { return n.online; });
-  }, [nodes]);
-
-  useEffect(function () {
-    function handleSessions(msg: ServerMessage) {
-      if (msg.type !== "session:list_all") return;
-      var data = msg as { type: "session:list_all"; sessions: SessionSummary[] };
-      setSessions(data.sessions);
-    }
-
-    function handleSettings(msg: ServerMessage) {
-      if (msg.type !== "settings:data") return;
-      var data = msg as { type: "settings:data"; config: LatticeConfig };
-      setLocalConfig(data.config);
-    }
-
-    subscribe("session:list_all", handleSessions);
-    subscribe("settings:data", handleSettings);
-    send({ type: "session:list_all_request" });
-    send({ type: "settings:get" });
-
-    return function () {
-      unsubscribe("session:list_all", handleSessions);
-      unsubscribe("settings:data", handleSettings);
-    };
-  }, []);
-
-  var projectTitleMap = useMemo(function () {
-    var map = new Map<string, string>();
-    for (var i = 0; i < projects.length; i++) {
-      map.set(projects[i].slug, projects[i].title);
-    }
-    return map;
-  }, [projects]);
-
-  function getProjectTitle(slug: string): string {
-    return projectTitleMap.get(slug) || slug;
-  }
-
-  var sessionsByProject = useMemo(function () {
-    var map = new Map<string, SessionSummary[]>();
-    for (var i = 0; i < sessions.length; i++) {
-      var s = sessions[i];
-      var arr = map.get(s.projectSlug);
-      if (!arr) {
-        arr = [];
-        map.set(s.projectSlug, arr);
-      }
-      arr.push(s);
-    }
-    return map;
-  }, [sessions]);
-
-  var remoteNodes = nodes.filter(function (n) { return !n.isLocal; });
-
-  return (
-    <div className="flex-1 overflow-auto">
-      <div className="max-w-2xl mx-auto px-4 sm:px-8 py-6 sm:py-10">
-        <div className="flex items-center gap-3 mb-2">
-          <button
-            className="btn btn-ghost btn-sm btn-square lg:hidden"
-            aria-label="Toggle sidebar"
-            onClick={sidebar.toggleDrawer}
-          >
-            <Menu size={18} />
-          </button>
-          <LatticeLogomark size={28} />
-          <h1 className="text-lg font-mono font-bold text-base-content">Lattice</h1>
-        </div>
-
-        <div className="flex items-center gap-4 text-[11px] font-mono text-base-content/30 mb-10 ml-[43px]">
-          <span>{onlineNodes.length}/{nodes.length} nodes</span>
-          <span className="text-base-content/15">/</span>
-          <span>{projects.length} projects</span>
-          <span className="text-base-content/15">/</span>
-          <span>{sessions.length} sessions</span>
-        </div>
-
-        <div className="mb-12">
-          <QuickStats />
-        </div>
-
-        {sessions.length > 0 && (
-          <div className="mb-12">
-            <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Recent Sessions</h2>
-            <div className="flex flex-col gap-1">
-              {sessions.slice(0, 8).map(function (s) {
-                return (
-                  <button
-                    key={s.id}
-                    onClick={function () { openSessionTab(s.id, s.projectSlug, s.title); sidebar.navigateToSession(s.projectSlug, s.id); }}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-base-200 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary group"
-                  >
-                    <MessageSquare size={12} className="text-base-content/20 flex-shrink-0" />
-                    <span className="flex-1 text-[12px] text-base-content/70 truncate group-hover:text-base-content">{formatSessionTitle(s.title) || "Untitled"}</span>
-                    <span className="text-[10px] font-mono text-base-content/25 flex-shrink-0">
-                      {getProjectTitle(s.projectSlug)}
-                    </span>
-                    <span className="text-[10px] text-base-content/20 font-mono flex-shrink-0">
-                      {relativeTime(s.updatedAt)}
-                    </span>
-                    <ChevronRight size={10} className="text-base-content/15 flex-shrink-0 opacity-0 group-hover:opacity-100" />
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {projects.length > 0 && (
-          <div className="mb-12">
-            <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Projects</h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-              {projects.map(function (project) {
-                var projectSessions = sessionsByProject.get(project.slug) || [];
-                return (
-                  <button
-                    key={project.slug + "@" + project.nodeId}
-                    onClick={function () { sidebar.setActiveProjectSlug(project.slug); }}
-                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-base-200 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary group"
-                  >
-                    <FolderOpen size={14} className="text-base-content/20 flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="text-[13px] font-semibold text-base-content/70 truncate group-hover:text-base-content">{project.title}</div>
-                      <div className="text-[10px] text-base-content/25 font-mono">
-                        {projectSessions.length} session{projectSessions.length !== 1 ? "s" : ""}
-                        {project.isRemote && (
-                          <span className="ml-1.5 text-base-content/20">on {project.nodeName}</span>
-                        )}
-                      </div>
-                    </div>
-                    <ChevronRight size={12} className="text-base-content/15 flex-shrink-0 opacity-0 group-hover:opacity-100" />
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {remoteNodes.length > 0 && (
-          <div>
-            <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Mesh</h2>
-            <div className="flex flex-wrap gap-x-6 gap-y-2">
-              {remoteNodes.map(function (node) {
-                return (
-                  <div key={node.id} className="flex items-center gap-2">
-                    {node.online
-                      ? <CircleDot size={10} className="text-success flex-shrink-0" />
-                      : <Circle size={10} className="text-base-content/20 flex-shrink-0" />
-                    }
-                    <span className="text-[12px] text-base-content/50">{node.name}</span>
-                    <span className="text-[10px] text-base-content/20 font-mono">{node.projects.length}p</span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}