chore: set project name in title tag for session detail page

src/routes/__root.tsx

@@ -1,4 +1,5 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { HelmetProvider } from "react-helmet-async";
 import { RootErrorBoundary } from "../app/components/RootErrorBoundary";
 import { SSEEventListeners } from "../app/components/SSEEventListeners";
 import { SyncSessionProcess } from "../app/components/SyncSessionProcess";
@@ -10,17 +11,19 @@ import { SSEProvider } from "../lib/sse/components/SSEProvider";
 export const Route = createRootRoute({
   component: () => (
     <RootErrorBoundary>
-      <ThemeProvider>
-        <LinguiClientProvider>
-          <SSEProvider>
-            <SSEEventListeners>
-              <SyncSessionProcess>
-                <Outlet />
-              </SyncSessionProcess>
-            </SSEEventListeners>
-          </SSEProvider>
-        </LinguiClientProvider>
-      </ThemeProvider>
+      <HelmetProvider>
+        <ThemeProvider>
+          <LinguiClientProvider>
+            <SSEProvider>
+              <SSEEventListeners>
+                <SyncSessionProcess>
+                  <Outlet />
+                </SyncSessionProcess>
+              </SSEEventListeners>
+            </SSEProvider>
+          </LinguiClientProvider>
+        </ThemeProvider>
+      </HelmetProvider>
       <Toaster position="top-right" />
     </RootErrorBoundary>
   ),

src/routes/projects/$projectId/sessions/$sessionId/index.tsx

@@ -1,5 +1,7 @@
 import { Trans } from "@lingui/react";
 import { createFileRoute } from "@tanstack/react-router";
+import { Helmet } from "react-helmet-async";
+import { useProject } from "../../../../../app/projects/[projectId]/hooks/useProject";
 import { SessionPageContent } from "../../../../../app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent";
 import { NotFound } from "../../../../../components/NotFound";
 
@@ -24,10 +26,22 @@ export const Route = createFileRoute(
 
 function RouteComponent() {
   const params = Route.useParams();
+  const { data } = useProject(params.projectId);
+  const projectName = data.pages[0]?.project.meta.projectName;
+
+  const title = projectName
+    ? `${projectName} - Claude Code Viewer`
+    : "Claude Code Viewer";
+
   return (
-    <SessionPageContent
-      projectId={params.projectId}
-      sessionId={params.sessionId}
-    />
+    <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+      <SessionPageContent
+        projectId={params.projectId}
+        sessionId={params.sessionId}
+      />
+    </>
   );
 }