Skip to content

[Bugfix #522] Consolidate dashboard controls into single architect toolbar#523

Merged
waleedkadous merged 2 commits intomainfrom
builder/bugfix-522-dashboard-consolidate-controls
Feb 23, 2026
Merged

[Bugfix #522] Consolidate dashboard controls into single architect toolbar#523
waleedkadous merged 2 commits intomainfrom
builder/bugfix-522-dashboard-consolidate-controls

Conversation

@waleedkadous
Copy link
Contributor

Summary

Fixes #522

Dashboard controls were scattered across multiple locations: collapse/expand buttons in the app header, terminal controls in a floating overlay, and connection status inside that overlay. This consolidates everything into a single, more prominent toolbar at the top-right of the architect terminal window.

Root Cause

The collapse/expand buttons were rendered in the App.tsx header (<header className="app-header">) while terminal controls (refresh, scroll-to-bottom, connection status) lived in a separate floating TerminalControls overlay inside the Terminal component. These were designed independently and never unified.

Fix

  • Added toolbarExtra prop to Terminal component, allowing injection of extra controls into its toolbar
  • Moved collapse/expand buttons from the app header into the architect terminal via toolbarExtra
  • Kept a fallback "Expand architect panel" button in the header only when the architect panel is collapsed (since the toolbar is hidden when its panel is collapsed)
  • Used onPointerDown + preventDefault (matching existing controls) to avoid stealing xterm focus
  • Added visual .toolbar-divider between terminal controls and layout controls
  • Made the toolbar container more prominent: solid rgba(30,30,30,0.85) background, visible border, rounded corners, individual button hover states

Test Plan

  • Added 4 regression tests in architect-toolbar.test.tsx
  • Verified fix locally — all controls appear in one toolbar
  • Existing tests pass (159 passed, 4 pre-existing failures in Terminal.fit-scroll.test.tsx)
  • 8 pre-existing broken SplitPane tests skipped (tested buttons that never existed in SplitPane)
  • Build passes
  • Net diff: 177 LOC (under 300 threshold)

CMAP Review

To be added after review.

Flaky Tests

8 tests in SplitPane.test.tsx were marked it.skip — they are pre-existing broken tests (not flaky). These tests rendered <SplitPane> in isolation and expected collapse/expand buttons, but those buttons have always lived in App.tsx, never in SplitPane. They failed identically before and after this change.

4 tests in Terminal.fit-scroll.test.tsx are pre-existing failures related to fit/scroll timing — unrelated to this change.

…ct toolbar

Move collapse/expand buttons from the app header into the architect
terminal's toolbar overlay. All controls (refresh, scroll-to-bottom,
connection status, collapse/expand) now live in one unified toolbar at
the top-right of the architect terminal window.

- Add toolbarExtra prop to Terminal component for injecting extra controls
- Move collapse/expand buttons from App header into architect Terminal
- Keep fallback expand button in header when architect panel is collapsed
- Use onPointerDown (like existing controls) to avoid stealing xterm focus
- Add visual divider between terminal controls and layout controls
- Make toolbar more prominent: solid background, rounded container, cleaner styling
- Skip 8 pre-existing broken SplitPane tests (test buttons from wrong component)
- Add 4 regression tests for consolidated toolbar behavior
… buttons

Address CMAP review feedback (Codex): use onClick for keyboard activation
(Enter/Space) and onPointerDown+preventDefault only for focus protection.
Remove tabIndex={-1} so buttons remain keyboard-reachable via Tab.
@waleedkadous
Copy link
Contributor Author

Architect Integration Review

Verdict: APPROVE

Single-model review (Claude) — clean implementation.

  • toolbarExtra prop on Terminal is the right composable pattern
  • CSS changes affect all terminal instances (builder/shell too) — net positive for visual consistency
  • 8 skipped SplitPane tests confirmed pre-existing broken (SplitPane never had buttons)
  • No integration risks

Minor follow-up opportunity: Remove tabIndex={-1} from original terminal control buttons (refresh, scroll-to-bottom) to match the keyboard-accessible pattern on the new toolbar extras.


Architect integration review

@waleedkadous waleedkadous merged commit 7bdd616 into main Feb 23, 2026
6 checks passed
@waleedkadous waleedkadous deleted the builder/bugfix-522-dashboard-consolidate-controls branch February 23, 2026 14:30
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.

Dashboard: consolidate controls into single architect toolbar

1 participant