@cryptiklemur/lattice 1.42.0 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.42.0",
+  "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>",