Skip to content

web: dock editor shell (mock-only) — position graph building blocks in the browser #464

Description

@bennotk

Part of LightWitch, pulled forward from M8 (dock editor) — see the rework plan. This builds the editor shell early, entirely against the mock server, so the interaction concept can be played through in the browser before the graph engine (M2) exists. Explicit goal: walk theoretical flows in the editor and derive follow-up issues from whatever doesn't work — the plan itself defers dock details (elbow tolerance, zoom) to "after first editor tests", which this issue makes possible early.

Proposed change

  • Visual editor shell on its own page/bundle (not inside the main index.html — it is close to filling the LittleFS partition, see Enlarge the littlefs partition — index.html is close to filling it #377; the plan already foresees a split for M8):
    • canvas with the concept's column/dock layout
    • place, move, and remove nodes; node positions stored as the schema's editor-only col/row metadata
    • connect nodes (edges as [fromId, outPort, toId, inPort]), disconnect, and free-floating notes
    • save/load full schema v1 JSON documents
  • Fixed minimal palette from the M2 parity node set (button, timer, mesh-receive, compare/range, constant, gate, wait, action, mesh-send, log) with deliberately thin node-config panels — enough to place and connect, not to fully configure
  • Mock server: GET/PUT/DELETE /api/graphs/<name> with in-memory storage (SceneManager-style), plus a couple of seeded example graphs to open and rearrange

Explicitly out of scope

  • No firmware/device code — the real /api/graphs endpoints, validation, and execution arrive with M2; until then nothing runs a saved graph
  • No real schema validation (at most a structural stub in the mock); authoritative validation is the M2 engine's load/validate/compile
  • No full node-config UI — configs stay thin until the M2 node registry fixes their shapes
  • Engine wiring, live state overlay, and the full dock feature set (elbow tolerance, zoom, chain view polish) stay in M8

Acceptance criteria

  • In the browser against the mock: create a graph, place and connect building blocks, save, reload — positions (col/row), edges, and notes round-trip through schema v1 JSON
  • The palette offers the parity node set; a placed node shows its type and ports
  • Editor lives on its own page/bundle; the main dashboard is untouched

Checklist obligations

  • Mock parity: /api/graphs routes + seeded example graphs in server/index.js, with tests
  • /validate-ui on the place → connect → save → reload flow

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions