fix: root-anchor mcables ignore pattern, commit cmd/mcables/main.go

The bare `mcables` pattern in .gitignore (line 11) and .dockerignore
(line 18) was intended to ignore the built binary at the repo root, but
without a leading slash it also matched the cmd/mcables/ directory. The
result: cmd/mcables/main.go was never tracked in git, and fresh worktrees
had to copy it from a sibling to build.

- Change `mcables` → `/mcables` in both files (still ignores the root
  binary; no longer matches the cmd subdirectory).
- Add cmd/mcables/main.go (copied from picasso's worktree, verified
  identical to head's main checkout).

Verified: `git check-ignore cmd/mcables/main.go` returns not-ignored;
a touched `./mcables` at the repo root is still ignored via `/mcables`.
`go build ./...` clean.

.dockerignore

@@ -15,7 +15,7 @@ data
 
 # Build artefacts
 bin
-mcables
+/mcables
 
 # Editor cruft
 .vscode

.gitignore

@@ -8,7 +8,7 @@ data/*.db-shm
 
 # Build artefacts
 bin/
-mcables
+/mcables
 
 # Editor
 .vscode/

cmd/mcables/main.go

@@ -0,0 +1,64 @@
+package main
+
+import (
+	"context"
+	"errors"
+	"log"
+	"net/http"
+	"os"
+	"os/signal"
+	"path/filepath"
+	"syscall"
+	"time"
+
+	"mgit.msbls.de/m/mcables/internal/db"
+	"mgit.msbls.de/m/mcables/internal/server"
+	"mgit.msbls.de/m/mcables/web"
+)
+
+func main() {
+	addr := envOr("MCABLES_ADDR", "0.0.0.0:7777")
+	dbPath := envOr("MCABLES_DB", "./data/mcables.db")
+
+	if err := os.MkdirAll(filepath.Dir(dbPath), 0o755); err != nil {
+		log.Fatalf("mkdir data dir: %v", err)
+	}
+
+	store, err := db.Open(dbPath)
+	if err != nil {
+		log.Fatalf("open db: %v", err)
+	}
+	defer store.Close()
+
+	if err := db.Migrate(store.DB()); err != nil {
+		log.Fatalf("migrate: %v", err)
+	}
+
+	srv := &http.Server{
+		Addr:              addr,
+		Handler:           server.New(store, web.Static()),
+		ReadHeaderTimeout: 5 * time.Second,
+	}
+
+	go func() {
+		log.Printf("mcables listening on %s (db=%s)", addr, dbPath)
+		if err := srv.ListenAndServe(); err != nil && !errors.Is(err, http.ErrServerClosed) {
+			log.Fatalf("listen: %v", err)
+		}
+	}()
+
+	stop := make(chan os.Signal, 1)
+	signal.Notify(stop, os.Interrupt, syscall.SIGTERM)
+	<-stop
+	log.Printf("shutting down")
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+	_ = srv.Shutdown(ctx)
+}
+
+func envOr(key, fallback string) string {
+	if v := os.Getenv(key); v != "" {
+		return v
+	}
+	return fallback
+}

docs/design.md

@@ -1438,4 +1438,228 @@ gitignored.
 
 ---
 
-DESIGN v4.1 READY FOR REVIEW
+## 11. v5 — Cable routing via clamps
+
+m's bundling primitive: a **clamp** is a physical anchor on the canvas
+(think cable tie / clip). A cable routes from its `from` endpoint,
+through zero or more clamps **in order**, to its `to` endpoint. Two
+cables that share an ordered pair of consecutive clamps are visibly
+bundled along that segment — no detection pass, no inference: the
+overlap *is* the bundle.
+
+This replaces the abandoned waypoints + segment-detection approach.
+v0's straight-line schematic stays as the empty-clamps case
+(`cable_clamps` is empty for a fresh solver-emitted cable).
+
+### 11.1 Schema (migration 007)
+
+```sql
+CREATE TABLE clamps (
+    id              INTEGER PRIMARY KEY,
+    project_id      INTEGER NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+    x               REAL NOT NULL,
+    y               REAL NOT NULL,
+    label           TEXT NOT NULL DEFAULT '',
+    frame_id        INTEGER REFERENCES frames(id) ON DELETE SET NULL,
+    excalidraw_id   TEXT,
+    created_at      TEXT NOT NULL DEFAULT (datetime('now')),
+    updated_at      TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (project_id, excalidraw_id)
+);
+CREATE INDEX clamps_project_idx ON clamps(project_id);
+
+CREATE TABLE cable_clamps (
+    cable_id        INTEGER NOT NULL REFERENCES cables(id) ON DELETE CASCADE,
+    clamp_id        INTEGER NOT NULL REFERENCES clamps(id) ON DELETE CASCADE,
+    ord             INTEGER NOT NULL,    -- 1..N along from→to
+    PRIMARY KEY (cable_id, ord),
+    UNIQUE (cable_id, clamp_id)          -- a cable can't visit the same clamp twice
+);
+CREATE INDEX cable_clamps_clamp_idx ON cable_clamps(clamp_id);
+```
+
+`frame_id` on clamps mirrors devices + IO markers — m can put a clamp
+inside a frame and the frame-drag carries it.
+
+`UNIQUE (cable_id, clamp_id)` blocks loops. `ord` is a small int, 1-based;
+nothing requires it to be contiguous (m can renumber 1, 2, 3 → 1, 3, 5
+during edits and the renderer is fine with that), but the UI keeps them
+contiguous on every mutation for sanity.
+
+### 11.2 Cable rendering model
+
+Each cable resolves to a polyline `[from-anchor, clamp₁, clamp₂, …, clampₙ, to-anchor]`
+where:
+- `from-anchor` / `to-anchor` come from the existing `anchorForEndpoint`
+  resolver (port / device / IO).
+- clamp anchors are `(clamp.x, clamp.y)` directly — clamps don't have a
+  width/height to centre.
+
+For N=0 clamps the result is the v0 straight line. For N≥1 we render
+a `<polyline>` instead of a `<line>`.
+
+The endpoint-replug handles from §10 (cable-replug) stay on the **first
+and last** vertices. Mid-polyline vertices get their own clamp-handle —
+small grab points only on the selected cable, which behave like
+clamp-detach when dragged onto empty canvas (drop a clamp off the
+cable's path).
+
+### 11.3 Bundle visualisation — derived from shared segments
+
+A **segment** is a directed pair `(A, B)` where A and B are consecutive
+nodes of a cable's polyline. Two cables share a segment when their
+polyline contains the same A→B (or B→A — segment matching is
+undirected).
+
+For each segment, compute `cables[]` — the cables that traverse it.
+If `len(cables) ≥ 2`, render the segment as a single thick line on top
+of the individual ones:
+
+- **Width**: `2 + N` px (N = cable count). Caps at ~12 px.
+- **Colour**: a striped pattern, one stripe per distinct cable type in
+  the bundle, ordered by cable_type.id. SVG `<linearGradient>` with
+  hard stops produces the stripe band cheaply; render it on a sibling
+  `<polyline>` over the individual lines.
+- **Tooltip**: `<title>` child listing the cables ("Power · USB · HDMI").
+
+At a clamp where ≥ 2 cables meet, the clamp icon (10×10 rounded square)
+shows a small count badge (`×N`) when N > 1. At fan-out points
+(endpoint with no clamp before it on the polyline) the individual
+coloured lines re-emerge, so m sees which port each strand goes to.
+
+Shared-segment computation is O(C·N̄) where C = #cables and N̄ = average
+polyline length. For a v0-sized project (≤ ~30 cables, ≤ ~5 clamps per
+cable) this is trivial. We rebuild the segment map on every renderCanvas
+— no caching layer.
+
+### 11.4 UI gestures
+
+**+ Clamp tool (`C` shortcut, also a sidebar button):**
+- Click empty canvas → place a clamp at the cursor (POST `/clamps`).
+  Standalone clamp — not on any cable yet.
+- Click a cable line → insert this clamp into that cable. The new clamp
+  sits at the click position (snapped to the nearest point on the
+  cable's polyline) and its `ord` is computed so it falls between the
+  two existing vertices it lies between.
+
+**Drag a cable's mid-segment:**
+- Pointerdown on a cable line (not on an endpoint handle) and drag.
+  Live preview shows a bend at the cursor. Pointerup:
+  - If the cursor is within snap-radius (~16 px) of an existing clamp:
+    insert that clamp into the cable's polyline at the right `ord`.
+  - Otherwise: create a fresh clamp at the release point and insert it.
+
+**Clamp inspector** (selecting a clamp on the canvas):
+- Position (x, y editable + label)
+- "Cables through this clamp": list with each cable's two endpoints,
+  click → select that cable
+- "Remove from this cable" (per row) → DELETE the matching cable_clamps
+  row; cable's polyline collapses around the gap.
+- "Delete clamp" → cascade-removes from every cable_clamps row.
+
+**Right-click on a clamp icon ON a cable** → "Remove from this cable"
+inline.
+
+**Frame drag** carries clamps the same way it carries devices + IO
+markers (clamp.frame_id mirrors the existing pattern, drag handler
+already iterates frame-contained items).
+
+### 11.5 Relationship to the existing `bundles` table
+
+**Recommendation: keep `bundles` and `bundle_cables`, repurpose them.**
+
+- Implicit/auto bundles → derived live from shared clamp segments. No
+  DB rows. The §5 `GET /bundles/suggestions` endpoint stays useful as a
+  "you might want to route these through the same clamps" hint.
+- Explicit named bundles → still in the `bundles` table. m names a
+  group ("desk → wall trunk"), the UI offers "route all members through
+  these clamps" as a one-click action. Useful for the case where m
+  wants a stable label on a logical bundle that isn't yet routed.
+
+Migration 007 leaves `bundles` + `bundle_cables` untouched. A v6 cleanup
+can drop them if m decides the explicit-named path isn't worth keeping.
+
+### 11.6 Solver coupling
+
+The v0 solver still emits **straight cables** — no clamp rows. m
+hand-routes after Solve. The solver's preview-diff is unaffected
+(solver compares endpoint pairs; clamp routing is independent of the
+endpoint identity).
+
+Future v5.1: solver-suggested clamps based on shared paths between
+endpoint pairs. Out of scope here.
+
+### 11.7 Export to mxdrw
+
+Clamps map to small diamond elements (separate from IO markers — IO
+diamonds are red wall-outlets; clamps are grey routing points).
+`excalidraw_id` is stable across re-exports per the existing pattern.
+
+Cable arrows become Excalidraw `arrow` elements with mid-points (the
+clamp positions) when N≥1 — Excalidraw supports multi-vertex arrows
+via the `points` array. Each `startBinding` / `endBinding` resolves to
+the from/to anchor's excalidraw_id; mid-vertices are unbound.
+
+Bundle visualisation (thick striped lines on shared segments) is **not
+exported** in v0 — Excalidraw doesn't natively support gradient strokes,
+and the mxdrw round-trip would lose them. We export each cable as its
+own polyline; bundling is a viewer-only concept.
+
+### 11.8 API additions
+
+```
+POST   /api/projects/:pid/clamps                   { x, y, label?, frame_id? } → Clamp
+PATCH  /api/projects/:pid/clamps/:id               { x?, y?, label?, frame_id? } → Clamp
+DELETE /api/projects/:pid/clamps/:id
+
+POST   /api/projects/:pid/cables/:cid/clamps       { clamp_id, ord? } → CableClamp
+DELETE /api/projects/:pid/cables/:cid/clamps/:cmid
+
+# Convenience: re-order clamps on a cable in one call
+PUT    /api/projects/:pid/cables/:cid/clamps       { clamp_ids: [int, int, …] }
+```
+
+Snapshot endpoint grows two arrays:
+- `clamps: []Clamp`
+- `cable_clamps: []{ cable_id, clamp_id, ord }`
+
+### 11.9 Open questions for m
+
+1. **Clamp icon shape.** Diamond (overlaps visually with IO markers
+   when zoomed out), small filled circle (overlaps with port circles),
+   or rounded square `▢` 10×10? Recommend rounded square — distinct from
+   everything else on the canvas today.
+2. **Snap radius when inserting onto a cable.** ~16 px world-units feels
+   right at 1× zoom. Should it scale with zoom (visual constant) or stay
+   world-constant (gesture stays the same regardless of zoom)? Recommend
+   visual constant — divide by current zoom.
+3. **Clamp deletion when shared.** If a clamp is used by 4 cables and m
+   clicks "Delete clamp", do we (a) refuse with a "still in use" prompt,
+   (b) cascade-remove from all 4 cables, or (c) cascade silently? Current
+   draft says cascade silently. Worth a confirmation?
+4. **Bundle stripe order.** Cable-type id is stable but arbitrary; visual
+   order on a thick line affects readability. Order by stripe-count
+   (Power first if 3 Power + 1 USB), or by cable-type-id (deterministic
+   but unrelated to importance)? Recommend by-count, ties broken by id.
+5. **Solver respect for existing routing.** When m re-runs Solve after
+   hand-routing, should the solver preserve existing clamp routing on
+   user-owned (`auto=0`) cables? Auto cables are wiped + rebuilt, so
+   their clamps disappear with them — that's expected. But manual cables
+   with clamps should clearly keep them. Confirm.
+
+### 11.10 Slice plan (post-design)
+
+1. Schema migration + tx-aware store helpers (Create/Update/DeleteClamp,
+   AttachClampToCable, DetachClampFromCable, ReorderClamps).
+2. HTTP endpoints + snapshot extension.
+3. Frontend: clamp render + + Clamp tool + canvas placement (no
+   cable attach yet).
+4. Cable polyline render via clamps, mid-segment drag-to-clamp,
+   clamp inspector.
+5. Shared-segment bundle visualisation (gradient stripe + count badge).
+6. Export pipeline extension — mxdrw arrows with mid-points + clamp
+   diamonds. Bundle viz stays viewer-only.
+
+---
+
+DESIGN v5 READY FOR REVIEW

web/static/index.html

@@ -24,6 +24,10 @@
     <button type="button" id="btn-solve" class="btn btn-primary">Solve</button>
     <button type="button" id="btn-export" class="btn">Export</button>
     <button type="button" id="btn-admin" class="btn" title="Admin: projects, cable types, device types, setup templates">⚙ Admin</button>
+    <span class="zoom-cluster">
+      <span id="zoom-pct" title="Zoom — scroll on canvas, or 0/Home to reset">100%</span>
+      <button type="button" id="btn-fit" class="btn btn-tiny" title="Fit content to view">Fit</button>
+    </span>
     <span id="toast" class="toast" hidden></span>
   </header>
 
@@ -34,11 +38,6 @@
         <ul id="legend-list" class="legend-list"></ul>
         <button type="button" id="btn-add-type" class="btn btn-tiny">+ Type</button>
       </section>
-      <section class="requirements">
-        <h2 class="sidebar-heading">Requirements</h2>
-        <ul id="requirement-list" class="requirement-list"></ul>
-        <button type="button" id="btn-add-requirement" class="btn btn-tiny">+ Requirement</button>
-      </section>
       <section class="tools">
         <h2 class="sidebar-heading">Tools</h2>
         <ul class="tool-list">
@@ -237,6 +236,7 @@
         <button type="button" class="admin-tab" data-admin-tab="cable-types" role="tab">Cable types</button>
         <button type="button" class="admin-tab" data-admin-tab="device-types" role="tab">Device types</button>
         <button type="button" class="admin-tab" data-admin-tab="setup-templates" role="tab">Setup templates</button>
+        <button type="button" class="admin-tab" data-admin-tab="requirements" role="tab">Requirements</button>
       </nav>
       <section class="admin-body" id="admin-body" role="tabpanel"></section>
     </div>

web/static/main.js

@@ -58,6 +58,10 @@ const state = {
   activeTypeId: /** @type {number|null} */ (null),
   /** "frame" | "device" | "io" | "req" | "cable" | null */
   tool: /** @type {string|null} */ (null),
+  /** Canvas viewport — drives the SVG viewBox. */
+  view: { x: 0, y: 0, zoom: 1 },
+  /** Space-key held → next pointerdown anywhere on canvas starts a pan. */
+  spaceHeld: false,
   /** Slice-7: when the user clicked a source port, this is its id. */
   cableDrawFromPortID: /** @type {number|null} */ (null),
   /** @type {({kind: "frame"|"device"|"io"|"cable_type"|"requirement"|"cable"|"bundle"|"port", id: number} | {kind: "port_new", device_id: number}) | null} */ selection: null,
@@ -164,6 +168,137 @@ function setActiveInURL(id) {
   history.replaceState(null, "", url.toString());
 }
 
+// ---------- canvas view (zoom + pan) ---------- //
+
+const BASE_W = 2000, BASE_H = 1500;
+const ZOOM_MIN = 0.2, ZOOM_MAX = 5;
+
+function clampZoom(z) { return Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, z)); }
+
+function applyViewBox() {
+  const z = state.view.zoom;
+  const vw = BASE_W / z;
+  const vh = BASE_H / z;
+  $("#canvas").setAttribute("viewBox", `${state.view.x} ${state.view.y} ${vw} ${vh}`);
+}
+
+function updateZoomUI() {
+  const el = $("#zoom-pct");
+  if (el) el.textContent = `${Math.round(state.view.zoom * 100)}%`;
+}
+
+function viewFromURL() {
+  const p = new URLSearchParams(location.search);
+  const z = parseFloat(p.get("z"));
+  const px = parseFloat(p.get("px"));
+  const py = parseFloat(p.get("py"));
+  if (Number.isFinite(z) && z > 0) state.view.zoom = clampZoom(z);
+  if (Number.isFinite(px)) state.view.x = px;
+  if (Number.isFinite(py)) state.view.y = py;
+}
+
+function setViewInURL() {
+  const url = new URL(location.href);
+  const isDefault = state.view.zoom === 1 && state.view.x === 0 && state.view.y === 0;
+  if (isDefault) {
+    url.searchParams.delete("z");
+    url.searchParams.delete("px");
+    url.searchParams.delete("py");
+  } else {
+    url.searchParams.set("z",  state.view.zoom.toFixed(3));
+    url.searchParams.set("px", state.view.x.toFixed(1));
+    url.searchParams.set("py", state.view.y.toFixed(1));
+  }
+  history.replaceState(null, "", url.toString());
+}
+
+function wheelZoom(e) {
+  e.preventDefault();
+  const before = svgPoint(e);
+  const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+  const newZoom = clampZoom(state.view.zoom * factor);
+  if (newZoom === state.view.zoom) return;
+  state.view.zoom = newZoom;
+  applyViewBox();
+  const after = svgPoint(e); // recomputed against the new viewBox
+  state.view.x += before.x - after.x;
+  state.view.y += before.y - after.y;
+  applyViewBox();
+  updateZoomUI();
+  setViewInURL();
+}
+
+function startPan(e) {
+  const svg = /** @type {SVGSVGElement} */ ($("#canvas"));
+  const ctm = svg.getScreenCTM();
+  if (!ctm) return;
+  e.preventDefault();
+  e.stopPropagation();
+  $(".canvas-wrap").classList.add("panning");
+  // ctm.a / ctm.d are the world→screen scales. world delta = screen delta / scale.
+  const scaleX = ctm.a, scaleY = ctm.d;
+  const startClientX = e.clientX, startClientY = e.clientY;
+  const startViewX = state.view.x, startViewY = state.view.y;
+  try { svg.setPointerCapture(e.pointerId); } catch {}
+  const onMove = (ev) => {
+    state.view.x = startViewX - (ev.clientX - startClientX) / scaleX;
+    state.view.y = startViewY - (ev.clientY - startClientY) / scaleY;
+    applyViewBox();
+  };
+  const onUp = (ev) => {
+    svg.removeEventListener("pointermove", onMove);
+    svg.removeEventListener("pointerup",   onUp);
+    svg.removeEventListener("pointercancel", onUp);
+    try { svg.releasePointerCapture(ev.pointerId); } catch {}
+    $(".canvas-wrap").classList.remove("panning");
+    setViewInURL();
+  };
+  svg.addEventListener("pointermove", onMove);
+  svg.addEventListener("pointerup",   onUp);
+  svg.addEventListener("pointercancel", onUp);
+}
+
+function resetView() {
+  state.view.zoom = 1;
+  state.view.x = 0;
+  state.view.y = 0;
+  applyViewBox();
+  updateZoomUI();
+  setViewInURL();
+}
+
+// Compute the bbox of every frame + device + IO marker in the current
+// project and frame it into the view with a small padding. Falls back
+// to reset when the project is empty.
+function fitToContent() {
+  if (!state.active) return resetView();
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  let any = false;
+  const cover = (x, y, w, h) => {
+    any = true;
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x + w > maxX) maxX = x + w;
+    if (y + h > maxY) maxY = y + h;
+  };
+  for (const f of state.frames)     cover(f.x, f.y, f.width, f.height);
+  for (const d of state.devices)    cover(d.x, d.y, d.width, d.height);
+  for (const m of state.ioMarkers)  cover(m.x, m.y, IO_SIZE, IO_SIZE);
+  if (!any) return resetView();
+  const pad = 40;
+  minX -= pad; minY -= pad; maxX += pad; maxY += pad;
+  const bw = maxX - minX, bh = maxY - minY;
+  const zoom = clampZoom(Math.min(BASE_W / bw, BASE_H / bh));
+  const vw = BASE_W / zoom, vh = BASE_H / zoom;
+  // Centre the bbox inside the (potentially larger) viewBox.
+  state.view.zoom = zoom;
+  state.view.x = minX - (vw - bw) / 2;
+  state.view.y = minY - (vh - bh) / 2;
+  applyViewBox();
+  updateZoomUI();
+  setViewInURL();
+}
+
 // ---------- geometry ---------- //
 
 /** Returns the smallest frame whose bbox contains (x, y), or null. */
