feat(desktop): make window title reflect currently selected project a…

packages/app/src/pages/home.tsx

@@ -231,6 +231,9 @@ function HomeDesign() {
     if (conn) setSelection({ server: ServerConnection.key(conn) })
   })
 
+  createEffect(() => {
+    document.title = "OpenCode"
+  })
   createEffect(() => {
     const pending = pendingHomeNavigation
     if (!pending || pending.server !== server.key) return

packages/app/src/pages/layout.tsx

@@ -25,6 +25,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
+import { first } from "@opencode-ai/ui/utils/first"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { Session, type Message } from "@opencode-ai/sdk/v2/client"
 import { usePlatform } from "@/context/platform"
@@ -638,6 +639,12 @@ export default function Layout(props: ParentProps) {
     return result
   })
 
+  const currentSession = createMemo(() => {
+    const id = params.id
+    if (!id) return
+    return currentSessions().find((s) => s.id === id)
+  })
+
   type PrefetchQueue = {
     inflight: Set<string>
     pending: string[]
@@ -886,6 +893,14 @@ export default function Layout(props: ParentProps) {
 
     warm(sessions, index)
   })
+  createEffect(() => {
+    const project = currentProject()
+    const session = currentSession()
+    const projectName = project ? displayName(project) : getFilename(currentDir() ?? "")
+    const letter = first(projectName).toUpperCase()
+    const title = session?.title
+    document.title = title ? `${letter}|${title} - ${projectName}` : `${letter}|${projectName}`
+  })
 
   function navigateSessionByOffset(offset: number) {
     const sessions = currentSessions()

packages/ui/package.json

@@ -23,6 +23,7 @@
     "./icons/app": "./src/components/app-icons/types.ts",
     "./fonts/*": "./src/assets/fonts/*",
     "./audio/*": "./src/assets/audio/*",
+    "./utils/*": "./src/utils/*.ts",
     "./v2/*.css": "./src/v2/components/*.css",
     "./v2/*": "./src/v2/components/*.tsx",
     "./v2/styles/*": "./src/v2/styles/*"

packages/ui/src/utils/first.ts

@@ -0,0 +1,10 @@
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+export function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}

packages/ui/src/v2/components/avatar-v2.tsx

@@ -1,17 +1,7 @@
+import { first } from "../../utils/first"
 import { type ComponentProps, splitProps, Show } from "solid-js"
 import "./avatar-v2.css"
 
-const segmenter =
-  typeof Intl !== "undefined" && "Segmenter" in Intl
-    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
-    : undefined
-
-function first(value: string) {
-  if (!value) return ""
-  if (!segmenter) return Array.from(value)[0] ?? ""
-  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
-}
-
 export interface AvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string

packages/ui/src/v2/components/project-avatar-v2.tsx

@@ -1,17 +1,7 @@
+import { first } from "../../utils/first"
 import { type ComponentProps, splitProps, Show } from "solid-js"
 import "./project-avatar-v2.css"
 
-const segmenter =
-  typeof Intl !== "undefined" && "Segmenter" in Intl
-    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
-    : undefined
-
-function first(value: string) {
-  if (!value) return ""
-  if (!segmenter) return Array.from(value)[0] ?? ""
-  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
-}
-
 export const PROJECT_AVATAR_VARIANTS = [
   "orange",
   "yellow",