feat(app): show the open session's title in the browser tab (#59131)

Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>

Author: opencode-agent[bot]

packages/app/e2e/regression/tabs.spec.ts

@@ -121,6 +121,21 @@ test("inactive session attention dots share the close control without marking th
   await expectPath(page, sessionHref(a.id))
 })
 
+test("the browser title names the open session and resets after leaving it", async ({ page }) => {
+  await mockWorkspace(page, { name: "Tabs", sessions: [a, b] })
+  await page.goto(sessionHref(a.id))
+  await expect(page).toHaveTitle(`${a.title} · OpenCode`)
+
+  const tabB = page.locator(`[data-titlebar-tab-slot]:has(a[href="${sessionHref(b.id)}"])`)
+  await tabB.locator("[data-titlebar-tab-link]").click()
+  await expectPath(page, sessionHref(b.id))
+  await expect(page).toHaveTitle(`${b.title} · OpenCode`)
+
+  await page.getByRole("button", { name: "Home", exact: true }).click()
+  await expectPath(page, "/")
+  await expect(page).toHaveTitle("OpenCode")
+})
+
 test("a tab does not reopen its title editor while a rename is saving", async ({ page }) => {
   await mockWorkspace(page, { name: "Tabs", sessions: [a, b] })
   await page.goto(sessionHref(a.id))

packages/app/index.html

@@ -6,7 +6,8 @@
       name="viewport"
       content="width=device-width, initial-scale=1, interactive-widget=resizes-content, viewport-fit=cover"
     />
-    <title>OpenCode</title>
+    <!-- data-sm lets the MetaProvider replace this pre-load title with the app's <Title> tags. -->
+    <title data-sm>OpenCode</title>
     <link rel="icon" type="image/x-icon" href="%OPENCODE_FAVICON%" />
     <link rel="apple-touch-icon" sizes="180x180" href="%OPENCODE_APPLE_TOUCH_ICON%" />
     <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" />

packages/app/src/app.tsx

@@ -3,7 +3,7 @@ import { DialogProvider } from "@opencode/ui/context/dialog"
 import { FileComponentProvider } from "@opencode/ui/context/file"
 import { Font } from "@opencode/ui/font"
 import { ThemeProvider } from "@opencode/ui/theme/context"
-import { MetaProvider } from "@solidjs/meta"
+import { MetaProvider, Title } from "@solidjs/meta"
 import { type BaseRouterProps, Router } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { type Component, createRenderEffect, ErrorBoundary, type JSX, type ParentProps } from "solid-js"
@@ -54,6 +54,7 @@ export function AppBaseProviders(
 ) {
   return (
     <MetaProvider>
+      <Title>OpenCode</Title>
       <Font />
       <ThemeProvider
         onThemeApplied={(_, mode, scheme) => {

packages/app/src/session/route.tsx

@@ -1,10 +1,12 @@
 import { ErrorBoundary, createEffect, createMemo, Show, type ParentProps } from "solid-js"
+import { Title } from "@solidjs/meta"
 import { useParams } from "@solidjs/router"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { DataProvider } from "@opencode/session-ui/context"
 import { SessionUserMessage } from "@opencode/session-ui/message"
 import { TextShimmer } from "@opencode/ui/text-shimmer"
+import { isFallbackTitle } from "@opencode/util/session-title-fallback"
 import { CommentsProvider } from "@/composer/comments"
 import { readPromptPresentation } from "@/composer/comment-note"
 import { FileProvider } from "@/workspaces/files/model"
@@ -39,6 +41,7 @@ export function TargetSessionRouteContent() {
   return (
     <>
       <MarkSessionViewed sessionID={() => params.id} />
+      <SessionDocumentTitle sessionID={() => params.id} />
       <ModelsProvider directory={directory()}>
         <TargetSessionSettingsCommand />
         <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)}>
@@ -207,3 +210,21 @@ function MarkSessionViewed(props: { sessionID: () => string | undefined }) {
 
   return null
 }
+
+// Browser tabs and desktop windows are otherwise indistinguishable, so name them after the open session.
+function SessionDocumentTitle(props: { sessionID: () => string }) {
+  const data = useData()
+
+  const title = createMemo(() => {
+    const value = data.session.get(props.sessionID())?.title
+
+    return isFallbackTitle(value) ? undefined : value
+  })
+
+  // Keyed: <Title> reads its text inside a meta effect, which would hit a stale Show accessor once the session is deleted.
+  return (
+    <Show when={title()} keyed>
+      {(value) => <Title>{`${value} · OpenCode`}</Title>}
+    </Show>
+  )
+}

packages/desktop/src/renderer/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>OpenCode</title>
+    <!-- data-sm lets the MetaProvider replace this pre-load title with the app's <Title> tags. -->
+    <title data-sm>OpenCode</title>
     <link rel="icon" type="image/png" href="./favicon-96x96-v3.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="./favicon-v3.svg" />
     <link rel="shortcut icon" href="./favicon-v3.ico" />