fix(workflow): room side-panel Flow tab overflows its panel; orphan/clipped edges and nested scroll #1513

Activity

1. Birfy

   added

   bugSomething isn't workingSomething isn't working

   area:uiWeb/desktop UI and copyWeb/desktop UI and copy

   agent-readyMaintainer-approved spec: an agent may take it. Only maintainers set this; never in a templateMaintainer-approved spec: an agent may take it. Only maintainers set this; never in a template

   on Oct 28, 2026
2. Birfy commented on Oct 28, 2026

   

   Birfy

   on Oct 28, 2026

   CollaboratorAuthor

   More actions

   Written-by: Triage

   Triage of #1513: agent-ready. Base read: main = 92a6aabd (2026-10-28T02:16Z).

   Why the three conditions hold

   1. No open design conflict. fix(workflow): the compact flowchart thumbnail cuts off any workflow with 3+ layers (viewBox hard-coded to 28x28) #1464 (compact thumbnail viewBox) is closed; nothing is open that decides this shape. The issue accepts either fit-to-width or the compact layout, so the look is settled. One constraint is already recorded instead of open: docs/subsystems/workflow.md:36,58 makes the drawer flowchart an editing surface ("flowchart drawer (collapsed by default, per-node inspector)" and "the flowchart drawer … all write workflow/graph"), so the fix must keep drag / wire / inspector working in the drawer — it must not quietly make the drawer read-only.
   2. Expected behaviour and scope are clear (below).
   3. Not hold, not a tracking/umbrella issue, not team-via-groups work.

   Defect

   .wf-drawer{width:400px} holds .wf-dr-body{overflow:auto;padding:4px 18px 20px} (≈364px content box), and the Flow tab mounts the same absolute-coordinate canvas the Settings page uses: .wf-canvas{overflow:auto} and .wf-plane{position:relative;width:0}, each node at left: node.x - NODE_W/2 (NODE_W=168), wires in an svg at left:-480px;width:960px.

   Coordinates come from layoutNodes (GAP_X=188, GAP_Y=108) and, after any edit, from the stored graph. A layer of 2 parallel nodes already reaches ±178px off centre; 3 columns reach ±272px, and a dragged node can be anywhere — all beyond the 182px half-width of the drawer. Nothing computes bounds→panel: so nodes, their wires, the .wf-plabel ("Parallel branches · Merge after all pass", white-space:nowrap) and the .wf-term run strip are cut at the panel edge, and the overflowing absolutely positioned nodes inside the scrolling canvas are what creates the inner horizontal scrollbar next to the drawer's own vertical one. The "orphan vertical segment" is the same cause: the visible slice of an edge whose source node is clipped away.

   Repro

   Workflow room → right panel → Flow, on a graph with a parallel layer (delivery demo Planner → Writer → Coder → Reviewer ‖ Tester → Deployer, or the room's own 7-node flow) at prod 55e1c27a: only the first nodes are visible, the rest sit behind an inner horizontal scrollbar, wires enter from clipped edges, branches · Merg… is cut mid-word.

   Acceptance (executable)

   • On a 400px drawer, every node box and both endpoints of every edge are inside the canvas box; no horizontal scrollbar inside the panel (one vertical scroll only).
   • Every edge leaves its source node's bottom anchor and lands on its target's top anchor; no detached vertical segment.
   • The parallel-branch label and the run title strip wrap/ellipsize inside the width instead of being cut mid-word.
   • The drawer stays editable: drag, wire, reconnect and the inspector commit the same world coordinates as today (pointer deltas divided by the fit scale, no coordinate rewrite in the stored graph).

   Files

   • plugins/workflow/client.js — fit helper next to wirePath / parallelFrameStyle, the Flow plane/wires sizing, drawer canvas CSS; keep the Settings canvas scrolling as it does.
   • plugins/workflow/test/client.test.js — the tests below.
   • docs/subsystems/workflow.md — line 36 / 58 drawer wording, if the fit becomes a named behaviour.
   • changelog.d/1513-workflow-panel-fit.fixed.md.

   Tests, red first

   Write these against 92a6aabd, watch each fail, then implement:

   1. the drawer fits every node and edge inside a 400px panel — export a pure fitPlane(nodes, panelWidth); for the delivery graph assert every node's [x-NODE_W/2, x+NODE_W/2] ⊂ [0,panelWidth] and every parallelFrameStyle(fitted) box inside it. Fails today: no helper, raw ±188 coordinates.
   2. fitted wire endpoints land on node anchors — for each edge, wirePath(fit(from), fit(to)) starts at (from.x, from.y+NODE_WIRE_OUT) and ends at (to.x, to.y) in fitted space, and stays inside the plane height (loop edge included). Fails today: endpoints are world coordinates outside the panel.
   3. Source/CSS assertion beside the existing one at client.test.js:625 — the drawer canvas has no horizontal overflow (e.g. .wf-canvas-narrow{overflow:hidden} / overflow-y:auto), while .wf-dr-body keeps its single vertical scroll. Fails today: .wf-canvas{…overflow:auto}.
   4. a narrow panel does not cut labels mid-word — .wf-plabel no longer white-space:nowrap (wrap or max-width + ellipsis), same for the drawer .wf-term. Fails today.
   5. A mount test: opening the drawer's Flow tab gives the canvas its narrow variant (class/prop), while the Settings canvas does not. Fails today.

   Risk

   T2 — plugins/workflow/client.js is plugin code no risk-rules.json rule names (the T3 list covers plugins/social/** and core/src/shared/**; an unnamed path is never silently T0/T1), no T3 diffPatterns hit, no package.json / lockfile. T0/T1 would need proof the change is pure copy, which a layout/coordinate change is not.

   Owner: Dev · Reviewer: Reviewer — the claim, branch and PR belong to Dev, not to this triage step.
3. HugoXK commented on Oct 28, 2026

   

   HugoXK

   on Oct 28, 2026

   Contributor

   More actions

   Claim

   Written-by: FlyBot Lead
   Claimed-by: FlyBot Lead
   Claim-Id: 02ce78756f6e4074849a3afa4c57f16b
   Branch: dev/1513-fix-workflow-room-side-panel-flow-tab-ov
   Base: 496ff1d
   At: 2026-10-28T02:46:50Z
4. Birfy commented on Oct 28, 2026

   

   Birfy

   on Oct 28, 2026

   CollaboratorAuthor

   More actions

   Written-by: Dev

   Claimed #1513 — first step: the pure fitPlane helper and its 400px tests.

   Branch: dev/1513-drawer-flow-fit
   Base: 496ff1d2c637ee3f2a55b869a6cb755b91777b41 (main, 2026-10-28T02:2xZ)
   Risk: T2 (plugin client code; no T3 path or diff pattern).
5. Birfy

   self-assigned this

   on Oct 28, 2026
6. Birfy

   added

   agent-workingAn agent has claimed this issue (the claim comment names the branch)An agent has claimed this issue (the claim comment names the branch)

   and removed

   agent-workingAn agent has claimed this issue (the claim comment names the branch)An agent has claimed this issue (the claim comment names the branch)

   on Oct 28, 2026
7. Birfy

   added 3 commits that reference this issue on Oct 28, 2026

   fix(workflow): fit the room side-panel Flow chart to its panel

   ...

   This issue will close once commit cb5dec8 is merged into the 'main' branch.

   cb5dec8

   fix(workflow): fit the room side-panel Flow chart to its panel

   ...

   This issue will close once commit 5111163 is merged into the 'main' branch.

   5111163

   fix(workflow): fit the room Flow tab to its panel

   ...

   This issue will close once commit 74de9c6 is merged into the 'main' branch.

   74de9c6
8. Birfy

   closed this as completedin #1547on Oct 28, 2026
9. github-actions

   removed

   agent-readyMaintainer-approved spec: an agent may take it. Only maintainers set this; never in a templateMaintainer-approved spec: an agent may take it. Only maintainers set this; never in a template

   on Oct 28, 2026
10. HugoXK

    added 3 commits that reference this issue on Oct 28, 2026

    fix(workflow): fit the room side-panel Flow chart to its panel (Think…

    ...

    This issue will close once commit ad976b4 is merged into the 'main' branch.

    ad976b4

    fix(workflow): drawer flowchart lays out from its steps; wires route …

    ...

    This issue will close once commit 2dac2eb is merged into the 'main' branch.

    2dac2eb

    workflow: keep a parallel step's cards apart in the drawer's Edit pla…

    ...

    This issue will close once commit 0312772 is merged into the 'main' branch.

    0312772