@cryptiklemur/lattice 1.42.3 → 1.43.0

package/client/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { RouterProvider } from "@tanstack/react-router";
 import { router } from "./router";
 import { WebSocketProvider } from "./providers/WebSocketProvider";
@@ -10,6 +11,15 @@ import { UpdatePrompt } from "./components/ui/UpdatePrompt";
 function AppInner() {
   var { items, dismiss } = useToastState();
 
+  useEffect(function () {
+    function blockContextMenu(e: MouseEvent) {
+      if ((e.target as HTMLElement).closest("[data-allow-context-menu]")) return;
+      e.preventDefault();
+    }
+    document.addEventListener("contextmenu", blockContextMenu);
+    return function () { document.removeEventListener("contextmenu", blockContextMenu); };
+  }, []);
+
   return (
     <>
       <RouterProvider router={router} />

package/client/src/components/chat/ChatInput.tsx

@@ -478,6 +478,7 @@ export function ChatInput(props: ChatInputProps) {
               <span className="absolute left-0 top-[1px] text-primary/50 font-mono text-[14px] leading-relaxed select-none pointer-events-none">›</span>
               <textarea
                 ref={textareaRef}
+                data-allow-context-menu
                 aria-label="Message input"
                 placeholder={props.disabled ? (props.disabledPlaceholder || "Claude is responding...") : "Message Claude..."}
                 disabled={props.disabled}

package/client/src/components/chat/Message.tsx

@@ -185,7 +185,7 @@ function parseSkillInvocation(text: string): { skillName: string; content: strin
 function SkillMessage(props: { skillName: string; content: string; time: string | null; uuid?: string }) {
   var [expanded, setExpanded] = useState(false);
   return (
-    <div id={props.uuid ? "msg-" + props.uuid : undefined} className="chat chat-end px-5 py-1 group/msg">
+    <div id={props.uuid ? "msg-" + props.uuid : undefined} data-allow-context-menu className="chat chat-end px-5 py-1 group/msg">
       <div className="chat-bubble chat-bubble-primary text-[13px] leading-relaxed break-words max-w-[95%] sm:max-w-[85%] shadow-sm">
         <button
           type="button"
@@ -230,7 +230,7 @@ function UserMessage(props: { message: HistoryMessage }) {
     return <SkillMessage skillName={skill.skillName} content={skill.content} time={time} uuid={msg.uuid} />;
   }
   return (
-    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} className="chat chat-end px-5 py-1 group/msg">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-end px-5 py-1 group/msg">
       <div className="chat-bubble chat-bubble-primary text-[13px] leading-relaxed break-words max-w-[95%] sm:max-w-[85%] shadow-sm">
         <div className="prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-headings:text-primary-content prose-p:text-primary-content prose-strong:text-primary-content prose-code:text-primary-content/80 prose-pre:bg-primary/20 prose-a:text-primary-content/90 prose-a:underline">
           <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{text}</Markdown>
@@ -265,7 +265,7 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
   var msg = props.message;
   var time = formatTime(msg.timestamp);
   return (
-    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} className="chat chat-start px-5 py-1 group/msg">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-start px-5 py-1 group/msg">
       <div className="chat-image">
         <div className="w-6 h-6 rounded-full bg-primary/15 border border-primary/20 flex items-center justify-center">
           <div className="w-2.5 h-2.5 rounded-full bg-primary" />

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

@@ -147,7 +147,7 @@ function ProjectButton(props: ProjectButtonProps) {
   );
 }
 
-function NodeIndicator({ node }: { node: NodeInfo }) {
+function NodeIndicator({ node, onContextMenu }: { node: NodeInfo; onContextMenu: (e: React.MouseEvent, node: NodeInfo) => void }) {
   var [hovered, setHovered] = useState(false);
   var [tooltipTop, setTooltipTop] = useState(0);
   var sidebar = useSidebar();
@@ -157,6 +157,7 @@ function NodeIndicator({ node }: { node: NodeInfo }) {
     <div className="relative flex items-center">
       <button
         onClick={function () { sidebar.openSettings("nodes"); }}
+        onContextMenu={function (e) { e.preventDefault(); onContextMenu(e, node); }}
         onMouseEnter={function (e) {
           var rect = e.currentTarget.getBoundingClientRect();
           setTooltipTop(rect.top + rect.height / 2);
@@ -215,7 +216,9 @@ export function ProjectRail(props: ProjectRailProps) {
   var ws = useWebSocket();
   var sidebar = useSidebar();
   var groups = groupProjectsBySlug(props.projects, props.nodes);
+  var localNode = props.nodes.find(function (n) { return n.isLocal; });
   var remoteNodes = props.nodes.filter(function (n) { return !n.isLocal; });
+  var allMeshNodes = localNode ? [localNode].concat(remoteNodes) : remoteNodes;
   var [contextMenu, setContextMenu] = useState<ContextMenuState>({
     visible: false,
     x: 0,
@@ -223,23 +226,29 @@ export function ProjectRail(props: ProjectRailProps) {
     slug: null,
   });
   var menuRef = useRef<HTMLDivElement>(null);
+  var [nodeMenu, setNodeMenu] = useState<{ visible: boolean; x: number; y: number; node: NodeInfo | null }>({
+    visible: false, x: 0, y: 0, node: null,
+  });
 
   useEffect(
     function () {
-      if (!contextMenu.visible) return;
+      if (!contextMenu.visible && !nodeMenu.visible) return;
 
       function handleClick() {
         setContextMenu(function (prev) { return { ...prev, visible: false }; });
+        setNodeMenu(function (prev) { return { ...prev, visible: false }; });
       }
 
       function handleKeyDown(e: KeyboardEvent) {
         if (e.key === "Escape") {
           setContextMenu(function (prev) { return { ...prev, visible: false }; });
+          setNodeMenu(function (prev) { return { ...prev, visible: false }; });
         }
       }
 
       function handleScroll() {
         setContextMenu(function (prev) { return { ...prev, visible: false }; });
+        setNodeMenu(function (prev) { return { ...prev, visible: false }; });
       }
 
       window.addEventListener("click", handleClick);
@@ -252,9 +261,17 @@ export function ProjectRail(props: ProjectRailProps) {
         window.removeEventListener("scroll", handleScroll, true);
       };
     },
-    [contextMenu.visible]
+    [contextMenu.visible, nodeMenu.visible]
   );
 
+  function handleNodeContextMenu(e: React.MouseEvent, node: NodeInfo) {
+    var cx = e.clientX;
+    var cy = e.clientY;
+    if (cx + 160 > window.innerWidth - 8) cx = window.innerWidth - 168;
+    if (cy + 100 > window.innerHeight - 8) cy = window.innerHeight - 108;
+    setNodeMenu({ visible: true, x: cx, y: cy, node: node });
+  }
+
   function handleContextMenu(e: React.MouseEvent, slug: string) {
     var menuWidth = 160;
     var menuHeight = 100;
@@ -320,18 +337,10 @@ export function ProjectRail(props: ProjectRailProps) {
       })}
 
 
-      {groups.length > 0 && remoteNodes.length > 0 && (
+      {groups.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"
@@ -340,6 +349,24 @@ export function ProjectRail(props: ProjectRailProps) {
         <Plus size={18} />
       </button>
 
+      {allMeshNodes.length > 0 && (
+        <div className="w-6 h-px bg-base-300 my-0.5 flex-shrink-0" />
+      )}
+
+      {allMeshNodes.map(function (node) {
+        return (
+          <NodeIndicator key={node.id} node={node} onContextMenu={handleNodeContextMenu} />
+        );
+      })}
+
+      <button
+        onClick={function () { sidebar.openSettings("nodes"); }}
+        className="w-[26px] h-[26px] flex items-center justify-center rounded-full border border-dashed border-base-content/15 text-base-content/15 hover:border-base-content/30 hover:text-base-content/30 transition-colors duration-[120ms] flex-shrink-0 cursor-pointer"
+        title="Pair a node"
+      >
+        <Plus size={12} />
+      </button>
+
       <div className="flex-1" />
 
       {contextMenu.visible && createPortal(
@@ -394,6 +421,59 @@ export function ProjectRail(props: ProjectRailProps) {
         document.body
       )}
 
+      {nodeMenu.visible && nodeMenu.node && createPortal(
+        <div
+          role="menu"
+          aria-label="Node actions"
+          onClick={function (e) { e.stopPropagation(); }}
+          className="fixed z-[99999] bg-base-300 border border-base-content/20 rounded-lg shadow-2xl py-1 min-w-[160px]"
+          style={{ left: nodeMenu.x + "px", top: nodeMenu.y + "px" }}
+        >
+          <button
+            role="menuitem"
+            className="w-full text-left px-3 py-1.5 text-sm text-base-content hover:bg-base-content/10 transition-colors"
+            onClick={function () {
+              sidebar.openSettings("nodes");
+              setNodeMenu(function (prev) { return { ...prev, visible: false }; });
+            }}
+          >
+            Node Settings
+          </button>
+          {!nodeMenu.node.isLocal && (
+            <>
+              {!nodeMenu.node.online && (
+                <button
+                  role="menuitem"
+                  className="w-full text-left px-3 py-1.5 text-sm text-base-content hover:bg-base-content/10 transition-colors"
+                  onClick={function () {
+                    if (nodeMenu.node) {
+                      ws.send({ type: "mesh:reconnect", nodeId: nodeMenu.node.id } as any);
+                    }
+                    setNodeMenu(function (prev) { return { ...prev, visible: false }; });
+                  }}
+                >
+                  Reconnect
+                </button>
+              )}
+              <div className="my-1 h-px bg-base-content/10" />
+              <button
+                role="menuitem"
+                className="w-full text-left px-3 py-1.5 text-sm text-error hover:bg-error/10 transition-colors"
+                onClick={function () {
+                  if (nodeMenu.node) {
+                    ws.send({ type: "mesh:unpair", nodeId: nodeMenu.node.id });
+                  }
+                  setNodeMenu(function (prev) { return { ...prev, visible: false }; });
+                }}
+              >
+                Unpair
+              </button>
+            </>
+          )}
+        </div>,
+        document.body
+      )}
+
     </div>
   );
 }

package/package.json

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