Skip to content

Commit 24980cb

Browse files
christianvogtmprpic
christianvogt
and
mprpic
authored
feat(frontend): add display names to page titles (#861)
## 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. <img width="655" height="202" alt="image" src="https://github.com/user-attachments/assets/3419b38b-4d3d-4c2b-abe4-4590998399b5" /> Co-authored-by: Martin Prpič <mprpic@redhat.com>
1 parent 373db39 commit 24980cb

3 files changed

Lines changed: 63 additions & 46 deletions

File tree

‎components/frontend/src/app/integrations/layout.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "Integrations · Ambient Code Platform",
5+
};
6+
7+
export default function IntegrationsLayout({
8+
children,
9+
}: {
10+
children: React.ReactNode;
11+
}) {
12+
return children;
13+
}

‎components/frontend/src/app/projects/[name]/page.tsx‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -127,51 +127,54 @@ export default function ProjectDetailsPage() {
127127
}
128128

129129
return (
130-
<SidebarProvider
131-
defaultOpen={true}
132-
className="min-h-[calc(100svh-4rem)]"
133-
>
134-
<WorkspaceSidebar
135-
activeSection={activeSection}
136-
onSectionChange={setActiveSection}
137-
/>
138-
<SidebarInset>
139-
{/* Sticky header with breadcrumbs and sidebar trigger */}
140-
<header className="sticky top-0 z-20 flex items-center gap-2 bg-background border-b px-4 h-12">
141-
<SidebarTrigger className="-ml-1" />
142-
<Separator orientation="vertical" className="mr-2 h-4" />
143-
<Breadcrumb>
144-
<BreadcrumbList>
145-
<BreadcrumbItem>
146-
<BreadcrumbLink asChild>
147-
<Link href="/projects">Workspaces</Link>
148-
</BreadcrumbLink>
149-
</BreadcrumbItem>
150-
<BreadcrumbSeparator />
151-
<BreadcrumbItem>
152-
<BreadcrumbPage>{projectName}</BreadcrumbPage>
153-
</BreadcrumbItem>
154-
</BreadcrumbList>
155-
</Breadcrumb>
156-
</header>
157-
158-
{/* Page content */}
159-
<div className="p-6">
160-
<PageHeader
161-
title={project?.displayName || projectName}
162-
description={project?.description || 'Manage agentic sessions, configure settings, and control access for this workspace'}
163-
/>
164-
165-
<hr className="border-t my-6" />
166-
167-
{/* Main Content */}
168-
{activeSection === 'sessions' && <SessionsSection projectName={projectName} />}
169-
{activeSection === 'schedules' && <SchedulesSection projectName={projectName} />}
170-
{activeSection === 'sharing' && <SharingSection projectName={projectName} />}
171-
{activeSection === 'keys' && <KeysSection projectName={projectName} />}
172-
{activeSection === 'settings' && <SettingsSection projectName={projectName} />}
173-
</div>
174-
</SidebarInset>
175-
</SidebarProvider>
130+
<>
131+
<title>{`${project?.displayName || projectName} · Ambient Code Platform`}</title>
132+
<SidebarProvider
133+
defaultOpen={true}
134+
className="min-h-[calc(100svh-4rem)]"
135+
>
136+
<WorkspaceSidebar
137+
activeSection={activeSection}
138+
onSectionChange={setActiveSection}
139+
/>
140+
<SidebarInset>
141+
{/* Sticky header with breadcrumbs and sidebar trigger */}
142+
<header className="sticky top-0 z-20 flex items-center gap-2 bg-background border-b px-4 h-12">
143+
<SidebarTrigger className="-ml-1" />
144+
<Separator orientation="vertical" className="mr-2 h-4" />
145+
<Breadcrumb>
146+
<BreadcrumbList>
147+
<BreadcrumbItem>
148+
<BreadcrumbLink asChild>
149+
<Link href="/projects">Workspaces</Link>
150+
</BreadcrumbLink>
151+
</BreadcrumbItem>
152+
<BreadcrumbSeparator />
153+
<BreadcrumbItem>
154+
<BreadcrumbPage>{projectName}</BreadcrumbPage>
155+
</BreadcrumbItem>
156+
</BreadcrumbList>
157+
</Breadcrumb>
158+
</header>
159+
160+
{/* Page content */}
161+
<div className="p-6">
162+
<PageHeader
163+
title={project?.displayName || projectName}
164+
description={project?.description || 'Manage agentic sessions, configure settings, and control access for this workspace'}
165+
/>
166+
167+
<hr className="border-t my-6" />
168+
169+
{/* Main Content */}
170+
{activeSection === 'sessions' && <SessionsSection projectName={projectName} />}
171+
{activeSection === 'schedules' && <SchedulesSection projectName={projectName} />}
172+
{activeSection === 'sharing' && <SharingSection projectName={projectName} />}
173+
{activeSection === 'keys' && <KeysSection projectName={projectName} />}
174+
{activeSection === 'settings' && <SettingsSection projectName={projectName} />}
175+
</div>
176+
</SidebarInset>
177+
</SidebarProvider>
178+
</>
176179
);
177180
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1458,6 +1458,7 @@ export default function ProjectSessionDetailPage({
14581458

14591459
return (
14601460
<>
1461+
<title>{`${session.spec.displayName || session.metadata.name} · Ambient Code Platform`}</title>
14611462
<div className="absolute inset-0 top-16 overflow-hidden bg-background flex flex-col">
14621463
{/* Fixed header */}
14631464
<div className="flex-shrink-0 bg-card border-b">

0 commit comments

Comments
 (0)