feat(topology): overhaul network topology with dagre layout, enriched nodes, and click-to-logs (#447)

Replace N+1 Docker API calls (inspectNetwork per network) with a container-centric approach that fetches all networks and containers in 2 parallel calls, then maps relationships in memory. Add dagre auto-layout algorithm for hierarchical DAG visualization, replacing the static two-row layout that caused edge spaghetti at scale. Add "Show system networks" toggle, enrich container nodes with running state indicators, stack badges, and base image names. Clicking a running container opens its log viewer directly from the topology graph.
2026-07-26 11:49:16 +00:00 · 2026-04-08 20:05:22 -04:00
parent 1524b64847
commit 3ee4fe6e44
9 changed files with 346 additions and 98 deletions
@@ -13,6 +13,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+### Added
+
+* **topology:** Replace N+1 Docker API calls with container-centric approach (2 calls instead of N+1). Resolves performance issues on hosts with many networks.
+* **topology:** Add dagre auto-layout algorithm for hierarchical DAG visualization, replacing the static two-row layout that caused spaghetti edges at scale.
+* **topology:** Add "Show system networks" toggle to display bridge, host, and none networks (off by default).
+* **topology:** Enrich container nodes with running state indicator, stack badge, and base image name.
+* **topology:** Click a running container node to open its log viewer directly from the topology graph.
+
 ### Fixed

 * **fleet:** fix false "Update available" on remote nodes whose `api_url` has a trailing slash, causing `fetchRemoteMeta` to construct a double-slash URL that fails silently
@@ -5194,27 +5194,11 @@ app.post('/api/system/networks/delete', async (req: Request, res: Response) => {

 app.get('/api/system/networks/topology', async (req: Request, res: Response) => {
  try {
+    const includeSystem = req.query.includeSystem === 'true';
    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
    const dockerController = DockerController.getInstance(req.nodeId);
-    const { networks } = await dockerController.getClassifiedResources(knownStacks);
-    const userNetworks = networks.filter(n => n.managedStatus !== 'system');
-
-    const inspected = await Promise.all(
-      userNetworks.map(async (net) => {
-        try {
-          const detail = await dockerController.inspectNetwork(net.Id);
-          const containers = Object.entries(detail.Containers || {}).map(([id, c]) => {
-            const info = c as { Name: string; IPv4Address: string };
-            return { id, name: info.Name, ip: info.IPv4Address };
-          });
-          return { ...net, containers };
-        } catch {
-          return { ...net, containers: [] };
-        }
-      })
-    );
-
-    res.json(inspected);
+    const topology = await dockerController.getTopologyData(knownStacks, includeSystem);
+    res.json(topology);
  } catch (error: unknown) {
    const msg = error instanceof Error ? error.message : 'Failed to fetch network topology';
    console.error('Failed to fetch network topology:', error);
@@ -55,6 +55,25 @@ export interface ClassifiedNetwork {
  managedStatus: 'managed' | 'unmanaged' | 'system';
 }

+export interface TopologyContainer {
+  id: string;
+  name: string;
+  ip: string;
+  state: string;
+  image: string;
+  stack: string | null;
+}
+
+export interface TopologyNetwork {
+  Id: string;
+  Name: string;
+  Driver: string;
+  Scope: string;
+  managedBy: string | null;
+  managedStatus: 'managed' | 'unmanaged' | 'system';
+  containers: TopologyContainer[];
+}
+
 export type NetworkDriver = 'bridge' | 'overlay' | 'macvlan' | 'host' | 'none';

 export interface CreateNetworkOptions {
@@ -67,6 +86,7 @@ export interface CreateNetworkOptions {
 }

 class DockerController {
+  private static readonly SYSTEM_NETWORKS = new Set(['bridge', 'host', 'none']);
  private docker: Docker;
  private nodeId: number;

@@ -184,7 +204,6 @@ class DockerController {
    volumes: ClassifiedVolume[];
    networks: ClassifiedNetwork[];
  }> {
-    const SYSTEM_NETWORKS = new Set(['bridge', 'host', 'none']);
    const knownSet = new Set(knownStackNames);

    const [rawImages, rawVolumeData, rawNetworks, allContainers, projectToStack] = await Promise.all([
@@ -239,7 +258,7 @@ class DockerController {
    });

    const networks: ClassifiedNetwork[] = this.validateApiData<any[]>(rawNetworks).map((net: any) => {
-      if (SYSTEM_NETWORKS.has(net.Name)) {
+      if (DockerController.SYSTEM_NETWORKS.has(net.Name)) {
        return { Id: net.Id, Name: net.Name, Driver: net.Driver, Scope: net.Scope, managedBy: null, managedStatus: 'system' as const };
      }
      const stack = DockerController.resolveProjectLabel(net.Labels?.['com.docker.compose.project'], knownSet, projectToStack);
@@ -397,6 +416,94 @@ class DockerController {
    return this.validateApiData<any[]>(containers);
  }

+  /**
+   * Builds topology data with 2 Docker API calls instead of N+1.
+   * Fetches all networks + all containers in parallel, then maps
+   * container-to-network relationships in memory using NetworkSettings.
+   */
+  public async getTopologyData(
+    knownStackNames: string[],
+    includeSystem: boolean,
+  ): Promise<TopologyNetwork[]> {
+    const knownSet = new Set(knownStackNames);
+
+    const [rawNetworks, rawContainers, projectToStack] = await Promise.all([
+      this.docker.listNetworks(),
+      this.docker.listContainers({ all: true }),
+      DockerController.resolveProjectNameMap(knownStackNames),
+    ]);
+
+    const absDirToStack = DockerController.buildAbsDirMap(knownStackNames);
+    const resolvedBase = path.resolve(COMPOSE_DIR);
+
+    const networks = this.validateApiData<any[]>(rawNetworks);
+    const containers = this.validateApiData<any[]>(rawContainers);
+
+    // Build network map, optionally filtering system networks
+    const networkMap = new Map<string, TopologyNetwork>();
+    for (const net of networks) {
+      const isSystem = DockerController.SYSTEM_NETWORKS.has(net.Name);
+      if (isSystem && !includeSystem) continue;
+
+      const stack = isSystem
+        ? null
+        : DockerController.resolveProjectLabel(
+            net.Labels?.['com.docker.compose.project'],
+            knownSet,
+            projectToStack,
+          );
+      const managedStatus: TopologyNetwork['managedStatus'] = isSystem
+        ? 'system'
+        : stack ? 'managed' : 'unmanaged';
+
+      networkMap.set(net.Id, {
+        Id: net.Id,
+        Name: net.Name,
+        Driver: net.Driver ?? 'bridge',
+        Scope: net.Scope ?? 'local',
+        managedBy: stack,
+        managedStatus,
+        containers: [],
+      });
+    }
+
+    // Map containers to their networks via NetworkSettings.
+    // Stack resolution is deferred until a network match is found to avoid
+    // wasted work for containers not attached to any tracked network.
+    for (const c of containers) {
+      const netSettings: Record<string, { NetworkID?: string; IPAddress?: string }> =
+        c.NetworkSettings?.Networks ?? {};
+
+      let containerStack: string | null | undefined;
+      let stackResolved = false;
+
+      for (const [, netInfo] of Object.entries(netSettings)) {
+        const netId = netInfo.NetworkID;
+        if (!netId) continue;
+        const topology = networkMap.get(netId);
+        if (!topology) continue;
+
+        if (!stackResolved) {
+          containerStack = DockerController.resolveContainerStack(
+            c.Labels, projectToStack, knownSet, absDirToStack, resolvedBase,
+          );
+          stackResolved = true;
+        }
+
+        topology.containers.push({
+          id: c.Id,
+          name: (c.Names?.[0] ?? '').replace(/^\//, ''),
+          ip: netInfo.IPAddress ?? '',
+          state: c.State ?? 'unknown',
+          image: c.Image ?? '',
+          stack: containerStack ?? null,
+        });
+      }
+    }
+
+    return Array.from(networkMap.values());
+  }
+
  /** Resolves a Docker Compose project label to a known Sencho stack name, or null. */
  private static resolveProjectLabel(
    project: string | undefined,
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "license": "SEE LICENSE IN LICENSE",
      "dependencies": {
+        "@dagrejs/dagre": "^3.0.0",
        "@monaco-editor/react": "^4.7.0",
        "@radix-ui/react-alert-dialog": "^1.1.15",
        "@radix-ui/react-checkbox": "^1.3.3",
@@ -307,6 +308,21 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@dagrejs/dagre": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-3.0.0.tgz",
+      "integrity": "sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@dagrejs/graphlib": "4.0.1"
+      }
+    },
+    "node_modules/@dagrejs/graphlib": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-4.0.1.tgz",
+      "integrity": "sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==",
+      "license": "MIT"
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -11,6 +11,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@dagrejs/dagre": "^3.0.0",
    "@monaco-editor/react": "^4.7.0",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-checkbox": "^1.3.3",
@@ -51,6 +51,8 @@ import ScheduledOperationsView from './ScheduledOperationsView';
 import AutoUpdatePoliciesView from './AutoUpdatePoliciesView';
 import { SENCHO_NAVIGATE_EVENT } from './NodeManager';
 import type { SenchoNavigateDetail } from './NodeManager';
+import { SENCHO_OPEN_LOGS_EVENT } from '@/lib/events';
+import type { SenchoOpenLogsDetail } from '@/lib/events';
 import { useNodes } from '@/context/NodeContext';
 import type { Node } from '@/context/NodeContext';
 import { useAuth } from '@/context/AuthContext';
@@ -1270,6 +1272,18 @@ export default function EditorLayout() {
    setLogContainer(null);
  };

+  // Listen for topology click-to-logs events (ref avoids stale closure)
+  const openLogViewerRef = useRef(openLogViewer);
+  openLogViewerRef.current = openLogViewer;
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { containerId, containerName } = (e as CustomEvent<SenchoOpenLogsDetail>).detail;
+      openLogViewerRef.current(containerId, containerName);
+    };
+    window.addEventListener(SENCHO_OPEN_LOGS_EVENT, handler);
+    return () => window.removeEventListener(SENCHO_OPEN_LOGS_EVENT, handler);
+  }, []);
+
  // Safe container list with fallback
  const safeContainers = containers || [];
  // Safe content strings with fallback
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
    ReactFlow,
    Background,
@@ -13,39 +13,75 @@ import {
    Position,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import dagre from '@dagrejs/dagre';
 import { apiFetch } from '@/lib/api';
 import { toast } from '@/components/ui/toast-store';
 import { Container, Network, Loader2 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';

 // ── Types ─────────────────────────────────────────────────────────────────────

+interface TopologyContainer {
+    id: string;
+    name: string;
+    ip: string;
+    state: string;
+    image: string;
+    stack: string | null;
+}
+
 interface TopologyNetwork {
    Id: string;
    Name: string;
    Driver: string;
    managedStatus: 'managed' | 'unmanaged' | 'system';
-    containers: Array<{ id: string; name: string; ip: string }>;
+    containers: TopologyContainer[];
 }

-interface ContainerNode {
-    id: string;
-    name: string;
-    networks: string[];
-    ipAddresses: Record<string, string>;
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function stateColor(state: string): string {
+    switch (state) {
+        case 'running': return 'bg-success';
+        case 'restarting':
+        case 'paused':
+        case 'created': return 'bg-warning';
+        default: return 'bg-destructive';
+    }
 }

 // ── Custom Nodes ──────────────────────────────────────────────────────────────

-function ContainerNodeComponent({ data }: { data: { label: string; networks: string[]; ipAddresses: Record<string, string> } }) {
+interface ContainerNodeData {
+    label: string;
+    containerId: string;
+    networks: string[];
+    ipAddresses: Record<string, string>;
+    state: string;
+    image: string;
+    stack: string | null;
+}
+
+function ContainerNodeComponent({ data }: { data: ContainerNodeData }) {
    return (
-        <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 min-w-[160px]">
+        <div
+            className={cn(
+                'rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 min-w-[160px]',
+                (!data.state || data.state === 'running') && 'cursor-pointer hover:border-t-card-border-hover',
+            )}
+        >
            <Handle type="target" position={Position.Top} className="!bg-muted-foreground !w-2 !h-2" />
-            <div className="flex items-center gap-2 mb-1.5">
+            <div className="flex items-center gap-2 mb-1">
+                <span className={cn('w-2 h-2 rounded-full shrink-0', stateColor(data.state))} />
                <Container className="w-3.5 h-3.5 text-muted-foreground shrink-0" strokeWidth={1.5} />
                <span className="text-xs font-medium truncate max-w-[140px]">{data.label}</span>
            </div>
+            {data.stack && (
+                <Badge variant="outline" className="text-[9px] h-4 px-1 font-mono mb-1">{data.stack}</Badge>
+            )}
            {data.networks.length > 0 && (
                <div className="space-y-0.5">
                    {data.networks.map(netName => (
@@ -58,6 +94,9 @@ function ContainerNodeComponent({ data }: { data: { label: string; networks: str
                    ))}
                </div>
            )}
+            <span className="block font-mono text-[10px] text-muted-foreground/60 truncate max-w-[180px] mt-0.5">
+                {data.image}
+            </span>
            <Handle type="source" position={Position.Bottom} className="!bg-muted-foreground !w-2 !h-2" />
        </div>
    );
@@ -99,81 +138,123 @@ const EDGE_COLORS = [
    'oklch(0.70 0.10 340)', // pink
 ];

-// ── Layout Helper ─────────────────────────────────────────────────────────────
+// ── Layout Helper (dagre) ────────────────────────────────────���───────────────

 function layoutGraph(
    networksList: TopologyNetwork[],
 ): { nodes: Node[]; edges: Edge[] } {
-    const flowNodes: Node[] = [];
-    const flowEdges: Edge[] = [];
-    const containerDataMap = new Map<string, ContainerNode>();
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({ rankdir: 'TB', ranksep: 120, nodesep: 60 });
+    g.setDefaultEdgeLabel(() => ({}));

-    networksList.forEach(net => {
-        net.containers.forEach(c => {
-            if (!containerDataMap.has(c.id)) {
-                containerDataMap.set(c.id, { id: c.id, name: c.name, networks: [], ipAddresses: {} });
+    // Deduplicate containers across networks
+    const containerMap = new Map<string, {
+        name: string;
+        networks: string[];
+        ipAddresses: Record<string, string>;
+        state: string;
+        image: string;
+        stack: string | null;
+    }>();
+    for (const net of networksList) {
+        for (const c of net.containers) {
+            if (!containerMap.has(c.id)) {
+                containerMap.set(c.id, {
+                    name: c.name, networks: [], ipAddresses: {},
+                    state: c.state, image: c.image, stack: c.stack,
+                });
            }
-            const cd = containerDataMap.get(c.id)!;
-            cd.networks.push(net.Name);
-            cd.ipAddresses[net.Name] = c.ip;
-        });
+            const entry = containerMap.get(c.id)!;
+            entry.networks.push(net.Name);
+            entry.ipAddresses[net.Name] = c.ip;
+        }
+    }
+
+    // Add nodes to dagre graph
+    for (const net of networksList) {
+        g.setNode(`net-${net.Id}`, { width: 160, height: 60 });
+    }
+    for (const [id] of containerMap) {
+        g.setNode(`ctr-${id}`, { width: 200, height: 100 });
+    }
+
+    // Add edges and collect for React Flow
+    const seenEdges = new Set<string>();
+    const edgeList: { netId: string; ctrId: string; color: string }[] = [];
+    networksList.forEach((net, ni) => {
+        const color = EDGE_COLORS[ni % EDGE_COLORS.length];
+        for (const c of net.containers) {
+            const edgeKey = `${net.Id}-${c.id}`;
+            if (!seenEdges.has(edgeKey)) {
+                seenEdges.add(edgeKey);
+                g.setEdge(`net-${net.Id}`, `ctr-${c.id}`);
+                edgeList.push({ netId: net.Id, ctrId: c.id, color });
+            }
+        }
    });

-    const networkSpacing = 240;
-    const containerSpacing = 220;
+    dagre.layout(g);

-    networksList.forEach((net, i) => {
+    // Convert dagre positions (center-based) to React Flow positions (top-left)
+    const flowNodes: Node[] = [];
+    for (const net of networksList) {
+        const pos = g.node(`net-${net.Id}`);
        flowNodes.push({
            id: `net-${net.Id}`,
            type: 'network',
-            position: { x: i * networkSpacing, y: 0 },
+            position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 },
            data: { label: net.Name, driver: net.Driver, status: net.managedStatus },
            draggable: true,
        });
-    });
-
-    const allContainers = Array.from(containerDataMap.values());
-    allContainers.forEach((container, i) => {
+    }
+    for (const [id, ctr] of containerMap) {
+        const pos = g.node(`ctr-${id}`);
        flowNodes.push({
-            id: `ctr-${container.id}`,
+            id: `ctr-${id}`,
            type: 'container',
-            position: { x: i * containerSpacing, y: 180 },
+            position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 },
            data: {
-                label: container.name,
-                networks: container.networks,
-                ipAddresses: container.ipAddresses,
+                label: ctr.name,
+                containerId: id,
+                networks: ctr.networks,
+                ipAddresses: ctr.ipAddresses,
+                state: ctr.state,
+                image: ctr.image,
+                stack: ctr.stack,
            },
            draggable: true,
        });
-    });
+    }

-    networksList.forEach((net, ni) => {
-        const color = EDGE_COLORS[ni % EDGE_COLORS.length];
-        net.containers.forEach(c => {
-            flowEdges.push({
-                id: `edge-${net.Id}-${c.id}`,
-                source: `net-${net.Id}`,
-                target: `ctr-${c.id}`,
-                animated: true,
-                style: { stroke: color, strokeWidth: 1.5 },
-            });
-        });
-    });
+    const flowEdges: Edge[] = edgeList.map(({ netId, ctrId, color }) => ({
+        id: `edge-${netId}-${ctrId}`,
+        source: `net-${netId}`,
+        target: `ctr-${ctrId}`,
+        animated: true,
+        style: { stroke: color, strokeWidth: 1.5 },
+    }));

    return { nodes: flowNodes, edges: flowEdges };
 }

 // ── Main Component ────────────────────────────────────────────────────────────

-export default function NetworkTopologyView() {
+interface NetworkTopologyViewProps {
+    onContainerClick?: (containerId: string, containerName: string) => void;
+}
+
+export default function NetworkTopologyView({ onContainerClick }: NetworkTopologyViewProps) {
    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
    const [loading, setLoading] = useState(true);
+    const [includeSystem, setIncludeSystem] = useState(false);
+    const onContainerClickRef = useRef(onContainerClick);
+    onContainerClickRef.current = onContainerClick;

    const fetchTopology = useCallback(async () => {
        setLoading(true);
        try {
-            const res = await apiFetch('/system/networks/topology');
+            const res = await apiFetch(`/system/networks/topology?includeSystem=${includeSystem}`);
            if (!res.ok) throw new Error('Failed to fetch topology');
            const inspected = await res.json();

@@ -186,10 +267,16 @@ export default function NetworkTopologyView() {
        } finally {
            setLoading(false);
        }
-    }, [setNodes, setEdges]);
+    }, [setNodes, setEdges, includeSystem]);

    useEffect(() => { fetchTopology(); }, [fetchTopology]);

+    const handleNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
+        if (node.type === 'container' && (!node.data.state || node.data.state === 'running')) {
+            onContainerClickRef.current?.(node.data.containerId as string, node.data.label as string);
+        }
+    }, []);
+
    if (loading) {
        return (
            <div className="flex items-center justify-center h-[400px] text-muted-foreground gap-2">
@@ -203,36 +290,51 @@ export default function NetworkTopologyView() {
        return (
            <div className="flex flex-col items-center justify-center h-[400px] text-muted-foreground gap-3">
                <Network className="w-8 h-8 opacity-40" strokeWidth={1.5} />
-                <p className="text-sm">No user-created networks found.</p>
-                <p className="text-xs opacity-70">Create a network or deploy stacks with custom networks to see the topology.</p>
+                <p className="text-sm">
+                    {includeSystem ? 'No networks found.' : 'No user-created networks found.'}
+                </p>
+                <p className="text-xs opacity-70">
+                    {includeSystem
+                        ? 'No Docker networks are available on this node.'
+                        : 'Create a network or deploy stacks with custom networks to see the topology.'}
+                </p>
            </div>
        );
    }

    return (
-        <div className="h-[500px] w-full rounded-lg border border-card-border bg-card shadow-card-bevel overflow-hidden">
-            <ReactFlow
-                nodes={nodes}
-                edges={edges}
-                onNodesChange={onNodesChange}
-                onEdgesChange={onEdgesChange}
-                nodeTypes={nodeTypes}
-                fitView
-                fitViewOptions={{ padding: 0.3 }}
-                proOptions={{ hideAttribution: true }}
-                className="bg-background"
-            >
-                <Background gap={20} size={1} className="opacity-30" />
-                <Controls className="!bg-card !border-card-border !shadow-card-bevel [&>button]:!bg-card [&>button]:!border-card-border [&>button]:!text-foreground [&>button:hover]:!bg-muted" />
-                <MiniMap
-                    className="!bg-card !border-card-border !shadow-card-bevel"
-                    nodeColor={(node) => {
-                        if (node.type === 'network') return 'oklch(0.75 0.08 192)';
-                        return 'oklch(0.50 0 0)';
-                    }}
-                    maskColor="oklch(0 0 0 / 0.2)"
-                />
-            </ReactFlow>
+        <div className="rounded-lg border border-card-border bg-card shadow-card-bevel overflow-hidden">
+            <div className="flex items-center gap-2 px-3 py-2 border-b border-card-border">
+                <Switch id="show-system" checked={includeSystem} onCheckedChange={setIncludeSystem} />
+                <Label htmlFor="show-system" className="text-xs cursor-pointer">
+                    Show system networks
+                </Label>
+            </div>
+            <div className="h-[500px] w-full">
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    onNodeClick={handleNodeClick}
+                    nodeTypes={nodeTypes}
+                    fitView
+                    fitViewOptions={{ padding: 0.3 }}
+                    proOptions={{ hideAttribution: true }}
+                    className="bg-background"
+                >
+                    <Background gap={20} size={1} className="opacity-30" />
+                    <Controls className="!bg-card !border-card-border !shadow-card-bevel [&>button]:!bg-card [&>button]:!border-card-border [&>button]:!text-foreground [&>button:hover]:!bg-muted" />
+                    <MiniMap
+                        className="!bg-card !border-card-border !shadow-card-bevel"
+                        nodeColor={(node) => {
+                            if (node.type === 'network') return 'oklch(0.75 0.08 192)';
+                            return 'oklch(0.50 0 0)';
+                        }}
+                        maskColor="oklch(0 0 0 / 0.2)"
+                    />
+                </ReactFlow>
+            </div>
        </div>
    );
 }
@@ -24,6 +24,8 @@ import { PaidGate } from './PaidGate';
 import { CapabilityGate } from './CapabilityGate';
 import { formatBytes } from '@/lib/utils';
 import { cn } from '@/lib/utils';
+import { SENCHO_OPEN_LOGS_EVENT } from '@/lib/events';
+import type { SenchoOpenLogsDetail } from '@/lib/events';
 import { lazy, Suspense } from 'react';

 const NetworkTopologyView = lazy(() => import('./NetworkTopologyView'));
@@ -830,7 +832,13 @@ export default function ResourcesView() {
                                                <span className="text-sm">Loading topology...</span>
                                            </div>
                                        }>
-                                            <NetworkTopologyView />
+                                            <NetworkTopologyView
+                                                onContainerClick={(id, name) => {
+                                                    window.dispatchEvent(new CustomEvent<SenchoOpenLogsDetail>(SENCHO_OPEN_LOGS_EVENT, {
+                                                        detail: { containerId: id, containerName: name },
+                                                    }));
+                                                }}
+                                            />
                                        </Suspense>
                                    </CapabilityGate>
                                </PaidGate>
@@ -0,0 +1,8 @@
+/** Cross-component custom event constants and typed detail interfaces. */
+
+export const SENCHO_OPEN_LOGS_EVENT = 'sencho-open-logs';
+
+export interface SenchoOpenLogsDetail {
+  containerId: string;
+  containerName: string;
+}