From 3e87980bc78e12af390ae92bc09dc85dfb6f5ae9 Mon Sep 17 00:00:00 2001
From: Nitay Rabinovich <nitayrabi@gmail.com>
Date: Wed, 13 May 2026 14:38:15 +0200
Subject: [PATCH] add visible topology agent linking

---
 apps/web/src/components/NarrowFallback.tsx | 48 ++++++++++-
 apps/web/src/components/NodeCard.tsx       | 35 +++++++-
 apps/web/src/components/TopologyCanvas.tsx | 99 ++++++++++++++++------
 apps/web/src/styles.css                    | 36 +++++++-
 apps/web/test/app.test.tsx                 | 92 +++++++++++++++++++-
 5 files changed, 274 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/NarrowFallback.tsx b/apps/web/src/components/NarrowFallback.tsx
index eb40f22..f9cb64f 100644
--- a/apps/web/src/components/NarrowFallback.tsx
+++ b/apps/web/src/components/NarrowFallback.tsx
@@ -1,18 +1,43 @@
+import { useMemo, useState } from "react";
 import type { TopologySnapshot } from "@amesh/protocol";
+import { ArrowRight } from "lucide-react";
 
+import { createTriggerRule } from "../api.js";
 import { relativeTime } from "../lib/time.js";
 import { NodeSettingsButton } from "./NodeSettingsButton.js";
 
 type Props = { topology: TopologySnapshot };
 
 export function NarrowFallback({ topology }: Props) {
-  const agentsById = new Map(topology.agents.map((agent) => [agent.id, agent]));
+  const [connectionSourceAgentId, setConnectionSourceAgentId] = useState<string | null>(null);
+  const agentsById = useMemo(
+    () => new Map(topology.agents.map((agent) => [agent.id, agent])),
+    [topology.agents]
+  );
+  const connectionSourceAgentName =
+    connectionSourceAgentId ? agentsById.get(connectionSourceAgentId)?.name ?? null : null;
+
+  async function pickConnectionEndpoint(agentId: string) {
+    if (!connectionSourceAgentId) {
+      setConnectionSourceAgentId(agentId);
+      return;
+    }
+    if (connectionSourceAgentId === agentId) {
+      setConnectionSourceAgentId(null);
+      return;
+    }
+    await createTriggerRule({
+      sourceAgentId: connectionSourceAgentId,
+      targetAgentId: agentId,
+      mode: "allow"
+    });
+    setConnectionSourceAgentId(null);
+  }
 
   return (
     <div className="narrow-fallback">
       <div className="note">
-        Drag-to-connect needs a wider screen. Open amesh on a desktop (≥1024px) to add or remove
-        rules on the canvas. This view is read-only.
+        Compact topology view. Use the arrow controls on online agents to create allow rules.
       </div>
 
       {topology.nodes.length === 0 ? (
@@ -49,6 +74,23 @@ export function NarrowFallback({ topology }: Props) {
                 {agents.map((agent) => (
                   <li key={agent.id}>
                     {agent.name} <span className="host">({agent.status})</span>
+                    {" "}
+                    <button
+                      type="button"
+                      className="narrow-card__connect"
+                      aria-label={
+                        connectionSourceAgentId
+                          ? connectionSourceAgentId === agent.id
+                            ? `Cancel connection from ${agent.name}`
+                            : `Connect ${connectionSourceAgentName ?? "selected agent"} to ${agent.name}`
+                          : `Start connection from ${agent.name}`
+                      }
+                      aria-pressed={connectionSourceAgentId === agent.id}
+                      disabled={node.status !== "online" || agent.status !== "online"}
+                      onClick={() => void pickConnectionEndpoint(agent.id)}
+                    >
+                      <ArrowRight size={13} aria-hidden />
+                    </button>
                     {typeof agent.capabilities.cwd === "string" ? (
                       <>
                         {" "}
diff --git a/apps/web/src/components/NodeCard.tsx b/apps/web/src/components/NodeCard.tsx
index a72642f..f8953f5 100644
--- a/apps/web/src/components/NodeCard.tsx
+++ b/apps/web/src/components/NodeCard.tsx
@@ -1,5 +1,6 @@
 import { Handle, Position } from "@xyflow/react";
 import { useNavigate } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
 
 import type { AgentRecord, AgentStatus, NodeRecord, NodeStatus } from "@amesh/protocol";
 import { relativeTime } from "../lib/time.js";
@@ -8,6 +9,9 @@ import { NodeSettingsButton } from "./NodeSettingsButton.js";
 export type NodeCardData = {
   node: NodeRecord;
   agents: AgentRecord[];
+  connectionSourceAgentId: string | null;
+  connectionSourceAgentName: string | null;
+  onConnectionPick: (agent: AgentRecord) => void;
 };
 
 type NodeCardProps = {
@@ -29,7 +33,13 @@ function agentStatusLabel(status: AgentStatus) {
 }
 
 export function NodeCard({ data }: NodeCardProps) {
-  const { node, agents } = data.data;
+  const {
+    node,
+    agents,
+    connectionSourceAgentId,
+    connectionSourceAgentName,
+    onConnectionPick
+  } = data.data;
   const isOffline = node.status === "offline";
   const navigate = useNavigate();
 
@@ -62,6 +72,13 @@ export function NodeCard({ data }: NodeCardProps) {
         <ul className="node-card__agents">
           {agents.map((agent) => {
             const chatDisabled = isOffline || agent.status !== "online";
+            const connectionSelected = connectionSourceAgentId === agent.id;
+            const connectionDisabled = isOffline || agent.status !== "online";
+            const connectionLabel = connectionSourceAgentId
+              ? connectionSelected
+                ? `Cancel connection from ${agent.name}`
+                : `Connect ${connectionSourceAgentName ?? "selected agent"} to ${agent.name}`
+              : `Start connection from ${agent.name}`;
             return (
               <li key={agent.id} className="node-card__agent">
                 <div>
@@ -72,6 +89,22 @@ export function NodeCard({ data }: NodeCardProps) {
                   ) : null}
                 </div>
                 <div className="node-card__agent-tail">
+                  <button
+                    type="button"
+                    className="node-card__connect"
+                    title={connectionDisabled ? "Agent is not online" : connectionLabel}
+                    aria-label={connectionLabel}
+                    aria-pressed={connectionSelected}
+                    disabled={connectionDisabled}
+                    onPointerDown={(event) => event.stopPropagation()}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (connectionDisabled) return;
+                      onConnectionPick(agent);
+                    }}
+                  >
+                    <ArrowRight size={13} aria-hidden />
+                  </button>
                   <button
                     type="button"
                     className="node-card__chat"
diff --git a/apps/web/src/components/TopologyCanvas.tsx b/apps/web/src/components/TopologyCanvas.tsx
index 47b2f6e..8538b83 100644
--- a/apps/web/src/components/TopologyCanvas.tsx
+++ b/apps/web/src/components/TopologyCanvas.tsx
@@ -54,12 +54,67 @@ function CanvasInner({ topology }: Props) {
   const [edges, setEdges, onEdgesChange] = useEdgesState<TriggerEdgeRecord>([]);
   const positionsRef = useRef<Map<string, { x: number; y: number }>>(new Map());
   const [toast, setToast] = useState<string | null>(null);
+  const [connectionSourceAgentId, setConnectionSourceAgentId] = useState<string | null>(null);
   const toastTimerRef = useRef<number | null>(null);
 
   const agentsById = useMemo(
     () => new Map(topology.agents.map((agent) => [agent.id, agent])),
     [topology.agents]
   );
+  const connectionSourceAgentName =
+    connectionSourceAgentId ? agentsById.get(connectionSourceAgentId)?.name ?? null : null;
+
+  const createAllowRule = useCallback(
+    async (sourceAgentId: string, targetAgentId: string) => {
+      if (sourceAgentId === targetAgentId) {
+        showToast("An agent cannot trigger itself.");
+        return false;
+      }
+
+      const existing = topology.triggerRules.find(
+        (rule) =>
+          rule.sourceAgentId === sourceAgentId && rule.targetAgentId === targetAgentId
+      );
+      if (existing && existing.mode === "allow") {
+        showToast("Already connected. Click the edge to change.");
+        return false;
+      }
+
+      try {
+        await createTriggerRule({
+          sourceAgentId,
+          targetAgentId,
+          mode: "allow"
+        });
+        return true;
+      } catch {
+        showToast("Could not create rule.");
+        return false;
+      }
+    },
+    [topology.triggerRules]
+  );
+
+  const pickConnectionEndpoint = useCallback(
+    async (agent: TopologySnapshot["agents"][number]) => {
+      if (!connectionSourceAgentId) {
+        setConnectionSourceAgentId(agent.id);
+        showToast(`Pick a target for ${agent.name}.`);
+        return;
+      }
+      if (connectionSourceAgentId === agent.id) {
+        setConnectionSourceAgentId(null);
+        showToast("Connection cancelled.");
+        return;
+      }
+      const created = await createAllowRule(connectionSourceAgentId, agent.id);
+      if (created) {
+        setConnectionSourceAgentId(null);
+        showToast("Rule created.");
+      }
+    },
+    [connectionSourceAgentId, createAllowRule]
+  );
 
   useEffect(() => {
     let cancelled = false;
@@ -88,7 +143,15 @@ function CanvasInner({ topology }: Props) {
           id: node.id,
           type: "nodeCard",
           position,
-          data: { data: { node, agents } } as { data: NodeCardData },
+          data: {
+            data: {
+              node,
+              agents,
+              connectionSourceAgentId,
+              connectionSourceAgentName,
+              onConnectionPick: pickConnectionEndpoint
+            }
+          } as { data: NodeCardData },
           draggable: true
         };
       });
@@ -107,7 +170,13 @@ function CanvasInner({ topology }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [topology, setNodes]);
+  }, [
+    topology,
+    setNodes,
+    connectionSourceAgentId,
+    connectionSourceAgentName,
+    pickConnectionEndpoint
+  ]);
 
   function showToast(message: string) {
     setToast(message);
@@ -178,31 +247,9 @@ function CanvasInner({ topology }: Props) {
       const sourceAgentId = params.sourceHandle;
       const targetAgentId = params.targetHandle;
       if (!sourceAgentId || !targetAgentId) return;
-      if (sourceAgentId === targetAgentId) {
-        showToast("An agent cannot trigger itself.");
-        return;
-      }
-
-      const existing = topology.triggerRules.find(
-        (rule) =>
-          rule.sourceAgentId === sourceAgentId && rule.targetAgentId === targetAgentId
-      );
-      if (existing && existing.mode === "allow") {
-        showToast("Already connected. Click the edge to change.");
-        return;
-      }
-
-      try {
-        await createTriggerRule({
-          sourceAgentId,
-          targetAgentId,
-          mode: "allow"
-        });
-      } catch {
-        showToast("Could not create rule.");
-      }
+      await createAllowRule(sourceAgentId, targetAgentId);
     },
-    [topology.triggerRules]
+    [createAllowRule]
   );
 
   const isValidConnection: IsValidConnection = useCallback((connection) => {
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 4b540d2..2dcac57 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2500,7 +2500,8 @@ button:focus { outline: none; }
   align-items: center;
   gap: var(--s-2);
 }
-.node-card__chat {
+.node-card__chat,
+.node-card__connect {
   border: 1px solid transparent;
   background: transparent;
   color: var(--c-mute);
@@ -2513,13 +2514,20 @@ button:focus { outline: none; }
               background var(--dur-fast) var(--ease-out),
               border-color var(--dur-fast) var(--ease-out);
 }
-.node-card__chat:focus-visible { opacity: 1; }
-.node-card__chat:hover {
+.node-card__connect {
+  opacity: 1;
+}
+.node-card__chat:focus-visible,
+.node-card__connect:focus-visible { opacity: 1; }
+.node-card__chat:hover,
+.node-card__connect:hover,
+.node-card__connect[aria-pressed="true"] {
   color: var(--c-accent-strong);
   background: var(--c-accent-soft);
   border-color: var(--c-accent-line);
 }
-.node-card__chat[disabled] { cursor: not-allowed; }
+.node-card__chat[disabled],
+.node-card__connect[disabled] { cursor: not-allowed; }
 .node-card__agent:hover .node-card__chat:not([disabled]) { opacity: 1; }
 .narrow-card__error-link {
   border: 0;
@@ -2534,6 +2542,26 @@ button:focus { outline: none; }
   text-decoration: underline;
   text-underline-offset: 0.18em;
 }
+.narrow-card__connect {
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-xs);
+  background: var(--c-surface);
+  color: var(--c-mute);
+  font: var(--t-mono);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.narrow-card__connect:hover,
+.narrow-card__connect[aria-pressed="true"] {
+  color: var(--c-accent-strong);
+  background: var(--c-accent-soft);
+  border-color: var(--c-accent-line);
+}
+.narrow-card__connect[disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
 
 @media (max-width: 1024px) {
   .sessions-route--live {
diff --git a/apps/web/test/app.test.tsx b/apps/web/test/app.test.tsx
index 6eebfea..b8873e6 100644
--- a/apps/web/test/app.test.tsx
+++ b/apps/web/test/app.test.tsx
@@ -49,6 +49,7 @@ let updateRequests = 0;
 let detectRequests = 0;
 let pathRequests = 0;
 let directoryRequests = 0;
+let triggerRuleRequests: Array<{ sourceAgentId: string; targetAgentId: string; mode: string }> = [];
 let narrowLayout = false;
 let updateRequired = true;
 let sessionViews: Record<string, TestSessionView> = {};
@@ -187,9 +188,21 @@ beforeEach(() => {
         return response({
           nodes: topologyNodes.map((node) => ({ ...node, updateRequired })),
           agents: topologyAgents,
-          triggerRules: []
+          triggerRules: triggerRuleRequests.map((rule, index) => ({
+            id: `rule-${index + 1}`,
+            ...rule
+          }))
         });
       }
+      if (parsed.pathname.endsWith("/api/trigger-rules") && init?.method === "POST") {
+        const payload = JSON.parse(String(init.body ?? "{}")) as {
+          sourceAgentId: string;
+          targetAgentId: string;
+          mode: string;
+        };
+        triggerRuleRequests.push(payload);
+        return response({ id: `rule-${triggerRuleRequests.length}`, ...payload });
+      }
       return response({});
     })
   );
@@ -198,6 +211,7 @@ beforeEach(() => {
   detectRequests = 0;
   pathRequests = 0;
   directoryRequests = 0;
+  triggerRuleRequests = [];
   narrowLayout = false;
   updateRequired = true;
   sessionViews = {};
@@ -451,11 +465,85 @@ describe("App shell", () => {
     render(<App />);
 
     await waitFor(() =>
-      expect(screen.getByText(/drag-to-connect needs a wider screen/i)).toBeTruthy()
+      expect(screen.getByText(/compact topology view/i)).toBeTruthy()
     );
     expect(screen.queryByRole("button", { name: /update lab-01/i })).toBeNull();
   });
 
+  it("creates a cross-node allow rule from visible agent connection buttons", async () => {
+    topologyAgents = [
+      {
+        id: "agent-openclaw",
+        nodeId: "node-1",
+        name: "OpenClaw",
+        backend: "acpx",
+        status: "online",
+        capabilities: {
+          acpxAgent: "openclaw"
+        }
+      },
+      {
+        id: "agent-codex",
+        nodeId: "node-2",
+        name: "Codex",
+        backend: "acpx",
+        status: "online",
+        capabilities: {
+          acpxAgent: "codex"
+        }
+      }
+    ];
+    topologyNodes = [
+      {
+        id: "node-1",
+        name: "lab-01",
+        host: "lab-01.local",
+        status: "online",
+        labels: [],
+        paths: [],
+        registeredAt: "",
+        lastSeenAt: null,
+        version: "v0.1.1",
+        latestVersion: "v0.1.1",
+        updateRequired: false
+      },
+      {
+        id: "node-2",
+        name: "lab-02",
+        host: "lab-02.local",
+        status: "online",
+        labels: [],
+        paths: [],
+        registeredAt: "",
+        lastSeenAt: null,
+        version: "v0.1.1",
+        latestVersion: "v0.1.1",
+        updateRequired: false
+      }
+    ];
+    narrowLayout = true;
+    window.history.pushState({}, "", "/");
+    render(<App />);
+
+    await waitFor(
+      () =>
+        expect(screen.getByRole("button", { name: /start connection from openclaw/i })).toBeTruthy(),
+      { timeout: 3000 }
+    );
+    fireEvent.click(screen.getByRole("button", { name: /start connection from openclaw/i }));
+    fireEvent.click(screen.getByRole("button", { name: /connect openclaw to codex/i }));
+
+    await waitFor(() =>
+      expect(triggerRuleRequests).toEqual([
+        {
+          sourceAgentId: "agent-openclaw",
+          targetAgentId: "agent-codex",
+          mode: "allow"
+        }
+      ])
+    );
+  });
+
   it("lets the sessions rail switch between exposed folders on a node", async () => {
     topologyAgents = [
       {