Skip to content

ui(lib): add shared UI kit, status helpers and right-panel shell - #6

Open
SCcagg5 wants to merge 8 commits into
stack/05-uifixfrom
stack/06-ui01
Open

SCcagg5 wants to merge 8 commits into
stack/05-uifixfrom
stack/06-ui01

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 6/31. Base branch: stack/05-uifix. Review and merge in order; this PR builds on the previous one.
Size: 71 files changed, 5983 insertions(+), 1152 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 base pieces that the workspace pages use: small UI components, status and time helpers, layout contexts, and a shell for right-side step panels. It also reworks the run header and the step drawer onto these pieces.

Why

Later PRs build the canvas, the Activity panel and the step view. They all need the same status colours, one shared clock, one right panel at a time, and one panel shell. PR 7 and PR 9 build on this PR.

Changes

  • 71 files: 40 new, 30 modified, 1 deleted.
  • UI components (components/ui): new status-icon, icon-button, copy-button, kbd, spinner, retry-count, compact-count, and repeat-summary.ts (one repeat policy shape for YAML and API). Changed: badge, dialog (raised layers), tooltip, status-chip, relative-time, matrix-text, ticker, refresh-button.
  • Lib: statusPalette, runDisplayStatus, formatStepSpan, formatCompactCount, hatchPattern, shortRunId, pageVisibility (pauses CSS animation in a hidden tab), monaco-yaml, syntax-colors. Changed: dagRunTiming, clipboard, utils, styles/global.css.
  • Hooks and contexts: useClock (one timer for each period, paused when the tab is hidden), RightPanelContext (one right panel at a time), LayoutChromeContext (full bleed, hidden breadcrumb).
  • Step panels: new PanelShell and StepSideDrawer; StepDetailsDrawer is slimmed down to use them; small changes in StepDetails and the foreach views.
  • Run header: RunMetaLine and DAGRunHeader are reworked; dagRunUrls.ts gains buildDAGPageURL, legacyRunPageRedirectURL, buildRunningTaskURL.
  • Test tools: testing/importGraph.ts and testing/jsxLiterals.ts.
  • The obsolete useExactDAGRuns.test.tsx is deleted.

How to review

  1. lib/statusPalette.ts and lib/runDisplayStatus.ts.
  2. hooks/useClock.ts and contexts/RightPanelContext.tsx.
  3. PanelShell.tsx and StepSideDrawer.tsx.
  4. RunMetaLine.tsx and DAGRunHeader.tsx.
  5. The remaining components.

Most attention: useClock (timer start and stop, hidden-tab catch-up), the RightPanelContext claim rules, and the RunMetaLine rewrite, which is the largest change to existing code.

Tests

  • New: badge, copy-button, icon-button, kbd, status-icon, repeat-summary, RightPanelContext, useClock, formatCompactCount, formatStepSpan, pageVisibility, runDisplayStatus, statusPalette, and testing/__tests__/importGraph.
  • Extended: status-chip, RunMetaLine, DAGRunHeader, dagRunUrls, dagRunTiming, PushBackHistory, RunProgressModal.
  • Shared test helpers: realSchema.ts, leafStubs.tsx, and a few lines in test/setup.ts.

Screenshots

The kit is used in all workspace views. The run header appears in this close-up of the final UI.

Workflow bar with name, run navigation, status, progress, time and run id

This was referenced Oct 28, 2026
SCcagg5 and others added 8 commits October 31, 2026 19:36
Run links now name a run on the workflow page with ?run. That page
shows runs only later in this stack, so until then it sends such a
link to the run page, as it already does for ?dagRunId. A link whose
DAG name has no file of that name names the DAG of the run.
Run links now name the run on the workflow page, and absolute times
drop the UTC offset. Update the tests that pinned the old forms.
A sub-run copy link opens the root run, so its label says so; a root
run link uses its workflow file. A modified click on the definition
link opens a new tab. Retry and compact counts expose their names to
assistive technology, and the copy button test compares the classes.
The modal step drawer focuses itself on open. Shift+Tab from there
left the dialog for the page behind it; it now wraps to the last
control. The modal drawer also took the narrow-page cap of the panels
beside the page, so at 1024 px it was 461 px wide and dragging it
changed nothing; it now keeps its stored width.

CopyButton left an unhandled rejection when its text function failed.
That case now counts as a failed copy, and the button stays idle.

Add the missing "Show in workflow" label to the static catalogs.
The braille spinner of a running or retrying step kept changing its
frame every 80 ms when the user asked for reduced motion, while the
glow of the running label already stayed still. Both now read one
shared reduced-motion hook, and the spinner stays on its first frame.

continuousRunCount read the count of the first continuous step, even
when that step had stopped and a later one kept the run healthy. It
now reads the running continuous step and falls back to the first one
when none runs.
"View workflow definition" and "Show in workflow" were plain anchors
whose href lacked the router basename. A Ctrl or Cmd click followed
that href, so with a base path such as /dagu it opened /dags/... and
left the mounted app. Router links put the base path in the href and
still leave modified clicks to the browser.
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