# feat\(web\): unify workspace navigation · PR \#7153 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/7153)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: agent/ui-workspace-refresh

Target branch: main

Head commit: f756913ba6dadcd79cca53c1e244787e985616ce

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/7153)

[Commits](https://git.cafe/pingdotgg/t3code/pull/7153/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/7153/diffs?format=markdown)

## Description

---

## What changed

- Adds one shared workspace header for chat, empty states, Settings, project settings, and onboarding.
- Moves Settings, Usage, and Pull Requests navigation into the sidebar footer, with one consistent Back action on those pages.
- Centralizes Settings content widths and scroll padding.

## Screenshots

_Direct parent on the left; this PR on the right. Same viewport and copied application state._

### Settings layout

<table>
<tr><th>Before</th><th>After</th></tr>
<tr>
<td><img src="https://github.com/user-attachments/assets/2a9c5488-5fda-4421-9460-96e599c8d9bc" alt="Settings layout before" width="500"></td>
<td><img src="https://github.com/user-attachments/assets/735d2b04-defe-4001-b015-462cef283e1c" alt="Settings layout after" width="500"></td>
</tr>
</table>

## Why

Workspace navigation and page headers were duplicated across several routes. This PR keeps only that shared layout work. Usage, Pull Requests, terminal, composer, tool lifecycle, and tool activity stay in separate reviews.

The independent thread action menu redesign remains in #7476.

## Validation

- Focused workspace header and Settings layout tests
- Web typecheck
- Browser verification of the Settings header, wide content layout, and shared Back footer

## Stack order

1. #7153 workspace navigation, this PR
2. #7147 Usage
3. #7148 Pull Requests
4. #7149 terminal
5. #7150 composer
6. #7151 tool lifecycle projection
7. #7152 tool activity UI

Built with GPT-5.6-sol in the Codex harness.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Mostly presentational refactors and shared navigation wiring; no auth, data, or API behavior changes in the diff.
> 
> **Overview**
> **Unifies workspace top-bar chrome** by adding `WorkspacePageHeader` and swapping duplicated `<header>` / Electron title-bar markup in chat (`ChatView`), empty thread state, settings layout, project settings, and hosted onboarding for that shared wrapper (`electron`, `reserveNativeControls`, collapsed-sidebar inset, safe-area padding).
> 
> **Consolidates sidebar footer navigation** by extracting `SidebarUtilityMenu` from `SidebarChromeFooter` (Settings / Usage / Pull Requests icon shortcuts, **Back** when on settings, usage, or pull-requests routes, with `history.back` when possible). Settings sidebar footer now reuses the same menu instead of its own Back handler.
> 
> **Tweaks settings content layout** via `SettingsPageContainer` `width` presets (`readable` / `wide` / `expanded`) and updated scroll-area padding; Keybindings and Diagnostics opt into wider max widths. Titlebar geometry expectations move to `WorkspacePageHeader` in the chat index titlebar test.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit f756913ba6dadcd79cca53c1e244787e985616ce. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- Macroscope's pull request summary starts here -->
<!-- Macroscope will only edit the content between these invisible markers, and the markers themselves will not be visible in the GitHub rendered markdown. -->
<!-- If you delete either of the start / end markers from your PR's description, Macroscope will append its summary at the bottom of the description. -->
> [!NOTE]
> ### Unify workspace navigation headers into a shared `WorkspacePageHeader` component
> - Introduces [WorkspacePageHeader.tsx](https://github.com/pingdotgg/t3code/pull/7153/files#diff-ce14a22960a0527325da3657b206210c233e21460d8fef5e24b9bf1085a9b5b0), a reusable header that centralizes top-bar geometry, drag-region behavior, and native-control inset padding for Electron.
> - Replaces duplicated inline `<header>` markup and `COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS` logic across chat, onboarding, settings, and project settings views.
> - Centralizes sidebar footer utilities into a new `SidebarUtilityMenu` component in [SidebarChrome.tsx](https://github.com/pingdotgg/t3code/pull/7153/files#diff-cbdc7d544762cec67fb7c23f9e66e80e1ca2158f0d100a878363a7ae01f77c11); the Back button now prefers `history.back()` over navigating to `/`.
> - Standardizes `SettingsPageContainer` with a `width` prop (`'readable'` | `'wide'` | `'expanded'`) and consistent padding, replacing per-page `max-w-*` classNames.
>
> <!-- Macroscope's review summary starts here -->
>
> <sup><a href="https://app.macroscope.com">Macroscope</a> summarized f756913.</sup>
> <!-- Macroscope's review summary ends here -->
>
<!-- Macroscope's pull request summary ends here -->