@@ -336,9 +471,35 @@ function renderCanvas() {
       });
       // Port-click drives both cable-draw (slice 7) and port-select (this fix).
       c.addEventListener("pointerdown", (e) => onPortPointerDown(e, prt));
+      // Double-click activates cable-draw mode from this port without arming
+      // the cable tool first. armTool("cable") gives the crosshair cursor;
+      // the next port-click is then caught by onPortPointerDown's
+      // cable-draw-in-progress branch and commits the cable.
+      c.addEventListener("dblclick", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (state.tool !== "cable") armTool("cable");
+        state.cableDrawFromPortID = prt.id;
+        state.selection = null;
+        render();
+      });
       g.append(c);
     }
 
+    // Bottom-right resize handle. Drawn last so it sits on top of the rect
+    // and any port circles that might overlap the corner. Visible always
+    // but subtle; cursor signals resize affordance.
+    const HSZ = 10;
+    const handle = svgEl("rect", {
+      x: d.x + d.width - HSZ,
+      y: d.y + d.height - HSZ,
+      width: HSZ, height: HSZ,
+      class: "device-resize-handle",
+      "data-device-id": d.id,
+    });
+    handle.addEventListener("pointerdown", (e) => startResize(e, d.id));
+    g.append(handle);
+
     gDevices.append(g);
     rect.addEventListener("pointerdown", (e) => startDrag(e, "device", d.id));
   }
