@cryptiklemur/lattice 1.28.2 → 1.29.0

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "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";
@@ -13,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");
@@ -198,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"
@@ -231,7 +220,15 @@ export function PairingDialog(props: PairingDialogProps) {
                 type="text"
                 value={pairCode}
                 onChange={function (e) {
-                  setPairCode(e.target.value);
+                  var raw = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+                  if (raw.startsWith("LTCE")) raw = raw.slice(4);
+                  if (raw.length > 16) raw = raw.slice(0, 16);
+                  var chunks: string[] = [];
+                  for (var i = 0; i < raw.length; i += 4) {
+                    chunks.push(raw.slice(i, i + 4));
+                  }
+                  var formatted = chunks.length > 0 ? "LTCE-" + chunks.join("-") : "";
+                  setPairCode(formatted);
                   if (pairStatus !== "idle") {
                     setPairStatus("idle");
                     setPairError(null);
@@ -242,7 +239,8 @@ export function PairingDialog(props: PairingDialogProps) {
                     handlePair();
                   }
                 }}
-                placeholder="LTCE-XXXX-XXXX"
+                placeholder="LTCE-XXXX-XXXX-XXXX-XXXX"
+                maxLength={24}
                 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"
@@ -287,4 +285,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.2",
+  "version": "1.29.0",
   "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/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,17 +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 qrSvg = await QRCode.toString(code, { type: "svg" });
-  var qrDataUrl = "data:image/svg+xml;base64," + Buffer.from(qrSvg).toString("base64");
-
-  return { code, token, qrDataUrl };
+  return { code, token, qrDataUrl: "" };
 }
 
 export function parseInviteCode(
@@ -71,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;
   }