@cryptiklemur/lattice 1.41.3 → 1.42.1

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

@@ -7,8 +7,8 @@ import { useTimeTick } from "../../hooks/useTimeTick";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import { QuickStats } from "../analytics/QuickStats";
 import {
-  Network, FolderOpen, Activity, MessageSquare, Menu,
-  ChevronRight, Lock, Bug,
+  Network, FolderOpen, MessageSquare, Menu,
+  ChevronRight, CircleDot, Circle,
 } from "lucide-react";
 import type { ServerMessage, SessionSummary, LatticeConfig } from "@lattice/shared";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
@@ -89,12 +89,12 @@ export function DashboardView() {
     return map;
   }, [sessions]);
 
-  var totalSessions = sessions.length;
+  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-8 sm:py-12">
-        <div className="flex items-center gap-3 mb-8">
+      <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"
@@ -102,74 +102,42 @@ export function DashboardView() {
           >
             <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>
+          <LatticeLogomark size={28} />
+          <h1 className="text-lg font-mono font-bold text-base-content">Lattice</h1>
         </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 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="mt-4 mb-8">
+        <div className="mb-12">
           <QuickStats />
         </div>
 
         {sessions.length > 0 && (
-          <div className="mb-8">
+          <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.5">
+            <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-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"
+                    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/30 flex-shrink-0" />
-                    <span className="flex-1 text-[12px] text-base-content truncate">{formatSessionTitle(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">
+                    <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/30 font-mono flex-shrink-0">
+                    <span className="text-[10px] text-base-content/20 font-mono flex-shrink-0">
                       {relativeTime(s.updatedAt)}
                     </span>
-                    <ChevronRight size={12} className="text-base-content/20 flex-shrink-0" />
+                    <ChevronRight size={10} className="text-base-content/15 flex-shrink-0 opacity-0 group-hover:opacity-100" />
                   </button>
                 );
               })}
@@ -178,26 +146,28 @@ export function DashboardView() {
         )}
 
         {projects.length > 0 && (
-          <div className="mb-8">
+          <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-3">
+            <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}
+                    key={project.slug + "@" + project.nodeId}
                     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"
+                    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={16} className="text-base-content/30 mt-0.5 flex-shrink-0" />
+                    <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 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">
+                      <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={14} className="text-base-content/20 mt-0.5 flex-shrink-0 group-hover:text-base-content/40" />
+                    <ChevronRight size={12} className="text-base-content/15 flex-shrink-0 opacity-0 group-hover:opacity-100" />
                   </button>
                 );
               })}
@@ -205,40 +175,19 @@ export function DashboardView() {
           </div>
         )}
 
-        {nodes.length > 0 && (
+        {remoteNodes.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) {
+            <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-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 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>
                 );
               })}

package/client/src/components/mesh/PairingDialog.tsx

@@ -26,6 +26,7 @@ export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps
   var [selectedAddress, setSelectedAddress] = useState("");
   var modalRef = useRef<HTMLDivElement>(null);
   var inputRef = useRef<HTMLInputElement>(null);