@@ -385,14 +546,22 @@ function renderCanvas() {
   const deviceByID = new Map(state.devices.map((d) => [d.id, d]));
   const ioByID = new Map(state.ioMarkers.map((m) => [m.id, m]));
   for (const c of state.cables) {
-    const fromAnchor = anchorForEndpoint(c.from_port_id, c.from_device_id, c.from_io_id, portByID, deviceByID, ioByID);
-    const toAnchor   = anchorForEndpoint(c.to_port_id,   c.to_device_id,   c.to_io_id,   portByID, deviceByID, ioByID);
+    let fromAnchor = anchorForEndpoint(c.from_port_id, c.from_device_id, c.from_io_id, portByID, deviceByID, ioByID);
+    let toAnchor   = anchorForEndpoint(c.to_port_id,   c.to_device_id,   c.to_io_id,   portByID, deviceByID, ioByID);
     if (!fromAnchor || !toAnchor) continue;
+    // Replug preview: while m drags an endpoint handle, override the
+    // affected end with the live cursor world position so the line
+    // tracks the pointer.
+    if (cableReplug && cableReplug.cableID === c.id) {
+      if (cableReplug.end === "from") fromAnchor = { x: cableReplug.x, y: cableReplug.y };
+      else                            toAnchor   = { x: cableReplug.x, y: cableReplug.y };
+    }
+    const isSelected = state.selection?.kind === "cable" && state.selection.id === c.id;
     const color = cableTypeColor.get(c.type_id) || "#888";
     const line = svgEl("line", {
       x1: fromAnchor.x, y1: fromAnchor.y,
       x2: toAnchor.x,   y2: toAnchor.y,
-      class: "cable-line" + (c.auto ? " auto" : "") + (state.selection?.kind === "cable" && state.selection.id === c.id ? " selected" : ""),
+      class: "cable-line" + (c.auto ? " auto" : "") + (isSelected ? " selected" : ""),
       stroke: color,
       "data-cable-id": c.id,
     });
@@ -402,6 +571,23 @@ function renderCanvas() {
       render();
     });
     gCables.append(line);
+    // Endpoint handles — only on the currently-selected cable. Two small
+    // filled circles m can grab to drag the endpoint onto a new target.
+    if (isSelected) {
+      for (const end of ["from", "to"]) {
+        const a = end === "from" ? fromAnchor : toAnchor;
+        const h = svgEl("circle", {
+          cx: a.x, cy: a.y, r: 7,
+          class: "cable-handle",
+          fill: color,
+          stroke: "#fff",
+          "data-cable-id": c.id,
+          "data-end": end,
+        });
+        h.addEventListener("pointerdown", (e) => startCableReplug(e, c.id, end));
+        gCables.append(h);
+      }
+    }
   }
 }
 
