feat(mazenet): upgrade inspector to design-handoff layout

Rebuild the inspector panel to match the handoff mock: crosshair-titled header with dim type label and close X, status-dot + archetype-chip head rows, connection list with directional arrows, member list with click-to-select, and a pending-diff block at the foot. Carry the gateway/observed disable titles over from the ctx menu so the 'remove' action stays honest. Also prefix the subtitle with 'NETWORK OF NETWORKS' so the purpose of this editor reads at a glance.
2026-04-20 23:28:02 -04:00
parent 4d2e38f616
commit d701df24c8
3 changed files with 386 additions and 51 deletions
--- a/decnet_web/src/components/MazeNET/Inspector.tsx
+++ b/decnet_web/src/components/MazeNET/Inspector.tsx
@@ -1,6 +1,9 @@
-import React from 'react';
-import { Trash2 } from 'lucide-react';
-import type { Net, MazeNode, Edge, PendingChange } from './types';
+import React, { useMemo } from 'react';
+import {
+  ArrowLeft, ArrowRight, Crosshair, Globe, GitMerge, MousePointer2, Plus,
+  Server, Trash2, X,
+} from 'lucide-react';
+import type { Net, MazeNode, Edge } from './types';

 export type Selection =
  | { type: 'net'; id: string }
@@ -13,73 +16,177 @@ interface Props {
  nets: Net[];
  nodes: MazeNode[];
  edges: Edge[];
-  pending: PendingChange[];
+  topologyStatus?: string;
  onClose?: () => void;
  onDeleteNet?: (id: string) => void;
  onDeleteNode?: (id: string) => void;
  onDeleteEdge?: (id: string) => void;
+  onAddDecky?: (netId: string) => void;
+  setSelection?: (sel: Selection) => void;
+  pendingChanges?: number;
 }

