fix: prevent terminal tabs from overflowing

[JAYATIAHUJA]

Summary

This PR fixes the terminal tab strip so long terminal names and many open terminals no longer push the shell header layout out of shape. The tab strip now behaves like a constrained control: terminal titles truncate cleanly, overflow can be scrolled horizontally, and the new-terminal action remains available at the end of the tab row.

It also brings this branch up to date with the latest main changes from AgentWrapper/agent-orchestrator and resolves the related shell/topbar/style conflicts without carrying over temporary or generated local files.

What Changed

• Added reusable overflow scrolling behavior for horizontally constrained UI surfaces.
• Added text truncation measurement support so terminal tab labels can collapse predictably instead of forcing layout growth.
• Updated shell terminal tabs to keep active, hover, close, and add-terminal interactions usable when the list is wider than the viewport.
• Kept the terminal creation affordance in the tab strip and avoided duplicating it in the shell topbar after the merge from main.
• Preserved the newer platform/topbar behavior from main while applying the terminal-tabs overflow fix on top.
• Removed stale style usage that referenced the deleted settings-panel background token from the incoming main changes.
• Tightened command-palette branch handling so optional branch values do not produce TypeScript errors.

Conflict Resolution Notes

The branch was merged with the latest wrapper/main. Conflicts were resolved in the shell session/header files and renderer styles. The resolution intentionally keeps the main shell/topbar structure and applies only the terminal tab overflow behavior needed for this fix.

No temporary files, cache files, local daemon state, or node_modules changes are included in the branch.

Verification

• npm run frontend:typecheck

User-Facing Impact

Users with many terminals, or terminals with long names, should now be able to keep working without the tab strip breaking the shell header layout. The active terminal remains visible through scrolling, tab names remain readable enough through truncation, and the add-terminal button stays accessible.

after images

[Copilot]

Pull request overview

This PR updates the frontend shell/terminal UI so terminal tab strips remain layout-constrained: long titles truncate, tab rows scroll horizontally with overflow indicators, and “new terminal” stays accessible at the end of the row. It also includes some styling/token adjustments and minor TypeScript tightening while syncing with recent main changes.

Changes:

• Add reusable hooks for truncation detection (useTruncatedText) and horizontal overflow tab-strip behavior (useOverflowScroll).
• Rework shell terminal tabs and the session CenterPane tab bar to use a scrollable strip with chevrons and stable “+” placement.
• Adjust assorted shell/topbar styling and command-palette typing to accommodate merged changes.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/styles/tokens.css	Updates design tokens (sizes/colors) used across the UI.
frontend/src/renderer/styles.css	Minor formatting tweak in renderer utility styles.
frontend/src/renderer/stores/ui-store.ts	Updates documentation/comments for the shell-terminal nonce trigger.
frontend/src/renderer/routes/_shell.tsx	Updates shortcut/help text references for new shell terminal behavior.
frontend/src/renderer/lib/command-palette.ts	Hardens optional branch handling in keywords/actions.
frontend/src/renderer/hooks/useTruncatedText.ts	New hook to detect real DOM truncation for conditional tooltips.
frontend/src/renderer/hooks/useOverflowScroll.ts	New hook for scrollable horizontal strips with overflow indicators + wheel scrolling.
frontend/src/renderer/components/TopbarButton.tsx	Tweaks topbar header class styling.
frontend/src/renderer/components/TerminalPane.tsx	Adds padding around xterm area while preserving overlay behavior.
frontend/src/renderer/components/ShellTopbar.tsx	Removes the standalone-terminal button from the topbar (now lives in tab strips).
frontend/src/renderer/components/ShellTerminalsView.tsx	Implements scrollable terminal tab strip with truncation + close affordances + “+”.
frontend/src/renderer/components/ShellTerminalsView.test.tsx	Adds a focused empty-state copy regression test.
frontend/src/renderer/components/SessionView.tsx	Wires “new shell terminal” action into CenterPane so the session view can trigger it.
frontend/src/renderer/components/SessionInspector.tsx	Small styling adjustment to inspector shell container.
frontend/src/renderer/components/CenterPane.tsx	Reworks terminal/session tab header into a scrollable strip + floating terminal controls overlay.
frontend/src/renderer/components/CenterPane.test.tsx	Adds tests asserting tab-strip overflow behavior and wheel scrolling.
frontend/src/preload.ts	Updates shortcut documentation comment for new shell terminal event.
frontend/src/main.ts	Disables background throttling to prevent terminal mux backpressure issues when occluded/minimized.

---

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

[Annieeeee11]

Can you also share a before and after screenshots of visible changes in the product behaviour/appearance?

[JAYATIAHUJA]

Pushed the review-fix commit (7539f6de). I still need to capture the before/after product screenshots for the visible tab-strip behavior and will add them in a follow-up comment.

[Pulkit7070]

Approving. All review findings are addressed: tokens.css is now scoped to the tab-strip (toolbar/palette/inspector-tabs reverted, which also clears the earlier --size-toolbar desync), the backgroundThrottling change is removed, and the scroll chevrons now stay mounted and disable/hide at the boundary so keyboard focus is preserved. CI is green and conversations are resolved.