feat(dashboard/workflows): dock the agent panel as a resizable sidebar with a larger prompt editor (#6154 #6155)#6164
Conversation
houko
left a comment
There was a problem hiding this comment.
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
…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)
8189122 to
26fa322
Compare
Pull request was converted to draft
Summary
The workflow canvas editor's agent-config panel (
NodeConfigPanelinCanvasPage.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
localStoragethrough the existing guardedsafeStoragewrapper, 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/reactdrives the slide-in / slide-out, matching the existing right-docked drawer idiom (slideInRight), wrapped inAnimatePresenceso 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 a28remcap, with relaxed line height; the wider docked panel also gives it real horizontal room.The previously hardcoded English
Promptlabel and its({{input}} = prev output)hint are moved to i18n.i18n
New keys
canvas.resize_panel,canvas.prompt_label,canvas.prompt_input_hintadded to all three locale files (en.json,zh.json,uk.json).The
prompt_input_hintvalue keeps the literal{{input}}placeholder, mirroring the existingcanvas.output_var_hintpattern (i18next leaves it unreplaced when no interpolation value is supplied).Behavior preserved
All existing
NodeConfigPanelfunctionality is untouched: agent binding, prompt, execution mode (sequential / fan-out / collect / conditional / loop), conditional / loop / retry fields, timeout, output variable,depends_onmulti-select, save, and delete.The panel is still hidden while the run-input dialog is open (same
!showRunInputguard), 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.tsxexists, so no editor test needed updating;WorkflowsPage.test.tsxis unaffected and stays green.Maintainer notes
AGENT_PANEL_MIN/MAX/DEFAULT_WIDTHinCanvasPage.tsx).localStoragekey iscanvas.agentPanelWidth.< 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..secrets.baselinechange 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 inen.jsondown by three lines); no new flagged entries were introduced.Closes #6154
Closes #6155