-const Inspector: React.FC<Props> = ({ selection, nets, nodes, edges, pending, onClose, onDeleteNet, onDeleteNode, onDeleteEdge }) => {
+const Inspector: React.FC<Props> = ({
+  selection, nets, nodes, edges, topologyStatus, onClose,
+  onDeleteNet, onDeleteNode, onDeleteEdge, onAddDecky, setSelection,
+  pendingChanges = 0,
+}) => {
  const net  = selection?.type === 'net'  ? nets.find((n) => n.id === selection.id)  : undefined;
  const node = selection?.type === 'node' ? nodes.find((n) => n.id === selection.id) : undefined;
  const edge = selection?.type === 'edge' ? edges.find((e) => e.id === selection.id) : undefined;

+  const activeNetIds = useMemo(() => {
+    const s = new Set<string>();
+    edges.forEach((e) => {
+      const f = nodes.find((n) => n.id === e.from);
+      const t = nodes.find((n) => n.id === e.to);
+      if (f) s.add(f.netId);
+      if (t) s.add(t.netId);
+    });
+    return s;
+  }, [edges, nodes]);
+
+  const typeLabel = selection ? selection.type.toUpperCase() : 'IDLE';
+  const isGateway = node?.kind === 'decky' && !!node.decky_config?.forwards_l3;
+  const isObserved = node?.kind === 'observed';
+
  return (
    <aside className="maze-inspector">
      <div className="maze-inspector-title">
+        <Crosshair size={12} className="violet-accent" />
        <span>INSPECTOR</span>
+        <span className="dim inspector-type-label">{typeLabel}</span>
        {onClose && (
          <button
            type="button"
-            className="maze-btn ghost"
-            style={{ marginLeft: 'auto', padding: '2px 8px', fontSize: '0.6rem' }}
+            className="inspector-close-btn"
            onClick={onClose}
+            title="Hide inspector"
          >
-            CLOSE
+            <X size={12} />
          </button>
        )}
      </div>
-      <div className="maze-inspector-body">
-        {!selection && <div className="inspector-empty">SELECT AN ELEMENT</div>}

-        {net && (
+      <div className="maze-inspector-body">
+        {!selection && (
+          <div className="inspector-empty">
+            <MousePointer2 size={22} style={{ opacity: 0.4, marginBottom: 10 }} />
+            <div>SELECT A NODE, NETWORK, OR EDGE</div>
+            <div style={{ marginTop: 10, fontSize: '0.6rem', opacity: 0.5 }}>
+              Right-click for actions
+            </div>
+          </div>
+        )}
+
+        {node && (
          <>
+            <div className="inspector-head">
+              <span className={`status-dot ${node.status}`} />
+              <span className="inspector-head-title">{node.name}</span>
+              <span className="chip violet inspector-head-chip">{node.archetype}</span>
+            </div>
            <div className="kvs">
-              <div className="k">KIND</div>     <div className="v">{net.kind.toUpperCase()}</div>
-              <div className="k">LABEL</div>    <div className="v">{net.label}</div>
-              <div className="k">CIDR</div>     <div className="v">{net.cidr}</div>
-              <div className="k">MEMBERS</div>  <div className="v">
-                {nodes.filter((n) => n.netId === net.id).map((n) => n.name).join(', ') || '—'}
+              <div className="k">NETWORK</div>
+              <div className="v violet-accent">
+                {nets.find((nn) => nn.id === node.netId)?.label ?? node.netId}
+              </div>
+              <div className="k">STATUS</div>
+              <div className="v">{node.status.toUpperCase()}</div>
+              <div className="k">SERVICES</div>
+              <div className="v">
+                <div className="inspector-service-row">
+                  {node.services.length === 0 && <span className="dim">—</span>}
+                  {node.services.map((s) => (
+                    <span key={s} className="service-tag">{s}</span>
+                  ))}
+                </div>
              </div>
            </div>
-            {net.kind !== 'internet' && onDeleteNet && (
-              <button type="button" className="maze-btn ghost" onClick={() => onDeleteNet(net.id)}>
-                <Trash2 size={12} /> DELETE NET
+            <div>
+              <div className="type-label inspector-section-label">CONNECTIONS</div>
+              {edges.filter((e) => e.from === node.id || e.to === node.id).map((e) => {
+                const otherId = e.from === node.id ? e.to : e.from;
+                const other = nodes.find((n) => n.id === otherId);
+                const Arrow = e.from === node.id ? ArrowRight : ArrowLeft;
+                return (
+                  <div key={e.id} className="inspector-conn-row">
+                    <Arrow size={10} className={e.traffic === 'hot' ? 'alert-text' : 'dim'} />
+                    <span>{other?.name ?? '—'}</span>
+                    <span className="chip dim-chip inspector-conn-chip">{e.traffic}</span>
+                  </div>
+                );
+              })}
+              {edges.filter((e) => e.from === node.id || e.to === node.id).length === 0 && (
+                <div className="dim inspector-empty-line">NO EDGES</div>
+              )}
+            </div>
+            {onDeleteNode && (
+              <button
+                type="button"
+                className="maze-btn alert small"
+                disabled={isObserved || isGateway}
+                title={
+                  isObserved ? 'observed entity — not a deployed decky'
+                  : isGateway ? 'DMZ gateway — pinned to its DMZ network'
+                  : undefined
+                }
+                onClick={() => !isObserved && !isGateway && onDeleteNode(node.id)}
+              >
+                <Trash2 size={12} /> REMOVE FROM GRAPH
              </button>
            )}
          </>
        )}

-        {node && (
+        {net && (
          <>
-            <div className="kvs">
-              <div className="k">KIND</div>      <div className="v">{node.kind === 'observed' ? 'OBSERVED' : 'DECKY'}</div>
-              <div className="k">NAME</div>      <div className="v">{node.name}</div>
-              <div className="k">ARCHETYPE</div> <div className="v">{node.archetype}</div>
-              <div className="k">NET</div>       <div className="v">{nets.find((nn) => nn.id === node.netId)?.label ?? node.netId}</div>
-              <div className="k">SERVICES</div>  <div className="v">{node.services.join(', ') || '—'}</div>
-              <div className="k">STATUS</div>    <div className="v">{node.status.toUpperCase()}</div>
+            <div className="inspector-head">
+              {net.kind === 'internet'
+                ? <Globe size={14} className="violet-accent" />
+                : <GitMerge size={14} className="violet-accent" />}
+              <span className="inspector-head-title">{net.label}</span>
+              {net.kind !== 'internet' && !activeNetIds.has(net.id) && (
+                <span className="chip-mini inspector-head-chip">INACTIVE</span>
+              )}
            </div>
-            {onDeleteNode && (
+            <div className="kvs">
+              <div className="k">KIND</div><div className="v">{net.kind.toUpperCase()}</div>
+              <div className="k">CIDR</div><div className="v">{net.cidr}</div>
+              <div className="k">DECKIES</div>
+              <div className="v" style={{ fontWeight: 700 }}>
+                {nodes.filter((n) => n.netId === net.id).length}
+              </div>
+            </div>
+            <div>
+              <div className="type-label inspector-section-label">MEMBERS</div>
+              {nodes.filter((n) => n.netId === net.id).map((n) => (
+                <div
+                  key={n.id}
+                  className="inspector-member-row"
+                  onClick={() => setSelection?.({ type: 'node', id: n.id })}
+                >
+                  <span className={`status-dot ${n.status}`} />
+                  <span>{n.name}</span>
+                  <span className="dim inspector-member-arch">{n.archetype}</span>
+                </div>
+              ))}
+              {nodes.filter((n) => n.netId === net.id).length === 0 && (
+                <div className="dim inspector-empty-line">NO MEMBERS</div>
+              )}
+            </div>
+            {net.kind !== 'internet' && onAddDecky && (
+              <button type="button" className="maze-btn small" onClick={() => onAddDecky(net.id)}>
+                <Plus size={10} /> ADD DECKY
+              </button>
+            )}
+            {net.kind !== 'internet' && onDeleteNet && (
              <button
                type="button"
-                className="maze-btn ghost"
-                disabled={node.kind === 'observed'}
-                title={node.kind === 'observed' ? 'observed entity — not a deployed decky' : 'delete decky'}
-                onClick={() => node.kind === 'decky' && onDeleteNode(node.id)}
+                className="maze-btn alert small"
+                onClick={() => onDeleteNet(net.id)}
              >
-                <Trash2 size={12} /> DELETE NODE
+                <Trash2 size={10} /> REMOVE NETWORK
              </button>
            )}
          </>
@@ -87,32 +194,54 @@ const Inspector: React.FC<Props> = ({ selection, nets, nodes, edges, pending, on

        {edge && (
          <>
+            <div className="inspector-head">
+              <Server size={14} className="violet-accent" />
+              <span className="inspector-head-title">EDGE · {edge.id.slice(0, 8)}</span>
+            </div>
            <div className="kvs">
-              <div className="k">FROM</div>    <div className="v">{nodes.find((n) => n.id === edge.from)?.name ?? edge.from}</div>
-              <div className="k">TO</div>      <div className="v">{nodes.find((n) => n.id === edge.to)?.name ?? edge.to}</div>
-              <div className="k">TRAFFIC</div> <div className="v">{edge.traffic.toUpperCase()}</div>
-              {edge.label && (<>
-                <div className="k">LABEL</div> <div className="v">{edge.label}</div>
-              </>)}
+              <div className="k">FROM</div>
+              <div className="v">{nodes.find((n) => n.id === edge.from)?.name ?? edge.from}</div>
+              <div className="k">TO</div>
+              <div className="v">{nodes.find((n) => n.id === edge.to)?.name ?? edge.to}</div>
+              <div className="k">TRAFFIC</div>
+              <div className="v">{edge.traffic.toUpperCase()}</div>
+              {edge.label && (
+                <>
+                  <div className="k">LABEL</div>
+                  <div className="v">{edge.label}</div>
+                </>
+              )}
            </div>
            {onDeleteEdge && (
-              <button type="button" className="maze-btn ghost" onClick={() => onDeleteEdge(edge.id)}>
-                <Trash2 size={12} /> REMOVE EDGE
+              <button
+                type="button"
+                className="maze-btn alert small"
+                onClick={() => onDeleteEdge(edge.id)}
+              >
+                <Trash2 size={10} /> CUT EDGE
              </button>
            )}
          </>
        )}

-        <div>
-          <div className="k" style={{ fontSize: '0.62rem', letterSpacing: '1.5px', opacity: 0.5, marginBottom: 6 }}>
-            PENDING DIFF ({pending.length})
+        {pendingChanges > 0 && (
+          <div className="inspector-diff-block">
+            <div className="type-label inspector-section-label">PENDING DIFF</div>
+            <div className="maze-diff">
+              <span className="ctx">  +{pendingChanges} graph mutation(s)</span>{'\n'}
+              <span className="ctx">  networks: {nets.length}</span>{'\n'}
+              <span className="ctx">  deckies:  {nodes.length}</span>{'\n'}
+              <span className="ctx">  paths:    {edges.length}</span>
+            </div>
          </div>
-          <pre className="maze-diff">
-            {pending.length === 0
-              ? <span className="ctx">no pending changes</span>
-              : pending.map((p, i) => <div key={i} className="add">+ {p.op} {JSON.stringify(p.payload)}</div>)}
-          </pre>
-        </div>
+        )}
+
+        {topologyStatus && !selection && (
+          <div className="kvs inspector-status-block">
+            <div className="k">TOPOLOGY</div>
+            <div className="v">{topologyStatus.toUpperCase()}</div>
+          </div>
+        )}
      </div>
    </aside>
  );