fix(tui): keep shell commands full width (#42339)

Co-authored-by: James Long <17031+jlongster@users.noreply.github.com>

packages/app/src/pages/session/timeline/controller.tsx

@@ -21,7 +21,6 @@ import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from
 import { showToast } from "@/utils/toast"
 import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
 import { createTimelineProjection } from "./projection"
-import { displayName } from "@/pages/layout/helpers"
 
 const emptyMessages: Message[] = []
 const emptyParts: Part[] = []
@@ -66,10 +65,6 @@ export function createTimelineController(input: {
   })
   const titleValue = createMemo(() => input.session.data.info()?.title)
   const titleLabel = createMemo(() => sessionTitle(titleValue()))
-  const projectName = createMemo(() => {
-    const project = sync().project
-    if (project) return displayName(project)
-  })
   const shareUrl = (): string | undefined => undefined
   const shareEnabled = () => false
   const parentMessages = createMemo(() => {
@@ -270,7 +265,6 @@ export function createTimelineController(input: {
       status: input.session.data.status,
       titleValue,
       titleLabel,
-      projectName,
       shareUrl,
       shareEnabled,
       parentID: input.session.data.parentID,

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

@@ -252,7 +252,6 @@ function MessageTimelineView(
   const sessionID = props.data.sessionID
   const sessionStatus = props.data.status
   const titleLabel = props.data.titleLabel
-  const projectName = props.data.projectName
   const shareUrl = props.data.shareUrl
   const shareEnabled = props.data.shareEnabled
   const parentID = props.data.parentID
@@ -1120,21 +1119,6 @@ function MessageTimelineView(
                 }}
               >
                 <div class="flex items-center min-w-0 flex-1 w-full">
-                  <Show when={projectName()} keyed>
-                    {(name) => (
-                      <>
-                        <span class="hidden min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[440] leading-4 tracking-[-0.04px] text-v2-text-text-muted md:block">
-                          {name}
-                        </span>
-                        <span
-                          class="hidden shrink-0 -translate-y-[0.5px] pl-2 pr-0.5 text-[11px] font-[530] text-v2-text-text-faint md:block"
-                          aria-hidden="true"
-                        >
-                          /
-                        </span>
-                      </>
-                    )}
-                  </Show>
                   <Show when={parentID()}>
                     <button
                       type="button"

packages/core/src/agent.ts

@@ -122,7 +122,10 @@ const layer = Layer.effect(
         return { id: info?.id ?? defaultID, info }
       }),
       list: Effect.fn("Agent.list")(function* () {
-        return Array.fromIterable(state.get().agents.values())
+        const agents = Array.fromIterable(state.get().agents.values())
+        const selected = selectedDefault()
+        if (!selected) return agents
+        return [selected, ...agents.filter((agent) => agent.id !== selected.id)]
       }),
     })
   }),

packages/core/src/filesystem/search.ts

@@ -2,7 +2,7 @@ export * as FileSystemSearch from "./search.js"
 
 import { makeLocationNode } from "@opencode-ai/util/effect/app-node"
 import path from "path"
-import { Context, Effect, Layer, Schema, Scope } from "effect"
+import { Clock, Context, Duration, Effect, Layer, Schema, Scope } from "effect"
 import { Fff } from "#fff"
 import fuzzysort from "fuzzysort"
 import { FileSystem } from "../filesystem.js"
@@ -22,38 +22,64 @@ export type Options = typeof Options.Type
 
 export class Service extends Context.Service<Service, Interface>()("@opencode/FileSystem/Search") {}
 