@@ -668,7 +854,10 @@ function renderInspectorDevice(body, id) {
     </div>
     <p class="section-title">Requirements</p>
     <div id="dev-reqs">${reqsHtml}</div>
-    <div class="inspector-actions">
+    <div class="inspector-actions" style="margin-top: 4px;">
+      <button type="button" class="btn btn-tiny" id="dev-add-req">+ Requirement</button>
+    </div>
+    <div class="inspector-actions" style="margin-top: 12px;">
       <button type="button" class="btn btn-danger btn-tiny" id="dev-delete">Delete device</button>
     </div>
   `;
@@ -729,6 +918,18 @@ function renderInspectorDevice(body, id) {
     });
   });
 
+  // + Requirement — open the modal pre-filled with this device as the
+  // "from" endpoint. Refuses if the project has fewer than 2 devices
+  // (a requirement needs two distinct endpoints).
+  body.querySelector("#dev-add-req").addEventListener("click", () => {
+    if (!state.active) return;
+    if (state.devices.length < 2) {
+      alert("Add a second device before declaring a requirement.");
+      return;
+    }
+    openRequirementModal(null, { from: d.id });
+  });
+
   // +Port — switch the inspector to the new-port form. m fills in
   // type + edge + label and clicks Create; no canvas click required.
   body.querySelector("#dev-add-port").addEventListener("click", () => {
@@ -1344,46 +1545,11 @@ function bindDebouncedRename(input, persist) {
 function render() {
   renderProjectPicker();
   renderLegend();
-  renderRequirements();
   renderCanvas();
   renderEmptyHint();
   renderInspector();
 }
 
-// ---------- requirements sidebar ---------- //
-
-function renderRequirements() {
-  const ul = $("#requirement-list");
-  ul.innerHTML = "";
-  const deviceById = new Map(state.devices.map((d) => [d.id, d]));
-  const cableTypeById = new Map(state.cableTypes.map((t) => [t.id, t]));
-  for (const r of state.requirements) {
-    const a = deviceById.get(r.from_device_id);
-    const b = deviceById.get(r.to_device_id);
-    if (!a || !b) continue; // a device delete cascade — UI will rerender soon
-    const ct = r.preferred_cable_type_id != null ? cableTypeById.get(r.preferred_cable_type_id) : null;
-    const li = document.createElement("li");
-    li.className = "requirement-row";
-    li.dataset.id = String(r.id);
-    if (state.selection?.kind === "requirement" && state.selection.id === r.id) {
-      li.setAttribute("aria-current", "true");
-    }
-    const cableLabel = ct ? `${ct.name}` : "solver picks";
-    li.innerHTML = `
-      <span class="pair">
-        ${escapeHtml(a.name)} ↔ ${escapeHtml(b.name)}
-        <span class="type"> · ${escapeHtml(cableLabel)}</span>
-      </span>
-      <span class="badge ${r.must_connect ? "must" : "nice"}">${r.must_connect ? "must" : "nice"}</span>
-    `;
-    li.addEventListener("click", () => {
-      state.selection = { kind: "requirement", id: r.id };
-      render();
-    });
-    ul.append(li);
-  }
-}
-
 function escapeHtml(s) {
   return String(s).replace(/[&<>"']/g, (c) => ({
     "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
@@ -1475,22 +1641,53 @@ function bindTools() {
     // Avoid stealing keys while user is typing into an input.
     const tag = (e.target instanceof HTMLElement) ? e.target.tagName : "";
     if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+    if (e.key === " " && !state.spaceHeld) {
+      // Hold Space to enable click-and-drag pan. Don't preventDefault here
+      // so pressing Space in unrelated focusable elements still works; the
+      // canvas pointerdown handler reads state.spaceHeld to gate the pan.
+      state.spaceHeld = true;
+      $(".canvas-wrap").classList.add("space-pan-ready");
+      e.preventDefault();
+      return;
+    }
     if (e.key === "Escape") { armTool(null); cancelInlineNamer(); state.cableDrawFromPortID = null; state.selection = null; render(); }
+    else if (e.key === "0" || e.key === "Home") resetView();
     else if (e.key === "f" || e.key === "F") armTool("frame");
     else if (e.key === "d" || e.key === "D") armTool("device");
     else if (e.key === "i" || e.key === "I") armTool("io");
     else if (e.key === "r" || e.key === "R") armTool("req");
     else if (e.key === "s" || e.key === "S") openSolveModal();
   });
+  document.addEventListener("keyup", (e) => {
+    if (e.key === " ") {
+      state.spaceHeld = false;
+      $(".canvas-wrap").classList.remove("space-pan-ready");
+    }
+  });
 
   // Canvas-level pointerdown handles tool activation + selection clearing.
-  $("#canvas").addEventListener("pointerdown", onCanvasPointerDown);
+  const svg = $("#canvas");
+  svg.addEventListener("pointerdown", onCanvasPointerDown);
+  // Wheel zooms around the cursor — `passive: false` so we can
+  // preventDefault and stop the page from scrolling.
+  svg.addEventListener("wheel", wheelZoom, { passive: false });
 }
 
 let rubberBand = /** @type {SVGRectElement|null} */ (null);
 let rubberStart = /** @type {{x:number,y:number}|null} */ (null);
+// Live state for a cable-endpoint replug drag. Captured at pointerdown
+// on a .cable-handle, used by renderCanvas to anchor the dragged end
+// at the cursor; cleared on pointerup (commit or cancel).
+let cableReplug = /** @type {{cableID: number, end: "from"|"to", x: number, y: number}|null} */ (null);
 
 function onCanvasPointerDown(e) {
+  // Pan gestures win over every tool. Middle-click and Space+drag both
+  // route here regardless of project state — m can pan an empty canvas
+  // without selecting a project first.
+  if (e.button === 1 || state.spaceHeld) {
+    startPan(e);
+    return;
+  }
   if (!state.active) return;
 
   const p = svgPoint(e);
@@ -1761,6 +1958,153 @@ async function relayoutEdge(deviceID, edge) {
   }
 }
 
+// Re-space ports on every edge of `deviceID`. Used after the device's
+// width / height change so all four edges recompute the i/(N+1)
+// positions against the new dimensions.
+async function relayoutAllEdges(deviceID) {
+  await Promise.all([
+    relayoutEdge(deviceID, "top"),
+    relayoutEdge(deviceID, "right"),
+    relayoutEdge(deviceID, "bottom"),
+    relayoutEdge(deviceID, "left"),
+  ]);
+}
+
+// Bottom-right resize handle gesture. Updates width / height in local
+// state on each move (renderCanvas redraws the rect + ports), clamps to
+// a minimum so the device can't collapse, then PATCHes the new size on
+// pointerup and re-spaces every edge's ports.
+function startResize(e, deviceID) {
+  if (!state.active) return;
+  // Hard-stop so the rect's pointerdown doesn't also fire startDrag.
+  e.stopPropagation();
+  e.preventDefault();
+  const d = state.devices.find((x) => x.id === deviceID);
+  if (!d) return;
+  const startWidth = d.width, startHeight = d.height;
+  const startWorld = svgPoint(e);
+  const svg = /** @type {SVGSVGElement} */ ($("#canvas"));
+  try { svg.setPointerCapture(e.pointerId); } catch {}
+  const MIN_W = 60, MIN_H = 30;
+  const onMove = (ev) => {
+    const p = svgPoint(ev);
+    d.width  = Math.max(MIN_W, startWidth  + (p.x - startWorld.x));
+    d.height = Math.max(MIN_H, startHeight + (p.y - startWorld.y));
+    renderCanvas();
+  };
+  const onUp = async (ev) => {
+    svg.removeEventListener("pointermove", onMove);
+    svg.removeEventListener("pointerup",   onUp);
+    svg.removeEventListener("pointercancel", onUp);
+    try { svg.releasePointerCapture(ev.pointerId); } catch {}
+    if (d.width === startWidth && d.height === startHeight) return;
+    try {
+      const updated = await patchDevice(state.active.id, d.id, {
+        width: d.width, height: d.height,
+      });
+      Object.assign(d, updated);
+      // Ports may have been on an edge that just moved (right or bottom)
+      // — re-distribute everything to the new dims.
+      await relayoutAllEdges(d.id);
+      renderCanvas();
+    } catch (err) {
+      alert(`Resize failed: ${err.message}`);
+    }
+  };
+  svg.addEventListener("pointermove", onMove);
+  svg.addEventListener("pointerup",   onUp);
+  svg.addEventListener("pointercancel", onUp);
+}
+
+// Find the topmost canvas element under (clientX, clientY) that maps to
+// a cable endpoint target. Returns { kind, id } for port / device / IO,
+// or null when m dropped on empty canvas.
+function hitTestEndpointTarget(clientX, clientY) {
+  // elementsFromPoint walks the z-order so we can skip the dragged
+  // cable handle itself (it sits at the top while pointer-captured).
+  const els = document.elementsFromPoint(clientX, clientY);
+  for (const el of els) {
+    if (!(el instanceof Element)) continue;
+    if (el.classList?.contains("cable-handle")) continue; // skip self
+    const portID = el.getAttribute && el.getAttribute("data-port-id");
+    if (portID) return { kind: "port", id: Number(portID) };
+    const devEl = el.closest && el.closest("[data-device-id]");
+    if (devEl) return { kind: "device", id: Number(devEl.getAttribute("data-device-id")) };
+    const ioEl = el.closest && el.closest("[data-io-id]");
+    if (ioEl) return { kind: "io", id: Number(ioEl.getAttribute("data-io-id")) };
+  }
+  return null;
+}
+
+// Endpoint-drag gesture: pointerdown on a .cable-handle starts a replug.
+// While held, renderCanvas anchors the affected end at the cursor.
+// On pointerup, hit-test the cursor to find the drop target:
+//   - port  → PATCH {from|to: {port_id}}
+//   - device → PATCH {from|to: {device_id}}
+//   - IO    → PATCH {from|to: {io_id}}
+//   - empty → cancel (revert)
+// When the cable was auto, a successful drop also sends promote=true so
+// the server flips it to manual (m took control). Cancel leaves auto alone.
+function startCableReplug(e, cableID, end) {
+  if (!state.active) return;
+  e.stopPropagation();
+  e.preventDefault();
+  const c = state.cables.find((x) => x.id === cableID);
+  if (!c) return;
+  const svg = /** @type {SVGSVGElement} */ ($("#canvas"));
+  try { svg.setPointerCapture(e.pointerId); } catch {}
+  $(".canvas-wrap").classList.add("replugging");
+  const startWorld = svgPoint(e);
+  cableReplug = { cableID, end, x: startWorld.x, y: startWorld.y };
+  renderCanvas();
+
+  const onMove = (ev) => {
+    const p = svgPoint(ev);
+    cableReplug = { cableID, end, x: p.x, y: p.y };
+    renderCanvas();
+  };
+  const onUp = async (ev) => {
+    svg.removeEventListener("pointermove", onMove);
+    svg.removeEventListener("pointerup",   onUp);
+    svg.removeEventListener("pointercancel", onUp);
+    try { svg.releasePointerCapture(ev.pointerId); } catch {}
+    $(".canvas-wrap").classList.remove("replugging");
+    const drop = hitTestEndpointTarget(ev.clientX, ev.clientY);
+    // Clear the preview first so renderCanvas falls back to resolved anchors.
+    cableReplug = null;
+    if (!drop) {
+      renderCanvas();
+      return; // cancel
+    }
+    // Build the patch for the affected endpoint.
+    const ep =
+      drop.kind === "port"   ? { port_id:   drop.id } :
+      drop.kind === "device" ? { device_id: drop.id } :
+      drop.kind === "io"     ? { io_id:     drop.id } : null;
+    if (!ep) { renderCanvas(); return; }
+    const body = {};
+    if (end === "from") body.from = ep; else body.to = ep;
+    if (c.auto) body.promote = true;
+    // If m dropped on the same endpoint we already had, treat as cancel.
+    const sameAsBefore =
+      (drop.kind === "port"   && ((end === "from" ? c.from_port_id   : c.to_port_id)   === drop.id)) ||
+      (drop.kind === "device" && ((end === "from" ? c.from_device_id : c.to_device_id) === drop.id)) ||
+      (drop.kind === "io"     && ((end === "from" ? c.from_io_id     : c.to_io_id)     === drop.id));
+    if (sameAsBefore) { renderCanvas(); return; }
+    try {
+      const updated = await patchCable(state.active.id, c.id, body);
+      Object.assign(c, updated);
+      render();
+    } catch (err) {
+      alert(`Replug failed: ${err.message}`);
+      renderCanvas();
+    }
+  };
+  svg.addEventListener("pointermove", onMove);
+  svg.addEventListener("pointerup",   onUp);
+  svg.addEventListener("pointercancel", onUp);
+}
+
 /** Port-click flow:
  *  - A cable draw is in progress (cableDrawFromPortID set):
  *     same port → cancel; another port → finish the cable.
@@ -2505,6 +2849,7 @@ function switchAdminTab(name) {
     case "cable-types":      return renderAdminCableTypes(body);
     case "device-types":     return renderAdminDeviceTypes(body);
     case "setup-templates":  return renderAdminSetupTemplates(body);
+    case "requirements":     return renderAdminRequirements(body);
   }
 }
 
@@ -2793,6 +3138,79 @@ function renderAdminSetupTemplates(body) {
   `;
 }
 
