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>
  );
--- a/decnet_web/src/components/MazeNET/MazeNET.css
+++ b/decnet_web/src/components/MazeNET/MazeNET.css
@@ -129,6 +129,34 @@
 .maze-net-box.internet {
  border-color: var(--alert); background: rgba(255, 65, 65, 0.04);
 }
+.maze-net-box.dmz {
+  border-color: var(--alert); background: rgba(255, 65, 65, 0.06);
+  border-style: dashed;
+}
+.maze-net-box.dmz .maze-net-box-head {
+  color: var(--alert); border-bottom-color: rgba(255, 65, 65, 0.45);
+}
+/* Deployed: topology is active/degraded — make it visually unmistakable.
+ * Subnet LANs glow matrix-green; DMZ stays hot red (and gets a stronger
+ * glow so you can tell it's live). */
+.maze-net-box.deployed {
+  border-style: solid;
+  border-color: var(--matrix);
+  background: rgba(0, 255, 65, 0.05);
+  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.25) inset, var(--matrix-glow);
+}
+.maze-net-box.deployed .maze-net-box-head {
+  color: var(--matrix); border-bottom-color: rgba(0, 255, 65, 0.45);
+}
+.maze-net-box.deployed.dmz {
+  border-color: var(--alert);
+  background: rgba(255, 65, 65, 0.09);
+  box-shadow: 0 0 0 1px rgba(255, 65, 65, 0.35) inset,
+              0 0 16px rgba(255, 65, 65, 0.5);
+}
+.maze-net-box.deployed.dmz .maze-net-box-head {
+  color: var(--alert); border-bottom-color: rgba(255, 65, 65, 0.55);
+}
 .maze-net-box.inactive {
  opacity: 0.42; filter: grayscale(0.7); border-style: dotted;
 }
@@ -182,6 +210,18 @@
 }
 .maze-node.observed { border-style: dashed; }
 .maze-node.dragging { opacity: 0.8; z-index: 10; cursor: grabbing; }
+.maze-node.deployed {
+  border-color: var(--matrix);
+  box-shadow: var(--matrix-glow);
+  background: rgba(0, 255, 65, 0.04);
+}
+.maze-node.deployed .mn-head { color: var(--matrix); }
+.maze-node.deployed.dmz-gateway {
+  border-color: var(--alert);
+  box-shadow: 0 0 12px rgba(255, 65, 65, 0.55);
+  background: rgba(255, 65, 65, 0.06);
+}
+.maze-node.deployed.dmz-gateway .mn-head { color: var(--alert); }
 .maze-node .mn-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.5px;
@@ -289,6 +329,15 @@
  padding: 6px 12px 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
 }
+.ctx-title {
+  font-size: 0.58rem; letter-spacing: 2px; opacity: 0.5;
+  padding: 6px 12px 4px; border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+.ctx-item-wrap { position: relative; }
+.ctx-icon { display: inline-flex; width: 14px; align-items: center; justify-content: center; opacity: 0.8; }
+.ctx-label { flex: 1; }
+.ctx-chev { opacity: 0.6; }
 .ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; font-size: 0.74rem; cursor: pointer; letter-spacing: 0.5px;
@@ -304,6 +353,13 @@
 .ctx-item.disabled { opacity: 0.35; cursor: not-allowed; }
 .ctx-item.disabled:hover { background: transparent; color: inherit; }
 .ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }
+.palette-ghost {
+  position: fixed; z-index: 2000; pointer-events: none;
+  padding: 4px 10px; font-family: var(--font-mono); font-size: 0.68rem;
+  letter-spacing: 1.5px; background: var(--panel);
+  border: 1px solid var(--violet); color: var(--violet);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), var(--violet-glow);
+}
 .ctx-submenu {
  position: absolute; left: 100%; top: 0;
  background: var(--panel); border: 1px solid var(--violet);
@@ -312,6 +368,144 @@
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
 }

