@cryptiklemur/lattice 0.0.0

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

@@ -0,0 +1,343 @@
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import Markdown from "react-markdown";
+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={"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={"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);
+
+  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
+          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); }}
+          onKeyDown={function (e) { if (e.key === "Escape") 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>{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/client/src/components/chat/toolSummary.ts

@@ -0,0 +1,41 @@
+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/client/src/components/dashboard/DashboardView.tsx

@@ -0,0 +1,219 @@
+import { useState, useEffect } from "react";
+import { useMesh } from "../../hooks/useMesh";
+import { useProjects } from "../../hooks/useProjects";
+import { useSidebar } from "../../hooks/useSidebar";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { LatticeLogomark } from "../ui/LatticeLogomark";
+import {
+  Network, FolderOpen, Activity, MessageSquare, Menu,
+  ChevronRight, Lock, Bug,
+} from "lucide-react";
+import type { ServerMessage, SessionSummary, LatticeConfig } from "@lattice/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";
+}
+
+export function DashboardView() {
+  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 = nodes.filter(function (n) { return n.online; });
+
+  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);
+    };
+  }, []);
+
+  function getProjectTitle(slug: string): string {
+    var project = projects.find(function (p) { return p.slug === slug; });
+    return project ? project.title : slug;
+  }
+
+  var totalSessions = sessions.length;
+
+  return (
+    <div className="flex-1 overflow-auto">
+      <div className="max-w-2xl mx-auto px-4 sm:px-8 py-8 sm:py-12">
+        <div className="flex items-center gap-3 mb-8">
+          <button
+            className="btn btn-ghost btn-sm btn-square lg:hidden"
+            aria-label="Toggle sidebar"
+            onClick={sidebar.toggleDrawer}
+          >
+            <Menu size={18} />
+          </button>
+          <LatticeLogomark size={32} />
+          <div>
+            <h1 className="text-xl font-mono font-bold text-base-content">Lattice</h1>
+            <p className="text-[13px] text-base-content/40">Multi-machine agentic dashboard</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
+          <div className="bg-base-200 rounded-xl p-3 px-4 border border-base-content/15">
+            <div className="flex items-center gap-2 mb-1.5">
+              <Network size={14} className="text-primary" />
+              <span className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40">Nodes</span>
+            </div>
+            <div className="text-xl font-mono font-bold text-base-content">
+              {onlineNodes.length}
+              <span className="text-base-content/30 text-sm font-normal">/{nodes.length}</span>
+            </div>
+          </div>
+
+          <div className="bg-base-200 rounded-xl p-3 px-4 border border-base-content/15">
+            <div className="flex items-center gap-2 mb-1.5">
+              <FolderOpen size={14} className="text-accent" />
+              <span className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40">Projects</span>
+            </div>
+            <div className="text-xl font-mono font-bold text-base-content">{projects.length}</div>
+          </div>
+
+          <div className="bg-base-200 rounded-xl p-3 px-4 border border-base-content/15">
+            <div className="flex items-center gap-2 mb-1.5">
+              <MessageSquare size={14} className="text-info" />
+              <span className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40">Sessions</span>
+            </div>
+            <div className="text-xl font-mono font-bold text-base-content">{totalSessions}</div>
+          </div>
+
+          <div className="bg-base-200 rounded-xl p-3 px-4 border border-base-content/15">
+            <div className="flex items-center gap-2 mb-1.5">
+              <Activity size={14} className="text-success" />
+              <span className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40">Status</span>
+            </div>
+            <div className="text-xl font-mono font-bold text-success">OK</div>
+          </div>
+        </div>
+
+        {sessions.length > 0 && (
+          <div className="mb-8">
+            <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.5">
+              {sessions.slice(0, 8).map(function (s) {
+                return (
+                  <button
+                    key={s.id}
+                    onClick={function () { sidebar.navigateToSession(s.projectSlug, s.id); }}
+                    className="flex items-center gap-3 px-3 py-2 rounded-xl border border-base-content/15 bg-base-200 hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary"
+                  >
+                    <MessageSquare size={12} className="text-base-content/30 flex-shrink-0" />
+                    <span className="flex-1 text-[12px] text-base-content truncate">{s.title || "Untitled"}</span>
+                    <span className="px-1.5 py-0.5 rounded-md text-[10px] font-mono bg-base-content/8 text-base-content/40 flex-shrink-0">
+                      {getProjectTitle(s.projectSlug)}
+                    </span>
+                    <span className="text-[10px] text-base-content/30 font-mono flex-shrink-0">
+                      {relativeTime(s.updatedAt)}
+                    </span>
+                    <ChevronRight size={12} className="text-base-content/20 flex-shrink-0" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {projects.length > 0 && (
+          <div className="mb-8">
+            <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-3">
+              {projects.map(function (project) {
+                var projectSessions = sessions.filter(function (s) { return s.projectSlug === project.slug; });
+                return (
+                  <button
+                    key={project.slug}
+                    onClick={function () { sidebar.setActiveProjectSlug(project.slug); }}
+                    className="flex items-start gap-3 px-4 py-3 rounded-xl bg-base-200 border border-base-content/15 hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary group"
+                  >
+                    <FolderOpen size={16} className="text-base-content/30 mt-0.5 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-[13px] font-semibold text-base-content truncate">{project.title}</div>
+                      <div className="text-[11px] text-base-content/30 font-mono truncate">{project.path}</div>
+                      <div className="text-[10px] text-base-content/30 mt-1">
+                        {projectSessions.length} session{projectSessions.length !== 1 ? "s" : ""}
+                      </div>
+                    </div>
+                    <ChevronRight size={14} className="text-base-content/20 mt-0.5 flex-shrink-0 group-hover:text-base-content/40" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {nodes.length > 0 && (
+          <div>
+            <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Mesh Nodes</h2>
+            <div className="flex flex-col gap-2">
+              {nodes.map(function (node) {
+                return (
+                  <div key={node.id} className="flex items-center gap-3 bg-base-200 rounded-xl px-4 py-3 border border-base-content/15">
+                    <div className={"w-2.5 h-2.5 rounded-full flex-shrink-0 " + (node.online ? "bg-success" : "bg-error")} />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-[13px] font-semibold text-base-content truncate">
+                        {node.name}
+                        {node.isLocal && <span className="text-base-content/30 font-normal ml-2">(this machine)</span>}
+                      </div>
+                      <div className="text-[11px] text-base-content/40">{node.address}:{node.port}</div>
+                    </div>
+                    {node.isLocal && localConfig && (
+                      <div className="flex gap-1.5 flex-shrink-0">
+                        {localConfig.tls && (
+                          <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] font-mono bg-base-content/8 text-base-content/40">
+                            <Lock size={9} />
+                            TLS
+                          </span>
+                        )}
+                        {localConfig.debug && (
+                          <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] font-mono bg-warning/20 text-warning">
+                            <Bug size={9} />
+                            Debug
+                          </span>
+                        )}
+                      </div>
+                    )}
+                    <div className="text-[11px] text-base-content/40 flex-shrink-0">
+                      {node.projects.length} project{node.projects.length !== 1 ? "s" : ""}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}