feat(frontend): add display names to page titles

[christianvogt]

Summary

When multiple ACP sessions are open in separate browser tabs, all tabs show the same title ("Ambient Code Platform"), making it impossible to identify which tab belongs to which session. This also prevents browser tab search features (e.g., Chrome's "Search tabs") from being useful for finding a specific session.

Adds dynamic browser tab titles across all main pages so users can distinguish tabs when multiple are open.

Uses two complementary Next.js mechanisms:

• Server-side generateMetadata in new layout files — initial title from route params on first load
• Client-side <title> tags in page components — refines title with fetched display names after hydration

Changes

File	What
integrations/layout.tsx	New — static title metadata
projects/[name]/page.tsx	Fragment wrapper + <title> with project.displayName
sessions/[sessionName]/page.tsx	<title> with session.spec.displayName

No behavioral, styling, or logic changes — purely additive. The large diff in the project page is just re-indentation from the fragment wrapper.

[mprpic]

@christianvogt Can you please rebase your branch onto main?

[coderabbitai]

Walkthrough

Adds HTML <title> elements to project and session pages for dynamic document titles and introduces a new Next.js integrations layout exporting page metadata and a simple layout component. Changes only affect head/title rendering and layout export; no data fetching or navigation logic was altered.

Changes

Cohort / File(s)	Summary
Project & Session Pages components/frontend/src/app/projects/[name]/page.tsx, components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx	Insert HTML <title> elements to set dynamic document titles (uses displayName or resource name with "Ambient Code Platform" suffix) in normal and error render paths.
Integrations Layout components/frontend/src/app/integrations/layout.tsx	Add new Next.js layout exporting metadata: Metadata with title "Integrations · Ambient Code Platform" and a default IntegrationsLayout component that renders children.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the problem, the solution approach, the files modified, and confirms no behavioral changes—all directly related to the changeset.
Title check	✅ Passed	The PR title 'feat(frontend): add display names to page titles' directly relates to the main objective of making browser tab titles dynamic by adding display names, which is demonstrated across multiple files in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/frontend/src/app/projects/`[name]/sessions/[sessionName]/page.tsx:
- Line 1450: This client component injects a <title> element causing duplicate
titles; remove the <title>{`${session.spec.displayName || session.metadata.name}
· Ambient Code Platform`}</title> from the client page and move the title
computation into the server-side layer using generateMetadata (or a server
wrapper page.tsx) so the Metadata API is the single source of truth; update the
server page's generateMetadata to compute the same displayName fallback logic
(session.spec.displayName || session.metadata.name) and return the title string,
and ensure the client component no longer renders any <title> element.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2f9c63e0-7265-4665-8b0d-c222c5e12d47

📥 Commits

Reviewing files that changed from the base of the PR and between 07d50e5 and 74668f9.

📒 Files selected for processing (1)

• components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx

[ambient-code]

Review Queue — Not Ready to Merge

CodeRabbit flagged the use of <title> in a client component and suggested using Next.js's metadata API instead. While you explained that React 19 deduplicates titles, @mprpic created PR #878 as an alternative implementation that uses the metadata API approach and extends it to workspace pages.

The two PRs offer competing technical approaches for the same feature.

To unblock: Review PR #878 and decide which approach to use. Either adopt the metadata API pattern from #878, or provide technical justification for keeping the React 19 title hoisting pattern.

[Gkrumbach07]

@Mergifyio queue

[mergify]

Merge Queue Status

• 🟠 Waiting for queue conditions
• ⏳ Enter queue
• ⏳ Run checks
• ⏳ Merge

Required conditions to enter a queue

• -closed [📌 queue requirement]
• any of [🔀 queue conditions]:
  • all of [📌 queue conditions of queue default]:
    • check-success=End-to-End Tests
    • #approved-reviews-by >= 1 [🛡 GitHub repository ruleset rule protect-main]
    • #approved-reviews-by>=1
    • #changes-requested-reviews-by = 0 [🛡 GitHub repository ruleset rule protect-main]
    • #changes-requested-reviews-by=0
    • check-success=test-local-dev-simulation
    • check-success=validate-manifests
    • commented-reviews-by=coderabbitai[bot]
  • all of [📌 queue conditions of queue large-pr]:
    • check-success=End-to-End Tests
    • #approved-reviews-by >= 1 [🛡 GitHub repository ruleset rule protect-main]
    • #approved-reviews-by>=2
    • #changes-requested-reviews-by = 0 [🛡 GitHub repository ruleset rule protect-main]
    • #changes-requested-reviews-by=0
    • check-success=test-local-dev-simulation
    • check-success=validate-manifests
    • commented-reviews-by=coderabbitai[bot]
• -conflict [📌 queue requirement]
• -draft [📌 queue requirement]
• any of [📌 queue -> configuration change requirements]:
  • -mergify-configuration-changed
  • check-success = Configuration changed

[Gkrumbach07]

@Mergifyio refresh

[mergify]

refresh

✅ Pull request refreshed