Skip to content

ui(canvas): Add node cards, launchers, inspector sections, client issues - #15

Open
SCcagg5 wants to merge 8 commits into
stack/14-ui09from
stack/15-ui10
Open

SCcagg5 wants to merge 8 commits into
stack/14-ui09from
stack/15-ui10

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 15/31. Base branch: stack/14-ui09. Review and merge in order; this PR builds on the previous one.
Size: 44 files changed, 8021 insertions(+), 100 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 node cards of the canvas (step, router, agent, tool, handler, ghost), the launcher node, edge and panel, and the inspector sections and fields. It also adds client-side issue checks and a profiles hook. It adds 36 new files and changes 8 existing ones: the webhook cards now read profiles through the new hook.

Why

The canvas needs cards to show steps, and the inspector needs forms to edit them. This PR follows PR 14 (flow, export, upstream data) and uses the layout of PR 13. PR 16 puts the cards, sections and the editor together.

Changes

  • Nodes (canvas/nodes): StepNode.tsx, RouterNode.tsx, AgentNode.tsx, ToolNode.tsx, HandlerNode.tsx, GhostNode.tsx, NodeParts.tsx (shared parts), index.ts.
  • Launchers: LauncherNode.tsx, LauncherEdge.tsx, LauncherPanel.tsx.
  • Inspector sections: Action.tsx, General.tsx, RunEditor.tsx, StepYaml.tsx, flow/Outputs.tsx, Preconditions.tsx, Timing.tsx; fields ActionPicker.tsx, TextField.tsx, MonacoField.tsx, MonacoFieldEditor.tsx, catalogSearch.ts, stepYamlText.ts.
  • doc/clientIssues.ts (issue checks in the browser); references/DeclaredOutputsPanel.tsx; hooks/useStepElapsed.ts.
  • Webhooks: new dags/hooks/useProfiles.ts; WebhookProfileSelectionCard.tsx uses it in place of its own state; WebhookTab.tsx gets an onSecretVisibleChange prop; small edits in WebhookPublicURLCard.tsx and WebhookProfileTokensCard.tsx.
  • 36 files are new; 8 are modified (4 webhook components and 4 webhook tests).

How to review

  1. canvas/nodes/NodeParts.tsx, then StepNode.tsx.
  2. launchers/LauncherPanel.tsx.
  3. inspector/sections/Action.tsx and RunEditor.tsx.
  4. doc/clientIssues.ts.
  5. The webhook changes and useProfiles.ts.

Most attention: NodeParts.tsx (status, counts and toolbars shared by all cards), and the webhook change, which is the only edit of existing behaviour.

Tests

  • canvas/__tests__/nodes.test.tsx (about 2100 lines), stalks.test.tsx.
  • doc/__tests__/clientIssues.test.ts.
  • inspector/__tests__/MonacoField.test.tsx, MonacoFieldLoad.test.tsx (with monacoMock.tsx).
  • Webhook tests: WebhookTab.test.tsx, WebhookProfileSelectionCard.test.tsx, WebhookProfileTokensCard.test.tsx, WebhookPublicURLCard.test.tsx.

Screenshots

The cards are used by PR 16 and later PRs; the screenshots show them in the final UI.

Step cards, Manual and Cron launchers
A selected step card with its toolbar

This was referenced Oct 28, 2026
SCcagg5 and others added 8 commits October 31, 2026 19:40
…ture (dagucloud#3394)

* UI: visual-editor/run, visual-editor/references, visual-editor/canvas
* Keep step hashes complete and fix run views
* Cover the placeholder route name in tests
* Check the with block of run steps in the editor
* Fix step cache hashes, captures and run views
The card reset its Copied state with a bare timeout that outlived the
card. The new copy test made the timer fire after the test environment
was gone, which failed the run. Use useCopyFeedback, which clears its
timer.
The tab reports a shown secret from an effect, which can run after
the secret text is on screen. Wait for the report instead of checking
it right after the text appears.
The delivery link of the public webhook card now opens the workflow by
its file name: the /dags/{fileName} page cannot find a DAG whose name
differs from its file.

The router node lets a hover reach its label, expression, badges and
route patterns, so their titles show. The overlay stays click-through
over the handles.

A Monaco field reads readOnly when it blurs, not at mount, so a field
that becomes read-only does not commit its draft.

A command step that becomes an action loses its command and script
keys as well as run. The server rejects a step with both.

The Cron panel refuses a row edit to an expression of another row, as
Add does. Remove schedule shows only with start expressions and removes
only those, since the other entries are edited in YAML.
The Cron launcher panel listed the next runs of an expression in the
time zone of the browser, while the scheduler fires in its own zone.
A user whose browser is in another zone saw wrong times. The panel now
reads the expression in the configured server time zone, and a test
pins the preview for a zone that differs from the browser's.
Enter that confirms an input method's text also committed the field:
the action search picked an entry, a step name or other text field
committed half-typed text, and the output and cron inputs added or
saved an entry. Escape that cancels a composition also reset the
draft. Skip these keys while the native event is composing, as the
other editor inputs already do.

WebhookTab now reports the secret as gone when it unmounts while one
shows, so the host guard does not keep a stale risk and prompt about
a secret that is no longer on screen. The cards' own visibility
callback had no caller and duplicated the tab's report, so it goes.
Several editor edits produced YAML that the server rejects, and the
client checks reported errors for valid files.

- The shell select wrote a top-level shell next to run; run takes its
  shell in with.shell. A script-only step showed an empty command and
  an edit added run next to script.
- Turning a command step with shell settings in with into an action
  kept that with and skipped the action template. It now asks before
  it replaces with, as an action change does.
- The YAML of a map-form step or a handler included its key, so Apply
  nested the step under itself. A step with an alias to an anchor
  elsewhere in the DAG threw on Apply.
- Removing the last output left outputs: [], and an eval precondition
  showed as an empty editable condition that added condition next to
  eval.
- The client checks flagged generated names other than cmd_N, step
  references in YAML comments and in foreach bodies, and the same name
  in two handlers, which the server takes from the event.
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