+  var pairTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(function () {
     if (!props.isOpen) {
@@ -38,6 +39,7 @@ export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps
       setAddresses([]);
       setSelectedAddress("");
       setTab("generate");
+      if (pairTimeoutRef.current) { clearTimeout(pairTimeoutRef.current); pairTimeoutRef.current = null; }
       return;
     }
 
@@ -109,7 +111,8 @@ export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps
     setPairStatus("connecting");
     setPairError(null);
 
-    var timeout = setTimeout(function () {
+    if (pairTimeoutRef.current) clearTimeout(pairTimeoutRef.current);
+    pairTimeoutRef.current = setTimeout(function () {
       setPairStatus(function (prev) {
         if (prev === "connecting") {
           setPairError("Pairing timed out. Check the code and try again.");
@@ -120,10 +123,6 @@ export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps
     }, 30000);
 
     ws.send({ type: "mesh:pair", code: trimmed });
-
-    return function () {
-      clearTimeout(timeout);
-    };
   }
 
   function handleCopyCode() {

package/client/src/components/settings/MeshStatus.tsx

@@ -41,14 +41,14 @@ function NodeRow(props: NodeRowProps) {
             </span>
           )}
         </div>
-        <div className="text-[11px] text-base-content/40">
+        <div className="text-[11px] text-base-content/40 truncate">
           {(props.node.addresses && props.node.addresses.length > 0
             ? props.node.addresses
             : [props.node.address + (props.node.port ? ":" + props.node.port : "")]
           ).map(function (addr, i) {
             return (
-              <span key={addr} className="mr-2">
-                {i > 0 && <span className="text-base-content/20 mr-2">/</span>}
+              <span key={addr}>
+                {i > 0 && <span className="text-base-content/20 mx-1">/</span>}
                 {addr}
               </span>
             );

package/client/src/components/sidebar/ProjectRail.tsx

@@ -19,6 +19,7 @@ function getProjectInitials(title: string): string {
 interface ProjectGroup {
   slug: string;
   title: string;
+  activeSessions: number;
   nodes: Array<{ nodeId: string; nodeName: string; online: boolean; path: string }>;
 }
 
@@ -36,8 +37,9 @@ function groupProjectsBySlug(projects: ProjectInfo[], nodes: NodeInfo[]): Projec
     };
     if (existing) {
       existing.nodes.push(nodeEntry);
+      existing.activeSessions += p.activeSessions ?? 0;
     } else {
-      groups.set(p.slug, { slug: p.slug, title: p.title, nodes: [nodeEntry] });
+      groups.set(p.slug, { slug: p.slug, title: p.title, activeSessions: p.activeSessions ?? 0, nodes: [nodeEntry] });
     }
   }
   return Array.from(groups.values());
@@ -95,6 +97,12 @@ function ProjectButton(props: ProjectButtonProps) {
         {initials}
       </button>
 
+      {props.group.activeSessions > 0 && (
+        <div className="absolute -top-1 -right-1 min-w-[16px] h-[16px] rounded-full bg-primary text-primary-content text-[9px] font-bold flex items-center justify-center pointer-events-none px-1">
+          {props.group.activeSessions}
+        </div>
+      )}
+
       <div className="absolute bottom-0 right-0 flex gap-[2px] pointer-events-none">
         {props.group.nodes.map(function (n) {
           return (
@@ -137,6 +145,59 @@ function ProjectButton(props: ProjectButtonProps) {
   );
 }
 
+function NodeIndicator({ node }: { node: NodeInfo }) {
+  var [hovered, setHovered] = useState(false);
+  var [tooltipTop, setTooltipTop] = useState(0);
+  var sidebar = useSidebar();
+  var initial = node.name.charAt(0).toUpperCase();
+
+  return (
+    <div className="relative flex items-center">
+      <button
+        onClick={function () { sidebar.openSettings("nodes"); }}
+        onMouseEnter={function (e) {
+          var rect = e.currentTarget.getBoundingClientRect();
+          setTooltipTop(rect.top + rect.height / 2);
+          setHovered(true);
+        }}
+        onMouseLeave={function () { setHovered(false); }}
+        className={
+          "w-[28px] h-[28px] flex items-center justify-center text-[10px] font-bold rounded-full cursor-pointer transition-all duration-[120ms] flex-shrink-0 border-2 " +
+          (node.online
+            ? "border-success/50 bg-base-200 text-base-content/50 hover:bg-base-200/80"
+            : "border-error/30 bg-base-200/50 text-base-content/25 hover:bg-base-200/60")
+        }
+      >
+        {initial}
+      </button>
+      {hovered && (
+        <div
+          className="pointer-events-none z-[9000] bg-base-300 border border-base-content/20 rounded-lg px-2.5 py-1.5 shadow-xl"
+          style={{
+            position: "fixed",
+            left: "calc(64px + 8px)",
+            top: tooltipTop + "px",
+            transform: "translateY(-50%)",
+          }}
+        >
+          <div className="flex items-center gap-1.5">
+            <div className={"w-[6px] h-[6px] rounded-full flex-shrink-0 " + (node.online ? "bg-success" : "bg-error")} />
+            <span className="text-[12px] font-bold text-base-content whitespace-nowrap">{node.name}</span>
+          </div>
+          {node.addresses && node.addresses.length > 0 && (
+            <div className="text-[10px] text-base-content/40 mt-0.5 whitespace-nowrap">
+              {node.addresses[0]}
+            </div>
+          )}
+          <div className="text-[10px] text-base-content/30 mt-0.5">
+            {node.projects.length} project{node.projects.length !== 1 ? "s" : ""}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface ProjectRailProps {
   projects: ProjectInfo[];
   nodes: NodeInfo[];
@@ -151,6 +212,7 @@ export function ProjectRail(props: ProjectRailProps) {
   var ws = useWebSocket();
   var sidebar = useSidebar();
   var groups = groupProjectsBySlug(props.projects, props.nodes);
+  var remoteNodes = props.nodes.filter(function (n) { return !n.isLocal; });
   var [contextMenu, setContextMenu] = useState<ContextMenuState>({
     visible: false,
     x: 0,
@@ -255,10 +317,18 @@ export function ProjectRail(props: ProjectRailProps) {
       })}
 
 
-      {groups.length > 0 && (
+      {groups.length > 0 && remoteNodes.length > 0 && (
         <div className="w-6 h-px bg-base-300 my-0.5 flex-shrink-0" />
       )}
 
+      {remoteNodes.map(function (node) {
+        return (
+          <NodeIndicator key={node.id} node={node} />
+        );
+      })}
+
+      <div className="w-6 h-px bg-base-300 my-0.5 flex-shrink-0" />
+
       <button
         onClick={function () { sidebar.openAddProject(); }}
         className="w-[42px] h-[42px] flex items-center justify-center rounded-full border-2 border-dashed border-base-content/25 text-base-content/20 hover:border-base-content/40 hover:text-base-content/40 transition-colors duration-[120ms] flex-shrink-0 cursor-pointer"

package/client/src/components/sidebar/SessionList.tsx

@@ -292,7 +292,7 @@ export function SessionList(props: SessionListProps) {
       hasMoreRef.current = true;
       sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug, offset: 0, limit: PAGE_SIZE });
       var interval = setInterval(function () {
-        if (props.projectSlug) {
+        if (props.projectSlug && ws.status === "connected") {
           sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug, offset: 0, limit: PAGE_SIZE });
         }
       }, 10000);

package/client/src/router.tsx

@@ -15,7 +15,6 @@ import { AddProjectModal } from "./components/sidebar/AddProjectModal";
 import { useSidebar } from "./hooks/useSidebar";
 import { useWorkspace } from "./hooks/useWorkspace";
 import { useWebSocket } from "./hooks/useWebSocket";
-import { UpdateBanner } from "./components/ui/UpdateBanner";
 import { NodeDisconnectedOverlay } from "./components/ui/NodeDisconnectedOverlay";
 import { useSwipeDrawer } from "./hooks/useSwipeDrawer";
 import { exitSettings, getSidebarStore, handlePopState, closeDrawer, toggleDrawer } from "./stores/sidebar";
@@ -424,7 +423,6 @@ function RootLayout() {
         />
 
         <main id="main-content" className="drawer-content flex flex-col h-full min-w-0 overflow-hidden relative">
-          <UpdateBanner />
           <Outlet />
           <NodeDisconnectedOverlay />
         </main>

package/package.json

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

package/server/src/daemon.ts

@@ -18,7 +18,7 @@ import { detectIdeProjectName } from "./handlers/settings";
 import "./handlers/session";
 import "./handlers/chat";
 import "./handlers/attachment";
-import { loadInterruptedSessions, unwatchSessionLock, cleanupClientPermissions } from "./project/sdk-bridge";
+import { loadInterruptedSessions, unwatchSessionLock, cleanupClientPermissions, getActiveSessionCountForProject } from "./project/sdk-bridge";
 import { clearActiveSession, getActiveSession } from "./handlers/chat";
 import { clearActiveProject } from "./handlers/fs";
 import { clearClientRemoteNode } from "./ws/router";
@@ -410,7 +410,7 @@ export async function startDaemon(portOverride?: number | null): Promise<void> {
     var currentIdentity = loadOrCreateIdentity();
     broadcast({ type: "mesh:nodes", nodes: buildNodesMessage() });
     var localProjects = currentConfig.projects.map(function (p: typeof currentConfig.projects[number]) {
-      return { slug: p.slug, path: p.path, title: p.title, nodeId: currentIdentity.id, nodeName: currentConfig.name, isRemote: false, ideProjectName: detectIdeProjectName(p.path) };
+      return { slug: p.slug, path: p.path, title: p.title, nodeId: currentIdentity.id, nodeName: currentConfig.name, isRemote: false, ideProjectName: detectIdeProjectName(p.path), activeSessions: getActiveSessionCountForProject(p.path) };
     });
     var remoteProjects = getAllRemoteProjects(currentIdentity.id);
     broadcast({

package/server/src/project/sdk-bridge.ts

@@ -212,6 +212,41 @@ export function getActiveStreamCount(): number {
   return activeStreams.size;
 }
 
+export function getActiveSessionCountForProject(projectPath: string): number {
+  var count = 0;
+  var hash = projectPath.replace(/\//g, "-");
+  var dir = join(homedir(), ".claude", "projects", hash);
+
+  for (var [sessionId] of activeStreams) {
+    if (existsSync(join(dir, sessionId + ".jsonl"))) count++;
+  }
+
+  for (var [sessionId2] of streamMetadata) {
+    void sessionId2;
+  }
+
+  if (isClaudeCliRunningInProject(projectPath)) count++;
+
+  return count;
+}
+
+function isClaudeCliRunningInProject(projectPath: string): boolean {
+  try {
+    var result = Bun.spawnSync(["pgrep", "-x", "claude"], { stderr: "ignore" });
+    if (result.exitCode !== 0) return false;
+    var pids = result.stdout.toString().trim().split("\n");
+    for (var i = 0; i < pids.length; i++) {
+      var pid = parseInt(pids[i], 10);
+      if (isNaN(pid) || pid === process.pid) continue;
+      try {
+        var cwd = readlinkSync("/proc/" + pid + "/cwd");
+        if (cwd === projectPath) return true;
+      } catch {}
+    }
+  } catch {}
+  return false;
+}
+
 /**
  * Check if a session is controlled by an external process (not Lattice).
  * Lattice's own active streams are handled by isProcessing on the client,

package/shared/src/models.ts

@@ -23,6 +23,7 @@ export interface ProjectInfo extends ProjectSummary {
   isRemote: boolean;
   online?: boolean;
   ideProjectName?: string;
+  activeSessions?: number;
 }
 
 export interface SessionSummary {