@cryptiklemur/lattice 1.28.1 → 1.28.2

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 { X, Copy, Check, Loader2 } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useMesh } from "../../hooks/useMesh";
 import { clearInvite } from "../../stores/mesh";
@@ -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">
@@ -209,6 +227,7 @@ export function PairingDialog(props: PairingDialogProps) {
               </div>
 
               <input
+                ref={inputRef}
                 type="text"
                 value={pairCode}
                 onChange={function (e) {
@@ -224,6 +243,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"
               />

package/package.json

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

@@ -60,7 +60,8 @@ export async function generateInviteCode(
 
   pendingTokens.set(token, Date.now());
 
-  var qrDataUrl = await QRCode.toString(code, { type: "svg" });
+  var qrSvg = await QRCode.toString(code, { type: "svg" });
+  var qrDataUrl = "data:image/svg+xml;base64," + Buffer.from(qrSvg).toString("base64");
 
   return { code, token, qrDataUrl };
 }