web: dock editor (mock-only) — grid docking per interaction concept v1 - #466
Open
bennotk wants to merge 5 commits into
Open
web: dock editor (mock-only) — grid docking per interaction concept v1#466bennotk wants to merge 5 commits into
bennotk wants to merge 5 commits into
Conversation
Collaborator
Author
|
Same infrastructure-level CI failure as documented on #462: all jobs fail in seconds with no runner assigned and no logs — nothing to fix in this branch (lint, 42/42 tests, and the Playwright flow are green locally). Until Actions runs again, the editor is reachable locally via Generated by Claude Code |
bennotk
changed the title
Editor page at /graphs.html (served from server/, deliberately not data/ — it must not ship to devices while LittleFS is nearly full, see #377): column/row board, palette with the M2 parity node set, place/move/select, port-to-port edges with SVG rendering, notes, thin cfg panels, save/load of schema-v1 documents. Mock gains in-memory GET/PUT/DELETE /api/graphs with two seeded example graphs and structural stub validation; authoritative validation and execution arrive with the M2 engine. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh
Replaces the SVG-wire shell with the concept's core loop (P0 + multi rows): design tokens, stones on a fixed grid with typed pins (shape = type), no drawn wires — connections arise from adjacency (neighboring columns, row distance <= 1, the only line segments are the 16px +-1 bows), joints for defined type conversions, chips with editable defaults on free inputs, repeatable connectors that grow extra rows (multi-row inputs with a merge-rule chip, repeatable outputs as the fan-out mechanism). One pointer-event code path drives stone dragging with per-frame candidate search, snap docking, trash-zone delete, and board panning; the palette is a collapsible bottom bar so the layout stacks vertically on phones. Snapshot undo (50 steps), localStorage draft with debounce, Apply validates and PUTs. The pure grid model (registry, candidate search, edge settling, validation) lives in graphs-core.js, shared by the page, the mock's PUT validation, and node:test unit tests. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh
bennotk
force-pushed
the
claude/issue-464-dock-editor
branch
from
July 25, 2026 10:08
61ef322 to
83bff40
Compare
PreviewURL: https://batterylight-pr-466.blackpond-ef672c92.germanywestcentral.azurecontainerapps.io Hosted on Azure Container Apps — accessible from the internet. |
Collaborator
Author
|
CI is green after rebasing onto the renamed project's Ready to play through: Generated by Claude Code |
Drops the stone/pin/edge/bow wording that had leaked in from the German
interaction concept and settles a single set of words used identically
in schema keys, code, docs and UI — there is no translation layer, so a
second user-facing vocabulary would only be overhead:
stone -> node (graph and node are a matched pair; block would
collide with CSS display:block, 41x in these files)
pin -> port (pin means GPIO pin everywhere else in this project)
edge -> link (nothing is drawn, and connection means a network
connection everywhere else)
bow -> arc
The schema key edges becomes links; nothing ships that format yet, so
this is free now and expensive after M2. Requirement ids PIN-xx become
PORT-xx. The editor gains a one-line hint that flow runs left to right,
with inputs on a node's left edge and outputs on its right. The
vocabulary now has a single definition site: a table at the top of the
rework plan, where the terminology rule already lived.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh
joint described the thing by its shape, not its job; adapter says what it does — convert between two signal types. Also records the two design decisions taken while building the shell, so they are not re-litigated: fan-out runs through instance rows (visible in a node's height), and the current four-entry adapter matrix is an explicitly provisional working set until system concept 5.3 lands. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh
npm run dev does not skip auth when the env vars are absent — it treats that as misconfigured and redirects every request to the login, so the documented flow left the mock server unusable. Point at dev:no-auth and note where the graph editor is served. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rebuilt on top of the initial shell: the editor now implements the interaction concept v1 core loop (P0 plus multi rows, pulled forward on request) instead of SVG wires and click-to-connect.
prefers-reduced-motionrespectedserver/graphs-core.js, shared by the editor page, the mock's PUT validation, and 15 dedicated unit tests; seeds are adjacency-consistent and include a multi-row input and a jointserver/, notdata/): nothing ships to devices while LittleFS is nearly full (Enlarge the littlefs partition — index.html is close to filling it #377); moves into the device UI with M8Deviations noted for the audit: PIN-05 hit areas are 44 px wide but row-height (28 px) tall — a full 44 px square would steal taps from the neighbor row; docked counterpart pins overlap in the gutter and both resolve to the same connection popover. MULTI-01's drag-triggered ghost row is not built yet (rows grow via the sheet). Rails, stretch layout, sections, chain view, zoom, and keyboard movement are P1/P2 follow-ups.
Closes #464
Test plan
npm run lintandnpm test(57/57: 42 mock + 15 grid-model unit tests) pass/validate-uidesktop: seeded graph renders (stones, ±1 bow, multi-row trigger, note), palette drag + adjacency dock, pin popover + disconnect, undo/redo, multi-row grow via sheet, move keeps the dock as a ±1 bow, Apply + reload persistence, trash-zone delete/validate-uimobile (390×844, touch): board full-width with the palette stacked below, tap-place + dock, bottom sheetnpm run dev→/graphs.html, or the PR preview once CI runs again): play through your flows — palette gaps, port shapes, joint matrix, dock feel — and file follow-up issues for whatever doesn't work🤖 Generated with Claude Code
https://claude.ai/code/session_01QCqsYkCrhRHLoWZFuDTWjh