feat(app): interactive system map (/map)

A spatial control surface for the whole node. Tools, jobs, services, and
frontends sit in lanes with program-source grips; edges show requires
(dependency), same-program siblings, and exposure to LAN/Internet targets.

Direct manipulation, each backed by the existing config PUT + apply:
- drag a node to LAN/Internet to set reach (internal/public)
- delete an exposure line or a node (with confirm) to unexpose/remove
- right-click or the per-node ⋯ menu: open, restart, expose, delete
- click the source grip to open the backing program

Nodes are draggable with Shift-/toggle box-select; layout persists to
localStorage with a reset control. Adds useSetReach/useDeleteDeployment
hooks, the @xyflow/react dep, and the nav entry + route.
This commit is contained in:
2026-07-06 13:12:15 -07:00
parent a018a21587
commit 8086a09bf7
7 changed files with 1059 additions and 0 deletions

View File

@@ -27,3 +27,15 @@ select option {
background-color: var(--card);
color: var(--foreground);
}
/* System Map: make a selected edge unmistakable — thicken it and lay a bright
halo behind the colored stroke so the current selection reads at a glance
before a Backspace/Delete removes it. */
.react-flow__edge.selected .react-flow__edge-path {
stroke-width: 3.5;
filter: drop-shadow(0 0 5px rgba(240, 246, 252, 0.9));
}
.react-flow__edge:hover .react-flow__edge-path {
stroke-width: 3;
cursor: pointer;
}