Skip to content

fix(ui): harmonize console page titles with top bar + rename sidebar section (#13406) - #13552

Merged
lalalune merged 2 commits into
developfrom
fix/qa-title-harmonize
Jul 4, 2026
Merged

lalalune merged 2 commits into
developfrom
fix/qa-title-harmonize

Conversation

@0xSolace

@0xSolace 0xSolace commented Jul 4, 2026

Copy link
Copy Markdown
Collaborator

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 the ConsoleShell top 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> 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.

(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. DashboardRoutePage now reuses it (drops its inlined copy of the same conditional-provider logic — reuse-first).
  • MyAgentsPage + AnalyticsPage: swap the shadowing <PageHeaderProvider> for EnsurePageHeaderProvider, so their useSetPageHeader title 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-unused cloud.agents.eyebrow / cloud.agents.title i18n keys across all 8 locales (they had zero remaining code references).
  • 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. The "Account" nav item itself is unchanged.

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):
    • "surfaces a standalone route's title in the top bar" — mounts a body that publishes its header inside EnsurePageHeaderProvider inside ConsoleShell, 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 no h1 because the header was shadowed) is exactly what this guards.
    • "names the account-plumbing section 'Workspace', not 'Account'" — asserts the Workspace section title is present and the Account item 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 (confirms DashboardRoutePage still supplies-or-defers correctly).
  • packages/ui/src/cloud/home/DashboardHomePage.test.tsx (5 tests) — green (nav directory intact).
Test Files  3 passed (3)
     Tests  12 passed (12)

Typecheck: bun run --cwd packages/ui typecheckzero errors in any touched file. (The fresh-worktree run has pre-existing cloud/shared/src/db/* pg/drizzle-orm type-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-agents h1 while its provider was shadowed would leave no page title) — fixed by the EnsurePageHeaderProvider defer 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)

  • No same-in-same-out wrapper: EnsurePageHeaderProvider has real branching behavior (defer vs. supply), not a pass-through.
  • Reuse-first: DashboardRoutePage now consumes the shared helper instead of duplicating the conditional-provider logic; removed the duplicated inline copy.
  • No single-use type alias / no non-essential params: helper takes only { children }.
  • Clear responsibilities: the provider decision lives in one exported primitive; pages just wrap.

Follow-ups (not this card — noted for the board)

The same shadowing <PageHeaderProvider> pattern still exists in McpsRoute, AccountPage, SecurityPage, PermissionsPage, ApiKeysPage, CloudSettingsSectionShell, NativeAppsStudio. They'll benefit from the same EnsurePageHeaderProvider swap — 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

…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 lalalune left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@lalalune

lalalune commented Jul 4, 2026

Copy link
Copy Markdown
Member

Pushed f16cf94096 with two Biome-only cleanups:

  • dashboard-route-page.tsx: converted the React type-only import to import type.
  • ConsoleShell.test.tsx: accepted formatter output for the standalone title assertion.

Validation from /tmp/eliza-pr-13552-work:

  • bunx @biomejs/biome check on the 9 touched TS/TSX files -> clean
  • git diff --check -> clean

Targeted Vitest note: bun run --cwd packages/ui test -- src/cloud/shell/ConsoleShell.test.tsx src/cloud-ui/components/layout/dashboard-route-page.test.tsx src/cloud/home/DashboardHomePage.test.tsx could not start in this sparse/local dependency layout because react/package.json is not resolvable from the current install. I did not run bun install because the machine is under disk pressure. The PR body already contains a prior successful 12/12 run for those suites; CI should rerun them on the pushed head.

@lalalune lalalune left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@lalalune
lalalune merged commit fa6adb5 into develop Jul 4, 2026
19 of 60 checks passed
@lalalune
lalalune deleted the fix/qa-title-harmonize branch July 4, 2026 21:51
@lalalune

lalalune commented Jul 4, 2026

Copy link
Copy Markdown
Member

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.

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.

2 participants