Skip to content

feat(dashboard/workflows): dock the agent panel as a resizable sidebar with a larger prompt editor (#6154 #6155)#6164

Merged
houko merged 2 commits into
mainfrom
feat/workflow-agent-sidebar
Jun 17, 2026
Merged

feat(dashboard/workflows): dock the agent panel as a resizable sidebar with a larger prompt editor (#6154 #6155)#6164
houko merged 2 commits into
mainfrom
feat/workflow-agent-sidebar

Conversation

@houko

@houko houko commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Summary

The workflow canvas editor's agent-config panel (NodeConfigPanel in CanvasPage.tsx — the "右侧智能体弹窗" shown when editing an agent node) was a floating popup pinned to the canvas's top-right corner, overlaying nodes, with a cramped fixed width and a tiny non-resizable prompt textarea.
This reworks it into a docked, resizable sidebar with a larger prompt editor.

Changes

#6154 — dock the panel as a horizontally-resizable sidebar

The panel now renders as a flex sibling of the canvas <main> on the right edge, so the canvas shrinks to make room instead of being overlaid by an absolutely-positioned popup.
A left-edge drag handle resizes the panel horizontally using plain pointer events with pointer capture (no new dependency); during the drag the width updates frame-by-frame in local state and the final value is committed on pointer-up.
The chosen width is clamped to 300–720px and persisted to localStorage through the existing guarded safeStorage wrapper, so it survives reloads and degrades to the default in private-mode / SSR contexts.
Double-clicking the handle resets the width to the 380px default.
motion/react drives the slide-in / slide-out, matching the existing right-docked drawer idiom (slideInRight), wrapped in AnimatePresence so the exit animation plays on close.

#6155 — larger, manually-growable prompt editor

The prompt <textarea> gets a taller default (min-h-32) and is now vertically resizable (resize-y) up to a 28rem cap, with relaxed line height; the wider docked panel also gives it real horizontal room.
The previously hardcoded English Prompt label and its ({{input}} = prev output) hint are moved to i18n.

i18n

New keys canvas.resize_panel, canvas.prompt_label, canvas.prompt_input_hint added to all three locale files (en.json, zh.json, uk.json).
The prompt_input_hint value keeps the literal {{input}} placeholder, mirroring the existing canvas.output_var_hint pattern (i18next leaves it unreplaced when no interpolation value is supplied).

Behavior preserved

All existing NodeConfigPanel functionality is untouched: agent binding, prompt, execution mode (sequential / fan-out / collect / conditional / loop), conditional / loop / retry fields, timeout, output variable, depends_on multi-select, save, and delete.
The panel is still hidden while the run-input dialog is open (same !showRunInput guard), and node selection / deletion still opens / closes it the same way.

Verification

  • pnpm typecheck — 0 errors.
  • pnpm lint — 0 errors; CanvasPage warning count unchanged at 9 (all pre-existing, in untouched code).
  • pnpm test — 794 passed (80 files).
  • pnpm build — succeeds (the >500kB chunk warning is pre-existing and unrelated).
  • pnpm test:i18n-parity — en / zh / uk in parity.

No CanvasPage.test.tsx exists, so no editor test needed updating; WorkflowsPage.test.tsx is unaffected and stays green.

Maintainer notes

  • Width band: min 300px, max 720px, default 380px (AGENT_PANEL_MIN/MAX/DEFAULT_WIDTH in CanvasPage.tsx). localStorage key is canvas.agentPanelWidth.
  • On phones (< sm) the panel spans the full canvas row and the resize handle is hidden — there is no room to dock a fixed column and drag-resize it on a narrow screen. The panel still renders and is fully usable on mobile, it just isn't resizable there.
  • The .secrets.baseline change is mechanical line-number churn from the pre-commit detect-secrets hook (the three new i18n keys pushed existing false-positive "Secret Keyword" label entries in en.json down by three lines); no new flagged entries were introduced.

Closes #6154
Closes #6155

@github-actions github-actions Bot added the size/M 50-249 lines changed label Jun 17, 2026

@houko houko left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mechanical fix pushed (commit 8189122): stripped 9 multi-line comment blocks in CanvasPage.tsx to comply with the "one short line max" rule in CLAUDE.md.


One ambiguous finding for the author to decide:

CanvasPage.tsx — the resize-handle <div> uses role="separator" with aria-orientation="vertical" and aria-label, but the ARIA spec requires an interactive separator to also carry aria-valuenow, aria-valuemin, and aria-valuemax so screen readers can announce and adjust the current size.

Minimal fix:

<div
  role="separator"
  aria-orientation="vertical"
  aria-label={t("canvas.resize_panel")}
  aria-valuenow={effectiveWidth}
  aria-valuemin={AGENT_PANEL_MIN_WIDTH}
  aria-valuemax={AGENT_PANEL_MAX_WIDTH}
  ...
>

Without these attributes the element is technically invalid per ARIA 1.2 §6.4 and will be flagged by axe/Lighthouse.
Not blocking, but worth landing before this ships to a screen-reader user.


Generated by Claude Code

@github-actions github-actions Bot added the has-conflicts PR has merge conflicts that need resolution label Jun 17, 2026
Evan and others added 2 commits June 17, 2026 21:22
…r with a larger prompt editor (#6154 #6155)

The workflow canvas editor's agent-config panel (NodeConfigPanel) was a floating popup pinned to the top-right corner of the canvas, overlaying nodes, with a cramped fixed width and a tiny non-resizable prompt textarea.

On phones (< sm) the panel spans the full canvas row and the resize handle is hidden — there's no room to dock a fixed column and drag-resize it.

The baseline line-number shifts are mechanical churn from the pre-commit hook (the new i18n keys pushed existing false-positive label entries in en.json down by three lines); no new flagged entries.

Verification:
- pnpm typecheck — 0 errors
- pnpm lint — 0 errors, no new warnings (CanvasPage warning count unchanged at 9, all pre-existing)
- pnpm test — 794 passed
- pnpm build — succeeds
- pnpm test:i18n-parity — en/zh/uk in parity (new keys canvas.resize_panel, canvas.prompt_label, canvas.prompt_input_hint added to all three)
@houko
houko force-pushed the feat/workflow-agent-sidebar branch from 8189122 to 26fa322 Compare June 17, 2026 12:22
@github-actions github-actions Bot added size/L 250-999 lines changed and removed size/M 50-249 lines changed labels Jun 17, 2026
@houko
houko enabled auto-merge (squash) June 17, 2026 12:26
@houko
houko marked this pull request as draft June 17, 2026 12:32
auto-merge was automatically disabled June 17, 2026 12:32

Pull request was converted to draft

@houko
houko marked this pull request as ready for review June 17, 2026 12:37
@houko
houko enabled auto-merge (squash) June 17, 2026 12:41
@github-actions github-actions Bot added ready-for-review PR is ready for maintainer review and removed has-conflicts PR has merge conflicts that need resolution labels Jun 17, 2026
@houko
houko merged commit 5a51bd9 into main Jun 17, 2026
37 of 38 checks passed
@houko
houko deleted the feat/workflow-agent-sidebar branch June 17, 2026 12:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready-for-review PR is ready for maintainer review size/L 250-999 lines changed

Projects

None yet

2 participants