+// ---------- admin: requirements (all) ---------- //
+
+function renderAdminRequirements(body) {
+  if (!state.active) {
+    body.innerHTML = `<p class="admin-empty">Pick a project to see its requirements.</p>`;
+    return;
+  }
+  const deviceById   = new Map(state.devices.map((d) => [d.id, d]));
+  const cableTypeBy  = new Map(state.cableTypes.map((t) => [t.id, t]));
+  const rows = state.requirements.map((r) => {
+    const a = deviceById.get(r.from_device_id);
+    const b = deviceById.get(r.to_device_id);
+    const ct = r.preferred_cable_type_id != null ? cableTypeBy.get(r.preferred_cable_type_id) : null;
+    return `
+      <div class="admin-row" data-req-id="${r.id}">
+        <div class="admin-row-title">
+          <span>
+            ${escapeHtml(a?.name ?? "?")} ↔ ${escapeHtml(b?.name ?? "?")}
+            <span class="muted" style="font-weight:normal;font-size:11px;"> · ${escapeHtml(ct?.name ?? "solver picks")}</span>
+            <span class="locked-badge" style="margin-left:6px;">${r.must_connect ? "must" : "nice"}</span>
+          </span>
+          <span style="color: var(--text-muted); font-size: 11px;">#${r.id}</span>
+        </div>
+        ${r.notes ? `<p class="muted" style="font-size:12px;margin:0;">${escapeHtml(r.notes)}</p>` : ""}
+        <div class="actions">
+          <button type="button" class="btn btn-tiny adm-edit">Edit</button>
+          <button type="button" class="btn btn-danger btn-tiny adm-delete">Delete</button>
+        </div>
+      </div>
+    `;
+  }).join("") || `<p class="admin-empty">No requirements yet.</p>`;
+  body.innerHTML = `
+    <p class="muted" style="font-size:12px;margin:0 0 12px 0;">
+      Requirements are the solver's input — "device A must connect to device B".
+      Add new ones from the per-device inspector (more contextual); manage them here.
+    </p>
+    ${rows}
+    <div class="admin-add-row">
+      <button type="button" class="btn btn-tiny" id="adm-req-new"
+              ${state.devices.length < 2 ? "disabled" : ""}>+ Add requirement</button>
+      ${state.devices.length < 2
+        ? '<span class="muted" style="margin-left:8px;">(needs ≥ 2 devices)</span>'
+        : ""}
+    </div>
+  `;
+  for (const row of body.querySelectorAll(".admin-row[data-req-id]")) {
+    const rid = Number(row.getAttribute("data-req-id"));
+    row.querySelector(".adm-edit").addEventListener("click", () => {
+      const r = state.requirements.find((x) => x.id === rid);
+      if (!r) return;
+      const dlg = $("#modal-admin");
+      dlg.close();
+      openRequirementModal(r);
+    });
+    row.querySelector(".adm-delete").addEventListener("click", async () => {
+      if (!confirm("Delete this requirement?")) return;
+      try {
+        await deleteRequirement(state.active.id, rid);
+        state.requirements = state.requirements.filter((r) => r.id !== rid);
+        switchAdminTab("requirements");
+        render();
+      } catch (e) { alert(`Delete failed: ${e.message}`); }
+    });
+  }
+  const newBtn = body.querySelector("#adm-req-new");
+  if (newBtn) {
+    newBtn.addEventListener("click", () => {
+      $("#modal-admin").close();
+      openRequirementModal(null);
+    });
+  }
+}
+
 // ---------- boot ---------- //
 
 async function boot() {
@@ -2809,14 +3227,10 @@ async function boot() {
   $("#btn-add-type").addEventListener("click", () => openCableTypeModal(null));
   $("#btn-delete-project").addEventListener("click", openDeleteProjectModal);
   $("#btn-admin").addEventListener("click", openAdminModal);
-  $("#btn-add-requirement").addEventListener("click", () => {
-    if (!state.active) { alert("Pick a project first"); return; }
-    if (state.devices.length < 2) { alert("Need at least two devices to add a requirement."); return; }
-    openRequirementModal(null);
-  });
   $("#btn-solve").addEventListener("click", openSolveModal);
   $("#btn-apply-template").addEventListener("click", openApplyTemplateModal);
   $("#btn-export").addEventListener("click", exportCurrentProject);
+  $("#btn-fit").addEventListener("click", fitToContent);
 
   $("#project-select").addEventListener("change", (e) => {
     const v = /** @type {HTMLSelectElement} */ (e.target).value;
@@ -2824,6 +3238,9 @@ async function boot() {
   });
 
   bindTools();
+  viewFromURL();
+  applyViewBox();
+  updateZoomUI();
 
   try {
     [state.projects, state.cableTypes] = await Promise.all([

web/static/style.css

@@ -192,6 +192,18 @@ body {
 .device-rect.selected { stroke-width: 3; }
 .device-rect:hover { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); }
 
+/* Bottom-right resize affordance per device. Subtle grey by default,
+   stronger on hover so m can find it without it dominating the rect. */
+.device-resize-handle {
+  fill: rgba(120, 120, 120, 0.35);
+  stroke: rgba(60, 60, 60, 0.45);
+  stroke-width: 1;
+  cursor: nwse-resize;
+}
+.device-resize-handle:hover {
+  fill: rgba(60, 60, 60, 0.65);
+}
+
 .device-label {
   fill: var(--text);
   font-size: 12px;
@@ -235,6 +247,27 @@ body {
   filter: drop-shadow(0 0 4px var(--accent));
 }
 
+/* Zoom cluster — % + Fit button next to Admin. */
+.zoom-cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
+#zoom-pct {
+  font-size: 12px;
+  color: var(--text-muted);
+  min-width: 38px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.canvas-wrap.panning #canvas,
+.canvas-wrap.panning #canvas * { cursor: grabbing !important; }
+.canvas-wrap.space-pan-ready #canvas,
+.canvas-wrap.space-pan-ready #canvas * { cursor: grab !important; }
+
 /* Header toast — slice 8 export feedback */
 .toast {
   display: inline-block;
@@ -374,6 +407,17 @@ body {
 .cable-line:hover { stroke-width: 4; }
 .cable-line.selected { stroke-width: 4; }
 
+/* Endpoint handles — only rendered for the currently-selected cable.
+   Grab cursor on idle, grabbing while dragging (.replugging on root). */
+.cable-handle {
+  cursor: grab;
+  stroke-width: 2;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
+}
+.cable-handle:hover { stroke-width: 3; }
+.canvas-wrap.replugging .cable-handle,
+.canvas-wrap.replugging #canvas * { cursor: grabbing !important; }
+
 /* Solve preview-diff modal */
 .modal-wide { width: 560px; }