@cryptiklemur/lattice 1.28.1 → 1.28.3

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

@@ -1,6 +1,5 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
-import { X, Copy, Check } from "lucide-react";
+import { useState, useEffect, useCallback, useRef, memo } from "react";
+import { X, Copy, Check, Loader2 } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useMesh } from "../../hooks/useMesh";
 import { clearInvite } from "../../stores/mesh";
@@ -14,7 +13,7 @@ interface PairingDialogProps {
   onClose: () => void;
 }
 
-export function PairingDialog(props: PairingDialogProps) {
+export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps) {
   var ws = useWebSocket();
   var mesh = useMesh();
   var [tab, setTab] = useState<Tab>("generate");
@@ -22,9 +21,9 @@ export function PairingDialog(props: PairingDialogProps) {
   var [pairStatus, setPairStatus] = useState<PairStatus>("idle");
   var [pairError, setPairError] = useState<string | null>(null);
   var [copied, setCopied] = useState(false);
+  var [generating, setGenerating] = useState(false);
   var modalRef = useRef<HTMLDivElement>(null);
-  var stableOnClose = useCallback(function () { props.onClose(); }, [props.onClose]);
-  useFocusTrap(modalRef, stableOnClose, props.isOpen);
+  var inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(function () {
     if (!props.isOpen) {
@@ -33,30 +32,42 @@ export function PairingDialog(props: PairingDialogProps) {
       setPairStatus("idle");
       setPairError(null);
       setCopied(false);
+      setGenerating(false);
       setTab("generate");
+      return;
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") props.onClose();
     }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
   }, [props.isOpen]);
 
   useEffect(function () {
-    if (pairStatus !== "connecting") {
-      return;
+    function handleInvite(msg: ServerMessage) {
+      if (msg.type === "mesh:invite_code") {
+        setGenerating(false);
+      }
     }
 
-    function handler(msg: ServerMessage) {
+    function handlePaired(msg: ServerMessage) {
       if (msg.type === "mesh:paired") {
         setPairStatus("paired");
         setPairError(null);
       }
     }
 
-    ws.subscribe("mesh:paired", handler);
+    ws.subscribe("mesh:invite_code", handleInvite);
+    ws.subscribe("mesh:paired", handlePaired);
     return function () {
-      ws.unsubscribe("mesh:paired", handler);
+      ws.unsubscribe("mesh:invite_code", handleInvite);
+      ws.unsubscribe("mesh:paired", handlePaired);
     };
-  }, [ws, pairStatus]);
+  }, []);
 
   function handleGenerateInvite() {
     clearInvite();
+    setGenerating(true);
     mesh.generateInvite();
   }
 
@@ -152,7 +163,7 @@ export function PairingDialog(props: PairingDialogProps) {
                 The code encodes this node&apos;s address and a one-time auth token.
               </div>
 
-              {!mesh.inviteCode && (
+              {!mesh.inviteCode && !generating && (
                 <button
                   onClick={handleGenerateInvite}
                   className="btn btn-primary btn-sm"
@@ -161,6 +172,13 @@ export function PairingDialog(props: PairingDialogProps) {
                 </button>
               )}
 
+              {generating && !mesh.inviteCode && (
+                <div className="flex items-center gap-2 text-[13px] text-base-content/40">
+                  <Loader2 size={14} className="animate-spin text-primary" />
+                  Generating invite code...
+                </div>
+              )}
+
               {mesh.inviteCode && (
                 <div>
                   <div className="flex items-center gap-2 px-3.5 py-2.5 rounded bg-base-100 border border-base-300 mb-4">
@@ -180,17 +198,6 @@ export function PairingDialog(props: PairingDialogProps) {
                     </button>
                   </div>
 
-                  {mesh.inviteQr && (
-                    <div className="flex justify-center mb-4">
-                      <img
-                        src={mesh.inviteQr}
-                        alt="QR code for invite"
-                        className="w-40 h-40 rounded border border-base-300"
-                        style={{ imageRendering: "pixelated" }}
-                      />
-                    </div>
-                  )}
-
                   <button
                     onClick={handleGenerateInvite}
                     className="text-[12px] text-base-content/40 underline cursor-pointer"
@@ -209,6 +216,7 @@ export function PairingDialog(props: PairingDialogProps) {
               </div>
 
               <input
+                ref={inputRef}
                 type="text"
                 value={pairCode}
                 onChange={function (e) {
@@ -224,6 +232,7 @@ export function PairingDialog(props: PairingDialogProps) {
                   }
                 }}
                 placeholder="LTCE-XXXX-XXXX"
+                autoFocus
                 disabled={pairStatus === "connecting" || pairStatus === "paired"}
                 className="input input-bordered w-full bg-base-100 text-base-content font-mono text-[14px] tracking-[0.06em] mb-3 focus:border-primary"
               />
@@ -267,4 +276,4 @@ export function PairingDialog(props: PairingDialogProps) {
       </div>
     </div>
   );
-}
+});

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback, memo } from "react";
 import { Plus, CircleDot, Circle } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useMesh } from "../../hooks/useMesh";
@@ -83,6 +83,8 @@ export function MeshStatus() {
   var { nodes } = useMesh();
   var [pairingOpen, setPairingOpen] = useState(false);
 
+  var handleClosePairing = useCallback(function () { setPairingOpen(false); }, []);
+
   function handleUnpair(nodeId: string) {
     ws.send({ type: "mesh:unpair", nodeId });
   }
@@ -138,7 +140,7 @@ export function MeshStatus() {
 
       <PairingDialog
         isOpen={pairingOpen}
-        onClose={function () { setPairingOpen(false); }}
+        onClose={handleClosePairing}
       />
     </div>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.28.1",
+  "version": "1.28.3",
   "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/handlers/mesh.ts

@@ -4,6 +4,22 @@ import { sendTo, broadcast } from "../ws/broadcast";
 import { loadConfig } from "../config";
 import { loadOrCreateIdentity } from "../identity";
 import { generateInviteCode, parseInviteCode, validatePairingToken, consumePairingToken } from "../mesh/pairing";
+import { networkInterfaces } from "node:os";
+
+function getLocalAddress(): string {
+  var interfaces = networkInterfaces();
+  var keys = Object.keys(interfaces);
+  for (var i = 0; i < keys.length; i++) {
+    var addrs = interfaces[keys[i]];
+    if (!addrs) continue;
+    for (var j = 0; j < addrs.length; j++) {
+      if (!addrs[j].internal && addrs[j].family === "IPv4") {
+        return addrs[j].address;
+      }
+    }
+  }
+  return "localhost";
+}
 import { addPeer, removePeer, loadPeers } from "../mesh/peers";
 import type { PeerInfo } from "@lattice/shared";
 
@@ -42,7 +58,8 @@ export function buildNodesMessage(): NodeInfo[] {
 registerHandler("mesh", function (clientId: string, message: ClientMessage) {
   if (message.type === "mesh:generate_invite") {
     var config = loadConfig();
-    generateInviteCode("localhost", config.port).then(function (result) {
+    var address = getLocalAddress();
+    generateInviteCode(address, config.port).then(function (result) {
       sendTo(clientId, {
         type: "mesh:invite_code",
         code: result.code,
@@ -58,11 +75,11 @@ registerHandler("mesh", function (clientId: string, message: ClientMessage) {
     var pairMsg = message as MeshPairMessage;
     var parsed = parseInviteCode(pairMsg.code);
     if (!parsed) {
-      console.warn("[lattice] mesh:pair — invalid invite code");
+      sendTo(clientId, { type: "chat:error", message: "Invalid invite code format" });
       return;
     }
     if (!validatePairingToken(parsed.token)) {
-      console.warn("[lattice] mesh:pair — invalid or expired token");
+      sendTo(clientId, { type: "chat:error", message: "Invite code is invalid or expired" });
       return;
     }
     consumePairingToken(parsed.token);
@@ -110,6 +127,7 @@ registerHandler("mesh", function (clientId: string, message: ClientMessage) {
     });
     ws.addEventListener("error", function () {
       console.error("[lattice] mesh:pair — failed to connect to", wsUrl);
+      sendTo(clientId, { type: "chat:error", message: "Failed to connect to " + parsed!.address + ":" + parsed!.port });
     });
     return;
   }

package/server/src/mesh/pairing.ts

@@ -1,7 +1,7 @@
 import { randomBytes } from "node:crypto";
-import QRCode from "qrcode";
 
 var BASE62_CHARS = "23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz";
+var CODE_LENGTH = 16;
 
 var PAIRING_TOKEN_TTL = 300000;
 var CLEANUP_INTERVAL = 60000;
@@ -16,7 +16,10 @@ function base62Encode(buf: Buffer): string {
     result = BASE62_CHARS[Number(n % base)] + result;
     n = n / base;
   }
-  return result || BASE62_CHARS[0];
+  while (result.length < CODE_LENGTH) {
+    result = BASE62_CHARS[0] + result;
+  }
+  return result;
 }
 
 function base62Decode(s: string): Buffer {
@@ -36,11 +39,29 @@ function base62Decode(s: string): Buffer {
   return Buffer.from(hex, "hex");
 }
 
+function packPayload(address: string, port: number, token: Buffer): Buffer {
+  var parts = address.split(".");
+  var buf = Buffer.alloc(4 + 2 + token.length);
+  for (var i = 0; i < 4; i++) {
+    buf[i] = parseInt(parts[i] || "0", 10);
+  }
+  buf.writeUInt16BE(port, 4);
+  token.copy(buf, 6);
+  return buf;
+}
+
+function unpackPayload(buf: Buffer): { address: string; port: number; token: string } | null {
+  if (buf.length < 8) return null;
+  var address = buf[0] + "." + buf[1] + "." + buf[2] + "." + buf[3];
+  var port = buf.readUInt16BE(4);
+  var token = buf.subarray(6).toString("hex");
+  return { address, port, token };
+}
+
 function formatCode(raw: string): string {
-  var upper = raw.toUpperCase();
   var chunks: string[] = [];
-  for (var i = 0; i < upper.length; i += 4) {
-    chunks.push(upper.slice(i, i + 4));
+  for (var i = 0; i < raw.length; i += 4) {
+    chunks.push(raw.slice(i, i + 4));
   }
   return "LTCE-" + chunks.join("-");
 }
@@ -53,16 +74,15 @@ export async function generateInviteCode(
   address: string,
   port: number
 ): Promise<{ code: string; token: string; qrDataUrl: string }> {
-  var token = randomBytes(8).toString("hex");
-  var payload = Buffer.from(address + ":" + port + ":" + token, "utf-8");
+  var tokenBuf = randomBytes(4);
+  var token = tokenBuf.toString("hex");
+  var payload = packPayload(address, port, tokenBuf);
   var encoded = base62Encode(payload);
   var code = formatCode(encoded);
 
   pendingTokens.set(token, Date.now());
 
-  var qrDataUrl = await QRCode.toString(code, { type: "svg" });
-
-  return { code, token, qrDataUrl };
+  return { code, token, qrDataUrl: "" };
 }
 
 export function parseInviteCode(
@@ -70,19 +90,8 @@ export function parseInviteCode(
 ): { address: string; port: number; token: string } | null {
   try {
     var stripped = stripCode(code);
-    var decoded = base62Decode(stripped).toString("utf-8");
-    var parts = decoded.split(":");
-    if (parts.length < 3) {
-      return null;
-    }
-    var token = parts[parts.length - 1];
-    var portStr = parts[parts.length - 2];
-    var address = parts.slice(0, parts.length - 2).join(":");
-    var port = parseInt(portStr, 10);
-    if (isNaN(port)) {
-      return null;
-    }
-    return { address, port, token };
+    var decoded = base62Decode(stripped);
+    return unpackPayload(decoded);
   } catch {
     return null;
   }