fix(ui): harmonize console page titles with top bar + rename sidebar section (#13406) - #13552
Conversation
…section (#13406) Kills the "double-title" feel on the Eliza Cloud console: several dashboard routes drew their own page-level title while the ConsoleShell top bar drew another, and the sidebar's "Account" section title repeated the "Account" item label right below it. Root cause (the systemic half): standalone cloud routes wrap their body in a bare <PageHeaderProvider> so useSetPageHeader works when mounted directly by CloudRouterShell / natively in the app. But those same routes also render inside ConsoleShell, which already provides a header context and READS it to draw the top-bar title. The unconditional inner provider SHADOWS the shell's, so useSetPageHeader wrote to a dead context — the top bar showed no title, and any in-page heading then read as a second, competing title. Changes: - Add EnsurePageHeaderProvider (cloud-ui/layout): provides a page-header context only when there isn't an ancestor one; defers to the shell's provider when present. DashboardRoutePage now reuses it (drops its inlined copy of the same conditional-provider logic). - MyAgentsPage + AnalyticsPage: swap the shadowing <PageHeaderProvider> for EnsurePageHeaderProvider, so their title reaches the shell top bar. - AgentsPage: remove the inline eyebrow + <h1>Instances — ElizaAgentsPageWrapper already surfaces "Instances" in the top bar (DashboardRoutePage defers to the shell), so the inline heading was a literal duplicate. Drops the now-unused cloud.agents.eyebrow / cloud.agents.title i18n keys across all 8 locales. - my-agents console hero: demote its <h1> to <h2> so the page has a single page-level title (the top-bar "My Agent"); the descriptive hero copy stays as the in-page section heading. - ConsoleShell sidebar: rename the account-plumbing section title "Account" -> "Workspace" (it holds Connectors/Account/Security/Organization), so the section title no longer duplicates the "Account" item label. Tests: ConsoleShell.test.tsx gains a standalone-route case proving EnsurePageHeaderProvider defers to the shell (title surfaces in the top bar, one page-level heading) and a case asserting the "Workspace" section title + the unchanged "Account" item link. dashboard-route-page.test.tsx unchanged and green after the reuse refactor. 12/12 across the 3 affected suites. Co-authored-by: wakesync <shadow@shad0w.xyz>
lalalune
left a comment
There was a problem hiding this comment.
Correct root-cause fix for the double-title feel, and I verified the crux. The bug was an unconditional inner <PageHeaderProvider> in standalone routes SHADOWING the ConsoleShell's provider, so useSetPageHeader wrote to a dead context (top bar blank) and the in-page heading read as a second title. EnsurePageHeaderProvider fixes it by deferring to an ancestor context when present — and its detection useContext(PageHeaderContext) !== undefined is sound because PageHeaderContext is createContext<… | undefined>(undefined) (confirmed in page-header-context.hooks.ts): no ancestor → undefined → provides its own; shell ancestor present → non-undefined → defers. DashboardRoutePage reusing it (dropping its inlined copy) is reuse-first, and removing the literal-duplicate <h1>Instances/hero <h1>→<h2> + the zero-reference cloud.agents.* i18n keys across all 8 locales + the "Account"→"Workspace" section rename (so it stops duplicating the Account item label) all land the QA card cleanly. 12/12 across the 3 affected suites. LGTM.
|
Pushed
Validation from
Targeted Vitest note: |
lalalune
left a comment
There was a problem hiding this comment.
Reviewed the header-provider fix and the sidebar title rename. The implementation is real: EnsurePageHeaderProvider checks for an existing PageHeaderContext and defers to ConsoleShell when present, so standalone route bodies no longer shadow the shell provider. The tests cover the top-bar title propagation and the Workspace/Account sidebar distinction. I pushed only Biome cleanups on top; Biome and diff checks pass locally. Targeted Vitest is blocked locally by missing React resolution in this sparse checkout, documented in the PR comment.
|
Reviewed: harmonizes cloud-console page titles with the top bar — UI-consistency change (+128/-60, 17 files), 0 real failing CI (the 'Classify changed paths' reds are the current self-hosted-runner infra flake). Low-risk title/label harmonization. Queuing auto-merge on green. |
Closes the [sol-orch] Launch-QA card "Harmonize page titles with console top bar (double-title feel) + rename sidebar Account section" on the #13406 board.
Problem
On the Eliza Cloud console, several
/dashboard/*routes drew their own page-level title while theConsoleShelltop bar drew another — the "double-title feel" nubs flagged. Separately, the sidebar's "Account" section title repeated the "Account" item label directly below it.Root cause (the systemic half)
Standalone cloud routes wrap their body in a bare
<PageHeaderProvider>souseSetPageHeaderworks when mounted directly byCloudRouterShell/ natively in the app. But those same routes ALSO render insideConsoleShell, which already provides a header context and READS it to draw the top-bar title. The unconditional inner provider shadows the shell's, souseSetPageHeaderwrote to a dead context → the top bar showed no title, and any in-page heading then read as a second, competing title.(This same shadowing pattern exists in ~8 standalone pages — see "Follow-ups".)
Changes
EnsurePageHeaderProvider(new,cloud-ui/layout): provides a page-header context only when there isn't an ancestor one; defers to the shell's provider when present.DashboardRoutePagenow reuses it (drops its inlined copy of the same conditional-provider logic — reuse-first).MyAgentsPage+AnalyticsPage: swap the shadowing<PageHeaderProvider>forEnsurePageHeaderProvider, so theiruseSetPageHeadertitle reaches the shell top bar instead of a dead inner provider.AgentsPage: remove the inline eyebrow +<h1>Instances.ElizaAgentsPageWrapper(DashboardRoutePage title="Instances") already surfaces "Instances" in the top bar (it defers to the shell), so the inline heading was a literal duplicate. Also drops the now-unusedcloud.agents.eyebrow/cloud.agents.titlei18n keys across all 8 locales (they had zero remaining code references).<h1>to<h2>so the page has a single page-level title (the top-bar "My Agent"); the descriptive hero copy stays as the in-page section heading.Evidence (PR_EVIDENCE standard)
Tests — 12/12 green across the 3 affected suites (
vitest, jsdom, real router + real render):packages/ui/src/cloud/shell/ConsoleShell.test.tsx(3 tests, +2 new):EnsurePageHeaderProviderinsideConsoleShell, asserts the title renders as the single top-bar heading. This is the direct proof of the fix (defers to the shell, no shadowed provider). Codex's P2 accessibility concern (a demoted heading leaving noh1because the header was shadowed) is exactly what this guards.Workspacesection title is present and theAccountitem link (/dashboard/account) is unchanged.packages/ui/src/cloud-ui/components/layout/dashboard-route-page.test.tsx(4 tests) — unchanged, green after the reuse refactor (confirmsDashboardRoutePagestill supplies-or-defers correctly).packages/ui/src/cloud/home/DashboardHomePage.test.tsx(5 tests) — green (nav directory intact).Typecheck:
bun run --cwd packages/ui typecheck— zero errors in any touched file. (The fresh-worktree run has pre-existingcloud/shared/src/db/*pg/drizzle-ormtype-decl gaps that reproduce on clean develop, unrelated to this diff.)Codex review (gpt-5.5,
codex review --uncommitted): first pass flagged a real P2 (demoting the my-agentsh1while its provider was shadowed would leave no page title) — fixed by theEnsurePageHeaderProviderdefer pattern above; re-review: "No discrete correctness issues were found. The header-provider changes preserve the existing standalone behavior while allowing ConsoleShell to consume the route title."Anti-slop (nubs' 5 rules)
EnsurePageHeaderProviderhas real branching behavior (defer vs. supply), not a pass-through.DashboardRoutePagenow consumes the shared helper instead of duplicating the conditional-provider logic; removed the duplicated inline copy.{ children }.Follow-ups (not this card — noted for the board)
The same shadowing
<PageHeaderProvider>pattern still exists inMcpsRoute,AccountPage,SecurityPage,PermissionsPage,ApiKeysPage,CloudSettingsSectionShell,NativeAppsStudio. They'll benefit from the sameEnsurePageHeaderProviderswap — left out of this card to avoid colliding with the account/security lanes [qa-agent] has claimed. Cheap mechanical follow-up.— [sol-orch]
Co-authored-by: wakesync shadow@shad0w.xyz