+/* ── Inspector: rich visual layout ──────────── */
+.inspector-type-label {
+  margin-left: auto;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+}
+.inspector-close-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: rgba(255, 255, 255, 0.5);
+  padding: 3px 5px;
+  cursor: pointer;
+  display: flex;
+  transition: all 0.15s;
+}
+.inspector-close-btn:hover { color: var(--alert); border-color: var(--alert); }
+
+.inspector-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.inspector-head-title { font-size: 0.9rem; font-weight: 700; }
+.inspector-head-chip { margin-left: auto; }
+
+.inspector-section-label { margin-bottom: 6px; }
+.type-label {
+  font-size: 0.6rem;
+  letter-spacing: 1.5px;
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+
+.inspector-conn-row {
+  font-size: 0.7rem;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.inspector-conn-chip { margin-left: auto; }
+
+.inspector-member-row {
+  font-size: 0.72rem;
+  padding: 5px 0;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  cursor: pointer;
+}
+.inspector-member-row:hover { color: var(--violet); }
+.inspector-member-arch { margin-left: auto; font-size: 0.6rem; }
+
+.inspector-empty-line {
+  font-size: 0.68rem;
+  padding: 4px 0;
+}
+
+.inspector-diff-block {
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+}
+
+.inspector-status-block { margin-top: 12px; }
+
+.dim { opacity: 0.5; }
+
+/* Status dots used in inspector head + member rows */
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 0;
+  flex-shrink: 0;
+}
+.status-dot.active   { background: var(--matrix); box-shadow: 0 0 8px var(--matrix); }
+.status-dot.idle     { background: #30363d; }
+.status-dot.hot      { background: var(--alert); box-shadow: 0 0 8px var(--alert);
+                       animation: decnet-pulse 1s infinite alternate; }
+.status-dot.mutating { background: var(--violet); animation: decnet-blink 1s infinite; }
+
+/* Chips — inline badges for archetypes, traffic, severity */
+.chip {
+  font-size: 0.65rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--matrix);
+  color: var(--matrix);
+  background: var(--matrix-tint-10);
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+.chip.violet   { border-color: var(--violet); color: var(--violet); background: var(--violet-tint-10); }
+.chip.matrix   { border-color: var(--matrix); color: var(--matrix); background: var(--matrix-tint-10); }
+.chip.alert    { border-color: var(--alert);  color: var(--alert);  background: var(--alert-tint-10); }
+.chip.dim-chip { border-color: var(--border); color: rgba(0, 255, 65, 0.6); background: transparent; }
+
+.chip-mini {
+  font-size: 0.55rem;
+  padding: 1px 5px;
+  border: 1px solid var(--border);
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+/* Inspector buttons */
+.maze-btn.small { padding: 5px 10px; font-size: 0.68rem; }
+.maze-btn.alert {
+  border-color: var(--alert);
+  color: var(--alert);
+  opacity: 0.85;
+}
+.maze-btn.alert:hover {
+  background: var(--alert);
+  color: #000;
+  box-shadow: 0 0 10px rgba(255, 65, 65, 0.5);
+  opacity: 1;
+}
+
+/* Service tag reuse for inspector "SERVICES" chip row */
+.inspector-service-row {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.maze-inspector .service-tag {
+  font-size: 0.6rem;
+  padding: 2px 6px;
+  letter-spacing: 0.5px;
+  border: 1px solid var(--violet);
+  color: var(--violet);
+  border-radius: 2px;
+}
+
 .dragging-from-palette {
  position: fixed; pointer-events: none; z-index: 200;
  background: var(--panel); border: 1px solid var(--violet);
--- a/decnet_web/src/components/MazeNET/MazeNET.tsx
+++ b/decnet_web/src/components/MazeNET/MazeNET.tsx
@@ -445,7 +445,7 @@ const MazeNET: React.FC = () => {
        <div>
          <h1>MAZENET · {topoName || topologyId}</h1>
          <div className="maze-page-sub">
-            {topoStatus.toUpperCase()} · v{topoVersion} ·{' '}
+            NETWORK OF NETWORKS · {topoStatus.toUpperCase()} · v{topoVersion} ·{' '}
            {nets.length} NETS · {nodes.length} NODES · {edges.length} PATHS
            {loadErr && <span className="alert-text"> · {loadErr}</span>}
            {actionErr && <span className="alert-text"> · {actionErr}</span>}
@@ -514,6 +514,7 @@ const MazeNET: React.FC = () => {
        {inspectorOpen && (
          <Inspector
            selection={selection}
+            setSelection={setSelection}
            nets={nets}
            nodes={nodes}
            edges={edges}
@@ -522,6 +523,17 @@ const MazeNET: React.FC = () => {
            onDeleteNet={removeNet}
            onDeleteNode={removeNode}
            onDeleteEdge={removeEdge}
+            onAddDecky={(netId) => {
+              const net = nets.find((n) => n.id === netId);
+              if (!net) return;
+              onPaletteDrop(
+                { kind: 'archetype', slug: archetypes[0]?.slug ?? 'deaddeck',
+                  services: archetypes[0]?.services.slice(0, 2) ?? [],
+                  label: archetypes[0]?.name ?? 'DECKY',
+                  clientX: 0, clientY: 0 },
+                { x: net.x + 40, y: net.y + 60 }, netId, null,
+              );
+            }}
          />
        )}
      </div>