feat(app): add session project menu and polish header

packages/app/e2e/regression/session-header-controls.spec.ts

@@ -23,6 +23,7 @@ for (const direction of ["ltr", "rtl"] as const) {
     await page.goto(stressSessionHref(fixture.targetID))
     const header = page.locator("[data-session-title]")
     const more = header.getByRole("button", { name: "More options", exact: true })
+    const project = header.getByRole("button", { name: fixture.project.name, exact: true })
     const review = header.getByRole("button", { name: "Toggle review", exact: true })
     const details = header.getByRole("button", { name: "Session details", exact: true })
     await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
@@ -31,22 +32,40 @@ for (const direction of ["ltr", "rtl"] as const) {
     await expect(details).toBeVisible()
     const status = page.locator('[data-slot="titlebar-v2"]').getByRole("button", { name: "Status" })
     await expect(status).toBeVisible()
-    await expect
-      .poll(async () => {
-        const boxes = await Promise.all(
-          [header.getByRole("heading"), more, review, details].map((button) => button.boundingBox()),
-        )
-        const [title, menu, sidebar, summary] = boxes
-        if (!title || !menu || !sidebar || !summary) return false
-        return direction === "ltr"
-          ? Math.abs(title.x + title.width - menu.x) <= 1 &&
-              menu.x + menu.width <= summary.x &&
-              summary.x + summary.width <= sidebar.x
-          : Math.abs(menu.x + menu.width - title.x) <= 1 &&
-              sidebar.x + sidebar.width <= summary.x &&
-              summary.x + summary.width <= menu.x
-      })
-      .toBe(true)
+    const titleBounds = await header.getByRole("heading").boundingBox()
+    expect(titleBounds).not.toBeNull()
+    for (const editing of [false, true]) {
+      if (editing) {
+        await header.getByRole("heading").click()
+        await expect(header.getByRole("textbox")).toHaveValue(fixture.expected.targetTitle)
+        await expect(header.getByRole("textbox")).toBeFocused()
+      }
+      await expect(header.locator('[data-slot="session-title-child"]')).toHaveCSS("padding-left", "4px")
+      await expect(header.locator('[data-slot="session-title-child"]')).toHaveCSS("padding-right", "4px")
+      await expect
+        .poll(async () => {
+          const boxes = await Promise.all(
+            [project, header.locator('[data-slot="session-title-child"]'), more, review, details].map((control) =>
+              control.boundingBox(),
+            ),
+          )
+          const [icon, title, menu, sidebar, summary] = boxes
+          if (!icon || !title || !menu || !sidebar || !summary || !titleBounds) return false
+          if (Math.abs(title.y - titleBounds.y) > 0.5 || Math.abs(title.height - titleBounds.height) > 0.5) return false
+          return direction === "ltr"
+            ? Math.abs(title.x - icon.x - icon.width - 2) <= 0.5 &&
+                Math.abs(menu.x - title.x - title.width - 2) <= 0.5 &&
+                menu.x + menu.width <= summary.x &&
+                summary.x + summary.width <= sidebar.x
+            : Math.abs(icon.x - title.x - title.width - 2) <= 0.5 &&
+                Math.abs(title.x - menu.x - menu.width - 2) <= 0.5 &&
+                sidebar.x + sidebar.width <= summary.x &&
+                summary.x + summary.width <= menu.x
+        })
+        .toBe(true)
+    }
+    await header.getByRole("textbox").press("Escape")
+    await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
 
     await review.click()
     await expect(review).toHaveAttribute("aria-expanded", "true")
@@ -55,6 +74,52 @@ for (const direction of ["ltr", "rtl"] as const) {
     await expect(review).toHaveAttribute("aria-expanded", "false")
 
     await more.click()
+    const options = page.getByRole("menu")
+    await expect(options.getByRole("menuitem")).toHaveText(["Rename", "Export…", "Delete…"])
+    if (direction === "ltr") {
+      await expect
+        .poll(async () => {
+          const [button, menu] = await Promise.all([
+            header.getByRole("button", { name: "More options", exact: true, includeHidden: true }).boundingBox(),
+            options.boundingBox(),
+          ])
+          return button && menu ? Math.abs(button.x - menu.x) : Infinity
+        })
+        .toBeLessThanOrEqual(1)
+    }
+    await expect
+      .poll(() =>
+        options.evaluate((element) => {
+          const menu = element.getBoundingClientRect()
+          const rtl = getComputedStyle(element).direction === "rtl"
+          return Math.min(
+            ...Array.from(element.querySelectorAll('[data-slot="menu-v2-item-content"]'), (label) => {
+              const range = document.createRange()
+              range.selectNodeContents(label)
+              const text = range.getBoundingClientRect()
+              return rtl ? text.left - menu.left : menu.right - text.right
+            }),
+          )
+        }),
+      )
+      .toBeCloseTo(32, 0)
+    await expect
+      .poll(() =>
+        options.evaluate((element) => {
+          const menu = element.getBoundingClientRect()
+          const divider = element.querySelector('[data-slot="menu-v2-separator"]')?.getBoundingClientRect()
+          const rows = Array.from(element.querySelectorAll('[role="menuitem"]'), (row) => row.getBoundingClientRect())
+          return (
+            !!divider &&
+            Math.abs(divider.left - menu.left) <= 0.5 &&
+            Math.abs(divider.right - menu.right) <= 0.5 &&
+            rows.every(
+              (row) => Math.abs(row.left - menu.left - 2) <= 0.5 && Math.abs(menu.right - row.right - 2) <= 0.5,
+            )
+          )
+        }),
+      )
+      .toBe(true)
     await expect(page.getByRole("menuitem", { name: "Server status", exact: true })).toHaveCount(0)
     await page.keyboard.press("Escape")
     await status.click()

packages/app/e2e/regression/session-project-menu.spec.ts

@@ -0,0 +1,250 @@
+import { expect, test } from "@playwright/test"
+import { dict } from "../../src/runtime/i18n/ar"
+import en from "../../src/runtime/i18n/en"
+import { fixture, pageMessages } from "../performance/timeline/session-timeline-stress.fixture"
+import { installStressSessionTabs, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+test.use({ serviceWorkers: "block" })
+
+for (const direction of ["ltr", "rtl"] as const) {
+  for (const workspace of [false, true]) {
+    test(`session project menu for ${workspace ? "worktree" : "local"} in ${direction}`, async ({ page }) => {
+      const copy = direction === "rtl" ? dict : en
+      const directory = workspace
+        ? "C:/OpenCode/Worktrees/مشروع-42/long-folder-name-for-checking-wrapped-worktree-paths/another-long-folder-name-to-exercise-the-full-path-tooltip"
+        : fixture.directory
+      const project = {
+        ...fixture.project,
+        name: workspace
+          ? "مشروع Timeline 42 with a long project name that needs truncation and enough additional text to wrap inside the tooltip"
+          : "Timeline project",
+        sandboxes: workspace ? [directory] : [],
+        icon: {
+          url: `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="7" fill="blue"/></svg>')}`,
+        },
+      }
+      await mockOpenCodeServer(page, {
+        directory,
+        project,
+        sessions: fixture.sessions.map((session) => ({ ...session, directory })),
+        provider: fixture.provider,
+        pageMessages,
+      })
+      await installStressSessionTabs(page)
+      await page.addInitScript((direction) => {
+        localStorage.setItem(
+          "opencode.global.dat:language",
+          JSON.stringify({ locale: direction === "rtl" ? "ar" : "en" }),
+        )
+        const settings = JSON.parse(localStorage.getItem("settings.v3") ?? "{}")
+        localStorage.setItem(
+          "settings.v3",
+          JSON.stringify({ ...settings, general: { ...settings.general, showProjectIcon: false } }),
+        )
+      }, direction)
+      await page.setViewportSize({ width: workspace ? 900 : 1440, height: 900 })
+      await page.goto(stressSessionHref(fixture.targetID))
+      const header = page.locator("[data-session-title]")
+      await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
+      await expect(page.locator("html")).toHaveAttribute("dir", direction)
+
+      const trigger = header.getByRole("button", { name: project.name, exact: true })
+      await expect(trigger).toBeEnabled()
+      await expect(trigger.locator("use")).toHaveAttribute(
+        "href",
+        `#opencode-v2-icon-${workspace ? "workspace-isolated" : "monitor"}`,
+      )
+      const background = await trigger.evaluate((element) => getComputedStyle(element).backgroundColor)
+      await trigger.hover()
+      await expect(trigger).not.toHaveCSS("background-color", background)
+      await expect(page.getByRole("tooltip")).toHaveText(project.name)
+      await trigger.click()
+
+      const menu = page.getByRole("menu", { name: project.name, exact: true })
+      const settings = menu.getByRole("menuitem", { name: "Edit project", exact: true })
+      const projectItem = menu.getByRole("menuitem", { name: project.name, exact: true })
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(page.getByRole("tooltip")).toBeHidden()
+      await expect(menu.getByText(project.name, { exact: true })).toBeVisible()
+      await expect(menu.locator('[data-slot="project-avatar-image"]')).toHaveAttribute("src", project.icon.url)
+      await expect(menu.getByText(directory, { exact: true })).toBeVisible()
+      await expect(menu.getByText(directory, { exact: true })).toHaveAttribute("dir", "ltr")
+      await expect(menu.locator('use[href="#opencode-v2-icon-folder"]')).toHaveCount(1)
+      await expect(menu).toHaveCSS("direction", direction)
+      await expect(menu.getByRole("menuitem")).toHaveText([project.name, directory, "Edit project"])
+      await expect(menu.getByRole("menuitem", { name: directory, exact: true })).toBeDisabled()
+      await expect(settings).toBeEnabled()
+      await expect
+        .poll(() => menu.evaluate((element) => element.getBoundingClientRect().width))
+        .toBeLessThanOrEqual(320)
+      for (const text of [project.name, directory]) {
+        const label = menu.getByText(text, { exact: true })
+        await expect(label).toHaveCSS("text-overflow", "ellipsis")
+        await expect(label).toHaveCSS("white-space", "nowrap")
+        if (workspace) {
+          await expect.poll(() => label.evaluate((element) => element.scrollWidth > element.clientWidth)).toBe(true)
+        }
+      }
+      await expect.poll(() => menu.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true)
+      const icons = menu.locator(
+        '[data-component="project-avatar-v2"], [data-slot="icon-svg"]:not([data-slot="session-project-open-icon"] *)',
+      )
+      await expect(icons).toHaveCount(3)
+      await expect
+        .poll(async () => {
+          const [button, centers] = await Promise.all([
+            trigger.boundingBox(),
+            icons.evaluateAll((elements) =>
+              elements.map((element) => {
+                const box = element.getBoundingClientRect()
+                return box.x + box.width / 2
+              }),
+            ),
+          ])
+          return !!button && centers.every((center) => Math.abs(center - button.x - button.width / 2) <= 1)
+        })
+        .toBe(true)
+
+      if (!workspace) await page.clock.install()
+      for (const text of [project.name, directory]) {
+        const label = menu.getByText(text, { exact: true })
+        const item = menu.getByRole("menuitem", { name: text, exact: true })
+        const anchor = item.locator("..")
+        const openIcon = item.locator('[data-slot="session-project-open-icon"]')
+        const content = item.locator(".session-project-link-content")
+        const width = await label.evaluate((element) => element.getBoundingClientRect().width)
+        await expect(openIcon).toHaveCount(text === directory ? 1 : 0)
+        await anchor.hover()
+        await expect(content).toHaveCSS("mask-image", "none")
+        await expect.poll(() => label.evaluate((element) => element.getBoundingClientRect().width)).toBe(width)
+        if (text === directory) {
+          await expect(openIcon).toHaveCSS("opacity", "0")
+          await expect(openIcon.locator("use")).toHaveAttribute("href", "#opencode-v2-icon-arrow-up-right")
+          await expect
+            .poll(() => openIcon.locator("svg").evaluate((element: SVGSVGElement) => element.getBBox().width))
+            .toBeGreaterThan(0)
+          await expect
+            .poll(async () => {
+              const [row, icon] = await Promise.all([item.boundingBox(), openIcon.boundingBox()])
+              if (!row || !icon) return false
+              return (
+                Math.abs(row.y + row.height / 2 - icon.y - icon.height / 2) <= 0.5 &&
+                Math.abs((direction === "rtl" ? icon.x - row.x : row.x + row.width - icon.x - icon.width) - 12) <= 0.5
+              )
+            })
+            .toBe(true)
+        }
+        await expect(label).toHaveCSS("cursor", "default")
+        await expect(anchor).toHaveCSS("cursor", "default")
+        const tooltip = page.getByRole("tooltip")
+        if (workspace) {
+          await expect(tooltip).toHaveText(text)
+          await expect(tooltip).toHaveCSS("white-space", "normal")
+          await expect
+            .poll(() => tooltip.evaluate((element) => element.getBoundingClientRect().width))
+            .toBeLessThanOrEqual(480)
+          await expect
+            .poll(() =>
+              tooltip
+                .getByText(text, { exact: true })
+                .evaluate(
+                  (element) =>
+                    element.getBoundingClientRect().height > Number.parseFloat(getComputedStyle(element).lineHeight),
+                ),
+            )
+            .toBe(true)
+          await expect
+            .poll(async () => {
+              const [row, tip] = await Promise.all([anchor.boundingBox(), tooltip.boundingBox()])
+              return !!row && !!tip && Math.abs(row.y - tip.y - tip.height - 2) <= 1
+            })
+            .toBe(true)
+        }
+        if (!workspace) {
+          await page.clock.runFor(500)
+          await expect(tooltip).toBeHidden()
+        }
+        await settings.hover()
+        await expect(tooltip).toBeHidden()
+        if (text === directory) await expect(openIcon).toHaveCSS("opacity", "0")
+        await expect(content).toHaveCSS("mask-image", "none")
+      }
+
+      await page.keyboard.press("Escape")
+      await expect(menu).toBeHidden()
+      await expect(trigger).toBeFocused()
+      await trigger.press("ArrowDown")
+      await expect(projectItem).toBeFocused()
+      await page.keyboard.press("ArrowDown")
+      await expect(settings).toBeFocused()
+      await page.keyboard.press("Enter")
+      const dialog = page.getByRole("dialog")
+      await expect(dialog.getByRole("heading", { name: copy["dialog.project.edit.title"], exact: true })).toBeVisible()
+      await expect(dialog.getByRole("textbox", { name: copy["dialog.project.edit.name"], exact: true })).toHaveValue(
+        project.name,
+      )
+      await expect(menu).toBeHidden()
+      await dialog.getByRole("button", { name: copy["common.cancel"], exact: true }).click()
+      await expect(dialog).toBeHidden()
+      await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
+
+      await page.setViewportSize({ width: 1440, height: 900 })
+      for (const selected of [false, true]) {
+        if (selected) {
+          await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+          await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
+        }
+        await trigger.click()
+        await expect(projectItem).toBeEnabled()
+        const background = await projectItem.evaluate((element) => getComputedStyle(element).backgroundColor)
+        await projectItem.hover()
+        await expect(projectItem).not.toHaveCSS("background-color", background)
+        await projectItem.click()
+        await expect(page).toHaveURL(new URL("/", page.url()).href)
+        await expect(menu).toBeHidden()
+        const projectRow = page.locator('[data-component="home-project-row"]').filter({ hasText: project.name })
+        await expect(projectRow).toBeVisible()
+        await expect(projectRow).toHaveAttribute("data-selected", "")
+        await expect(
+          page.locator(`[data-component="home-session-row-container"][data-session-id="${fixture.targetID}"]`),
+        ).toBeVisible()
+      }
+    })
+  }
+}
+
+test("path arrow has a glyph when the page has an older icon sprite", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    sessions: fixture.sessions,
+    provider: fixture.provider,
+    pageMessages,
+  })
+  await installStressSessionTabs(page)
+  await page.route(
+    (url) => url.pathname === stressSessionHref(fixture.targetID),
+    async (route) => {
+      const response = await route.fetch()
+      await route.fulfill({
+        response,
+        body: (await response.text()).replace(
+          '<div id="root"',
+          '<svg id="opencode-v2-icon-sprite" width="0" height="0" aria-hidden="true"><symbol id="opencode-v2-icon-monitor" viewBox="0 0 16 16"><path d="M1 1h14v14H1z"/></symbol></svg><div id="root"',
+        ),
+      })
+    },
+  )
+  await page.goto(stressSessionHref(fixture.targetID))
+  const header = page.locator("[data-session-title]")
+  await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
+  await header.getByRole("button", { name: fixture.project.name, exact: true }).click()
+  const path = page.getByRole("menu").getByRole("menuitem", { name: fixture.directory, exact: true })
+  const arrow = path.locator('[data-slot="session-project-open-icon"]')
+  await expect(arrow).toHaveCount(1)
+  await expect
+    .poll(() => arrow.locator("svg").evaluate((element: SVGSVGElement) => element.getBBox().width))
+    .toBeGreaterThan(0)
+  await expect(page.locator("#opencode-v2-icon-sprite")).toHaveCount(1)
+})

packages/app/src/runtime/i18n/en.ts

@@ -931,6 +931,7 @@ export const dict = {
   "settings.desktop.wsl.title": "WSL integration",
   "settings.desktop.wsl.description": "Run the OpenCode server inside WSL on Windows.",
   "dialog.server.authenticate.title": "Authenticate",
+  "project.settings.title": "Edit project",
   "project.settings.general.description": "Manage project name and appearance",
   "project.settings.scripts": "Scripts",
   "project.settings.scripts.description": "Configure scripts for this project",

packages/app/src/session/session-identity-header.css

@@ -0,0 +1,51 @@
+/* Informational tooltips must not block menu items. Kobalte sets pointer events inline. */
+[data-popper-positioner]:has(.session-project-info-tooltip),
+.session-project-info-tooltip {
+  pointer-events: none !important;
+}
+
+.session-options-menu [data-component="menu-v2-item"] {
+  padding-inline-end: 30px;
+}
+
+.session-project-link {
+  --session-project-fade-direction: to right;
+  position: relative;
+
+  &:dir(rtl) {
+    --session-project-fade-direction: to left;
+  }
+}
+
+.session-project-link-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.session-project-link-open {
+  position: absolute;
+  inset-inline-end: 12px;
+  inset-block: 0;
+  display: flex;
+  align-items: center;
+  color: var(--v2-icon-icon-muted);
+  pointer-events: none;
+  opacity: 0;
+}
+
+.session-project-link:is(:hover, [data-highlighted]):not([data-disabled]) {
+  .session-project-link-content {
+    mask-image: linear-gradient(
+      var(--session-project-fade-direction),
+      #000 calc(100% - 40px),
+      transparent calc(100% - 24px)
+    );
+  }
+
+  .session-project-link-open {
+    opacity: 1;
+  }
+}

packages/app/src/session/session-identity-header.tsx

@@ -1,18 +1,27 @@
 import type { SessionInfo } from "@opencode-ai/client/promise"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
 import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { useNavigate } from "@solidjs/router"
 import { createMemo, Show, type ParentProps } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useServer } from "@/runtime/server/current"
 import { useLanguage } from "@/runtime/i18n/language"
-import { displayName, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
+import { usePlatform } from "@/runtime/platform/platform"
+import { displayName, errorMessage, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
+import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/shell/state/layout"
 import { tabKey, useTabs } from "@/shell/tabs/tabs"
 import { useSettings } from "@/settings/model"
 import { pathKey } from "@/workspaces/path-key"
 import { isWorkspaceDirectory } from "@/workspaces/paths"
 import { sessionHref } from "@/shell/routes/session"
+import { showToast } from "@/shell/notifications/toast"
 import { sessionTitle } from "./title"
+import "./session-identity-header.css"
 
 export function SessionTitleHeader(props: ParentProps) {
   return (
@@ -25,6 +34,147 @@ export function SessionTitleHeader(props: ParentProps) {
   )
 }
 
+export function SessionProjectMenu(props: {
+  project?: LocalProject
+  directory?: string
+  workspace: boolean
+  showProjectIcon: boolean
+}) {
+  const server = useServer()
+  const language = useLanguage()
+  const dialog = useDialog()
+  const platform = usePlatform()
+  const layout = useLayout()
+  const navigate = useNavigate()
+  const [state, setState] = createStore({ projectTruncated: false, pathTruncated: false })
+  const projectName = createMemo(() => displayName(props.project ?? { worktree: props.directory ?? "" }))
+  const canOpenPath = () =>
+    platform.platform === "desktop" && !!platform.openPath && server.isLocal && !!props.directory
+  const openPath = () => {
+    if (!canOpenPath() || !platform.openPath || !props.directory) return
+    void platform.openPath(props.directory).catch((cause: unknown) =>
+      showToast({
+        title: language.t("common.requestFailed"),
+        description: errorMessage(cause, language.t("common.requestFailed")),
+      }),
+    )
+  }
+  const openProjectSettings = async () => {
+    const current = props.project
+    if (!current) return
+    const { DialogEditProject } = await import("@/settings/workspaces/project-dialog")
+    dialog.push(() => <DialogEditProject project={current} server={server.conn} />)
+  }
+
+  return (
+    <Menu placement="bottom-start" gutter={4} shift={-10} modal={false}>
+      <Tooltip placement="bottom" value={<bdi>{projectName()}</bdi>} class="flex shrink-0">
+        <Menu.Trigger
+          as={IconButton}
+          variant="ghost-muted"
+          aria-label={projectName()}
+          data-slot="session-project-trigger"
+          icon={
+            <Show
+              when={props.showProjectIcon}
+              fallback={
+                <span class={props.workspace ? "text-v2-icon-icon-accent" : "text-v2-icon-icon-muted"}>
+                  <Icon name={props.workspace ? "workspace-isolated" : "monitor"} />
+                </span>
+              }
+            >
+              <ProjectAvatar
+                fallback={projectName()}
+                src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+                variant={getProjectAvatarVariant(props.project?.icon?.color)}
+              />
+            </Show>
+          }
+        />
+      </Tooltip>
+      <Menu.Portal>
+        <Menu.Content class="w-max max-w-[min(320px,calc(100vw-16px))]" aria-label={projectName()}>
+          <Tooltip
+            placement="top"
+            gutter={2}
+            disabled={!state.projectTruncated}
+            class="min-w-0 cursor-default"
+            contentClass="session-project-info-tooltip max-w-[min(480px,calc(100vw-16px))] whitespace-normal break-all"
+            value={<bdi>{projectName()}</bdi>}
+          >
+            <Menu.Item
+              class="min-w-0 w-full"
+              disabled={!props.project}
+              onSelect={() => {
+                if (!props.project) return
+                layout.home.setSelection({ server: server.key, directory: props.project.worktree })
+                navigate("/")
+              }}
+            >
+              <span class="session-project-link-content">
+                <ProjectAvatar
+                  class="shrink-0"
+                  aria-hidden="true"
+                  fallback={projectName()}
+                  src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+                  variant={getProjectAvatarVariant(props.project?.icon?.color)}
+                />
+                <bdi
+                  ref={(element) =>
+                    createResizeObserver(element, () =>
+                      setState("projectTruncated", element.scrollWidth > element.clientWidth),
+                    )
+                  }
+                  class="min-w-0 truncate text-13-medium"
+                >
+                  {projectName()}
+                </bdi>
+              </span>
+            </Menu.Item>
+          </Tooltip>
+          <Tooltip
+            placement="top"
+            gutter={2}
+            disabled={!state.pathTruncated}
+            class="min-w-0 cursor-default"
+            contentClass="session-project-info-tooltip max-w-[min(480px,calc(100vw-16px))] whitespace-normal break-all"
+            value={<bdi dir="ltr">{props.directory}</bdi>}
+          >
+            <Menu.Item
+              class="session-project-link min-w-0 w-full cursor-default"
+              disabled={!canOpenPath()}
+              onSelect={openPath}
+            >
+              <span class="session-project-link-content">
+                <Icon name="folder" class="shrink-0 text-v2-icon-icon-muted" />
+                <bdi
+                  ref={(element) =>
+                    createResizeObserver(element, () =>
+                      setState("pathTruncated", element.scrollWidth > element.clientWidth),
+                    )
+                  }
+                  dir="ltr"
+                  class="min-w-0 truncate text-v2-text-text-muted"
+                >
+                  {props.directory}
+                </bdi>
+              </span>
+              <span data-slot="session-project-open-icon" class="session-project-link-open" aria-hidden="true">
+                <Icon name="arrow-up-right" />
+              </span>
+            </Menu.Item>
+          </Tooltip>
+          <Menu.Separator />
+          <Menu.Item disabled={!props.project} onSelect={() => void openProjectSettings()}>
+            <Icon name="settings-gear" class="text-v2-icon-icon-muted" />
+            {language.t("project.settings.title")}
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
+  )
+}
+
 export function SessionIdentityHeader(props: { sessionID: string; session?: SessionInfo }) {
   const server = useServer()
   const tabs = useTabs()
@@ -95,25 +245,13 @@ export function SessionIdentityHeader(props: { sessionID: string; session?: Sess
       <SessionTitleHeader>
         <div class="flex h-12 w-full items-center justify-between gap-2">
           <div class="flex min-w-0 flex-1 items-center gap-1">
-            <div class="flex min-w-0 w-full flex-1 items-center">
-              <span
-                classList={{
-                  "flex size-6 shrink-0 items-center justify-center": true,
-                  "text-v2-icon-icon-accent": workspaceSession() && !showProjectIcon(),
-                  "text-v2-icon-icon-muted": !workspaceSession() && !showProjectIcon(),
-                }}
-              >
-                <Show
-                  when={showProjectIcon()}
-                  fallback={<Icon name={workspaceSession() ? "workspace-isolated" : "monitor"} />}
-                >
-                  <ProjectAvatar
-                    fallback={displayName(project() ?? { worktree: directory() ?? "" })}
-                    src={getProjectAvatarSource(project()?.id, project()?.icon)}
-                    variant={getProjectAvatarVariant(project()?.icon?.color)}
-                  />
-                </Show>
-              </span>
+            <div class="flex min-w-0 w-full flex-1 items-center gap-0.5">
+              <SessionProjectMenu
+                project={project()}
+                directory={directory()}
+                workspace={workspaceSession()}
+                showProjectIcon={showProjectIcon()}
+              />
               <Show when={parentTitle()}>
                 {(value) => (
                   <button
@@ -141,7 +279,7 @@ export function SessionIdentityHeader(props: { sessionID: string; session?: Sess
                   <h1
                     data-slot={parentID() ? "session-title-child" : undefined}
                     dir="auto"
-                    class="w-fit truncate rounded-[6px] px-2 py-1 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base"
+                    class="w-fit truncate rounded-[6px] px-1 py-1 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base"
                   >
                     {value()}
                   </h1>

packages/app/src/session/timeline/message-timeline.tsx

@@ -10,7 +10,6 @@ import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Menu } from "@opencode-ai/ui/menu"
 import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import type { Project } from "@/runtime/server/types"
 import { getFilename } from "@opencode-ai/util/path"
@@ -31,7 +30,7 @@ import { displayName, getProjectAvatarSource, projectForSession } from "@/shell/
 import { parseCommentNote, readPromptPresentation } from "@/composer/comment-note"
 import { useCommand } from "@/shell/commands/command"
 import { useSettings } from "@/settings/model"
-import { SessionTitleHeader } from "../session-identity-header"
+import { SessionProjectMenu, SessionTitleHeader } from "../session-identity-header"
 import { SessionHeader } from "@/session/header/session-header"
 import { SessionProgressIndicatorV2 } from "@opencode-ai/session-ui/v2/session-progress-indicator-v2"
 
@@ -385,7 +384,6 @@ function MessageTimelineView(
   const workspaceSession = createMemo(() => isWorkspaceDirectory(project(), sessionDirectory()))
   const showProjectIcon = () => import.meta.env.VITE_OPENCODE_CHANNEL !== "prod" && settings.general.showProjectIcon()
   const avatarProject = createMemo(() => {
-    if (!showProjectIcon()) return
     const session = props.session.data.info()
     if (!session) return
     return projectForSession(session, server.ctx.projects.list())
@@ -670,36 +668,13 @@ function MessageTimelineView(
           <SessionTitleHeader>
             <div class="h-12 w-full flex items-center justify-between gap-2">
               <div class="flex items-center gap-1 min-w-0 flex-1">
-                <div class="flex items-center min-w-0 flex-1 w-full">
-                  <Show
-                    when={workspaceSession()}
-                    fallback={
-                      <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
-                        <Show when={showProjectIcon()} fallback={<Icon name="monitor" />}>
-                          {projectAvatar()}
-                        </Show>
-                      </span>
-                    }
-                  >
-                    <Tooltip
-                      placement="bottom-start"
-                      value={sessionDirectory()}
-                      contentClass="max-w-[calc(100vw-32px)] break-all"
-                    >
-                      <span
-                        tabIndex={0}
-                        aria-label={sessionDirectory()}
-                        classList={{
-                          "flex size-6 shrink-0 items-center justify-center": true,
-                          "text-v2-icon-icon-accent": !showProjectIcon(),
-                        }}
-                      >
-                        <Show when={showProjectIcon()} fallback={<Icon name="workspace-isolated" />}>
-                          {projectAvatar()}
-                        </Show>
-                      </span>
-                    </Tooltip>
-                  </Show>
+                <div class="flex items-center gap-0.5 min-w-0 flex-1 w-full">
+                  <SessionProjectMenu
+                    project={avatarProject()}
+                    directory={sessionDirectory()}
+                    workspace={workspaceSession()}
+                    showProjectIcon={showProjectIcon()}
+                  />
                   <Show when={parentID()}>
                     <button
                       type="button"
@@ -723,7 +698,7 @@ function MessageTimelineView(
                       fallback={
                         <h1
                           data-slot="session-title-child"
-                          class="truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover"
+                          class="truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base w-fit rounded-[6px] px-1 py-1 hover:bg-v2-overlay-simple-overlay-hover"
                           onClick={openTitleEditor}
                         >
                           {childTitle()}
@@ -738,7 +713,7 @@ function MessageTimelineView(
                         dir="auto"
                         value={title.draft}
                         disabled={props.pending.rename()}
-                        class="block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base field-sizing-content self-start rounded-[6px] px-2 py-1"
+                        class="block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base field-sizing-content rounded-[6px] px-1 py-1"
                         style={{
                           "--inline-input-shadow": "none",
                           "text-align": "start",
@@ -765,7 +740,7 @@ function MessageTimelineView(
                     {(id) => (
                       <Menu
                         gutter={6}
-                        placement="bottom-end"
+                        placement="bottom-start"
                         open={title.menuOpen}
                         onOpenChange={(open) => setTitle("menuOpen", open)}
                       >
@@ -780,7 +755,8 @@ function MessageTimelineView(
                         />
                         <Menu.Portal>
                           <Menu.Content
-                            style={{ "min-width": "160px" }}
+                            class="session-options-menu w-max"
+                            style={{ "min-width": "0" }}
                             onCloseAutoFocus={(event) => {
                               if (!title.pendingRename) return
                               event.preventDefault()

packages/ui/src/icons/icon/icon.stories.tsx

@@ -5,6 +5,7 @@ const names = [
   "archive",
   "arrow-left",
   "arrow-right",
+  "arrow-up-right",
   "branch",
   "check",
   "chevron-down",

packages/ui/src/icons/icon/icon.tsx

@@ -148,6 +148,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M4.14908 11.0081H1.76282V1.51758H9.1038V2.55588M14.2225 4.99681H6.75397V14.4873H14.2225V4.99681Z" stroke="currentColor"/>`,
   },
+  "arrow-up-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M11 9.56V5H6.44M11 5L5 11" stroke="currentColor"/>`,
+  },
   "outline-square-arrow": {
     viewBox: "0 0 16 16",
     body: `<path d="M13.5555 6.66656V2.44434H9.33326M13.5555 2.44434L7.99993 7.99989M13.5555 9.33324V13.5555C13.5555 13.5555 12.7599 13.5555 11.7777 13.5555H2.44438C2.44438 13.5555 2.44438 12.7599 2.44438 11.7777V4.22213C2.44438 3.2399 2.44434 2.44435 2.44434 2.44435H6.66661" stroke="currentColor"/>`,
@@ -190,12 +194,8 @@ function getIcon(name: IconName) {
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
-  if (document.getElementById(spriteID)) {
-    spriteInserted = true
-    return
-  }
-
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  // Hot reload preserves the DOM sprite, but its symbols may be from an older module.
+  const svg = document.getElementById(spriteID) ?? document.createElementNS("http://www.w3.org/2000/svg", "svg")
   svg.id = spriteID
   svg.setAttribute("aria-hidden", "true")
   svg.setAttribute("width", "0")
@@ -205,7 +205,7 @@ function ensureSprite() {
   svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
     .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
     .join("")
-  document.body.insertBefore(svg, document.body.firstChild)
+  if (!svg.isConnected) document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }