feat: Sessions-Pane Server-Group Header — Color-Picker and Close Buttons

[sahil-noon]

Meta

Change ID	Type	Confidence	Plan	Review
x4sf	feat	4.1/5.0	5/5 tasks, 13/13 acceptance ✓	✓ 2 cycles

Impact	+/−	Net
raw	+677 / −26	+651
true	+318 / −23	+295
└ impl	+318 / −23	+295
└ tests	+0 / −0	+0

_{excludes fab/, docs/ · generated by fab-kit v2.16.5}

Pipeline: intake ✓ → apply ✓ → review ✓ → hydrate ✓ → ship → review-pr

Summary

The SESSIONS-pane server-group header became a tinted bar carrying the server's color (t1ca), but offered no way to change that color or kill the server — both actions lived only on the SERVER panel, which is collapsed by default and independent of the SESSIONS pane since PR #428. This adds a three-button cluster (color palette, plus, close) to the header, reusing the existing SwatchPopover write seam and the lifted onKillServer confirmation flow rather than introducing a parallel path.

Changes

• Header action cluster (ServerGroupInner, sidebar/index.tsx): replaces the lone + with a palette → plus → close cluster at the header's right end; palette is hover-revealed with coarse: touch fallback (session-row convention), plus/close stay always-visible; icons follow the header's tinted-fill text treatment (headerAccent / text-text-primary), close hovers red.
• Color picker: reuses SwatchPopover (no marker) and the existing onServerColorChange seam, lifted into one shared handler so ServerGroup and ServerPanel funnel through a single implementation; popover is portalled to document.body with fixed, flip-above positioning anchored at the palette button to escape the sessions list's overflow clip.
• Close button: forwards the existing onKillServer prop into ServerGroup/ServerGroupInner, reusing the parents' lifted kill-confirmation dialog and killServer API call — no new dialog or handler.
• Accessibility: new aria-labels (Set color for server {name}, Kill server {name}) match SERVER-tile wording; unit tests scope queries to the header container to avoid duplicate-label ambiguity with tiles. All buttons are real, keyboard-reachable <button>s.
• Tests: extends sidebar/index.test.tsx (t1ca describe-block pattern) covering cluster DOM order, palette→SwatchPopover→color-change wiring, and close→onKillServer wiring. No new Playwright spec (unit-only per intake Assumption Add bottom bar with modifier keys, compose buffer, and iOS keyboard support #10).
• Docs: docs/memory/run-kit/ui-patterns.md updated for the new header action cluster.
• Housekeeping: archives the completed t1ca change (fab/changes/260720-t1ca-sidebar-server-group-header-tint/ → fab/changes/archive/2026/07/) and updates the archive index.

Deferred should-fix from review: the popover flip-above geometry in ServerGroupInner duplicates server-panel.tsx's ServerTile positioning useLayoutEffect (~15 lines, index.tsx ~:1584 vs server-panel.tsx ~:273) — both call sites are needed, so this is a consolidation opportunity rather than a deletion. Candidate follow-up: extract a shared useAnchoredPopoverPos hook.

[Copilot]

Pull request overview

Adds server-management actions directly to the SESSIONS-pane server-group header (now that it’s tinted with the server color), by reusing the existing color write seam (SwatchPopover → shared handler) and the existing parent-owned kill-confirmation flow, while preserving ServerGroup’s memoization behavior.

Changes:

• Replaces the header’s lone + with a palette → plus → close action cluster, including a body-portalled SwatchPopover anchored to the palette button.
• Lifts server-color mutation logic into a shared handleServerColorChange callback reused by both ServerPanel tiles and ServerGroup headers.
• Stabilizes onKillServer at both Sidebar parents (AppShell, BoardPage) to avoid defeating React.memo(ServerGroupInner); extends unit tests and updates UI patterns memory docs.

Reviewed changes

Copilot reviewed 10 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
fab/changes/archive/index.md	Adds the archived t1ca entry to the archive index.
fab/changes/archive/2026/07/260720-t1ca-sidebar-server-group-header-tint/plan.md	Archived plan document for prior t1ca change.
fab/changes/archive/2026/07/260720-t1ca-sidebar-server-group-header-tint/intake.md	Archived intake document for prior t1ca change.
fab/changes/archive/2026/07/260720-t1ca-sidebar-server-group-header-tint/.status.yaml	Archived status metadata for prior t1ca change.
fab/changes/archive/2026/07/260720-t1ca-sidebar-server-group-header-tint/.history.jsonl	Archived stage history for prior t1ca change.
fab/changes/260721-x4sf-sessions-header-color-close-actions/plan.md	Plan describing header action cluster + shared handler + portal behavior.
fab/changes/260721-x4sf-sessions-header-color-close-actions/intake.md	Intake describing motivation and constraints for palette/close on headers.
fab/changes/260721-x4sf-sessions-header-color-close-actions/.status.yaml	Status metadata for x4sf change.
fab/changes/260721-x4sf-sessions-header-color-close-actions/.history.jsonl	Stage history for x4sf change.
docs/memory/run-kit/ui-patterns.md	Documents the new server-group header action cluster and shared seams.
app/frontend/src/components/sidebar/index.tsx	Implements shared server-color handler; adds header palette/plus/close cluster + portalled popover; threads new props.
app/frontend/src/components/sidebar/index.test.tsx	Adds unit tests for cluster order, portal, shared seam wiring, and kill prop invocation.
app/frontend/src/components/board/board-page.tsx	Wraps onKillServer in a stable useCallback for memo contract preservation.
app/frontend/src/app.tsx	Wraps onKillServer in a stable useCallback for memo contract preservation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.