Skip to content

ui(canvas): add canvas Flow view, step run panel and workflow panel - #9

Open
SCcagg5 wants to merge 5 commits into
stack/08-ui03from
stack/09-ui04
Open

SCcagg5 wants to merge 5 commits into
stack/08-ui03from
stack/09-ui04

Conversation

@SCcagg5

@SCcagg5 SCcagg5 commented Oct 28, 2026 •

Copy link
Copy Markdown
Owner

Part of a stack of 31 pull requests that depend on each other. They must be reviewed and merged in order: each PR builds on the previous one and its diff only contains its own changes.

All PRs of the stack
# PR
1 specs: Add spec 083 and the samples store
2 ir: Add run state fields for ephemeral runs and reused outputs
3 runtime: Bound continuous steps and carry outputs of selected steps
4 api: Add step samples, events, availability and selected-step runs
5 test(ui): add YAML fixtures for the document model tests
6 ui(lib): add shared UI kit, status helpers and right-panel shell
7 ui(canvas): add canvas engine core, toolbars and editor helpers
8 ui(i18n): add workspace message catalogs, first batch
9 ui(canvas): add canvas Flow view, step run panel and workflow panel
10 ui(editor): add YAML document model, canvas model and run source logic
11 ui(editor): Add edit session, YAML format and quick fixes, run actions, tab strip
12 ui(editor): Add canvas graph model, Add step panel, issues popover, run bar
13 ui(canvas): Add layered layout, dependency edges, status styles, reference picker
14 ui(canvas): Add export, flow builder, upstream data panel, output capture
15 ui(canvas): Add node cards, launchers, inspector sections, client issues
16 ui(editor): Add visual editor, step inspector and YAML file panel
17 ui(lists): Open runs on the workflow page; add tab and schedule helpers
18 ui(workspace): Add workspace URL state, legacy redirects and run list links
19 ui(workspace): Add workspace data layer, run facts and Workflow panel
20 ui(workspace): Add run start controls, visible runs and reuse source
21 ui(workspace): Add data provider, bar identity, continuous panel and step list
22 ui(logs): Add run actions cluster, cached logs and log popout page
23 ui(workspace): Add Activity dock, step run view and workflow page
24 test(workspace): Add integration tests for the workspace shell and step view
25 ui(pages): Retire classic run pages and open runs on the workflow page
26 test(editor): Add integration tests for the editor, inspector and run overlay
27 test(ui): Add repository-wide guard tests and ESLint boundary rules
28 e2e: Add workspace helpers and fixtures, update existing specs
29 e2e: Add workspace specs, part 1 of 2
30 e2e: Add workspace specs, part 2 of 2
31 examples: Add the workspace demo workflows

Stack 9/31. Base branch: stack/08-ui03. Review and merge in order; this PR builds on the previous one.
Size: 47 files changed, 7290 insertions(+), 108 deletions(-).
Checked: Typecheck (tsc) of the whole UI and the unit tests of this PR (Vitest), on top of the previous PR.

Summary

This PR adds the canvas view layer (Flow, Handle, edge parts, overlays), the step run panel with input provenance and output cache, the workflow side panel, and the YAML name and reference operations. It also adds the rest of the message modules and their index.

Why

PR 7 gave the engine its geometry and store. This PR adds the drawing and the pointer handling on top, and the run-related logic for step runs that reuse outputs of earlier runs. The document model comes in PR 10; the pages come later in the stack.

Changes

  • 47 files: 43 new, 4 modified.
  • Engine view (canvas/engine): Flow.tsx (pan, zoom, drag, selection), Handle.tsx, edgeParts.tsx, overlays.tsx (Background, Controls, MiniMap, Panel), index.ts.
  • Step runs (visual-editor/run): StepRunPanel.tsx, inputProvenance.ts (where reused outputs come from: a run or the browser cache), outputCache.ts (references to runs, with step hashes), stepRunInfo.ts. api/useStepOutputs.ts reads stored outputs of a step.
  • Values: references/JsonValue.tsx (pretty JSON with folding and a size limit).
  • Document logic (visual-editor/doc): names.ts (step name and id rules), ops/references.ts (rewrite ${steps.x.outputs.y} references), salvage.ts (read the good steps of a broken file).
  • Workflow panel (dags/components/dag-editor): WorkflowPanel, DocumentSwitcher, workflowLabels; DAGAttributes is reworked; WorkflowDrawer in visual-editor.
  • select.tsx uses the raised layer class from PR 6; AgentSpecOverview has a small change.
  • Messages: messages/index.ts merges the modules from PR 7, PR 8 and PR 9, and 12 more modules (w4n6b to ya1) are added.

How to review

  1. engine/Flow.tsx, then Handle.tsx, edgeParts.tsx.
  2. engine/overlays.tsx.
  3. outputCache.ts, inputProvenance.ts, stepRunInfo.ts.
  4. StepRunPanel.tsx and useStepOutputs.ts.
  5. names.ts, references.ts, salvage.ts.
  6. messages/index.ts.

Most attention: Flow.tsx (pointer drag threshold and event order), the cache rules in outputCache.ts (the browser sends a run name and never a value), and salvage.ts offsets.

Tests

  • StepSideDrawer, WorkflowPanel, DocumentSwitcher, DAGAttributes, dialog-layer.
  • useStepOutputs, JsonValue, inputProvenance, outputCache, stepRunInfo.
  • names, references.

Screenshots

The engine view is used by the workflow page in a later PR. The shots show its result in the final UI.

A run of one step that reuses outputs of an earlier run, with dashed green cards
Workflow graph of a finished run

This was referenced Oct 28, 2026
SCcagg5 and others added 5 commits October 31, 2026 19:37
* UI: workflow-workspace/messages
* Use the right particle in Japanese follow labels
The minimap kept dragging after a cancelled pointer and zoomed through
a passive React wheel handler: line-mode wheels barely moved it, the
host page could scroll under it, and its zoom did not count as a user
move. It now ends the drag on pointercancel and lostpointercapture,
and zooms through a native listener that scales deltaMode as the
canvas does.

The output cache joined the remote node and file name with a colon,
so two scopes could share one storage key; each part is now encoded.

A dagu.input label of kind `constructor` read the prototype of the
kind table, and a reused node with the zero finish time of the server
gave a capture time in year 1. Both now read as unknown.

Step name generation dropped combining marks, and step references
missed the `:start:` slice that the resolver accepts. Long labels and
environment names in the workflow attributes now wrap.
A connect drag that ended in pointercancel ran the drop logic of
pointerup: a nearby handle got a link, and any other spot reported a
drop on empty space, which the canvas answers with the add-step
palette. A cancelled drag now does neither.

The label and environment badges broke words at any character. They
now wrap at word boundaries first and split a word only when it alone
is wider than the panel. break-words would clip such a word instead,
since it does not shrink the badge content.
The step run panel called every skipped step with a finish time reused.
The runner gives each skipped step a finish time, so a step whose
precondition failed showed "Reused from an earlier run". Reuse now comes
from the record of the run, as the other run views read it.

The panel read the outputs of a waiting human task before it completed.
The request key stays the same when the task completes, so the panel
kept "No outputs collected". Outputs are now read once the step settles.

Prettifying JSON indents by depth, so a short, deeply nested value
could grow to billions of characters and freeze or crash the panel. A
value whose prettified text would pass 1 MB now shows as it is.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants