Skip to content

ui(editor): Add edit session, YAML format and quick fixes, run actions, tab strip - #11

Open
SCcagg5 wants to merge 5 commits into
stack/10-ui05from
stack/11-ui06
Open

SCcagg5 wants to merge 5 commits into
stack/10-ui05from
stack/11-ui06

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 11/31. Base branch: stack/10-ui05. Review and merge in order; this PR builds on the previous one.
Size: 41 files changed, 7882 insertions(+).
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 base logic of the editor that later PRs build on. It gives a YAML format and compare module, quick fixes, clipboard operations, an edit session hook, run request helpers, canvas types and bundles, and the node details frame (NDV). It adds 41 new files and changes no existing file.

Why

The canvas, the inspector and the workspace all need one model of the DAG text and one way to start a run. This PR gives them. It follows PR 10 (doc model and canvas base) and comes before PR 12 (canvas graph, YAML tokenizer, run bar) and PR 13 to PR 16, which use these modules. Most items have no page yet.

Changes

  • Shared UI: components/ui/tab-strip.tsx (tab strip), components/ui/repeat-badge.tsx (badge for the repeat policy of a step).
  • Node details frame: dag-editor/NodeDetailsFrame.tsx (frame for the YAML and form of a step) and dag-editor/stepOrder.ts (step names in execution order, handlers last).
  • Doc layer (visual-editor/doc): format.ts (semantic compare and canonical format of YAML), quickFixes.ts (one-click fixes as minimal text edits), ops/clipboard.ts (copy, cut and paste of steps), issueMessages.ts.
  • Edit state: useEditSession.ts, useDocModel.ts, stepBaseline.ts (rename or edit against the saved text), editMessages.ts.
  • Canvas support (visual-editor/canvas): types.ts, bundles.ts (edge bundling), contextMenuItems.ts, icons.ts, useCanvasDirection.ts (one shared layout direction), EmptyCanvasTile.tsx, agentRunContext.ts.
  • Run helpers (visual-editor/run): runRequests.ts, runOverlay.ts, useEditorRunActions.ts.
  • Inspector and references: inspector/actionText.ts, paramsForm.ts, types.ts; references/candidates.ts; launchers/LauncherData.tsx.
  • 41 files are new; 0 are modified.

How to review

  1. doc/format.ts and doc/quickFixes.ts, with their tests.
  2. useEditSession.ts and stepBaseline.ts.
  3. run/runRequests.ts, runOverlay.ts and useEditorRunActions.ts.
  4. canvas/bundles.ts and contextMenuItems.ts.
  5. NodeDetailsFrame.tsx and tab-strip.tsx.

Most attention: the semantic compare in format.ts (a wrong "same text" result hides real changes), and the geometry rules in NodeDetailsFrame.tsx.

Tests

  • doc/__tests__/format.test.ts, quickFixes.test.ts: compare, canonical format and fix edits.
  • canvas/__tests__/contextMenuItems.test.ts, icons.test.ts, neighbours.test.ts, useCanvasDirection.test.ts.
  • run/__tests__/runRequests.test.ts, useEditorRunActions.test.ts.
  • dag-editor/__tests__/NodeDetailsFrame.geometry.test.tsx; components/ui/__tests__/tab-strip.test.tsx.
  • visual-editor/__tests__/stepBaseline.test.ts; inspector/__tests__/actionText.test.ts (with flowHarness.tsx); hooks/__tests__/useContentEditor.semantic.test.ts.

Screenshots

These components are used by PR 16 and later PRs; the screenshot shows the node details frame in the final UI.

Full-screen step view built on NodeDetailsFrame

This was referenced Oct 28, 2026
SCcagg5 and others added 5 commits October 31, 2026 19:38
dagucloud#3390)

* UI: visual-editor/doc, visual-editor/canvas, visual-editor/run
* Fix schedule, name and reuse edge cases
* Read quoted workflow defaults as plain params
* Fix schedule, chain diff and step reference edits
formatYaml and formatStepRange threw "Unresolved alias" when the
canonical key order put an alias before its anchor, which breaks the
page that calls them during render. Both now leave such a text alone.
formatYaml also cut the kept line ends of a `|+` block scalar at the end
of the text; formatStepRange cut them at the end of a step and blanked
lines of spaces inside block scalars.

isSameYaml compared comments as one flat list, so a comment moved to
another node was no change and the edit could not be saved. Comments
are now keyed by the path of the node that holds them, with the head
and tail of the document normalized. Integers beyond 2^53 are read
exactly, so an edit of one counts as a change and the formatter keeps
its value.

Duplicating a handler pasted it as a root step that runs on every run;
it is refused now. The node view orders steps by inferred dependencies
too, the id quick fix no longer takes another step's id, the saved
baseline of a step matches by id and name before position, and the
error tree of the params form no longer writes to Object.prototype.
An action namespace or name segment such as `constructor` or
`__proto__` found an inherited member of the icon and acronym tables:
the canvas got a function that is no icon, and the action title showed
the source of Object. Only own keys of the tables count now.

splitWithValue wrote a shown field named `__proto__` into a plain
object, which set its prototype and lost the value. The form data has
no prototype now, as the error tree of the form already has.

In the narrow sheet, the Parameters and YAML tabs point at the center
pane, which had no tabpanel role. The pane is now their tab panel and
takes its name from the selected tab.
isSameYaml threw on an alias without its anchor. The text parses, but
toJS has no value for the alias, so the dirty check of the editor
crashed. Such a text is now compared as text.

Format step put a step inside a flow collection, such as
`steps: [{name: a, run: x}]`, in block style between the brackets,
which is not valid YAML. A step in a flow collection is now left as it
is.

Copy and paste read integers as floats, so 9007199254740993 became
9007199254740992. The server reads them exactly, and the clipboard now
does too.

Paste compared names and ids as written, but the server trims them. A
copy of a step named "task " kept that name, and the server refused
two steps named task. The comparison now trims.

A step run that reuses the outputs of a run whose id starts with '_'
or '-' failed with 400, because the server refuses such a label value.
That run gets no outputs-from label; the request still names it.
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