feat(app): terminal improvements

packages/app/e2e/regression/terminal-hidden.spec.ts

@@ -7,7 +7,7 @@ const projectID = "proj_hidden_terminal_regression"
 const sessionID = "ses_hidden_terminal_regression"
 const title = "Hidden terminal regression"
 
-test("unmounts the terminal renderer while the pane is hidden", async ({ page }) => {
+test("unmounts the terminal panel while it is hidden", async ({ page }) => {
   await page.setViewportSize({ width: 1400, height: 900 })
   await mockOpenCodeServer(page, {
     directory,
@@ -64,13 +64,14 @@ test("unmounts the terminal renderer while the pane is hidden", async ({ page })
   await expect(page.locator('[data-component="terminal"]')).toBeVisible()
 
   await page.keyboard.press("Control+Backquote")
-  await expect(panel).toHaveAttribute("aria-hidden", "true")
+  await expect(panel).toHaveCount(0)
   await expect(page.locator('[data-component="terminal"]')).toHaveCount(0)
 
   await page.setViewportSize({ width: 1200, height: 700 })
   await expect(page.locator('[data-component="terminal"]')).toHaveCount(0)
 
   await page.keyboard.press("Control+Backquote")
+  await expect(panel).toBeVisible()
   await expect(page.locator('[data-component="terminal"]')).toBeVisible()
 })
 

packages/app/e2e/utils/mock-server.ts

@@ -1,7 +1,7 @@
 import type { Page, Route } from "@playwright/test"
 
 const emptyList = new Set(["/skill", "/command", "/lsp", "/formatter", "/vcs/status", "/vcs/diff"])
-const emptyObject = new Set(["/global/config", "/config", "/provider/auth", "/mcp"])
+const emptyObject = new Set(["/global/config", "/config", "/provider/auth", "/mcp", "/experimental/resource"])
 
 export interface MockServerConfig {
   provider: unknown
@@ -55,6 +55,7 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
     const path = url.pathname
     if (path === "/global/event" || path === "/event") return sse(route, config.events?.(), config.eventRetry)
     if (path === "/global/health") return json(route, { healthy: true })
+    if (path === "/experimental/capabilities") return json(route, { backgroundSubagents: false })
     if (path === "/permission")
       return json(route, typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? []))
     if (path === "/question")
@@ -65,6 +66,11 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       return json(route, await config.fileList(url.searchParams.get("path") ?? ""))
     if (path === "/file/content" && config.fileContent)
       return json(route, await config.fileContent(url.searchParams.get("path") ?? ""))
+    if (path === "/api/reference")
+      return json(route, {
+        location: { directory: config.directory, project: { id: (config.project as { id?: string }).id, directory: config.directory } },
+        data: [],
+      })
     if (emptyObject.has(path)) return json(route, {})
     if (emptyList.has(path)) return json(route, [])
     if (path in staticRoutes) return json(route, staticRoutes[path])
@@ -75,6 +81,9 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       return json(route, session ?? {})
     }
 
+    const projectMatch = path.match(/^\/project\/([^/]+)$/)
+    if (projectMatch) return json(route, config.project)
+
     const messageMatch = path.match(/^\/session\/([^/]+)\/message\/([^/]+)$/)
     if (messageMatch) {
       config.onMessage?.({ sessionID: messageMatch[1]!, messageID: messageMatch[2]! })

packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx

@@ -0,0 +1,271 @@
+import type { JSX } from "solid-js"
+import { Show, createEffect, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSortable } from "@dnd-kit/solid/sortable"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+import { useLanguage } from "@/context/language"
+import { focusTerminalById } from "@/pages/session/helpers"
+
+export function SortableTerminalTabV2(props: {
+  terminal: LocalPTY
+  index: () => number
+  newLayout: boolean
+  onClose?: () => void
+}): JSX.Element {
+  const terminal = useTerminal()
+  const language = useLanguage()
+  const sortable = useSortable({
+    get id() {
+      return props.terminal.id
+    },
+    get index() {
+      return props.index()
+    },
+  })
+  const [store, setStore] = createStore({
+    editing: false,
+    title: props.terminal.title,
+    menuOpen: false,
+    menuPosition: { x: 0, y: 0 },
+    blurEnabled: false,
+  })
+  let input: HTMLInputElement | undefined
+  let blurFrame: number | undefined
+  let editRequested = false
+
+  const isDefaultTitle = () => {
+    const number = props.terminal.titleNumber
+    if (!Number.isFinite(number) || number <= 0) return false
+    return isDefaultTerminalTitle(props.terminal.title, number)
+  }
+
+  const label = () => {
+    language.locale()
+    if (props.terminal.title && !isDefaultTitle()) return props.terminal.title
+
+    const number = props.terminal.titleNumber
+    if (Number.isFinite(number) && number > 0) return language.t("terminal.title.numbered", { number })
+    if (props.terminal.title) return props.terminal.title
+    return language.t("terminal.title")
+  }
+
+  const close = () => {
+    const count = terminal.all().length
+    void terminal.close(props.terminal.id)
+    if (count === 1) {
+      props.onClose?.()
+    }
+  }
+
+  const focus = () => {
+    if (store.editing) return
+    terminal.open(props.terminal.id)
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+    focusTerminalById(props.terminal.id)
+  }
+
+  const edit = (e?: Event) => {
+    if (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    setStore("blurEnabled", false)
+    setStore("title", props.terminal.title)
+    setStore("editing", true)
+  }
+
+  const save = () => {
+    if (!store.blurEnabled) return
+
+    const value = store.title.trim()
+    if (value && value !== props.terminal.title) {
+      terminal.update({ id: props.terminal.id, title: value })
+    }
+    setStore("editing", false)
+  }
+
+  const keydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      save()
+      return
+    }
+    if (e.key === "Escape") {
+      e.preventDefault()
+      setStore("editing", false)
+    }
+  }
+
+  const menu = (e: MouseEvent) => {
+    e.preventDefault()
+    setStore("menuPosition", { x: e.clientX, y: e.clientY })
+    setStore("menuOpen", true)
+  }
+
+  createEffect(() => {
+    if (!store.editing) return
+    if (!input) return
+    input.focus()
+    input.select()
+    if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
+    blurFrame = requestAnimationFrame(() => {
+      blurFrame = undefined
+      setStore("blurEnabled", true)
+    })
+  })
+
+  onCleanup(() => {
+    if (blurFrame === undefined) return
+    cancelAnimationFrame(blurFrame)
+  })
+
+  return (
+    <div
+      ref={sortable.ref}
+      class="outline-none focus:outline-none focus-visible:outline-none"
+      classList={{
+        "h-full flex items-center": props.newLayout,
+        "h-full": !props.newLayout,
+      }}
+    >
+      <Show
+        when={props.newLayout}
+        fallback={
+          <div class="relative h-full">
+            <Tabs.Trigger
+              value={props.terminal.id}
+              onClick={focus}
+              onMouseDown={(e) => e.preventDefault()}
+              onContextMenu={menu}
+              class="!shadow-none"
+              classes={{
+                button: "border-0 outline-none focus:outline-none focus-visible:outline-none !shadow-none !ring-0",
+              }}
+              closeButton={
+                <IconButton
+                  icon="close"
+                  variant="ghost"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    close()
+                  }}
+                  aria-label={language.t("terminal.close")}
+                />
+              }
+            >
+              <span onDblClick={edit} classList={{ invisible: store.editing }}>
+                {label()}
+              </span>
+            </Tabs.Trigger>
+            <Show when={store.editing}>
+              <div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
+                <input
+                  ref={input}
+                  type="text"
+                  value={store.title}
+                  onInput={(e) => setStore("title", e.currentTarget.value)}
+                  onBlur={save}
+                  onKeyDown={keydown}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  class="bg-transparent border-none outline-none text-sm min-w-0 flex-1"
+                />
+              </div>
+            </Show>
+            <DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                  class="fixed"
+                  style={{
+                    left: `${store.menuPosition.x}px`,
+                    top: `${store.menuPosition.y}px`,
+                  }}
+                  onCloseAutoFocus={(e) => {
+                    if (!editRequested) return
+                    e.preventDefault()
+                    editRequested = false
+                    requestAnimationFrame(() => edit())
+                  }}
+                >
+                  <DropdownMenu.Item onSelect={() => (editRequested = true)}>
+                    <Icon name="edit" class="w-4 h-4 mr-2" />
+                    {language.t("common.rename")}
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onSelect={close}>
+                    <Icon name="close" class="w-4 h-4 mr-2" />
+                    {language.t("common.close")}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu>
+          </div>
+        }
+      >
+        <MenuV2.Context>
+          <MenuV2.Context.Trigger class="relative" as="div">
+            <Tabs.Trigger
+              value={props.terminal.id}
+              onClick={focus}
+              closeButton={
+                <IconButton
+                  icon="close-small"
+                  variant="ghost"
+                  class="h-5 w-5"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    close()
+                  }}
+                  aria-label={language.t("terminal.close")}
+                />
+              }
+              hideCloseButton
+              onMiddleClick={close}
+            >
+              <span
+                class="truncate"
+                data-slot="terminal-tab-title"
+                onDblClick={edit}
+                classList={{ invisible: store.editing }}
+              >
+                {label()}
+              </span>
+            </Tabs.Trigger>
+            <Show when={store.editing}>
+              <div class="absolute inset-0 flex items-center bg-v2-background-bg-layer-01 z-10 pointer-events-auto rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-muted)] px-2">
+                <input
+                  ref={input}
+                  type="text"
+                  value={store.title}
+                  onInput={(e) => setStore("title", e.currentTarget.value)}
+                  onBlur={save}
+                  onKeyDown={keydown}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  class="bg-transparent border-none outline-none min-w-0 flex-1 p-0 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:440] [font-variation-settings:'slnt'_0] [font-variant-numeric:tabular-nums]"
+                />
+              </div>
+            </Show>
+          </MenuV2.Context.Trigger>
+          <MenuV2.Context.Portal>
+            <MenuV2.Context.Content
+              onCloseAutoFocus={(e) => {
+                if (!editRequested) return
+                e.preventDefault()
+                editRequested = false
+                requestAnimationFrame(() => edit())
+              }}
+            >
+              <MenuV2.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</MenuV2.Item>
+              <MenuV2.Item onSelect={close}>{language.t("common.close")}</MenuV2.Item>
+            </MenuV2.Context.Content>
+          </MenuV2.Context.Portal>
+        </MenuV2.Context>
+      </Show>
+    </div>
+  )
+}

packages/app/src/components/titlebar-tab-strip.tsx

@@ -17,8 +17,6 @@ import { createTabPromptState } from "@/context/prompt"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { canStartTabDrag, isTabCloseTarget } from "./titlebar-tab-gesture"
 
-const sortableTransition = { duration: 0 }
-
 function SessionTabSlot(props: {
   tab: SessionTab
   id: string