fix(kanban-dashboard): add close button and click-outside dismiss to OrchestrationPanel - #49940
DavidMetcalfe wants to merge 5 commits into
Conversation
teknium1
left a comment
There was a problem hiding this comment.
Thanks for the focused dashboard UX improvement. The current-main premise is valid: plugins/kanban/dashboard/dist/index.js:1669-1679 offers only the header-text toggle, mode pill, and Reload control when expanded.
Problems
plugins/kanban/dashboard/dist/index.js:1638passespanelReftoCard, but the SDKCardis a plain function component (web/node_modules/@nous-research/ui/src/ui/components/card.tsx:21-35), not aforwardRefcomponent. Consequently the proposedpanelRef.currentguard in the outside-pointer handler always prevents the dismiss path from running. The visible close button still works, but click-outside does not.
Suggested changes
- Put the ref on a native wrapper
divaround the Card (or use a ref-forwarding host primitive), then verify outside-pointer dismissal against that DOM node.
Automated hermes-sweeper review.
| @@ -1623,16 +1638,25 @@ | |||
| return h(SelectOption, { key: p.name, value: p.name }, p.name + tag); | |||
There was a problem hiding this comment.
Card is a plain function component in the exposed UI package, not a ref-forwarding component (web/node_modules/@nous-research/ui/src/ui/components/card.tsx:21-35). React will not populate panelRef.current here, so the new document handler always returns. Attach this ref to a native wrapper div (or use a ref-forwarding primitive).
There was a problem hiding this comment.
Good catch — Card isn't forwardRef, so React drops the ref. Fixed in 9070d9e by wrapping it in a native div that accepts the ref directly. Verified: the pointerdown handler now properly receives panelRef.current as a DOM node.
`COLUMN_ORDER` at dist/index.js:149 was defined but never referenced — the board renders columns from the backend response directly. The constant's column list was also stale (missing `scheduled` and `review` which were added to BOARD_COLUMNS in plugin_api.py). Additionally, `FALLBACK_COLUMN_HELP` was missing entries for those same two columns, causing getColumnHelp() to return "" for them. Changes: - Delete the unused `COLUMN_ORDER` constant - Add `scheduled` and `review` help text to `FALLBACK_COLUMN_HELP` Fixes NousResearch#49891
…OrchestrationPanel The Orchestration settings panel expanded via "▸ Orchestration settings" but could only be collapsed by clicking the header label text — a subtle toggle with no visual affordance. Users had to navigate away and return to close it. Changes: - Add useRef(panelRef) attached to the expanded Card element - Add pointerdown listener on document that collapses when clicking outside the panel (with proper cleanup) - Add a visible ✕ close button in the expanded header alongside Reload, grouped in a flex container with the modePill - Keep the header label toggle for keyboard/consistency access Closes NousResearch#49939
Card is a plain function component, not forwardRef — React intercepts the ref prop, so panelRef.current was always null and the click-outside handler never fired. Wrap in a native div that accepts the ref directly. Reported-by: @teknium1 on PR NousResearch#49940
SelectOption dropdowns render in a Radix popper portal outside the panel's DOM hierarchy. Clicking an option fires pointerdown on a node panelRef.current.contains() doesn't see, collapsing the panel mid-selection. Skip clicks whose target is inside a Radix popper content wrapper (data-radix-popper-content-wrapper). Found by: Gemini 3.5 Flash cross-vendor review of PR NousResearch#49940
627942a to
7758da1
Compare
CI status
The failing test is This reproduces on Confirmed by cross-vendor review (Gemini 3.5 Flash + Gemini 3.1 Pro). All other 7 test slices pass. |
What
The Orchestration settings panel in the Kanban dashboard expanded via "▸ Orchestration settings" but could only be collapsed by clicking the header label text — a subtle toggle with no visual affordance. Users had to navigate away and return to close it.
Closes #49939
Changes
useRef(panelRef)attached to the expandedCardelementpointerdownlistener ondocumentthat collapses when clicking outside the panel (with proper cleanup on unmount and whenexpandedchanges)How to test
/kanbanin the dashboard