+const REFRESH_INTERVAL = Duration.toMillis("10 seconds")
+
 export const ripgrepLayer = Layer.effect(
   Service,
   Effect.gen(function* () {
     const location = yield* Location.Service
     const ripgrep = yield* Ripgrep.Service
     const scope = yield* Scope.Scope
-    const files: string[] = []
-    const directories = new Set<string>()
+    const clock = yield* Clock.Clock
     const home = Protected.isHome(location.directory)
-    yield* ripgrep
-      .find({
+    let index = { files: [] as string[], directories: new Set<string>() }
+    let initialized = false
+    let settledAt = Number.NEGATIVE_INFINITY
+    let refreshing = false
+    const scan = Effect.gen(function* () {
+      const next = { files: [] as string[], directories: new Set<string>() }
+      if (!initialized) index = next
+      yield* ripgrep.find({
         cwd: location.directory,
         pattern: "*",
         limit: location.vcs && !home ? Number.MAX_SAFE_INTEGER : 100_000,
         exclude: home ? [...Protected.names()].map((name) => `${name}/**`) : undefined,
         onEntry: (entry) =>
           Effect.sync(() => {
-            files.push(entry.path)
+            next.files.push(entry.path)
             const parts = entry.path.split("/")
-            parts.slice(0, -1).forEach((_, index) => directories.add(parts.slice(0, index + 1).join("/") + path.sep))
+            parts
+              .slice(0, -1)
+              .forEach((_, offset) => next.directories.add(parts.slice(0, offset + 1).join("/") + path.sep))
           }),
       })
-      .pipe(Effect.orDie, Effect.asVoid, Effect.forkIn(scope))
+      index = next
+      initialized = true
+    }).pipe(
+      Effect.orDie,
+      Effect.ensuring(
+        Effect.sync(() => {
+          settledAt = clock.currentTimeMillisUnsafe()
+          refreshing = false
+        }),
+      ),
+    )
+    const refresh = Effect.sync(() => {
+      if (refreshing || clock.currentTimeMillisUnsafe() < settledAt + REFRESH_INTERVAL) return
+      refreshing = true
+      return scan
+    }).pipe(Effect.flatMap((effect) => (effect ? effect.pipe(Effect.forkIn(scope)) : Effect.void)))
+    yield* refresh
     return Service.of({
       find: (input) =>
         Effect.gen(function* () {
+          yield* refresh
           const items =
             input.type === "file"
-              ? files
+              ? index.files
               : input.type === "directory"
-                ? Array.from(directories)
-                : [...files, ...directories]
+                ? Array.from(index.directories)
+                : [...index.files, ...index.directories]
           return fuzzysort.go(input.query, items, { limit: input.limit ?? 50 }).map((item) => {
             const relative = item.target
             const type = relative.endsWith(path.sep) ? ("directory" as const) : ("file" as const)

packages/core/src/instruction-discovery.ts

@@ -2,6 +2,7 @@ export * as InstructionDiscovery from "./instruction-discovery.js"
 
 import { Context, Effect, Layer, Schema, Types } from "effect"
 import { makeLocationNode } from "@opencode-ai/util/effect/app-node"
+import { createPatch } from "diff"
 import { Bus } from "./bus.js"
 import { Instructions } from "./instructions/index.js"
 import { AbsolutePath } from "./schema.js"
@@ -81,8 +82,7 @@ export const layer = (options?: Options) =>
           read: Effect.succeed(value),
           render: {
             initial: render,
-            changed: (_previous, current) =>
-              `These instructions replace all previously loaded ambient instructions.\n\n${render(current)}`,
+            changed: renderUpdate,
             removed: () => "Previously loaded instructions no longer apply.",
           },
         })
@@ -120,3 +120,27 @@ export const node = configured()
 function render(files: ReadonlyArray<File>) {
   return files.map((file) => `Instructions from: ${file.path}\n${file.content}`).join("\n\n")
 }
+
+function renderUpdate(previous: ReadonlyArray<File>, current: ReadonlyArray<File>) {
+  const changes = Instructions.diffByKey(
+    previous,
+    current,
+    (file) => file.path,
+    (before, after) => before.content !== after.content,
+  )
+  return [
+    ...changes.removed.map((file) => `The instructions from ${file.path} no longer apply.`),
+    ...changes.added.map((file) => `New instructions apply from:\n${render([file])}`),
+    ...changes.changed.map(({ previous: before, current: after }) => {
+      const patch = createPatch(after.path, before.content, after.content, "", "", { context: 3 })
+      const diff = [
+        `The instructions from ${after.path} changed. Here's the diff:`,
+        "```diff",
+        patch.slice(patch.indexOf("@@")).trimEnd(),
+        "```",
+      ].join("\n")
+      const replacement = `The instructions changed:\n${render([after])}`
+      return diff.length < replacement.length ? diff : replacement
+    }),
+  ].join("\n\n")
+}

packages/core/test/agent.test.ts

@@ -68,6 +68,26 @@ describe("Agent", () => {
     }),
   )
 
+  it.effect("lists the selected default agent first", () =>
+    Effect.gen(function* () {
+      const agent = yield* Agent.Service
+      yield* agent.transform((editor) => {
+        editor.update(Agent.ID.make("build"), (info) => {
+          info.mode = "primary"
+        })
+        editor.update(Agent.ID.make("reviewer"), (info) => {
+          info.mode = "primary"
+        })
+        editor.update(Agent.ID.make("explore"), (info) => {
+          info.mode = "subagent"
+        })
+        editor.default(Agent.ID.make("reviewer"))
+      })
+
+      expect((yield* agent.list()).map((info) => String(info.id))).toEqual(["reviewer", "build", "explore"])
+    }),
+  )
+
   it.effect("rebuilds state when a transform is replaced", () =>
     Effect.gen(function* () {
       const agent = yield* Agent.Service

packages/core/test/filesystem/search.test.ts

@@ -1,7 +1,8 @@
 import { describe, expect, test } from "bun:test"
 import os from "os"
 import path from "path"
-import { Effect, Layer } from "effect"
+import { Deferred, Effect, Layer } from "effect"
+import { TestClock } from "effect/testing"
 import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { FileSystem } from "@opencode-ai/core/filesystem"
 import { Protected } from "@opencode-ai/core/filesystem/protected"
@@ -56,4 +57,70 @@ describe("FileSystemSearch", () => {
       }).pipe(Effect.provide(layer), Effect.scoped),
     )
   })
+
+  test("refreshes a stale ripgrep index atomically without blocking search", async () => {
+    let scans = 0
+    const initial = Effect.runSync(Deferred.make<void>())
+    const started = Effect.runSync(Deferred.make<void>())
+    const release = Effect.runSync(Deferred.make<void>())
+    const layer = AppNodeBuilder.build(FileSystemSearch.node, [
+      [
+        Location.node,
+        Layer.succeed(
+          Location.Service,
+          Location.Service.of(
+            location({ directory: AbsolutePath.make(path.join(os.tmpdir(), "opencode-search-atomic")) }),
+          ),
+        ),
+      ],
+      [
+        Ripgrep.node,
+        Layer.succeed(
+          Ripgrep.Service,
+          Ripgrep.Service.of({
+            find: (input) =>
+              Effect.gen(function* () {
+                scans++
+                if (scans > 1) {
+                  yield* Deferred.succeed(started, undefined)
+                  yield* Deferred.await(release)
+                }
+                const entry = FileSystem.Entry.make({
+                  path: RelativePath.make(scans === 1 ? "src/old.ts" : "src/new.ts"),
+                  type: "file",
+                })
+                if (input.onEntry) yield* input.onEntry(entry)
+                if (scans === 1) yield* Deferred.succeed(initial, undefined)
+                return [entry]
+              }),
+            glob: () => Effect.succeed([]),
+            grep: () => Effect.succeed([]),
+          }),
+        ),
+      ],
+    ])
+
+    await Effect.runPromise(
+      Effect.gen(function* () {
+        const search = yield* FileSystemSearch.Service
+        yield* Deferred.await(initial)
+        expect((yield* search.find({ query: "old", type: "file" }))[0]?.path).toBe(RelativePath.make("src/old.ts"))
+        expect(scans).toBe(1)
+
+        yield* TestClock.adjust("10 seconds")
+        yield* search.find({ query: "old", type: "file" })
+        yield* Deferred.await(started)
+
+        expect((yield* search.find({ query: "old", type: "file" }))[0]?.path).toBe(RelativePath.make("src/old.ts"))
+        expect(scans).toBe(2)
+        yield* Deferred.succeed(release, undefined)
+        const refreshed = yield* Effect.gen(function* () {
+          yield* Effect.yieldNow
+          return yield* search.find({ query: "new", type: "file" })
+        }).pipe(Effect.repeat({ until: (entries) => entries.length > 0 }))
+        expect(refreshed[0]?.path).toBe(RelativePath.make("src/new.ts"))
+        expect(scans).toBe(2)
+      }).pipe(Effect.provide(layer), Effect.provide(TestClock.layer()), Effect.scoped),
+    )
+  })
 })

packages/core/test/instruction-discovery.test.ts

@@ -111,6 +111,50 @@ describe("InstructionDiscovery", () => {
       ).toBe(false)
     }).pipe(Effect.provide(AppNodeBuilder.build(LayerNode.group([InstructionDiscovery.node, Bus.node])))),
   )
+
+  it.effect("renders granular instruction updates", () =>
+    Effect.gen(function* () {
+      const discovery = yield* InstructionDiscovery.Service
+      yield* discovery.transform((draft) => {
+        draft.add(file("/global/AGENTS.md", "global"))
+        draft.add(
+          file("/repo/AGENTS.md", ["old", ...Array.from({ length: 20 }, (_, index) => `keep ${index}`)].join("\n")),
+        )
+      })
+      const initial = yield* readInitial(yield* discovery.load())
+
+      yield* discovery.transform((draft) => {
+        draft.update("/repo/AGENTS.md", (current) => {
+          current.content = ["new", ...Array.from({ length: 20 }, (_, index) => `keep ${index}`)].join("\n")
+        })
+      })
+      const modified = (yield* readUpdate(yield* discovery.load(), initial)).text
+      expect(modified).toContain("The instructions from /repo/AGENTS.md changed. Here's the diff:")
+      expect(modified).toContain("-old\n+new")
+      expect(modified).not.toContain("global")
+
+      const rewritten = state({
+        "core/instructions": [{ path: "/repo/AGENTS.md", content: "old one\nold two\nold three\nold four" }],
+      })
+      yield* discovery.transform((draft) => {
+        draft.remove("/global/AGENTS.md")
+        draft.update("/repo/AGENTS.md", (current) => {
+          current.content = "new"
+        })
+      })
+      expect((yield* readUpdate(yield* discovery.load(), rewritten)).text).toBe(
+        "The instructions changed:\nInstructions from: /repo/AGENTS.md\nnew",
+      )
+
+      yield* discovery.transform((draft) => {
+        draft.add(file("/repo/packages/AGENTS.md", "package"))
+      })
+      const structural = (yield* readUpdate(yield* discovery.load(), initial)).text
+      expect(structural).toContain("The instructions from /global/AGENTS.md no longer apply.")
+      expect(structural).toContain("New instructions apply from:\nInstructions from: /repo/packages/AGENTS.md\npackage")
+      expect(structural).not.toContain("Instructions from: /global/AGENTS.md\nglobal")
+    }).pipe(Effect.provide(AppNodeBuilder.build(LayerNode.group([InstructionDiscovery.node, Bus.node])))),
+  )
 })
 
 describe("ConfigInstructionPlugin.Plugin", () => {
@@ -168,20 +212,15 @@ describe("ConfigInstructionPlugin.Plugin", () => {
 
           yield* Effect.promise(() => fs.writeFile(packageFile, "changed"))
           yield* emitAndWait({ type: "update", path: packageFile })
-          expect((yield* readUpdate(yield* discovery.load(), initialized)).text).toContain(
-            `Instructions from: ${packageFile}\nchanged`,
-          )
+          const changed = (yield* readUpdate(yield* discovery.load(), initialized)).text
+          expect(changed).toContain(`The instructions changed:\nInstructions from: ${packageFile}\nchanged`)
+          expect(changed).not.toContain(`Instructions from: ${globalFile}\nglobal`)
 
           yield* Effect.promise(() => fs.rm(packageFile))
           yield* emitAndWait({ type: "delete", path: packageFile })
-          expect((yield* readUpdate(yield* discovery.load(), initialized)).text).toBe(
-            [
-              "These instructions replace all previously loaded ambient instructions.",
-              `Instructions from: ${globalFile}\nglobal`,
-              `Instructions from: ${projectFile}\nproject`,
-              `Instructions from: ${sharedFile}\nshared`,
-            ].join("\n\n"),
-          )
+          const removed = (yield* readUpdate(yield* discovery.load(), initialized)).text
+          expect(removed).toContain(`The instructions from ${packageFile} no longer apply.`)
+          expect(removed).not.toContain(`Instructions from: ${globalFile}\nglobal`)
 
           yield* Effect.promise(() => fs.rm(globalFile))
           yield* emitAndWait({ type: "delete", path: globalFile })

packages/simulation/src/frontend/actions.ts

@@ -115,9 +115,10 @@ export function elements(renderer: CliRenderer): Element[] {
 }
 
 export function state(harness: Harness) {
+  const renderable = harness.renderer.currentFocusedRenderable?.num
   return {
     focused: {
-      renderable: harness.renderer.currentFocusedRenderable?.num,
+      ...(renderable === undefined ? {} : { renderable }),
       editor: Boolean(harness.renderer.currentFocusedEditor),
     },
     elements: elements(harness.renderer),

packages/simulation/test/actions.test.ts

@@ -14,6 +14,18 @@ test("matches literal screen text", () => {
   expect(matches(harness, "opencode")).toBe(false)
 })
 
+test("omits an absent focused renderable from state", () => {
+  const harness = {
+    renderer: {
+      root: { getChildren: () => [] },
+      currentFocusedRenderable: undefined,
+      currentFocusedEditor: undefined,
+    },
+  } as unknown as Harness
+
+  expect(state(harness)).toEqual({ focused: { editor: false }, elements: [] })
+})
+
 test("normalizes named keys for OpenTUI", async () => {
   const pressed: Array<readonly [string, object | undefined]> = []
   const harness = {

packages/stats/app/src/routes/index.css

@@ -7771,6 +7771,12 @@ body {
   }
 }
 
+@media (min-width: 48rem) and (max-width: 58rem) {
+  [data-page="stats"] [data-slot="top-models-bar"][data-active="true"] {
+    z-index: 2;
+  }
+}
+
 @media (max-width: 47.999rem) {
   [data-page="stats"] [data-section="top-models"],
   [data-page="stats"] [data-section="leaderboard"],

packages/tui/src/component/dialog-experiments.tsx

@@ -1,10 +1,11 @@
 import { createMemo, createSignal } from "solid-js"
 import { useConfig } from "../config"
 import { DialogSelect } from "../ui/dialog-select"
+import { useTheme } from "../context/theme"
 import { useToast } from "../ui/toast"
 
 type Experiment = {
-  id: "tab_drafts"
+  id: string
   title: string
   description: string
 }
@@ -12,36 +13,30 @@ type Experiment = {
 // In-flight features anyone can opt into. Each entry is temporary: an
 // experiment either graduates (delete the entry, make the behavior
 // unconditional) or dies (delete the entry and the branch it gated).
-export const experiments: Experiment[] = [
-  {
-    id: "tab_drafts",
-    title: "Per-tab prompt drafts",
-    description: "Keep unsent prompt drafts on the tab where they were written. New sessions start blank.",
-  },
-]
+export const experiments: Experiment[] = []
 
 export function DialogExperiments() {
   const config = useConfig()
+  const theme = useTheme()
   const toast = useToast()
-  const [selected, setSelected] = createSignal(0)
+  const [selected, setSelected] = createSignal<Experiment>()
   const [saving, setSaving] = createSignal(false)
 
   const enabled = (experiment: Experiment) => config.data.experimental?.[experiment.id] === true
 
   const options = createMemo(() =>
-    experiments.map((experiment, index) => ({
+    experiments.map((experiment) => ({
       title: experiment.title,
       category: "Experiments",
       searchText: experiment.description,
       footer: enabled(experiment) ? "on" : "off",
-      value: index,
+      value: experiment,
     })),
   )
 
   // All experiments are booleans, so either direction toggles.
-  async function change(index = selected()) {
+  async function change(experiment = selected()) {
     if (saving()) return
-    const experiment = experiments[index]
     if (!experiment) return
     const next = !enabled(experiment)
     setSaving(true)
@@ -58,23 +53,33 @@ export function DialogExperiments() {
     <DialogSelect
       title="Experiments"
       options={options()}
+      renderFilter={experiments.length > 0}
       onMove={(option) => setSelected(option.value)}
       onSelect={(option) => void change(option.value)}
-      footerHints={[{ title: "←/→", label: "change" }]}
-      bindings={[
-        {
-          bind: "left",
-          title: "Previous value",
-          group: "Experiments",
-          run: () => void change(),
-        },
-        {
-          bind: "right",
-          title: "Next value",
-          group: "Experiments",
-          run: () => void change(),
-        },
-      ]}
+      emptyView={
+        <box paddingLeft={4} paddingRight={4}>
+          <text fg={theme.text.subdued}>No experiments available</text>
+        </box>
+      }
+      footerHints={experiments.length > 0 ? [{ title: "←/→", label: "change" }] : []}
+      bindings={
+        experiments.length > 0
+          ? [
+              {
+                bind: "left",
+                title: "Previous value",
+                group: "Experiments",
+                run: () => void change(),
+              },
+              {
+                bind: "right",
+                title: "Next value",
+                group: "Experiments",
+                run: () => void change(),
+              },
+            ]
+          : []
+      }
     />
   )
 }

packages/tui/src/component/prompt/draft-stash.ts

@@ -1,30 +1,18 @@
 import type { PromptInfo } from "../../prompt/history"
 
-// Holds one in-progress draft per slot across Prompt remounts. The undefined
-// key is the default single global slot that follows focus across tabs; the
-// tab_drafts experiment keys drafts by the tab (sessionID or "home") they
-// were written in. A draft is consumed on take: restoring it moves it out of
-// the stash, so a stale copy never shadows newer input.
+// Holds one in-progress draft per tab across Prompt remounts. A draft is
+// consumed on take: restoring it moves it out of the stash, so a stale copy
+// never shadows newer input.
 export type DraftEntry = { prompt: PromptInfo; cursor: number }
 
-let global: DraftEntry | undefined
-const byTab = new Map<string, DraftEntry>()
+const byTab = new Map<string | undefined, DraftEntry>()
 
-export function takeDraft(key: string | undefined) {
-  if (key === undefined) {
-    const entry = global
-    global = undefined
-    return entry
-  }
-  const entry = byTab.get(key)
-  byTab.delete(key)
+export function takeDraft(sessionID: string | undefined) {
+  const entry = byTab.get(sessionID)
+  byTab.delete(sessionID)
   return entry
 }
 
-export function saveDraft(key: string | undefined, entry: DraftEntry) {
-  if (key === undefined) {
-    global = entry
-    return
-  }
-  byTab.set(key, entry)
+export function saveDraft(sessionID: string | undefined, entry: DraftEntry) {
+  byTab.set(sessionID, entry)
 }

packages/tui/src/component/prompt/index.tsx

@@ -678,10 +678,9 @@ export function Prompt(props: PromptProps) {
   // instance belongs to exactly one tab. Reading props.sessionID lazily would
   // observe the *next* route during onCleanup and stash under the wrong tab.
   const stashSessionID = props.sessionID
-  const stashKey = () => (config.experimental?.tab_drafts === true ? (stashSessionID ?? "home") : undefined)
 
   onMount(() => {
-    const saved = takeDraft(stashKey())
+    const saved = takeDraft(stashSessionID)
     if (store.prompt.text) return
     if (saved && saved.prompt.text) {
       input.setText(saved.prompt.text)
@@ -694,7 +693,7 @@ export function Prompt(props: PromptProps) {
   onCleanup(() => {
     disposed = true
     if (store.prompt.text) {
-      saveDraft(stashKey(), { prompt: unwrap(store.prompt), cursor: input.cursorOffset })
+      saveDraft(stashSessionID, { prompt: unwrap(store.prompt), cursor: input.cursorOffset })
     }
     setInputTarget(undefined)
     props.ref?.(undefined)

packages/tui/src/component/session-tabs.tsx

@@ -21,6 +21,7 @@ import {
   moveSessionTab,
   NEW_SESSION_TAB_TITLE,
   sessionTabComplete,
+  sessionTabDetail,
   sessionTabShortcutLabel,
   seedSessionTabMotion,
   sessionTabOverflowWidth,
@@ -408,10 +409,20 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
               const titleFades = createMemo(() => marqueeOverflows(title(), titleWidth()) && titleWidth() > FADE_WIDTH)
               const detail = createMemo(() => {
                 const fixture = tabs.detail?.(tab.sessionID)
-                if (fixture !== undefined) return Locale.takeWidth(fixture, titleWidth())
+                if (fixture !== undefined) return fixture
                 const value = session()
-                return Locale.takeWidth(projectName(project(), value?.location.directory) ?? "", titleWidth())
+                const currentProject = project()
+                const projectLabel = projectName(currentProject, value?.location.directory) ?? ""
+                const vcs = value ? data.location.vcs.info(value.location) : undefined
+                const location = value ? data.location.info(value.location) : undefined
+                const worktree = !!location && location.project.directory !== location.project.canonical
+                return sessionTabDetail(projectLabel, vcs?.branch.current, vcs?.branch.default, worktree)
               })
+              const visibleDetail = createMemo(() => Locale.takeWidth(detail(), titleWidth()))
+              const visibleDetailParts = createMemo(() => Locale.graphemes(visibleDetail()))
+              const detailFades = createMemo(
+                () => marqueeOverflows(detail(), titleWidth()) && titleWidth() > FADE_WIDTH,
+              )
               const background = createMemo(() => {
                 if (selected()) return theme.background.action.primary.selected
                 if (hovered() === tab.sessionID || dragging() === tab.sessionID)
@@ -453,6 +464,10 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
               const detailFlashColor = createMemo(() => tint(pulseBackground(), theme.text.default, 0.42))
               const detailGlowColor = createMemo(() => tint(pulseBackground(), glowHue(), 0.25))
               const detailColor = createMemo(() => tint(theme.text.subdued, pulseBackground(), 0.35))
+              const detailTextColor = (index: number) =>
+                detailFades()
+                  ? fadeTitleColor(detailColor(), pulseBackground(), index, visibleDetailParts().length, 0)
+                  : detailColor()
               const glows = () => status().glows
               const previous = createMemo(() => items()[index() - 1])
               const previousStatus = createMemo(() => {
@@ -670,7 +685,11 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                     />
                     <box zIndex={1} width="100%" flexDirection="row" paddingLeft={numberWidth() + 1} paddingRight={2}>
                       <text fg={detailColor()} wrapMode="none" selectable={false}>
-                        {detail()}
+                        <Show when={detailFades()} fallback={visibleDetail()}>
+                          <For each={visibleDetailParts()}>
+                            {(character, index) => <span style={{ fg: detailTextColor(index()) }}>{character}</span>}
+                          </For>
+                        </Show>
                       </text>
                     </box>
                   </box>

packages/tui/src/config/index.tsx

@@ -192,13 +192,9 @@ export const Info = Schema.Struct({
       }),
     }),
   ).annotate({ description: "Debugging settings" }),
-  experimental: Schema.optional(
-    Schema.Struct({
-      tab_drafts: Schema.optional(Schema.Boolean).annotate({
-        description: "Keep unsent prompt drafts on the tab where they were written",
-      }),
-    }),
-  ).annotate({ description: "Experimental features that may change or be removed at any time" }),
+  experimental: Schema.optional(Schema.Record(Schema.String, Schema.Boolean)).annotate({
+    description: "Experimental features that may change or be removed at any time",
+  }),
   animations: Schema.optional(Schema.Boolean).annotate({ description: "Enable interface animations" }),
   mouse: Schema.optional(Schema.Boolean).annotate({ description: "Enable terminal mouse capture" }),
   cursor: Schema.optional(Cursor),

packages/tui/src/context/data.tsx

@@ -94,7 +94,7 @@ type Store = {
   location: Record<string, LocationData>
 }
 
-function locationKey(location: LocationRef) {
+export function locationKey(location: LocationRef) {
   return JSON.stringify([location.directory, location.workspaceID])
 }
 
@@ -1214,9 +1214,9 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
         default() {
           return defaultLocation()
         },
-        async sync(ref?: LocationRef) {
+        syncInfo(ref?: LocationRef) {
           const current = ref ?? defaultLocation()
-          await sync.run(`location:${locationKey(current)}`, async () => {
+          return sync.run(`location:${locationKey(current)}`, async () => {
             const location = await client.api.location.get({ location: locationQuery(current) })
             const key = locationKey(location)
             if (!store.location[key]) setStore("location", key, {})
@@ -1225,6 +1225,9 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
               setDefaultLocation({ directory: location.directory, workspaceID: location.workspaceID })
             }
           })
+        },
+        async sync(ref?: LocationRef) {
+          await result.location.syncInfo(ref)
           const location = ref ?? defaultLocation()
           await Promise.all([
             result.location.vcs.sync(location),

packages/tui/src/context/session-tabs-model.ts

@@ -13,6 +13,16 @@ export function sessionTabShortcutLabel(index: number) {
   return "·"
 }
 
+export function sessionTabDetail(
+  project: string,
+  current: string | undefined,
+  defaultBranch: string | undefined,
+  worktree: boolean,
+) {
+  const branch = worktree && current !== defaultBranch ? current : undefined
+  return branch && project ? `${project} ⎇ ${branch}` : (branch ?? project)
+}
+
 export type SessionTabHistory = {
   entries: readonly string[]
   index: number

packages/tui/src/context/session-tabs.tsx

@@ -2,7 +2,7 @@ import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { isDeepEqual } from "remeda"
 import { createSimpleContext } from "./helper"
 import { useClient } from "./client"
-import { useData } from "./data"
+import { locationKey, useData } from "./data"
 import { withTimestampedFallback } from "@opencode-ai/util/session-title-fallback"
 import { useEvent } from "./event"
 import { useRoute } from "./route"
@@ -159,9 +159,9 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
       })
     })
 
-    // Load lightweight session metadata concurrently so persisted tabs can resolve their project
-    // labels immediately. Delay the heavier per-tab data so the visible session keeps the first
-    // connection slots and switches still render from a warm cache.
+    // Load lightweight session and location metadata concurrently so persisted tabs can resolve
+    // their project and branch labels. Delay the heavier per-tab data so the visible session keeps
+    // the first connection slots and switches still render from a warm cache.
     const openTabSessions = createMemo(() =>
       state()
         .tabs.map((tab) => tab.sessionID)
@@ -171,10 +171,25 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
     createEffect(() => {
       if (!enabled()) return
       if (client.connection.status() !== "connected") return
-      const sessionIDs = openTabSessions()
-      if (sessionIDs === "") return
-      void Promise.allSettled(sessionIDs.split("\n").map((sessionID) => data.session.sync(sessionID)))
+      const signature = openTabSessions()
+      if (signature === "") return
+      const sessionIDs = signature.split("\n")
       let stale = false
+      void (async () => {
+        await Promise.allSettled(sessionIDs.map((sessionID) => data.session.sync(sessionID)))
+        if (stale) return
+        const locations = new Map(
+          sessionIDs
+            .map((sessionID) => data.session.get(sessionID)?.location)
+            .filter((location) => location !== undefined)
+            .map((location) => [locationKey(location), location]),
+        )
+        await Promise.allSettled(
+          Array.from(locations.values(), (location) =>
+            Promise.all([data.location.syncInfo(location), data.location.vcs.sync(location)]),
+          ),
+        )
+      })()
       const timer = setTimeout(async () => {
         const sessions = state()
           .tabs.map((tab) => tab.sessionID)

packages/tui/src/routes/session/composer/index.tsx

@@ -94,6 +94,7 @@ export function Composer(props: ComposerProps) {
   Keymap.createLayer(() => ({
     mode: "composer",
     enabled: () => props.open,
+    priority: 1,
     commands: [
       { bind: "left", title: "Previous tab", group: "Composer", run: () => switchTab(-1) },
       { bind: "right", title: "Next tab", group: "Composer", run: () => switchTab(1) },

packages/tui/src/routes/session/composer/shell-tab.tsx

@@ -50,6 +50,7 @@ export function ShellTab(props: { sessionID: string }) {
   Keymap.createLayer(() => ({
     mode: "composer",
     enabled: () => composer.active("shell"),
+    priority: 1,
     commands: [
       {
         id: "composer.shell.up",

packages/tui/src/routes/session/composer/subagents-tab.tsx

@@ -164,6 +164,7 @@ export function SubagentsTab(props: { sessionID: string }) {
   Keymap.createLayer(() => ({
     mode: "composer",
     enabled: () => composer.active("subagents"),
+    priority: 1,
     commands: [
       {
         id: "composer.subagent.up",

packages/tui/src/routes/session/index.tsx

@@ -2872,16 +2872,8 @@ function Shell(props: ToolProps) {
   })
   const maxLines = 10
   const maxChars = createMemo(() => maxLines * Math.max(20, ctx.width - 6))
-  const prompt = createMemo(() => (workdir() && workdir() !== "." ? `${workdir()}$` : "$"))
-  const input = createMemo(() => {
-    const cmd = command()
-    if (!cmd) return ""
-    // While running, the workdir prompt shares the spinner's text column; when
-    // settled, the prompt renders as its own column so wrapped command lines
-    // keep a stable hanging indent instead of jumping to the card inset.
-    if (isRunning() && prompt() !== "$") return `${prompt()} ${cmd}`
-    return cmd
-  })
+  const prefix = createMemo(() => (workdir() && workdir() !== "." ? `cd ${workdir()} && ` : ""))
+  const input = createMemo(() => (command() ? `${isRunning() ? "" : "$ "}${prefix()}${command()}` : ""))
   const content = createMemo(() => [input(), output()].filter(Boolean).join("\n\n"))
   const collapsed = createMemo(() => collapseToolOutput(content(), maxLines, maxChars()))
   const limited = createMemo(() => {
@@ -2910,15 +2902,7 @@ function Shell(props: ToolProps) {
             )
           }
         >
-          <Show
-            when={isRunning()}
-            fallback={
-              <box flexDirection="row" gap={1}>
-                <text fg={theme.text.default}>{prompt()}</text>
-                <text fg={theme.text.default}>{limitedInput()}</text>
-              </box>
-            }
-          >
+          <Show when={isRunning()} fallback={<text fg={theme.text.default}>{limitedInput()}</text>}>
             <Spinner color={color()}>{limitedInput()}</Spinner>
           </Show>
           <Show when={limitedOutput()}>

packages/tui/test/cli/tui/composer-keymap.test.tsx

@@ -23,7 +23,11 @@ const sessions = {
 
 const shells = [shell("sh-a", "bun test"), shell("sh-b", "bun dev")]
 
-async function renderComposer(defaultTab: "subagents" | "shell", keybinds: Partial<TuiKeybind.Keybinds>) {
+async function renderComposer(
+  defaultTab: "subagents" | "shell",
+  keybinds: Partial<TuiKeybind.Keybinds>,
+  focusedTextarea = false,
+) {
   const events = createEventStream()
   const interrupted: string[] = []
   const removed: string[] = []
@@ -69,7 +73,21 @@ async function renderComposer(defaultTab: "subagents" | "shell", keybinds: Parti
         .then(() => wait(() => data.session.status("child-a") === "running"))
         .then(() => ready.resolve(), ready.reject)
     })
-    return <Composer sessionID="parent" open={true} defaultTab={defaultTab} onClose={() => closed++} />
+    return (
+      <>
+        {focusedTextarea && <textarea focused={true} initialValue="draft" />}
+        <Composer sessionID="parent" open={true} defaultTab={defaultTab} onClose={() => closed++} />
+      </>
+    )
+  }
+
+  function AppExit() {
+    Keymap.createLayer(() => ({
+      mode: "global",
+      commands: [{ id: "app.exit", title: "Exit", group: "System", run: () => {} }],
+    }))
+    Keymap.createLayer(() => ({ bindings: ["app.exit"] }))
+    return null
   }
 
   const app = await testRender(
@@ -88,6 +106,7 @@ async function renderComposer(defaultTab: "subagents" | "shell", keybinds: Parti
                 </LocationProvider>
               </DataProvider>
             </ClientProvider>
+            <AppExit />
           </Keymap.Provider>
         </ConfigProvider>
       </TestTuiContexts>
@@ -154,6 +173,20 @@ test("disabled shell bindings have no component fallbacks", async () => {
   }
 })
 
+test("configured composer bindings work with a focused textarea", async () => {
+  const composer = await renderComposer("subagents", { "composer.shell.kill": "ctrl+u" }, true)
+  try {
+    composer.app.mockInput.pressArrow("right")
+    await composer.app.renderOnce()
+    expect(composer.app.captureCharFrame()).toContain("bun test")
+    composer.app.mockInput.pressKey("u", { ctrl: true })
+    await wait(() => composer.removed.length === 1)
+    expect(composer.removed).toEqual(["sh-a"])
+  } finally {
+    composer.app.renderer.destroy()
+  }
+})
+
 function session(id: string, title: string, parentID?: string) {
   return {
     id,

packages/tui/test/context/session-tabs-model.test.ts

@@ -11,11 +11,20 @@ import {
   reopenSessionTab,
   seedSessionTabMotion,
   sessionTabComplete,
+  sessionTabDetail,
   sessionTabOverflowWidth,
   sessionTabShortcutLabel,
 } from "../../src/context/session-tabs-model"
 
 describe("session tabs", () => {
+  test("appends the branch to the project detail", () => {
+    expect(sessionTabDetail("opencode", "feature/sidebar", "main", true)).toBe("opencode ⎇ feature/sidebar")
+    expect(sessionTabDetail("opencode", "feature/sidebar", undefined, true)).toBe("opencode ⎇ feature/sidebar")
+    expect(sessionTabDetail("opencode", "feature/sidebar", "main", false)).toBe("opencode")
+    expect(sessionTabDetail("opencode", "main", "main", true)).toBe("opencode")
+    expect(sessionTabDetail("opencode", undefined, "main", true)).toBe("opencode")
+  })
+
   test("labels direct shortcut tabs and marks unbound tabs with a dot", () => {
     expect(Array.from({ length: 12 }, (_, index) => sessionTabShortcutLabel(index))).toEqual([
       "1",

packages/tui/test/context/session-tabs.test.tsx

@@ -28,7 +28,14 @@ async function wait(fn: () => boolean | Promise<boolean>, timeout = 2_000) {
 
 async function renderSessionTabs(
   initialSessionID: string,
-  options?: { state?: string; title?: string; home?: boolean; persisted?: string[]; sessionGate?: Promise<void> },
+  options?: {
+    state?: string
+    title?: string
+    home?: boolean
+    persisted?: string[]
+    sessionGate?: Promise<void>
+    sessionDirectories?: Record<string, string>
+  },
 ) {
   const temporary = options?.state ? undefined : await tmpdir()
   const state = options?.state ?? temporary!.path
@@ -45,7 +52,25 @@ async function renderSessionTabs(
   }
   const events = createEventStream()
   const sessions: string[] = []
+  const locations: string[] = []
+  const vcsLocations: string[] = []
   const calls = createFetch(async (url) => {
+    if (url.pathname === "/api/location") {
+      const requested = url.searchParams.get("location[directory]") ?? directory
+      locations.push(requested)
+      return json({
+        directory: requested,
+        project: { id: "project", directory: requested, canonical: directory },
+      })
+    }
+    if (url.pathname === "/api/vcs") {
+      const requested = url.searchParams.get("location[directory]") ?? directory
+      vcsLocations.push(requested)
+      return json({
+        location: { directory: requested },
+        data: { branch: { current: "main", default: "main" } },
+      })
+    }
     const sessionID = url.pathname.match(/^\/api\/session\/([^/]+)$/)?.[1]
     if (!sessionID) return undefined
     sessions.push(sessionID)
@@ -55,7 +80,7 @@ async function renderSessionTabs(
         id: sessionID,
         title: sessionID === initialSessionID ? options?.title : undefined,
         projectID: "project",
-        location: { directory },
+        location: { directory: options?.sessionDirectories?.[sessionID] ?? directory },
         cost: 0,
         tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
         time: { created: 0, updated: 0 },
@@ -107,6 +132,8 @@ async function renderSessionTabs(
     route,
     data,
     sessions,
+    locations,
+    vcsLocations,
     state,
     emit: (event: OpenCodeEvent) => events.emit({ ...event, location: { directory } }),
     async destroy() {
@@ -137,6 +164,22 @@ test("loads persisted tab metadata concurrently on connect", async () => {
   }
 })
 
+test("loads VCS metadata for each persisted tab location", async () => {
+  const other = `${directory}/other-worktree`
+  const setup = await renderSessionTabs("first", {
+    home: true,
+    persisted: ["first", "second"],
+    sessionDirectories: { second: other },
+  })
+
+  try {
+    await wait(() => setup.locations.includes(other))
+    await wait(() => setup.vcsLocations.includes(other))
+  } finally {
+    await setup.destroy()
+  }
+})
+
 test("stores session tabs for the current working directory by default", async () => {
   const setup = await renderSessionTabs("first")
 

packages/tui/test/prompt/draft-stash.test.ts

@@ -3,23 +3,13 @@ import { saveDraft, takeDraft } from "../../src/component/prompt/draft-stash"
 import { emptyPrompt } from "../../src/prompt/history"
 
 // The Prompt component stashes an unsent draft in onCleanup and takes it back
-// in onMount across route remounts. The key it uses is undefined by default
-// (one global slot that follows focus across tabs) and the tab identity
-// (sessionID, or "home") when the tab_drafts experiment is on.
+// in onMount across route remounts, keyed by sessionID or undefined for home.
 
 function draft(text: string, cursor = text.length) {
   return { prompt: { ...emptyPrompt(), text }, cursor }
 }
 
 describe("prompt draft stash", () => {
-  test("global slot follows focus: any tab takes the last stashed draft", () => {
-    const entry = draft("follow me")
-    saveDraft(undefined, entry)
-    expect(takeDraft(undefined)).toBe(entry)
-    // Consumed on take, so a remount never restores a stale copy.
-    expect(takeDraft(undefined)).toBeUndefined()
-  })
-
   test("tab-keyed drafts stay on the tab they were written in", () => {
     const two = draft("notes for session two")
     saveDraft("ses_two", two)
@@ -37,25 +27,12 @@ describe("prompt draft stash", () => {
     const one = draft("DRAFT-ONE")
     const home = draft("draft on home")
     saveDraft("ses_one", one)
-    saveDraft("home", home)
+    saveDraft(undefined, home)
 
-    expect(takeDraft("home")).toBe(home)
+    expect(takeDraft(undefined)).toBe(home)
     expect(takeDraft("ses_one")).toBe(one)
   })
 
-  test("global and tab slots never leak into each other when the experiment toggles mid-draft", () => {
-    const global = draft("stashed before enabling tab_drafts")
-    const keyed = draft("stashed after enabling tab_drafts")
-    saveDraft(undefined, global)
-    saveDraft("ses_a", keyed)
-
-    // A keyed lookup must not surface the global draft on the wrong tab...
-    expect(takeDraft("ses_b")).toBeUndefined()
-    // ...and the global slot must not surface a tab's draft.
-    expect(takeDraft(undefined)).toBe(global)
-    expect(takeDraft("ses_a")).toBe(keyed)
-  })
-
   test("a newer draft for the same slot replaces the older one", () => {
     saveDraft("ses_a", draft("first"))
     const second = draft("second")