fix(core): keep patch description unchanged

package.json

@@ -8,7 +8,7 @@
   "packageManager": "bun@1.3.14",
   "scripts": {
     "dev": "bun run --cwd packages/cli --conditions=browser src/index.ts",
-    "dev:live": "OPENCODE_TUI_CHANNEL=dev OPENCODE_PASSWORD=\"$(opencode2 service get password)\" bun run dev --server \"$(opencode2 service status)\"",
+    "dev:live": "sh -c 'OPENCODE_TUI_CHANNEL=dev OPENCODE_PASSWORD=\"$(opencode2 service get password)\" exec bun run dev \"$@\" --server \"$(opencode2 service status)\"' --",
     "dev:desktop": "bun --cwd packages/desktop dev",
     "dev:web": "bun --cwd packages/app dev",
     "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",

packages/ai/src/protocols/open-responses.ts

@@ -176,14 +176,14 @@ export const InputItem = Schema.Union([
   HostedToolItem,
 ])
 type OpenResponsesInputItem = Schema.Schema.Type<typeof InputItem>
-export type ExtendedHostedToolItem = {
+export type HostedToolReplayItem = {
   readonly type: string
   readonly id: string
   readonly [key: string]: unknown
 }
 type LoweredInputItem =
   | OpenResponsesInputItem
-  | ExtendedHostedToolItem
+  | HostedToolReplayItem
   | {
       readonly type: "message"
       readonly id?: string
@@ -373,7 +373,7 @@ export const Event = Schema.StructWithRest(
 )
 export type Event = Schema.Schema.Type<typeof Event>
 
-export interface Extension {
+export interface ProviderAdapter {
   readonly id: string
   readonly name: string
   readonly lowerMedia?: (input: {
@@ -381,10 +381,10 @@ export interface Extension {
     readonly media: ProviderShared.NormalizedMedia
     readonly request: LLMRequest
   }) => MediaInput | undefined
-  readonly lowerHostedToolItem?: (item: unknown) => ExtendedHostedToolItem | undefined
+  readonly restoreHostedToolItem?: (item: unknown) => HostedToolReplayItem | undefined
 }
 
-const BASE: Extension = { id: ADAPTER, name: NAME }
+const BASE_ADAPTER: ProviderAdapter = { id: ADAPTER, name: NAME }
 
 export interface ParserState {
   readonly id: string
@@ -482,12 +482,12 @@ const lowerReasoning = (part: ReasoningPart, providerMetadataKey: string): OpenR
 const lowerMedia = Effect.fn("OpenResponses.lowerMedia")(function* (
   part: MediaPart,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
   target: "message" | "tool-result",
 ) {
   const media = ProviderShared.normalizeMedia(part)
-  const extended = extension.lowerMedia?.({ part, media, request })
-  if (extended) return extended
+  const providerMedia = adapter.lowerMedia?.({ part, media, request })
+  if (providerMedia) return providerMedia
   const url =
     typeof part.data === "string" && (part.data.startsWith("https://") || part.data.startsWith("http://"))
       ? part.data
@@ -507,17 +507,17 @@ const lowerMedia = Effect.fn("OpenResponses.lowerMedia")(function* (
 const lowerUserContent = Effect.fnUntraced(function* (
   part: LLMRequest["messages"][number]["content"][number],
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (part.type === "text") return { type: "input_text" as const, text: part.text }
-  if (part.type === "media") return yield* lowerMessageMedia(part, request, extension)
-  return yield* ProviderShared.unsupportedContent(extension.name, "user", ["text", "media"])
+  if (part.type === "media") return yield* lowerMessageMedia(part, request, adapter)
+  return yield* ProviderShared.unsupportedContent(adapter.name, "user", ["text", "media"])
 })
 
-const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request: LLMRequest, extension: Extension) {
-  const lowered = yield* lowerMedia(part, request, extension, "message")
+const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request: LLMRequest, adapter: ProviderAdapter) {
+  const lowered = yield* lowerMedia(part, request, adapter, "message")
   if (lowered.type === "input_video")
-    return yield* ProviderShared.invalidRequest(`${extension.name} user messages do not support input_video`)
+    return yield* ProviderShared.invalidRequest(`${adapter.name} user messages do not support input_video`)
   return lowered
 })
 
@@ -526,13 +526,13 @@ const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request:
 const lowerToolResultContentItem = Effect.fnUntraced(function* (
   item: Content,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (item.type === "text") return { type: "input_text" as const, text: item.text }
   return yield* lowerMedia(
     { type: "media", mediaType: item.mime, data: item.uri, filename: item.name },
     request,
-    extension,
+    adapter,
     "tool-result",
   )
 })
@@ -540,30 +540,33 @@ const lowerToolResultContentItem = Effect.fnUntraced(function* (
 const lowerHostedToolResultContentItem = Effect.fnUntraced(function* (
   item: Content,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (item.type === "text") return { type: "input_text" as const, text: item.text }
   return yield* lowerMessageMedia(
     { type: "media", mediaType: item.mime, data: item.uri, filename: item.name },
     request,
-    extension,
+    adapter,
   )
 })
 
 const lowerToolResultOutput = Effect.fnUntraced(function* (
   part: ToolResultPart,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   // Text/json/error results are encoded as a plain string for backward
   // compatibility with existing cassettes and provider expectations.
   if (part.result.type !== "content") return ProviderShared.toolResultText(part)
   // Preserve the narrowed array element type when compiled through a consumer package.
   const content: ReadonlyArray<Content> = part.result.value
-  return yield* Effect.forEach(content, (item) => lowerToolResultContentItem(item, request, extension))
+  return yield* Effect.forEach(content, (item) => lowerToolResultContentItem(item, request, adapter))
 })
 
-const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (request: LLMRequest, extension: Extension) {
+const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (
+  request: LLMRequest,
+  adapter: ProviderAdapter,
+) {
   const input: LoweredInputItem[] = []
   const providerMetadataKey = request.model.route.providerMetadataKey ?? "openresponses"
 
@@ -571,13 +574,13 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
     if (message.role === "system") {
       input.push({
         role: "developer",
-        content: ProviderShared.joinText(yield* ProviderShared.systemUpdateText(extension.name, message)),
+        content: ProviderShared.joinText(yield* ProviderShared.systemUpdateText(adapter.name, message)),
       })
       continue
     }
 
     if (message.role === "user") {
-      const content = yield* Effect.forEach(message.content, (part) => lowerUserContent(part, request, extension))
+      const content = yield* Effect.forEach(message.content, (part) => lowerUserContent(part, request, adapter))
       if (content.length > 0) input.push({ role: "user", content })
       continue
     }
@@ -644,7 +647,7 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
               ? undefined
               : Schema.is(HostedToolItem)(part.result.value)
                 ? part.result.value
-                : extension.lowerHostedToolItem?.(part.result.value)
+                : adapter.restoreHostedToolItem?.(part.result.value)
           if (id !== undefined && hosted?.id === id) {
             if (!hostedToolItems.has(id)) {
               input.push(hosted)
@@ -658,13 +661,11 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
               : [{ type: "text", text: ProviderShared.toolResultText(part) }]
           input.push({
             role: "user",
-            content: yield* Effect.forEach(content, (item) =>
-              lowerHostedToolResultContentItem(item, request, extension),
-            ),
+            content: yield* Effect.forEach(content, (item) => lowerHostedToolResultContentItem(item, request, adapter)),
           })
           continue
         }
-        return yield* ProviderShared.unsupportedContent(extension.name, "assistant", [
+        return yield* ProviderShared.unsupportedContent(adapter.name, "assistant", [
           "text",
           "reasoning",
           "tool-call",
@@ -677,11 +678,11 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
 
     for (const part of message.content) {
       if (!ProviderShared.supportsContent(part, ["tool-result"]))
-        return yield* ProviderShared.unsupportedContent(extension.name, "tool", ["tool-result"])
+        return yield* ProviderShared.unsupportedContent(adapter.name, "tool", ["tool-result"])
       input.push({
         type: "function_call_output",
         call_id: part.id,
-        output: yield* lowerToolResultOutput(part, request, extension),
+        output: yield* lowerToolResultOutput(part, request, adapter),
       })
     }
   }
@@ -733,28 +734,28 @@ const allowedToolChoice = (request: LLMRequest) => {
   }
 }
 
-export const fromRequestWithExtension = Effect.fn("OpenResponses.fromRequestWithExtension")(function* (
+export const fromRequestWithAdapter = Effect.fn("OpenResponses.fromRequestWithAdapter")(function* (
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   const generation = request.generation
   const toolSchemaCompatibility = request.model.compatibility?.toolSchema
   return {
     model: request.model.id,
-    input: yield* lowerMessages(request, extension),
+    input: yield* lowerMessages(request, adapter),
     tools:
       request.tools.length === 0
         ? undefined
         : yield* Effect.forEach(request.tools, (tool) =>
             lowerTool(
-              extension.name,
+              adapter.name,
               tool,
               ToolSchemaProjection.modelCompatibility(tool.inputSchema, toolSchemaCompatibility),
             ),
           ),
     tool_choice:
       allowedToolChoice(request) ??
-      (request.toolChoice ? yield* lowerToolChoice(extension.name, request.toolChoice) : undefined),
+      (request.toolChoice ? yield* lowerToolChoice(adapter.name, request.toolChoice) : undefined),
     stream: true as const,
     max_output_tokens: generation?.maxTokens,
     temperature: generation?.temperature,
@@ -768,7 +769,7 @@ export const fromRequestWithExtension = Effect.fn("OpenResponses.fromRequestWith
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(OpenResponsesBody))
 
 export const fromRequest = Effect.fn("OpenResponses.fromRequest")(function* (request: LLMRequest) {
-  return yield* decodeBody(yield* fromRequestWithExtension(request, BASE))
+  return yield* decodeBody(yield* fromRequestWithAdapter(request, BASE_ADAPTER))
 })
 
 // =============================================================================
@@ -1408,9 +1409,9 @@ export const step = (state: ParserState, input: Event) => {
  * The provider-neutral Open Responses protocol. Provider-specific Responses
  * implementations compose this baseline with their own tools and event variants.
  */
-export const initial = (request: LLMRequest, extension: Extension = BASE): ParserState => ({
-  id: extension.id,
-  name: extension.name,
+export const initial = (request: LLMRequest, adapter: ProviderAdapter = BASE_ADAPTER): ParserState => ({
+  id: adapter.id,
+  name: adapter.name,
   providerMetadataKey: request.model.route.providerMetadataKey ?? "openresponses",
   hasFunctionCall: false,
   tools: ToolStream.empty<string>(),

packages/ai/src/protocols/openai-responses.ts

@@ -86,11 +86,11 @@ const OpenAIResponsesBody = Schema.Struct({
 })
 export type OpenAIResponsesBody = Schema.Schema.Type<typeof OpenAIResponsesBody>
 
-const extension = {
+const adapter = {
   id: ADAPTER,
   name: NAME,
-  lowerHostedToolItem: (item: unknown) => (Schema.is(OpenAIResponsesHostedToolItem)(item) ? item : undefined),
-} satisfies OpenResponses.Extension
+  restoreHostedToolItem: (item: unknown) => (Schema.is(OpenAIResponsesHostedToolItem)(item) ? item : undefined),
+} satisfies OpenResponses.ProviderAdapter
 
 const nativeImageToolInput = (tool: ToolDefinition) => {
   const native = tool.native?.openai
@@ -125,9 +125,9 @@ const lowerToolChoice = (toolChoice: NonNullable<LLMRequest["toolChoice"]>, tool
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(OpenAIResponsesBody))
 
 const fromRequest = Effect.fn("OpenAIResponses.fromRequest")(function* (request: LLMRequest) {
-  const body = yield* OpenResponses.fromRequestWithExtension(
+  const body = yield* OpenResponses.fromRequestWithAdapter(
     LLMRequest.update(request, { tools: [], toolChoice: undefined }),
-    extension,
+    adapter,
   )
   const toolSchemaCompatibility = request.model.compatibility?.toolSchema
   const parallelToolCalls = OpenResponses.resolveParallelToolCalls(request)
@@ -204,7 +204,7 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: OpenResponses.protocol.stream.event,
-    initial: (request) => OpenResponses.initial(request, extension),
+    initial: (request) => OpenResponses.initial(request, adapter),
     step,
     terminal: OpenResponses.terminal,
   },

packages/ai/src/protocols/xai-responses.ts

@@ -36,15 +36,15 @@ const XAIResponsesBody = Schema.Struct({
   stream: Schema.Literal(true),
 })
 
-const extension = {
+const adapter = {
   id: ADAPTER,
   name: NAME,
-  lowerHostedToolItem: (item: unknown) => (Schema.is(XAIResponsesHostedToolItem)(item) ? item : undefined),
-} satisfies OpenResponses.Extension
+  restoreHostedToolItem: (item: unknown) => (Schema.is(XAIResponsesHostedToolItem)(item) ? item : undefined),
+} satisfies OpenResponses.ProviderAdapter
 
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(XAIResponsesBody))
 const fromRequest = Effect.fn("XAIResponses.fromRequest")(function* (request: LLMRequest) {
-  return yield* decodeBody(yield* OpenResponses.fromRequestWithExtension(request, extension))
+  return yield* decodeBody(yield* OpenResponses.fromRequestWithAdapter(request, adapter))
 })
 
 const HOSTED_TOOLS = {
@@ -78,7 +78,7 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: OpenResponses.protocol.stream.event,
-    initial: (request) => OpenResponses.initial(request, extension),
+    initial: (request) => OpenResponses.initial(request, adapter),
     step,
     terminal: OpenResponses.terminal,
   },

packages/cli/src/mini-host.ts

@@ -4,6 +4,7 @@ import fs from "node:fs"
 import { readFile } from "node:fs/promises"
 import path from "node:path"
 import { ReadStream } from "node:tty"
+import { OPENCODE_VERSION } from "./version"
 
 export const INTERACTIVE_INPUT_ERROR = "opencode mini requires a controlling terminal for input"
 
@@ -137,6 +138,7 @@ export function createMiniHost(input: {
     argv: process.argv.slice(2),
   }
   return {
+    version: OPENCODE_VERSION,
     terminal: { stdin: input.terminal.stdin },
     platform: process.platform,
     stdout: {

packages/cli/test/config.test.ts

@@ -486,7 +486,14 @@ test("updates a config draft while preserving JSONC comments", async () => {
       const service = yield* Config.Service
       return yield* service.update((draft) => {
         draft.prompt = { paste: "compact" }
-        draft.mini = { thinking: "hide", shell_output: "hide", turn_summary: "hide", splash: "hide", mono: true }
+        draft.mini = {
+          thinking: "hide",
+          shell_output: "hide",
+          turn_summary: "hide",
+          splash: "hide",
+          work_spinner: "block-low-comet",
+          mono: true,
+        }
       })
     }),
   )
@@ -494,7 +501,14 @@ test("updates a config draft while preserving JSONC comments", async () => {
   expect(config).toEqual({
     animations: true,
     prompt: { paste: "compact" },
-    mini: { thinking: "hide", shell_output: "hide", turn_summary: "hide", splash: "hide", mono: true },
+    mini: {
+      thinking: "hide",
+      shell_output: "hide",
+      turn_summary: "hide",
+      splash: "hide",
+      work_spinner: "block-low-comet",
+      mono: true,
+    },
   })
   expect(await Bun.file(path.join(directory.path, "cli.json")).text()).toContain("// Keep this comment")
 })

packages/cli/test/mini-host.test.ts

@@ -9,6 +9,7 @@ import {
   type InteractiveStdin,
   usingInteractiveStdin,
 } from "../src/mini-host"
+import { OPENCODE_VERSION } from "../src/version"
 import { tmpdir } from "./fixture/tmpdir"
 
 const model = { providerID: "openai", modelID: "gpt-5" }
@@ -145,6 +146,7 @@ describe("Mini CLI host", () => {
     const input = host({ stdin: stream(true), cleanup() {} }, directory.path)
 
     expect(input.paths).toEqual({ home: directory.path })
+    expect(input.version).toBe(OPENCODE_VERSION)
     expect(input.platform).toBe(process.platform)
     expect(typeof input.files.readText).toBe("function")
     const file = path.join(directory.path, "attachment.txt")

packages/core/src/tool/plugin/patch.ts

@@ -112,7 +112,6 @@ export const Plugin = {
                 return yield* new ToolFailure({ message: "patch rejected: empty patch" })
               }
               const prepared: Prepared[] = []
-              const updates = new Map<string, string>()
               const resolveTarget = Effect.fnUntraced(function* (value: string) {
                 const target = yield* mutation.resolve({ path: value, kind: "file" })
                 if (!target.externalDirectory) return target
@@ -131,6 +130,11 @@ export const Plugin = {
               for (const hunk of hunks) {
                 yield* Effect.gen(function* () {
                   const target = yield* resolveTarget(hunk.path)
+                  if (prepared.some((change) => change.target.absolute === target.absolute)) {
+                    return yield* new ToolFailure({
+                      message: `patch verification failed: invalid patch: multiple operations target ${target.absolute}`,
+                    })
+                  }
                   if (hunk.type === "add") {
                     const content =
                       hunk.contents.endsWith("\n") || hunk.contents === "" ? hunk.contents : `${hunk.contents}\n`
@@ -155,20 +159,15 @@ export const Plugin = {
                     prepared.push({ ...hunk, target, before: content.text, after: "" })
                     return
                   }
-                  const previous = updates.get(target.absolute)
-                  const original =
-                    previous ??
-                    (yield* Effect.gen(function* () {
-                      const content = yield* FileMutation.readText(environment.files, target.absolute).pipe(
-                        Effect.mapError(
-                          (error) =>
-                            new ToolFailure({
-                              message: `patch verification failed: Failed to read file to update ${target.absolute}: ${errorMessage(error)}`,
-                            }),
-                        ),
-                      )
-                      return Bom.join(content.text, content.bom)
-                    }))
+                  const content = yield* FileMutation.readText(environment.files, target.absolute).pipe(
+                    Effect.mapError(
+                      (error) =>
+                        new ToolFailure({
+                          message: `patch verification failed: Failed to read file to update ${target.absolute}: ${errorMessage(error)}`,
+                        }),
+                    ),
+                  )
+                  const original = Bom.join(content.text, content.bom)
                   const before = Bom.split(original).text
                   const update = yield* Effect.try({
                     try: () => Patch.derive(hunk.path, hunk.chunks, original),
@@ -183,7 +182,6 @@ export const Plugin = {
                     after: update.content,
                     moveTarget,
                   })
-                  if (!moveTarget) updates.set(target.absolute, Patch.joinBom(update.content, update.bom))
                 }).pipe(
                   Effect.mapError((error) =>
                     error instanceof ToolFailure

packages/core/test/effect/cross-spawn-spawner.test.ts

@@ -180,37 +180,6 @@ describe("cross-spawn spawner", () => {
   })
 
   describe("combined output (all)", () => {
-    for (const output of ["stdout", "stderr", "all"] as const) {
-      fx.live(
-        `captures ${output} when reading starts after process exit`,
-        Effect.gen(function* () {
-          const handle = yield* js('process.stdout.write("stdout\\n"); process.stderr.write("stderr\\n")')
-          expect(yield* handle.exitCode).toBe(ChildProcessSpawner.ExitCode(0))
-          // Let exit callbacks finish before attaching a reader; the handle scope remains open.
-          yield* Effect.promise(() => new Promise<void>((resolve) => setImmediate(resolve)))
-          expect((yield* decodeByteStream(handle[output])).split("\n").toSorted()).toEqual(
-            output === "all" ? ["stderr", "stdout"] : [output],
-          )
-        }).pipe(Effect.timeout("3 seconds")),
-      )
-    }
-
-    fx.live(
-      "drains output larger than the capture buffers",
-      Effect.gen(function* () {
-        const text = "x".repeat(1024 * 1024)
-        const handle = yield* js(
-          `const text = "x".repeat(${text.length}); process.stdout.write(text); process.stderr.write(text)`,
-        )
-        const [stdout, stderr] = yield* Effect.all([decodeByteStream(handle.stdout), decodeByteStream(handle.stderr)], {
-          concurrency: 2,
-        })
-        expect(stdout).toBe(text)
-        expect(stderr).toBe(text)
-        expect(yield* handle.exitCode).toBe(ChildProcessSpawner.ExitCode(0))
-      }).pipe(Effect.timeout("3 seconds")),
-    )
-
     fx.effect(
       "captures stdout via .all when no stderr",
       Effect.gen(function* () {
@@ -248,63 +217,6 @@ describe("cross-spawn spawner", () => {
   })
 
   describe("process control", () => {
-    fx.live(
-      "reports exit without waiting for unread stdout",
-      Effect.gen(function* () {
-        const handle = yield* js("process.stdout.write(Buffer.alloc(1024 * 1024)); process.exit(0)")
-        expect(yield* Effect.promise(() => gone(Number(handle.pid)))).toBe(true)
-        expect(yield* handle.exitCode.pipe(Effect.timeout("500 millis"))).toBe(ChildProcessSpawner.ExitCode(0))
-        expect(yield* handle.isRunning).toBe(false)
-      }),
-    )
-
-    fx.live(
-      "releases a process with unread buffered stdout",
-      Effect.gen(function* () {
-        const pid = yield* Effect.scoped(
-          Effect.gen(function* () {
-            const handle = yield* js(
-              'process.stdout.write("x".repeat(1024 * 1024)); process.stderr.write("ready"); setInterval(() => {}, 10_000)',
-              { forceKillAfter: 100 },
-            )
-            expect(yield* decodeByteStream(handle.stderr.pipe(Stream.take(1)))).toBe("ready")
-            return Number(handle.pid)
-          }),
-        )
-        expect(yield* Effect.promise(() => gone(pid))).toBe(true)
-      }).pipe(Effect.timeout("3 seconds")),
-    )
-
-    // Node puts non-detached Windows children in a kill-on-parent-exit job; this guards POSIX group cleanup.
-    const groupTest = process.platform === "win32" ? fx.live.skip : fx.live
-    groupTest(
-      "preserves successful descendants when an exit-only scope closes",
-      Effect.gen(function* () {
-        const tmp = yield* Effect.acquireRelease(
-          Effect.promise(() => tmpdir()),
-          (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
-        )
-        const pidFile = path.join(tmp.path, "child.pid")
-        yield* Effect.addFinalizer(() =>
-          Effect.tryPromise(async () => process.kill(Number(await fs.readFile(pidFile, "utf8")), "SIGKILL")).pipe(
-            Effect.ignore,
-          ),
-        )
-        yield* Effect.scoped(
-          Effect.gen(function* () {
-            // This fixture's child shares the process group and holds stdio after the parent exits on stdin EOF.
-            const handle = yield* ChildProcess.make(
-              "node",
-              [path.join(import.meta.dir, "../fixture/held-stdio.cjs"), "mcp", pidFile],
-              { stdin: "ignore", forceKillAfter: 100 },
-            )
-            expect(yield* handle.exitCode).toBe(ChildProcessSpawner.ExitCode(0))
-          }),
-        )
-        expect(alive(Number(yield* Effect.promise(() => fs.readFile(pidFile, "utf8"))))).toBe(true)
-      }).pipe(Effect.timeout("3 seconds")),
-    )
-
     for (const mode of ["exit", "SIGKILL"] as const) {
       const test = mode === "SIGKILL" && process.platform === "win32" ? fx.live.skip : fx.live
       test(

packages/core/test/patch.test.ts

@@ -248,6 +248,16 @@ describe("Patch", () => {
     ).toBe("line 1\nline 2\nadded 1\nadded 2\n")
   })
 
+  test.each(["", "original\n"])("preserves equal-offset insertion order and frozen chunks for %j", (original) => {
+    const chunks = Object.freeze([
+      Object.freeze({ oldLines: Object.freeze([]), newLines: Object.freeze(["first"]) }),
+      Object.freeze({ oldLines: Object.freeze([]), newLines: Object.freeze(["second", "third"]) }),
+    ])
+    const expected = { content: original + "first\nsecond\nthird\n", bom: false }
+    expect(Patch.derive("update.txt", chunks, original)).toEqual(expected)
+    expect(Patch.derive("update.txt", chunks, original)).toEqual(expected)
+  })
+
   test("applies a pure-addition chunk after an earlier replacement", () => {
     expect(
       Patch.derive(

packages/core/test/session-shell.test.ts

@@ -2,7 +2,6 @@ import { describe, expect } from "bun:test"
 import fs from "fs/promises"
 import path from "path"
 import { Cause, Context, Deferred, Effect, Exit, Fiber, Layer, Option, Schedule, Stream } from "effect"
-import { TestClock } from "effect/testing"
 import { Bus } from "@opencode-ai/core/bus"
 import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { Location } from "@opencode-ai/core/location"
@@ -273,45 +272,6 @@ describe("Session.shell", () => {
     )
   }
 
-  it.effect("keeps success when the invocation timeout expires during post-exit capture", () =>
-    Effect.gen(function* () {
-      const fixture = yield* setup
-      const pidFile = path.join(fixture.tmp.path, "child.pid")
-      yield* Effect.addFinalizer(() =>
-        Effect.tryPromise(async () => process.kill(Number(await fs.readFile(pidFile, "utf8")), "SIGKILL")).pipe(
-          Effect.ignore,
-        ),
-      )
-      const info = yield* fixture.shell.create({
-        command: `node "${path.join(import.meta.dir, "fixture/held-stdio.cjs")}" exit "${pidFile}"`,
-        timeout: 500,
-      })
-      const completion = yield* fixture.shell.wait(info.id).pipe(Effect.forkScoped)
-      // Wait for the real process without advancing its invocation timeout or capture deadline.
-      yield* fixture.shell
-        .get(info.id)
-        .pipe(
-          Effect.repeat({ until: (info) => info.status === "exited", schedule: Schedule.spaced("10 millis") }),
-          Effect.timeout("3 seconds"),
-          TestClock.withLive,
-        )
-      yield* TestClock.adjust("500 millis")
-      expect(yield* fixture.shell.get(info.id)).toMatchObject({ status: "exited", exit: 0 })
-      expect(completion.pollUnsafe()).toBeUndefined()
-
-      yield* TestClock.adjust("500 millis")
-      expect(yield* Fiber.join(completion).pipe(Effect.timeout("3 seconds"), TestClock.withLive)).toMatchObject({
-        status: "exited",
-        exit: 0,
-      })
-      const result = yield* fixture.shell.result(info)
-      expect(result.capture?.output).toContain("foreground-out")
-      expect(result.capture?.output).toContain("foreground-err")
-      const pid = Number(yield* Effect.promise(() => fs.readFile(pidFile, "utf8")))
-      expect(() => process.kill(pid, 0)).not.toThrow()
-    }),
-  )
-
   for (const outcome of [
     {
       status: "killed",

packages/core/test/tool-patch.test.ts

@@ -323,6 +323,43 @@ describe("PatchTool", () => {
     }),
   )
 
+  it.live("rejects multiple operations on the same resolved path before writing any files", () =>
+    withTempTool((directory, registry) =>
+      Effect.gen(function* () {
+        const target = path.join(directory, "duplicate.txt")
+        yield* Effect.promise(() => fs.writeFile(target, "before\n"))
+        const operations = [
+          "*** Add File: duplicate.txt\n+after",
+          "*** Update File: duplicate.txt\n@@\n-before\n+after",
+          "*** Delete File: duplicate.txt",
+        ]
+        for (const first of operations) {
+          for (const second of operations) {
+            for (const alias of ["duplicate.txt", "./duplicate.txt", target]) {
+              expect(
+                yield* executeTool(
+                  registry,
+                  call(
+                    `*** Begin Patch\n*** Add File: earlier.txt\n+earlier\n${first}\n${second.replace("duplicate.txt", alias)}\n*** End Patch`,
+                  ),
+                ),
+              ).toEqual({
+                status: "error",
+                error: {
+                  type: "tool.execution",
+                  message: `patch verification failed: invalid patch: multiple operations target ${target}`,
+                },
+              })
+              expect(yield* Effect.promise(() => fs.readFile(target, "utf8"))).toBe("before\n")
+              expect(yield* exists(path.join(directory, "earlier.txt"))).toBe(false)
+            }
+          }
+        }
+        expect(assertions).toEqual([])
+      }),
+    ),
+  )
+
   it.live("moves and updates a file", () =>
     Effect.acquireUseRelease(
       Effect.promise(() => tmpdir()),
@@ -635,17 +672,17 @@ describe("PatchTool", () => {
     ),
   )
 
-  it.live("applies successive update operations to one file", () =>
+  it.live("applies multiple chunks within one update operation", () =>
     withTempTool((directory, registry) =>
       Effect.gen(function* () {
         const target = path.join(directory, "successive.txt")
         yield* Effect.promise(() => fs.writeFile(target, "a\nb\n"))
-        yield* executeTool(
-          registry,
-          call(
-            "*** Begin Patch\n*** Update File: successive.txt\n@@\n-a\n+A\n*** Update File: successive.txt\n@@\n-b\n+B\n*** End Patch",
+        expect(
+          yield* executeTool(
+            registry,
+            call("*** Begin Patch\n*** Update File: successive.txt\n@@\n-a\n+A\n@@\n-b\n+B\n*** End Patch"),
           ),
-        )
+        ).toMatchObject({ status: "completed" })
         expect(yield* Effect.promise(() => fs.readFile(target, "utf8"))).toBe("A\nB\n")
       }),
     ),

packages/tui/src/component/one-cell-spinner.tsx

@@ -0,0 +1,78 @@
+import { parseColor, RGBA, type ColorInput } from "@opentui/core"
+import { useRenderer } from "@opentui/solid"
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
+import { oneCellFrame, type OneCellMotion } from "../ui/one-cell-motion"
+import { registerOpencodeSpinner } from "./register-spinner"
+
+registerOpencodeSpinner()
+
+export function OneCellSpinner(props: {
+  animation: OneCellMotion
+  color: ColorInput
+  animations?: boolean
+  speed?: number
+  paused?: boolean
+  glow?: boolean
+  age?: number
+  still?: string
+}) {
+  const renderer = useRenderer()
+  const [elapsed, setElapsed] = createSignal(0)
+  const sequenced = () => !!props.animation.intro || !!props.animation.once || !!props.animation.pace
+  const frame = createMemo(() => oneCellFrame(props.animation, elapsed()))
+  const complete = createMemo(() => frame().complete)
+  const base = createMemo(() => parseColor(props.color))
+  const color = createMemo(() => {
+    if (props.glow === false) return base()
+    if (sequenced()) {
+      const color = RGBA.clone(base())
+      color.a *= frame().level
+      return color
+    }
+    const palette = props.animation.levels?.map((level) => {
+      const color = RGBA.clone(base())
+      color.a *= level
+      return color
+    })
+    return palette ? (frame: number) => palette[frame]! : base()
+  })
+
+  createEffect(() => {
+    props.animation
+    props.animations
+    setElapsed(props.age ?? 0)
+  })
+  createEffect(() => {
+    if (!sequenced() || props.animations === false || props.paused || complete()) return
+    let previous = performance.now()
+    // Leave idle gaps: mini awaits renderer.idle() to flush and admit prompts.
+    const timer = setInterval(
+      () => {
+        const now = performance.now()
+        setElapsed((value) => value + (now - previous) * (props.speed ?? 1))
+        previous = now
+      },
+      Math.max(
+        1000 / 60,
+        Math.min(40, props.animation.interval / (props.speed ?? 1) / (props.animation.pace?.initial ?? 1)),
+      ),
+    )
+    onCleanup(() => {
+      clearInterval(timer)
+      renderer.requestRender()
+    })
+  })
+
+  return (
+    <box width={1} height={1} flexShrink={0}>
+      <Show when={props.animations !== false} fallback={<text fg={base()}>{props.still ?? "\u25aa"}</text>}>
+        <spinner
+          frames={sequenced() ? [frame().glyph] : props.animation.frames}
+          interval={props.animation.interval / (props.speed ?? 1)}
+          autoplay={!props.paused && !sequenced()}
+          color={color()}
+        />
+      </Show>
+    </box>
+  )
+}

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

@@ -51,13 +51,7 @@ import { DialogSkill } from "../dialog-skill"
 import { useArgs } from "../../context/args"
 import { useConfig } from "../../config"
 import { usePromptMove } from "./move"
-import {
-  normalizePastedFilepath,
-  parsePastedFilepaths,
-  readLocalAttachment,
-  MAX_LOCAL_ATTACHMENT_BYTES,
-  type LocalAttachment,
-} from "./local-attachment"
+import { resolvePastedAttachments } from "./local-attachment"
 import { locationKey, useData } from "../../context/data"
 import { useLocation } from "../../context/location"
 import { Keymap, type KeymapCommand } from "../../context/keymap"
@@ -1455,36 +1449,19 @@ export function Prompt(props: PromptProps) {
   async function pasteInputText(text: string, changed: () => boolean) {
     const normalizedText = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
     const pastedContent = normalizedText.trim()
-    const filepath = normalizePastedFilepath(pastedContent, terminalEnvironment.platform)
-    const isUrl = /^(https?):\/\//.test(filepath)
-    if (!isUrl) {
-      const attachment = await readLocalAttachment(filepath)
-      if (attachment) {
-        if (changed()) return
-        pasteLocalAttachment(filepath, attachment)
-        return
-      }
-
-      const filepaths = parsePastedFilepaths(pastedContent, terminalEnvironment.platform)
-      if (filepaths.length > 1) {
-        let remaining = MAX_LOCAL_ATTACHMENT_BYTES
-        const attachments: Array<{ filepath: string; attachment: LocalAttachment }> = []
-        for (const candidate of filepaths) {
-          const next = await readLocalAttachment(candidate, remaining)
-          if (!next) break
-          remaining -= typeof next.content === "string" ? Buffer.byteLength(next.content) : next.content.byteLength
-          attachments.push({ filepath: candidate, attachment: next })
-        }
-        if (attachments.length === filepaths.length) {
-          if (changed()) return
-          for (const item of attachments) pasteLocalAttachment(item.filepath, item.attachment)
+    const attachments = await resolvePastedAttachments(pastedContent, terminalEnvironment.platform)
+    if (changed()) return
+    if (attachments) {
+      attachments.forEach((attachment) => {
+        if (attachment.type === "text") {
+          pasteText(attachment.content, `[SVG: ${attachment.filename || "image"}]`)
           return
         }
-      }
+        pasteAttachment(attachment)
+      })
+      return
     }
 
-    if (changed()) return
-
     const lineCount = (pastedContent.match(/\n/g)?.length ?? 0) + 1
     if ((lineCount >= 3 || pastedContent.length > 150) && config.prompt?.paste !== "full") {
       const extmark = input.extmarks.getAllForTypeId(promptPartTypeId).find((extmark) => {
@@ -1509,18 +1486,6 @@ export function Prompt(props: PromptProps) {
     }, 0)
   }
 
-  function pasteLocalAttachment(filepath: string, attachment: LocalAttachment) {
-    const filename = path.basename(filepath)
-    if (attachment.type === "text") {
-      pasteText(attachment.content, `[SVG: ${filename || "image"}]`)
-      return
-    }
-    pasteAttachment({
-      filename,
-      uri: `data:${attachment.mime};base64,${Buffer.from(attachment.content).toString("base64")}`,
-    })
-  }
-
   function pasteAttachment(file: { filename?: string; uri: string }) {
     const currentOffset = input.cursorOffset
     const extmarkStart = currentOffset

packages/tui/src/component/prompt/local-attachment.ts

@@ -26,6 +26,38 @@ export function readLocalAttachment(file: string, maxBytes = MAX_LOCAL_ATTACHMEN
   )
 }
 
+export async function resolvePastedAttachments(text: string, platform: string) {
+  const pastedContent = text.trim()
+  const filepath = normalizePastedFilepath(pastedContent, platform)
+  if (/^(https?):\/\//.test(filepath)) return undefined
+
+  const attachment = await readLocalAttachment(filepath)
+  const attachments = attachment ? [{ filepath, attachment }] : []
+  if (!attachment) {
+    const filepaths = parsePastedFilepaths(pastedContent, platform)
+    if (filepaths.length <= 1) return undefined
+    let remaining = MAX_LOCAL_ATTACHMENT_BYTES
+    for (const candidate of filepaths) {
+      const next = await readLocalAttachment(candidate, remaining)
+      if (!next) return undefined
+      remaining -= typeof next.content === "string" ? Buffer.byteLength(next.content) : next.content.byteLength
+      attachments.push({ filepath: candidate, attachment: next })
+    }
+  }
+
+  return attachments.map((item) => {
+    const filename = path.basename(item.filepath)
+    if (item.attachment.type === "text") {
+      return { type: "text" as const, content: item.attachment.content, filename }
+    }
+    return {
+      type: "file" as const,
+      uri: `data:${item.attachment.mime};base64,${Buffer.from(item.attachment.content).toString("base64")}`,
+      filename,
+    }
+  })
+}
+
 const mimeTypes: Record<string, string> = {
   ".avif": "image/avif",
   ".gif": "image/gif",

packages/tui/src/config/index.tsx

@@ -26,6 +26,24 @@ export const AttentionSoundName = Schema.Literals([
 export type AttentionSoundName = Schema.Schema.Type<typeof AttentionSoundName>
 export type AttentionSoundPaths = Partial<Record<AttentionSoundName, string>>
 
+export const MiniWorkSpinner = Schema.Literals([
+  "block-soft-slide",
+  "block-soft-sweep",
+  "block-low-comet",
+  "block-low-duet",
+  "block-shuttle",
+  "block-bridge",
+  "block-squeeze",
+  "small-toggle",
+  "square-toggle",
+  "grow-shrink",
+  "quadrant-orbit",
+  "crosshatch",
+  "density-wave",
+  "seed",
+])
+export type MiniWorkSpinner = Schema.Schema.Type<typeof MiniWorkSpinner>
+
 export const Plugin = Schema.Union([
   Schema.String,
   Schema.Struct({
@@ -185,6 +203,9 @@ export const Info = Schema.Struct({
       splash: Schema.optional(Schema.Literals(["show", "hide"])).annotate({
         description: "Show or hide the entry and exit splash banners",
       }),
+      work_spinner: Schema.optional(MiniWorkSpinner).annotate({
+        description: "Work spinner animation in the Mini footer (default: block-soft-slide)",
+      }),
       mono: Schema.optional(Schema.Boolean).annotate({
         description: "Use monochrome ASCII output",
       }),

packages/tui/src/feature-plugins/system/storybook/index.tsx

@@ -5,6 +5,7 @@ import { StoryFooter } from "./footer"
 import { mermanLayoutsStory } from "./merman-layouts"
 import { sessionTabsStory } from "./session-tabs"
 import { sessionLocationMissingStory } from "./session-location-missing"
+import { oneCellSpinnerStory } from "./one-cell-spinner"
 
 /**
  * A story is a full-screen, fixture-driven simulation of a real production component. Stories own
@@ -16,7 +17,7 @@ export type Story = {
   render: (context: Plugin.Context) => JSX.Element
 }
 
-const stories: Story[] = [mermanLayoutsStory, sessionTabsStory, sessionLocationMissingStory]
+const stories: Story[] = [mermanLayoutsStory, sessionTabsStory, sessionLocationMissingStory, oneCellSpinnerStory]
 
 function Commands(props: { context: Plugin.Context }) {
   props.context.keymap.layer(() => ({

packages/tui/src/feature-plugins/system/storybook/one-cell-spinner.fixtures.ts

@@ -0,0 +1,144 @@
+import { SEED_LAUNCH, SEED_WORK, WORK_SPINNERS, type OneCellMotion } from "../../../ui/one-cell-motion"
+import { SUBCELL_SPINNERS } from "./subcell-spinner.fixtures"
+
+export type SpinnerFixture = OneCellMotion & {
+  name: string
+  description: string
+  launch?: OneCellMotion
+}
+
+function heldFrames(glyphs: string, holds: number[] = []) {
+  return Array.from(glyphs).flatMap((glyph, index) => Array.from({ length: holds[index] ?? 1 }, () => glyph))
+}
+
+function sequence(
+  name: string,
+  description: string,
+  glyphs: string,
+  interval: number,
+  holds?: number[],
+): SpinnerFixture {
+  return { name, description, frames: heldFrames(glyphs, holds), interval }
+}
+
+function pulse(
+  name: string,
+  description: string,
+  glyphs: string,
+  duration: number,
+  level: (phase: number) => number,
+  holds?: number[],
+): SpinnerFixture {
+  const shapes = heldFrames(glyphs, holds)
+  const phases = Array.from({ length: duration / 40 }, (_, index) => index / (duration / 40))
+  return {
+    name,
+    description,
+    frames: phases.map((phase) => shapes[Math.floor(phase * shapes.length)]!),
+    interval: 40,
+    // Keep a visible floor: a working indicator must never blink out entirely.
+    levels: phases.map((phase) => 0.3 + 0.7 * level(phase)),
+  }
+}
+
+const breathe = (phase: number) => (1 - Math.cos(phase * 2 * Math.PI)) / 2
+const ember = (phase: number) => (phase < 0.1 ? phase / 0.1 : ((1 - phase) / 0.9) ** 3)
+const seedBreathe = pulse("Seed breathe", "A still seed carries a slow breath of light.", "\u25aa", 1600, breathe)
+const seedToggle = pulse(
+  "Seed toggle",
+  "An outline fills with light, then opens again.",
+  "\u25ab\u25aa\u25aa\u25ab",
+  1600,
+  breathe,
+)
+export const ONE_CELL_SPINNERS: SpinnerFixture[] = [
+  {
+    ...WORK_SPINNERS["small-toggle"],
+    name: "Small toggle",
+    description: "A small square opens and closes in an even rhythm.",
+  },
+  {
+    ...WORK_SPINNERS["square-toggle"],
+    name: "Square toggle",
+    description: "A larger square opens and closes at a slower pace.",
+  },
+  {
+    ...WORK_SPINNERS["grow-shrink"],
+    name: "Grow / shrink",
+    description: "An outline fills, grows, and returns to a seed.",
+  },
+  sequence(
+    "Inset bloom",
+    "A square within a square opens into a full bloom.",
+    "\u25ab\u25aa\u25a3\u25a0\u25a3\u25aa",
+    120,
+    [3],
+  ),
+  sequence("Hollow bloom", "The outline grows before its center fills.", "\u25ab\u25a1\u25a3\u25a0\u25a3\u25a1", 160, [
+    3,
+  ]),
+  sequence(
+    "Corner orbit",
+    "A small square traces four corners without leaving its cell.",
+    "\u25f0\u25f3\u25f2\u25f1",
+    160,
+  ),
+  {
+    ...WORK_SPINNERS["quadrant-orbit"],
+    name: "Quadrant orbit",
+    description: "Four corners take their turn, clockwise.",
+  },
+  sequence("Half rotation", "Light and shade circle a still square.", "\u25e7\u2b12\u25e8\u2b13", 200),
+  { ...WORK_SPINNERS.crosshatch, name: "Crosshatch", description: "Diagonal threads cross, then change direction." },
+  {
+    ...WORK_SPINNERS["density-wave"],
+    name: "Density wave",
+    description: "Grain gathers into a block, then thins. The color stays still.",
+  },
+  sequence(
+    "Fill / drain",
+    "A narrow tide rises, then returns.",
+    "\u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588\u2587\u2586\u2585\u2584\u2583\u2582",
+    80,
+    [2, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2],
+  ),
+  sequence(
+    "Double beat",
+    "Two quick swells, then a quiet seed.",
+    "\u25aa\u25a0\u25aa\u25a0\u25aa",
+    100,
+    [1, 1, 2, 1, 11],
+  ),
+  sequence("Beacon", "One large flash settles into a seed that stays in sight.", "\u25a0\u25a3\u25aa", 120, [1, 1, 12]),
+  sequence(
+    "Held bloom",
+    "A seed swells, holds its bloom, then rests.",
+    "\u25aa\u25a3\u25a0\u25a3\u25aa",
+    160,
+    [4, 1, 2, 1, 2],
+  ),
+  seedBreathe,
+  pulse("Square breathe", "A larger square takes a longer breath.", "\u25a0", 2400, breathe),
+  pulse("Inset breathe", "A square within a square holds a soft breath of light.", "\u25a3", 2000, breathe),
+  pulse(
+    "Bloom + glow",
+    "A small bloom grows with the light, then recedes.",
+    "\u25aa\u25a3\u25a0\u25a3\u25aa",
+    1600,
+    breathe,
+    [6, 3, 2, 3, 6],
+  ),
+  pulse("Soft heartbeat", "Two soft beats of light, then a quiet glow.", "\u25aa", 1600, (phase) =>
+    Math.max(Math.exp(-(((phase - 0.2) / 0.08) ** 2)), 0.75 * Math.exp(-(((phase - 0.4) / 0.08) ** 2))),
+  ),
+  pulse("Ember", "A quick spark leaves a long glow in a still square.", "\u25a3", 1600, ember),
+  { ...seedToggle, launch: SEED_LAUNCH },
+  pulse("Seed ember", "A small, still seed catches light and lets it linger.", "\u25aa", 1600, ember),
+  {
+    ...SEED_WORK,
+    name: "Seed handoff",
+    description: "A spark lingers, then the breath grows quiet.",
+    launch: SEED_LAUNCH,
+  },
+  ...SUBCELL_SPINNERS,
+]

packages/tui/src/feature-plugins/system/storybook/one-cell-spinner.tsx

@@ -0,0 +1,293 @@
+import type { Plugin } from "@opencode-ai/plugin/tui"
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { batch, createEffect, createMemo, createSignal, For, Show } from "solid-js"
+import { OneCellSpinner } from "../../../component/one-cell-spinner"
+import { useConfig } from "../../../config"
+import { entrySplashLayout } from "../../../mini/splash"
+import { stringWidth } from "../../../util/string-width"
+import { StoryFooter } from "./footer"
+import type { Story } from "./index"
+import { ONE_CELL_SPINNERS } from "./one-cell-spinner.fixtures"
+
+function OneCellSpinnerStory(props: { context: Plugin.Context }) {
+  const dimensions = useTerminalDimensions()
+  const theme = props.context.theme
+  const config = useConfig()
+  const [selected, setSelected] = createSignal(39)
+  const [speed, setSpeed] = createSignal(1)
+  const [animations, setAnimations] = createSignal(config.data.animations ?? true)
+  const [paused, setPaused] = createSignal(false)
+  const [glow, setGlow] = createSignal(true)
+  const [solo, setSolo] = createSignal(false)
+  const [epoch, setEpoch] = createSignal(0)
+  const [age, setAge] = createSignal(0)
+  const animation = () => ONE_CELL_SPINNERS[selected()]!
+  const timing = createMemo(() => {
+    const item = animation()
+    const cycle = (item.frames.length * item.interval) / speed()
+    if (!item.pace) return `${Math.round((item.interval / speed()) * 10) / 10}ms tick / ${cycle}ms cycle`
+    return `${(cycle / item.pace.initial / 1000).toFixed(2)}s to ${(cycle / item.pace.final / 1000).toFixed(2)}s cycle`
+  })
+  const previewWidth = () => (solo() ? Math.min(dimensions().width, 64) : dimensions().width)
+  const speeds = createMemo(() => (dimensions().width >= 60 ? [0.5, 1, 2] : [speed()]))
+  const splash = createMemo(() =>
+    entrySplashLayout({ width: Math.max(1, previewWidth() - 8), version: "1.18.4", detail: "~/src/opencode" }),
+  )
+  let scroll: ScrollBoxRenderable | undefined
+  const revealSelected = () => {
+    if (!scroll || scroll.isDestroyed) return
+    const rows = scroll.viewport.height
+    scroll.scrollTo(Math.max(0, Math.min(selected() - Math.floor(rows / 2), ONE_CELL_SPINNERS.length - rows)))
+  }
+  createEffect(revealSelected)
+
+  props.context.keymap.layer(() => ({
+    commands: [
+      {
+        bind: "escape",
+        title: solo() ? "Leave focus" : "Back to storybook",
+        group: "Storybook",
+        run: () => {
+          if (solo()) return setSolo(false)
+          props.context.ui.router.navigate({ type: "plugin", name: "storybook" })
+        },
+      },
+      {
+        bind: "up,k",
+        title: "Previous animation",
+        group: "Storybook",
+        run: () => setSelected((value) => (value + ONE_CELL_SPINNERS.length - 1) % ONE_CELL_SPINNERS.length),
+      },
+      {
+        bind: "down,j",
+        title: "Next animation",
+        group: "Storybook",
+        run: () => setSelected((value) => (value + 1) % ONE_CELL_SPINNERS.length),
+      },
+      {
+        bind: "s",
+        title: "Cycle preview speed",
+        group: "Storybook",
+        run: () => setSpeed((value) => (value === 0.5 ? 1 : value === 1 ? 2 : 0.5)),
+      },
+      { bind: "space", title: "Pause / resume", group: "Storybook", run: () => setPaused((value) => !value) },
+      { bind: "a", title: "Toggle animations", group: "Storybook", run: () => setAnimations((value) => !value) },
+      { bind: "g", title: "Toggle intensity pulse", group: "Storybook", run: () => setGlow((value) => !value) },
+      {
+        bind: "f",
+        title: "Focus selected animation",
+        group: "Storybook",
+        run: () =>
+          batch(() => {
+            setSolo((value) => !value)
+            if (solo()) setEpoch((value) => value + 1)
+          }),
+      },
+      {
+        bind: "p",
+        title: "Replay animation",
+        group: "Storybook",
+        run: () =>
+          batch(() => {
+            setAge(0)
+            setEpoch((value) => value + 1)
+          }),
+      },
+      ...(animation().pace
+        ? [
+            {
+              bind: "t",
+              title: "Cycle work age",
+              group: "Storybook",
+              run: () => setAge((value) => (value === 0 ? 30_000 : value === 30_000 ? 60_000 : 0)),
+            },
+          ]
+        : []),
+      {
+        bind: "r",
+        title: "Reset comparison",
+        group: "Storybook",
+        run: () =>
+          batch(() => {
+            setSelected(39)
+            setSpeed(1)
+            setAnimations(config.data.animations ?? true)
+            setPaused(false)
+            setGlow(true)
+            setSolo(false)
+            setAge(0)
+            setEpoch((value) => value + 1)
+          }),
+      },
+    ],
+  }))
+
+  return (
+    <box
+      width={dimensions().width}
+      height={dimensions().height}
+      backgroundColor={theme.background.default}
+      justifyContent={solo() ? "center" : undefined}
+      alignItems={solo() ? "center" : undefined}
+    >
+      <Show when={!solo()}>
+        <text fg={theme.text.default} flexShrink={0}>
+          one-cell motion lab.
+        </text>
+      </Show>
+      <For each={[epoch()]}>
+        {() => (
+          <>
+            <Show when={!solo()}>
+              <box flexDirection="row" height={1} flexShrink={0} paddingLeft={1}>
+                <text width={22} fg={theme.text.subdued}>
+                  pattern
+                </text>
+                <For each={speeds()}>
+                  {(value) => (
+                    <text width={7} fg={theme.text.subdued}>
+                      {value}x
+                    </text>
+                  )}
+                </For>
+                <text fg={theme.text.subdued}>cycle @1x</text>
+              </box>
+              <scrollbox
+                ref={scroll}
+                flexGrow={1}
+                minHeight={1}
+                viewportOptions={{ paddingLeft: 1 }}
+                onSizeChange={() => queueMicrotask(revealSelected)}
+              >
+                <For each={ONE_CELL_SPINNERS}>
+                  {(item, index) => (
+                    <box height={1} flexShrink={0} flexDirection="row">
+                      <text
+                        width={22}
+                        wrapMode="none"
+                        fg={index() === selected() ? theme.text.formfield.selected : theme.text.formfield.default}
+                      >
+                        {index() === selected() ? ">" : " "}
+                        {String(index() + 1).padStart(2)} {item.name.toLowerCase()}.
+                      </text>
+                      <For each={speeds()}>
+                        {(value) => (
+                          <box width={7} flexShrink={0}>
+                            <OneCellSpinner
+                              animation={item}
+                              age={age()}
+                              speed={value}
+                              animations={animations()}
+                              paused={paused()}
+                              glow={glow()}
+                              color={theme.text.status.running}
+                            />
+                          </box>
+                        )}
+                      </For>
+                      <text width={10} fg={theme.text.subdued}>
+                        {item.pace ? "adaptive" : `${item.frames.length * item.interval}ms`}
+                      </text>
+                      <Show when={dimensions().width >= 80}>
+                        <text fg={theme.text.subdued}>
+                          {[...new Set(item.frames)].join(" ")}
+                          {item.levels ? "  + intensity" : ""}
+                        </text>
+                      </Show>
+                    </box>
+                  )}
+                </For>
+              </scrollbox>
+            </Show>
+            <box
+              width={previewWidth()}
+              flexShrink={0}
+              paddingLeft={1}
+              paddingRight={1}
+              alignItems={solo() ? "center" : undefined}
+            >
+              <text fg={theme.text.default} maxWidth="100%" attributes={solo() ? TextAttributes.BOLD : 0}>
+                <Show when={!solo()}>{String(selected() + 1).padStart(2, "0")} / </Show>
+                {animation().name.toLowerCase()}.
+              </text>
+              <Show when={!solo()}>
+                <text fg={theme.text.subdued} maxWidth="100%">
+                  {animation().description}
+                </text>
+                <text fg={theme.text.subdued}>
+                  {speed()}x: {timing()}
+                </text>
+              </Show>
+              <box
+                width={
+                  solo() ? Math.min(previewWidth() - 2, stringWidth(splash().label + splash().metadata) + 7) : "100%"
+                }
+                marginTop={solo() ? 1 : 0}
+              >
+                <box height={1} flexDirection="row">
+                  <text width={7} fg={theme.text.subdued}>
+                    work
+                  </text>
+                  <OneCellSpinner
+                    animation={animation()}
+                    age={age()}
+                    speed={speed()}
+                    animations={animations()}
+                    paused={paused()}
+                    glow={glow()}
+                    color={theme.text.status.running}
+                  />
+                  <text fg={theme.text.default}> esc stop</text>
+                </box>
+                <box height={1} flexDirection="row">
+                  <text width={7} fg={theme.text.subdued}>
+                    launch
+                  </text>
+                  <OneCellSpinner
+                    animation={animation().launch ?? animation()}
+                    speed={speed()}
+                    animations={animations()}
+                    paused={paused()}
+                    glow={glow()}
+                    color={theme.text.default}
+                  />
+                  <text fg={theme.text.default} wrapMode="none">
+                    {splash().label.slice(1)}
+                    <span style={{ fg: theme.text.subdued }}>{splash().metadata}</span>
+                  </text>
+                </box>
+              </box>
+            </box>
+          </>
+        )}
+      </For>
+      <Show when={!solo()}>
+        <StoryFooter
+          context={props.context}
+          title="motion lab."
+          details={[animations() ? (paused() ? "paused" : "playing") : "motion off", glow() ? "glow on" : "shape only"]}
+          status={animation().pace ? `start at ${age() / 1000}s | slows after 30s` : undefined}
+          controls={[
+            { shortcut: "j/k", label: "select" },
+            { shortcut: "s", label: "speed" },
+            { shortcut: "space", label: "pause" },
+            { shortcut: "a", label: "motion" },
+            { shortcut: "g", label: "glow" },
+            { shortcut: "f", label: "focus" },
+            { shortcut: "p", label: "replay" },
+            ...(animation().pace ? [{ shortcut: "t", label: "age 0/30/60s" }] : []),
+            { shortcut: "r", label: "reset" },
+            { shortcut: "esc", label: "back" },
+          ]}
+        />
+      </Show>
+    </box>
+  )
+}
+
+export const oneCellSpinnerStory: Story = {
+  id: "one-cell-spinners",
+  title: "one-cell spinners.",
+  render: (context) => <OneCellSpinnerStory context={context} />,
+}

packages/tui/src/feature-plugins/system/storybook/subcell-spinner.fixtures.ts

@@ -0,0 +1,115 @@
+import {
+  BLOCK_LOW_COMET,
+  BLOCK_SOFT_SLIDE,
+  BLOCK_SOFT_SWEEP,
+  SEED_LAUNCH,
+  WORK_SPINNERS,
+} from "../../../ui/one-cell-motion"
+import { octantGlyph } from "../../../ui/subcell"
+import type { SpinnerFixture } from "./one-cell-spinner.fixtures"
+
+const perimeter = [0, 1, 3, 5, 7, 6, 4, 2]
+const patterns = [
+  {
+    name: "comet",
+    description: "Three pixels chase the edge.",
+    interval: 100,
+    masks: perimeter.map(
+      (point, index) => (1 << point) | (1 << perimeter[(index + 7) % 8]!) | (1 << perimeter[(index + 6) % 8]!),
+    ),
+  },
+  {
+    name: "orbit",
+    description: "Two pixels keep a steady orbit.",
+    interval: 140,
+    masks: perimeter.map((point, index) => (1 << point) | (1 << perimeter[(index + 7) % 8]!)),
+  },
+  {
+    name: "duet",
+    description: "Two pairs circle opposite edges.",
+    interval: 180,
+    masks: perimeter
+      .slice(0, 4)
+      .map((_, index) => [0, 3, 4, 7].reduce((mask, offset) => mask | (1 << perimeter[(index + offset) % 8]!), 0)),
+  },
+  {
+    name: "scan",
+    description: "A row sweeps down, pauses, and returns.",
+    interval: 130,
+    masks: [0, 0, 1, 2, 3, 3, 2, 1].map((row) => 3 << (row * 2)),
+  },
+  {
+    name: "weave",
+    description: "Four pixels pass from side to side.",
+    interval: 200,
+    masks: [0x55, 0x69, 0xaa, 0x96],
+  },
+  {
+    name: "tide",
+    description: "Rows rise from the floor, then recede.",
+    interval: 160,
+    masks: [0xc0, 0xc0, 0xf0, 0xfc, 0xff, 0xfc, 0xf0],
+  },
+  {
+    name: "low comet",
+    description: "The tail recedes before the head moves. The top row stays empty.",
+    motion: BLOCK_LOW_COMET,
+    blockOnly: true,
+  },
+  {
+    name: "low duet",
+    description: "Two tails recede, then the heads move. The top row stays empty.",
+    motion: WORK_SPINNERS["block-low-duet"],
+    blockOnly: true,
+  },
+  // The middle four octants are bits 2-5: left column 0x14, right column 0x28.
+  {
+    name: "shuttle",
+    description: "A narrow bar moves left and right through the middle four.",
+    motion: WORK_SPINNERS["block-shuttle"],
+    blockOnly: true,
+  },
+  {
+    name: "bridge",
+    description: "The bar stretches across the middle four, then settles opposite.",
+    motion: WORK_SPINNERS["block-bridge"],
+    blockOnly: true,
+  },
+  {
+    name: "soft sweep",
+    description: "A staggered wipe crosses the middle four and retraces its path.",
+    motion: BLOCK_SOFT_SWEEP,
+    blockOnly: true,
+  },
+  {
+    name: "squeeze",
+    description: "The middle bar folds, hops sideways, and opens.",
+    motion: WORK_SPINNERS["block-squeeze"],
+    blockOnly: true,
+  },
+  {
+    name: "soft slide",
+    description: "The middle bar softens before each sideways step.",
+    blockOnly: true,
+    motion: BLOCK_SOFT_SLIDE,
+  },
+]
+
+export const SUBCELL_SPINNERS: SpinnerFixture[] = patterns.flatMap((pattern) =>
+  (pattern.blockOnly ? ["block"] : ["block", "dot"]).map((style) => ({
+    name: `${style} ${pattern.name}`,
+    description: `${pattern.description} ${style === "block" ? "2x4 octants need a recent font." : "2x4 braille dots."}`,
+    ...(pattern.motion ?? {
+      interval: pattern.interval!,
+      frames: pattern.masks!.map((mask) => {
+        if (style === "dot") {
+          // Braille numbers its dots by column rather than by raster row.
+          const dots = [0, 3, 1, 4, 2, 5, 6, 7].reduce((value, bit, index) => value | (((mask >> index) & 1) << bit), 0)
+          return String.fromCodePoint(0x2800 + dots)
+        }
+        return octantGlyph(mask)
+      }),
+    }),
+    launch: SEED_LAUNCH,
+  })),
+)

packages/tui/src/mini/demo.ts

@@ -32,6 +32,7 @@ import type {
 } from "./types"
 
 const KINDS = [
+  "motion",
   "markdown",
   "table",
   "text",
@@ -152,6 +153,7 @@ type State = {
   perms: Map<string, Perm>
   forms: Map<string, FormRequest>
   started: Set<string>
+  motion?: AbortController
 }
 
 type Input = {
@@ -814,6 +816,17 @@ function emitForm(state: State, kind: FormKind = "question"): void {
 }
 
 async function emitFmt(state: State, kind: string, body: string, signal?: AbortSignal): Promise<boolean> {
+  if (kind === "motion") {
+    note(state.footer, "Working indicator demo: 70 seconds, no model calls. Interrupt to stop early.")
+    const controller = new AbortController()
+    state.motion = controller
+    try {
+      await wait(70_000, signal ? AbortSignal.any([controller.signal, signal]) : controller.signal)
+    } finally {
+      state.motion = undefined
+    }
+    return true
+  }
   if (kind === "text") {
     await emitText(state, body || SAMPLE_MARKDOWN, signal)
     return true
@@ -900,6 +913,7 @@ function intro(state: State): void {
       "- /form question",
       "- /form external",
       "- /fmt markdown",
+      "- /fmt motion",
       "- /fmt table",
       "- /fmt text your custom text",
     ].join("\n"),
@@ -1037,6 +1051,11 @@ export function createRunDemo(input: Input) {
   return {
     start,
     prompt,
+    interrupt() {
+      if (!state.motion) return false
+      state.motion.abort()
+      return true
+    },
     permission,
     formReply,
     formCancel,

packages/tui/src/mini/entry.body.ts

@@ -194,6 +194,11 @@ export function entryBody(commit: StreamCommit, options?: ScrollbackOptions): Ru
   const raw = cleanRunText(commit.text)
   const mono = options?.mono === true
 
+  if (commit.image) {
+    const caption = raw.trim() || "Image"
+    return commit.kind === "user" ? userBody(caption, mono) : textBody(monoToolText(caption, mono))
+  }
+
   if (commit.kind === "user") {
     return userBody(raw, mono)
   }

packages/tui/src/mini/footer.command.tsx

@@ -1,10 +1,20 @@
 /** @jsxImportSource @opentui/solid */
 import { TextAttributes, type InputRenderable, type KeyEvent } from "@opentui/core"
-import { useKeyboard, type JSX } from "@opentui/solid"
+import { useKeyboard, useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
 import fuzzysort from "fuzzysort"
 import { createEffect, createMemo, createSignal, type Accessor } from "solid-js"
 import { Keymap } from "../context/keymap"
-import { RunFooterMenu, createFooterMenuState, type RunFooterMenuItem } from "./footer.menu"
+import { Config } from "../config"
+import { OneCellSpinner } from "../component/one-cell-spinner"
+import { SEED_MONO, WORK_SPINNERS } from "../ui/one-cell-motion"
+import {
+  FOOTER_COMPACT_WIDTH,
+  RunFooterMenu,
+  createFooterMenuState,
+  footerMenuText,
+  type RunFooterMenuItem,
+} from "./footer.menu"
+import { stringWidth } from "../util/string-width"
 import { monoShortcut } from "./mono"
 import type { RunFooterTheme } from "./theme"
 import type {
@@ -78,7 +88,12 @@ const PANEL_FRAME_ROWS = 6
 export const RUN_COMMAND_PANEL_ROWS = PANEL_LIST_ROWS + PANEL_FRAME_ROWS
 const SUBAGENT_LIST_ROWS = 12
 export const RUN_SUBAGENT_PANEL_ROWS = SUBAGENT_LIST_ROWS + PANEL_FRAME_ROWS
-const PANEL_PAGE = PANEL_LIST_ROWS - 1
+export function footerPanelLayout(height: number, limit = PANEL_LIST_ROWS) {
+  const available = Math.max(3, height - 1)
+  const compact = available < limit + PANEL_FRAME_ROWS
+  const frame = compact ? 2 : PANEL_FRAME_ROWS
+  return { compact, frame, limit: Math.max(1, Math.min(limit, available - frame)) }
+}
 const HALF_BLOCK_BORDER = {
   topLeft: "",
   bottomLeft: "",
@@ -138,10 +153,17 @@ function createSearchablePanelController<T extends PanelEntry>(input: {
   onKey?: (event: KeyEvent, item: T | undefined) => boolean
   onRows?: (rows: number) => void
 }) {
+  const renderer = useRenderer()
+  const term = useTerminalDimensions()
+  const layout = createMemo(() => {
+    term()
+    // The panel mounts before the footer expands, so its initial render height is stale.
+    return footerPanelLayout(renderer.terminalHeight, input.limit)
+  })
   let field: InputRenderable | undefined
   const [query, setQuery] = createSignal("")
   const items = createMemo<T[]>(() => match(query(), input.entries()))
-  const menu = createFooterMenuState({ count: () => items().length, limit: input.limit })
+  const menu = createFooterMenuState({ count: () => items().length, limit: () => layout().limit })
   const selected = () => items()[menu.selected()]
 
   createEffect(() => {
@@ -161,7 +183,7 @@ function createSearchablePanelController<T extends PanelEntry>(input: {
   })
 
   createEffect(() => {
-    input.onRows?.(menu.rows() + PANEL_FRAME_ROWS)
+    input.onRows?.(menu.rows() + layout().frame)
   })
 
   useKeyboard((event) => {
@@ -201,13 +223,13 @@ function createSearchablePanelController<T extends PanelEntry>(input: {
 
     if (name === "pageup") {
       event.preventDefault()
-      menu.reveal(menu.selected() - PANEL_PAGE)
+      menu.reveal(menu.selected() - Math.max(1, menu.limit() - 1))
       return
     }
 
     if (name === "pagedown") {
       event.preventDefault()
-      menu.reveal(menu.selected() + PANEL_PAGE)
+      menu.reveal(menu.selected() + Math.max(1, menu.limit() - 1))
       return
     }
 
@@ -244,6 +266,7 @@ function createSearchablePanelController<T extends PanelEntry>(input: {
     setQuery,
     items,
     menu,
+    layout,
     inputRef(input: InputRenderable) {
       field = input
     },
@@ -263,50 +286,66 @@ function PanelShell(props: {
   children: JSX.Element
   hint?: string
   mono?: boolean
+  background?: boolean
+  layout: ReturnType<typeof footerPanelLayout>
 }) {
-  const background = () => props.theme().shade
+  const term = useTerminalDimensions()
+  const pad = () => (term().width < FOOTER_COMPACT_WIDTH ? 1 : panelPad(props.mono))
+  const header = createMemo(() => {
+    const width = Math.max(0, term().width - pad() * 2 - 4)
+    const title = footerMenuText(props.title, width, props.mono)
+    const count = countLabel(props.count, props.total, props.query)
+    const showCount = props.countVisible !== false && stringWidth(props.title) + stringWidth(count) + 1 <= width
+    const hint =
+      props.hint &&
+      stringWidth(props.title) + (showCount ? stringWidth(count) + 1 : 0) + stringWidth(props.hint) + 3 <= width
+    return { title, count: showCount ? count : undefined, hint: hint ? props.hint : undefined }
+  })
+  const background = () => (props.background === false ? "transparent" : props.theme().shade)
   const content = (
     <>
-      <box height={1} flexShrink={0} backgroundColor={background()} />
+      <box height={props.layout.compact ? 0 : 1} flexShrink={0} backgroundColor={background()} />
       <box
         width="100%"
         height={1}
-        paddingLeft={panelPad(props.mono)}
-        paddingRight={panelPad(props.mono)}
+        paddingLeft={pad()}
+        paddingRight={pad()}
         flexDirection="row"
-        gap={1}
+        gap={0}
         flexShrink={0}
         backgroundColor={background()}
       >
         <text fg={props.theme().text} attributes={TextAttributes.BOLD} wrapMode="none" flexShrink={0}>
-          {props.title}
+          {header().title}
         </text>
-        {props.countVisible !== false ? (
+        {header().count ? (
           <text fg={props.theme().muted} wrapMode="none" flexShrink={0}>
-            {countLabel(props.count, props.total, props.query)}
+            {" " + header().count}
           </text>
         ) : null}
-        <box flexGrow={1} flexShrink={1} backgroundColor="transparent" />
-        <text fg={props.theme().muted} wrapMode="none" truncate flexShrink={0}>
-          {props.hint ? `${props.hint} ${props.mono ? "-" : "·"} ` : ""}esc
+        <box minWidth={1} flexGrow={1} flexShrink={1} backgroundColor="transparent" />
+        <text fg={props.theme().muted} wrapMode="none" flexShrink={0}>
+          {header().hint ? `${header().hint} ${props.mono ? "-" : "·"} ` : ""}esc
         </text>
       </box>
-      <box height={1} flexShrink={0} backgroundColor={background()} />
+      <box height={props.layout.compact ? 0 : 1} flexShrink={0} backgroundColor={background()} />
       <box
         width="100%"
         height={1}
-        paddingLeft={panelPad(props.mono)}
-        paddingRight={panelPad(props.mono)}
+        paddingLeft={pad()}
+        paddingRight={pad()}
         flexShrink={0}
         backgroundColor={background()}
       >
         <input
           width="100%"
-          focusedBackgroundColor={background()}
-          focusedTextColor={props.theme().text}
+          focusedBackgroundColor={props.background === false ? "transparent" : props.theme().formfieldFocusedBg}
+          focusedTextColor={
+            props.background === false ? props.theme().formfieldText : props.theme().formfieldFocusedText
+          }
           placeholder={props.placeholder}
           placeholderColor={props.theme().muted}
-          cursorColor={props.theme().highlight}
+          cursorColor={props.background === false ? props.theme().formfieldText : props.theme().formfieldFocusedText}
           onInput={props.onQuery}
           ref={(input) => {
             props.inputRef(input)
@@ -319,7 +358,7 @@ function PanelShell(props: {
           }}
         />
       </box>
-      <box height={1} flexShrink={0} backgroundColor={background()} />
+      <box height={props.layout.compact ? 0 : 1} flexShrink={0} backgroundColor={background()} />
       <box width="100%" flexDirection="column" flexShrink={0} backgroundColor={background()}>
         {props.children}
       </box>
@@ -330,8 +369,14 @@ function PanelShell(props: {
       <box width="100%" flexDirection="column" border={false} backgroundColor="transparent" flexShrink={0}>
         {content}
       </box>
-      <box width="100%" height={1} border={false} backgroundColor="transparent" flexShrink={0}>
-        {props.mono ? null : (
+      <box
+        width="100%"
+        height={props.layout.compact ? 0 : 1}
+        border={false}
+        backgroundColor="transparent"
+        flexShrink={0}
+      >
+        {props.layout.compact || props.mono || props.background === false ? null : (
           <box
             width="100%"
             height={1}
@@ -562,6 +607,7 @@ export function RunCommandMenuBody(props: {
   return (
     <PanelShell
       title="Commands"
+      layout={controller.layout()}
       countVisible={false}
       query={controller.query()}
       count={controller.items().length}
@@ -577,8 +623,9 @@ export function RunCommandMenuBody(props: {
         items={controller.items}
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No results found"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -609,6 +656,7 @@ export function RunAgentSelectBody(props: {
         display: agent.id,
         description: agent.description,
         footer: props.current() === agent.id ? "current" : undefined,
+        footerTone: "selection" as const,
         keywords: `${agent.id} ${agent.name} ${agent.description ?? ""}`,
         id: agent.id,
         current: props.current() === agent.id,
@@ -625,6 +673,7 @@ export function RunAgentSelectBody(props: {
   return (
     <PanelShell
       title="Select agent"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -639,8 +688,9 @@ export function RunAgentSelectBody(props: {
         items={controller.items}
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No agents found"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -659,6 +709,7 @@ export function RunSettingsBody(props: {
   onClose: () => void
   onChange: (change: MiniSettingChange) => void | Promise<void>
   mono?: boolean
+  animations?: boolean
 }) {
   const [saving, setSaving] = createSignal<keyof MiniSettings>()
   const entries = createMemo<SettingEntry[]>(() => [
@@ -666,6 +717,7 @@ export function RunSettingsBody(props: {
       category: "Transcript",
       display: "Thinking",
       footer: saving() === "thinking" ? "saving" : props.settings().thinking,
+      footerTone: saving() === "thinking" ? "running" : "selection",
       keywords: `thinking reasoning ${props.settings().thinking}`,
       key: "thinking",
     },
@@ -673,6 +725,7 @@ export function RunSettingsBody(props: {
       category: "Transcript",
       display: "Shell",
       footer: saving() === "shell_output" ? "saving" : props.settings().shell_output,
+      footerTone: saving() === "shell_output" ? "running" : "selection",
       keywords: `shell tool command output ${props.settings().shell_output}`,
       key: "shell_output",
     },
@@ -680,6 +733,7 @@ export function RunSettingsBody(props: {
       category: "Transcript",
       display: "Turn summary",
       footer: saving() === "turn_summary" ? "saving" : props.settings().turn_summary,
+      footerTone: saving() === "turn_summary" ? "running" : "selection",
       keywords: `turn summary agent model duration ${props.settings().turn_summary}`,
       key: "turn_summary",
     },
@@ -687,6 +741,7 @@ export function RunSettingsBody(props: {
       category: "Terminal",
       display: "Footer details",
       footer: saving() === "footer" ? "saving" : props.settings().footer,
+      footerTone: saving() === "footer" ? "running" : "selection",
       keywords: `footer status activity model context usage ${props.settings().footer}`,
       key: "footer",
     },
@@ -694,6 +749,7 @@ export function RunSettingsBody(props: {
       category: "Terminal",
       display: "Splash",
       footer: saving() === "splash" ? "saving" : props.settings().splash,
+      footerTone: saving() === "splash" ? "running" : "selection",
       keywords: `splash entry exit banner ${props.settings().splash}`,
       key: "splash",
     },
@@ -701,16 +757,46 @@ export function RunSettingsBody(props: {
       category: "Terminal",
       display: "Monochrome UI",
       footer: saving() === "mono" ? "saving" : props.settings().mono ? "on" : "off",
+      footerTone: saving() === "mono" ? "running" : "selection",
       keywords: `mono monochrome ascii legacy compat terminal ${props.settings().mono ? "on" : "off"}`,
       key: "mono",
     },
+    {
+      category: "Terminal",
+      display: "Work spinner",
+      icon: (color) => (
+        <OneCellSpinner
+          animation={props.mono ? SEED_MONO : WORK_SPINNERS[props.settings().work_spinner]}
+          color={color}
+          animations={props.animations}
+          glow={!props.mono}
+          still={props.mono ? "*" : undefined}
+        />
+      ),
+      footer:
+        saving() === "work_spinner"
+          ? "saving"
+          : props.settings().work_spinner.replace("block-", "").replaceAll("-", " "),
+      footerTone: saving() === "work_spinner" ? "running" : "selection",
+      keywords: `work spinner animation ${props.settings().work_spinner}`,
+      key: "work_spinner",
+    },
   ])
-  const change = (item: SettingEntry) => {
+  const change = (item: SettingEntry, direction = 1) => {
     if (saving()) return
+    const spinners = Config.MiniWorkSpinner.literals
     const next: MiniSettingChange =
-      item.key === "mono"
-        ? { key: "mono", value: !props.settings().mono }
-        : { key: item.key, value: props.settings()[item.key] === "show" ? "hide" : "show" }
+      item.key === "work_spinner"
+        ? {
+            key: "work_spinner",
+            value:
+              spinners[
+                (spinners.indexOf(props.settings().work_spinner) + direction + spinners.length) % spinners.length
+              ]!,
+          }
+        : item.key === "mono"
+          ? { key: "mono", value: !props.settings().mono }
+          : { key: item.key, value: props.settings()[item.key] === "show" ? "hide" : "show" }
     setSaving(item.key)
     void Promise.resolve(props.onChange(next))
       .catch(() => {})
@@ -725,7 +811,7 @@ export function RunSettingsBody(props: {
       const name = event.name.toLowerCase()
       if (name !== "left" && name !== "right") return false
       event.preventDefault()
-      if (item) change(item)
+      if (item) change(item, name === "left" ? -1 : 1)
       return true
     },
   })
@@ -733,6 +819,7 @@ export function RunSettingsBody(props: {
   return (
     <PanelShell
       title="Settings"
+      layout={controller.layout()}
       countVisible={false}
       query={controller.query()}
       count={controller.items().length}
@@ -749,8 +836,9 @@ export function RunSettingsBody(props: {
         items={controller.items}
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No settings found"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -785,6 +873,12 @@ export function RunSubagentSelectBody(props: {
           display: title,
           description: title === item.label ? undefined : item.label,
           footer: subagentStatusLabel(item.status),
+          footerTone:
+            item.status === "running" || item.status === "error"
+              ? item.status
+              : item.status === "completed"
+                ? ("success" as const)
+                : undefined,
           keywords: `${item.label} ${item.description} ${item.title ?? ""} ${item.status}`,
           sessionID: item.sessionID,
           current: props.current() === item.sessionID,
@@ -810,6 +904,7 @@ export function RunSubagentSelectBody(props: {
   return (
     <PanelShell
       title="Select subagent"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -826,7 +921,8 @@ export function RunSubagentSelectBody(props: {
         selected={controller.menu.selected}
         offset={controller.menu.offset}
         rows={controller.menu.rows}
-        limit={SUBAGENT_LIST_ROWS}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No subagents found"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -885,6 +981,7 @@ export function RunQueuedPromptSelectBody(props: {
   return (
     <PanelShell
       title="Queued prompts"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -901,7 +998,8 @@ export function RunQueuedPromptSelectBody(props: {
         selected={controller.menu.selected}
         offset={controller.menu.offset}
         rows={controller.menu.rows}
-        limit={SUBAGENT_LIST_ROWS}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No queued prompts"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -943,6 +1041,7 @@ export function RunSkillSelectBody(props: {
   return (
     <PanelShell
       title="Skills"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -957,8 +1056,9 @@ export function RunSkillSelectBody(props: {
         items={controller.items}
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty={props.commands() ? "No skills found" : "Skills loading"}
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -983,7 +1083,8 @@ export function RunVariantSelectBody(props: {
     {
       category: "",
       display: "Default",
-      description: props.current() === undefined ? "current" : undefined,
+      footer: props.current() === undefined ? "current" : undefined,
+      footerTone: "selection",
       keywords: "default",
       variant: undefined,
       current: props.current() === undefined,
@@ -991,7 +1092,8 @@ export function RunVariantSelectBody(props: {
     ...props.variants().map((variant) => ({
       category: "",
       display: variant,
-      description: props.current() === variant ? "current" : undefined,
+      footer: props.current() === variant ? "current" : undefined,
+      footerTone: "selection" as const,
       keywords: variant,
       variant,
       current: props.current() === variant,
@@ -1008,6 +1110,7 @@ export function RunVariantSelectBody(props: {
   return (
     <PanelShell
       title="Select variant"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -1022,8 +1125,9 @@ export function RunVariantSelectBody(props: {
         items={controller.items}
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty="No results found"
         border={false}
         paddingLeft={panelPad(props.mono)}
@@ -1066,6 +1170,7 @@ export function RunModelSelectBody(props: {
               category: provider.name,
               display: title,
               footer,
+              footerTone: current ? ("selection" as const) : undefined,
               keywords: `${provider.id} ${provider.name} ${modelID} ${title} ${footer ?? ""}`,
               current,
             }
@@ -1096,6 +1201,7 @@ export function RunModelSelectBody(props: {
   return (
     <PanelShell
       title="Select model"
+      layout={controller.layout()}
       query={controller.query()}
       count={controller.items().length}
       total={entries().length}
@@ -1104,24 +1210,26 @@ export function RunModelSelectBody(props: {
       inputRef={controller.inputRef}
       onQuery={controller.setQuery}
       mono={props.mono}
+      background={false}
     >
       <RunFooterMenu
         theme={props.theme}
         items={() =>
-          controller.query().trim()
-            ? controller.items().map((item) => ({ ...item, footer: item.providerName }))
+          controller.query().trim() ||
+          (controller.layout().compact && new Set(controller.items().map((item) => item.providerID)).size > 1)
+            ? controller.items().map((item) => ({ ...item, footer: item.providerName, footerTone: undefined }))
             : controller.items()
         }
         selected={controller.menu.selected}
         offset={controller.menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
+        rows={controller.menu.limit}
+        limit={controller.menu.limit()}
+        compact={controller.layout().compact}
         empty={props.providers() ? "No results found" : "Models loading"}
         border={false}
         paddingLeft={panelPad(props.mono)}
         paddingRight={panelPad(props.mono)}
         grouped={!controller.query().trim()}
-        background
         headerColor={props.theme().muted}
         mono={props.mono}
       />

packages/tui/src/mini/footer.form.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
-import type { TextareaRenderable } from "@opentui/core"
-import { useKeyboard } from "@opentui/solid"
+import type { BoxRenderable, ScrollBoxRenderable, TextareaRenderable } from "@opentui/core"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import {
   createFormBodyState,
@@ -34,6 +34,7 @@ import {
 import type { FormBodyState } from "./form.shared"
 import type { RunFooterTheme } from "./theme"
 import type { FormCancel, FormReply, MiniFormRequest } from "./types"
+import { stringWidth } from "../util/string-width"
 
 export function RunFormBody(props: {
   request: MiniFormRequest
@@ -45,6 +46,11 @@ export function RunFormBody(props: {
   onState?: (state: FormBodyState) => void
   mono?: boolean
 }) {
+  const dims = useTerminalDimensions()
+  const [size, setSize] = createSignal(dims())
+  const [contentHeight, setContentHeight] = createSignal(1)
+  const [viewportHeight, setViewportHeight] = createSignal(0)
+  const compact = () => size().width < 56 || size().height < 12
   const [state, setLocalState] = createSignal(props.state ?? createFormBodyState(props.request))
   const setState = (next: FormBodyState | ((previous: FormBodyState) => FormBodyState)) => {
     const value = typeof next === "function" ? next(state()) : next
@@ -66,11 +72,39 @@ export function RunFormBody(props: {
   const custom = createMemo(() => formCustom(current()))
   const textual = createMemo(() => formTextual(current()))
   const multiple = createMemo(() => current()?.type === "multiselect")
+  const editing = () => !unsupported() && !confirm() && (textual() || state().editing)
   const message = createMemo(() => {
     const value = props.request.metadata?.message
     return typeof value === "string" ? value : undefined
   })
   let area: TextareaRenderable | undefined
+  let scroll: ScrollBoxRenderable | undefined
+  const choices = new Map<number, BoxRenderable>()
+
+  const revealChoice = () => {
+    const row = choices.get(state().selected)
+    if (!scroll || scroll.isDestroyed || !row || row.isDestroyed || state().editing || confirm()) return
+    if (row.y < scroll.viewport.y) scroll.scrollBy(row.y - scroll.viewport.y)
+    const height = Math.min(row.height, scroll.viewport.height)
+    if (row.y + height > scroll.viewport.y + scroll.viewport.height)
+      scroll.scrollBy(row.y + height - scroll.viewport.y - scroll.viewport.height)
+  }
+
+  createEffect(() => {
+    state().field
+    state().selected
+    size()
+    revealChoice()
+  })
+
+  const action = createMemo(() => {
+    if (confirm()) return "submit"
+    if (textual() || state().editing) return "save"
+    const field = externalField()
+    if (!field) return "choose"
+    if (state().answers[field.key] === true) return formSingle(props.request) ? "submit" : "next"
+    return state().externalReady[field.key] ? (size().width < 24 ? "done" : "acknowledge") : "open URL"
+  })
 
   createEffect(() => {
     setState((previous) => formSync(previous, props.request))
@@ -143,6 +177,12 @@ export function RunFormBody(props: {
 
   const choose = (selected = state().selected) => {
     const base = formSetSelected(state(), selected)
+    const row = choices.get(selected)
+    if (scroll && row && (row.y < scroll.viewport.y || row.y >= scroll.viewport.y + scroll.viewport.height)) {
+      setState(base)
+      revealChoice()
+      return
+    }
     const next = formPick(base, props.request)
     setState(next)
     if (next.editing || multiple()) return
@@ -208,6 +248,11 @@ export function RunFormBody(props: {
       event.preventDefault()
       return
     }
+    if (event.name === "pageup" || event.name === "pagedown") {
+      scroll?.scrollBy(event.name === "pageup" ? -1 : 1, "viewport")
+      event.preventDefault()
+      return
+    }
     if (unsupported()) return
     if (state().editing) return
     if (
@@ -256,178 +301,346 @@ export function RunFormBody(props: {
   })
 
   return (
-    <box width="100%" height="100%" flexDirection="column" backgroundColor={props.theme.surface}>
-      <box flexDirection="column" gap={1} paddingLeft={2} paddingRight={3} paddingTop={1} flexGrow={1} flexShrink={1}>
-        <box flexDirection="row" gap={1} flexShrink={0}>
-          <text fg={unsupported() ? props.theme.warning : props.theme.highlight}>{props.mono ? "*" : "◆"}</text>
-          <text fg={props.theme.text}>{props.request.title}</text>
-          <Show when={!unsupported() && !formSingle(props.request)}>
-            <text fg={props.theme.muted}>
-              {confirm()
-                ? "Review"
-                : `${Math.min(state().field + 1, props.request.fields.length)}/${props.request.fields.length}`}
-            </text>
-          </Show>
-        </box>
-        <Show when={message()}>{(value) => <text fg={props.theme.muted}>{value()}</text>}</Show>
-        <Show when={unsupported()}>
-          {(value) => (
-            <box flexDirection="column" gap={1}>
-              <text fg={props.theme.warning} wrapMode="word">
-                {value()}
-              </text>
-              <text fg={props.theme.muted}>This request remains pending until you dismiss it.</text>
-            </box>
-          )}
-        </Show>
-        <Show when={!unsupported() && externalField()}>
-          {(field) => (
-            <box flexDirection="column" gap={1}>
-              <text fg={props.theme.text}>{field().description ?? formLabel(field())}</text>
-              <text fg={props.theme.highlight} wrapMode="word">
-                {field().url}
-              </text>
-              <text fg={props.theme.muted}>
-                {state().answers[field().key] === true
-                  ? "Acknowledged"
-                  : state().externalReady[field().key]
-                    ? "Press enter to acknowledge completion"
-                    : "Press enter to open the URL"}
-              </text>
-            </box>
-          )}
-        </Show>
-        <Show when={!unsupported() && answerField() && !confirm()}>
-          <box flexDirection="column" gap={1}>
-            <text fg={props.theme.text} wrapMode="word">
-              {answerField()!.description ?? formLabel(answerField()!)}
-              {answerField()!.required ? " (required)" : ""}
-              {multiple() ? " (select all that apply)" : ""}
-            </text>
-            <Show when={textual() || state().editing}>
-              <textarea
-                ref={(item: TextareaRenderable) => {
-                  area = item
-                }}
-                width="100%"
-                minHeight={1}
-                maxHeight={3}
-                initialValue={formInput(state(), current())}
-                placeholder={formPlaceholder(answerField())}
-                placeholderColor={props.theme.muted}
-                textColor={props.theme.text}
-                focusedTextColor={props.theme.text}
-                backgroundColor={props.theme.surface}
-                focusedBackgroundColor={props.theme.surface}
-                cursorColor={props.theme.text}
-                focused
-                onSubmit={commitInput}
-                onContentChange={() => {
-                  const currentArea = area
-                  if (!currentArea || currentArea.isDestroyed) return
-                  setState((previous) => formSetDraft(previous, current(), currentArea.plainText))
-                }}
-                onKeyDown={(event) => {
-                  if (event.name === "escape") {
-                    event.preventDefault()
-                    void cancel()
-                  }
-                }}
-              />
-            </Show>
-            <Show when={!textual() && !state().editing}>
-              <box flexDirection="column">
-                <For each={rows()}>
-                  {(row, index) => {
-                    const active = () => state().selected === index()
-                    const picked = () => {
-                      const field = current()
-                      if (!field) return false
-                      const value = state().answers[field.key]
-                      return Array.isArray(value) ? value.includes(String(row.value)) : value === row.value
-                    }
-                    return (
-                      <box
-                        flexDirection="row"
-                        gap={1}
-                        onMouseOver={() => setState((previous) => formSetSelected(previous, index()))}
-                        onMouseUp={() => choose(index())}
-                      >
-                        <text fg={active() ? props.theme.highlight : props.theme.muted}>
-                          {props.mono ? `${active() ? ">" : " "}${index() + 1}.` : `${index() + 1}.`}
-                        </text>
-                        <text fg={active() ? props.theme.text : props.theme.muted}>
-                          {multiple() ? `[${picked() ? "x" : " "}] ` : ""}
-                          {row.label}
-                          {!multiple() && picked() ? " *" : ""}
-                        </text>
-                        <Show when={row.description}>
-                          <text fg={props.theme.muted}>{row.description}</text>
-                        </Show>
-                      </box>
-                    )
-                  }}
-                </For>
-                <Show when={custom()}>
-                  <box flexDirection="row" gap={1} onMouseUp={() => choose(rows().length)}>
-                    <text fg={state().selected === rows().length ? props.theme.highlight : props.theme.muted}>
-                      {props.mono
-                        ? `${state().selected === rows().length ? ">" : " "}${rows().length + 1}.`
-                        : `${rows().length + 1}.`}
-                    </text>
-                    <text fg={state().selected === rows().length ? props.theme.text : props.theme.muted}>
-                      Type your own answer
-                    </text>
-                  </box>
-                </Show>
-              </box>
-            </Show>
-          </box>
-        </Show>
-        <Show when={!unsupported() && confirm()}>
-          <box flexDirection="column">
-            <For each={props.request.fields}>
-              {(field) => (
-                <text fg={props.theme.muted} wrapMode="none" truncate>
-                  {formLabel(field)}:{" "}
-                  {field.type === "external"
-                    ? state().answers[field.key] === true
-                      ? "acknowledged"
-                      : "required"
-                    : formDisplay(field, state().answers[field.key]) || "(not answered)"}
-                </text>
-              )}
-            </For>
-          </box>
-        </Show>
-      </box>
-      <box
-        flexDirection="row"
-        justifyContent="space-between"
-        paddingLeft={2}
-        paddingRight={3}
-        paddingBottom={1}
-        flexShrink={0}
-      >
-        <text fg={props.theme.muted}>
-          {state().submitting
-            ? "submitting..."
-            : unsupported()
-              ? "esc dismiss"
-              : confirm()
-                ? "enter submit   esc dismiss"
-                : textual() || state().editing
-                  ? "enter save   esc dismiss"
-                  : props.mono
-                    ? "up/down select   enter choose   tab next   esc dismiss"
-                    : "↑↓ select   enter choose   tab next   esc dismiss"}
+    <box
+      width="100%"
+      height="100%"
+      minHeight={0}
+      flexDirection="column"
+      backgroundColor={props.theme.surface}
+      paddingLeft={compact() ? 0 : 2}
+      paddingRight={compact() ? 0 : 3}
+      paddingTop={compact() ? 0 : 1}
+      paddingBottom={compact() ? 0 : 1}
+      onSizeChange={function () {
+        setSize({ width: this.width, height: this.height })
+      }}
+    >
+      <box height={1} flexDirection="row" gap={1} flexShrink={0} marginBottom={compact() ? 0 : 1}>
+        <text fg={unsupported() ? props.theme.warning : props.theme.question} wrapMode="none" flexShrink={0}>
+          {props.mono ? "*" : "◆"}
         </text>
-        <Show when={state().error}>
-          <text fg={props.theme.error} wrapMode="none" truncate>
-            {state().error}
+        <text fg={props.theme.text} wrapMode="none" truncate minWidth={0}>
+          {props.request.title}
+        </text>
+        <Show when={!unsupported() && !formSingle(props.request)}>
+          <text fg={props.theme.muted} wrapMode="none" flexShrink={0}>
+            {confirm()
+              ? "Review"
+              : `${Math.min(state().field + 1, props.request.fields.length)}/${props.request.fields.length}`}
           </text>
         </Show>
       </box>
+      <scrollbox
+        width="100%"
+        height={!compact() && editing() ? Math.min(contentHeight(), Math.max(1, size().height - 9)) : undefined}
+        flexGrow={!compact() && editing() ? 0 : 1}
+        minHeight={0}
+        viewportOptions={{
+          paddingRight: props.mono ? 0 : 1,
+          onSizeChange() {
+            setViewportHeight(this.height)
+          },
+        }}
+        verticalScrollbarOptions={{
+          visible: !props.mono && contentHeight() > viewportHeight(),
+          trackOptions: { backgroundColor: props.theme.surface, foregroundColor: props.theme.line },
+        }}
+        onSizeChange={revealChoice}
+        ref={(item) => {
+          scroll = item
+        }}
+      >
+        <box
+          width="100%"
+          flexDirection="column"
+          flexShrink={0}
+          gap={compact() ? 0 : 1}
+          onSizeChange={function () {
+            setContentHeight(this.height)
+          }}
+        >
+          <Show when={message()}>
+            {(value) => (
+              <text width="100%" fg={props.theme.muted} flexShrink={0}>
+                {value()}
+              </text>
+            )}
+          </Show>
+          <Show when={unsupported()}>
+            {(value) => (
+              <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
+                <text width="100%" fg={props.theme.warning} wrapMode="word" flexShrink={0}>
+                  {value()}
+                </text>
+                <text width="100%" fg={props.theme.muted} flexShrink={0}>
+                  This request remains pending until you dismiss it.
+                </text>
+              </box>
+            )}
+          </Show>
+          <Show when={!unsupported() && externalField()}>
+            {(field) => (
+              <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
+                <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
+                  {field().description ?? formLabel(field())}
+                </text>
+                <text width="100%" fg={props.theme.link} wrapMode="word" flexShrink={0}>
+                  {field().url}
+                </text>
+                <text
+                  width="100%"
+                  fg={state().answers[field().key] === true ? props.theme.selection : props.theme.muted}
+                  flexShrink={0}
+                >
+                  {state().answers[field().key] === true
+                    ? "Acknowledged"
+                    : state().externalReady[field().key]
+                      ? "Press enter to acknowledge completion"
+                      : "Press enter to open the URL"}
+                </text>
+              </box>
+            )}
+          </Show>
+          <Show when={!unsupported() && answerField() && !confirm()}>
+            <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
+              <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
+                {answerField()!.description ?? formLabel(answerField()!)}
+                {answerField()!.required ? " (required)" : ""}
+                {multiple() ? " (select all that apply)" : ""}
+              </text>
+              <Show when={!textual() && !state().editing}>
+                <box width="100%" flexDirection="column" flexShrink={0}>
+                  <For each={rows()}>
+                    {(row, index) => {
+                      const active = () => state().selected === index()
+                      const picked = () => {
+                        const field = current()
+                        if (!field) return false
+                        const value = state().answers[field.key]
+                        return Array.isArray(value) ? value.includes(String(row.value)) : value === row.value
+                      }
+                      const ordinal = () => (props.mono ? `${active() ? ">" : " "}${index() + 1}.` : `${index() + 1}.`)
+                      const inline = () =>
+                        !!row.description &&
+                        stringWidth(ordinal()) +
+                          2 +
+                          stringWidth(row.label) +
+                          (multiple() ? 4 : picked() ? 2 : 0) +
+                          stringWidth(row.description) <=
+                          size().width - (compact() ? 0 : 5) - (props.mono ? 0 : 1)
+                      return (
+                        <box
+                          ref={(item) => {
+                            choices.set(index(), item)
+                          }}
+                          onSizeChange={revealChoice}
+                          flexShrink={0}
+                          flexDirection="row"
+                          gap={1}
+                          alignItems="flex-start"
+                          onMouseOver={() => setState((previous) => formSetSelected(previous, index()))}
+                          backgroundColor={active() ? props.theme.formfieldFocusedBg : "transparent"}
+                          onMouseUp={() => choose(index())}
+                        >
+                          <text
+                            fg={active() ? props.theme.formfieldFocusedText : props.theme.formfieldText}
+                            wrapMode="none"
+                            flexShrink={0}
+                          >
+                            {ordinal()}
+                          </text>
+                          <box
+                            flexDirection={inline() ? "row" : "column"}
+                            gap={inline() ? 1 : 0}
+                            flexGrow={1}
+                            minWidth={0}
+                          >
+                            <text
+                              fg={active() ? props.theme.formfieldFocusedText : props.theme.formfieldText}
+                              wrapMode="word"
+                              flexShrink={0}
+                            >
+                              <span style={{ fg: picked() ? props.theme.selection : undefined }}>
+                                {multiple() ? `[${picked() ? "x" : " "}] ` : ""}
+                              </span>
+                              {row.label}
+                              <span style={{ fg: props.theme.selection }}>{!multiple() && picked() ? " *" : ""}</span>
+                            </text>
+                            <Show when={row.description}>
+                              <text fg={props.theme.muted} wrapMode="word" flexShrink={0}>
+                                {row.description}
+                              </text>
+                            </Show>
+                          </box>
+                        </box>
+                      )
+                    }}
+                  </For>
+                  <Show when={custom()}>
+                    <box
+                      ref={(item) => {
+                        choices.set(rows().length, item)
+                      }}
+                      onSizeChange={revealChoice}
+                      flexShrink={0}
+                      flexDirection="row"
+                      gap={1}
+                      backgroundColor={
+                        state().selected === rows().length ? props.theme.formfieldFocusedBg : "transparent"
+                      }
+                      onMouseUp={() => choose(rows().length)}
+                    >
+                      <text
+                        wrapMode="none"
+                        flexShrink={0}
+                        fg={
+                          state().selected === rows().length
+                            ? props.theme.formfieldFocusedText
+                            : props.theme.formfieldText
+                        }
+                      >
+                        {props.mono
+                          ? `${state().selected === rows().length ? ">" : " "}${rows().length + 1}.`
+                          : `${rows().length + 1}.`}
+                      </text>
+                      <text
+                        wrapMode="word"
+                        flexGrow={1}
+                        minWidth={0}
+                        fg={
+                          state().selected === rows().length
+                            ? props.theme.formfieldFocusedText
+                            : props.theme.formfieldText
+                        }
+                      >
+                        Type your own answer
+                      </text>
+                    </box>
+                  </Show>
+                </box>
+              </Show>
+            </box>
+          </Show>
+          <Show when={!unsupported() && confirm()}>
+            <box width="100%" flexDirection="column" flexShrink={0}>
+              <For each={props.request.fields}>
+                {(field) => (
+                  <text width="100%" fg={props.theme.muted} wrapMode="word" flexShrink={0}>
+                    {formLabel(field)}:{" "}
+                    {field.type === "external"
+                      ? state().answers[field.key] === true
+                        ? "acknowledged"
+                        : "required"
+                      : formDisplay(field, state().answers[field.key]) || "(not answered)"}
+                  </text>
+                )}
+              </For>
+            </box>
+          </Show>
+          <Show when={stringWidth(state().error) > size().width || state().error.includes("\n")}>
+            <text width="100%" fg={props.theme.error} wrapMode="word" flexShrink={0}>
+              {state().error}
+            </text>
+          </Show>
+        </box>
+      </scrollbox>
+      <Show when={!unsupported() && answerField() && editing()}>
+        <textarea
+          ref={(item: TextareaRenderable) => {
+            area = item
+          }}
+          width="100%"
+          minHeight={1}
+          maxHeight={Math.max(1, Math.min(3, size().height - 6))}
+          flexShrink={0}
+          marginTop={compact() ? 0 : 1}
+          initialValue={formInput(state(), current())}
+          placeholder={formPlaceholder(answerField())}
+          placeholderColor={props.theme.muted}
+          textColor={props.theme.formfieldText}
+          focusedTextColor={props.theme.formfieldFocusedText}
+          backgroundColor={props.theme.surface}
+          focusedBackgroundColor={props.theme.formfieldFocusedBg}
+          cursorColor={props.theme.formfieldFocusedText}
+          focused
+          onSubmit={commitInput}
+          onContentChange={() => {
+            const currentArea = area
+            if (!currentArea || currentArea.isDestroyed) return
+            setState((previous) => formSetDraft(previous, current(), currentArea.plainText))
+          }}
+          onKeyDown={(event) => {
+            if (event.name === "escape") {
+              event.preventDefault()
+              void cancel()
+            }
+          }}
+        />
+      </Show>
+      <Show when={state().error && compact()}>
+        <text height={1} fg={props.theme.error} wrapMode="none" truncate flexShrink={0}>
+          {state().error}
+        </text>
+      </Show>
+      <Show when={!compact() && editing()}>
+        <box flexGrow={1} minHeight={0} />
+      </Show>
+      <Show
+        when={compact()}
+        fallback={
+          <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
+            <text
+              fg={state().submitting ? props.theme.running : props.theme.muted}
+              wrapMode="word"
+              flexShrink={1}
+              minWidth={0}
+            >
+              {state().submitting
+                ? "submitting..."
+                : unsupported()
+                  ? "esc dismiss"
+                  : confirm()
+                    ? "enter submit   esc dismiss"
+                    : editing()
+                      ? "enter save   esc dismiss"
+                      : externalField()
+                        ? `enter ${action()}   esc dismiss`
+                        : props.mono
+                          ? "up/down select   enter choose   tab next   esc dismiss"
+                          : "↑↓ select   enter choose   tab next   esc dismiss"}
+            </text>
+            <Show when={state().error}>
+              <text fg={props.theme.error} wrapMode="none" truncate flexShrink={1}>
+                {state().error}
+              </text>
+            </Show>
+          </box>
+        }
+      >
+        <box flexDirection="row" flexWrap="wrap" columnGap={1} flexShrink={0}>
+          <Show when={!unsupported()}>
+            <text
+              height={1}
+              fg={state().submitting ? props.theme.running : props.theme.muted}
+              wrapMode="none"
+              flexShrink={0}
+            >
+              {state().submitting ? "submitting..." : `enter ${action()}`}
+            </text>
+          </Show>
+          <Show when={!state().submitting}>
+            <text height={1} fg={props.theme.muted} wrapMode="none" flexShrink={0}>
+              esc dismiss
+            </text>
+          </Show>
+          <Show when={!state().submitting && size().height >= 10}>
+            <text fg={props.theme.muted} wrapMode="word" maxWidth="100%" flexShrink={0}>
+              {size().width >= 56 && rows().length > 0 && !state().editing ? "up/down select  tab next  " : ""}pgup/pgdn
+              scroll
+            </text>
+          </Show>
+        </box>
+      </Show>
     </box>
   )
 }

packages/tui/src/mini/footer.menu.tsx

@@ -1,20 +1,30 @@
 /** @jsxImportSource @opentui/solid */
 import { TextAttributes, type ColorInput } from "@opentui/core"
-import { useTerminalDimensions } from "@opentui/solid"
+import { useTerminalDimensions, type JSX } from "@opentui/solid"
 import { createEffect, createMemo, createSignal, type Accessor } from "solid-js"
 import { transparent, type RunFooterTheme } from "./theme"
 import { Locale } from "../util/locale"
 import { stringWidth } from "../util/string-width"
 import { moveSelection, moveSelectionOffset, reconcileSelection, revealSelectionOffset } from "../ui/select-controller"
-import { monoTruncate } from "./mono"
 
 export const FOOTER_MENU_ROWS = 8
+export const FOOTER_COMPACT_WIDTH = 40
+
+export function footerMenuText(text: string, width: number, mono = false) {
+  if (!mono) return Locale.truncateWidth(text, width)
+  if (stringWidth(text) <= width) return text
+  const suffix = ".".repeat(Math.min(3, Math.max(0, width)))
+  return Locale.takeWidth(text, width - suffix.length) + suffix
+}
 
 export type RunFooterMenuItem = {
   display: string
+  icon?: (color: ColorInput) => JSX.Element
+  current?: boolean
   description?: string
   category?: string
   footer?: string
+  footerTone?: "selection" | "running" | "error" | "success"
 }
 
 type RunFooterMenuRow =
@@ -22,10 +32,10 @@ type RunFooterMenuRow =
   | { type: "item"; item: RunFooterMenuItem; index: number }
   | { type: "spacer" }
 
-export function createFooterMenuState(input: { count: Accessor<number>; limit?: number }) {
+export function createFooterMenuState(input: { count: Accessor<number>; limit?: number | Accessor<number> }) {
   const [selected, setSelected] = createSignal(0)
   const [offset, setOffset] = createSignal(0)
-  const limit = () => input.limit ?? FOOTER_MENU_ROWS
+  const limit = () => Math.max(1, typeof input.limit === "function" ? input.limit() : (input.limit ?? FOOTER_MENU_ROWS))
   const rows = createMemo(() => Math.max(1, Math.min(limit(), input.count())))
 
   const reveal = (index: number) => {
@@ -58,6 +68,7 @@ export function createFooterMenuState(input: { count: Accessor<number>; limit?:
     selected,
     offset,
     rows,
+    limit,
     reveal,
     reset,
     move,
@@ -76,13 +87,17 @@ export function RunFooterMenu(props: {
   paddingLeft?: number
   paddingRight?: number
   grouped?: boolean
+  compact?: boolean
   background?: boolean
   headerColor?: ColorInput
   mono?: boolean
 }) {
   const term = useTerminalDimensions()
-  const limit = () => props.limit ?? FOOTER_MENU_ROWS
+  const limit = () => Math.max(1, Math.min(props.rows(), props.limit ?? FOOTER_MENU_ROWS))
   const border = () => props.border ?? true
+  const paddingLeft = () => Math.min(props.paddingLeft ?? 1, term().width < FOOTER_COMPACT_WIDTH ? 1 : Infinity)
+  const paddingRight = () => Math.min(props.paddingRight ?? 0, term().width < FOOTER_COMPACT_WIDTH ? 1 : Infinity)
+  const width = () => Math.max(0, term().width - (border() ? 1 : 0) - paddingLeft() - paddingRight())
   const [groupOffset, setGroupOffset] = createSignal(0)
   let previous = -1
   const groupedRows = createMemo<RunFooterMenuRow[]>(() => {
@@ -90,12 +105,12 @@ export function RunFooterMenu(props: {
     let category = ""
     props.items().forEach((item, index) => {
       if (item.category && item.category !== category) {
-        if (all.length > 0) {
+        if (all.length > 0 && !props.compact) {
           all.push({ type: "spacer" })
         }
 
         category = item.category
-        all.push({ type: "header", label: item.category })
+        if (!props.compact) all.push({ type: "header", label: item.category })
       }
 
       all.push({ type: "item", item, index })
@@ -151,34 +166,11 @@ export function RunFooterMenu(props: {
     )
     return width === 0 ? 0 : width + 2
   })
-  const descriptionPad = (item: RunFooterMenuItem) => {
-    if (!item.description) {
-      return ""
-    }
-
-    return " ".repeat(Math.max(1, descriptionColumn() - stringWidth(item.display)))
-  }
-  const descriptionText = (item: RunFooterMenuItem) => {
-    if (!item.description) {
-      return
-    }
-
-    const footerWidth = item.footer ? stringWidth(item.footer) + 1 : 0
-    const available =
-      term().width -
-      (border() ? 1 : 0) -
-      (props.paddingLeft ?? 1) -
-      (props.paddingRight ?? 0) -
-      descriptionColumn() -
-      footerWidth -
-      4
-    const width = Math.max(12, available)
-    return props.mono ? monoTruncate(item.description, width, true) : Locale.truncate(item.description, width)
-  }
   return (
     <box
       width="100%"
       height={props.rows()}
+      flexShrink={0}
       backgroundColor={props.background ? props.theme().shade : transparent}
       flexDirection="column"
     >
@@ -196,8 +188,8 @@ export function RunFooterMenu(props: {
           <box
             flexGrow={1}
             flexShrink={1}
-            paddingLeft={props.paddingLeft ?? 1}
-            paddingRight={props.paddingRight ?? 0}
+            paddingLeft={paddingLeft()}
+            paddingRight={paddingRight()}
             backgroundColor={props.background ? props.theme().shade : transparent}
           >
             <text fg={props.theme().muted} wrapMode="none" truncate>
@@ -213,9 +205,9 @@ export function RunFooterMenu(props: {
 
           if (row.type === "header") {
             return (
-              <box paddingLeft={props.paddingLeft ?? 1} paddingRight={props.paddingRight ?? 1}>
+              <box height={1} flexShrink={0} paddingLeft={paddingLeft()} paddingRight={paddingRight()}>
                 <text
-                  fg={props.headerColor ?? props.theme().highlight}
+                  fg={props.headerColor ?? props.theme().muted}
                   attributes={TextAttributes.BOLD}
                   wrapMode="none"
                   truncate
@@ -227,71 +219,87 @@ export function RunFooterMenu(props: {
           }
 
           const active = () => row.index === props.selected()
+          const available = () => Math.max(0, width() - (row.item.icon ? 2 : 0))
           const attributes = () =>
             active() ? TextAttributes.BOLD | (props.mono ? TextAttributes.INVERSE : 0) : undefined
           const background = () =>
-            active()
-              ? props.background
-                ? props.theme().selected
-                : props.theme().shade
-              : props.background
-                ? props.theme().shade
-                : transparent
+            active() ? props.theme().actionFocusedBg : props.background ? props.theme().shade : transparent
+          const footer = () => {
+            if (!row.item.footer) return
+            const title = stringWidth(row.item.display)
+            const primary = row.item.footerTone && !(row.item.current && row.item.footerTone === "selection")
+            return (primary ? Math.min(row.item.icon ? 4 : 8, title) : title) + 1 + stringWidth(row.item.footer) <=
+              available()
+              ? row.item.footer
+              : undefined
+          }
+          const description = () => {
+            if (!row.item.description) return
+            const remaining = available() - descriptionColumn() - (footer() ? stringWidth(footer()!) + 1 : 0)
+            if (remaining < Math.min(12, stringWidth(row.item.description))) return
+            return footerMenuText(row.item.description, remaining, props.mono)
+          }
           return (
-            <box paddingRight={0} flexDirection="row" backgroundColor={background()}>
+            <box height={1} flexShrink={0} paddingRight={0} flexDirection="row" backgroundColor={background()}>
               {border() ? (
-                <text fg={props.theme().highlight} bg={background()} wrapMode="none">
+                <text fg={props.theme().actionFocusedText} bg={background()} wrapMode="none">
                   {active() ? (props.mono ? ">" : "▌") : " "}
                 </text>
               ) : undefined}
               <box
                 flexGrow={1}
                 flexShrink={1}
-                paddingLeft={props.paddingLeft ?? 1}
-                paddingRight={props.paddingRight ?? 0}
+                paddingLeft={paddingLeft()}
+                paddingRight={paddingRight()}
                 backgroundColor={background()}
               >
                 <box width="100%" flexDirection="row" justifyContent="space-between" gap={1}>
                   <box flexDirection="row" gap={0} flexGrow={1} flexShrink={1}>
+                    {row.item.icon ? (
+                      <box width={2} flexShrink={0}>
+                        {row.item.icon(active() ? props.theme().actionFocusedText : props.theme().formfieldText)}
+                      </box>
+                    ) : undefined}
                     <text
-                      fg={active() ? props.theme().selectedText : props.theme().text}
+                      fg={active() ? props.theme().actionFocusedText : props.theme().formfieldText}
                       attributes={attributes()}
                       wrapMode="none"
-                      truncate
                       flexShrink={0}
                     >
-                      {row.item.display}
+                      {footerMenuText(
+                        row.item.display,
+                        available() - (footer() ? stringWidth(footer()!) + 1 : 0),
+                        props.mono,
+                      )}
                     </text>
-                    {row.item.description ? (
+                    {description() ? (
                       <>
                         <text
-                          fg={active() ? props.theme().selectedText : props.theme().muted}
+                          fg={active() ? props.theme().actionFocusedText : props.theme().muted}
                           wrapMode="none"
                           flexShrink={0}
                         >
-                          {descriptionPad(row.item)}
+                          {" ".repeat(Math.max(1, descriptionColumn() - stringWidth(row.item.display)))}
                         </text>
                         <text
-                          fg={active() ? props.theme().selectedText : props.theme().muted}
+                          fg={active() ? props.theme().actionFocusedText : props.theme().muted}
                           wrapMode="none"
-                          truncate
                           flexGrow={1}
                           flexShrink={1}
                         >
-                          {descriptionText(row.item)}
+                          {description()}
                         </text>
                       </>
                     ) : undefined}
                   </box>
-                  {row.item.footer ? (
+                  {footer() ? (
                     <text
-                      fg={active() ? props.theme().selectedText : props.theme().muted}
+                      fg={active() ? props.theme().actionFocusedText : props.theme()[row.item.footerTone ?? "muted"]}
                       attributes={attributes()}
                       wrapMode="none"
-                      truncate
                       flexShrink={0}
                     >
-                      {row.item.footer}
+                      {footer()}
                     </text>
                   ) : undefined}
                 </box>

packages/tui/src/mini/footer.permission.tsx

@@ -11,7 +11,7 @@
 // The diff view (when available) uses the same diff component as scrollback
 // tool snapshots.
 /** @jsxImportSource @opentui/solid */
-import { TextAttributes, type TextareaRenderable } from "@opentui/core"
+import { TextAttributes, type ScrollBoxRenderable, type TextareaRenderable } from "@opentui/core"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal } from "solid-js"
 import {
@@ -28,7 +28,7 @@ import {
   permissionShift,
   type PermissionOption,
 } from "./permission.shared"
-import { footerWidthPolicy } from "./footer.width"
+import { stringWidth } from "../util/string-width"
 import { toolFiletype } from "./tool"
 import { transparent, type RunBlockTheme, type RunFooterTheme } from "./theme"
 import type { MiniPermissionRequest, PermissionReply } from "./types"
@@ -44,13 +44,16 @@ function buttons(
   mono: boolean,
 ) {
   return (
-    <box flexDirection="row" gap={1} flexShrink={0}>
+    <box width="100%" flexDirection="row" flexWrap="wrap" columnGap={1} flexShrink={0}>
       <For each={list}>
         {(option) => (
           <box
+            width={stringWidth(permissionLabel(option)) + 2}
+            height={1}
+            flexShrink={0}
             paddingLeft={1}
             paddingRight={1}
-            backgroundColor={option === selected ? theme.highlight : transparent}
+            backgroundColor={option === selected ? theme.actionFocusedBg : transparent}
             onMouseOver={() => {
               if (!disabled) onHover(option)
             }}
@@ -59,7 +62,8 @@ function buttons(
             }}
           >
             <text
-              fg={option === selected ? theme.surface : theme.muted}
+              wrapMode="none"
+              fg={option === selected ? theme.actionFocusedText : theme.actionSecondaryText}
               attributes={option === selected && mono ? TextAttributes.INVERSE : undefined}
             >
               {permissionLabel(option)}
@@ -108,11 +112,11 @@ export function RejectField(props: {
       wrapMode="word"
       placeholder="Tell OpenCode what to do differently"
       placeholderColor={props.theme.muted}
-      textColor={props.theme.text}
-      focusedTextColor={props.theme.text}
+      textColor={props.theme.formfieldText}
+      focusedTextColor={props.theme.formfieldFocusedText}
       backgroundColor={props.theme.surface}
-      focusedBackgroundColor={props.theme.surface}
-      cursorColor={props.theme.text}
+      focusedBackgroundColor={props.theme.formfieldFocusedBg}
+      cursorColor={props.theme.formfieldFocusedText}
       focused={!props.disabled}
       onSubmit={props.onConfirm}
       onContentChange={() => {
@@ -144,10 +148,14 @@ export function RunPermissionBody(props: {
   mono?: boolean
 }) {
   const dims = useTerminalDimensions()
+  const [size, setSize] = createSignal(dims())
+  const width = () => size().width
+  const compact = () => width() < 56 || size().height < 12
   const [state, setState] = createSignal(createPermissionBodyState(props.request))
+  const stage = createMemo(() => state().stage)
   const info = createMemo(() => permissionInfo(props.request, props.directory?.(), props.mono))
   const ft = createMemo(() => toolFiletype(info().file))
-  const narrow = createMemo(() => footerWidthPolicy(dims().width).dialog.narrow)
+  let scroll: ScrollBoxRenderable | undefined
   const scrollbar = createMemo(() => ({
     visible: !props.mono,
     trackOptions: {
@@ -156,19 +164,25 @@ export function RunPermissionBody(props: {
     },
   }))
   const opts = createMemo(() =>
-    permissionOptions(state().stage).filter((option) => option !== "always" || (props.request.save?.length ?? 0) > 0),
+    permissionOptions(stage()).filter((option) => option !== "always" || (props.request.save?.length ?? 0) > 0),
   )
   const busy = createMemo(() => state().submitting)
+  const controlsWidth = () => opts().reduce((total, option) => total + stringWidth(permissionLabel(option)) + 3, -1)
+  const hint = () =>
+    compact() && width() < 56
+      ? "pgup/pgdn scroll"
+      : `${props.mono ? "left/right" : "⇆"} select  enter confirm  esc ${stage() === "always" ? "cancel" : "reject"}`
+  const inlineControls = () => controlsWidth() + stringWidth(hint()) + 1 <= width() - (compact() ? 0 : 5)
   const title = createMemo(() => {
-    if (state().stage === "always") {
+    if (stage() === "always") {
       return "Always allow"
     }
 
-    if (state().stage === "reject") {
-      return "Reject permission"
+    if (stage() === "reject") {
+      return width() < 24 ? "Reject" : "Reject permission"
     }
 
-    return "Permission required"
+    return width() < 24 ? "Permission" : "Permission required"
   })
 
   createEffect(() => {
@@ -184,6 +198,12 @@ export function RunPermissionBody(props: {
     setState((prev) => permissionShift(prev, dir, opts()))
   }
 
+  createEffect(() => {
+    stage()
+    props.request.id
+    if (scroll && !scroll.isDestroyed) scroll.scrollTo(0)
+  })
+
   const submit = async (next: PermissionReply) => {
     setState((prev) => ({
       ...prev,
@@ -233,6 +253,12 @@ export function RunPermissionBody(props: {
       return
     }
 
+    if (event.name === "pageup" || event.name === "pagedown") {
+      scroll?.scrollBy(event.name === "pageup" ? -1 : 1, "viewport")
+      event.preventDefault()
+      return
+    }
+
     if (cur.submitting) {
       if (["left", "right", "h", "l", "tab", "return", "escape"].includes(event.name)) {
         event.preventDefault()
@@ -273,58 +299,50 @@ export function RunPermissionBody(props: {
   })
 
   return (
-    <box width="100%" height="100%" flexDirection="column" backgroundColor={props.theme.surface}>
+    <box
+      width="100%"
+      height="100%"
+      minHeight={0}
+      flexDirection="column"
+      backgroundColor={props.theme.surface}
+      onSizeChange={function () {
+        setSize({ width: this.width, height: this.height })
+      }}
+    >
       <box
-        flexDirection="column"
-        gap={1}
-        paddingLeft={1}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
+        paddingLeft={compact() ? 0 : 2}
+        paddingRight={compact() ? 0 : 3}
+        paddingTop={compact() ? 0 : 1}
+        paddingBottom={compact() ? 0 : 1}
+        gap={compact() ? 0 : 1}
         flexShrink={0}
       >
-        <box flexDirection="row" gap={1} paddingLeft={1}>
-          <text fg={state().stage === "reject" ? props.theme.error : props.theme.warning}>
-            {props.mono ? "!" : "△"}
-          </text>
-          <text fg={props.theme.text}>{title()}</text>
-        </box>
-        <Switch>
-          <Match when={state().stage === "permission"}>
-            <box flexDirection="row" gap={1} paddingLeft={2}>
-              <text fg={props.theme.muted} flexShrink={0}>
-                {info().icon}
-              </text>
-              <text fg={props.theme.text} wrapMode="word">
-                {info().title}
-              </text>
-            </box>
-          </Match>
-          <Match when={state().stage === "reject"}>
-            <box paddingLeft={1}>
-              <text fg={props.theme.muted}>Tell OpenCode what to do differently</text>
-            </box>
-          </Match>
-        </Switch>
+        <text height={1} fg={props.theme.text} wrapMode="none" truncate>
+          <span style={{ fg: props.theme.permission }}>{props.mono ? "! " : "△ "}</span>
+          {title()}
+        </text>
+        <Show when={!compact() && stage() === "reject"}>
+          <text fg={props.theme.muted}>Tell OpenCode what to do differently</text>
+        </Show>
       </box>
 
       <Show
-        when={state().stage !== "reject"}
+        when={stage() !== "reject"}
         fallback={
-          <box width="100%" flexGrow={1} flexShrink={1} justifyContent="flex-end">
+          <box width="100%" flexGrow={1} minHeight={0} justifyContent="flex-end">
             <box
-              flexDirection={narrow() ? "column" : "row"}
-              flexShrink={0}
               backgroundColor={props.theme.line}
-              paddingTop={1}
-              paddingLeft={2}
-              paddingRight={3}
-              paddingBottom={1}
-              justifyContent={narrow() ? "flex-start" : "space-between"}
-              alignItems={narrow() ? "flex-start" : "center"}
-              gap={1}
+              flexDirection={width() >= 80 ? "row" : "column"}
+              alignItems={width() >= 80 ? "center" : "stretch"}
+              justifyContent="space-between"
+              paddingLeft={compact() ? 0 : 2}
+              paddingRight={compact() ? 0 : 3}
+              paddingTop={compact() ? 0 : 1}
+              paddingBottom={compact() ? 0 : 1}
+              gap={compact() ? 0 : 1}
+              flexShrink={0}
             >
-              <box width={narrow() ? "100%" : undefined} flexGrow={1} flexShrink={1}>
+              <box width={width() >= 80 ? undefined : "100%"} flexGrow={1} flexShrink={1} minWidth={0}>
                 <RejectField
                   theme={props.theme}
                   text={state().message}
@@ -342,17 +360,17 @@ export function RunPermissionBody(props: {
               <Show
                 when={!busy()}
                 fallback={
-                  <text fg={props.theme.muted} wrapMode="word" flexShrink={0}>
-                    Waiting for permission event...
+                  <text fg={props.theme.running} height={1} wrapMode="none" truncate flexShrink={0}>
+                    {compact() ? "Waiting..." : "Waiting for permission event..."}
                   </text>
                 }
               >
-                <box flexDirection="row" gap={2} flexShrink={0}>
-                  <text fg={props.theme.text}>
-                    enter <span style={{ fg: props.theme.muted }}>confirm</span>
+                <box flexDirection="row" flexWrap="wrap" columnGap={compact() ? 1 : 2} flexShrink={0}>
+                  <text fg={props.theme.text} height={1} wrapMode="none" flexShrink={0}>
+                    enter <span style={{ fg: props.theme.muted }}>{compact() ? "reject" : "confirm"}</span>
                   </text>
-                  <text fg={props.theme.text}>
-                    esc <span style={{ fg: props.theme.muted }}>cancel</span>
+                  <text fg={props.theme.text} height={1} wrapMode="none" flexShrink={0}>
+                    esc <span style={{ fg: props.theme.muted }}>{compact() ? "back" : "cancel"}</span>
                   </text>
                 </box>
               </Show>
@@ -360,21 +378,46 @@ export function RunPermissionBody(props: {
           </box>
         }
       >
-        <box width="100%" flexGrow={1} flexShrink={1} paddingLeft={1} paddingRight={3} paddingBottom={1}>
-          <Switch>
-            <Match when={state().stage === "permission"}>
-              <scrollbox width="100%" height="100%" verticalScrollbarOptions={scrollbar()}>
-                <box width="100%" flexDirection="column" gap={1}>
+        <box
+          width="100%"
+          flexGrow={1}
+          minHeight={0}
+          paddingLeft={compact() ? 0 : 1}
+          paddingRight={compact() ? 0 : 3}
+          paddingBottom={compact() ? 0 : 1}
+        >
+          <scrollbox
+            width="100%"
+            flexGrow={1}
+            minHeight={0}
+            viewportOptions={{
+              paddingLeft: compact() ? 0 : 1,
+              paddingRight: props.mono ? 0 : 1,
+            }}
+            verticalScrollbarOptions={scrollbar()}
+            ref={(item) => {
+              scroll = item
+            }}
+          >
+            <Switch>
+              <Match when={stage() === "permission"}>
+                <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
+                  <box width="100%" paddingLeft={compact() ? 0 : 1} flexShrink={0}>
+                    <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
+                      <span style={{ fg: props.theme.muted }}>{info().icon} </span>
+                      {info().title}
+                    </text>
+                  </box>
                   <Show
                     when={info().diff}
                     fallback={
                       <Show
                         when={info().patch}
                         fallback={
-                          <box width="100%" flexDirection="column" gap={1} paddingLeft={1}>
+                          <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
                             <For each={info().lines}>
                               {(line) => (
-                                <text fg={props.theme.text} wrapMode="word">
+                                <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
                                   {line}
                                 </text>
                               )}
@@ -386,13 +429,16 @@ export function RunPermissionBody(props: {
                           <Show
                             when={props.block.syntax}
                             fallback={
-                              <text fg={props.theme.muted} wrapMode="word">
+                              <text width="100%" fg={props.theme.muted} wrapMode="word" flexShrink={0}>
                                 {patch()}
                               </text>
                             }
                           >
                             {(syntax) => (
                               <code
+                                width="100%"
+                                flexShrink={0}
+                                wrapMode="word"
                                 filetype="diff"
                                 drawUnstyledText={false}
                                 streaming={true}
@@ -406,93 +452,107 @@ export function RunPermissionBody(props: {
                       </Show>
                     }
                   >
-                    <PatchDiff
-                      diff={info().diff!}
-                      hunkFg={props.block.diffLineNumber}
-                      view="unified"
-                      filetype={ft()}
-                      syntaxStyle={props.block.syntax}
-                      showLineNumbers={true}
-                      width="100%"
-                      wrapMode="word"
-                      fg={props.theme.text}
-                      addedBg={props.block.diffAddedBg}
-                      removedBg={props.block.diffRemovedBg}
-                      contextBg={props.block.diffContextBg}
-                      addedSignColor={props.block.diffHighlightAdded}
-                      removedSignColor={props.block.diffHighlightRemoved}
-                      lineNumberFg={props.block.diffLineNumber}
-                      lineNumberBg={props.block.diffContextBg}
-                      addedLineNumberBg={props.block.diffAddedLineNumberBg}
-                      removedLineNumberBg={props.block.diffRemovedLineNumberBg}
-                    />
+                    <Show
+                      when={width() >= 40}
+                      fallback={
+                        <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
+                          {info().diff}
+                        </text>
+                      }
+                    >
+                      <PatchDiff
+                        diff={info().diff!}
+                        hunkFg={props.block.diffLineNumber}
+                        view="unified"
+                        filetype={ft()}
+                        syntaxStyle={props.block.syntax}
+                        showLineNumbers={true}
+                        width="100%"
+                        flexShrink={0}
+                        wrapMode="word"
+                        fg={props.theme.text}
+                        addedBg={props.block.diffAddedBg}
+                        removedBg={props.block.diffRemovedBg}
+                        contextBg={props.block.diffContextBg}
+                        addedSignColor={props.block.diffHighlightAdded}
+                        removedSignColor={props.block.diffHighlightRemoved}
+                        lineNumberFg={props.block.diffLineNumber}
+                        lineNumberBg={props.block.diffContextBg}
+                        addedLineNumberBg={props.block.diffAddedLineNumberBg}
+                        removedLineNumberBg={props.block.diffRemovedLineNumberBg}
+                      />
+                    </Show>
                   </Show>
                   <Show when={!info().diff && !info().patch && info().lines.length === 0}>
-                    <box paddingLeft={1}>
-                      <text fg={props.theme.muted}>No diff provided</text>
-                    </box>
+                    <text width="100%" fg={props.theme.muted} flexShrink={0}>
+                      No diff provided
+                    </text>
                   </Show>
                 </box>
-              </scrollbox>
-            </Match>
-            <Match when={true}>
-              <scrollbox width="100%" height="100%" verticalScrollbarOptions={scrollbar()}>
-                <box width="100%" flexDirection="column" gap={1} paddingLeft={1}>
+              </Match>
+              <Match when={true}>
+                <box width="100%" flexDirection="column" flexShrink={0} gap={compact() ? 0 : 1}>
                   <For each={permissionAlwaysLines(props.request)}>
                     {(line) => (
-                      <text fg={props.theme.text} wrapMode="word">
+                      <text width="100%" fg={props.theme.text} wrapMode="word" flexShrink={0}>
                         {line}
                       </text>
                     )}
                   </For>
                 </box>
-              </scrollbox>
-            </Match>
-          </Switch>
+              </Match>
+            </Switch>
+          </scrollbox>
         </box>
 
         <box
-          flexDirection={narrow() ? "column" : "row"}
+          width="100%"
+          flexDirection={inlineControls() ? "row" : "column"}
+          justifyContent="space-between"
+          gap={compact() ? 0 : 1}
+          paddingLeft={compact() ? 0 : 2}
+          paddingRight={compact() ? 0 : 3}
+          paddingTop={compact() ? 0 : 1}
+          paddingBottom={compact() ? 0 : 1}
           flexShrink={0}
           backgroundColor={props.theme.pane}
-          gap={1}
-          paddingTop={1}
-          paddingLeft={2}
-          paddingRight={3}
-          paddingBottom={1}
-          justifyContent={narrow() ? "flex-start" : "space-between"}
-          alignItems={narrow() ? "flex-start" : "center"}
         >
-          {buttons(
-            opts(),
-            state().selected,
-            props.theme,
-            busy(),
-            (option) => {
-              setState((prev) => permissionHover(prev, option))
-            },
-            run,
-            props.mono ?? false,
-          )}
+          <box width={inlineControls() ? controlsWidth() : "100%"} flexShrink={0}>
+            {buttons(
+              opts(),
+              state().selected,
+              props.theme,
+              busy(),
+              (option) => {
+                setState((prev) => permissionHover(prev, option))
+              },
+              run,
+              props.mono ?? false,
+            )}
+          </box>
           <Show
             when={!busy()}
             fallback={
-              <text fg={props.theme.muted} wrapMode="word" flexShrink={0}>
-                Waiting for permission event...
+              <text fg={props.theme.running} height={1} wrapMode="none" truncate flexShrink={0}>
+                {compact() ? "Waiting..." : "Waiting for permission event..."}
               </text>
             }
           >
-            <box flexDirection="row" gap={2} flexShrink={0}>
-              <text fg={props.theme.text}>
-                {props.mono ? "left/right" : "⇆"} <span style={{ fg: props.theme.muted }}>select</span>
-              </text>
-              <text fg={props.theme.text}>
-                enter <span style={{ fg: props.theme.muted }}>confirm</span>
-              </text>
-              <text fg={props.theme.text}>
-                esc <span style={{ fg: props.theme.muted }}>{state().stage === "always" ? "cancel" : "reject"}</span>
-              </text>
-            </box>
+            <text fg={props.theme.text} height={1} wrapMode="none" flexShrink={0}>
+              <Show
+                when={compact() && width() < 56}
+                fallback={
+                  <>
+                    {props.mono ? "left/right" : "⇆"}
+                    <span style={{ fg: props.theme.muted }}>{" select  "}</span>
+                    enter<span style={{ fg: props.theme.muted }}>{" confirm  "}</span>
+                    esc<span style={{ fg: props.theme.muted }}> {stage() === "always" ? "cancel" : "reject"}</span>
+                  </>
+                }
+              >
+                pgup/pgdn<span style={{ fg: props.theme.muted }}> scroll</span>
+              </Show>
+            </text>
           </Show>
         </box>
       </Show>

packages/tui/src/mini/footer.prompt.tsx

@@ -5,15 +5,38 @@
 // It produces a PromptState that RunPromptBody renders as a slim single-line
 // composer while the footer view renders any active menus below it.
 /** @jsxImportSource @opentui/solid */
-import { StyledText, fg, type ColorInput, type KeyEvent, type TextareaRenderable } from "@opentui/core"
-import { useRenderer } from "@opentui/solid"
+import {
+  StyledText,
+  decodePasteBytes,
+  fg,
+  stripAnsiSequences,
+  type ColorInput,
+  type KeyEvent,
+  type PasteEvent,
+  type TextareaRenderable,
+} from "@opentui/core"
+import { useRenderer, useTerminalDimensions } from "@opentui/solid"
 import { normalizePromptContent } from "../prompt/content"
+import { deduplicatePromptImages, promptAttachmentLabel } from "../prompt/attachment"
+import { resolvePastedAttachments } from "../component/prompt/local-attachment"
+import { createTuiClipboard, type OwnedClipboardService } from "../clipboard"
+import type { ClipboardService } from "../context/clipboard"
 import fuzzysort from "fuzzysort"
 import path from "path"
 import { pathToFileURL } from "node:url"
-import { createEffect, createMemo, createResource, createSignal, onCleanup, onMount, type Accessor } from "solid-js"
-import { Locale } from "../util/locale"
+import {
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  onCleanup,
+  onMount,
+  type Accessor,
+} from "solid-js"
 import { stringWidth } from "../util/string-width"
+import { errorMessage } from "../util/error"
 import {
   createPromptHistory,
   displayCharAt,
@@ -30,8 +53,7 @@ import {
 import { parseFileLineRange, parseSlashHead, stripFileLineRange } from "../prompt/parse"
 import { Keymap } from "../context/keymap"
 import { realignEditorPromptParts, resolveEditorSlashValue } from "./prompt.editor"
-import { monoTruncateMiddle } from "./mono"
-import { FOOTER_MENU_ROWS, createFooterMenuState, type RunFooterMenuItem } from "./footer.menu"
+import { FOOTER_COMPACT_WIDTH, FOOTER_MENU_ROWS, createFooterMenuState, type RunFooterMenuItem } from "./footer.menu"
 import type { RunFooterTheme } from "./theme"
 import type {
   FooterQueuedPrompt,
@@ -44,13 +66,31 @@ import type {
   RunReference,
   RunTuiConfig,
 } from "./types"
+import { EmptyBorder } from "../ui/border"
 
 const AUTOCOMPLETE_ROWS = FOOTER_MENU_ROWS
-const AUTOCOMPLETE_BOTTOM_ROWS = 1
 
 export const TEXTAREA_MIN_ROWS = 1
 const TEXTAREA_MAX_ROWS = 6
-export const PROMPT_MAX_ROWS = TEXTAREA_MAX_ROWS + AUTOCOMPLETE_ROWS - 1 + AUTOCOMPLETE_BOTTOM_ROWS
+export const PROMPT_MAX_ROWS = TEXTAREA_MAX_ROWS + AUTOCOMPLETE_ROWS
+
+export function footerPromptLayout(
+  height: number,
+  lines = TEXTAREA_MIN_ROWS,
+  options = 0,
+  statusRows = 1,
+  images = false,
+) {
+  const padding = height >= PROMPT_MAX_ROWS + 4 ? 1 : 0
+  // Reserve status and, where possible, one transcript row.
+  const available = Math.max(1, height - 1 - statusRows - padding * 2)
+  const preview = images && options === 0 ? Math.min(4, available - Math.min(TEXTAREA_MAX_ROWS, Math.max(1, lines))) : 0
+  const imageRows = preview >= 3 ? preview : 0
+  const textarea = Math.max(1, Math.min(TEXTAREA_MAX_ROWS, available - imageRows - (options > 0 ? 1 : 0)))
+  const rows = Math.min(textarea, Math.max(1, lines))
+  const menu = options > 0 ? Math.max(1, Math.min(AUTOCOMPLETE_ROWS, options, available - rows)) : 0
+  return { padding, textarea, menu, images: imageRows, rows: rows + menu + imageRows }
+}
 
 type Mention = Extract<RunPromptPart, { type: "file" | "agent" | "skill" }>
 
@@ -86,8 +126,11 @@ type PromptInput = {
   view: Accessor<string>
   prompt: Accessor<boolean>
   width: Accessor<number>
+  statusRows: Accessor<number>
   theme: Accessor<RunFooterTheme>
   mono: Accessor<boolean>
+  imagePreview?: boolean
+  clipboard?: Pick<ClipboardService, "read">
   history?: Accessor<RunPrompt[]>
   queuedPrompts: Accessor<FooterQueuedPrompt[]>
   onQueuedPromptSteer: (inboxID: string) => Promise<boolean>
@@ -112,20 +155,20 @@ export type PromptState = {
   selected: Accessor<number>
   offset: Accessor<number>
   rows: Accessor<number>
+  images: Accessor<ReadonlyArray<{ uri: string }>>
+  layout: Accessor<ReturnType<typeof footerPromptLayout>>
   requestExit: () => boolean
   onSubmit: () => void
   submitText: (text: string) => void
   openEditor: (input?: { value?: string }) => Promise<void>
   onKeyDown: (event: KeyEvent) => void
+  onPaste: (event: PasteEvent) => Promise<void>
   onContentChange: () => void
+  onSizeChange: () => void
   replacePrompt: (prompt: RunPrompt) => void
   bind: (area?: TextareaRenderable) => void
 }
 
-function clamp(rows: number): number {
-  return Math.max(TEXTAREA_MIN_ROWS, Math.min(TEXTAREA_MAX_ROWS, rows))
-}
-
 function emptyPrompt(shell: boolean): RunPrompt {
   return shell ? { text: "", parts: [], mode: "shell" } : { text: "", parts: [] }
 }
@@ -177,11 +220,17 @@ export function selectedCommand(text: string, command: RunPrompt["command"]) {
 export function RunPromptBody(props: {
   theme: () => RunFooterTheme
   background: () => ColorInput
+  rail: () => ColorInput
+  mono: boolean
   cursorStyle: RunTuiConfig["cursor"]
   placeholder: () => StyledText | string
   onSubmit: () => void
   onKeyDown: (event: KeyEvent) => void
+  onPaste: (event: PasteEvent) => Promise<void>
+  images: Accessor<ReadonlyArray<{ uri: string }>>
+  layout: Accessor<ReturnType<typeof footerPromptLayout>>
   onContentChange: () => void
+  onSizeChange: () => void
   bind: (area?: TextareaRenderable) => void
 }) {
   const renderer = useRenderer()
@@ -227,12 +276,53 @@ export function RunPromptBody(props: {
   })
 
   return (
-    <box width="100%">
-      <box paddingTop={1} paddingBottom={1} paddingRight={2}>
+    <box width="100%" paddingTop={props.layout().padding} paddingBottom={props.layout().padding}>
+      <box
+        border={["left"]}
+        borderColor={props.rail()}
+        customBorderChars={{ ...EmptyBorder, vertical: props.mono ? "|" : "┃" }}
+        paddingLeft={1}
+        paddingRight={2}
+        onSizeChange={props.onSizeChange}
+      >
+        <Show when={props.layout().images > 0}>
+          <box width="100%" height={props.layout().images} flexDirection="row" gap={1}>
+            <For
+              each={props
+                .images()
+                .slice(0, 3)
+                .map((image) => image.uri)}
+            >
+              {(image, index) => {
+                const [failed, setFailed] = createSignal(false)
+                return (
+                  <box width={props.layout().images * 2} height="100%" flexShrink={1}>
+                    <Show when={!failed()} fallback={<text fg={props.theme().muted}>No preview</text>}>
+                      <image
+                        id={`mini-prompt-image-${index()}`}
+                        source={image}
+                        fit="fit"
+                        protocol="auto"
+                        width="100%"
+                        height="100%"
+                        onError={() => setFailed(true)}
+                      />
+                    </Show>
+                  </box>
+                )
+              }}
+            </For>
+            <Show when={props.images().length > 3}>
+              <text fg={props.theme().muted} wrapMode="none" truncate>
+                +{props.images().length - 3} more
+              </text>
+            </Show>
+          </box>
+        </Show>
         <textarea
           width="100%"
           minHeight={TEXTAREA_MIN_ROWS}
-          maxHeight={TEXTAREA_MAX_ROWS}
+          maxHeight={props.layout().textarea}
           wrapMode="word"
           placeholder={props.placeholder()}
           placeholderColor={props.theme().muted}
@@ -244,8 +334,8 @@ export function RunPromptBody(props: {
           cursorStyle={props.cursorStyle}
           onSubmit={props.onSubmit}
           onKeyDown={props.onKeyDown}
-          onPaste={() => {
-            refreshPasteLayout()
+          onPaste={(event) => {
+            void props.onPaste(event).finally(refreshPasteLayout)
           }}
           onContentChange={props.onContentChange}
           ref={(next) => {
@@ -258,6 +348,10 @@ export function RunPromptBody(props: {
 }
 
 export function createPromptState(input: PromptInput): PromptState {
+  const renderer = useRenderer()
+  const term = useTerminalDimensions()
+  const [lines, setLines] = createSignal(TEXTAREA_MIN_ROWS)
+  const [statusRows, setStatusRows] = createSignal(1)
   const [shell, setShell] = createSignal(false)
   const placeholder = createMemo(() => {
     if (shell()) {
@@ -268,7 +362,9 @@ export function createPromptState(input: PromptInput): PromptState {
       return ""
     }
 
-    return new StyledText([fg(input.theme().muted)('Ask anything... "Fix a TODO in the codebase"')])
+    return new StyledText([
+      fg(input.theme().muted)(`Ask anything, / for commands, @ for context${input.mono() ? "..." : "…"}`),
+    ])
   })
 
   let history = createPromptHistory(input.history?.())
@@ -283,6 +379,31 @@ export function createPromptState(input: PromptInput): PromptState {
   let type = 0
   let parts: Mention[] = []
   let marks = new Map<number, number>()
+  const [draftParts, setDraftParts] = createSignal<RunPromptPart[]>([])
+  const attachments = createMemo(() =>
+    draftParts().flatMap((part) =>
+      part.type === "file"
+        ? [
+            {
+              uri: part.url,
+              name: part.filename,
+              description: part.description,
+              mention: part.source?.text
+                ? { start: part.source.text.start, end: part.source.text.end, text: part.source.text.value }
+                : undefined,
+            },
+          ]
+        : [],
+    ),
+  )
+  const images = createMemo(() =>
+    (deduplicatePromptImages(attachments()) ?? []).filter((file) => file.uri.startsWith("data:image/")),
+  )
+  let clipboard: OwnedClipboardService | undefined
+  let pasteQueue: Promise<void> | undefined
+  let applyingPaste = false
+  let disposed = false
+  let revision = 0
 
   const [mode, setMode] = createSignal<MenuMode>(false)
   const [at, setAt] = createSignal(0)
@@ -290,11 +411,12 @@ export function createPromptState(input: PromptInput): PromptState {
   const visible = createMemo(() => mode() !== false)
 
   const setShellMode = (value: boolean) => {
+    revision += 1
     setShell(value)
     draft = value ? { ...draft, mode: "shell" } : { text: draft.text, parts: structuredClone(draft.parts) }
   }
 
-  const width = createMemo(() => Math.max(20, input.width() - 8))
+  const width = createMemo(() => Math.max(0, input.width() - (input.width() < FOOTER_COMPACT_WIDTH ? 2 : 4)))
   const agents = createMemo<Auto[]>(() => {
     return input
       .agents()
@@ -317,9 +439,7 @@ export function createPromptState(input: PromptInput): PromptState {
   const references = createMemo<Auto[]>(() => {
     return input.references().map((item) => ({
       kind: "mention",
-      display: input.mono()
-        ? monoTruncateMiddle("@" + item.name, width(), true)
-        : Locale.truncateMiddle("@" + item.name, width()),
+      display: "@" + item.name,
       value: item.name,
       description: item.description ?? (item.source.type === "git" ? item.source.repository : item.source.path),
       part: {
@@ -339,7 +459,7 @@ export function createPromptState(input: PromptInput): PromptState {
       },
     }))
   })
-  const [files] = createResource(
+  const [fileResults] = createResource(
     query,
     async (value) => {
       if (!visible() || mode() !== "mention") {
@@ -361,9 +481,7 @@ export function createPromptState(input: PromptInput): PromptState {
 
         return {
           kind: "mention",
-          display: input.mono()
-            ? monoTruncateMiddle("@" + filename, width(), true)
-            : Locale.truncateMiddle("@" + filename, width()),
+          display: "@" + filename,
           value: filename,
           directory: item.endsWith("/"),
           part: {
@@ -386,6 +504,15 @@ export function createPromptState(input: PromptInput): PromptState {
     },
     { initialValue: [] as Auto[] },
   )
+  const files = createMemo(() =>
+    fileResults().map((item) => {
+      const parts = item.value.split("/")
+      const paths = parts
+        .slice(0, item.directory ? -1 : undefined)
+        .map((_, index) => "@" + parts.slice(index).join("/"))
+      return { ...item, display: paths.find((value) => stringWidth(value) <= width()) ?? paths.at(-1) ?? item.display }
+    }),
+  )
   const mentionOptions = createMemo(() => [...agents(), ...files(), ...references()])
   const skillCommands = createMemo(() => (input.commands() ?? []).filter((item) => item.source === "skill"))
   const skillOptions = createMemo<SkillOption[]>(() =>
@@ -482,10 +609,17 @@ export function createPromptState(input: PromptInput): PromptState {
       })
       .map((item) => item.obj)
   })
-  const menu = createFooterMenuState({ count: () => options().length, limit: AUTOCOMPLETE_ROWS })
-  const popup = createMemo(() => {
-    return visible() ? menu.rows() - 1 + AUTOCOMPLETE_BOTTOM_ROWS : 0
+  const layout = createMemo(() => {
+    term()
+    return footerPromptLayout(
+      renderer.terminalHeight,
+      lines(),
+      visible() ? Math.max(1, options().length) : 0,
+      statusRows(),
+      input.imagePreview === true && !input.mono() && !shell() && images().length > 0,
+    )
   })
+  const menu = createFooterMenuState({ count: () => options().length, limit: () => Math.max(1, layout().menu) })
 
   const hide = () => {
     setMode(false)
@@ -498,7 +632,8 @@ export function createPromptState(input: PromptInput): PromptState {
       return
     }
 
-    input.onRows(clamp(Math.max(area.lineCount, area.virtualLineCount)) + popup())
+    setLines(Math.max(area.lineCount, area.virtualLineCount))
+    input.onRows(layout().rows)
   }
 
   const scheduleRows = () => {
@@ -518,8 +653,10 @@ export function createPromptState(input: PromptInput): PromptState {
       return
     }
 
-    const next: Mention[] = []
-    const map = new Map<number, number>()
+    const next = parts.map<Mention | undefined>((part) =>
+      part.type === "file" && !part.source?.text ? part : undefined,
+    )
+    let tracked = 0
     for (const item of area.extmarks.getAllForTypeId(type)) {
       const idx = marks.get(item.id)
       if (idx === undefined) {
@@ -556,15 +693,15 @@ export function createPromptState(input: PromptInput): PromptState {
         copy.source.text.value = text
       }
 
-      map.set(item.id, next.length)
-      next.push(copy)
+      tracked += 1
+      next[idx] = copy
     }
 
-    const stale = map.size !== marks.size
-    parts = next
-    marks = map
+    const retained = next.filter((part): part is Mention => part !== undefined)
+    const stale = tracked !== marks.size || retained.length !== parts.length
+    parts = retained
     if (stale) {
-      restoreParts(next)
+      restoreParts(retained)
     }
   }
 
@@ -574,6 +711,7 @@ export function createPromptState(input: PromptInput): PromptState {
     }
     parts = []
     marks = new Map()
+    setDraftParts([])
   }
 
   const restoreParts = (value: RunPromptPart[]) => {
@@ -581,6 +719,7 @@ export function createPromptState(input: PromptInput): PromptState {
     parts = value
       .filter((item): item is Mention => item.type === "file" || item.type === "agent" || item.type === "skill")
       .map((item) => structuredClone(item))
+    setDraftParts(parts)
     if (!area || area.isDestroyed || type === 0) {
       return
     }
@@ -604,6 +743,7 @@ export function createPromptState(input: PromptInput): PromptState {
   }
 
   const restore = (value: RunPrompt, cursor = stringWidth(value.text)) => {
+    revision += 1
     draft = promptCopy(value)
     setShell(value.mode === "shell")
     if (!area || area.isDestroyed) {
@@ -619,6 +759,7 @@ export function createPromptState(input: PromptInput): PromptState {
   }
 
   const resetDraft = () => {
+    revision += 1
     if (area && !area.isDestroyed) {
       area.setText("")
     }
@@ -719,6 +860,7 @@ export function createPromptState(input: PromptInput): PromptState {
     }
 
     syncParts()
+    setDraftParts(parts)
     const command = shell() ? undefined : selectedCommand(area.plainText, draft.command)
     draft = shell()
       ? {
@@ -733,6 +875,87 @@ export function createPromptState(input: PromptInput): PromptState {
         }
   }
 
+  const pasteAttachment = (file: { uri: string; filename?: string }) => {
+    if (!area || area.isDestroyed) return
+    syncDraft()
+    const value = promptAttachmentLabel(attachments(), { uri: file.uri, name: file.filename })
+    area.insertText(value + " ")
+    const end = area.cursorOffset - 1
+    const start = end - stringWidth(value)
+    const id = area.extmarks.create({ start, end, virtual: true, typeId: type })
+    marks.set(id, parts.length)
+    parts.push({
+      type: "file",
+      url: file.uri,
+      filename: file.filename,
+      mime: file.uri.slice(5, file.uri.indexOf(";")),
+      source: { type: "file", text: { start, end, value } },
+    })
+    syncDraft()
+  }
+
+  const paste = (text?: string) => {
+    const next = (pasteQueue ?? Promise.resolve())
+      .then(async () => {
+        const target = area
+        if (disposed || !target || target.isDestroyed || !input.prompt()) return
+        const before = revision
+        const changed = () =>
+          disposed || area !== target || target.isDestroyed || revision !== before || !input.prompt()
+        const content =
+          text === undefined
+            ? await (input.clipboard ?? (clipboard ??= createTuiClipboard(renderer))).read()
+            : { mime: "text/plain", data: text }
+        if (!content || changed()) return
+        const image = content.mime.startsWith("image/")
+        if (image && shell()) {
+          input.onStatus("image attachments are unavailable in shell mode")
+          return
+        }
+        if (!image && content.mime !== "text/plain") return
+        const normalized = image ? content.data : stripAnsiSequences(content.data).replace(/\r\n?/g, "\n")
+        const files = image
+          ? [{ type: "file" as const, uri: `data:${content.mime};base64,${content.data}`, filename: "clipboard" }]
+          : shell()
+            ? undefined
+            : await resolvePastedAttachments(normalized, process.platform)
+        if (changed()) return
+        // A paste's own text edits must not cancel a submit waiting on that paste.
+        applyingPaste = true
+        try {
+          files?.forEach((file) => {
+            if (file.type === "file") {
+              pasteAttachment(file)
+              return
+            }
+            target.insertText(file.content)
+          })
+          if (!files) target.insertText(normalized)
+        } finally {
+          applyingPaste = false
+        }
+        hide()
+        syncDraft()
+        target.getLayoutNode().markDirty()
+        renderer.requestRender()
+        scheduleRows()
+      })
+      .catch((error) => {
+        revision += 1
+        if (!disposed) input.onStatus(errorMessage(error))
+      })
+      .finally(() => {
+        if (pasteQueue === next) pasteQueue = undefined
+      })
+    pasteQueue = next
+    return next
+  }
+
+  const onPaste = (event: PasteEvent) => {
+    event.preventDefault()
+    return paste(event.bytes.length ? decodePasteBytes(event.bytes) : undefined)
+  }
+
   const push = (value: RunPrompt) => {
     history = pushPromptHistory(history, value)
   }
@@ -788,7 +1011,8 @@ export function createPromptState(input: PromptInput): PromptState {
 
   const requestExit = () => {
     const text = area && !area.isDestroyed ? area.plainText : draft.text
-    if (input.prompt() && text.length > 0) {
+    revision += 1
+    if (input.prompt() && (text.length > 0 || draft.parts.some((part) => part.type === "file"))) {
       input.onInputClear()
       resetDraft()
       return true
@@ -1033,6 +1257,12 @@ export function createPromptState(input: PromptInput): PromptState {
   Keymap.createLayer(() => ({
     enabled: input.prompt(),
     commands: [
+      {
+        id: "prompt.paste",
+        title: "Paste",
+        group: "Prompt",
+        run: () => paste(),
+      },
       {
         id: "session.interrupt",
         title: "Interrupt session",
@@ -1055,8 +1285,7 @@ export function createPromptState(input: PromptInput): PromptState {
         group: "Prompt",
         palette: true,
         run() {
-          syncDraft()
-          submitPrompt(promptCopy(draft), "queue")
+          onSubmit("queue")
         },
       },
     ],
@@ -1217,7 +1446,7 @@ export function createPromptState(input: PromptInput): PromptState {
 
     if (submitting) return
 
-    if (!next.text.trim()) {
+    if (!next.text.trim() && !next.parts.some((part) => part.type === "file")) {
       const queued = delivery === "steer" ? input.queuedPrompts()[0] : undefined
       if (queued) {
         submitting = true
@@ -1289,9 +1518,17 @@ export function createPromptState(input: PromptInput): PromptState {
     })
   }
 
-  const onSubmit = () => {
+  const onSubmit = (delivery: RunDelivery = "steer") => {
+    if (pasteQueue) {
+      const before = revision
+      void pasteQueue.then(() => {
+        if (revision === before) onSubmit(delivery)
+      })
+      return
+    }
+    if (disposed || !input.prompt()) return
     syncDraft()
-    submitPrompt(promptCopy(draft))
+    submitPrompt(promptCopy(draft), delivery)
   }
 
   const submitText = (text: string) => {
@@ -1299,14 +1536,20 @@ export function createPromptState(input: PromptInput): PromptState {
   }
 
   onCleanup(() => {
+    disposed = true
+    void clipboard?.dispose().catch(() => {})
     if (area && !area.isDestroyed) {
       area.off("line-info-change", scheduleRows)
     }
   })
 
+  createEffect(() => {
+    setStatusRows(input.statusRows())
+  })
+
   createEffect(() => {
     input.width()
-    popup()
+    layout()
     if (input.prompt()) {
       scheduleRows()
     }
@@ -1361,17 +1604,22 @@ export function createPromptState(input: PromptInput): PromptState {
     selected: menu.selected,
     offset: menu.offset,
     rows: menu.rows,
+    images,
+    layout,
     requestExit,
-    onSubmit,
+    onSubmit: () => onSubmit(),
     submitText,
     openEditor,
     onKeyDown,
+    onPaste,
     onContentChange: () => {
+      if (!applyingPaste && area && area.plainText !== draft.text) revision += 1
       input.onInputClear()
       syncDraft()
       refresh()
       scheduleRows()
     },
+    onSizeChange: scheduleRows,
     replacePrompt: restore,
     bind,
   }

packages/tui/src/mini/footer.subagent.tsx

@@ -1,12 +1,14 @@
 /** @jsxImportSource @opentui/solid */
 import type { ScrollBoxRenderable } from "@opentui/core"
-import { useKeyboard } from "@opentui/solid"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import { registerOpencodeSpinner } from "../component/register-spinner"
-import { Show, createMemo, indexArray } from "solid-js"
+import { Show, createMemo, createSignal, indexArray } from "solid-js"
 import { SPINNER_FRAMES } from "../component/spinner-frames"
 import { RunEntryContent, separatorRows } from "./scrollback.writer"
 import type { FooterSubagentDetail, FooterSubagentTab } from "./types"
 import type { RunFooterTheme, RunTheme } from "./theme"
+import { stringWidth } from "../util/string-width"
+import { footerMenuText } from "./footer.menu"
 
 registerOpencodeSpinner()
 
@@ -14,7 +16,7 @@ export const SUBAGENT_INSPECTOR_ROWS = 14
 
 function statusColor(theme: RunFooterTheme, status: FooterSubagentTab["status"]) {
   if (status === "completed") {
-    return theme.highlight
+    return theme.success
   }
 
   if (status === "cancelled") {
@@ -25,7 +27,7 @@ function statusColor(theme: RunFooterTheme, status: FooterSubagentTab["status"])
     return theme.error
   }
 
-  return theme.highlight
+  return theme.running
 }
 
 function statusIcon(status: FooterSubagentTab["status"], mono: boolean) {
@@ -59,6 +61,10 @@ export function RunFooterSubagentBody(props: {
   shellOutput?: () => boolean
   mono?: boolean
 }) {
+  const dims = useTerminalDimensions()
+  const [size, setSize] = createSignal(dims())
+  const width = () => size().width
+  const compact = () => width() < 56 || size().height < 12
   const theme = createMemo(() => props.theme())
   const footer = createMemo(() => theme().footer)
   const tab = createMemo(() => props.tab())
@@ -102,6 +108,11 @@ export function RunFooterSubagentBody(props: {
     if (tab()?.status !== "running") return undefined
     return props.interrupt?.()
   })
+  const count = () => (props.total() > 1 && props.index() > 0 ? `${props.index()} of ${props.total()}` : "")
+  const headerControlsWidth = () =>
+    (interruptHint() ? stringWidth(`${interruptHint()} interrupt`) + 1 : 0) + (count() ? stringWidth(count()) + 1 : 0)
+  const headerControls = () => !compact() && stringWidth(title()) + 2 + headerControlsWidth() <= width() - 4
+  const titleWidth = () => Math.max(1, width() - (compact() ? 2 : 6) - (headerControls() ? headerControlsWidth() : 0))
 
   useKeyboard((event) => {
     if (!props.active()) {
@@ -129,70 +140,130 @@ export function RunFooterSubagentBody(props: {
     if (event.name === "down" || event.name === "j") {
       event.preventDefault()
       scroll?.scrollBy(1)
+      return
+    }
+
+    if (event.name === "pageup" || event.name === "pagedown") {
+      event.preventDefault()
+      scroll?.scrollBy(event.name === "pageup" ? -1 : 1, "viewport")
     }
   })
 
   return (
-    <box width="100%" height="100%" flexDirection="column" backgroundColor={footer().surface}>
-      <box paddingTop={1} paddingLeft={1} paddingRight={3} paddingBottom={1} flexDirection="column" flexGrow={1}>
-        <Show when={tab()}>
-          {(current) => (
-            <box width="100%" flexDirection="row" gap={1} paddingBottom={1} flexShrink={0}>
-              {current().status === "running" ? (
-                <box flexShrink={0}>
-                  <spinner
-                    frames={props.mono ? ["-", "\\", "|", "/"] : SPINNER_FRAMES}
-                    interval={props.mono ? 160 : 80}
-                    color={statusColor(footer(), current().status)}
-                  />
-                </box>
-              ) : (
-                <text fg={statusColor(footer(), current().status)} wrapMode="none" truncate flexShrink={0}>
-                  {statusIcon(current().status, props.mono ?? false)}
-                </text>
-              )}
-              <text fg={footer().text} wrapMode="none" truncate flexGrow={1} flexShrink={1}>
-                {title()}
-                <Show when={subtitle().length > 0}>
-                  <span style={{ fg: footer().muted }}>{"  " + subtitle()}</span>
-                </Show>
+    <box
+      width="100%"
+      height="100%"
+      minHeight={0}
+      flexDirection="column"
+      backgroundColor={footer().surface}
+      paddingTop={compact() ? 0 : 1}
+      paddingLeft={compact() ? 0 : 1}
+      paddingRight={compact() ? 0 : 3}
+      paddingBottom={compact() ? 0 : 1}
+      onSizeChange={function () {
+        setSize({ width: this.width, height: this.height })
+      }}
+    >
+      <Show when={tab()}>
+        {(current) => (
+          <box
+            width="100%"
+            height={compact() ? 1 : 2}
+            paddingBottom={compact() ? 0 : 1}
+            flexDirection="row"
+            gap={1}
+            flexShrink={0}
+          >
+            {current().status === "running" ? (
+              <box flexShrink={0}>
+                <spinner
+                  frames={props.mono ? ["-", "\\", "|", "/"] : SPINNER_FRAMES}
+                  interval={props.mono ? 160 : 80}
+                  color={statusColor(footer(), current().status)}
+                />
+              </box>
+            ) : (
+              <text fg={statusColor(footer(), current().status)} wrapMode="none" truncate flexShrink={0}>
+                {statusIcon(current().status, props.mono ?? false)}
               </text>
+            )}
+            <text fg={footer().text} wrapMode="none" flexGrow={1} flexShrink={1}>
+              {footerMenuText(title(), titleWidth(), props.mono)}
+              <Show when={subtitle().length > 0 && titleWidth() >= stringWidth(title()) + stringWidth(subtitle()) + 2}>
+                <span style={{ fg: footer().muted }}>{"  " + subtitle()}</span>
+              </Show>
+            </text>
+            <Show when={headerControls()}>
               <Show when={interruptHint()}>
                 {(hint) => (
-                  <text fg={footer().muted} wrapMode="none" truncate flexShrink={0}>
+                  <text fg={footer().muted} wrapMode="none" flexShrink={0}>
                     {hint()} interrupt
                   </text>
                 )}
               </Show>
-              <Show when={props.total() > 1 && props.index() > 0}>
-                <text fg={footer().muted} wrapMode="none" truncate flexShrink={0}>
-                  {props.index()} of {props.total()}
-                </text>
+              <Show when={count()}>
+                {(value) => (
+                  <text fg={footer().muted} wrapMode="none" flexShrink={0}>
+                    {value()}
+                  </text>
+                )}
               </Show>
-            </box>
+            </Show>
+          </box>
+        )}
+      </Show>
+      <scrollbox
+        width="100%"
+        flexGrow={1}
+        minHeight={0}
+        stickyScroll={true}
+        stickyStart="bottom"
+        verticalScrollbarOptions={scrollbar()}
+        viewportOptions={{ paddingRight: props.mono ? 0 : 1 }}
+        ref={(item) => {
+          scroll = item
+        }}
+      >
+        <box width="100%" flexDirection="column" gap={0} flexShrink={0}>
+          {commits().length > 0 ? (
+            rows()
+          ) : (
+            <text width="100%" fg={footer().muted} wrapMode="word" flexShrink={0}>
+              No subagent activity yet
+            </text>
           )}
-        </Show>
-        <scrollbox
-          width="100%"
-          height="100%"
-          stickyScroll={true}
-          stickyStart="bottom"
-          verticalScrollbarOptions={scrollbar()}
-          ref={(item) => {
-            scroll = item
-          }}
-        >
-          <box width="100%" flexDirection="column" gap={0}>
-            {commits().length > 0 ? (
-              rows()
-            ) : (
-              <text fg={footer().muted} wrapMode="word">
-                No subagent activity yet
+        </box>
+      </scrollbox>
+      <Show when={!headerControls()}>
+        <box width="100%" flexDirection="row" flexWrap="wrap" columnGap={1} flexShrink={0}>
+          <text height={1} fg={footer().actionSecondaryText} wrapMode="none" flexShrink={0} onMouseUp={props.onClose}>
+            esc back
+          </text>
+          <Show when={interruptHint()}>
+            {(hint) => (
+              <text maxWidth="100%" fg={footer().actionSecondaryText} wrapMode="word" flexShrink={0}>
+                {hint()} {width() >= stringWidth(hint()) + 10 ? "interrupt" : "stop"}
               </text>
             )}
-          </box>
-        </scrollbox>
-      </box>
+          </Show>
+          <Show when={width() >= 56}>
+            <text height={1} fg={footer().muted} wrapMode="none" flexShrink={0}>
+              pgup/pgdn scroll
+            </text>
+            <Show when={props.total() > 1 && props.index() > 0}>
+              <text
+                height={1}
+                fg={footer().actionSecondaryText}
+                wrapMode="none"
+                flexShrink={0}
+                onMouseUp={() => props.onCycle(1)}
+              >
+                tab next {props.index()}/{props.total()}
+              </text>
+            </Show>
+          </Show>
+        </box>
+      </Show>
     </box>
   )
 }

packages/tui/src/mini/footer.ts

@@ -24,19 +24,22 @@
 // Ctrl-c clears a live prompt draft first; otherwise interrupt and exit use a
 // two-press pattern where the first press shows a hint and the second press
 // within 5 seconds actually fires the action.
-import { CliRenderEvents, type CliRenderer } from "@opentui/core"
+import { CliRenderEvents, type CliRenderer, type CliRendererExternalOutputEvent } from "@opentui/core"
 import { render } from "@opentui/solid"
-import { createComponent, createSignal, type Accessor, type Setter } from "solid-js"
+import { batch, createComponent, createSignal, type Accessor, type Setter } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"
 import { Keymap } from "../context/keymap"
 import { Locale } from "../util/locale"
-import { RUN_COMMAND_PANEL_ROWS, RUN_SUBAGENT_PANEL_ROWS } from "./footer.command"
+import { RUN_SUBAGENT_PANEL_ROWS, footerPanelLayout } from "./footer.command"
 import { SUBAGENT_INSPECTOR_ROWS } from "./footer.subagent"
-import { PROMPT_MAX_ROWS, TEXTAREA_MIN_ROWS } from "./footer.prompt"
+import { TEXTAREA_MIN_ROWS, footerPromptLayout } from "./footer.prompt"
 import { RunFooterView } from "./footer.view"
+import { monoSnapshot } from "./mono"
 import { RunScrollbackStream } from "./scrollback.surface"
-import { RUN_THEME_FALLBACK, resolveRunTheme, type RunTheme } from "./theme"
+import { resolveRunTheme, type RunTheme } from "./theme"
 import { modelInfo } from "./variant.shared"
+import { entrySplash } from "./splash"
+import { SEED_LAUNCH } from "../ui/one-cell-motion"
 import type {
   FooterApi,
   FooterEvent,
@@ -75,6 +78,7 @@ type RunFooterOptions = {
   agents: RunAgent[]
   references: RunReference[]
   wrote?: boolean
+  startup?: { version: string; detail: string }
   agent: string | undefined
   modelLabel: string
   model: RunInput["model"]
@@ -82,12 +86,12 @@ type RunFooterOptions = {
   first: boolean
   history?: RunPrompt[]
   theme: RunTheme
-  mono: boolean
   tuiConfig: RunTuiConfig
   miniSettings: {
     current: MiniSettings
     update?: (change: MiniSettingChange) => Promise<MiniSettings>
   }
+  onMonoChange?: (mono: boolean) => void
   onPermissionReply: (input: PermissionReply) => void | Promise<void>
   onFormReply: (input: FormReply) => void | Promise<void>
   onFormCancel: (input: FormCancel) => void | Promise<void>
@@ -208,6 +212,9 @@ export class RunFooter implements FooterApi {
   private noticeTimeout: NodeJS.Timeout | undefined
   private turnAgent: string | undefined
   private requestExitHandler: (() => boolean) | undefined
+  private startup: Accessor<RunFooterOptions["startup"]>
+  private setStartup: Setter<RunFooterOptions["startup"]>
+  private startupTimer: ReturnType<typeof setTimeout> | undefined
   private scrollback: RunScrollbackStream
   private themes: RunTheme[]
   private paletteRefreshRunning = false
@@ -225,7 +232,8 @@ export class RunFooter implements FooterApi {
           .finally(() => this.destroyTheme(theme))
       },
       shellOutput: () => this.miniSettings().shell_output === "show",
-      mono: this.options.mono,
+      mono: this.miniSettings().mono,
+      imagePreview: this.options.tuiConfig.session?.image_preview,
     })
   }
 
@@ -238,7 +246,7 @@ export class RunFooter implements FooterApi {
       status: "",
       notice: "",
       model: options.modelLabel,
-      usage: "",
+      usage: undefined,
       first: options.first,
       interrupt: 0,
       exit: 0,
@@ -300,16 +308,19 @@ export class RunFooter implements FooterApi {
     const [miniSettings, setMiniSettings] = createSignal(options.miniSettings.current)
     this.miniSettings = miniSettings
     this.setMiniSettings = setMiniSettings
+    const [startup, setStartup] = createSignal(options.startup)
+    this.startup = startup
+    this.setStartup = setStartup
     this.base = Math.max(1, renderer.footerHeight - TEXTAREA_MIN_ROWS)
     this.scrollback = this.createScrollback(options.wrote ?? false)
 
     this.renderer.on(CliRenderEvents.DESTROY, this.handleDestroy)
-    if (!options.mono) {
-      this.renderer.on(CliRenderEvents.PALETTE, this.handlePalette)
-      this.renderer.on(CliRenderEvents.THEME_MODE, this.handleThemeRefresh)
-      this.renderer.prependInputHandler(this.handleThemeNotification)
-      this.unsubscribeThemeSignal = options.subscribeThemeSignal(this.handleThemeSignal)
-    }
+    this.renderer.on(CliRenderEvents.RESIZE, this.handleResize)
+    this.renderer.on(CliRenderEvents.EXTERNAL_OUTPUT, this.handleExternalOutput)
+    this.renderer.on(CliRenderEvents.PALETTE, this.handlePalette)
+    this.renderer.on(CliRenderEvents.THEME_MODE, this.handleThemeRefresh)
+    this.renderer.prependInputHandler(this.handleThemeNotification)
+    this.unsubscribeThemeSignal = options.subscribeThemeSignal(this.handleThemeSignal)
 
     const footer = this
     void render(
@@ -320,6 +331,7 @@ export class RunFooter implements FooterApi {
             return createComponent(RunFooterView, {
               directory: options.directory,
               state: footer.state,
+              startup: footer.startup,
               view: footer.view,
               subagent: footer.subagent,
               queuedPrompts: footer.queuedPrompts,
@@ -330,13 +342,14 @@ export class RunFooter implements FooterApi {
               providers: footer.providers,
               currentAgent: footer.currentAgent,
               currentAgentID: footer.currentAgentID,
-              currentAgentExplicit: () => selectedAgentID() !== undefined,
               currentModel: footer.currentModel,
               variants: footer.variants,
               currentVariant: footer.currentVariant,
               theme: footer.theme,
               tuiConfig: options.tuiConfig,
-              mono: options.mono,
+              get mono() {
+                return footer.miniSettings().mono
+              },
               miniSettings: footer.miniSettings,
               history: footer.history,
               onSubmit: footer.handlePrompt,
@@ -347,7 +360,10 @@ export class RunFooter implements FooterApi {
               onInterrupt: footer.handleInterrupt,
               onBackground: options.onBackground,
               onQueuedPromptAction: options.onQueuedPromptAction,
-              onEditorOpen: options.onEditorOpen,
+              onEditorOpen: (input) => {
+                footer.finishStartup()
+                return options.onEditorOpen(input)
+              },
               onInputClear: footer.handleInputClear,
               onExitRequest: footer.handleExit,
               onRequestExit: footer.setRequestExitHandler,
@@ -370,6 +386,26 @@ export class RunFooter implements FooterApi {
         this.close()
       }
     })
+    if (options.startup)
+      this.startupTimer = setTimeout(() => this.finishStartup(), (SEED_LAUNCH.frames.length - 1) * SEED_LAUNCH.interval)
+  }
+
+  public finishStartup(): void {
+    const startup = this.startup()
+    if (!startup) return
+    clearTimeout(this.startupTimer)
+    this.startupTimer = undefined
+    this.setStartup(undefined)
+    if (this.isGone) return
+    this.applyHeight()
+    this.renderer.writeToScrollback(
+      entrySplash({
+        ...startup,
+        theme: this.theme().splash,
+        mono: this.miniSettings().mono,
+      }),
+    )
+    this.renderer.requestRender()
   }
 
   public get isClosed(): boolean {
@@ -415,6 +451,7 @@ export class RunFooter implements FooterApi {
     }
 
     if (next.type === "turn.duration") {
+      this.finishStartup()
       const agent = this.turnAgent ?? this.currentAgent()
       this.turnAgent = undefined
       if (this.miniSettings().turn_summary === "hide") return
@@ -516,7 +553,7 @@ export class RunFooter implements FooterApi {
       status: typeof next.status === "string" ? next.status : prev.status,
       notice: typeof next.notice === "string" ? next.notice : prev.notice,
       model: typeof next.model === "string" ? next.model : prev.model,
-      usage: typeof next.usage === "string" ? next.usage : prev.usage,
+      usage: "usage" in next ? next.usage : prev.usage,
       first: typeof next.first === "boolean" ? next.first : prev.first,
       interrupt:
         typeof next.interrupt === "number" && Number.isFinite(next.interrupt)
@@ -551,6 +588,7 @@ export class RunFooter implements FooterApi {
       return
     }
 
+    if (view.type !== "prompt") this.finishStartup()
     this.setView(view)
     this.applyHeight()
   }
@@ -564,6 +602,7 @@ export class RunFooter implements FooterApi {
       return
     }
 
+    this.finishStartup()
     const last = this.queue.at(-1)
     const merged = last ? coalesceProgressCommit(last, commit) : undefined
     if (merged) this.queue[this.queue.length - 1] = merged
@@ -614,6 +653,7 @@ export class RunFooter implements FooterApi {
       return
     }
 
+    this.finishStartup()
     this.scrollback.destroy()
     this.scrollback = this.createScrollback(wrote)
   }
@@ -641,6 +681,7 @@ export class RunFooter implements FooterApi {
       return
     }
 
+    this.finishStartup()
     this.flush()
     this.notifyClose()
   }
@@ -693,23 +734,34 @@ export class RunFooter implements FooterApi {
     this.patch({ interrupt: 0, exit: 0 })
   }
 
-  // Resizes the footer to fit the current view. Permission and form views
-  // get fixed extra rows; the prompt view scales with textarea line count.
+  private handleResize = (): void => {
+    if (!this.isGone) this.applyHeight()
+  }
+
   private applyHeight(): void {
     const type = this.view().type
     const route = this.promptRoute.type
-    const height =
+    const panel = footerPanelLayout(this.renderer.terminalHeight)
+    const prompt = footerPromptLayout(this.renderer.terminalHeight)
+    const desired =
       type === "permission"
         ? this.base + PERMISSION_ROWS
         : type === "form"
           ? this.base + FORM_ROWS
           : ["command", "skill", "agent", "model", "variant", "settings"].includes(route)
-            ? 1 + RUN_COMMAND_PANEL_ROWS
+            ? 1 + panel.frame + panel.limit
             : route === "queued-menu" || route === "subagent-menu"
               ? 1 + this.subagentMenuRows
               : route === "subagent"
                 ? this.base + SUBAGENT_INSPECTOR_ROWS
-                : this.base + Math.max(TEXTAREA_MIN_ROWS, Math.min(PROMPT_MAX_ROWS, this.rows))
+                : prompt.padding * 2 + 1 + this.rows
+    const height = Math.max(
+      1,
+      Math.min(
+        desired + (this.startup() ? 2 : 0),
+        this.renderer.terminalHeight - (type === "prompt" && route === "composer" ? 1 : 0),
+      ),
+    )
 
     if (height !== this.renderer.footerHeight) {
       this.renderer.footerHeight = height
@@ -721,7 +773,7 @@ export class RunFooter implements FooterApi {
       return
     }
 
-    const rows = Math.max(TEXTAREA_MIN_ROWS, Math.min(PROMPT_MAX_ROWS, value))
+    const rows = Math.max(TEXTAREA_MIN_ROWS, value)
     if (rows === this.rows) {
       return
     }
@@ -733,6 +785,7 @@ export class RunFooter implements FooterApi {
   }
 
   private syncLayout = (next: { route: FooterPromptRoute; subagentRows: number }): void => {
+    if (next.route.type !== "composer") this.finishStartup()
     this.promptRoute = next.route
     this.subagentMenuRows = next.subagentRows
     if (this.view().type === "prompt") {
@@ -861,8 +914,29 @@ export class RunFooter implements FooterApi {
     }
 
     try {
-      this.setMiniSettings(await this.options.miniSettings.update(change))
-      this.setNotice(change.key === "mono" ? "Mono applies after restart" : "settings updated")
+      const settings = await this.options.miniSettings.update(change)
+      if (this.isClosed) return
+      if (settings.mono === this.miniSettings().mono) {
+        this.setMiniSettings(settings)
+        this.setNotice("settings updated")
+        return
+      }
+      const theme = await resolveRunTheme(this.renderer, this.options.tuiConfig.theme, settings.mono)
+      this.flush()
+      this.flushing = this.flushing.then(async () => {
+        if (this.isClosed) {
+          theme.block.syntax?.destroy()
+          return
+        }
+        await this.scrollback.setMono(settings.mono)
+        batch(() => {
+          this.setMiniSettings(settings)
+          this.applyTheme(theme)
+          this.options.onMonoChange?.(settings.mono)
+        })
+      })
+      await this.flushing
+      this.setNotice("settings updated")
     } catch (error) {
       this.setNotice("failed to save settings")
       throw error
@@ -959,26 +1033,34 @@ export class RunFooter implements FooterApi {
     return true
   }
 
-  private handlePalette = (): void => {
-    void resolveRunTheme(this.renderer, this.options.tuiConfig.theme).then((theme) => {
-      if (this.isGone) {
-        theme.block.syntax?.destroy()
-        return
-      }
+  private applyTheme(theme: RunTheme): void {
+    if (theme === this.theme()) return
+    this.themes.push(theme)
+    this.setTheme(theme)
+    this.renderer.setBackgroundColor(theme.background)
+    this.scrollback.setTheme(theme)
+  }
 
-      // Keep the last known good theme when a runtime OSC probe times out.
-      if (theme === RUN_THEME_FALLBACK) {
-        return
-      }
+  private handleExternalOutput = (event: CliRendererExternalOutputEvent): void => {
+    if (this.miniSettings().mono) monoSnapshot(event)
+  }
 
-      this.themes.push(theme)
-      this.setTheme(theme)
-      this.renderer.setBackgroundColor(theme.background)
+  private handlePalette = (): Promise<void> | undefined => {
+    if (this.isGone || this.paletteRefreshRunning) return
+    const mono = this.miniSettings().mono
+    return resolveRunTheme(this.renderer, this.options.tuiConfig.theme, mono).then((theme) => {
       this.flushing = this.flushing
-        .then(() => this.scrollback.setTheme(theme))
+        .then(() => {
+          if (this.isGone || mono !== this.miniSettings().mono) {
+            theme.block.syntax?.destroy()
+            return
+          }
+          this.applyTheme(theme)
+        })
         .catch((error) => {
           this.flushError = error
         })
+      return this.flushing
     })
   }
 
@@ -993,10 +1075,11 @@ export class RunFooter implements FooterApi {
     return false
   }
 
-  private handleThemeRefresh = (): void => {
-    if (this.isGone || this.options.mono) {
+  private handleThemeRefresh = (): Promise<void> | undefined => {
+    if (this.isGone) {
       return
     }
+    if (this.miniSettings().mono) return this.handlePalette()
 
     if (this.paletteRefreshRunning) {
       this.paletteRefreshQueued = true
@@ -1006,22 +1089,23 @@ export class RunFooter implements FooterApi {
     this.paletteRefreshRunning = true
     const retry = this.renderer.paletteDetectionStatus === "detecting"
     this.renderer.clearPaletteCache()
-    void this.renderer
+    return this.renderer
       .getPalette({ size: 256 })
       .catch(() => {})
-      .finally(() => {
+      .then(() => {
         this.paletteRefreshRunning = false
         if (!retry && !this.paletteRefreshQueued) {
-          return
+          // Theme files can change without a new terminal palette.
+          return this.handlePalette()
         }
 
         this.paletteRefreshQueued = false
-        this.handleThemeRefresh()
+        return this.handleThemeRefresh()
       })
   }
 
-  public refreshTheme(): void {
-    this.handleThemeRefresh()
+  public refreshTheme() {
+    return this.handleThemeRefresh()
   }
 
   private handleThemeSignal = (): void => {
@@ -1039,6 +1123,8 @@ export class RunFooter implements FooterApi {
       return
     }
 
+    clearTimeout(this.startupTimer)
+    this.startupTimer = undefined
     this.flush()
     this.destroyed = true
     this.notifyClose()
@@ -1046,6 +1132,8 @@ export class RunFooter implements FooterApi {
     this.clearExitTimer()
     this.clearNoticeTimer()
     this.renderer.off(CliRenderEvents.DESTROY, this.handleDestroy)
+    this.renderer.off(CliRenderEvents.RESIZE, this.handleResize)
+    this.renderer.off(CliRenderEvents.EXTERNAL_OUTPUT, this.handleExternalOutput)
     this.renderer.off(CliRenderEvents.PALETTE, this.handlePalette)
     this.renderer.off(CliRenderEvents.THEME_MODE, this.handleThemeRefresh)
     this.renderer.removeInputHandler(this.handleThemeNotification)

packages/tui/src/mini/footer.view.tsx

@@ -8,10 +8,12 @@
 // All state comes from the parent RunFooter through SolidJS signals.
 // The view itself is stateless except for derived memos.
 /** @jsxImportSource @opentui/solid */
-import { useTerminalDimensions } from "@opentui/solid"
+import { useRenderer, useTerminalDimensions } from "@opentui/solid"
+import { TextBuffer, TextBufferView } from "@opentui/core"
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
-import { registerOpencodeSpinner } from "../component/register-spinner"
-import { createColors, createFrames } from "../ui/spinner"
+import { OneCellSpinner } from "../component/one-cell-spinner"
+import { WORK_SPINNERS, SEED_LAUNCH, SEED_MONO } from "../ui/one-cell-motion"
+import { entrySplashLayout } from "./splash"
 import {
   RUN_SUBAGENT_PANEL_ROWS,
   RunAgentSelectBody,
@@ -31,9 +33,11 @@ import { RunFormBody } from "./footer.form"
 import { createFormBodyState, type FormBodyState } from "./form.shared"
 import { footerStatuslinePolicy } from "./footer.width"
 import { Keymap } from "../context/keymap"
+import type { ClipboardService } from "../context/clipboard"
 import { modelInfo } from "./variant.shared"
 import { monoShortcut } from "./mono"
 import { stringWidth } from "../util/string-width"
+import { formatContextUsage } from "../util/session"
 import { errorMessage } from "../util/error"
 import { createSingleFlight } from "../util/single-flight"
 
@@ -59,7 +63,7 @@ import type {
 } from "./types"
 import type { RunTheme } from "./theme"
 
-registerOpencodeSpinner()
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
 
 const EMPTY_BORDER = {
   topLeft: "",
@@ -84,11 +88,11 @@ type RunFooterViewProps = {
   providers: () => RunProvider[] | undefined
   currentAgent: () => string
   currentAgentID: () => string | undefined
-  currentAgentExplicit: () => boolean
   currentModel: () => RunInput["model"]
   variants: () => string[]
   currentVariant: () => string | undefined
   state: () => FooterState
+  startup?: () => { version: string; detail: string } | undefined
   view?: () => FooterView
   subagent?: () => FooterSubagentState
   queuedPrompts?: () => FooterQueuedPrompt[]
@@ -97,6 +101,7 @@ type RunFooterViewProps = {
   mono: boolean
   miniSettings: () => MiniSettings
   history?: () => RunPrompt[]
+  clipboard?: Pick<ClipboardService, "read">
   onSubmit: (input: RunPrompt) => boolean | Promise<boolean>
   onPermissionReply: (input: PermissionReply) => void | Promise<void>
   onFormReply: (input: FormReply) => void | Promise<void>
@@ -122,8 +127,13 @@ type RunFooterViewProps = {
 }
 
 export function RunFooterView(props: RunFooterViewProps) {
+  const renderer = useRenderer()
   const term = useTerminalDimensions()
   const width = createMemo(() => term().width)
+  const startup = createMemo(() => {
+    const value = props.startup?.()
+    return value ? entrySplashLayout({ ...value, width: width(), mono: props.mono }) : undefined
+  })
   const active = createMemo<FooterView>(() => props.view?.() ?? { type: "prompt" })
   const subagent = createMemo<FooterSubagentState>(() => {
     return (
@@ -181,7 +191,7 @@ export function RunFooterView(props: RunFooterViewProps) {
   const foregroundSubagents = createMemo(() => activeTabs().some((item) => !item.background))
   const model = createMemo(() => {
     const current = props.currentModel()
-    return current ? modelInfo(props.providers(), current).model : undefined
+    return current ? modelInfo(props.providers(), current) : undefined
   })
   const detail = createMemo(() => {
     const current = route()
@@ -198,10 +208,18 @@ export function RunFooterView(props: RunFooterViewProps) {
   const variantCycle = () => monoShortcut(shortcuts.all("variant.cycle") ?? "", props.mono)
   const clearShortcut = () => shortcut("prompt.clear")
   const busy = createMemo(() => props.state().phase === "running")
+  const started = createMemo(() => (busy() ? performance.now() : undefined))
+  const statusWidth = createMemo(() => Math.max(1, width() - (busy() ? 2 : 0)))
   const armed = createMemo(() => props.state().interrupt > 0)
   const exiting = createMemo(() => props.state().exit > 0)
   const usage = createMemo(() => props.state().usage)
-  const footerDetails = createMemo(() => props.miniSettings().footer === "show")
+  const contextUsage = createMemo(() => {
+    const current = usage()
+    return current && current.tokens > 0 ? formatContextUsage(current.tokens, current.percent) : ""
+  })
+  const cost = createMemo(() => (usage()?.cost ? money.format(usage()!.cost!) : ""))
+  const takeover = createMemo(() => exiting() || (busy() && armed()) || !!props.state().notice.trim())
+  const footerDetails = createMemo(() => props.miniSettings().footer === "show" && !takeover())
   const interruptLabel = createMemo(() => {
     if (!interrupt()) {
       return
@@ -211,31 +229,22 @@ export function RunFooterView(props: RunFooterViewProps) {
   })
   const runTheme = createMemo(() => props.theme())
   const theme = createMemo(() => runTheme().footer)
-  const block = createMemo(() => runTheme().block)
-  const spin = createMemo(() => {
-    if (props.mono) {
-      return {
-        frames: ["-", "\\", "|", "/"],
-        color: theme().text,
-      }
-    }
-    const options = {
-      color: theme().highlight,
-      style: "blocks" as const,
-      inactiveFactor: 0.6,
-      minAlpha: 0.3,
-    }
-    return {
-      frames: createFrames(options),
-      color: createColors(options),
-    }
+  const agentColor = createMemo(() => {
+    const colors = theme().categorical
+    const index = props
+      .agents()
+      .filter((agent) => !agent.hidden)
+      .findIndex((agent) => agent.id === props.currentAgentID())
+    return colors[Math.max(0, index) % colors.length]!
   })
+  const block = createMemo(() => runTheme().block)
   const footerStatus = createMemo(() => {
-    const current = model() ?? props.state().model.trim()
+    const current = model()?.model ?? props.state().model.trim()
     const variant = props.currentVariant()
     const details = [busy() ? "running" : "idle", `agent ${props.currentAgent()}`]
     if (current) details.push(variant ? `${current} ${variant}` : current)
-    if (usage()) details.push(props.mono ? usage().replaceAll(" · ", " - ") : usage())
+    if (contextUsage()) details.push(contextUsage())
+    if (cost()) details.push(cost())
     if (queue().length > 0) details.push(`${queue().length} queued`)
     if (activeTabs().length > 0) details.push(`${activeTabs().length} subagent${activeTabs().length === 1 ? "" : "s"}`)
     return details.join(props.mono ? " - " : " · ")
@@ -363,6 +372,7 @@ export function RunFooterView(props: RunFooterViewProps) {
 
     openTab(next.sessionID)
   }
+  const [promptRows, setPromptRows] = createSignal(1)
   const composer = createPromptState({
     directory: props.directory,
     findFiles: props.findFiles,
@@ -373,8 +383,11 @@ export function RunFooterView(props: RunFooterViewProps) {
     view: promptView,
     prompt,
     width,
+    statusRows: () => (menu() ? 0 : statusRows()),
     theme,
     mono: () => props.mono,
+    imagePreview: props.tuiConfig.prompt?.image_preview,
+    clipboard: props.clipboard,
     history: props.history,
     queuedPrompts: queue,
     onQueuedPromptSteer: (inboxID) => queuedPromptAction("steer", inboxID),
@@ -387,63 +400,44 @@ export function RunFooterView(props: RunFooterViewProps) {
     onExit: props.onExit,
     onSkillMenu: openSkillMenu,
     onSettings: openSettings,
-    onRows: props.onRows,
+    onRows: setPromptRows,
     onStatus: props.onStatus,
   })
   const shell = createMemo(() => prompt() && composer.shell())
   const menu = createMemo(() => prompt() && composer.visible())
   const stateStatus = createMemo(() => props.state().status.trim())
   const notice = createMemo(() => props.state().notice.trim())
-  const modeLabel = createMemo(() => {
-    if (exiting()) {
-      return "EXIT"
-    }
-
-    return shell() ? "SHELL" : undefined
-  })
-  const modeColor = createMemo(() => {
-    if (exiting()) {
-      return theme().error
-    }
-
-    if (shell()) {
-      return theme().warning
-    }
-
-    return theme().highlight
-  })
   const statusText = createMemo(() => {
-    if (exiting()) {
-      return `Press ${clearShortcut() || "ctrl+c"} again to exit`
+    if (exiting() || (busy() && armed())) {
+      const key = exiting() ? clearShortcut() : interruptLabel()
+      const action = exiting() ? "exit" : "stop"
+      if (!key) return exiting() ? "Exit pending" : "Stop pending"
+      const phrases = [
+        `Press ${key} again to ${exiting() ? "exit" : "interrupt"}`,
+        `${key} again to ${exiting() ? "exit" : "interrupt"}`,
+        `${key} again: ${action}`,
+        `${key} ${action}`,
+      ]
+      return phrases.find((text) => stringWidth(text) <= statusWidth()) ?? phrases[phrases.length - 1]!
     }
 
-    if (busy() && armed()) return "again to interrupt"
-
     if (notice()) return notice()
-
-    if (!footerDetails()) return shell() ? "Shell mode" : ""
-
-    if (busy()) return "interrupt"
-
-    if (stateStatus().length > 0) {
-      return stateStatus()
+    if (!footerDetails()) return shell() ? "Shell" : ""
+    if (busy()) {
+      return interruptLabel() ? `${interruptLabel()} stop` : "Running"
     }
-
-    return shell() ? "Shell mode" : ""
-  })
-  const activityMeta = createMemo(() => {
-    if (!footerDetails()) return ""
-    return props.mono ? usage().replaceAll(" · ", " - ") : usage()
+    return stateStatus() || (shell() ? "Shell" : "")
   })
   const agentStatus = createMemo(() => {
-    if (!footerDetails() || !prompt() || shell() || !props.currentAgentExplicit()) return undefined
+    if (!footerDetails() || !prompt() || shell()) return undefined
     return props.currentAgent()
   })
   const modelStatus = createMemo(() => {
-    const current = model() ?? props.state().model.trim()
+    const current = model()?.model ?? props.state().model.trim()
     if (!footerDetails() || !prompt() || shell() || !current) return
     return {
       model: current,
+      provider: model()?.provider,
       variant: props.currentVariant(),
     }
   })
@@ -453,7 +447,7 @@ export function RunFooterView(props: RunFooterViewProps) {
     }
 
     if (armed()) {
-      return theme().highlight
+      return theme().warning
     }
 
     if (busy() || notice().length > 0 || stateStatus().length > 0) {
@@ -462,79 +456,87 @@ export function RunFooterView(props: RunFooterViewProps) {
 
     return theme().muted
   })
-  const statuslineBackground = createMemo(() => theme().status)
   const contextHintCandidates = createMemo(() => {
     if (!footerDetails() || !prompt() || shell()) {
       return []
     }
 
-    const items: Array<{ key: string; label: string }> = []
-    if (foregroundSubagents() && backgroundShortcut()) {
-      items.push({ key: backgroundShortcut(), label: "background" })
-    }
+    const items: Array<{ id: "queued" | "subagents" | "background"; key: string; label: string; expanded?: string }> =
+      []
     if (queue().length > 0 && queuedShortcut()) {
-      items.push({ key: queuedShortcut(), label: `${queue().length} queued` })
+      items.push({ id: "queued", key: queuedShortcut(), label: `${queue().length} queued` })
     }
     if (activeTabs().length > 0 && subagentShortcut()) {
-      items.push({ key: subagentShortcut(), label: "subagents" })
+      items.push({
+        id: "subagents",
+        key: subagentShortcut(),
+        label: `${activeTabs().length} sub`,
+        expanded: `${activeTabs().length} subagent${activeTabs().length === 1 ? "" : "s"}`,
+      })
+    }
+    if (foregroundSubagents() && backgroundShortcut()) {
+      items.push({ id: "background", key: backgroundShortcut(), label: "bg", expanded: "background" })
     }
     return items
   })
   const commandHint = createMemo(() => {
-    if (!prompt()) return
-
-    if (shell()) {
-      return { key: "esc", label: "normal" }
-    }
-
+    if (!prompt() || takeover() || shell()) return
     if (command()) {
-      return { key: command(), label: "cmd" }
+      return { key: command(), label: "menu" }
     }
   })
-  const commandHintWidth = createMemo(() => {
-    const hint = commandHint()
-    return hint ? stringWidth(`${hint.key} ${hint.label}`) : 0
-  })
-  const statuslineText = createMemo(() =>
-    busy() && !exiting() && (footerDetails() || armed())
-      ? `${interruptLabel() ? `${interruptLabel()} ` : ""}${statusText()}`
-      : statusText(),
-  )
-  const statuslineMainWidth = createMemo(() => {
-    const mode = modeLabel()
-    const modeWidth = mode ? stringWidth(mode) + (props.mono ? 1 : 2) : 0
-    const spinnerWidth = footerDetails() && busy() && !exiting() ? stringWidth(spin().frames[0] ?? "") + 1 : 0
-    return modeWidth + Math.max(12, (props.mono ? 1 : 2) + spinnerWidth + stringWidth(statuslineText()))
-  })
-  const visibleModeLabel = createMemo(() => {
-    const mode = modeLabel()
-    if (!mode || width() - commandHintWidth() < stringWidth(mode) + (props.mono ? 1 : 2)) return undefined
-    return mode
-  })
-  const statuslineMainAvailable = createMemo(() => {
-    const mode = visibleModeLabel()
-    return width() - commandHintWidth() - (mode ? stringWidth(mode) + (props.mono ? 1 : 2) : 0)
-  })
   const statuslineLayout = createMemo(() => {
-    const agent = agentStatus()
     const info = modelStatus()
     return footerStatuslinePolicy({
       width: width(),
-      mainWidth: statuslineMainWidth(),
-      commandWidth: commandHint() ? commandHintWidth() : undefined,
-      agentWidth: agent ? stringWidth(agent) : undefined,
-      contextWidths: contextHintCandidates().map((item) => stringWidth(`${item.key} ${item.label}`)),
-      modelWidth: info ? stringWidth(info.model) : undefined,
-      variantWidth: info?.variant ? stringWidth(` ${info.variant}`) : undefined,
-      usageWidth: activityMeta() ? stringWidth(activityMeta()) : undefined,
+      mono: props.mono,
+      status: {
+        text: statusText(),
+        expanded: footerDetails() && busy() && interruptLabel() ? `${interruptLabel()} interrupt` : undefined,
+      },
+      escape: shell() && !takeover() ? { key: "esc", label: "normal" } : undefined,
+      work: contextHintCandidates(),
+      model: info ? { name: info.model, variant: info.variant } : undefined,
+      agent: agentStatus(),
+      context:
+        footerDetails() && contextUsage()
+          ? {
+              compact: usage()?.percent === undefined ? contextUsage() : `${usage()!.percent}% ctx`,
+              full: contextUsage(),
+            }
+          : undefined,
+      cost: footerDetails() ? cost() : undefined,
+      provider: info?.provider,
+      menu: commandHint(),
+      spinner: busy() ? (props.mono ? "*" : "\u25aa") : undefined,
     })
   })
-  const contextHints = createMemo(() => contextHintCandidates().slice(0, statuslineLayout().contextCount))
-  const hasStatuslineInfo = createMemo(() => {
-    const layout = statuslineLayout()
-    return layout.showUsage || layout.showAgent || layout.showModel
+  const statusSections = createMemo(() => statuslineLayout().groups.filter((group) => group.id !== "spinner"))
+  const statusColors = createMemo(() => ({
+    text: theme().text,
+    muted: theme().muted,
+    agent: agentColor(),
+    status: statusColor(),
+  }))
+  const statusRows = createMemo(() => {
+    const text = statusSections()
+      .map((group) => group.parts.map((part) => part.text).join(""))
+      .join(props.mono ? " - " : " \u00b7 ")
+    if (stringWidth(text) <= statusWidth() && !text.includes("\n")) return 1
+    // Measure outside the clipped footer so wrapped required controls can grow it.
+    const buffer = TextBuffer.create(renderer.widthMethod)
+    const view = TextBufferView.create(buffer)
+    buffer.setText(text)
+    view.setWrapMode("word")
+    view.setWrapWidth(statusWidth())
+    const rows = Math.max(1, view.getVirtualLineCount())
+    view.destroy()
+    buffer.destroy()
+    return rows
+  })
+  createEffect(() => {
+    props.onRows(promptRows() + (!panel() && !menu() && !inspecting() ? statusRows() : 0) - 1)
   })
-  const sectionSeparator = () => <span style={{ fg: theme().muted }}>{props.mono ? "- " : "· "}</span>
 
   createEffect(() => {
     props.onRequestExit?.(composer.requestExit)
@@ -692,6 +694,23 @@ export function RunFooterView(props: RunFooterViewProps) {
       gap={0}
       padding={0}
     >
+      <Show when={startup()}>
+        {(layout) => (
+          <box id="mini-startup" height={2} flexShrink={0} paddingTop={1} flexDirection="row">
+            <Show when={layout().label.startsWith("\u25aa")}>
+              <OneCellSpinner
+                animation={SEED_LAUNCH}
+                color={runTheme().splash.right}
+                animations={props.tuiConfig.animations}
+              />
+            </Show>
+            <text fg={runTheme().splash.right} wrapMode="none">
+              {layout().label.startsWith("\u25aa") ? layout().label.slice(1) : layout().label}
+              <span style={{ fg: runTheme().splash.left }}>{layout().metadata}</span>
+            </text>
+          </box>
+        )}
+      </Show>
       <Show when={panel() || inspecting()}>
         <box width="100%" height={1} flexShrink={0} backgroundColor="transparent" />
       </Show>
@@ -706,7 +725,7 @@ export function RunFooterView(props: RunFooterViewProps) {
                   width="100%"
                   flexShrink={0}
                   border={panel() || prompt() ? false : ["left"]}
-                  borderColor={panel() || prompt() ? undefined : theme().highlight}
+                  borderColor={panel() || prompt() ? undefined : theme().border}
                   customBorderChars={
                     panel() || prompt()
                       ? undefined
@@ -733,10 +752,16 @@ export function RunFooterView(props: RunFooterViewProps) {
                             theme={theme}
                             cursorStyle={props.tuiConfig.cursor}
                             background={() => runTheme().background}
+                            rail={() => (shell() ? theme().formfieldFocusedText : agentColor())}
+                            mono={props.mono}
                             placeholder={composer.placeholder}
                             onSubmit={composer.onSubmit}
                             onKeyDown={composer.onKeyDown}
+                            onPaste={composer.onPaste}
+                            images={composer.images}
+                            layout={composer.layout}
                             onContentChange={composer.onContentChange}
+                            onSizeChange={composer.onSizeChange}
                             bind={composer.bind}
                           />
                         </Match>
@@ -874,6 +899,7 @@ export function RunFooterView(props: RunFooterViewProps) {
                             onClose={closePanel}
                             onChange={props.onMiniSettingChange}
                             mono={props.mono}
+                            animations={props.tuiConfig.animations}
                           />
                         </Match>
                         <Match when={active().type === "permission"}>
@@ -928,128 +954,48 @@ export function RunFooterView(props: RunFooterViewProps) {
                 rows={composer.rows}
                 limit={FOOTER_MENU_ROWS}
                 border={false}
-                paddingLeft={0}
+                paddingLeft={2}
+                paddingRight={2}
                 mono={props.mono}
               />
             </Show>
 
             <Show when={!panel() && !menu()}>
               <box
+                id="mini-statusline"
                 width="100%"
-                height={1}
                 flexDirection="row"
-                gap={0}
+                gap={1}
                 flexShrink={0}
-                backgroundColor={statuslineBackground()}
+                backgroundColor="transparent"
               >
-                <Show when={visibleModeLabel()}>
-                  {(label) => (
-                    <box
-                      paddingLeft={props.mono ? 0 : 1}
-                      paddingRight={1}
-                      backgroundColor={theme().statusAccent}
-                      flexShrink={0}
-                    >
-                      <text wrapMode="none" truncate>
-                        <span style={{ fg: modeColor(), bold: true }}>{label()}</span>
-                      </text>
-                    </box>
-                  )}
+                <Show when={busy()}>
+                  <box id="mini-work-spinner" width={1} flexShrink={0}>
+                    <OneCellSpinner
+                      animation={props.mono ? SEED_MONO : WORK_SPINNERS[props.miniSettings().work_spinner]}
+                      color={agentColor()}
+                      animations={props.tuiConfig.animations}
+                      glow={!props.mono}
+                      still={props.mono ? "*" : undefined}
+                      age={performance.now() - (started() ?? performance.now())}
+                    />
+                  </box>
                 </Show>
-
-                <box
-                  flexDirection="row"
-                  gap={1}
-                  flexGrow={1}
-                  flexShrink={1}
-                  minWidth={0}
-                  paddingLeft={statuslineMainAvailable() >= 2 && !props.mono ? 1 : 0}
-                  paddingRight={statuslineMainAvailable() >= (props.mono ? 1 : 2) ? 1 : 0}
-                  backgroundColor="transparent"
-                  overflow="hidden"
-                >
-                  <Show
-                    when={
-                      footerDetails() &&
-                      busy() &&
-                      !exiting() &&
-                      statuslineMainAvailable() >=
-                        (props.mono ? 1 : 2) + stringWidth(spin().frames[0] ?? "") + 1 + stringWidth(statuslineText())
-                    }
-                  >
-                    <box flexShrink={0}>
-                      <spinner color={spin().color} frames={spin().frames} interval={40} />
-                    </box>
-                  </Show>
-
-                  <text fg={statusColor()} wrapMode="none" truncate flexGrow={1} flexShrink={1}>
-                    <Show when={busy() && !exiting() && (footerDetails() || armed())} fallback={statusText()}>
-                      <Show when={interruptLabel()}>
-                        {(label) => <span style={{ fg: armed() ? statusColor() : theme().muted }}>{label()} </span>}
-                      </Show>
-                      {statusText()}
-                    </Show>
+                <Show when={statusSections().length > 0}>
+                  <text fg={statusColor()} wrapMode="word" width={statusWidth()} flexShrink={0} height={statusRows()}>
+                    <For each={statusSections()}>
+                      {(section, index) => (
+                        <>
+                          <Show when={index() > 0}>
+                            <span style={{ fg: theme().muted }}>{props.mono ? " - " : " · "}</span>
+                          </Show>
+                          <For each={section.parts}>
+                            {(part) => <span style={{ fg: statusColors()[part.tone] }}>{part.text}</span>}
+                          </For>
+                        </>
+                      )}
+                    </For>
                   </text>
-                </box>
-
-                <Show when={statuslineLayout().showUsage && activityMeta()}>
-                  {(usage) => (
-                    <box paddingRight={1} backgroundColor="transparent" flexShrink={0}>
-                      <text fg={theme().muted} wrapMode="none">
-                        {usage()}
-                      </text>
-                    </box>
-                  )}
-                </Show>
-
-                <Show when={statuslineLayout().showAgent && agentStatus()}>
-                  {(agent) => (
-                    <box paddingRight={1} backgroundColor="transparent" flexShrink={0}>
-                      <text fg={theme().text} wrapMode="none">
-                        <Show when={statuslineLayout().showUsage}>{sectionSeparator()}</Show>
-                        {agent()}
-                      </text>
-                    </box>
-                  )}
-                </Show>
-
-                <Show when={statuslineLayout().showModel && modelStatus()}>
-                  {(info) => (
-                    <box paddingRight={1} backgroundColor="transparent" flexShrink={0}>
-                      <text fg={theme().text} wrapMode="none">
-                        <Show when={statuslineLayout().showUsage || statuslineLayout().showAgent}>
-                          {sectionSeparator()}
-                        </Show>
-                        {info().model}
-                        <Show when={statuslineLayout().showVariant && info().variant}>
-                          {(variant) => <span style={{ fg: theme().warning, bold: true }}> {variant()}</span>}
-                        </Show>
-                      </text>
-                    </box>
-                  )}
-                </Show>
-
-                <For each={contextHints()}>
-                  {(hint, index) => (
-                    <box paddingRight={1} backgroundColor="transparent" flexShrink={0}>
-                      <text fg={theme().text} wrapMode="none">
-                        <Show when={index() > 0 || (hasStatuslineInfo() && index() === 0)}>{sectionSeparator()}</Show>
-                        <span style={{ fg: theme().text }}>{hint.key}</span>{" "}
-                        <span style={{ fg: theme().muted }}>{hint.label}</span>
-                      </text>
-                    </box>
-                  )}
-                </For>
-                <Show when={commandHint()}>
-                  {(hint) => (
-                    <box backgroundColor="transparent" flexShrink={0}>
-                      <text fg={theme().text} wrapMode="none">
-                        <Show when={hasStatuslineInfo() || contextHints().length > 0}>{sectionSeparator()}</Show>
-                        <span style={{ fg: theme().text }}>{hint().key}</span>{" "}
-                        <span style={{ fg: theme().muted }}>{hint().label}</span>
-                      </text>
-                    </box>
-                  )}
                 </Show>
               </box>
             </Show>
@@ -1061,7 +1007,7 @@ export function RunFooterView(props: RunFooterViewProps) {
           flexGrow={1}
           flexShrink={1}
           border={["left"]}
-          borderColor={theme().highlight}
+          borderColor={theme().border}
           customBorderChars={{
             ...EMPTY_BORDER,
             vertical: props.mono ? "|" : "┃",

packages/tui/src/mini/footer.width.ts

@@ -1,54 +1,120 @@
-export function footerWidthPolicy(width: number) {
-  return {
-    dialog: {
-      narrow: width < 80,
-    },
-  }
+import { Locale } from "../util/locale"
+import { stringWidth } from "../util/string-width"
+
+type FooterAction = {
+  key: string
+  label: string
+  expanded?: string
 }
 
-const USAGE_HEADROOM = 8
+export type FooterStatuslineGroup = {
+  id:
+    | "spinner"
+    | "status"
+    | "escape"
+    | "queued"
+    | "subagents"
+    | "background"
+    | "agent"
+    | "model"
+    | "context"
+    | "cost"
+    | "provider"
+    | "menu"
+  parts: Array<{ text: string; tone: "text" | "muted" | "agent" | "status" }>
+}
 
 export function footerStatuslinePolicy(input: {
   width: number
-  mainWidth: number
-  commandWidth?: number
-  agentWidth?: number
-  contextWidths: number[]
-  modelWidth?: number
-  variantWidth?: number
-  usageWidth?: number
+  mono?: boolean
+  status?: { text: string; expanded?: string }
+  escape?: FooterAction
+  work: Array<FooterAction & { id: "queued" | "subagents" | "background" }>
+  model?: { name: string; variant?: string }
+  agent?: string
+  context?: { compact: string; full: string }
+  cost?: string
+  provider?: string
+  menu?: FooterAction
+  spinner?: string
 }) {
-  let remaining = input.width - input.mainWidth - (input.commandWidth ?? 0)
-  let hasSection = input.commandWidth !== undefined
-  const include = (width: number | undefined, headroom = 0) => {
-    if (width === undefined) return false
-    const required = width + (hasSection ? 3 : 1)
-    if (remaining < required + headroom) return false
-    remaining -= required
-    hasSection = true
-    return true
+  const group = (
+    id: FooterStatuslineGroup["id"],
+    text: string,
+    tone: FooterStatuslineGroup["parts"][number]["tone"] = "muted",
+  ): FooterStatuslineGroup => ({ id, parts: [{ text, tone }] })
+  const action = (id: FooterStatuslineGroup["id"], value: FooterAction, expanded = false): FooterStatuslineGroup => ({
+    id,
+    parts: [
+      { text: value.key, tone: "text" },
+      { text: ` ${expanded ? (value.expanded ?? value.label) : value.label}`, tone: "muted" },
+    ],
+  })
+  const identity = (cells: number) => {
+    const name = input.model!.name
+    const ellipsis = input.mono ? "..." : "\u2026"
+    const text =
+      stringWidth(name) > cells + stringWidth(ellipsis) ? Locale.takeWidth(name, cells).trimEnd() + ellipsis : name
+    return group("model", text + (input.model!.variant ? ` [${input.model!.variant}]` : ""), "text")
   }
+  const selected = new Map<FooterStatuslineGroup["id"], FooterStatuslineGroup>()
+  if (input.spinner) selected.set("spinner", group("spinner", input.spinner, "text"))
+  if (input.status?.text) selected.set("status", group("status", input.status.text, "status"))
+  if (input.escape) selected.set("escape", action("escape", input.escape))
 
-  const showModel = include(input.modelWidth)
-  const showAgent = include(input.agentWidth)
-  const hiddenContext = input.contextWidths.findIndex((width) => !include(width))
-  const contextCount = hiddenContext === -1 ? input.contextWidths.length : hiddenContext
-  const contextComplete = contextCount === input.contextWidths.length
-  const variantWidth = input.variantWidth
-  const showVariant = showModel && contextComplete && variantWidth !== undefined && remaining >= variantWidth
-  if (showVariant) remaining -= variantWidth
-  const showUsage =
-    (showModel || input.modelWidth === undefined) &&
-    (showAgent || input.agentWidth === undefined) &&
-    contextComplete &&
-    (showVariant || input.variantWidth === undefined) &&
-    include(input.usageWidth, USAGE_HEADROOM)
-
-  return {
-    showAgent,
-    contextCount,
-    showModel,
-    showVariant,
-    showUsage,
+  const place = () => {
+    const order: FooterStatuslineGroup["id"][] = [
+      "spinner",
+      "status",
+      "escape",
+      "queued",
+      "subagents",
+      "background",
+      "agent",
+      "model",
+      "context",
+      "cost",
+      "provider",
+      "menu",
+    ]
+    const groups = order.flatMap((id) => selected.get(id) ?? [])
+    const separator = input.mono ? " - " : " \u00b7 "
+    return {
+      groups,
+      text: groups
+        .map(
+          (item, index) =>
+            (index === 0 ? "" : groups[index - 1]!.id === "spinner" ? " " : separator) +
+            item.parts.map((part) => part.text).join(""),
+        )
+        .join(""),
+    }
   }
+  let layout = place()
+  // Required controls may wrap. Optional information never crowds that fallback.
+  if (stringWidth(layout.text) > input.width || layout.text.includes("\n")) return layout
+
+  // Each stage retains earlier information. Stop at the first non-fitting stage:
+  // backfilling shorter, lower-priority groups would make resizing unstable.
+  const stages = [
+    ...input.work.map((item) => action(item.id, item)),
+    ...(input.model ? [identity(8)] : []),
+    ...(input.agent ? [group("agent", input.agent, "agent")] : []),
+    ...(input.context ? [group("context", input.context.compact)] : []),
+    ...(input.model ? [identity(24)] : []),
+    ...(input.context ? [group("context", input.context.full)] : []),
+    ...(input.cost ? [group("cost", input.cost)] : []),
+    ...(input.provider ? [group("provider", input.provider)] : []),
+    ...(input.menu ? [action("menu", input.menu)] : []),
+    ...(input.model ? [identity(Infinity)] : []),
+    ...input.work.filter((item) => item.expanded).map((item) => action(item.id, item, true)),
+    ...(input.status?.expanded ? [group("status", input.status.expanded, "status")] : []),
+  ]
+  for (const stage of stages) {
+    selected.set(stage.id, stage)
+    const next = place()
+    if (stringWidth(next.text) > input.width || next.text.includes("\n")) break
+    layout = next
+  }
+  return layout
 }

packages/tui/src/mini/prompt.shared.ts

@@ -58,7 +58,9 @@ export function isCompactCommand(input: string): boolean {
 }
 
 export function createPromptHistory(items?: RunPrompt[]): PromptHistoryState {
-  const list = (items ?? []).filter((item) => item.text.trim().length > 0).map(promptCopy)
+  const list = (items ?? [])
+    .filter((item) => item.text.trim().length > 0 || item.parts.some((part) => part.type === "file"))
+    .map(promptCopy)
   const next: RunPrompt[] = []
   for (const item of list) {
     if (next.length > 0 && promptSame(next[next.length - 1], item)) {
@@ -76,7 +78,7 @@ export function createPromptHistory(items?: RunPrompt[]): PromptHistoryState {
 }
 
 export function pushPromptHistory(state: PromptHistoryState, prompt: RunPrompt): PromptHistoryState {
-  if (!prompt.text.trim()) {
+  if (!prompt.text.trim() && !prompt.parts.some((part) => part.type === "file")) {
     return state
   }
 

packages/tui/src/mini/runtime.boot.ts

@@ -91,6 +91,7 @@ export function resolveMiniSettings(config?: { mini?: Partial<MiniSettings> }):
     turn_summary: config?.mini?.turn_summary ?? "show",
     footer: config?.mini?.footer ?? "show",
     splash: config?.mini?.splash ?? "show",
+    work_spinner: config?.mini?.work_spinner ?? "block-soft-slide",
     mono: config?.mini?.mono ?? false,
   }
 }

packages/tui/src/mini/runtime.lifecycle.ts

@@ -9,10 +9,16 @@
 // Also wires SIGINT so Ctrl-c clears a live prompt draft first, then falls
 // back to the usual two-press exit sequence through RunFooter.requestExit().
 import path from "path"
-import { CliRenderEvents, createCliRenderer, type CliRenderer, type ScrollbackWriter } from "@opentui/core"
+import {
+  CliRenderEvents,
+  buildKittyKeyboardFlags,
+  createCliRenderer,
+  type CliRenderer,
+  type ScrollbackWriter,
+} from "@opentui/core"
 import { isFallbackTitle } from "@opencode-ai/util/session-title-fallback"
 import { monoSnapshot } from "./mono"
-import { entrySplash, exitSplash, splashMeta } from "./splash"
+import { entrySplash, exitSplash } from "./splash"
 import { resolveRunTheme } from "./theme"
 import type {
   FooterApi,
@@ -81,7 +87,7 @@ export type Lifecycle = {
   onResize(fn: () => void): () => void
   refreshTheme(): void
   setTitle(title?: string): void
-  resetForReplay(input: { sessionTitle?: string; sessionID?: string; history: RunPrompt[] }): Promise<void>
+  resetForReplay(): Promise<void>
   close(input: { showExit: boolean; sessionTitle?: string; sessionID?: string; history?: RunPrompt[] }): Promise<void>
 }
 
@@ -106,19 +112,9 @@ function shutdown(renderer: CliRenderer): void {
   }
 }
 
-function splashInfo(title: string | undefined, history: RunPrompt[]) {
-  if (title && !isFallbackTitle(title)) {
-    return {
-      title,
-      showSession: true,
-    }
-  }
-
-  const next = history.find((item) => item.text.trim().length > 0)
-  return {
-    title: next?.text ?? title,
-    showSession: !!next,
-  }
+function splashTitle(title: string | undefined, history: RunPrompt[]) {
+  if (title && !isFallbackTitle(title)) return title
+  return history.find((item) => item.text.trim().length > 0)?.text ?? title
 }
 
 function directoryLabel(directory: string, home: string) {
@@ -188,27 +184,25 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
     entry: false,
     exit: false,
   }
-  const splash = splashInfo(input.sessionTitle, input.history)
-  const meta = splashMeta({
-    title: splash.title,
-    session_id: input.sessionID,
-    mono,
-  })
-  const wrote = queueSplash(
+  const startup =
+    miniSettings.splash === "show" && !mono && tuiConfig.animations !== false
+      ? { version: input.host.version, detail: directoryLabel(input.getDirectory(), input.host.paths.home) }
+      : undefined
+  queueSplash(
     renderer,
     state,
     "entry",
-    miniSettings.splash === "show"
+    miniSettings.splash === "show" && !startup
       ? entrySplash({
-          ...meta,
+          version: input.host.version,
           theme: theme.splash,
-          showSession: splash.showSession,
           detail: directoryLabel(input.getDirectory(), input.host.paths.home),
           mono,
         })
       : undefined,
   )
   await renderer.idle().catch(() => {})
+  if (mono) renderer.off(CliRenderEvents.EXTERNAL_OUTPUT, monoSnapshot)
 
   const { RunFooter } = await footerTask
   let closed = false
@@ -227,15 +221,22 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
     first: input.first,
     history: input.history,
     theme,
-    mono,
     // The transcript always starts one row below the terminal's prior output,
     // even when the entry splash itself is hidden.
-    wrote: wrote || miniSettings.splash === "hide",
+    wrote: true,
+    startup,
     tuiConfig,
     miniSettings: {
       current: miniSettings,
       update: input.onMiniSettingChange,
     },
+    onMonoChange: (mono) => {
+      if (mono) {
+        renderer.disableKittyKeyboard()
+        return
+      }
+      renderer.enableKittyKeyboard(buildKittyKeyboardFlags({ events: input.host.platform === "win32" }))
+    },
     onPermissionReply: input.onPermissionReply,
     onFormReply: input.onFormReply,
     onFormCancel: input.onFormCancel,
@@ -311,23 +312,20 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
     let wroteExit = false
 
     try {
+      footer.finishStartup()
       await footer.idle().catch(() => {})
 
       if (!renderer.isDestroyed && next.showExit && footer.currentMiniSettings().splash === "show") {
         const sessionID = next.sessionID || input.getSessionID?.() || input.sessionID
-        const splash = splashInfo(next.sessionTitle ?? input.sessionTitle, next.history ?? input.history)
         wroteExit = queueSplash(
           renderer,
           state,
           "exit",
           exitSplash({
-            ...splashMeta({
-              title: splash.title,
-              session_id: sessionID,
-              mono,
-            }),
+            title: splashTitle(next.sessionTitle ?? input.sessionTitle, next.history ?? input.history),
+            session_id: sessionID,
             theme: footer.currentTheme().splash,
-            mono,
+            mono: footer.currentMiniSettings().mono,
           }),
         )
         await renderer.idle().catch(() => {})
@@ -337,7 +335,6 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
       await footer.idle().catch(() => {})
       footer.destroy()
       if (input.host.platform === "linux") renderer.setTerminalTitle("")
-      if (mono) renderer.off(CliRenderEvents.EXTERNAL_OUTPUT, monoSnapshot)
       shutdown(renderer)
       if (!wroteExit) {
         input.host.stdout.write("\n")
@@ -366,7 +363,7 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
       renderer.on(CliRenderEvents.RESIZE, resize)
       return () => renderer.off(CliRenderEvents.RESIZE, resize)
     },
-    async resetForReplay(next) {
+    async resetForReplay() {
       if (closed || renderer.isDestroyed || footer.isClosed) {
         throw new Error("runtime closed")
       }
@@ -378,18 +375,12 @@ export async function createRuntimeLifecycle(input: LifecycleInput): Promise<Lif
 
       footer.resetForReplay(true)
       renderer.resetSplitFooterForReplay({ clearSavedLines: true })
-      const splash = splashInfo(next.sessionTitle ?? input.sessionTitle, next.history)
       renderer.writeToScrollback(
         entrySplash({
-          ...splashMeta({
-            title: splash.title,
-            session_id: next.sessionID ?? input.getSessionID?.() ?? input.sessionID,
-            mono,
-          }),
+          version: input.host.version,
           theme: footer.currentTheme().splash,
-          showSession: splash.showSession,
           detail: directoryLabel(input.getDirectory(), input.host.paths.home),
-          mono,
+          mono: footer.currentMiniSettings().mono,
         }),
       )
       renderer.requestRender()

packages/tui/src/mini/runtime.queue.ts

@@ -172,7 +172,7 @@ export async function runPromptQueue(input: QueueInput): Promise<void> {
               break
             }
 
-            if (sent.mode !== "shell") {
+            if (sent.mode !== "shell" && sent.text.trim()) {
               const commit = {
                 kind: "user",
                 text: sent.text,
@@ -252,7 +252,10 @@ export async function runPromptQueue(input: QueueInput): Promise<void> {
   }
 
   const submit = (prompt: RunPrompt) => {
-    if (!prompt.text.trim() || state.closed) {
+    if (
+      state.closed ||
+      (!prompt.text.trim() && (prompt.mode === "shell" || !prompt.parts.some((part) => part.type === "file")))
+    ) {
       return
     }
 

packages/tui/src/mini/runtime.ts

@@ -366,6 +366,7 @@ async function runInteractiveRuntime(input: RunRuntimeInput, deps: RunRuntimeDep
       }
     },
     onInterrupt: () => {
+      if (state.demo?.interrupt()) return true
       if (!state.sessionID) {
         return false
       }
@@ -411,7 +412,10 @@ async function runInteractiveRuntime(input: RunRuntimeInput, deps: RunRuntimeDep
   const thinking = () => input.thinking ?? configState.current.thinking === "show"
   const footer = shell.footer
   const firstPaint = footer.idle().catch(() => {})
-  const offRuntimeClose = footer.onClose(() => runtimeController.abort())
+  const offRuntimeClose = footer.onClose(() => {
+    state.demo?.interrupt()
+    runtimeController.abort()
+  })
   let clientGeneration = 0
   let clientController = new AbortController()
   let modelAttempt: AbortController | undefined
@@ -480,11 +484,7 @@ async function runInteractiveRuntime(input: RunRuntimeInput, deps: RunRuntimeDep
         footer.event({ type: "history", history: resumed.history })
         footer.event({ type: "first", first: resumed.first })
         if (footer.isClosed || runtimeController.signal.aborted) return
-        await shell.resetForReplay({
-          sessionTitle: state.sessionTitle,
-          sessionID: state.sessionID,
-          history: state.history,
-        })
+        await shell.resetForReplay()
       })
       .catch((error) => {
         if (footer.isClosed || runtimeController.signal.aborted) return
@@ -848,12 +848,7 @@ async function runInteractiveRuntime(input: RunRuntimeInput, deps: RunRuntimeDep
         .then((item) =>
           item.handle.replayOnResize({
             localRows: () => state.localRows,
-            reset: () =>
-              shell.resetForReplay({
-                sessionTitle: state.sessionTitle,
-                sessionID: state.sessionID,
-                history: state.history,
-              }),
+            reset: () => shell.resetForReplay(),
           }),
         )
         .catch(() => {})
@@ -986,7 +981,7 @@ async function runInteractiveRuntime(input: RunRuntimeInput, deps: RunRuntimeDep
                 type: "stream.patch",
                 patch: {
                   phase: "idle",
-                  usage: "",
+                  usage: undefined,
                   first: true,
                 },
               })

packages/tui/src/mini/scrollback.shared.ts

@@ -32,7 +32,6 @@ export function entryLook(commit: StreamCommit, theme: RunEntryTheme): { fg: Col
   if (commit.phase === "final") {
     return {
       fg: theme.system.body,
-      attrs: TextAttributes.DIM,
     }
   }
 
@@ -49,7 +48,6 @@ export function entryLook(commit: StreamCommit, theme: RunEntryTheme): { fg: Col
   if (commit.kind === "reasoning") {
     return {
       fg: theme.reasoning.body,
-      attrs: TextAttributes.DIM,
     }
   }
 

packages/tui/src/mini/scrollback.surface.ts

@@ -1,11 +1,11 @@
 // Retained streaming append logic for direct-mode scrollback.
 //
-// Static entries are rendered through `scrollback.writer.tsx`. This file only
-// keeps the retained-surface machinery needed for streaming assistant,
-// reasoning, and tool progress entries that need stable markdown/code layout
-// while content is still arriving.
+// Static text entries are rendered through `scrollback.writer.tsx`. Retained
+// surfaces keep streaming markdown/code layout stable and wait for image loads
+// before their snapshots enter scrollback.
 import {
   CodeRenderable,
+  ImageRenderable,
   MarkdownRenderable,
   TextRenderable,
   getTreeSitterClient,
@@ -87,10 +87,13 @@ export class RunScrollbackStream {
   private tail: StreamCommit | undefined
   private rendered: StreamCommit | undefined
   private active: ActiveEntry | undefined
+  private imageSurface: ScrollbackSurface | undefined
   private treeSitterClient: TreeSitterClient | undefined
   private wrote: boolean
   private shellOutput: () => boolean
   private mono: boolean
+  private imagePreview: boolean
+  private destroyed = false
   private pendingThemes: RunTheme[] = []
 
   constructor(
@@ -102,17 +105,34 @@ export class RunScrollbackStream {
       onThemeRelease?: (theme: RunTheme) => void
       shellOutput?: () => boolean
       mono?: boolean
+      imagePreview?: boolean
     } = {},
   ) {
     this.treeSitterClient = options.treeSitterClient
     this.wrote = options.wrote ?? false
     this.shellOutput = options.shellOutput ?? (() => true)
     this.mono = options.mono ?? false
+    this.imagePreview = options.imagePreview ?? false
     this.onThemeRelease = options.onThemeRelease
   }
 
   private onThemeRelease: ((theme: RunTheme) => void) | undefined
 
+  public async setMono(mono: boolean): Promise<void> {
+    if (this.mono === mono) return
+    const active = this.active
+    if (active?.body.type !== "markdown") await this.complete()
+    this.mono = mono
+    if (active?.body.type !== "markdown") return
+
+    // Rebuild the Markdown tree, keeping its source and printed block boundary.
+    // Mono hooks are one-way, and ending the entry would lose open fence/list context.
+    const next = this.createEntry(active.commit, active.body)
+    this.active = { ...active, surface: next.surface, renderable: next.renderable }
+    active.surface.destroy()
+    this.releasePendingThemes()
+  }
+
   private releasePendingThemes(): void {
     if (this.pendingThemes.length === 0) {
       return
@@ -348,11 +368,77 @@ export class RunScrollbackStream {
     }
   }
 
+  private async writeImage(commit: StreamCommit): Promise<void> {
+    const surface = this.renderer.createScrollbackSurface(entryFlags(commit))
+    this.imageSurface = surface
+
+    try {
+      const image = new ImageRenderable(surface.renderContext, {
+        source: commit.image,
+        fit: "fit",
+        visible: false,
+        alignSelf: "flex-start",
+        flexShrink: 0,
+      })
+      surface.root.add(image)
+      // settle() waits for code highlighting, not image decoding.
+      await image.loadPromise
+      if (surface.isDestroyed) return
+
+      const body = entryBody(commit, { mono: this.mono })
+      if (body.type !== "text") return
+      const style = entryLook(commit, this.theme.entry)
+      const caption = new TextRenderable(surface.renderContext, {
+        content: body.content + (image.image ? "" : "\nNo preview"),
+        width: "100%",
+        wrapMode: "word",
+        fg: style.fg,
+        attributes: style.attrs,
+        flexShrink: 0,
+      })
+      surface.root.add(caption, 0)
+      surface.render()
+
+      if (image.image && !this.mono) {
+        const resolution = this.renderer.resolution
+        const fitted = image.getFittedSize(
+          Math.min(
+            surface.width,
+            resolution?.width
+              ? Math.max(1, Math.floor((image.image.width * this.renderer.terminalWidth) / resolution.width))
+              : Infinity,
+          ),
+          Math.min(
+            Math.max(0, this.renderer.terminalHeight - this.renderer.height - caption.height),
+            resolution?.height
+              ? Math.max(1, Math.floor((image.image.height * this.renderer.terminalHeight) / resolution.height))
+              : Infinity,
+          ),
+          image.cellAspectRatio,
+        )
+        // fit centers within its rectangle, so the rectangle itself must be fitted.
+        image.width = fitted.width
+        image.height = fitted.height
+        image.visible = fitted.width > 0 && fitted.height > 0
+        surface.render()
+      }
+
+      this.writeSpacer(separatorRows(this.rendered, commit, body) || (!this.rendered && this.wrote ? 1 : 0))
+      surface.commitRows(0, surface.height, { trailingNewline: entryFlags(commit).trailingNewline })
+      this.markRendered(commit)
+    } finally {
+      surface.destroy()
+      this.imageSurface = undefined
+    }
+  }
+
   public async append(commit: StreamCommit): Promise<void> {
+    if (this.destroyed || this.renderer.isDestroyed) return
     const same = sameEntryGroup(this.tail, commit)
-    if (!same) {
+    if (!same || commit.image) {
       this.markRendered(await this.finishActive(false))
     }
+    if (this.destroyed || this.renderer.isDestroyed) return
 
     if (commit.summary) {
       this.writeSpacer(1)
@@ -362,6 +448,12 @@ export class RunScrollbackStream {
       return
     }
 
+    if (commit.image && this.imagePreview && !this.mono) {
+      await this.writeImage(commit)
+      this.tail = commit
+      return
+    }
+
     const body = entryBody(commit, { shellOutput: this.shellOutput(), mono: this.mono })
     if (body.type === "none") {
       if (entryDone(commit)) {
@@ -426,6 +518,9 @@ export class RunScrollbackStream {
   }
 
   public destroy(): void {
+    this.destroyed = true
+    this.imageSurface?.destroy()
+    this.imageSurface = undefined
     this.resetActive()
     this.releasePendingThemes()
   }

packages/tui/src/mini/scrollback.writer.tsx

@@ -6,7 +6,7 @@ import {
   type ScrollbackRenderContext,
   type ScrollbackWriter,
 } from "@opentui/core"
-import { Match, Switch, createMemo } from "solid-js"
+import { For, Match, Switch, createMemo } from "solid-js"
 import { entryBody, entryFlags } from "./entry.body"
 import { monoMarkdownRenderable, monoMarkdownTableOptions } from "./mono"
 import { entryColor, entryLook, entrySyntax } from "./scrollback.shared"
@@ -39,6 +39,7 @@ export function sameEntryGroup(left: StreamCommit | undefined, right: StreamComm
 }
 
 function entryLayout(commit: StreamCommit, body: RunEntryBody = entryBody(commit)): EntryLayout {
+  if (commit.image) return "block"
   if (commit.kind === "tool") {
     if (body.type === "structured" || body.type === "markdown") {
       return "block"
@@ -253,17 +254,22 @@ export function RunEntryContent(props: {
         </box>
       </Match>
       <Match when={markdown()}>
-        <markdown
-          ref={(renderable: MarkdownRenderable) => {
-            if (props.opts?.mono) monoMarkdownRenderable(renderable)
-          }}
-          width="100%"
-          syntaxStyle={syntax()}
-          streaming={streaming()}
-          content={markdown()!.content}
-          fg={color()}
-          tableOptions={props.opts?.mono ? monoMarkdownTableOptions : { widthMode: "content" }}
-        />
+        {/* Mono hooks mutate renderables, so toggling needs a fresh Markdown leaf. */}
+        <For each={[props.opts?.mono === true]}>
+          {(mono) => (
+            <markdown
+              ref={(renderable: MarkdownRenderable) => {
+                if (mono) monoMarkdownRenderable(renderable)
+              }}
+              width="100%"
+              syntaxStyle={syntax()}
+              streaming={streaming()}
+              content={markdown()!.content}
+              fg={color()}
+              tableOptions={mono ? monoMarkdownTableOptions : { widthMode: "content" }}
+            />
+          )}
+        </For>
       </Match>
     </Switch>
   )

packages/tui/src/mini/session.shared.ts

@@ -1,4 +1,5 @@
 import type { SessionMessageInfo, SessionMessageUser } from "@opencode-ai/client/promise"
+import { projectedPromptInput } from "../prompt/codec"
 import { promptCopy, promptSame } from "./prompt.shared"
 import type { RunInput, RunPrompt } from "./types"
 
@@ -20,30 +21,39 @@ export type RunSession = {
   variant?: string
 }
 
-function messagePrompt(message: SessionMessageUser): RunPrompt {
+export function messagePrompt(message: Pick<SessionMessageUser, "text" | "files" | "agents" | "skills">): RunPrompt {
+  const input = projectedPromptInput(message)
   return {
-    text: message.text,
+    text: input.text,
     parts: [
-      ...(message.files ?? []).map((file) => ({
+      ...(input.files ?? []).map((file, index) => ({
         type: "file" as const,
-        url: file.source.type === "uri" ? file.source.uri : `data:${file.mime};base64,${file.data}`,
-        mime: file.mime,
+        url: file.uri,
+        mime: message.files?.[index]?.mime,
         filename: file.name,
+        ...(file.description === undefined ? {} : { description: file.description }),
         source: file.mention
           ? {
               type: "file",
-              path: file.name ?? (file.source.type === "uri" ? file.source.uri : "inline attachment"),
+              path: file.name ?? (file.uri.startsWith("data:") ? "inline attachment" : file.uri),
               text: { start: file.mention.start, end: file.mention.end, value: file.mention.text },
             }
           : undefined,
       })),
-      ...(message.agents ?? []).map((agent) => ({
+      ...(input.agents ?? []).map((agent) => ({
         type: "agent" as const,
         name: agent.name,
         source: agent.mention
           ? { start: agent.mention.start, end: agent.mention.end, value: agent.mention.text }
           : undefined,
       })),
+      ...(input.skills ?? []).map((skill) => ({
+        type: "skill" as const,
+        id: skill.id,
+        source: skill.mention
+          ? { start: skill.mention.start, end: skill.mention.end, value: skill.mention.text }
+          : undefined,
+      })),
     ],
   }
 }
@@ -92,7 +102,7 @@ function requestOptions(signal?: AbortSignal): [] | [{ signal: AbortSignal }] {
 export function sessionHistory(session: RunSession, limit = LIMIT): RunPrompt[] {
   return session.turns
     .map((turn) => turn.prompt)
-    .filter((prompt) => prompt.text.trim())
+    .filter((prompt) => prompt.text.trim() || prompt.parts.some((part) => part.type === "file"))
     .filter((prompt, index, prompts) => index === 0 || !promptSame(prompts[index - 1], prompt))
     .map(promptCopy)
     .slice(-limit)

packages/tui/src/mini/splash.ts

@@ -1,25 +1,22 @@
 // Entry and exit splash banners for direct interactive mode scrollback.
 //
-// Renders the full opencode entry logo and a compact [O] exit badge, plus
-// session metadata and the resume command. These are scrollback snapshots, so
-// they become immutable terminal history once committed.
-//
-// Both variants use a cell-based renderer. cells() classifies each character
-// in the source template as text, full-block, half-block-mix, or
-// half-block-top, and draw() renders it with foreground/background shadow
-// colors from the theme.
+// The entry header is a single flex row; the exit banner retains its cell-based
+// logo and resume information. Both become immutable terminal history.
 import {
   BoxRenderable,
   type ColorInput,
   TextAttributes,
   TextRenderable,
+  StyledText,
+  fg,
   type ScrollbackRenderContext,
   type ScrollbackSnapshot,
   type ScrollbackWriter,
 } from "@opentui/core"
 import { Locale } from "../util/locale"
+import { stringWidth } from "../util/string-width"
 import { go } from "../logo"
-import { monoTruncate, monoTruncateMiddle } from "./mono"
+import { monoTruncate } from "./mono"
 import type { RunSplashTheme } from "./theme"
 
 const SPLASH_TITLE_LIMIT = 50
@@ -34,7 +31,6 @@ type SplashInput = {
 type SplashWriterInput = SplashInput & {
   theme: RunSplashTheme
   showSession?: boolean
-  detail?: string
 }
 
 export type SplashMeta = {
@@ -173,52 +169,23 @@ function draw(
   }
 }
 
-function build(input: SplashWriterInput, kind: "entry" | "exit", ctx: ScrollbackRenderContext): ScrollbackSnapshot {
+function buildExit(input: SplashWriterInput, ctx: ScrollbackRenderContext): ScrollbackSnapshot {
   const width = Math.max(1, ctx.width)
   const meta = splashMeta(input)
   const lines: Array<{ left: number; top: number; text: string; fg: ColorInput; bg?: ColorInput; attrs?: number }> = []
   const left = input.theme.left
   const right = input.theme.right
   const leftShadow = input.theme.leftShadow
-  let height = 1
-
-  if (kind === "entry") {
-    const mark = input.mono ? ["[O]"] : go.right.slice(1)
-    const top = 1
-    const body_left = (mark[0]?.length ?? 0) + 2
-
-    for (let i = 0; i < mark.length; i += 1) {
-      draw(lines, mark[i] ?? "", {
-        left: 0,
-        top: top + i,
-        fg: left,
-        shadow: leftShadow,
-      })
-    }
-
-    push(lines, body_left, top, "OpenCode", right, undefined, TextAttributes.BOLD)
-    if (input.detail) {
-      push(
-        lines,
-        body_left,
-        top + 1,
-        input.mono
-          ? monoTruncateMiddle(input.detail, Math.max(1, width - body_left), true)
-          : Locale.truncateMiddle(input.detail, Math.max(1, width - body_left)),
-        left,
-        undefined,
-      )
-    }
-    height = top + Math.max(mark.length, input.detail ? 2 : 1)
-  }
-
-  if (kind === "exit") {
-    const mark = input.mono ? ["[O]"] : go.right.slice(1)
-    const top = 1
-    const body_left = (mark[0]?.length ?? 0) + 2
-    const session = "Session  "
-    const label = "Continue "
+  const mark = input.mono ? ["[O]"] : go.right.slice(1)
+  const top = 1
+  const body_left = (mark[0]?.length ?? 0) + 2
+  const session = "Session  "
+  const label = "Continue "
+  const command = `opencode mini -s ${meta.session_id}`
+  const wide = body_left + stringWidth(label + command) <= width
+  const commandHeight = wide ? 1 : Math.ceil(stringWidth(command) / width)
 
+  if (wide) {
     for (let i = 0; i < mark.length; i += 1) {
       draw(lines, mark[i] ?? "", {
         left: 0,
@@ -229,23 +196,13 @@ function build(input: SplashWriterInput, kind: "entry" | "exit", ctx: Scrollback
     }
 
     if (input.showSession !== false) {
-      push(lines, body_left, top, session, left, undefined, TextAttributes.DIM)
+      push(lines, body_left, top, session, left)
       push(lines, body_left + session.length, top, meta.title, right, undefined, TextAttributes.BOLD)
     }
-
-    push(lines, body_left, top + 1, label, left, undefined, TextAttributes.DIM)
-    push(
-      lines,
-      body_left + label.length,
-      top + 1,
-      `opencode mini -s ${meta.session_id}`,
-      right,
-      undefined,
-      TextAttributes.BOLD,
-    )
-    height = top + Math.max(mark.length, 2)
+    push(lines, body_left, top + 1, label, left)
   }
 
+  const height = top + (wide ? Math.max(mark.length, 2) : commandHeight)
   const root = new BoxRenderable(ctx.renderContext, {
     position: "absolute",
     left: 0,
@@ -257,6 +214,19 @@ function build(input: SplashWriterInput, kind: "entry" | "exit", ctx: Scrollback
   for (const line of lines) {
     write(root, ctx, line)
   }
+  root.add(
+    new TextRenderable(ctx.renderContext, {
+      position: "absolute",
+      left: wide ? body_left + label.length : 0,
+      top: wide ? top + 1 : top,
+      width: wide ? width - body_left - label.length : width,
+      height: commandHeight,
+      wrapMode: "char",
+      content: command,
+      fg: right,
+      attributes: TextAttributes.BOLD,
+    }),
+  )
 
   return {
     root,
@@ -275,10 +245,63 @@ export function splashMeta(input: SplashInput): SplashMeta {
   }
 }
 
-export function entrySplash(input: SplashWriterInput): ScrollbackWriter {
-  return (ctx) => build(input, "entry", ctx)
+export function entrySplash(input: {
+  version: string
+  detail?: string
+  mono?: boolean
+  theme: RunSplashTheme
+}): ScrollbackWriter {
+  return (ctx) => {
+    const width = Math.max(1, ctx.width)
+    const layout = entrySplashLayout({ ...input, width })
+    const root = new BoxRenderable(ctx.renderContext, {
+      width,
+      height: 2,
+      paddingTop: 1,
+      flexDirection: "row",
+      overflow: "hidden",
+    })
+    root.add(
+      new TextRenderable(ctx.renderContext, {
+        content: new StyledText([fg(input.theme.right)(layout.label), fg(input.theme.left)(layout.metadata)]),
+        width,
+        height: 1,
+        wrapMode: "none",
+      }),
+    )
+    return { root, width, height: 2, rowColumns: width, startOnNewLine: true, trailingNewline: false }
+  }
+}
+
+export function entrySplashLayout(input: { width: number; version: string; detail?: string; mono?: boolean }) {
+  const detail = input.detail ?? ""
+  const segments = detail.split(/[/\\]/).filter(Boolean)
+  const leaf = segments.at(-1) ?? detail
+  const separator = input.mono ? " - " : " · "
+  const ellipsis = input.mono ? "..." : "…"
+  const slash = detail.includes("\\") ? "\\" : "/"
+  const paths = segments
+    .slice(1)
+    .map((_, index) => ellipsis + slash + segments.slice(index + 1).join(slash))
+    .reverse()
+    .filter((path) => stringWidth(path) < stringWidth(detail))
+  let layout = { label: Locale.takeWidth("oc mini", input.width), version: "", path: "", metadata: "" }
+  const stages = [
+    { label: `${input.mono ? "[O]" : "▪"} oc mini` },
+    ...(leaf ? [{ path: leaf }] : []),
+    ...(input.version ? [{ version: input.version }] : []),
+    ...paths.concat(detail ? [detail] : []).map((path) => ({ path })),
+  ]
+  // Stop at the first non-fitting stage instead of backfilling lower-priority metadata.
+  for (const stage of stages) {
+    const next = { ...layout, ...stage }
+    const metadata = (next.version ? ` v${next.version}` : "") + (next.path ? separator + next.path : "")
+    if (stringWidth(next.label + metadata) > input.width) break
+    layout = { ...next, metadata }
+  }
+  return layout
 }
 
 export function exitSplash(input: SplashWriterInput): ScrollbackWriter {
-  return (ctx) => build(input, "exit", ctx)
+  return (ctx) => buildExit(input, ctx)
 }

packages/tui/src/mini/stream-v2.image.ts

@@ -0,0 +1,38 @@
+import type { SessionMessageAssistantTool, SessionMessageUser } from "@opencode-ai/client/promise"
+import { deduplicateVisibleImages } from "../prompt/attachment"
+import { toolDisplayContent } from "../util/tool-display"
+import type { StreamCommit } from "./types"
+
+export type ImageCommit = StreamCommit & { image: string; messageID: string; partID: string }
+
+export function userImageCommits(messageID: string, files: SessionMessageUser["files"]): ImageCommit[] {
+  return deduplicateVisibleImages(files ?? [])
+    .filter((file) => file.mime.startsWith("image/"))
+    .map((file, index) => ({
+      kind: "user",
+      source: "system",
+      text: file.name ?? file.mention?.text ?? `[Image ${index + 1}]`,
+      image: `data:${file.mime};base64,${file.data}`,
+      phase: "final",
+      messageID,
+      partID: `image:${index}`,
+    }))
+}
+
+export function toolImageCommits(part: SessionMessageAssistantTool, messageID: string): ImageCommit[] {
+  return toolDisplayContent(part.state)
+    .flatMap((content) =>
+      content.type === "file" && content.mime.startsWith("image/") && content.uri.startsWith("data:image/")
+        ? [content]
+        : [],
+    )
+    .map((content, index) => ({
+      kind: "tool",
+      source: "tool",
+      text: content.name ?? `[Image ${index + 1}]`,
+      image: content.uri,
+      phase: "final",
+      messageID,
+      partID: `prt_${part.id}:image:${index}`,
+    }))
+}

packages/tui/src/mini/stream-v2.subagent.ts

@@ -21,9 +21,11 @@ import type {
   PermissionRequest,
   SessionMessageAssistantTool,
   SessionMessageInfo,
+  SessionMessageUser,
 } from "@opencode-ai/client/promise"
 import { Locale } from "../util/locale"
 import { createFragmentReconciler, fragmentRef, type FragmentReconciler } from "./stream-v2.fragment"
+import { toolImageCommits, userImageCommits } from "./stream-v2.image"
 import type {
   FooterSubagentDetail,
   FooterSubagentState,
@@ -115,7 +117,7 @@ type ChildState = {
   permissions: MiniPermissionRequest[]
   forms: MiniFormRequest[]
   messageIDs: Set<string>
-  prompts: Map<string, string>
+  prompts: Map<string, Pick<SessionMessageUser, "text" | "files">>
   hydrated: boolean
   detailStale: boolean
   blockersHydrated: boolean
@@ -287,16 +289,19 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
     if (meta.background === true) child.background = true
   }
 
-  const userFrame = (child: ChildState, messageID: string, value: string) => {
+  const userFrame = (child: ChildState, messageID: string, prompt: Pick<SessionMessageUser, "text" | "files">) => {
     if (child.messageIDs.has(messageID)) return false
     child.messageIDs.add(messageID)
-    setFrame(child, `user:${messageID}`, {
-      kind: "user",
-      source: "system",
-      text: value,
-      phase: "start",
-      messageID,
-    })
+    if (prompt.text.trim())
+      setFrame(child, `user:${messageID}`, {
+        kind: "user",
+        source: "system",
+        text: prompt.text,
+        phase: "start",
+        messageID,
+      })
+    for (const commit of userImageCommits(messageID, prompt.files))
+      setFrame(child, sourceKey(messageID, commit.partID), commit)
     return true
   }
 
@@ -325,12 +330,14 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
     }
     child.finishedTools.add(key)
     child.tools.delete(key)
-    if (part.state.status === "error" && output) {
-      setFrame(child, frame, toolCommit(part, messageID, "progress", output, input.directory))
-      setFrame(child, `${frame}:final`, toolCommit(part, messageID, "final", undefined, input.directory))
-      return
-    }
-    setFrame(child, frame, toolCommit(part, messageID, toolFinalPhase(part), undefined, input.directory))
+    const partial = part.state.status === "error" && output
+    if (partial) setFrame(child, frame, toolCommit(part, messageID, "progress", output, input.directory))
+    setFrame(
+      child,
+      partial ? `${frame}:final` : frame,
+      toolCommit(part, messageID, toolFinalPhase(part), undefined, input.directory),
+    )
+    for (const commit of toolImageCommits(part, messageID)) setFrame(child, sourceKey(messageID, commit.partID), commit)
   }
 
   const rebuild = (child: ChildState, messages: SessionMessageInfo[]) => {
@@ -342,7 +349,7 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
     for (const message of messages) {
       if (message.type === "user") {
         child.prompts.delete(message.id)
-        userFrame(child, message.id, message.text)
+        userFrame(child, message.id, message)
         continue
       }
       if (message.type !== "assistant") continue
@@ -398,9 +405,11 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
     const pendingPrompts = new Map(child.prompts)
     const pendingTools = new Map(child.tools)
     let retry = false
-    const task = sdk.message
-      .list({ sessionID: child.sessionID, limit: CHILD_MESSAGE_LIMIT, order: "desc" }, { signal })
-      .then((response) => {
+    const task = Promise.all([
+      sdk.message.list({ sessionID: child.sessionID, limit: CHILD_MESSAGE_LIMIT, order: "desc" }, { signal }),
+      sdk.session.inbox.list({ sessionID: child.sessionID }, { signal }),
+    ])
+      .then(([response, pending]) => {
         if (!active(signal)) return
         const buffered = hydrationEvents.get(child.sessionID) ?? []
         hydrationEvents.delete(child.sessionID)
@@ -410,6 +419,9 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
           notifyDetail(child)
           return
         }
+        for (const item of pending) {
+          if (item.type === "user") child.prompts.set(item.id, item.payload)
+        }
         for (const [id, prompt] of pendingPrompts) {
           if (!child.prompts.has(id)) child.prompts.set(id, prompt)
         }
@@ -645,7 +657,7 @@ export function createSubagentTracker(input: SubagentTrackerInput): SubagentTrac
 
   const reduce = (child: ChildState, event: V2Event) => {
     if (event.type === "session.inbox.enqueued") {
-      if (event.data.item.type === "user") child.prompts.set(event.data.inboxID, event.data.item.payload.text)
+      if (event.data.item.type === "user") child.prompts.set(event.data.inboxID, event.data.item.payload)
       return
     }
     if (event.type === "session.inbox.delivered") {

packages/tui/src/mini/stream-v2.transport.ts

@@ -6,19 +6,22 @@ import type {
   PermissionRequest,
   SessionMessageAssistantTool,
   SessionMessageInfo,
+  SessionMessageUser,
   SessionInboxInfo,
 } from "@opencode-ai/client/promise"
 import { Event } from "@opencode-ai/schema/event"
 import { SessionMessage } from "@opencode-ai/schema/session-message"
-import { formatContextUsage } from "../util/session"
 import { blockerStatus, pickBlockerView } from "./session-data"
 import { writeSessionOutput } from "./stream"
 import { createFragmentReconciler, fragmentRef, type FragmentReconciler } from "./stream-v2.fragment"
+import { toolImageCommits, userImageCommits, type ImageCommit } from "./stream-v2.image"
+import { messagePrompt } from "./session.shared"
 import { createSubagentTracker, toolCommit, toolFinalPhase } from "./stream-v2.subagent"
 import { normalizeTool, toolOutputText } from "./tool"
 import { toolDisplayContent } from "../util/tool-display"
 import type {
   FooterApi,
+  FooterPatch,
   FooterView,
   LocalReplayRow,
   MiniPermissionRequest,
@@ -123,12 +126,17 @@ type ToolState = {
   started: boolean
 }
 
+type PendingPrompt = FooterQueuedPrompt & { files: SessionMessageUser["files"] }
+
 type State = {
   permissions: MiniPermissionRequest[]
   forms: MiniFormRequest[]
   globalForms: MiniFormRequest[]
   view: FooterView
   messageIDs: Set<string>
+  // Optimistic text and pending steers can be visible before attachment delivery.
+  promotedMessages: Set<string>
+  imageIDs: Set<string>
   fragments: FragmentReconciler
   tools: Map<string, ToolState>
   toolSources: Map<string, SessionMessageAssistantTool>
@@ -147,14 +155,12 @@ type State = {
   executionEpoch: number
   buffered?: ReplayBuffer
   errors: Set<string>
-  pending: Map<string, FooterQueuedPrompt>
+  pending: Map<string, PendingPrompt>
   admitted: Set<string>
   stepModel: RunInput["model"]
   activeCompaction?: string
 }
 
-const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
-
 export function formatUnknownError(error: unknown): string {
   if (typeof error === "string") return error
   if (error instanceof Error) return error.message || error.name
@@ -184,11 +190,12 @@ function errorMessage(error: { message?: string; _tag?: string }) {
   return error.message || error._tag || "Session execution failed"
 }
 
-function pendingPrompt(item: SessionInboxInfo): FooterQueuedPrompt | undefined {
+function pendingPrompt(item: SessionInboxInfo): PendingPrompt | undefined {
   if (item.type !== "user") return undefined
   return {
     messageID: item.id,
-    prompt: { messageID: item.id, text: item.payload.text, parts: [] },
+    prompt: { messageID: item.id, ...messagePrompt(item.payload) },
+    files: item.payload.files,
     delivery: item.delivery,
     ...(item.payload.skills?.length
       ? { skills: item.payload.skills.map((skill) => ({ id: skill.id, name: skill.name })) }
@@ -253,6 +260,7 @@ function promptFiles(next: SessionTurnInput) {
           {
             uri: part.url,
             name: part.filename,
+            ...(part.description === undefined ? {} : { description: part.description }),
             mention: promptFileMention(part),
           },
         ]
@@ -474,6 +482,8 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
     globalForms: [],
     view: { type: "prompt" },
     messageIDs: new Set(),
+    promotedMessages: new Set(),
+    imageIDs: new Set(),
     fragments: createFragmentReconciler(),
     tools: new Map(),
     toolSources: new Map(),
@@ -532,7 +542,7 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
     write([], { phase: "idle", status })
   }
 
-  const write = (commits: StreamCommit[], patch?: { phase?: "idle" | "running"; status?: string; usage?: string }) => {
+  const write = (commits: StreamCommit[], patch?: Pick<FooterPatch, "phase" | "status" | "usage">) => {
     if (state.closed || controller.signal.aborted || input.footer.isClosed) return
     if (!state.initial && state.buffered === undefined)
       commits.forEach((commit) => {
@@ -562,9 +572,21 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
     input.footer.event({ type: "queued.prompts", prompts })
   }
 
+  const freshImages = (commits: ImageCommit[], render = true) =>
+    commits.filter((commit) => {
+      const key = streamPartKey(commit.messageID, commit.partID)
+      if (state.imageIDs.has(key)) return false
+      state.imageIDs.add(key)
+      return render
+    })
+
   const mergePending = (item: SessionInboxInfo) => {
     const prompt = pendingPrompt(item)
-    if (!prompt || state.messageIDs.has(prompt.messageID)) return
+    if (!prompt) return
+    if (state.promotedMessages.has(prompt.messageID)) {
+      write(freshImages(userImageCommits(prompt.messageID, prompt.files)))
+      return
+    }
     state.admitted.add(prompt.messageID)
     state.pending.set(prompt.messageID, prompt)
     syncPending()
@@ -655,12 +677,14 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
     state.finishedTools.add(key)
     state.tools.delete(key)
     if (!sourcePending(key)) state.toolSources.delete(key)
+    const images = freshImages(toolImageCommits(part, messageID), render)
     if (!render) return
     const phase = toolFinalPhase(part)
     if (part.state.status === "error" && delta)
       write([toolCommit(part, messageID, "progress", delta, input.location?.directory, version)])
     write([
       toolCommit(part, messageID, phase, phase === "progress" ? delta : undefined, input.location?.directory, version),
+      ...images,
     ])
   }
 
@@ -671,13 +695,17 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
       if (state.wait && (admitted || (waiting && state.wait.failureMessageID === message.id)))
         promoteWait(state.wait, false, message.id)
       if (state.pending.delete(message.id)) syncPending()
-      if (state.messageIDs.has(message.id)) return
+      const visible = state.messageIDs.has(message.id) || (reuseVisibleWait && waiting)
       state.messageIDs.add(message.id)
+      state.promotedMessages.add(message.id)
+      const images = freshImages(userImageCommits(message.id, message.files), render)
       if (!render) return
-      if (reuseVisibleWait && waiting) return
       write([
-        ...skillCommits(message.id, message.skills),
-        { kind: "user", source: "system", text: message.text, phase: "start", messageID: message.id },
+        ...(!visible ? skillCommits(message.id, message.skills) : []),
+        ...(!visible && message.text.trim()
+          ? [{ kind: "user", source: "system", text: message.text, phase: "start", messageID: message.id } as const]
+          : []),
+        ...images,
       ])
       return
     }
@@ -960,13 +988,14 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
       const waiting = state.wait?.messageID === event.data.inboxID
       if (state.wait) promoteWait(state.wait, true, event.data.inboxID)
       state.admitted.delete(event.data.inboxID)
+      state.promotedMessages.add(event.data.inboxID)
       const pending = state.pending.get(event.data.inboxID)
       state.pending.delete(event.data.inboxID)
       syncPending()
       const visible = state.messageIDs.has(event.data.inboxID)
       if (waiting || pending) state.messageIDs.add(event.data.inboxID)
       const commits = pending && !visible ? skillCommits(event.data.inboxID, pending.skills) : []
-      if (!waiting && pending && !visible)
+      if (!waiting && pending && !visible && pending.prompt.text.trim())
         commits.push({
           kind: "user",
           source: "system",
@@ -974,6 +1003,7 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
           phase: "start",
           messageID: event.data.inboxID,
         })
+      if (pending) commits.push(...freshImages(userImageCommits(event.data.inboxID, pending.files)))
       write(commits, { phase: "running", status: "waiting for assistant" })
       return
     }
@@ -1291,9 +1321,15 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
         event.data.tokens.cache.write
       const limit = state.stepModel ? input.contextLimit?.(state.stepModel) : undefined
       state.stepModel = undefined
-      const usage = total > 0 ? formatContextUsage(total, limit ? Math.round((total / limit) * 100) : undefined) : ""
       write([], {
-        usage: event.data.cost ? `${usage} · ${money.format(event.data.cost)}` : usage,
+        usage:
+          total > 0 || event.data.cost
+            ? {
+                tokens: total,
+                percent: limit ? Math.round((total / limit) * 100) : undefined,
+                cost: event.data.cost || undefined,
+              }
+            : undefined,
       })
       return
     }
@@ -1583,6 +1619,7 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
       if (!current(attempt)) return false
       reset = true
       state.messageIDs.clear()
+      state.imageIDs.clear()
       state.fragments.clear()
       state.tools.clear()
       state.toolSources.clear()
@@ -1603,6 +1640,13 @@ export async function createSessionTransport(input: StreamInput): Promise<Sessio
     try {
       if (reset) {
         for (const row of localRows) {
+          if (row.commit.image && row.commit.messageID && row.commit.partID) {
+            const key = streamPartKey(row.commit.messageID, row.commit.partID)
+            if (state.imageIDs.has(key)) continue
+            state.imageIDs.add(key)
+            input.footer.append(row.commit)
+            continue
+          }
           if (
             row.commit.messageID &&
             row.commit.partID &&

packages/tui/src/mini/theme.ts

@@ -1,19 +1,13 @@
-// Theme resolution for direct interactive mode.
-//
-// Derives scrollback and footer colors from the terminal's actual palette.
-// resolveRunTheme() queries the renderer for the terminal's palette,
-// detects dark/light mode, builds a small system theme locally, and maps it to
-// the run footer + scrollback color model. Falls back to a hardcoded dark-mode
-// palette if detection fails.
 import { RGBA, SyntaxStyle, type CliRenderer, type ColorInput, type TerminalColors } from "@opentui/core"
+import { generateSyntax, resolveThemeDocument, themeModes, type ResolvedTheme } from "@opencode-ai/theme/tui"
+import { allThemes, DEFAULT_THEMES, isThemeSource, parseTheme, type ThemeDocumentSource } from "../theme"
 import { ansiToRgba } from "../theme/color"
-import { resolveThemeColors } from "../theme/resolve"
-import { terminalMode } from "../theme/system"
-import type { Theme, ThemeV1Json } from "../theme/v1"
+import { discoverThemes } from "../theme/discovery"
+import { generateSystem, terminalMode } from "../theme/system"
+import { configDirectories } from "../util/config-directories"
+import { dedupeWith } from "effect/Array"
 import type { EntryKind, RunTuiConfig } from "./types"
 
-type ThemeCurrent = Omit<Theme, "_hasSelectedListItemText">
-
 type Tone = {
   body: ColorInput
   start?: ColorInput
@@ -28,15 +22,23 @@ export type RunSplashTheme = {
 }
 
 export type RunFooterTheme = {
-  highlight: ColorInput
-  selected: ColorInput
-  selectedText: ColorInput
+  actionSecondaryText: ColorInput
+  actionFocusedBg: ColorInput
+  actionFocusedText: ColorInput
+  formfieldText: ColorInput
+  formfieldFocusedBg: ColorInput
+  formfieldFocusedText: ColorInput
+  selection: ColorInput
+  running: ColorInput
+  question: ColorInput
+  permission: ColorInput
+  success: ColorInput
+  link: ColorInput
+  categorical: ColorInput[]
   warning: ColorInput
   error: ColorInput
   muted: ColorInput
   text: ColorInput
-  status: ColorInput
-  statusAccent: ColorInput
   shade: ColorInput
   surface: ColorInput
   pane: ColorInput
@@ -67,83 +69,22 @@ export type RunTheme = {
   block: RunBlockTheme
 }
 
-type ThemeColor = Exclude<keyof ThemeCurrent, "thinkingOpacity">
-
-type SharedSyntaxTheme = ThemeCurrent & {
-  _hasSelectedListItemText: boolean
-}
-
 export const transparent = RGBA.fromValues(0, 0, 0, 0)
 
-function alpha(color: RGBA, value: number): RGBA {
-  return RGBA.fromValues(color.r, color.g, color.b, Math.max(0, Math.min(1, value)))
-}
-
-function rgba(hex: string, value?: number): RGBA {
-  const color = RGBA.fromHex(hex)
-  return value === undefined ? color : alpha(color, value)
-}
-
-function colorMode(bg: RGBA): "dark" | "light" {
-  return luminance(bg) > 0.5 ? "light" : "dark"
-}
-
-function luminance(color: RGBA): number {
-  return 0.299 * color.r + 0.587 * color.g + 0.114 * color.b
-}
-
-function fade(color: RGBA, base: RGBA, fallback: number, scale: number, limit: number): RGBA {
-  if (color.a === 0) {
-    return RGBA.fromValues(color.r, color.g, color.b, Math.max(0, Math.min(1, fallback)))
-  }
-
-  const target = Math.min(limit, color.a * scale)
-  const mix = Math.min(1, target / color.a)
-
-  return RGBA.fromValues(
-    base.r + (color.r - base.r) * mix,
-    base.g + (color.g - base.g) * mix,
-    base.b + (color.b - base.b) * mix,
-    color.a,
-  )
-}
-
-function tint(base: RGBA, overlay: RGBA, value: number): RGBA {
-  return RGBA.fromInts(
-    Math.round((base.r + (overlay.r - base.r) * value) * 255),
-    Math.round((base.g + (overlay.g - base.g) * value) * 255),
-    Math.round((base.b + (overlay.b - base.b) * value) * 255),
-  )
-}
-
-function chroma(color: RGBA) {
-  return Math.max(color.r, color.g, color.b) - Math.min(color.r, color.g, color.b)
-}
-
-function indexedPalette(colors: TerminalColors, size: number = Math.max(colors.palette.length, 16)): RGBA[] {
-  return Array.from({ length: size }, (_, index) => {
-    const value = colors.palette[index]
-    return RGBA.fromIndex(index, value ? RGBA.fromHex(value) : ansiToRgba(index))
-  })
-}
+const ansiPalette = Array.from({ length: 256 }, (_, index) => RGBA.fromIndex(index, ansiToRgba(index)))
+const palettes = new WeakMap<CliRenderer, TerminalColors>()
 
 function srgbToLinear(value: number): number {
-  if (value <= 0.04045) {
-    return value / 12.92
-  }
-
-  return ((value + 0.055) / 1.055) ** 2.4
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
 }
 
 function oklab(color: RGBA) {
   const r = srgbToLinear(color.r)
   const g = srgbToLinear(color.g)
   const b = srgbToLinear(color.b)
-
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
   const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
   const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
-
   return {
     l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
     a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
@@ -151,8 +92,8 @@ function oklab(color: RGBA) {
   }
 }
 
-function nearestIndexed(indexed: RGBA[], rgba: RGBA): RGBA {
-  const target = oklab(rgba)
+function nearestIndexed(indexed: RGBA[], color: RGBA): RGBA {
+  const target = oklab(color)
   const hit = indexed.reduce(
     (best, item) => {
       const sample = oklab(item)
@@ -160,352 +101,108 @@ function nearestIndexed(indexed: RGBA[], rgba: RGBA): RGBA {
       const da = sample.a - target.a
       const db = sample.b - target.b
       const dist = dl * dl * 2 + da * da + db * db
-      if (dist >= best.dist) return best
-      return {
-        dist,
-        item,
-      }
-    },
-    {
-      dist: Number.POSITIVE_INFINITY,
-      item: indexed[0]!,
+      return dist >= best.dist ? best : { dist, item }
     },
+    { dist: Number.POSITIVE_INFINITY, item: indexed[0]! },
   )
-
   return RGBA.clone(hit.item)
 }
 
-function paletteColor(colors: TerminalColors, index: number): RGBA {
-  const value = colors.palette[index]
-  return value ? RGBA.fromHex(value) : ansiToRgba(index)
-}
-
-function splashShadow(indexed: RGBA[], base: RGBA, overlay: RGBA, value: number): RGBA {
-  const mixed = tint(base, overlay, value)
-  return nearestIndexed(indexed, mixed)
-}
-
-export function resolveTheme(theme: ThemeV1Json, pick: "dark" | "light"): ThemeCurrent {
-  const resolved = resolveThemeColors(theme, pick, (code) => RGBA.fromIndex(code, ansiToRgba(code)))
-  return {
-    ...resolved.theme,
-    thinkingOpacity: resolved.thinkingOpacity,
-  }
-}
-
-function generateGrayScale(bg: RGBA, isDark: boolean, map: (rgba: RGBA) => RGBA): Record<number, RGBA> {
-  const r = bg.r * 255
-  const g = bg.g * 255
-  const b = bg.b * 255
-  const lum = 0.299 * r + 0.587 * g + 0.114 * b
-  const cast = 0.25 * (1 - chroma(bg)) ** 2
-
-  const gray = (level: number) => {
-    const factor = level / 12
-
-    if (isDark && lum < 10) {
-      const value = Math.floor(factor * 0.4 * 255)
-      return map(RGBA.fromInts(value, value, value))
-    }
-
-    if (!isDark && lum > 245) {
-      const value = Math.floor(255 - factor * 0.4 * 255)
-      return map(RGBA.fromInts(value, value, value))
-    }
-
-    const value = isDark ? lum + (255 - lum) * factor * 0.4 : lum * (1 - factor * 0.4)
-    const tone = RGBA.fromInts(Math.floor(value), Math.floor(value), Math.floor(value))
-    if (cast === 0) return map(tone)
-
-    const ratio = lum === 0 ? 0 : value / lum
-    return map(
-      tint(
-        tone,
-        RGBA.fromInts(
-          Math.floor(Math.max(0, Math.min(r * ratio, 255))),
-          Math.floor(Math.max(0, Math.min(g * ratio, 255))),
-          Math.floor(Math.max(0, Math.min(b * ratio, 255))),
-        ),
-        cast,
-      ),
-    )
-  }
-
-  return Object.fromEntries(Array.from({ length: 12 }, (_, index) => [index + 1, gray(index + 1)]))
-}
-
-function generateMutedTextColor(bg: RGBA, isDark: boolean, map: (rgba: RGBA) => RGBA): RGBA {
-  const lum = 0.299 * bg.r * 255 + 0.587 * bg.g * 255 + 0.114 * bg.b * 255
-  const gray = isDark
-    ? lum < 10
-      ? 180
-      : Math.min(Math.floor(160 + lum * 0.3), 200)
-    : lum > 245
-      ? 75
-      : Math.max(Math.floor(100 - (255 - lum) * 0.2), 60)
-
-  return map(RGBA.fromInts(gray, gray, gray))
-}
-
-export function generateSystem(colors: TerminalColors, pick: "dark" | "light"): ThemeV1Json {
-  const bg_snapshot = RGBA.fromHex(colors.defaultBackground ?? colors.palette[0]!)
-  const fg_snapshot = RGBA.fromHex(colors.defaultForeground ?? colors.palette[7]!)
-  const bg = RGBA.defaultBackground(bg_snapshot)
-  const fg = RGBA.defaultForeground(fg_snapshot)
-  const isDark = pick === "dark"
-
-  const color = (index: number) => paletteColor(colors, index)
-
-  const grays = generateGrayScale(bg_snapshot, isDark, (rgba) => rgba)
-  const textMuted = generateMutedTextColor(bg_snapshot, isDark, (rgba) => rgba)
-
-  const ansi = {
-    red: color(1),
-    green: color(2),
-    yellow: color(3),
-    blue: color(4),
-    magenta: color(5),
-    cyan: color(6),
-    red_bright: color(9),
-    green_bright: color(10),
-  }
-
-  const diff_alpha = isDark ? 0.22 : 0.14
-  const diff_context_bg = grays[2]
-  const primary = ansi.cyan
-  const secondary = ansi.magenta
-
-  return {
-    theme: {
-      primary,
-      secondary,
-      accent: primary,
-      error: ansi.red,
-      warning: ansi.yellow,
-      success: ansi.green,
-      info: ansi.cyan,
-      text: fg,
-      textMuted,
-      selectedListItemText: bg,
-      background: alpha(bg, 0),
-      backgroundPanel: grays[2],
-      backgroundElement: grays[3],
-      backgroundMenu: grays[3],
-      borderSubtle: grays[6],
-      border: grays[7],
-      borderActive: grays[8],
-      diffAdded: ansi.green,
-      diffRemoved: ansi.red,
-      diffContext: grays[7],
-      diffHunkHeader: grays[7],
-      diffHighlightAdded: ansi.green_bright,
-      diffHighlightRemoved: ansi.red_bright,
-      diffAddedBg: tint(bg_snapshot, ansi.green, diff_alpha),
-      diffRemovedBg: tint(bg_snapshot, ansi.red, diff_alpha),
-      diffContextBg: diff_context_bg,
-      diffLineNumber: textMuted,
-      diffAddedLineNumberBg: tint(diff_context_bg, ansi.green, diff_alpha),
-      diffRemovedLineNumberBg: tint(diff_context_bg, ansi.red, diff_alpha),
-      markdownText: fg,
-      markdownHeading: fg,
-      markdownLink: ansi.blue,
-      markdownLinkText: ansi.cyan,
-      markdownCode: ansi.green,
-      markdownBlockQuote: ansi.yellow,
-      markdownEmph: ansi.yellow,
-      markdownStrong: fg,
-      markdownHorizontalRule: grays[7],
-      markdownListItem: ansi.blue,
-      markdownListEnumeration: ansi.cyan,
-      markdownImage: ansi.blue,
-      markdownImageText: ansi.cyan,
-      markdownCodeBlock: fg,
-      syntaxComment: textMuted,
-      syntaxKeyword: ansi.magenta,
-      syntaxFunction: ansi.blue,
-      syntaxVariable: fg,
-      syntaxString: ansi.green,
-      syntaxNumber: ansi.yellow,
-      syntaxType: ansi.cyan,
-      syntaxOperator: ansi.cyan,
-      syntaxPunctuation: fg,
-    },
-  }
-}
-
-function quantizeColor(indexed: RGBA[], rgba: RGBA): RGBA {
-  if (rgba.a === 0 || rgba.intent === "default" || rgba.intent === "indexed") {
-    return RGBA.clone(rgba)
-  }
-
-  return nearestIndexed(indexed, rgba)
-}
-
-function quantizeTheme(theme: ThemeCurrent, indexed: RGBA[]): ThemeCurrent {
-  const resolved = Object.fromEntries(
-    Object.entries(theme)
-      .filter(([key]) => key !== "thinkingOpacity")
-      .map(([key, value]) => [key, quantizeColor(indexed, value as RGBA)]),
-  ) as Partial<Record<ThemeColor, RGBA>>
-
-  return {
-    ...(resolved as Record<ThemeColor, RGBA>),
-    thinkingOpacity: theme.thinkingOpacity,
-  }
-}
-
-function splashTheme(theme: ThemeCurrent, indexed: RGBA[]): RunSplashTheme {
-  const left = nearestIndexed(indexed, theme.textMuted)
-  const right = nearestIndexed(indexed, theme.text)
-  return {
-    left,
-    right,
-    leftShadow: splashShadow(indexed, theme.background, left, 0.14),
-  }
-}
-
 function map(
-  footerTheme: ThemeCurrent,
-  scrollbackTheme: ThemeCurrent,
-  splash: RunSplashTheme,
+  theme: ResolvedTheme,
+  indexed: RGBA[],
+  mode: "light" | "dark",
   syntax?: SyntaxStyle,
+  system = false,
 ): RunTheme {
-  const footerBackground = alpha(footerTheme.background, 1)
-  const footerMode = colorMode(footerBackground)
-  const shade = fade(footerTheme.backgroundMenu, footerTheme.background, 0.12, 0.56, 0.72)
-  const surface = fade(footerTheme.backgroundMenu, footerTheme.background, 0.18, 0.76, 0.9)
-  const line = fade(footerTheme.backgroundMenu, footerTheme.background, 0.24, 0.9, 0.98)
-  const statusBase = tint(footerBackground, rgba("#000000"), footerMode === "dark" ? 0.13 : 0.06)
-  const statusAccentBase =
-    footerMode === "dark" ? tint(footerBackground, rgba("#ffffff"), 0.06) : tint(statusBase, rgba("#000000"), 0.04)
-  const collapsedStatus = footerMode === "dark" && luminance(statusBase) <= 0.04
-  // Pure-black backgrounds need a slight lift or the row disappears into the terminal background.
-  const status = collapsedStatus ? tint(statusBase, statusAccentBase, 0.7) : statusBase
-  const statusAccent = collapsedStatus ? tint(status, rgba("#ffffff"), 0.06) : statusAccentBase
+  const elevated = theme.contextual.elevated
+  // V1 system migration serializes colors; restore terminal defaults before quantizing scrollback.
+  const exact = (color: RGBA) => {
+    if (system && color.equals(theme.text.default)) return RGBA.defaultForeground(color)
+    if (system && color.equals(theme.background.default)) return RGBA.defaultBackground(color)
+    return color
+  }
+  const scrollback = (color: RGBA) => {
+    const value = exact(color)
+    return value.a === 0 || value.intent !== "rgb" ? value : nearestIndexed(indexed, value)
+  }
+  syntax?.getAllStyles().forEach((style, name) => {
+    syntax.registerStyle(name, {
+      ...style,
+      fg: style.fg && scrollback(style.fg),
+      bg: style.bg && scrollback(style.bg),
+    })
+  })
 
   return {
-    background: footerTheme.background,
+    background: RGBA.defaultBackground(theme.background.default),
     footer: {
-      highlight: footerTheme.primary,
-      selected: footerTheme.backgroundElement,
-      selectedText: footerTheme.selectedListItemText,
-      warning: footerTheme.warning,
-      error: footerTheme.error,
-      muted: footerTheme.textMuted,
-      text: footerTheme.text,
-      status,
-      statusAccent,
-      shade,
-      surface,
-      pane: footerTheme.backgroundMenu,
-      border: footerTheme.border,
-      line,
+      actionSecondaryText: exact(elevated.text.action.secondary.default),
+      actionFocusedBg: exact(elevated.background.action.primary.focused),
+      actionFocusedText: exact(elevated.text.action.primary.focused),
+      formfieldText: exact(elevated.text.formfield.default),
+      formfieldFocusedBg: exact(elevated.background.formfield.focused),
+      formfieldFocusedText: exact(elevated.text.formfield.focused),
+      selection: exact(elevated.text.formfield.selected),
+      running: exact(theme.text.status.running),
+      question: exact(theme.text.status.question),
+      permission: exact(theme.text.status.permission),
+      success: exact(theme.text.feedback.success.default),
+      link: exact(theme.markdown.link),
+      categorical: dedupeWith(
+        theme.categorical.map((scale) => exact(scale[mode === "light" ? 800 : 200])),
+        (a, b) => a.equals(b),
+      ),
+      warning: exact(theme.text.feedback.warning.default),
+      error: exact(theme.text.feedback.error.default),
+      muted: exact(theme.text.subdued),
+      text: exact(theme.text.default),
+      shade: exact(elevated.background.default),
+      surface: exact(elevated.background.default),
+      pane: exact(theme.contextual.overlay.background.default),
+      border: exact(theme.border.default),
+      line: exact(theme.background.surface.overlay),
     },
     entry: {
-      system: {
-        body: scrollbackTheme.textMuted,
-      },
-      user: {
-        body: scrollbackTheme.primary,
-      },
-      assistant: {
-        body: scrollbackTheme.text,
-      },
-      reasoning: {
-        body: scrollbackTheme.textMuted,
-      },
-      tool: {
-        body: scrollbackTheme.text,
-        start: scrollbackTheme.textMuted,
-      },
-      error: {
-        body: scrollbackTheme.error,
-      },
+      system: { body: scrollback(theme.text.subdued) },
+      user: { body: scrollback(theme.text.default) },
+      assistant: { body: scrollback(theme.markdown.text) },
+      reasoning: { body: scrollback(theme.text.subdued) },
+      tool: { body: scrollback(theme.text.subdued), start: scrollback(theme.text.subdued) },
+      error: { body: scrollback(theme.text.feedback.error.default) },
+    },
+    splash: {
+      left: nearestIndexed(indexed, theme.text.subdued),
+      right: nearestIndexed(indexed, theme.text.default),
+      leftShadow: nearestIndexed(indexed, theme.background.surface.offset),
     },
-    splash,
     block: {
-      text: scrollbackTheme.text,
-      muted: scrollbackTheme.textMuted,
+      text: scrollback(theme.text.default),
+      muted: scrollback(theme.text.subdued),
       syntax,
-      diffRemoved: scrollbackTheme.diffRemoved,
-      diffAddedBg: transparent,
-      diffRemovedBg: transparent,
-      diffContextBg: transparent,
-      diffHighlightAdded: scrollbackTheme.diffHighlightAdded,
-      diffHighlightRemoved: scrollbackTheme.diffHighlightRemoved,
-      diffLineNumber: scrollbackTheme.diffLineNumber,
-      diffAddedLineNumberBg: scrollbackTheme.diffAddedLineNumberBg,
-      diffRemovedLineNumberBg: scrollbackTheme.diffRemovedLineNumberBg,
+      diffRemoved: scrollback(theme.diff.text.removed),
+      diffAddedBg: scrollback(theme.diff.background.added),
+      diffRemovedBg: scrollback(theme.diff.background.removed),
+      diffContextBg: scrollback(theme.diff.background.context),
+      diffHighlightAdded: scrollback(theme.diff.highlight.added),
+      diffHighlightRemoved: scrollback(theme.diff.highlight.removed),
+      diffLineNumber: scrollback(theme.diff.lineNumber.text),
+      diffAddedLineNumberBg: scrollback(theme.diff.lineNumber.background.added),
+      diffRemovedLineNumberBg: scrollback(theme.diff.lineNumber.background.removed),
     },
   }
 }
 
-const seed = {
-  highlight: RGBA.fromIndex(6, rgba("#38bdf8")),
-  muted: RGBA.fromIndex(8, rgba("#64748b")),
-  text: RGBA.defaultForeground(rgba("#f8fafc")),
-  panel: rgba("#0f172a"),
-  success: RGBA.fromIndex(2, rgba("#22c55e")),
-  warning: RGBA.fromIndex(3, rgba("#f59e0b")),
-  error: RGBA.fromIndex(1, rgba("#ef4444")),
-}
-
-function tone(body: ColorInput, start?: ColorInput): Tone {
-  return {
-    body,
-    start,
-  }
-}
-
-const fallbackSplashIndexed = Array.from({ length: 256 }, (_, index) => RGBA.fromIndex(index))
-const fallbackSplashLeft = RGBA.fromIndex(67)
-const fallbackSplashRight = RGBA.fromIndex(110)
-
-export const RUN_THEME_FALLBACK: RunTheme = {
-  background: RGBA.fromValues(0, 0, 0, 0),
-  footer: {
-    highlight: seed.highlight,
-    selected: seed.text,
-    selectedText: seed.panel,
-    warning: seed.warning,
-    error: seed.error,
-    muted: seed.muted,
-    text: seed.text,
-    status: tint(seed.panel, rgba("#000000"), 0.12),
-    statusAccent: tint(seed.panel, rgba("#ffffff"), 0.06),
-    shade: alpha(seed.panel, 0.68),
-    surface: alpha(seed.panel, 0.86),
-    pane: seed.panel,
-    border: seed.muted,
-    line: alpha(seed.panel, 0.96),
-  },
-  entry: {
-    system: tone(seed.muted),
-    user: tone(seed.highlight),
-    assistant: tone(seed.text),
-    reasoning: tone(seed.muted),
-    tool: tone(seed.text, seed.muted),
-    error: tone(seed.error),
-  },
-  splash: {
-    left: fallbackSplashLeft,
-    right: fallbackSplashRight,
-    leftShadow: splashShadow(fallbackSplashIndexed, RGBA.fromValues(0, 0, 0, 0), fallbackSplashLeft, 0.14),
-  },
-  block: {
-    text: seed.text,
-    muted: seed.muted,
-    diffRemoved: seed.error,
-    diffAddedBg: alpha(seed.success, 0.18),
-    diffRemovedBg: alpha(seed.error, 0.18),
-    diffContextBg: alpha(seed.panel, 0.72),
-    diffHighlightAdded: seed.success,
-    diffHighlightRemoved: seed.error,
-    diffLineNumber: seed.muted,
-    diffAddedLineNumberBg: alpha(seed.success, 0.12),
-    diffRemovedLineNumberBg: alpha(seed.error, 0.12),
-  },
-}
+export const RUN_THEME_FALLBACK = map(
+  resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), "dark"),
+  ansiPalette,
+  "dark",
+)
+export const RUN_THEME_FALLBACK_LIGHT = map(
+  resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), "light"),
+  ansiPalette,
+  "light",
+)
 
 function monoTheme(mode: "dark" | "light"): RunTheme {
   const foreground = RGBA.defaultForeground(mode === "light" ? "#000000" : "#ffffff")
@@ -513,15 +210,23 @@ function monoTheme(mode: "dark" | "light"): RunTheme {
   return {
     background,
     footer: {
-      highlight: foreground,
-      selected: background,
-      selectedText: foreground,
+      actionSecondaryText: foreground,
+      actionFocusedBg: background,
+      actionFocusedText: foreground,
+      formfieldText: foreground,
+      formfieldFocusedBg: background,
+      formfieldFocusedText: foreground,
+      selection: foreground,
+      running: foreground,
+      question: foreground,
+      permission: foreground,
+      success: foreground,
+      link: foreground,
+      categorical: [foreground],
       warning: foreground,
       error: foreground,
       muted: foreground,
       text: foreground,
-      status: background,
-      statusAccent: background,
       shade: background,
       surface: background,
       pane: background,
@@ -529,18 +234,14 @@ function monoTheme(mode: "dark" | "light"): RunTheme {
       line: background,
     },
     entry: {
-      system: tone(foreground),
-      user: tone(foreground),
-      assistant: tone(foreground),
-      reasoning: tone(foreground),
-      tool: tone(foreground),
-      error: tone(foreground),
-    },
-    splash: {
-      left: foreground,
-      right: foreground,
-      leftShadow: background,
+      system: { body: foreground },
+      user: { body: foreground },
+      assistant: { body: foreground },
+      reasoning: { body: foreground },
+      tool: { body: foreground },
+      error: { body: foreground },
     },
+    splash: { left: foreground, right: foreground, leftShadow: background },
     block: {
       text: foreground,
       muted: foreground,
@@ -566,37 +267,55 @@ export async function resolveRunTheme(
   mono = false,
 ): Promise<RunTheme> {
   if (mono) {
-    const mode =
-      config?.mode === "light" || config?.mode === "dark"
-        ? config.mode
-        : (renderer.themeMode ?? (await renderer.waitForThemeMode(300)))
+    const mode = renderer.themeMode ?? (await renderer.waitForThemeMode(300)) ?? config?.mode
     return mode === "light" ? RUN_THEME_MONO_LIGHT : RUN_THEME_MONO
   }
-  try {
-    const colors = await renderer.getPalette({
-      size: 256,
-    })
-    const bg = colors.defaultBackground ?? colors.palette[0]
-    if (!bg) {
-      return RUN_THEME_FALLBACK
-    }
 
-    // Palette-only terminal reloads can leave renderer.themeMode stale, but
-    // ANSI slot zero is not the terminal background when OSC 11 is absent.
-    const pick =
-      config?.mode === "dark" || config?.mode === "light"
-        ? config.mode
-        : (terminalMode(colors) ?? renderer.themeMode ?? colorMode(RGBA.fromHex(bg)))
-    const { generateSyntax } = await import("../theme")
-    const indexed = indexedPalette(colors, 256)
-    const footerTheme = resolveTheme(generateSystem(colors, pick), pick)
-    const scrollbackTheme = quantizeTheme(footerTheme, indexed)
-    const syntaxTheme: SharedSyntaxTheme = {
-      ...scrollbackTheme,
-      _hasSelectedListItemText: true,
-    }
-    return map(footerTheme, scrollbackTheme, splashTheme(scrollbackTheme, indexed), generateSyntax(syntaxTheme))
-  } catch {
-    return RUN_THEME_FALLBACK
+  const detected = await renderer.getPalette({ size: 256 }).catch(() => undefined)
+  // A transient OSC timeout must not remap immutable scrollback against an unrelated ANSI palette.
+  const colors =
+    (detected?.defaultBackground ?? detected?.palette[0]) && (detected?.defaultForeground ?? detected?.palette[7])
+      ? detected
+      : palettes.get(renderer)
+  if (colors) palettes.set(renderer, colors)
+  // Mini stays transparent: fresh OSC 11 wins, but cached colors must not override a new renderer mode.
+  const mode =
+    (detected && terminalMode(detected)) ??
+    renderer.themeMode ??
+    (colors && terminalMode(colors)) ??
+    (config?.mode === "light" ? "light" : "dark")
+  const name = config?.name ?? "opencode"
+  if (name === "system" && !colors) {
+    return mode === "light" ? RUN_THEME_FALLBACK_LIGHT : RUN_THEME_FALLBACK
+  }
+
+  const resolved = await themeSource(name, colors, mode)
+    .then((source) => {
+      const document = parseTheme(source, name)
+      // Mini keeps the terminal background, so the opposite theme mode is not a safe fallback.
+      if (themeModes(document).includes(mode)) return resolveThemeDocument(document, mode)
+    })
+    .catch(() => undefined)
+  const theme = resolved ?? resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), mode)
+  const indexed = colors
+    ? ansiPalette.map((color, index) => (colors.palette[index] ? RGBA.fromIndex(index, colors.palette[index]!) : color))
+    : ansiPalette
+  return {
+    ...map(theme, indexed, mode, generateSyntax(theme, mode), name === "system" && resolved !== undefined),
+    background: RGBA.defaultBackground(colors?.defaultBackground ?? theme.background.default),
   }
 }
+
+async function themeSource(
+  name: string,
+  colors: TerminalColors | undefined,
+  mode: "dark" | "light",
+): Promise<ThemeDocumentSource> {
+  if (name === "system" && colors) return generateSystem(colors, mode)
+  const { Global } = await import("@opencode-ai/util/global")
+  const custom = await discoverThemes(
+    configDirectories(process.env.OPENCODE_CONFIG_DIR ?? Global.Path.config, process.cwd()),
+  )
+  const source = custom[name] ?? allThemes()[name] ?? DEFAULT_THEMES.opencode
+  return isThemeSource(source) ? source : DEFAULT_THEMES.opencode
+}

packages/tui/src/mini/types.ts

@@ -40,6 +40,7 @@ export type RunPromptPart =
       url: string
       filename?: string
       mime?: string
+      description?: string
       source?: {
         type: string
         text: { start: number; end: number; value: string }
@@ -119,6 +120,7 @@ export type RunInput = {
 }
 
 export type MiniHost = {
+  version: string
   terminal: {
     stdin: NodeJS.ReadStream
   }
@@ -176,7 +178,7 @@ export type FooterState = {
   status: string
   notice: string
   model: string
-  usage: string
+  usage: { tokens: number; percent?: number; cost?: number } | undefined
   first: boolean
   interrupt: number
   exit: number
@@ -393,7 +395,10 @@ export type FormCancel = {
   location?: LocationRef
 }
 
-export type RunTuiConfig = Pick<Config.Resolved, "keybinds" | "leader" | "theme" | "mini" | "session" | "cursor">
+export type RunTuiConfig = Pick<
+  Config.Resolved,
+  "keybinds" | "leader" | "theme" | "mini" | "prompt" | "session" | "cursor" | "animations"
+>
 
 export type MiniSettings = {
   thinking: "show" | "hide"
@@ -401,6 +406,7 @@ export type MiniSettings = {
   turn_summary: "show" | "hide"
   footer: "show" | "hide"
   splash: "show" | "hide"
+  work_spinner: Config.MiniWorkSpinner
   mono: boolean
 }
 
@@ -423,6 +429,7 @@ type StreamToolState = "running" | "completed" | "error"
 export type StreamCommit = {
   kind: EntryKind
   text: string
+  image?: string
   phase: StreamPhase
   source: StreamSource
   compaction?: true

packages/tui/src/ui/one-cell-motion.ts

@@ -0,0 +1,111 @@
+import { octantGlyph } from "./subcell"
+import type { Config } from "../config"
+
+export type OneCellMotion = {
+  frames: string[]
+  interval: number
+  levels?: number[]
+  intro?: Pick<OneCellMotion, "frames" | "interval" | "levels">
+  once?: boolean
+  pace?: { initial: number; final: number; after: number; duration: number }
+}
+
+export function oneCellFrame(animation: OneCellMotion, elapsed: number) {
+  const introDuration = animation.intro ? animation.intro.frames.length * animation.intro.interval : 0
+  const intro = elapsed < introDuration
+  const clip = intro ? animation.intro! : animation
+  const pace = animation.pace
+  const progress = pace ? Math.max(0, Math.min(1, (elapsed - pace.after) / pace.duration)) : 0
+  // Integrate the changing rate so slowing down does not jump or restart the motion.
+  const time = intro
+    ? elapsed
+    : !pace
+      ? elapsed - introDuration
+      : (elapsed - introDuration) * pace.initial +
+        (pace.final - pace.initial) *
+          (pace.duration * (progress ** 3 - progress ** 4 / 2) + Math.max(0, elapsed - pace.after - pace.duration))
+  // Keep cycle boundaries exact when individual frame intervals are fractional.
+  const frame = Math.floor((time * clip.frames.length) / (clip.interval * clip.frames.length))
+  const index = !intro && animation.once ? Math.min(frame, clip.frames.length - 1) : frame % clip.frames.length
+  return {
+    glyph: clip.frames[index]!,
+    level: clip.levels?.[index] ?? 1,
+    complete: !intro && !!animation.once && frame >= clip.frames.length - 1,
+  }
+}
+
+export const SEED_WORK: OneCellMotion = {
+  frames: Array.from({ length: 40 }, () => "\u25aa"),
+  interval: 40,
+  levels: Array.from({ length: 40 }, (_, index) => 0.3 + (0.7 * (1 - Math.cos((index / 40) * 2 * Math.PI))) / 2),
+  intro: {
+    frames: Array.from({ length: 80 }, () => "\u25aa"),
+    interval: 40,
+    levels: Array.from({ length: 80 }, (_, index) => {
+      const phase = index / 80
+      return 0.3 + 0.7 * (phase < 0.125 ? phase / 0.125 : phase < 0.375 ? 1 : ((1 - phase) / 0.625) ** 3)
+    }),
+  },
+  pace: { initial: 1.25, final: 0.5, after: 30_000, duration: 30_000 },
+}
+
+const WORK_PACE = { initial: 1.2, final: 0.96, after: 30_000, duration: 30_000 }
+const lower = [2, 3, 5, 7, 6, 4]
+
+export const BLOCK_LOW_COMET: OneCellMotion = {
+  frames: lower.flatMap((point, index, path) => {
+    const leading = (1 << point) | (1 << path[(index + 5) % 6]!)
+    const full = leading | (1 << path[(index + 4) % 6]!)
+    return [full, full, full, leading, leading].map(octantGlyph)
+  }),
+  interval: 40,
+  pace: WORK_PACE,
+}
+
+export const BLOCK_SOFT_SWEEP: OneCellMotion = {
+  frames: [0x14, 0x14, 0x14, 0x1c, 0x3c, 0x38, 0x28, 0x28, 0x28, 0x38, 0x3c, 0x1c].map(octantGlyph),
+  interval: 100,
+  pace: WORK_PACE,
+}
+
+export const BLOCK_SOFT_SLIDE: OneCellMotion = {
+  frames: [0x14, 0x14, 0x14, 0x14, 0x14, 0x28, 0x28, 0x28, 0x28, 0x28].map(octantGlyph),
+  interval: 100,
+  levels: [0.55, 0.85, 1, 0.85, 0.55, 0.55, 0.85, 1, 0.85, 0.55],
+}
+
+export const WORK_SPINNERS = {
+  "block-soft-slide": BLOCK_SOFT_SLIDE,
+  "block-soft-sweep": BLOCK_SOFT_SWEEP,
+  "block-low-comet": BLOCK_LOW_COMET,
+  "block-low-duet": {
+    frames: lower.slice(0, 3).flatMap((point, index) => {
+      const heads = (1 << point) | (1 << lower[(index + 3) % 6]!)
+      const full = heads | (1 << lower[(index + 2) % 6]!) | (1 << lower[(index + 5) % 6]!)
+      return [full, full, full, heads].map(octantGlyph)
+    }),
+    interval: 60,
+  },
+  "block-shuttle": { frames: [0x14, 0x28].map(octantGlyph), interval: 500 },
+  "block-bridge": { frames: [0x14, 0x14, 0x14, 0x3c, 0x28, 0x28, 0x28, 0x3c].map(octantGlyph), interval: 120 },
+  "block-squeeze": {
+    frames: [0x14, 0x14, 0x14, 0x10, 0x20, 0x28, 0x28, 0x28, 0x20, 0x10].map(octantGlyph),
+    interval: 100,
+  },
+  "small-toggle": { frames: Array.from("\u25ab\u25aa"), interval: 320 },
+  "square-toggle": { frames: Array.from("\u25a1\u25a0"), interval: 500 },
+  "grow-shrink": { frames: Array.from("\u25ab\u25ab\u25aa\u25a0\u25aa"), interval: 180 },
+  "quadrant-orbit": { frames: Array.from("\u2598\u259d\u2597\u2596"), interval: 160 },
+  crosshatch: { frames: Array.from("\u25a7\u25a9\u25a8\u25a9"), interval: 240 },
+  "density-wave": { frames: Array.from("\u2591\u2591\u2591\u2592\u2593\u2588\u2593\u2592"), interval: 160 },
+  seed: SEED_WORK,
+} satisfies Record<Config.MiniWorkSpinner, OneCellMotion>
+
+export const SEED_LAUNCH: OneCellMotion = {
+  frames: Array.from({ length: 21 }, (_, index) => (index < 10 ? "\u25ab" : "\u25aa")),
+  interval: 40,
+  levels: SEED_WORK.levels!.slice(0, 21),
+  once: true,
+}
+
+export const SEED_MONO: OneCellMotion = { frames: ["-", "\\", "|", "/"], interval: 120 }

packages/tui/src/ui/subcell.ts

@@ -0,0 +1,37 @@
+// Masks use row-major bits in a 2x4 grid. Unicode reuses these older glyphs
+// instead of duplicating them in the otherwise mask-ordered octant block.
+const OCTANTS = new Map<number, string>([
+  [0x00, " "],
+  [0x01, "\u{1cea8}"],
+  [0x02, "\u{1ceab}"],
+  [0x03, "\u{1fb82}"],
+  [0x05, "\u2598"],
+  [0x0a, "\u259d"],
+  [0x0f, "\u2580"],
+  [0x14, "\u{1fbe6}"],
+  [0x28, "\u{1fbe7}"],
+  [0x3f, "\u{1fb85}"],
+  [0x40, "\u{1cea3}"],
+  [0x50, "\u2596"],
+  [0x55, "\u258c"],
+  [0x5a, "\u259e"],
+  [0x5f, "\u259b"],
+  [0x80, "\u{1cea0}"],
+  [0xa0, "\u2597"],
+  [0xa5, "\u259a"],
+  [0xaa, "\u2590"],
+  [0xaf, "\u259c"],
+  [0xc0, "\u2582"],
+  [0xf0, "\u2584"],
+  [0xf5, "\u2599"],
+  [0xfa, "\u259f"],
+  [0xfc, "\u2586"],
+  [0xff, "\u2588"],
+])
+
+export function octantGlyph(mask: number) {
+  return (
+    OCTANTS.get(mask) ??
+    String.fromCodePoint(0x1cd00 + mask - [...OCTANTS.keys()].filter((value) => value < mask).length)
+  )
+}

packages/tui/test/config-v2.test.tsx

@@ -17,12 +17,16 @@ test("validates the three explicit diff source defaults", () => {
   expect(() => decodeInfo({ diffs: { source: "auto" } })).toThrow()
 })
 
-test("validates mini replay settings", () => {
+test("validates mini replay and work spinner settings", () => {
   expect(decodeInfo({ mini: { replay: false, replay_limit: 50 } })).toEqual({
     mini: { replay: false, replay_limit: 50 },
   })
   expect(() => decodeInfo({ mini: { replay_limit: 0 } })).toThrow()
   expect(() => decodeInfo({ mini: { replay_limit: 1.5 } })).toThrow()
+  expect(decodeInfo({ mini: { work_spinner: "quadrant-orbit" } })).toEqual({
+    mini: { work_spinner: "quadrant-orbit" },
+  })
+  expect(() => decodeInfo({ mini: { work_spinner: "unknown" } })).toThrow()
 })
 
 test("validates the session tabs setting", () => {

packages/tui/test/mini/blocker.responsive.test.tsx

@@ -0,0 +1,731 @@
+/** @jsxImportSource @opentui/solid */
+import { expect, test } from "bun:test"
+import { BoxRenderable, RGBA, ScrollBoxRenderable, TextRenderable, type Renderable } from "@opentui/core"
+import { createTestRenderer } from "@opentui/core/testing"
+import { testRender } from "@opentui/solid"
+import { Keymap } from "../../src/context/keymap"
+import { RunFooter } from "../../src/mini/footer"
+import { RunFormBody } from "../../src/mini/footer.form"
+import { RunPermissionBody } from "../../src/mini/footer.permission"
+import { RunFooterSubagentBody } from "../../src/mini/footer.subagent"
+import { createFormBodyState } from "../../src/mini/form.shared"
+import { RUN_THEME_FALLBACK, RUN_THEME_MONO } from "../../src/mini/theme"
+import type { FormReply, MiniFormRequest, MiniPermissionRequest, PermissionReply } from "../../src/mini/types"
+import { createTuiResolvedConfig } from "../fixture/tui-runtime"
+
+const permission: MiniPermissionRequest = {
+  id: "per_responsive",
+  sessionID: "ses_responsive",
+  action: "shell",
+  resources: ["rm -rf /project/build/cache"],
+  save: ["/project/build/*", "/project/private/GRANT_SENTINEL"],
+}
+const form: MiniFormRequest = {
+  id: "frm_responsive",
+  sessionID: "ses_responsive",
+  title: "Deployment",
+  fields: [
+    {
+      key: "target",
+      type: "string",
+      title: "Target",
+      required: true,
+      options: Array.from({ length: 12 }, (_, index) => ({
+        value: `target-${index + 1}`,
+        label: `Target ${index + 1}`,
+        description: `Environment ${index + 1}`,
+      })),
+    },
+  ],
+}
+
+function descendants(root: Renderable): Renderable[] {
+  return root.getChildren().flatMap((child) => [child, ...descendants(child)])
+}
+
+async function settle(app: Pick<Awaited<ReturnType<typeof testRender>>, "renderOnce">) {
+  await app.renderOnce()
+  await Bun.sleep(0)
+  await app.renderOnce()
+  await app.renderOnce()
+}
+
+async function renderForm(request: MiniFormRequest, width = 80, height = 20) {
+  const replies: FormReply[] = []
+  const app = await testRender(
+    () => (
+      <RunFormBody
+        request={request}
+        theme={RUN_THEME_FALLBACK.footer}
+        onReply={(reply) => {
+          replies.push(reply)
+        }}
+        onCancel={() => {}}
+      />
+    ),
+    { width, height, kittyKeyboard: true },
+  )
+  return { ...app, replies }
+}
+
+test("roomy question forms retain the established spacing and inline descriptions", async () => {
+  const app = await renderForm({
+    ...form,
+    title: "Questions",
+    fields: [
+      {
+        key: "layout",
+        type: "string",
+        title: "Layout",
+        description: "Which footer view?",
+        options: [
+          { value: "form", label: "Form", description: "Inspect canonical form" },
+          { value: "prompt", label: "Prompt", description: "Return to composer" },
+        ],
+      },
+      { key: "extra", type: "boolean", title: "Extra checks" },
+    ],
+  })
+  try {
+    await settle(app)
+    for (const [text, x, y] of [
+      ["Questions", 4, 1],
+      ["1/2", 14, 1],
+      ["Which footer view?", 2, 3],
+      ["Form", 5, 5],
+      ["Inspect canonical form", 10, 5],
+    ] as const) {
+      const node = descendants(app.renderer.root).find(
+        (node) => node instanceof TextRenderable && node.plainText === text,
+      )!
+      expect({ text, x: node.x, y: node.y }).toEqual({ text, x, y })
+    }
+    expect(app.captureCharFrame().split("\n")[18]).toContain("↑↓ select   enter choose   tab next   esc dismiss")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each([16, 24, 40])(
+  "complete questions and distinct option details remain readable at %i columns",
+  async (width) => {
+    const content = (app: Awaited<ReturnType<typeof renderForm>>) =>
+      app
+        .captureCharFrame()
+        .split("\n")
+        .map((row) => row.slice(0, width - 1))
+        .join(" ")
+        .replace(/\s+/g, " ")
+    const title = "Delete production database permanently?"
+    const app = await renderForm({ ...form, fields: [{ key: "yes", type: "boolean", title }] }, width, 8)
+    try {
+      await settle(app)
+      app.mockInput.pressKey("\x1b[5~")
+      await settle(app)
+      expect(content(app)).toContain(title)
+      expect(app.replies).toEqual([])
+    } finally {
+      app.renderer.destroy()
+    }
+    const options = await renderForm(
+      {
+        ...form,
+        fields: [
+          {
+            key: "target",
+            type: "string",
+            title: "Target",
+            options: [
+              { value: "stage", label: "Deploy api service to staging", description: "STAGING database" },
+              { value: "prod", label: "Deploy api service to production", description: "PRODUCTION database" },
+            ],
+          },
+        ],
+      },
+      width,
+      12,
+    )
+    try {
+      await settle(options)
+      expect(content(options)).toContain("Deploy api service to staging")
+      expect(content(options)).toContain("STAGING database")
+      options.mockInput.pressArrow("down")
+      await settle(options)
+      expect(content(options)).toContain("Deploy api service to production")
+      expect(content(options)).toContain("PRODUCTION database")
+      options.mockInput.pressEnter()
+      await settle(options)
+      expect(options.replies[0]?.answer).toEqual({ target: "prod" })
+    } finally {
+      options.renderer.destroy()
+    }
+  },
+)
+
+test("advancing fields reveals the new choice without a second Enter", async () => {
+  const app = await renderForm(
+    {
+      ...form,
+      fields: [
+        { key: "confirm", type: "boolean", title: "Continue?" },
+        {
+          key: "target",
+          type: "string",
+          title: "Target",
+          description: "Select your preferred destination for this deployment and double-check it carefully.",
+          options: [
+            { value: "b0", label: "B0" },
+            { value: "b1", label: "B1" },
+          ],
+        },
+      ],
+    },
+    16,
+    8,
+  )
+  try {
+    await settle(app)
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("B0")
+    expect(app.replies).toEqual([])
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Review")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("roomy permission prompts retain their header and padded action bar", async () => {
+  const app = await testRender(
+    () => (
+      <RunPermissionBody
+        request={permission}
+        theme={RUN_THEME_FALLBACK.footer}
+        block={RUN_THEME_FALLBACK.block}
+        onReply={() => {}}
+      />
+    ),
+    { width: 112, height: 20 },
+  )
+  try {
+    await settle(app)
+    const nodes = descendants(app.renderer.root).filter(
+      (node): node is TextRenderable => node instanceof TextRenderable,
+    )
+    const title = nodes.find((node) => node.plainText.includes("Permission required"))!
+    const action = nodes.find((node) => node.plainText === "Allow once")!
+    expect({ x: title.x, y: title.y }).toEqual({ x: 2, y: 1 })
+    expect({ x: action.x, y: action.y }).toEqual({ x: 3, y: 18 })
+    expect(app.captureCharFrame().split("\n")[18]).toContain("⇆ select  enter confirm  esc reject")
+    const scroll = descendants(app.renderer.root).find((node) => node instanceof ScrollBoxRenderable)!
+    expect(scroll.x + scroll.width).toBe(109)
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Waiting for permission event...")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("roomy rejection keeps the editor and confirmation hints inline", async () => {
+  const app = await testRender(
+    () => (
+      <Keymap.Provider config={createTuiResolvedConfig()}>
+        <RunPermissionBody
+          request={permission}
+          theme={RUN_THEME_FALLBACK.footer}
+          block={RUN_THEME_FALLBACK.block}
+          onReply={() => {}}
+        />
+      </Keymap.Provider>
+    ),
+    { width: 112, height: 20, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    app.mockInput.pressArrow("right")
+    app.mockInput.pressArrow("right")
+    app.mockInput.pressEnter()
+    await settle(app)
+    const editor = app.renderer.currentFocusedEditor!
+    const confirm = descendants(app.renderer.root).find(
+      (node) => node instanceof TextRenderable && node.plainText === "enter confirm",
+    )!
+    expect(editor.y).toBe(18)
+    expect(confirm.y).toBe(editor.y)
+    expect(confirm.x).toBeGreaterThanOrEqual(editor.x + editor.width)
+    expect(app.captureCharFrame()).toContain("esc cancel")
+    expect(app.captureCharFrame()).toContain("Tell OpenCode what to do differently")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each([false, true])("picked options budget their full ordinal and selection marker (mono=%s)", async (mono) => {
+  for (const width of [16, 112]) {
+    const description = width === 16 ? "prod" : "d".repeat(85) + "_END_LAST"
+    const app = await testRender(
+      () => (
+        <RunFormBody
+          request={{
+            ...form,
+            fields: [
+              {
+                key: "target",
+                type: "string",
+                title: "Target",
+                default: "target-12",
+                options: Array.from({ length: 12 }, (_, index) => ({
+                  value: `target-${index + 1}`,
+                  label: "Deploy",
+                  description,
+                })),
+              },
+            ],
+          }}
+          theme={RUN_THEME_FALLBACK.footer}
+          mono={mono}
+          onReply={() => {}}
+          onCancel={() => {}}
+        />
+      ),
+      { width, height: 20, kittyKeyboard: true },
+    )
+    try {
+      await settle(app)
+      const label = descendants(app.renderer.root).find(
+        (node) => node instanceof TextRenderable && node.plainText === "Deploy *",
+      )!
+      const detail = label
+        .parent!.getChildren()
+        .find((node) => node instanceof TextRenderable && node.plainText === description)!
+      const scroll = descendants(app.renderer.root).find((node) => node instanceof ScrollBoxRenderable)!
+      expect(detail.y).toBeGreaterThan(label.y)
+      expect(detail.x + detail.width).toBeLessThanOrEqual(scroll.viewport.x + scroll.viewport.width - (mono ? 0 : 1))
+      expect(app.captureCharFrame()).toContain(description)
+    } finally {
+      app.renderer.destroy()
+    }
+  }
+})
+
+test.each([
+  { width: 16, height: 8 },
+  { width: 24, height: 8 },
+  { width: 32, height: 8 },
+  { width: 40, height: 8 },
+  { width: 56, height: 8 },
+  { width: 56, height: 12 },
+  { width: 80, height: 12 },
+  { width: 112, height: 20 },
+])("permission controls fit the allocated $width x $height viewport", async (size) => {
+  const replies: PermissionReply[] = []
+  const app = await testRender(
+    () => (
+      <RunPermissionBody
+        request={permission}
+        theme={RUN_THEME_FALLBACK.footer}
+        block={RUN_THEME_FALLBACK.block}
+        onReply={(reply) => {
+          replies.push(reply)
+        }}
+      />
+    ),
+    { ...size, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    for (const label of ["Allow once", "Always allow", "Reject"]) {
+      expect(app.captureCharFrame()).toContain(label)
+      const node = descendants(app.renderer.root).find(
+        (node) => node instanceof TextRenderable && node.plainText === label,
+      )!
+      expect(node.x + node.width).toBeLessThanOrEqual(size.width)
+      expect(node.y + node.height).toBeLessThanOrEqual(size.height)
+    }
+    const scroll = descendants(app.renderer.root).find((node) => node instanceof ScrollBoxRenderable)!
+    expect(scroll.height).toBeGreaterThan(0)
+    expect(replies).toEqual([])
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each(["once", "always", "reject"] as const)(
+  "24 x 8 production permission confirms the visible %s choice",
+  async (choice) => {
+    const app = await createTestRenderer({
+      width: 24,
+      height: 8,
+      screenMode: "split-footer",
+      footerHeight: 4,
+      kittyKeyboard: true,
+    })
+    const replies: PermissionReply[] = []
+    const footer = new RunFooter(app.renderer, {
+      directory: () => "/project",
+      findFiles: async () => [],
+      agents: [],
+      references: [],
+      agent: undefined,
+      modelLabel: "GPT-5",
+      model: undefined,
+      variant: undefined,
+      first: false,
+      theme: RUN_THEME_FALLBACK,
+      tuiConfig: createTuiResolvedConfig(),
+      miniSettings: {
+        current: {
+          thinking: "hide",
+          shell_output: "hide",
+          turn_summary: "hide",
+          footer: "show",
+          splash: "hide",
+          work_spinner: "block-soft-slide",
+          mono: false,
+        },
+      },
+      onPermissionReply: (reply) => {
+        replies.push(reply)
+      },
+      onFormReply: () => {},
+      onFormCancel: () => {},
+      onEditorOpen: async () => undefined,
+      subscribeThemeSignal: () => () => {},
+    })
+    try {
+      await settle(app)
+      footer.event({ type: "stream.view", view: { type: "permission", request: permission } })
+      await settle(app)
+      for (const label of ["Allow once", "Always allow", "Reject"]) expect(app.captureCharFrame()).toContain(label)
+      for (let index = 0; index < ["once", "always", "reject"].indexOf(choice); index++) app.mockInput.pressTab()
+      await settle(app)
+      const label = choice === "once" ? "Allow once" : choice === "always" ? "Always allow" : "Reject"
+      const node = descendants(app.renderer.root).find(
+        (node) => node instanceof TextRenderable && node.plainText === label,
+      )!
+      expect((node.parent as BoxRenderable).backgroundColor.toInts()).toEqual(
+        (RUN_THEME_FALLBACK.footer.actionFocusedBg as RGBA).toInts(),
+      )
+      expect(replies).toEqual([])
+      app.mockInput.pressEnter()
+      await settle(app)
+      if (choice !== "once") {
+        expect(replies).toEqual([])
+        expect(app.captureCharFrame()).toContain(choice === "always" ? "Confirm" : "enter reject")
+        app.mockInput.pressEnter()
+        await settle(app)
+      }
+      expect(replies).toEqual([{ sessionID: permission.sessionID, requestID: permission.id, reply: choice }])
+    } finally {
+      footer.destroy()
+      app.renderer.destroy()
+    }
+  },
+)
+
+test.each([
+  { width: 16, height: 8 },
+  { width: 24, height: 8 },
+  { width: 32, height: 12 },
+  { width: 56, height: 8 },
+  { width: 56, height: 12 },
+  { width: 80, height: 20 },
+])("form choices reveal selection at $width x $height", async (size) => {
+  const app = await renderForm(form, size.width, size.height)
+  try {
+    await settle(app)
+    for (let index = 0; index < 12; index++) {
+      if (index > 0) app.mockInput.pressKey("ARROW_DOWN")
+      await settle(app)
+      expect(app.captureCharFrame()).toContain(`Target ${index + 1}`)
+      const selected = descendants(app.renderer.root).find(
+        (node) => node instanceof TextRenderable && node.plainText === `Target ${index + 1}`,
+      )!
+      const scroll = descendants(app.renderer.root).find(
+        (node): node is ScrollBoxRenderable => node instanceof ScrollBoxRenderable,
+      )!
+      expect(selected.y).toBeGreaterThanOrEqual(scroll.viewport.y)
+      expect(selected.y + selected.height).toBeLessThanOrEqual(scroll.viewport.y + scroll.viewport.height)
+    }
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.replies[0]?.answer).toEqual({ target: "target-12" })
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("form review scrolls from the first answer to the last", async () => {
+  const request: MiniFormRequest = {
+    ...form,
+    fields: [
+      { key: "field-1", type: "boolean", title: "Field 1", default: true },
+      ...Array.from({ length: 11 }, (_, index) => ({
+        key: `field-${index + 2}`,
+        type: "boolean" as const,
+        title: `Field ${index + 2}`,
+        default: index % 2 !== 0,
+      })),
+    ],
+  }
+  const app = await testRender(
+    () => (
+      <RunFormBody
+        request={request}
+        theme={RUN_THEME_FALLBACK.footer}
+        state={{ ...createFormBodyState(request), field: 12 }}
+        onReply={() => {}}
+        onCancel={() => {}}
+      />
+    ),
+    { width: 24, height: 8, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Field 1: Yes")
+    expect(app.captureCharFrame()).not.toContain("Field 12: No")
+    app.mockInput.pressKey("\x1b[6~")
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Field 12: No")
+    expect(app.captureCharFrame()).toContain("enter submit")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("long permission paths, diffs and persistent scopes remain keyboard accessible", async () => {
+  const app = await testRender(
+    () => (
+      <RunPermissionBody
+        request={{
+          ...permission,
+          action: "edit",
+          save: [...Array.from({ length: 8 }, (_, index) => `/project/resource-${index}/*`), ...permission.save!],
+          resources: ["/project/long/path/to/sensitive/configuration/auth.ts"],
+          metadata: {
+            diff: "--- a/auth.ts\n+++ b/auth.ts\n@@ -10000,2 +10000,2 @@\n-const allow = false\n+DIFF_SENTINEL\n return allow\n",
+          },
+        }}
+        theme={RUN_THEME_FALLBACK.footer}
+        block={RUN_THEME_FALLBACK.block}
+        onReply={() => {}}
+      />
+    ),
+    { width: 24, height: 8 },
+  )
+  try {
+    await settle(app)
+    const frames = [app.captureCharFrame()]
+    for (let index = 0; index < 12; index++) {
+      app.mockInput.pressKey("\x1b[6~")
+      await settle(app)
+      frames.push(app.captureCharFrame())
+    }
+    expect(frames.join("\n")).toContain("+DIFF_SENTINEL")
+    const scroll = descendants(app.renderer.root).find(
+      (node): node is ScrollBoxRenderable => node instanceof ScrollBoxRenderable,
+    )!
+    const top = scroll.scrollTop
+    expect(top).toBeGreaterThan(0)
+    app.mockInput.pressKey("ARROW_RIGHT")
+    await settle(app)
+    expect(scroll.scrollTop).toBe(top)
+    app.mockInput.pressEnter()
+    await settle(app)
+    const scopes = [app.captureCharFrame()]
+    for (let index = 0; index < 12; index++) {
+      app.mockInput.pressKey("\x1b[6~")
+      await settle(app)
+      scopes.push(app.captureCharFrame())
+    }
+    expect(scopes.join("\n")).toContain("GRANT_SENTINEL")
+    expect(app.captureCharFrame()).toContain("Confirm")
+    expect(app.captureCharFrame()).toContain("Cancel")
+    const end = scroll.scrollTop
+    app.mockInput.pressKey("\x1b[5~")
+    await settle(app)
+    expect(scroll.scrollTop).toBeLessThan(end)
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("scrolling a choice offscreen reveals it before submission and survives resize", async () => {
+  const app = await renderForm(form, 24, 8)
+  try {
+    await settle(app)
+    app.mockInput.pressKey("\x1b[6~")
+    await settle(app)
+    expect(app.captureCharFrame()).not.toMatch(/^1\. Target 1(?: |$)/m)
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.replies).toEqual([])
+    expect(app.captureCharFrame()).toMatch(/^1\. Target 1(?: |$)/m)
+    for (let index = 0; index < 11; index++) app.mockInput.pressKey("ARROW_DOWN")
+    await settle(app)
+    for (const size of [
+      { width: 80, height: 20 },
+      { width: 16, height: 8 },
+      { width: 24, height: 8 },
+    ]) {
+      app.resize(size.width, size.height)
+      await settle(app)
+      expect(app.captureCharFrame()).toContain("Target 12")
+    }
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.replies[0]?.answer).toEqual({ target: "target-12" })
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each([16, 24, 80])("text form keeps its editor, error and controls at %s x 8", async (width) => {
+  const app = await testRender(
+    () => (
+      <Keymap.Provider config={createTuiResolvedConfig()}>
+        <RunFormBody
+          request={{
+            ...form,
+            fields: [
+              {
+                key: "service",
+                type: "string",
+                title: "Service",
+                required: true,
+                description:
+                  "Choose the service name for deployment. This name will be used to create production resources and route incoming requests to the correct application.",
+              },
+            ],
+          }}
+          theme={RUN_THEME_FALLBACK.footer}
+          onReply={() => {}}
+          onCancel={() => {}}
+        />
+      </Keymap.Provider>
+    ),
+    { width, height: 8, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Answer required")
+    expect(app.captureCharFrame()).toContain("enter save")
+    expect(app.captureCharFrame()).toContain("esc dismiss")
+    const editor = app.renderer.currentFocusedEditor!
+    expect(editor.y).toBeGreaterThan(1)
+    expect(editor.y + editor.height).toBeLessThan(8)
+    await app.mockInput.typeText("api")
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("api")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test("external form exposes its complete URL and state-specific actions", async () => {
+  const opened: string[] = []
+  const url = "https://identity.example.test/oauth/authorize?client_id=opencode&redirect_uri=URL_SENTINEL"
+  const app = await testRender(
+    () => (
+      <RunFormBody
+        request={{ ...form, fields: [{ key: "auth", type: "external", title: "Sign in", url }] }}
+        theme={RUN_THEME_FALLBACK.footer}
+        openExternal={async (value) => {
+          opened.push(value)
+        }}
+        onReply={() => {}}
+        onCancel={() => {}}
+      />
+    ),
+    { width: 24, height: 8, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("enter open URL")
+    expect(app.captureCharFrame()).not.toContain("choose")
+    for (let index = 0; index < 10; index++) app.mockInput.pressKey("\x1b[6~")
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("URL_SENTINEL")
+    app.mockInput.pressEnter()
+    await settle(app)
+    expect(opened).toEqual([url])
+    expect(app.captureCharFrame()).toContain("enter acknowledge")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each([false, true])("wrapped permission characters stay outside the scrollbar (mono=%s)", async (mono) => {
+  const alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+  const theme = mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK
+  const app = await testRender(
+    () => (
+      <RunPermissionBody
+        request={{ ...permission, resources: [alphabet] }}
+        theme={theme.footer}
+        block={theme.block}
+        mono={mono}
+        onReply={() => {}}
+      />
+    ),
+    { width: 24, height: 20 },
+  )
+  try {
+    await settle(app)
+    const scroll = descendants(app.renderer.root).find(
+      (node): node is ScrollBoxRenderable => node instanceof ScrollBoxRenderable,
+    )!
+    const rows = app
+      .captureCharFrame()
+      .split("\n")
+      .slice(scroll.viewport.y, scroll.viewport.y + scroll.viewport.height)
+    expect(rows.map((row) => row.slice(0, mono ? 24 : 23).trim()).join("")).toContain(alphabet)
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each([
+  { width: 16, height: 8 },
+  { width: 56, height: 8 },
+  { width: 56, height: 12 },
+  { width: 112, height: 20 },
+])("inspector keeps task identity and controls at $width x $height", async (size) => {
+  let closed = 0
+  const app = await testRender(
+    () => (
+      <RunFooterSubagentBody
+        active={() => true}
+        theme={() => RUN_THEME_FALLBACK}
+        tab={() => ({ sessionID: "child", label: "Explore", description: "Inspect authentication", status: "running" })}
+        index={() => 12}
+        total={() => 12}
+        detail={() => ({ commits: [{ kind: "system", source: "system", phase: "final", text: "Activity" }] })}
+        interrupt={() => "ctrl+d"}
+        onCycle={() => {}}
+        onClose={() => {
+          closed++
+        }}
+      />
+    ),
+    { ...size, kittyKeyboard: true },
+  )
+  try {
+    await settle(app)
+    expect(app.captureCharFrame()).toContain("Inspect")
+    if (size.width < 56 || size.height < 12) expect(app.captureCharFrame()).toContain("esc back")
+    else expect(app.captureCharFrame()).toContain("12 of 12")
+    expect(app.captureCharFrame()).toContain("ctrl+d interrupt")
+    expect(app.captureCharFrame()).toContain("Activity")
+    app.mockInput.pressEscape()
+    await settle(app)
+    expect(closed).toBe(1)
+  } finally {
+    app.renderer.destroy()
+  }
+})

packages/tui/test/mini/fixture/footer-api.ts

@@ -56,9 +56,12 @@ export function createFooterApiFixture(input: { events?: FooterEvent[]; commits?
     commits,
     calls,
     promptReady,
-    submit(text: string, mode?: RunPrompt["mode"], delivery?: RunPrompt["delivery"]) {
+    submit(text: string | RunPrompt, mode?: RunPrompt["mode"], delivery?: RunPrompt["delivery"]) {
       if (prompts.size === 0) return false
-      const prompt: RunPrompt = { text, parts: [], ...(mode ? { mode } : {}), ...(delivery ? { delivery } : {}) }
+      const prompt: RunPrompt =
+        typeof text === "string"
+          ? { text, parts: [], ...(mode ? { mode } : {}), ...(delivery ? { delivery } : {}) }
+          : text
       for (const fn of [...prompts]) fn(prompt)
       return true
     },

packages/tui/test/mini/footer-keymap.test.tsx

@@ -14,7 +14,7 @@ async function renderSubagent(interrupt: "ctrl+i" | "none") {
     status: "",
     notice: "",
     model: "gpt-5",
-    usage: "",
+    usage: undefined,
     first: false,
     interrupt: 0,
     exit: 0,
@@ -57,7 +57,6 @@ async function renderSubagent(interrupt: "ctrl+i" | "none") {
           providers={() => undefined}
           currentAgent={() => "Build"}
           currentAgentID={() => "build"}
-          currentAgentExplicit={() => false}
           currentModel={() => undefined}
           variants={() => []}
           currentVariant={() => undefined}
@@ -72,6 +71,7 @@ async function renderSubagent(interrupt: "ctrl+i" | "none") {
             turn_summary: "show",
             footer: "show",
             splash: "show",
+            work_spinner: "block-soft-slide",
             mono: false,
           })}
           mono={false}

packages/tui/test/mini/footer.responsive.test.tsx

@@ -0,0 +1,409 @@
+import { expect, test } from "bun:test"
+import { RGBA, TextAttributes } from "@opentui/core"
+import { createTestRenderer } from "@opentui/core/testing"
+import { RunFooter } from "../../src/mini/footer"
+import { resolveMiniSettings } from "../../src/mini/runtime.boot"
+import { RUN_THEME_FALLBACK, RUN_THEME_MONO } from "../../src/mini/theme"
+import type { RunPrompt } from "../../src/mini/types"
+import { createTuiResolvedConfig } from "../fixture/tui-runtime"
+
+const sizes = [
+  [112, 30],
+  [24, 8],
+  [40, 12],
+  [112, 30],
+] as const
+
+async function setup(mono = false) {
+  const app = await createTestRenderer({
+    width: 112,
+    height: 30,
+    screenMode: "split-footer",
+    footerHeight: 4,
+    externalOutputMode: "capture-stdout",
+  })
+  const theme = mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK
+  const prompts: RunPrompt[] = []
+  const footer = new RunFooter(app.renderer, {
+    directory: () => "/project",
+    findFiles: async () => ["packages/tui/src/mini/footer.view.tsx", "packages/tui/src/mini/", "src/\u6587\u4ef6.ts"],
+    agents: [{ id: "build", name: "Build", mode: "primary", hidden: false }],
+    references: [],
+    agent: "build",
+    modelLabel: "GPT-5",
+    model: undefined,
+    variant: undefined,
+    first: false,
+    theme,
+    tuiConfig: createTuiResolvedConfig(),
+    miniSettings: {
+      current: { ...resolveMiniSettings(), mono },
+    },
+    onPermissionReply: () => {},
+    onFormReply: () => {},
+    onFormCancel: () => {},
+    onEditorOpen: async () => undefined,
+    subscribeThemeSignal: () => () => {},
+  })
+  footer.onPrompt((prompt) => prompts.push(prompt))
+  footer.event({ type: "catalog", agents: [], references: [], commands: [] })
+  return {
+    ...app,
+    footer,
+    prompts,
+    selected() {
+      return app
+        .captureSpans()
+        .lines.flatMap((line) => line.spans)
+        .filter((span) =>
+          mono
+            ? (span.attributes & TextAttributes.INVERSE) !== 0
+            : span.bg.toInts().join() === (theme.footer.actionFocusedBg as RGBA).toInts().join(),
+        )
+        .map((span) => span.text)
+        .join("")
+        .trim()
+    },
+    async settle() {
+      await app.renderOnce()
+      await app.renderOnce()
+    },
+    cleanup() {
+      footer.destroy()
+      app.renderer.destroy()
+    },
+  }
+}
+
+test.each([56, 160])("production footer confirms exit with a visible menu hint at %i columns", async (width) => {
+  const app = await setup()
+  try {
+    app.resize(width, 30)
+    app.footer.event({ type: "stream.patch", patch: { phase: "running", usage: { tokens: 14100, percent: 1 } } })
+    await app.settle()
+    expect(app.captureCharFrame()).toContain("ctrl+p menu")
+    app.footer.requestExit()
+    await app.settle()
+    expect(app.captureCharFrame()).toContain("Press ctrl+c again to exit")
+    expect(app.captureCharFrame()).not.toContain("menu")
+    expect(app.footer.isClosed).toBe(false)
+    app.footer.requestExit()
+    expect(app.footer.isClosed).toBe(true)
+  } finally {
+    app.cleanup()
+  }
+})
+
+test.each([false, true])(
+  "production statusline restores identity and trailing menu after resizes (mono=%s)",
+  async (mono) => {
+    const app = await setup(mono)
+    const theme = mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK
+    try {
+      app.footer.event({
+        type: "models",
+        providers: [
+          { id: "opencode", name: "Anomaly / OpenCode", models: { "gpt-5.6-sol": { name: "GPT-5.6 Sol (50% Off)" } } },
+        ],
+      })
+      app.footer.event({
+        type: "model",
+        model: "GPT-5.6 Sol (50% Off)",
+        selection: { providerID: "opencode", modelID: "gpt-5.6-sol" },
+      })
+      app.footer.event({ type: "variants", variants: ["max"], current: "max" })
+      app.footer.event({ type: "stream.patch", patch: { usage: { tokens: 14100, percent: 1, cost: 0.04 } } })
+      await app.settle()
+      const initial = app.captureCharFrame()
+      for (const [width, height] of sizes) {
+        app.resize(width, height)
+        await app.settle()
+        const statusline = app.renderer.root.findDescendantById("mini-statusline")!
+        const frame = app.captureCharFrame()
+        const row = frame.split("\n")[statusline.y].trimEnd()
+        const model = width === 112 ? "GPT-5.6 Sol (50% Off) [max]" : mono ? "GPT-5.6... [max]" : "GPT-5.6\u2026 [max]"
+        expect(row).toBe(
+          (width === 112
+            ? ["Build", model, "14.1K (1%)", "$0.04", "Anomaly / OpenCode", "ctrl+p menu"]
+            : width === 40
+              ? ["Build", model, "1% ctx"]
+              : ["Build", model]
+          ).join(mono ? " - " : " \u00b7 "),
+        )
+        expect(statusline.height).toBe(1)
+        expect(app.renderer.footerHeight).toBe(height === 30 ? 4 : 2)
+        const identity = app.captureSpans().lines[statusline.y].spans.find((span) => span.text.includes("[max]"))!
+        expect(identity.text).toContain(model)
+        expect(identity.fg.toInts()).toEqual((theme.footer.text as RGBA).toInts())
+        if (width === 112) expect(frame).toBe(initial)
+        if (mono) expect(frame).not.toMatch(/[^\x00-\x7f]/)
+      }
+    } finally {
+      app.cleanup()
+    }
+  },
+)
+
+test.each([false, true])("production command menu keeps navigation visible across resizes (mono=%s)", async (mono) => {
+  const app = await setup(mono)
+  try {
+    await app.settle()
+    app.mockInput.pressKey("p", { ctrl: true })
+    await app.settle()
+    app.mockInput.pressKey("END")
+    await app.settle()
+    for (const [width, height] of sizes) {
+      app.resize(width, height)
+      await app.settle()
+      expect(app.renderer.footerHeight).toBeLessThanOrEqual(height)
+      expect(app.captureCharFrame()).toContain("esc")
+      expect(app.selected()).toContain("Exit")
+      expect(app.footer.isClosed).toBe(false)
+    }
+    for (const [key, title] of [
+      ["ARROW_UP", "Settings"],
+      ["ARROW_DOWN", "Exit"],
+      ["HOME", "Open editor"],
+      ["ARROW_DOWN", "Show status"],
+      ["END", "Exit"],
+    ]) {
+      app.mockInput.pressKey(key)
+      await app.settle()
+      expect(app.selected()).toContain(title)
+    }
+    app.mockInput.pressEnter()
+    expect(app.footer.isClosed).toBe(true)
+  } finally {
+    app.cleanup()
+  }
+})
+
+test.each([false, true])(
+  "production model menu keeps labels and current state before metadata (mono=%s)",
+  async (mono) => {
+    const app = await setup(mono)
+    const title = "\u6a21\u578b\u6d4b\u8bd5 Alpha"
+    try {
+      app.footer.event({
+        type: "models",
+        providers: [
+          {
+            id: "provider-with-long-id",
+            name: "Provider with a very long name",
+            models: Object.fromEntries(
+              Array.from({ length: 22 }, (_, index) => [
+                "very-long-internal-model-id-" + index,
+                { name: index === 0 ? title : `Model ${String(index).padStart(2, "0")}` },
+              ]),
+            ),
+          },
+        ],
+      })
+      await app.settle()
+      app.mockInput.pressKey("p", { ctrl: true })
+      await app.settle()
+      await app.mockInput.typeText("switch model")
+      app.mockInput.pressEnter()
+      await app.settle()
+      for (const [key, text] of [
+        ["HOME", "Model 01"],
+        ["ARROW_DOWN", "Model 02"],
+        ["ARROW_UP", "Model 01"],
+        ["END", title],
+      ]) {
+        app.mockInput.pressKey(key)
+        await app.settle()
+        expect(app.selected()).toContain(text)
+      }
+      for (const [width, height] of sizes) {
+        app.resize(width, height)
+        await app.settle()
+        expect(app.selected()).toContain(title)
+        expect(app.captureCharFrame()).toContain("esc")
+      }
+      app.resize(24, 8)
+      await app.settle()
+      expect(app.selected()).toBe(title)
+      expect(app.captureCharFrame()).not.toContain("very-long")
+      app.mockInput.pressEnter()
+      await app.settle()
+      app.mockInput.pressKey("p", { ctrl: true })
+      await app.settle()
+      await app.mockInput.typeText("switch model")
+      app.mockInput.pressEnter()
+      await app.settle()
+      expect(app.selected()).toContain("current")
+      expect(app.selected()).toContain("\u6a21\u578b\u6d4b\u8bd5")
+      expect(app.selected()).not.toContain("very-long")
+      for (const width of [16, 20, 32, 40]) {
+        app.resize(width, 8)
+        await app.settle()
+        expect(app.captureCharFrame()).toContain("esc")
+        expect(app.selected()).toContain(title)
+        expect(app.selected().includes("current")).toBe(width >= 24)
+      }
+    } finally {
+      app.cleanup()
+    }
+  },
+)
+
+test("subagent menu recalculates its twelve-row window after shrink, filter, and growth", async () => {
+  const app = await setup()
+  try {
+    app.footer.event({
+      type: "stream.subagent",
+      state: {
+        tabs: Array.from({ length: 24 }, (_, index) => ({
+          sessionID: `child-${index}`,
+          label: "Worker",
+          description: `Task ${String(index).padStart(2, "0")}`,
+          status: "running",
+        })),
+        details: {},
+        permissions: [],
+        forms: [],
+      },
+    })
+    await app.settle()
+    app.mockInput.pressKey("ARROW_DOWN")
+    await app.settle()
+    for (const [key, title] of [
+      ["END", "Task 23"],
+      ["ARROW_UP", "Task 22"],
+      ["HOME", "Task 00"],
+      ["ARROW_DOWN", "Task 01"],
+      ["END", "Task 23"],
+    ]) {
+      app.mockInput.pressKey(key)
+      await app.settle()
+      expect(app.selected()).toContain(title)
+    }
+    for (const [width, height] of sizes) {
+      app.resize(width, height)
+      await app.settle()
+      expect(app.renderer.footerHeight).toBeLessThanOrEqual(height)
+      expect(app.selected()).toContain("Task 23")
+      expect(app.selected()).toContain("running")
+    }
+    await app.mockInput.typeText("Task 23")
+    await app.settle()
+    expect(app.selected()).toContain("Task 23")
+    app.mockInput.pressKey("u", { ctrl: true })
+    await app.settle()
+    app.mockInput.pressKey("HOME")
+    for (const [height, title] of [
+      [8, "Task 04"],
+      [12, "Task 08"],
+      [30, "Task 11"],
+    ] as const) {
+      app.resize(24, height)
+      await app.settle()
+      app.mockInput.pressKey("\x1b[6~")
+      await app.settle()
+      expect(app.selected()).toContain(title)
+      app.mockInput.pressKey("\x1b[5~")
+      await app.settle()
+      expect(app.selected()).toContain("Task 00")
+    }
+  } finally {
+    app.cleanup()
+  }
+})
+
+test.each([false, true])("wrapped notices reserve space beside a six-line draft (mono=%s)", async (mono) => {
+  const app = await setup(mono)
+  const draft = "first\nsecond\nthird\nfourth\nfifth\nsixth"
+  try {
+    await app.settle()
+    app.mockInput.pasteBracketedText(draft)
+    app.footer.event({ type: "stream.patch", patch: { notice: "failed to save settings" } })
+    for (const width of [16, 24, 40]) {
+      app.resize(width, 8)
+      await app.flush()
+      expect(app.renderer.footerHeight).toBeLessThanOrEqual(7)
+      expect(app.renderer.currentFocusedEditor?.plainText).toBe(draft)
+      expect(app.captureCharFrame().replace(/\s+/g, " ")).toContain("failed to save settings")
+      expect(app.captureCharFrame()).toContain("sixth")
+    }
+    app.footer.event({ type: "stream.patch", patch: { notice: "" } })
+    await app.flush()
+    expect(app.captureCharFrame()).toContain("Build")
+    expect(app.renderer.currentFocusedEditor?.plainText).toBe(draft)
+  } finally {
+    app.cleanup()
+  }
+})
+
+test.each([false, true])("composer and autocomplete share the physical height budget (mono=%s)", async (mono) => {
+  const app = await setup(mono)
+  const draft = "first\nsecond\nthird\nfourth\nfifth\nsixth"
+  try {
+    await app.settle()
+    app.mockInput.pasteBracketedText(draft)
+    await app.flush()
+    await app.mockInput.typeText(" @f")
+    await app.settle()
+    for (const [width, height] of sizes) {
+      app.resize(width, height)
+      await app.settle()
+      expect(app.renderer.footerHeight).toBeLessThanOrEqual(height - 1)
+      expect(app.captureCharFrame()).toContain("sixth @f")
+      expect(app.selected()).toContain(width === 24 ? "@mini/footer.view.tsx" : "footer.view.tsx")
+      app.mockInput.pressKey("ARROW_DOWN")
+      await app.settle()
+      expect(app.selected()).toContain("mini/")
+      app.mockInput.pressKey("ARROW_UP")
+      await app.settle()
+      expect(app.selected()).toContain("footer.view.tsx")
+    }
+    app.resize(24, 8)
+    await app.settle()
+    app.mockInput.pressEnter()
+    await app.settle()
+    const text = draft + " @packages/tui/src/mini/footer.view.tsx "
+    expect(app.renderer.currentFocusedEditor?.plainText).toBe(text)
+    app.mockInput.pressEnter()
+    await app.settle()
+    expect(app.prompts).toHaveLength(1)
+    expect(app.prompts[0].text).toBe(text)
+    expect(app.prompts[0].parts[0]).toMatchObject({
+      type: "file",
+      filename: "packages/tui/src/mini/footer.view.tsx",
+      source: {
+        type: "file",
+        path: "packages/tui/src/mini/footer.view.tsx",
+        text: {
+          start: draft.length + 1,
+          end: text.length - 1,
+          value: "@packages/tui/src/mini/footer.view.tsx",
+        },
+      },
+    })
+    app.footer.event({
+      type: "catalog",
+      agents: [],
+      references: [],
+      commands: Array.from({ length: 24 }, (_, index) => ({
+        name: `cmd-${String(index).padStart(2, "0")}`,
+        description: "Optional command description",
+      })),
+    })
+    await app.mockInput.typeText("/")
+    for (const [width, height] of sizes) {
+      app.resize(width, height)
+      await app.settle()
+      expect(app.renderer.footerHeight).toBeLessThanOrEqual(height - 1)
+      for (let index = 1; index <= 12; index++) {
+        app.mockInput.pressKey("ARROW_DOWN")
+        await app.settle()
+        expect(app.selected()).toContain(`/cmd-${String(index).padStart(2, "0")}`)
+      }
+      for (let index = 0; index < 12; index++) app.mockInput.pressKey("ARROW_UP")
+      await app.settle()
+      expect(app.selected()).toContain("/cmd-00")
+    }
+  } finally {
+    app.cleanup()
+  }
+})

packages/tui/test/mini/footer.test.ts

@@ -1,6 +1,15 @@
 import { expect, test } from "bun:test"
-import { coalesceProgressCommit, resolveRunAgent } from "../../src/mini/footer"
-import type { RunAgent, StreamCommit } from "../../src/mini/types"
+import { createTestRenderer } from "@opentui/core/testing"
+import { CliRenderEvents, RGBA, TextRenderable } from "@opentui/core"
+import path from "node:path"
+import { coalesceProgressCommit, resolveRunAgent, RunFooter } from "../../src/mini/footer"
+import { createRunDemo } from "../../src/mini/demo"
+import { resolveMiniSettings } from "../../src/mini/runtime.boot"
+import { RUN_THEME_FALLBACK, RUN_THEME_FALLBACK_LIGHT, RUN_THEME_MONO } from "../../src/mini/theme"
+import type { MiniSettingChange, MiniSettings, RunAgent, RunTuiConfig, StreamCommit } from "../../src/mini/types"
+import { createTuiResolvedConfig } from "../fixture/tui-runtime"
+import { tmpdir } from "../fixture/fixture"
+import { createFooterApiFixture } from "./fixture/footer-api"
 
 function progress(input: Partial<StreamCommit> = {}): StreamCommit {
   return {
@@ -36,3 +45,295 @@ test("falls back only when no agent is selected", () => {
   expect(resolveRunAgent(agents, "plan")?.id).toBe("plan")
   expect(resolveRunAgent(agents, "missing")).toBeUndefined()
 })
+
+async function setup(
+  input: {
+    mono?: boolean
+    theme?: RunTuiConfig["theme"]
+    startup?: { version: string; detail: string }
+    update?: (change: MiniSettingChange) => Promise<MiniSettings>
+  } = {},
+) {
+  const mono = input.mono ?? true
+  const app = await createTestRenderer({
+    width: 112,
+    height: 24,
+    screenMode: "split-footer",
+    footerHeight: 4,
+    externalOutputMode: "capture-stdout",
+  })
+  const footer = new RunFooter(app.renderer, {
+    directory: () => "/project",
+    findFiles: async () => [],
+    agents: [{ id: "build", name: "Build", mode: "primary", hidden: false }],
+    references: [],
+    agent: "build",
+    modelLabel: "GPT-5",
+    model: undefined,
+    variant: undefined,
+    first: true,
+    startup: input.startup,
+    wrote: !!input.startup,
+    theme: mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK,
+    tuiConfig: createTuiResolvedConfig({ theme: input.theme }),
+    miniSettings: {
+      current: { ...resolveMiniSettings(), mono },
+      update: input.update,
+    },
+    onPermissionReply: () => {},
+    onFormReply: () => {},
+    onFormCancel: () => {},
+    onEditorOpen: async () => undefined,
+    subscribeThemeSignal: () => () => {},
+  })
+  return { ...app, footer }
+}
+
+test.each(["timer", "output", "close", "panel"] as const)(
+  "startup stays editable and settles exactly once before %s",
+  async (finish) => {
+    const app = await setup({ mono: false, startup: { version: "test", detail: "/project" } })
+    try {
+      await app.renderOnce()
+      expect(app.renderer.root.findDescendantById("mini-startup")).toBeDefined()
+      const editor = app.renderer.currentFocusedEditor
+      await app.mockInput.typeText("draft")
+      expect(editor?.plainText).toBe("draft")
+      expect(app.externalOutput.take()).toEqual([])
+
+      if (finish === "timer") await Bun.sleep(850)
+      if (finish === "output")
+        app.footer.append({ kind: "system", text: "first output", phase: "start", source: "system" })
+      if (finish === "close") app.footer.close()
+      if (finish === "panel") app.mockInput.pressKey("p", { ctrl: true })
+      await app.footer.idle()
+      await app.renderOnce()
+      expect(app.renderer.root.findDescendantById("mini-startup")).toBeUndefined()
+      const rows = app.externalOutput.take().flatMap((event) => event.rows)
+      expect(rows.filter((row) => row.includes("oc mini"))).toEqual(["\u25aa oc mini vtest \u00b7 /project"])
+      if (finish === "output")
+        expect(rows.findIndex((row) => row.includes("first output"))).toBeGreaterThan(
+          rows.findIndex((row) => row.includes("oc mini")),
+        )
+      if (finish !== "panel") expect(app.renderer.currentFocusedEditor).toBe(editor)
+      app.footer.finishStartup()
+      await app.renderOnce()
+      expect(app.externalOutput.take()).toEqual([])
+    } finally {
+      app.footer.destroy()
+      app.renderer.destroy()
+    }
+  },
+)
+
+test("footer usage survives unrelated patches and clears when explicitly undefined", async () => {
+  const app = await setup()
+  try {
+    await app.renderOnce()
+    expect(app.captureCharFrame()).not.toContain("7.5K")
+    app.footer.event({ type: "stream.patch", patch: { first: false, usage: { tokens: 7_508, percent: 5 } } })
+    await app.renderOnce()
+    expect(app.captureCharFrame()).toContain("7.5K")
+    app.footer.event({ type: "stream.patch", patch: { model: "GPT-5.1" } })
+    await app.renderOnce()
+    expect(app.captureCharFrame()).toContain("7.5K")
+    app.footer.event({ type: "stream.patch", patch: { usage: undefined } })
+    await app.renderOnce()
+    expect(app.captureCharFrame()).not.toContain("7.5K")
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+  }
+})
+
+test("motion demo waits for work and can be interrupted without a model call", async () => {
+  const footer = createFooterApiFixture()
+  const controller = new AbortController()
+  const demo = createRunDemo({ sessionID: "seed-demo", thinking: false, footer: footer.api })
+  let finished = false
+  try {
+    expect(demo.interrupt()).toBe(false)
+    const run = demo.prompt({ text: "/fmt motion", parts: [] }, controller.signal).then((handled) => {
+      finished = true
+      return handled
+    })
+    await footer.api.idle()
+    expect(finished).toBe(false)
+    expect(demo.interrupt()).toBe(true)
+    expect(await run).toBe(true)
+    expect(demo.interrupt()).toBe(false)
+  } finally {
+    controller.abort()
+  }
+})
+
+test.each([false, true])("command menu uses its full height on first open (mono=%s)", async (mono) => {
+  const app = await setup({ mono })
+  try {
+    await app.renderOnce()
+    app.mockInput.pressKey("p", { ctrl: true })
+    await app.renderOnce()
+    await app.renderOnce()
+    const frame = app.captureCharFrame()
+    expect(frame).toContain("Open editor")
+    expect(frame).toContain("Show status")
+    expect(frame).toContain("Compact session")
+    expect(frame).toContain("New session")
+    expect(frame).toContain("Skills")
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+  }
+})
+
+test.each([false, true])("monochrome toggles live without replacing the footer (initial=%s)", async (mono) => {
+  const changes: MiniSettingChange[] = []
+  const app = await setup({
+    mono,
+    theme: { name: "system" },
+    update: async (change) => {
+      changes.push(change)
+      return { ...resolveMiniSettings(), [change.key]: change.value }
+    },
+  })
+  app.renderer.getPalette = async () => {
+    throw new Error("no OSC response")
+  }
+  const output: string[] = []
+  app.renderer.on(CliRenderEvents.EXTERNAL_OUTPUT, (event) => {
+    output.push(new TextDecoder().decode(event.snapshot.getRealCharBytes(true)))
+  })
+  try {
+    await app.mockInput.pressKeys(["\x1b]10;rgb:ffff/ffff/ffff\x07", "\x1b]11;rgb:0000/0000/0000\x07"])
+    expect(app.renderer.themeMode).toBe("dark")
+    await app.renderOnce()
+    await app.mockInput.typeText("draft")
+    app.mockInput.pressKey("p", { ctrl: true })
+    await app.renderOnce()
+    await app.mockInput.typeText("settings")
+    await app.renderOnce()
+    app.mockInput.pressEnter()
+    await app.renderOnce()
+    await app.mockInput.typeText("monochrome")
+    await app.renderOnce()
+    const search = app.renderer.currentFocusedRenderable
+    for (const next of [!mono, mono]) {
+      app.mockInput.pressKey("ARROW_RIGHT")
+      await app.flush()
+      await app.footer.idle()
+      await app.renderOnce()
+      expect(app.footer.currentMiniSettings().mono).toBe(next)
+      expect(app.footer.currentTheme()).toBe(next ? RUN_THEME_MONO : RUN_THEME_FALLBACK)
+      expect(app.renderer.currentFocusedRenderable).toBe(search)
+      expect(app.captureCharFrame()).toContain("monochrome")
+      expect(app.captureCharFrame()).not.toContain("restart")
+      app.footer.append({ kind: "user", text: "new output", phase: "start", source: "system" })
+      await app.footer.idle()
+      expect(output.at(-1)).toContain(next ? "> new output" : "\u203a new output")
+      app.renderer.writeToScrollback((ctx) => ({
+        root: new TextRenderable(ctx.renderContext, { content: "external \u2192", width: ctx.width, height: 1 }),
+        height: 1,
+      }))
+      expect(output.at(-1)).toContain(next ? "external ?" : "external \u2192")
+    }
+    expect(changes).toEqual([
+      { key: "mono", value: !mono },
+      { key: "mono", value: mono },
+    ])
+    expect(output.filter((text) => text.includes("new output"))).toHaveLength(2)
+    app.mockInput.pressKey("c", { ctrl: true })
+    await app.renderOnce()
+    expect(app.renderer.currentFocusedEditor?.plainText).toBe("draft")
+    expect(app.captureCharFrame()).toContain(mono ? "| draft" : "\u2503 draft")
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+  }
+})
+
+test.each([false, true])("production footer preserves wrapped input and status on resize (mono=%s)", async (mono) => {
+  const app = await setup({ mono })
+  try {
+    await app.renderOnce()
+    const draft =
+      "Explain how this project is organized, then outline a small change and the checks needed to verify it. Do not modify files."
+    await app.mockInput.typeText(draft)
+    for (const width of [56, 112, 40]) {
+      app.resize(width, 24)
+      await app.renderOnce()
+      await app.renderOnce()
+      expect(app.renderer.currentFocusedEditor!.plainText).toBe(draft)
+      const frame = app.captureCharFrame()
+      expect(frame.split("\n").filter((line) => line.startsWith(mono ? "| " : "┃ "))).toHaveLength(
+        app.renderer.currentFocusedEditor!.virtualLineCount,
+      )
+      expect(app.renderer.currentFocusedEditor!.virtualLineCount).toBeGreaterThan(1)
+      expect(frame).toContain("Build")
+      expect(frame).toContain("GPT-5")
+    }
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+  }
+})
+
+test("explicit theme refresh reloads custom colors without a palette event", async () => {
+  await using tmp = await tmpdir()
+  const previous = process.env.OPENCODE_CONFIG_DIR
+  process.env.OPENCODE_CONFIG_DIR = tmp.path
+  const app = await setup({ mono: false, theme: { name: "mini-refresh", mode: "dark" } })
+  app.renderer.getPalette = async () => {
+    throw new Error("no OSC response")
+  }
+  try {
+    await app.renderOnce()
+    await app.mockInput.typeText("draft")
+    for (const color of ["#123456", "#abcdef"]) {
+      await Bun.write(
+        path.join(tmp.path, "themes", "mini-refresh.json"),
+        JSON.stringify({ version: 2, dark: { text: { default: color } } }),
+      )
+      await app.footer.refreshTheme()
+      await app.renderOnce()
+      expect(
+        app
+          .captureSpans()
+          .lines.flatMap((line) => line.spans)
+          .find((span) => span.text.includes("draft"))
+          ?.fg.toInts(),
+      ).toEqual(RGBA.fromHex(color).toInts())
+    }
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+    if (previous === undefined) delete process.env.OPENCODE_CONFIG_DIR
+    else process.env.OPENCODE_CONFIG_DIR = previous
+  }
+})
+
+test("system fallback follows physical mode changes when palette queries remain unavailable", async () => {
+  const app = await setup({ mono: false, theme: { name: "system" } })
+  app.renderer.getPalette = async () => {
+    throw new Error("no OSC palette response")
+  }
+  try {
+    await app.renderOnce()
+    await app.mockInput.typeText("draft")
+    expect(app.footer.currentTheme()).toBe(RUN_THEME_FALLBACK)
+    await app.mockInput.pressKeys(["\x1b]10;rgb:0000/0000/0000\x07", "\x1b]11;rgb:ffff/ffff/ffff\x07"])
+    expect(app.renderer.themeMode).toBe("light")
+    await app.waitFor(() => app.footer.currentTheme() === RUN_THEME_FALLBACK_LIGHT)
+    await app.flush()
+    expect(app.footer.currentTheme()).toBe(RUN_THEME_FALLBACK_LIGHT)
+    expect(
+      app
+        .captureSpans()
+        .lines.flatMap((line) => line.spans)
+        .find((span) => span.text.includes("draft"))
+        ?.fg.toInts(),
+    ).toEqual((RUN_THEME_FALLBACK_LIGHT.footer.text as RGBA).toInts())
+  } finally {
+    app.footer.destroy()
+    app.renderer.destroy()
+  }
+})

packages/tui/test/mini/footer.width.test.ts

@@ -1,9 +1,115 @@
 import { describe, expect, test } from "bun:test"
-import { footerWidthPolicy } from "../../src/mini/footer.width"
+import { footerStatuslinePolicy, type FooterStatuslineGroup } from "../../src/mini/footer.width"
+import { stringWidth } from "../../src/util/string-width"
+
+const screenshot = {
+  work: [],
+  model: { name: "GPT-5.6 Sol (50% Off)", variant: "max" },
+  agent: "Build",
+  context: { compact: "1% ctx", full: "14.1K (1%)" },
+  cost: "$0.04",
+  provider: "Anomaly / OpenCode",
+  menu: { key: "ctrl+p", label: "menu" },
+} satisfies Omit<Parameters<typeof footerStatuslinePolicy>[0], "width">
 
 describe("run footer width", () => {
-  test("preserves the dialog breakpoint", () => {
-    expect(footerWidthPolicy(79).dialog.narrow).toBe(true)
-    expect(footerWidthPolicy(80).dialog.narrow).toBe(false)
+  test.each([false, true])("progressive layouts fit and preserve information at every width (mono=%s)", (mono) => {
+    const fixtures: Array<Omit<Parameters<typeof footerStatuslinePolicy>[0], "width">> = [
+      { work: [] },
+      screenshot,
+      { ...screenshot, model: { name: "GPT-5", variant: "xhigh" } },
+      { ...screenshot, model: { name: "a model name with a very long and informative suffix".repeat(3) } },
+      {
+        ...screenshot,
+        model: { name: "\u6a21\u578b\ud83d\ude80e\u0301\u5f00\u53d1 Model".repeat(3), variant: "\u9ad8\u7ea7" },
+      },
+      { ...screenshot, model: { name: "GPT-5", variant: "an-unusually-long-but-complete-variant" } },
+      { ...screenshot, status: { text: "esc stop", expanded: "esc interrupt" }, spinner: mono ? "*" : "\u25aa" },
+      {
+        ...screenshot,
+        status: { text: "ctrl+shift+alt+i stop", expanded: "ctrl+shift+alt+i interrupt" },
+        work: [
+          { id: "queued", key: "ctrl+x q", label: "12 queued" },
+          { id: "subagents", key: mono ? "down" : "\u2193", label: "2 sub", expanded: "2 subagents" },
+          { id: "background", key: "ctrl+b", label: "bg", expanded: "background" },
+        ],
+      },
+      { work: [], status: { text: "Shell" }, escape: { key: "esc", label: "normal" }, context: screenshot.context },
+    ]
+    for (const fixture of fixtures) {
+      let previous: FooterStatuslineGroup["id"][] = []
+      for (let width = 0; width <= 280; width++) {
+        const layout = footerStatuslinePolicy({ ...fixture, mono, width })
+        const ids = layout.groups.map((group) => group.id)
+        if (fixture.spinner) {
+          expect(ids[0]).toBe("spinner")
+          expect(layout.text).toStartWith(`${fixture.spinner} `)
+          if (width >= stringWidth(`${fixture.spinner} ${fixture.status!.text}`)) {
+            expect(stringWidth(layout.text)).toBeLessThanOrEqual(width)
+          }
+        }
+        if (stringWidth(layout.text) > width) {
+          expect(ids.every((id) => id === "spinner" || id === "status" || id === "escape")).toBe(true)
+        }
+        for (const id of previous) expect(ids).toContain(id)
+        expect(new Set(ids).size).toBe(ids.length)
+        if (ids.includes("menu")) expect(ids.at(-1)).toBe("menu")
+        const identity = layout.groups.find((group) => group.id === "model")
+        if (identity && fixture.model?.variant) {
+          expect(identity.parts.map((part) => part.text).join("")).toEndWith(` [${fixture.model.variant}]`)
+        }
+        expect(layout.text).not.toContain("\ufffd")
+        previous = ids
+      }
+    }
+  })
+
+  test("identity admission cannot separate the selected variant from its model", () => {
+    const input = { work: [], model: { name: "GPT-5", variant: "max" } }
+    expect(footerStatuslinePolicy({ ...input, width: 10 }).groups).toEqual([])
+    expect(footerStatuslinePolicy({ ...input, width: 11 }).text).toBe("GPT-5 [max]")
+  })
+
+  test("allocation priority is separate from placement", () => {
+    expect(footerStatuslinePolicy({ ...screenshot, width: 15 }).groups.map((group) => group.id)).toEqual(["model"])
+    const full = footerStatuslinePolicy({ ...screenshot, width: 112 })
+    expect(full.text).toBe(
+      "Build \u00b7 GPT-5.6 Sol (50% Off) [max] \u00b7 14.1K (1%) \u00b7 $0.04 \u00b7 Anomaly / OpenCode \u00b7 ctrl+p menu",
+    )
+  })
+
+  test("a non-fitting high-priority stage does not backfill with shorter facts", () => {
+    const input = {
+      ...screenshot,
+      work: [{ id: "queued" as const, key: "ctrl+shift+alt+q", label: "12 queued" }],
+    }
+    expect(footerStatuslinePolicy({ ...input, width: 24 }).groups).toEqual([])
+    expect(footerStatuslinePolicy({ ...input, width: 26 }).groups.map((group) => group.id)).toEqual(["queued"])
+  })
+
+  test("context and cost are distinct additions", () => {
+    const input = { work: [], context: screenshot.context, cost: screenshot.cost }
+    expect(footerStatuslinePolicy({ ...input, width: 6 }).text).toBe("1% ctx")
+    expect(footerStatuslinePolicy({ ...input, width: 10 }).text).toBe("14.1K (1%)")
+    expect(footerStatuslinePolicy({ ...input, width: 18 }).text).toBe("14.1K (1%) \u00b7 $0.04")
+  })
+
+  test("stop-label enhancement cannot remove identity at the former 56-column breakpoint", () => {
+    const input = { ...screenshot, status: { text: "esc stop", expanded: "esc interrupt" } }
+    for (const width of [55, 56, 57, 79, 80, 81]) {
+      const layout = footerStatuslinePolicy({ ...input, width })
+      expect(layout.text).toContain("GPT-5.6 Sol (50% Off) [max]")
+      expect(layout.text).toStartWith("esc stop")
+    }
+    expect(footerStatuslinePolicy({ ...input, width: 160 }).text).toStartWith("esc interrupt")
+  })
+
+  test("required controls use an explicit wrapping fallback without optional groups", () => {
+    expect(footerStatuslinePolicy({ ...screenshot, width: 16, status: { text: "ctrl+shift+alt+x exit" } }).text).toBe(
+      "ctrl+shift+alt+x exit",
+    )
+    expect(
+      footerStatuslinePolicy({ ...screenshot, width: 80, status: { text: "Please confirm\nExit now?" } }).text,
+    ).toBe("Please confirm\nExit now?")
   })
 })

packages/tui/test/mini/runtime.boot.test.ts

@@ -43,6 +43,7 @@ describe("run runtime boot", () => {
       turn_summary: "show",
       footer: "show",
       splash: "show",
+      work_spinner: "block-soft-slide",
       mono: false,
     })
     expect(
@@ -53,6 +54,7 @@ describe("run runtime boot", () => {
           turn_summary: "hide",
           footer: "hide",
           splash: "hide",
+          work_spinner: "block-low-comet",
           mono: true,
         },
       }),
@@ -62,6 +64,7 @@ describe("run runtime boot", () => {
       turn_summary: "hide",
       footer: "hide",
       splash: "hide",
+      work_spinner: "block-low-comet",
       mono: true,
     })
   })

packages/tui/test/mini/runtime.queue.test.ts

@@ -30,6 +30,37 @@ describe("run runtime queue", () => {
     expect(calls).toBe(0)
   })
 
+  test("runs and queues image-only prompts without optimistic image rows", async () => {
+    const ui = createFooterApiFixture()
+    const active = Promise.withResolvers<void>()
+    const queued = Promise.withResolvers<RunPrompt>()
+    const prompt: RunPrompt = {
+      text: "",
+      parts: [{ type: "file", url: "data:image/png;base64,cG5n", mime: "image/png", filename: "image.png" }],
+    }
+    const task = runPromptQueue({
+      footer: ui.api,
+      run: async (input, _signal, admitted) => {
+        expect(input.parts).toEqual(prompt.parts)
+        admitted()
+        await active.promise
+      },
+      admit: async (input, delivery) => {
+        expect(delivery).toBe("queue")
+        queued.resolve(input)
+      },
+      settle: async () => ui.api.close(),
+    })
+
+    ui.submit({ ...prompt, mode: "shell" })
+    ui.submit(prompt)
+    ui.submit(prompt)
+    expect((await queued.promise).parts).toEqual(prompt.parts)
+    expect(ui.commits).toEqual([])
+    active.resolve()
+    await task
+  })
+
   test("treats /exit as a close command", async () => {
     const ui = createFooterApiFixture()
     let calls = 0

packages/tui/test/mini/runtime.test.ts

@@ -21,6 +21,7 @@ function ok<T>(data: T) {
 
 function host(): MiniHost {
   return {
+    version: "local",
     terminal: { stdin: process.stdin },
     platform: "linux",
     stdout: { write() {} },

packages/tui/test/mini/scrollback.image.test.ts

@@ -0,0 +1,210 @@
+import { afterEach, expect, test } from "bun:test"
+import {
+  CliRenderEvents,
+  ImageRenderable,
+  TextRenderable,
+  type NativeImage,
+  type ScrollbackSurface,
+} from "@opentui/core"
+import { createTestRenderer } from "@opentui/core/testing"
+import { RunScrollbackStream } from "../../src/mini/scrollback.surface"
+import { RUN_THEME_FALLBACK, RUN_THEME_MONO } from "../../src/mini/theme"
+import type { StreamCommit } from "../../src/mini/types"
+import { diffImageFixture } from "../fixture/diff-image"
+
+const wide = `data:image/png;base64,${Buffer.from(diffImageFixture).toString("base64")}`
+// A 48 x 192 PNG with four colored quadrants.
+const tall =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAADACAIAAADN8nfJAAAA+klEQVR4nO3bUQ0AIAxDwUmZEETMf+YFTDR8XYIAQmBs7WvdM5HVoVU25ITcIa9MHVIYfR0+V+2HBk3HqKc2dZjLDIpGaWIDOYZgRUGjMVJh6dSEc9YC84U9xcDjKPJcudJ8eyAB1AKMAtcBNCGsMGgoPRwjsBJ6Cs6FLwO8EeeYfKkFuQ5BE1EcYaU/ca6dyOrQsiEn5A55ZeqQwujr8LlqPzRoOkY9tanDXGZQNEoTG8gxBCsKGo2RCkunJpyzFpgv7CkGHkeR58qV5tsDCaAWYBS4DqAJYYVBQ+nhGIGV0FNwLnwZ4I04x+RLLch1CJqI4ggr7Y841wMtbiD+34CxQgAAAABJRU5ErkJggg=="
+
+type Preview = {
+  surface: ScrollbackSurface
+  image: ImageRenderable
+  native: NativeImage | null
+  size: { width: number; height: number }
+  x: number
+  y: number
+  captionHeight: number
+}
+
+const cleanups: Array<() => void> = []
+
+afterEach(() => {
+  cleanups.splice(0).forEach((cleanup) => cleanup())
+})
+
+async function setup(
+  options: { width?: number; height?: number; footerHeight?: number; imagePreview?: boolean; mono?: boolean } = {},
+) {
+  const renderer = await createTestRenderer({
+    width: options.width ?? 80,
+    height: options.height ?? 24,
+    footerHeight: options.footerHeight ?? 6,
+    screenMode: "split-footer",
+    externalOutputMode: "capture-stdout",
+  })
+  const out = {
+    ...renderer,
+    scrollback: new RunScrollbackStream(renderer.renderer, options.mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK, options),
+    previews: [] as Preview[],
+  }
+  cleanups.push(() => {
+    out.scrollback.destroy()
+    out.renderer.destroy()
+  })
+  out.renderer.on(CliRenderEvents.EXTERNAL_OUTPUT, () => {
+    const surface = Reflect.get(out.scrollback, "imageSurface") as ScrollbackSurface | undefined
+    if (!surface || out.previews.some((preview) => preview.surface === surface)) return
+    const image = surface.root.getChildren().find((child) => child instanceof ImageRenderable)
+    const caption = surface.root.getChildren().find((child) => child instanceof TextRenderable)
+    if (!image || !caption) throw new Error("Missing image or caption on image surface")
+    out.previews.push({
+      surface,
+      image,
+      native: image.image,
+      size: { width: image.width, height: image.height },
+      x: image.x,
+      y: image.y,
+      captionHeight: caption.height,
+    })
+  })
+  return out
+}
+
+function image(source = wide, text = "landscape.png", partID = "image-1"): StreamCommit {
+  return { kind: "user", source: "system", phase: "final", messageID: "message-1", partID, text, image: source }
+}
+
+test.each([
+  {
+    name: "wide",
+    image: wide,
+    width: 40,
+    height: 30,
+    size: { width: 40, height: 10 },
+  },
+  {
+    name: "tall",
+    image: tall,
+    width: 80,
+    height: 24,
+    size: { width: 9, height: 17 },
+  },
+])("fits a $name image at the left edge and commits only its fitted rows", async (options) => {
+  const out = await setup({ ...options, imagePreview: true })
+  const listeners = out.renderer.listenerCount(CliRenderEvents.DESTROY)
+  await out.scrollback.append(image(options.image))
+
+  expect(out.previews).toHaveLength(1)
+  const preview = out.previews[0]!
+  expect(preview.size).toEqual(options.size)
+  expect(preview.x).toBe(0)
+  expect(preview.y).toBe(preview.captionHeight)
+  const commits = out.externalOutput.take()
+  expect(commits).toHaveLength(1)
+  expect(commits[0]!.rows[0]).toBe("\u203a landscape.png")
+  expect(commits[0]!.height).toBe(options.size.height + preview.captionHeight)
+  expect(preview.surface.isDestroyed).toBe(true)
+  expect(preview.image.isDestroyed).toBe(true)
+  expect(preview.image.image).toBeNull()
+  expect(() => preview.native!.info()).toThrow()
+  expect(out.renderer.listenerCount(CliRenderEvents.DESTROY)).toBe(listeners)
+})
+
+test("reserves wrapped caption rows and allows caption-only output in a short terminal", async () => {
+  const out = await setup({ width: 20, height: 10, footerHeight: 6, imagePreview: true })
+  await out.scrollback.append(image(tall, "first caption wraps here\nsecond caption line"))
+  expect(out.previews[0]!.captionHeight).toBe(3)
+  expect(out.previews[0]!.size.height).toBe(1)
+  expect(out.externalOutput.take()[0]!.height).toBe(4)
+
+  out.resize(20, 8)
+  await out.scrollback.append(image(wide, "first caption wraps here\nsecond caption line", "image-2"))
+  expect(out.previews[1]!.image.visible).toBe(false)
+  expect(out.externalOutput.take().at(-1)!.height).toBe(3)
+})
+
+test("uses physical cell geometry without enlarging a small image", async () => {
+  const out = await setup({ imagePreview: true })
+  Reflect.set(out.renderer, "_resolution", { width: 800, height: 720 })
+  await out.scrollback.append(image(wide))
+  expect(out.previews[0]!.size).toEqual({ width: 6, height: 1 })
+  expect(out.previews[0]!.x).toBe(0)
+})
+
+test("finishes active text before every image and renders more than three images in order", async () => {
+  const out = await setup({ imagePreview: true })
+  const first = { ...image(wide, "image 1"), kind: "tool", source: "tool", tool: "read" } as const
+  await out.scrollback.append({ ...first, image: undefined, tool: "shell", phase: "progress", text: "before images" })
+  expect(out.externalOutput.take()).toEqual([])
+  await out.scrollback.append(first)
+  for (const index of [2, 3, 4, 5]) {
+    await out.scrollback.append({ ...first, partID: `image-${index}`, text: `image ${index}`, image: tall })
+  }
+  await out.scrollback.append({ kind: "system", source: "system", phase: "final", text: "after images" })
+  await out.scrollback.complete()
+
+  expect(out.previews).toHaveLength(5)
+  expect(
+    out.externalOutput
+      .take()
+      .filter((commit) => commit.text.trim())
+      .map((commit) => commit.rows[0]),
+  ).toEqual(["before images", "image 1", "image 2", "image 3", "image 4", "image 5", "after images"])
+  expect(out.previews.every((preview) => preview.image.isDestroyed && preview.surface.isDestroyed)).toBe(true)
+})
+
+test.each([{}, { imagePreview: false }, { imagePreview: true, mono: true }])(
+  "keeps user and tool captions without loading images when previews are disabled or monochrome (%j)",
+  async (options) => {
+    const out = await setup(options)
+    const commit = image("data:image/png;base64,AQID", "attachment.png")
+    await out.scrollback.append(commit)
+    await out.scrollback.append({ ...commit, kind: "tool", source: "tool", tool: "read", partID: "image-2" })
+    expect(out.previews).toEqual([])
+    expect(
+      out.externalOutput
+        .take()
+        .filter((commit) => commit.text.trim())
+        .map((commit) => commit.rows[0]),
+    ).toEqual([`${options.mono ? ">" : "\u203a"} attachment.png`, "attachment.png"])
+  },
+)
+
+test("prints a failed decode caption and continues with text", async () => {
+  const out = await setup({ imagePreview: true })
+  await expect(out.scrollback.append(image("data:image/png;base64,AQID", "broken.png"))).resolves.toBeUndefined()
+  await out.scrollback.append({ kind: "system", source: "system", phase: "final", text: "still running" })
+  const output = out.externalOutput.takeText()
+  expect(output).toContain("\u203a broken.png\nNo preview")
+  expect(output).toContain("still running")
+  expect(out.previews[0]!.image.loadError).not.toBeNull()
+  expect(out.previews[0]!.image.isDestroyed).toBe(true)
+  expect(out.previews[0]!.surface.isDestroyed).toBe(true)
+})
+
+test("remeasures at load completion", async () => {
+  const out = await setup({ imagePreview: true })
+  const pending = out.scrollback.append(image(tall))
+  await Promise.resolve()
+  out.resize(40, 18)
+  await pending
+  expect(out.previews[0]!.size).toEqual({ width: 6, height: 11 })
+})
+
+test.each(["stream", "renderer"])("disposes an image load when the %s is destroyed", async (owner) => {
+  const out = await setup({ imagePreview: true })
+  const pending = out.scrollback.append(image())
+  await Promise.resolve()
+  const surface = Reflect.get(out.scrollback, "imageSurface") as ScrollbackSurface
+  const preview = surface.root.getChildren().find((child) => child instanceof ImageRenderable)!
+  expect(preview.loading).toBe(true)
+
+  if (owner === "stream") out.scrollback.destroy()
+  if (owner === "renderer") out.renderer.destroy()
+  await expect(pending).resolves.toBeUndefined()
+  expect(surface.isDestroyed).toBe(true)
+  expect(preview.isDestroyed).toBe(true)
+  expect(preview.image).toBeNull()
+  expect(out.externalOutput.take()).toEqual([])
+})

packages/tui/test/mini/scrollback.surface.test.ts

@@ -1,11 +1,12 @@
 import { afterEach, expect, test } from "bun:test"
 import type { SessionMessageAssistantTool } from "@opencode-ai/client/promise"
-import { CliRenderEvents, MarkdownRenderable, RGBA, SyntaxStyle, TextRenderable } from "@opentui/core"
+import { CliRenderEvents, MarkdownRenderable, RGBA, SyntaxStyle, TextAttributes, TextRenderable } from "@opentui/core"
 import { MockTreeSitterClient, createTestRenderer, type TestRenderer } from "@opentui/core/testing"
 import { monoSnapshot } from "../../src/mini/mono"
 import { RunScrollbackStream } from "../../src/mini/scrollback.surface"
+import { entryLook } from "../../src/mini/scrollback.shared"
 import { entryGroupKey } from "../../src/mini/scrollback.writer"
-import { RUN_THEME_FALLBACK, type RunTheme } from "../../src/mini/theme"
+import { RUN_THEME_FALLBACK, RUN_THEME_MONO, type RunTheme } from "../../src/mini/theme"
 import type { StreamCommit } from "../../src/mini/types"
 import { canonicalToolPart } from "./fixture/tool-part"
 
@@ -213,6 +214,64 @@ test("theme swaps preserve streamed markdown parser state", async () => {
   }
 })
 
+test.each([false, true])("monochrome switches preserve printed blocks and open fences (initial=%s)", async (mono) => {
+  const out = await setup()
+  try {
+    await out.scrollback.setMono(mono)
+    out.scrollback.setTheme(mono ? RUN_THEME_MONO : RUN_THEME_FALLBACK)
+    await out.scrollback.append(assistant('Printed block\n\n```ts\nconst arrow = "'))
+    const printed = claim(out.renderer)
+    try {
+      expect(render(printed)).toContain("Printed block")
+      expect(render(printed)).not.toContain("const arrow")
+      await out.scrollback.setMono(!mono)
+      out.scrollback.setTheme(mono ? RUN_THEME_FALLBACK : RUN_THEME_MONO)
+      expect(render(claim(out.renderer))).toBe("")
+      await out.scrollback.append(assistant('\u2192"\n```\n\nNext block'))
+      await out.scrollback.complete()
+      const next = claim(out.renderer)
+      try {
+        expect(render(next)).toContain(mono ? 'const arrow = "\u2192"' : 'const arrow = "->"')
+        expect(render(next)).toContain("Next block")
+        expect(render(next)).not.toContain("Printed block")
+        expect(render(next)).not.toContain("```")
+        expect(render(printed)).toContain("Printed block")
+      } finally {
+        destroy(next)
+      }
+    } finally {
+      destroy(printed)
+    }
+  } finally {
+    out.scrollback.destroy()
+    destroy(claim(out.renderer))
+  }
+})
+
+test.each([false, true])(
+  "monochrome switches finish pending reasoning without repeating it (initial=%s)",
+  async (mono) => {
+    const out = await setup()
+    const output: string[] = []
+    out.renderer.on(CliRenderEvents.EXTERNAL_OUTPUT, (event) => {
+      output.push(decoder.decode(event.snapshot.getRealCharBytes(true)))
+    })
+    try {
+      await out.scrollback.setMono(mono)
+      await out.scrollback.append(reasoning("Before switch"))
+      await out.scrollback.setMono(!mono)
+      expect(output.join("")).toContain("Before switch")
+      await out.scrollback.append(reasoning(" after switch"))
+      await out.scrollback.complete()
+      expect(output.join("").match(/Before switch/g)).toHaveLength(1)
+      expect(output.join("").match(/after switch/g)).toHaveLength(1)
+    } finally {
+      out.scrollback.destroy()
+      destroy(claim(out.renderer))
+    }
+  },
+)
+
 test("renders monochrome scrollback as ASCII markdown", async () => {
   const out = await setup({ mono: true, width: 60 })
   const output: string[] = []
@@ -370,6 +429,22 @@ function toolCommit(input: {
   }
 }
 
+test("entry looks preserve semantic colors without dimming and keep errors bold", () => {
+  const theme = {
+    ...RUN_THEME_FALLBACK.entry,
+    system: { body: "#123456" },
+    reasoning: { body: "#abcdef" },
+  }
+
+  expect(entryLook(reasoning("Thinking: next steps"), theme)).toEqual({ fg: theme.reasoning.body })
+  expect(entryLook(reasoning("", "final"), theme)).toEqual({ fg: theme.system.body })
+  expect(entryLook(error("failed"), theme)).toEqual({ fg: theme.error.body, attrs: TextAttributes.BOLD })
+  expect(entryLook(toolCommit({ tool: "shell", phase: "final", toolState: "error" }), theme)).toEqual({
+    fg: theme.error.body,
+    attrs: TextAttributes.BOLD,
+  })
+})
+
 test("scopes repeated tool part IDs to their assistant messages", () => {
   const first = toolCommit({
     tool: "read",

packages/tui/test/mini/session.shared.test.ts

@@ -133,6 +133,50 @@ describe("run session shared", () => {
     expect(out[0]?.parts[0]).not.toBe(parts[0])
   })
 
+  test("keeps image-only history and preserves inline attachment metadata and skills", () => {
+    const message = userMessage("msg_image", "", {
+      files: [
+        {
+          data: "cG5n",
+          mime: "image/png",
+          source: { type: "inline" },
+          name: "image.png",
+          description: "Diagram",
+        },
+        {
+          data: "c2VydmVy",
+          mime: "image/png",
+          source: { type: "uri", uri: "file:///remote/image.png" },
+        },
+      ],
+      skills: [{ id: "effect", name: "Effect", mention: { text: "@effect", start: 0, end: 7 } }],
+    })
+
+    expect(sessionHistory(createSession([message]))).toEqual([
+      {
+        text: "",
+        parts: [
+          {
+            type: "file",
+            url: "data:image/png;base64,cG5n",
+            mime: "image/png",
+            filename: "image.png",
+            description: "Diagram",
+            source: undefined,
+          },
+          {
+            type: "file",
+            url: "file:///remote/image.png",
+            mime: "image/png",
+            filename: undefined,
+            source: undefined,
+          },
+          { type: "skill", id: "effect", source: { value: "@effect", start: 0, end: 7 } },
+        ],
+      },
+    ])
+  })
+
   test("returns the latest matching variant for the active model", () => {
     const session: RunSession = {
       first: false,

packages/tui/test/mini/splash.test.ts

@@ -0,0 +1,196 @@
+import { expect, test } from "bun:test"
+import { RGBA, TextAttributes, type ScrollbackWriter } from "@opentui/core"
+import { createTestRenderer } from "@opentui/core/testing"
+import { entrySplash, entrySplashLayout, exitSplash } from "../../src/mini/splash"
+import { stringWidth } from "../../src/util/string-width"
+
+const preview = "1.18.4-preview.abcd1234567890"
+const marker = "▪"
+const sessionID = "ses_fac1eb1b0ffeOk15TDttH2E1Oy"
+const theme = {
+  left: RGBA.fromIndex(8, "#666666"),
+  right: RGBA.defaultForeground("#cccccc"),
+  leftShadow: RGBA.defaultBackground("#111111"),
+}
+
+async function renderSplash(writer: ScrollbackWriter, width: number) {
+  const app = await createTestRenderer({ width, height: 8, footerHeight: 4 })
+  try {
+    const snapshot = writer({
+      width,
+      widthMethod: app.renderer.widthMethod,
+      tailColumn: 0,
+      renderContext: app.renderer,
+    })
+    app.renderer.root.add(snapshot.root)
+    await app.renderOnce()
+
+    const frame = app
+      .captureCharFrame()
+      .split("\n")
+      .map((row) => row.trimEnd())
+    const rows = frame.slice(0, snapshot.height)
+    const spans = app.captureSpans().lines.flatMap((line) => line.spans)
+    expect(frame.slice(snapshot.height).every((row) => row === "")).toBe(true)
+    expect(rows[0]).toBe("")
+    expect(spans.every((span) => !(span.attributes & TextAttributes.DIM))).toBe(true)
+    return { rows, spans }
+  } finally {
+    app.renderer.destroy()
+  }
+}
+
+test.each([
+  { width: 80, mono: false, detail: "~/src/wt/oc-mini-v2", metadata: " vlocal · ~/src/wt/oc-mini-v2" },
+  { width: 80, mono: true, detail: "~/src/wt/oc-mini-v2", metadata: " vlocal - ~/src/wt/oc-mini-v2" },
+  { width: 20, mono: false, detail: "/home/研究/長いディレクトリ/画面/設定/界e\u0301🙂", metadata: " · 界e\u0301🙂" },
+])("entry renders metadata with distinct foreground roles (%o)", async (input) => {
+  const result = await renderSplash(entrySplash({ ...input, version: "local", theme }), input.width)
+  const label = `${input.mono ? "[O]" : marker} oc mini`
+  expect(result.rows).toEqual(["", label + input.metadata])
+  const labelStyle = result.spans.find((span) => span.text === label)
+  expect(labelStyle?.width).toBe(stringWidth(label))
+  expect(labelStyle?.fg.intent).toBe("default")
+  expect(labelStyle?.fg.toInts()).toEqual(theme.right.toInts())
+  const metadata = result.spans.find((span) => span.fg.intent === "indexed")
+  expect(metadata?.width).toBe(stringWidth(input.metadata))
+  expect(metadata?.fg.toInts()).toEqual(theme.left.toInts())
+  expect(result.spans.every((span) => !(span.attributes & TextAttributes.BOLD))).toBe(true)
+})
+
+test.each([
+  { width: 20, mono: false, version: "local", expected: `${marker} oc mini` },
+  { width: 22, mono: false, version: "local", expected: `${marker} oc mini · oc-mini-v2` },
+  { width: 29, mono: false, version: "local", expected: `${marker} oc mini vlocal · oc-mini-v2` },
+  { width: 31, mono: false, version: "local", expected: `${marker} oc mini vlocal · …/oc-mini-v2` },
+  { width: 20, mono: false, version: preview, expected: `${marker} oc mini` },
+  { width: 24, mono: false, version: preview, expected: `${marker} oc mini · oc-mini-v2` },
+  { width: 24, mono: true, version: preview, expected: "[O] oc mini - oc-mini-v2" },
+  { width: 32, mono: false, version: preview, expected: `${marker} oc mini · oc-mini-v2` },
+])("entry progressively admits the basename, whole version, and parent directories (%o)", (input) => {
+  const layout = entrySplashLayout({ ...input, detail: "~/src/wt/oc-mini-v2" })
+  expect(layout.label + layout.metadata).toBe(input.expected)
+})
+
+test.each([undefined, "", "/", "~/", "C:\\projects\\mini\\"])(
+  "entry handles absent and root locations (%s)",
+  (detail) => {
+    const layout = entrySplashLayout({ width: 80, version: "local", detail })
+    expect(layout.metadata).toBe(" vlocal" + (detail ? ` · ${detail}` : ""))
+  },
+)
+
+test.each([false, true])("entry layout preserves admitted information at every width (mono=%s)", (mono) => {
+  const suffix = (value: string) =>
+    value
+      .replace(/^(?:…|\.\.\.)[/\\]/, "")
+      .replace(/[\\/]+/g, "/")
+      .replace(/\/$/, "")
+  for (const detail of [
+    undefined,
+    "",
+    "/",
+    "~/",
+    "x/y",
+    "a/b/c",
+    "~/src/wt/oc-mini-v2",
+    "C:\\projects\\mini\\",
+    "/home/研究/画面/界e\u0301🙂",
+    "~/project-directory-that-cannot-meaningfully-fit",
+  ]) {
+    for (const version of ["", "local", preview]) {
+      let previous = entrySplashLayout({ width: 0, detail, version, mono })
+      for (let width = 1; width <= 160; width++) {
+        const layout = entrySplashLayout({ width, detail, version, mono })
+        expect(stringWidth(layout.label + layout.metadata)).toBeLessThanOrEqual(width)
+        expect(layout.version === "" || layout.version === version).toBe(true)
+        if (previous.version) expect(layout.version).toBe(previous.version)
+        if (previous.path) {
+          expect(layout.path).not.toBe("")
+          expect(suffix(layout.path)).toEndWith(suffix(previous.path))
+        }
+        if (layout.version && detail) expect(layout.path).not.toBe("")
+        if (layout.path) expect(suffix(detail!)).toEndWith(suffix(layout.path))
+        const marked = `${mono ? "[O]" : marker} oc mini`
+        expect(layout.label).toBe(stringWidth(marked) <= width ? marked : "oc mini".slice(0, width))
+        previous = layout
+      }
+      expect(previous.path).toBe(detail ?? "")
+      expect(previous.version).toBe(version)
+    }
+  }
+})
+
+test.each([false, true])("entry skips abbreviated paths that are longer than the full path (mono=%s)", (mono) => {
+  const label = `${mono ? "[O]" : marker} oc mini`
+  const metadata = mono ? " vlocal - a/b/c" : " vlocal · a/b/c"
+  expect(
+    entrySplashLayout({ width: stringWidth(label + metadata), version: "local", detail: "a/b/c", mono }),
+  ).toMatchObject({ label, metadata, path: "a/b/c" })
+})
+
+test.each(["entry", "exit"])("%s commits one scrollback snapshot without reflow on resize", async (kind) => {
+  const writer =
+    kind === "entry"
+      ? entrySplash({ version: "local", detail: "~/src/wt/oc-mini-v2", theme })
+      : exitSplash({ title: "Review mini layout", session_id: sessionID, theme })
+  const result = await renderSplash(writer, 24)
+  const app = await createTestRenderer({
+    width: 24,
+    height: 8,
+    footerHeight: 4,
+    screenMode: "split-footer",
+    externalOutputMode: "capture-stdout",
+  })
+  try {
+    app.renderer.writeToScrollback(writer)
+    await app.renderOnce()
+    expect(app.externalOutput.take()).toMatchObject([
+      {
+        width: 24,
+        height: result.rows.length,
+        rowColumns: 24,
+        rows: result.rows,
+        startOnNewLine: true,
+        trailingNewline: false,
+      },
+    ])
+    app.resize(112, 8)
+    await app.renderOnce()
+    expect(app.externalOutput.take()).toEqual([])
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
+test.each(
+  [
+    { width: 16, showSession: true },
+    { width: 56, showSession: true },
+    { width: 80, showSession: true },
+    { width: 80, showSession: false },
+  ].flatMap((size) => [false, true].map((mono) => ({ ...size, mono }))),
+)("exit retains the complete resume command (%o)", async (input) => {
+  const result = await renderSplash(
+    exitSplash({ ...input, title: "Review mini layout", session_id: sessionID, theme }),
+    input.width,
+  )
+  const command = `opencode mini -s ${sessionID}`
+  const commandRows =
+    input.width >= 80 ? [result.rows[2].slice(result.rows[2].indexOf("opencode"))] : result.rows.slice(1)
+  const reconstructed = commandRows
+    .map((row, index) => (index < commandRows.length - 1 ? row.padEnd(input.width) : row))
+    .join("")
+  expect(reconstructed).toBe(command)
+  if (input.width >= 80) {
+    expect(result.rows[1].startsWith(input.mono ? "[O]" : "█▀▀█")).toBe(true)
+    expect(result.rows[1].includes("Session  Review mini layout")).toBe(input.showSession)
+    expect(result.rows[2]).toContain("Continue " + command)
+  } else {
+    expect(result.rows.join("\n")).not.toMatch(/Session|Continue|Review mini layout|█|\[O\]/)
+    expect(result.rows).toHaveLength(1 + Math.ceil(command.length / input.width))
+  }
+  if (input.mono) expect(result.rows.join("")).not.toMatch(/[^\x20-\x7e]/)
+  expect(result.spans.find((span) => span.text.includes("opencode"))?.fg.intent).toBe("default")
+  expect(result.spans.find((span) => span.text.includes("opencode"))?.fg.toInts()).toEqual(theme.right.toInts())
+})

packages/tui/test/mini/stream-v2.transport.test.ts

@@ -9,6 +9,8 @@ import {
   type MessageListOutput,
   type OpenCodeClient,
   type PermissionRequest,
+  type SessionInboxInfo,
+  type ToolContent,
 } from "@opencode-ai/client/promise"
 import { createSessionTransport } from "../../src/mini/stream-v2.transport"
 import { entryBody } from "../../src/mini/entry.body"
@@ -98,6 +100,15 @@ function footer() {
 
 type SessionMessages = MessageListOutput["data"]
 
+const image = {
+  data: "cG5n",
+  mime: "image/png",
+  source: { type: "inline" },
+  name: "image.png",
+  description: "Diagram",
+  mention: { start: 5, end: 14, text: "[Image 1]" },
+} as const
+
 function compaction(status: "running" | "completed", summary: string): SessionMessages[number] {
   const message = {
     id: "msg_compaction",
@@ -217,6 +228,175 @@ afterEach(() => {
 })
 
 describe("V2 mini transport", () => {
+  test.each(["before", "after"])("renders materialized prompt images when delivery is %s the ack", async (order) => {
+    const events = feed()
+    events.push(connected())
+    const requested = defer()
+    const ack = defer()
+    const admitted = defer()
+    const idle = defer()
+    const messages: SessionMessages = []
+    const client = sdk({ streams: [events], messages: { ses_1: messages }, wait: () => idle.promise })
+    const ui = footer()
+    const live: StreamCommit[] = []
+    const files = [
+      { ...image, data: "c2VydmVy", name: "remote.png", source: { type: "uri" as const, uri: "file:///remote.png" } },
+      image,
+    ]
+    const pending = {
+      id: "msg_prompt",
+      sessionID: "ses_1",
+      type: "user",
+      payload: { text: "look [Image 1]", files },
+      delivery: "steer",
+      timeCreated: 1,
+    } satisfies SessionInboxInfo
+    const prompt = spyOn(client.session, "prompt").mockImplementation(() => {
+      requested.resolve()
+      return ack.promise.then(() => pending) as never
+    })
+    const transport = await createSessionTransport({
+      sdk: client,
+      sessionID: "ses_1",
+      thinking: false,
+      replay: true,
+      footer: ui.api,
+      onCommit: (commit) => live.push(commit),
+    })
+    ui.api.append({ kind: "user", source: "system", text: pending.payload.text, messageID: pending.id, phase: "start" })
+    const turn = transport.runPromptTurn(
+      {
+        agent: undefined,
+        model: undefined,
+        variant: undefined,
+        prompt: {
+          messageID: pending.id,
+          text: pending.payload.text,
+          parts: [
+            {
+              type: "file",
+              url: "data:image/png;base64,cG5n",
+              filename: image.name,
+              mime: image.mime,
+              description: image.description,
+              source: { type: "file", text: { start: 5, end: 14, value: "[Image 1]" } },
+            },
+          ],
+        },
+        files: [{ type: "file", url: "file:///remote.png", filename: "remote.png", mime: "image/png" }],
+        includeFiles: true,
+      },
+      admitted.resolve,
+    )
+    await requested.promise
+    if (order === "after") {
+      ack.resolve()
+      await admitted.promise
+    }
+    expect(ui.commits.filter((commit) => commit.image)).toEqual([])
+    events.push({
+      id: "evt_delivered",
+      created: 1,
+      type: "session.inbox.delivered",
+      durable: durable("ses_1"),
+      data: { sessionID: "ses_1", inboxID: pending.id },
+    })
+    while (!ui.events.some((event) => event.type === "stream.patch" && event.patch.status === "waiting for assistant"))
+      await Bun.sleep(0)
+    ack.resolve()
+    await admitted.promise
+
+    expect(prompt).toHaveBeenCalledWith(
+      expect.objectContaining({
+        files: [
+          { uri: "file:///remote.png", name: "remote.png" },
+          {
+            uri: "data:image/png;base64,cG5n",
+            name: image.name,
+            description: image.description,
+            mention: image.mention,
+          },
+        ],
+      }),
+      expect.anything(),
+    )
+    const images = ui.commits.filter((commit) => commit.image)
+    expect(images).toEqual([
+      {
+        kind: "user",
+        source: "system",
+        text: "remote.png",
+        image: "data:image/png;base64,c2VydmVy",
+        messageID: pending.id,
+        partID: "image:0",
+        phase: "final",
+      },
+      {
+        kind: "user",
+        source: "system",
+        text: image.name,
+        image: "data:image/png;base64,cG5n",
+        messageID: pending.id,
+        partID: "image:1",
+        phase: "final",
+      },
+    ])
+    messages.push({ id: pending.id, type: "user", ...pending.payload, time: { created: 1 } })
+    idle.resolve()
+    await turn
+
+    expect(ui.commits.filter((commit) => commit.image)).toEqual(images)
+    expect(ui.commits.filter((commit) => commit.kind === "user" && !commit.image)).toHaveLength(1)
+    await transport.replayOnResize({
+      localRows: () => live.map((commit) => ({ commit })),
+      reset: async () => {
+        ui.commits.length = 0
+      },
+    })
+    expect(ui.commits.filter((commit) => commit.image)).toEqual(images)
+    await transport.close()
+  })
+
+  test.each([true, false])(
+    "preserves visible image identity and suppresses unreplayed images with replay=%s",
+    async (replay) => {
+      const events = feed()
+      events.push(connected())
+      const ui = footer()
+      const transport = await createSessionTransport({
+        sdk: sdk({
+          streams: [events],
+          messages: {
+            ses_1: [
+              {
+                id: "msg_images",
+                type: "user",
+                text: "",
+                files: [
+                  image,
+                  image,
+                  { ...image, description: "Another diagram" },
+                  { ...image, source: { type: "uri", uri: "file:///image.png" } },
+                ],
+                time: { created: 1 },
+              },
+            ],
+          },
+        }),
+        sessionID: "ses_1",
+        thinking: false,
+        replay,
+        footer: ui.api,
+      })
+
+      await transport.waitForIdle()
+      expect(ui.commits).toHaveLength(replay ? 3 : 0)
+      expect(ui.commits.every((commit) => commit.image === "data:image/png;base64,cG5n")).toBe(true)
+      expect(new Set(ui.commits.map((commit) => commit.partID)).size).toBe(replay ? 3 : 0)
+      await transport.close()
+    },
+  )
+
   test("renders projected compactions as labeled transcript boundaries", async () => {
     const events = feed()
     events.push(connected())
@@ -307,7 +487,7 @@ describe("V2 mini transport", () => {
     await transport.close()
   })
 
-  test("formats footer usage with compact tokens and context percentage", async () => {
+  test("preserves numeric footer tokens, context percentage, and cost-only usage", async () => {
     const events = feed()
     events.push(connected())
     const ui = footer()
@@ -346,7 +526,26 @@ describe("V2 mini transport", () => {
     })
 
     while (!ui.events.some((event) => event.type === "stream.patch" && event.patch.usage)) await Bun.sleep(0)
-    expect(ui.events).toContainEqual({ type: "stream.patch", patch: { usage: "7.5K (5%)" } })
+    expect(ui.events).toContainEqual({ type: "stream.patch", patch: { usage: { tokens: 7_508, percent: 5 } } })
+
+    events.push({
+      id: "evt_cost_only",
+      created: 3,
+      type: "session.step.ended",
+      durable: durable("ses_1", 3),
+      data: {
+        sessionID: "ses_1",
+        assistantMessageID: "msg_cost_only",
+        finish: "stop",
+        cost: 0.1234,
+        tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+      },
+    })
+    while (!ui.events.some((event) => event.type === "stream.patch" && event.patch.usage?.cost)) await Bun.sleep(0)
+    expect(ui.events).toContainEqual({
+      type: "stream.patch",
+      patch: { usage: { tokens: 0, percent: undefined, cost: 0.1234 } },
+    })
     await transport.close()
   })
 
@@ -669,6 +868,7 @@ describe("V2 mini transport", () => {
             type: "user",
             payload: {
               text: "follow up",
+              files: [image],
               skills: [
                 { id: "effect", name: "Effect", text: "Use Effect services" },
                 { id: "effect", name: "Effect" },
@@ -681,7 +881,7 @@ describe("V2 mini transport", () => {
             sessionID: "ses_1",
             timeCreated: 2,
             type: "user",
-            payload: { text: "remove me" },
+            payload: { text: "remove me", files: [image] },
             delivery: "queue",
           },
         ],
@@ -717,6 +917,7 @@ describe("V2 mini transport", () => {
       expect.objectContaining({ kind: "user", text: "follow up" }),
     ])
     expect(pending()).toEqual([["msg_cancelled", "queue"]])
+    expect(ui.commits.some((commit) => commit.image)).toBe(false)
     events.push({
       id: "evt_queued",
       created: 4,
@@ -746,7 +947,10 @@ describe("V2 mini transport", () => {
       data: { sessionID: "ses_1", inboxID: "msg_queued" },
     })
     while (pending()?.length !== 0) await Bun.sleep(0)
-    expect(ui.commits.filter((item) => item.messageID === "msg_queued")).toHaveLength(2)
+    expect(ui.commits.filter((item) => item.messageID === "msg_queued")).toHaveLength(3)
+    expect(ui.commits.filter((commit) => commit.image)).toEqual([
+      expect.objectContaining({ kind: "user", messageID: "msg_queued", image: "data:image/png;base64,cG5n" }),
+    ])
     const prompt = spyOn(client.session, "prompt").mockImplementation(
       (request) => ok(promptAdmission(request)) as never,
     )
@@ -1277,10 +1481,12 @@ describe("V2 mini transport", () => {
     const second = feed()
     first.push(connected("evt_connected_1"))
     second.push(connected("evt_connected_2"))
+    const idle = defer()
     let running = true
     let projected = false
     const client = sdk({
       streams: [first, second],
+      wait: () => idle.promise,
       active: () => {
         const active: Record<string, { type: "running" }> = {}
         if (running) active.ses_1 = { type: "running" }
@@ -1295,7 +1501,7 @@ describe("V2 mini transport", () => {
                 id: "msg_prompt",
                 type: "user",
                 text: "hello",
-                files: [],
+                files: [image],
                 agents: [],
                 time: { created: 2 },
               },
@@ -1332,9 +1538,16 @@ describe("V2 mini transport", () => {
     projected = true
     running = false
     first.close()
+    while (!ui.commits.some((commit) => commit.image)) await Bun.sleep(0)
+    idle.resolve()
     await turn
 
-    expect(ui.commits.filter((item) => item.kind === "user" && item.messageID === "msg_prompt")).toHaveLength(1)
+    expect(
+      ui.commits.filter((item) => item.kind === "user" && !item.image && item.messageID === "msg_prompt"),
+    ).toHaveLength(1)
+    expect(ui.commits.filter((item) => item.image)).toEqual([
+      expect.objectContaining({ kind: "user", messageID: "msg_prompt", image: "data:image/png;base64,cG5n" }),
+    ])
     await transport.close()
   })
 
@@ -2209,6 +2422,114 @@ describe("V2 mini transport", () => {
     await transport.close()
   })
 
+  test.each(["completed", "error"] as const)(
+    "renders only terminal inline tool images for %s results across resize",
+    async (status) => {
+      const events = feed()
+      events.push(connected())
+      const messages: SessionMessages = []
+      const client = sdk({ streams: [events], messages: { ses_1: messages } })
+      const ui = footer()
+      const live: StreamCommit[] = []
+      const transport = await createSessionTransport({
+        sdk: client,
+        sessionID: "ses_1",
+        thinking: false,
+        replay: true,
+        footer: ui.api,
+        onCommit: (commit) => live.push(commit),
+      })
+      const content = [
+        { type: "text", text: "Captured screenshot" },
+        { type: "file", mime: "image/png", uri: "data:image/png;base64,cG5n" },
+        { type: "file", mime: "image/png", uri: "https://example.com/remote.png" },
+        { type: "file", mime: "text/plain", uri: "data:text/plain;base64,dGV4dA==" },
+        { type: "file", mime: "application/pdf", uri: "data:image/png;base64,cG5n" },
+      ] satisfies [ToolContent, ...ToolContent[]]
+      const error = { type: "unknown", message: "Tool failed after capturing image" } as const
+      const data = { sessionID: "ses_1", assistantMessageID: "msg_tool", id: "call_image", executed: true, content }
+      const terminal: RunV2Event =
+        status === "completed"
+          ? { id: "evt_result", created: 3, type: "session.tool.success", durable: durable("ses_1", 3, 2), data }
+          : {
+              id: "evt_result",
+              created: 3,
+              type: "session.tool.failed",
+              durable: durable("ses_1", 3, 2),
+              data: { ...data, error },
+            }
+      events.push({
+        id: "evt_input",
+        created: 1,
+        type: "session.tool.input.started",
+        durable: durable("ses_1", 1),
+        data: { sessionID: "ses_1", assistantMessageID: "msg_tool", id: "call_image", name: "read" },
+      })
+      events.push({
+        id: "evt_called",
+        created: 2,
+        type: "session.tool.called",
+        durable: durable("ses_1", 2),
+        data: {
+          sessionID: "ses_1",
+          assistantMessageID: "msg_tool",
+          id: "call_image",
+          input: { file_path: "image.png" },
+          executed: true,
+        },
+      })
+      while (!ui.commits.some((commit) => commit.toolState === "running")) await Bun.sleep(0)
+      expect(ui.commits.some((commit) => commit.image)).toBe(false)
+      events.push(terminal)
+      events.push(terminal)
+      while (!ui.commits.some((commit) => commit.image)) await Bun.sleep(0)
+      const images = ui.commits.filter((commit) => commit.image)
+      expect(images).toEqual([
+        {
+          kind: "tool",
+          source: "tool",
+          text: "[Image 1]",
+          image: "data:image/png;base64,cG5n",
+          messageID: "msg_tool",
+          partID: "prt_call_image:image:0",
+          phase: "final",
+        },
+      ])
+
+      const message = {
+        id: "msg_tool",
+        type: "assistant" as const,
+        agent: "build",
+        model: { providerID: "test", id: "model" },
+        content: [
+          canonicalToolPart(
+            "read",
+            status === "completed" ? { status, input: {}, content } : { status, input: {}, content, error },
+            "call_image",
+          ),
+        ],
+        time: { created: 1 },
+      }
+      messages.push({ ...message, content: [] })
+      await transport.replayOnResize({
+        localRows: () => live.map((commit) => ({ commit })),
+        reset: async () => {
+          ui.commits.length = 0
+        },
+      })
+      expect(ui.commits.filter((commit) => commit.image)).toEqual(images)
+      messages[0] = message
+      await transport.replayOnResize({
+        localRows: () => live.map((commit) => ({ commit })),
+        reset: async () => {
+          ui.commits.length = 0
+        },
+      })
+      expect(ui.commits.filter((commit) => commit.image)).toEqual(images)
+      await transport.close()
+    },
+  )
+
   test("waits for the attempted web search provider before rendering its title", async () => {
     const events = feed()
     events.push(connected())
@@ -3300,7 +3621,10 @@ describe("V2 mini transport", () => {
         id: "call_child_shell",
         error: { type: "unknown", message: "child boom" },
         metadata: { checkpoint: "child" },
-        content: [{ type: "text", text: "child partial" }],
+        content: [
+          { type: "text", text: "child partial" },
+          { type: "file", mime: "image/png", uri: "data:image/png;base64,cG5n" },
+        ],
         executed: true,
       },
     })
@@ -3327,8 +3651,19 @@ describe("V2 mini transport", () => {
     ).toMatchObject({
       status: "error",
       metadata: { checkpoint: "child" },
-      content: [{ type: "text", text: "child partial" }],
+      content: [
+        { type: "text", text: "child partial" },
+        { type: "file", mime: "image/png", uri: "data:image/png;base64,cG5n" },
+      ],
     })
+    expect(commits.filter((commit) => commit.image)).toEqual([
+      expect.objectContaining({
+        kind: "tool",
+        messageID: "msg_child_tool",
+        image: "data:image/png;base64,cG5n",
+        phase: "final",
+      }),
+    ])
     expect(
       ui.events.find(
         (event) =>
@@ -3491,7 +3826,7 @@ describe("V2 mini transport", () => {
       data: {
         sessionID: "ses_child",
         inboxID: "msg_child_prompt",
-        item: { type: "user", payload: { text: "actual child prompt" }, delivery: "steer" },
+        item: { type: "user", payload: { text: "actual child prompt", files: [image] }, delivery: "steer" },
       },
     })
     await Bun.sleep(0)
@@ -3517,6 +3852,84 @@ describe("V2 mini transport", () => {
     )
       await Bun.sleep(0)
 
+    expect(
+      states()
+        .at(-1)
+        ?.details.ses_child?.commits.filter((commit) => commit.image),
+    ).toEqual([
+      expect.objectContaining({ kind: "user", messageID: "msg_child_prompt", image: "data:image/png;base64,cG5n" }),
+    ])
+    await transport.close()
+  })
+
+  test("hydrates child images and keeps pending attachments hidden until delivery", async () => {
+    const events = feed()
+    events.push(connected())
+    const ui = footer()
+    const transport = await createSessionTransport({
+      sdk: sdk({
+        streams: [events],
+        sessions: [{ id: "ses_child", parentID: "ses_1", time: { updated: 1 } }],
+        messages: {
+          ses_child: [
+            { id: "msg_old_image", type: "user", text: "", files: [image, image], time: { created: 1 } },
+            {
+              id: "msg_child_tool",
+              type: "assistant",
+              agent: "build",
+              model: { providerID: "test", id: "model" },
+              content: [
+                canonicalToolPart("read", {
+                  status: "completed",
+                  input: {},
+                  content: [{ type: "file", mime: "image/png", uri: "data:image/png;base64,cG5n" }],
+                }),
+              ],
+              time: { created: 2 },
+            },
+          ],
+        },
+        pending: {
+          ses_child: [
+            {
+              id: "msg_pending_image",
+              sessionID: "ses_child",
+              type: "user",
+              payload: { text: "", files: [image] },
+              delivery: "queue",
+              timeCreated: 3,
+            },
+          ],
+        },
+      }),
+      sessionID: "ses_1",
+      thinking: false,
+      footer: ui.api,
+    })
+    const images = () =>
+      ui.events
+        .flatMap((event) => (event.type === "stream.subagent" ? [event.state] : []))
+        .at(-1)
+        ?.details.ses_child?.commits.filter((commit) => commit.image) ?? []
+    transport.selectSubagent("ses_child")
+    while (images().length < 2) await Bun.sleep(0)
+    expect(
+      images()
+        .map((commit) => commit.kind)
+        .sort(),
+    ).toEqual(["tool", "user"])
+    expect(images().some((commit) => commit.messageID === "msg_pending_image")).toBe(false)
+    const delivered: RunV2Event = {
+      id: "evt_child_image_delivered",
+      created: 3,
+      type: "session.inbox.delivered",
+      durable: durable("ses_child", 3),
+      data: { sessionID: "ses_child", inboxID: "msg_pending_image" },
+    }
+    events.push(delivered)
+    events.push(delivered)
+    while (images().length < 3) await Bun.sleep(0)
+    expect(images().filter((commit) => commit.messageID === "msg_pending_image")).toHaveLength(1)
     await transport.close()
   })
 
@@ -3555,7 +3968,11 @@ describe("V2 mini transport", () => {
       data: {
         sessionID: "ses_child",
         inboxID: "msg_child_race",
-        item: { type: "user", payload: { text: "prompt admitted before hydration" }, delivery: "steer" },
+        item: {
+          type: "user",
+          payload: { text: "prompt admitted before hydration", files: [image] },
+          delivery: "steer",
+        },
       },
     })
     await Bun.sleep(0)
@@ -3581,6 +3998,13 @@ describe("V2 mini transport", () => {
     )
       await Bun.sleep(0)
 
+    expect(
+      states()
+        .at(-1)
+        ?.details.ses_child?.commits.filter((commit) => commit.image),
+    ).toEqual([
+      expect.objectContaining({ kind: "user", messageID: "msg_child_race", image: "data:image/png;base64,cG5n" }),
+    ])
     await transport.close()
   })
 

packages/tui/test/mini/theme.test.ts

@@ -1,25 +1,56 @@
-import { expect, test } from "bun:test"
+import { afterAll, beforeAll, expect, test } from "bun:test"
+import path from "node:path"
 import { RGBA, type CliRenderer, type TerminalColors } from "@opentui/core"
-import { RUN_THEME_MONO, RUN_THEME_FALLBACK, generateSystem, resolveRunTheme, resolveTheme } from "../../src/mini/theme"
-import { DEFAULT_THEMES } from "../../src/theme"
+import { DEFAULT_THEME, resolveThemeDocument, type ResolvedTheme } from "@opencode-ai/theme/tui"
+import {
+  RUN_THEME_MONO,
+  RUN_THEME_FALLBACK,
+  RUN_THEME_FALLBACK_LIGHT,
+  resolveRunTheme,
+  type RunTheme,
+} from "../../src/mini/theme"
+import { DEFAULT_THEMES, parseTheme } from "../../src/theme"
+import { generateSystem } from "../../src/theme/system"
+import { tmpdir } from "../fixture/fixture"
+
+const tmp = await tmpdir()
+const previousConfig = process.env.OPENCODE_CONFIG_DIR
+beforeAll(() => {
+  process.env.OPENCODE_CONFIG_DIR = tmp.path
+})
+afterAll(async () => {
+  if (previousConfig === undefined) delete process.env.OPENCODE_CONFIG_DIR
+  else process.env.OPENCODE_CONFIG_DIR = previousConfig
+  await tmp[Symbol.asyncDispose]()
+})
 
 const palette = ["#15161e", "#f7768e", "#9ece6a", "#e0af68", "#7aa2f7", "#bb9af7", "#7dcfff", "#c0caf5"] as const
 
-function terminalColors(input: Partial<TerminalColors> = {}): TerminalColors {
+function terminalColors(input: Partial<TerminalColors> = {}, mode: "light" | "dark" = "dark"): TerminalColors {
   return {
-    palette: Array.from({ length: 256 }, (_, index) => input.palette?.[index] ?? palette[index % palette.length]!),
-    defaultBackground: input.defaultBackground ?? "#1a1b26",
-    defaultForeground: input.defaultForeground ?? "#c0caf5",
-    cursorColor: input.cursorColor ?? "#ff9e64",
-    mouseForeground: input.mouseForeground ?? null,
-    mouseBackground: input.mouseBackground ?? null,
-    tekForeground: input.tekForeground ?? null,
-    tekBackground: input.tekBackground ?? null,
-    highlightBackground: input.highlightBackground ?? "#33467c",
-    highlightForeground: input.highlightForeground ?? "#c0caf5",
+    palette: Array.from({ length: 256 }, (_, index) => palette[index % palette.length]!),
+    defaultBackground: mode === "light" ? "#fbf1c7" : "#1a1b26",
+    defaultForeground: mode === "light" ? "#3c3836" : "#c0caf5",
+    cursorColor: "#ff9e64",
+    mouseForeground: null,
+    mouseBackground: null,
+    tekForeground: null,
+    tekBackground: null,
+    highlightBackground: "#33467c",
+    highlightForeground: "#c0caf5",
+    ...input,
   }
 }
 
+const emptyColors = terminalColors({
+  palette: Array.from({ length: 256 }, () => null),
+  defaultBackground: null,
+  defaultForeground: null,
+  cursorColor: null,
+  highlightBackground: null,
+  highlightForeground: null,
+})
+
 function renderer(
   input: {
     themeMode?: "dark" | "light"
@@ -29,166 +60,335 @@ function renderer(
   } = {},
 ) {
   return {
-    themeMode: input.themeMode,
+    get themeMode() {
+      return input.themeMode
+    },
     waitForThemeMode: async () => input.resolvedThemeMode ?? input.themeMode ?? null,
     getPalette: async () => {
-      if (input.fail) {
-        throw new Error("boom")
-      }
-
+      if (input.fail) throw new Error("boom")
       return input.colors ?? terminalColors()
     },
   } as CliRenderer
 }
 
-function expectRgba(color: unknown) {
+function rgba(color: unknown) {
   expect(color).toBeInstanceOf(RGBA)
-  if (!(color instanceof RGBA)) {
-    throw new Error("expected RGBA")
-  }
-
+  if (!(color instanceof RGBA)) throw new Error("expected RGBA")
   return color
 }
 
-function expectIndexed(color: unknown) {
-  const rgba = expectRgba(color)
-  expect(rgba.intent).toBe("indexed")
-  expect(rgba.slot).toBeLessThan(256)
+function expectFooter(actual: RunTheme, theme: ResolvedTheme) {
+  const expected = {
+    text: theme.text.default,
+    muted: theme.text.subdued,
+    warning: theme.text.feedback.warning.default,
+    error: theme.text.feedback.error.default,
+    actionSecondaryText: theme.contextual.elevated.text.action.secondary.default,
+    actionFocusedBg: theme.contextual.elevated.background.action.primary.focused,
+    actionFocusedText: theme.contextual.elevated.text.action.primary.focused,
+    formfieldText: theme.contextual.elevated.text.formfield.default,
+    formfieldFocusedBg: theme.contextual.elevated.background.formfield.focused,
+    formfieldFocusedText: theme.contextual.elevated.text.formfield.focused,
+    selection: theme.contextual.elevated.text.formfield.selected,
+    running: theme.text.status.running,
+    question: theme.text.status.question,
+    permission: theme.text.status.permission,
+    success: theme.text.feedback.success.default,
+    link: theme.markdown.link,
+    shade: theme.contextual.elevated.background.default,
+    surface: theme.contextual.elevated.background.default,
+    pane: theme.contextual.overlay.background.default,
+    border: theme.border.default,
+    line: theme.background.surface.overlay,
+  }
+  Object.entries(expected).forEach(([key, color]) => {
+    expect(rgba(actual.footer[key as keyof typeof expected]).toInts()).toEqual(color.toInts())
+  })
+  expect(rgba(actual.background).intent).toBe("default")
 }
 
-function spread(color: RGBA) {
-  const [r, g, b] = color.toInts()
-  return Math.max(r, g, b) - Math.min(r, g, b)
-}
-
-test("falls back when palette lookup fails", async () => {
-  expect(await resolveRunTheme(renderer({ fail: true }))).toBe(RUN_THEME_FALLBACK)
-  expect(await resolveRunTheme(renderer({ fail: true }), undefined, true)).toBe(RUN_THEME_MONO)
-  const light = await resolveRunTheme(renderer({ resolvedThemeMode: "light" }), undefined, true)
-  expect(expectRgba(light.footer.text).toInts().slice(0, 3)).toEqual([0, 0, 0])
-  expect(RUN_THEME_MONO.block.syntax).toBeUndefined()
+test.each(["light", "dark"] as const)("preserves %s monochrome terminal defaults", async (mode) => {
+  const theme = await resolveRunTheme(renderer({ fail: true }), { name: "unknown", mode }, true)
+  expect(theme.block.syntax).toBeUndefined()
+  expect(rgba(theme.footer.text).toInts().slice(0, 3)).toEqual(mode === "light" ? [0, 0, 0] : [255, 255, 255])
   for (const color of [
-    RUN_THEME_MONO.background,
-    ...Object.values(RUN_THEME_MONO.footer),
-    ...Object.values(RUN_THEME_MONO.splash),
-    ...Object.values(RUN_THEME_MONO.entry).flatMap((tone) => [tone.body, tone.start].filter(Boolean)),
-    ...Object.entries(RUN_THEME_MONO.block)
-      .filter(([key]) => key !== "syntax")
-      .map(([, value]) => value),
+    theme.background,
+    ...Object.values(theme.footer).flat(),
+    ...Object.values(theme.splash),
+    ...Object.values(theme.entry).flatMap((tone) => [tone.body, tone.start].filter(Boolean)),
+    ...Object.values(theme.block),
   ]) {
-    expect(expectRgba(color).intent).toBe("default")
+    expect(rgba(color).intent).toBe("default")
+  }
+  if (mode === "dark") expect(await resolveRunTheme(renderer(), undefined, true)).toBe(RUN_THEME_MONO)
+  expect(await resolveRunTheme(renderer({ fail: true, resolvedThemeMode: mode }), undefined, true)).toBe(theme)
+  const term = renderer({ themeMode: mode })
+  let queries = 0
+  term.getPalette = async () => {
+    queries++
+    return terminalColors()
+  }
+  expect(await resolveRunTheme(term, { mode: mode === "light" ? "dark" : "light" }, true)).toBe(theme)
+  expect(queries).toBe(0)
+})
+
+test.each(["light", "dark"] as const)("uses shared %s defaults and named built-in themes", async (mode) => {
+  const colors = terminalColors({}, mode)
+  for (const name of [undefined, "opencode", "tokyonight"] as const) {
+    const theme = await resolveRunTheme(renderer({ colors }), { name, mode })
+    const expected = resolveThemeDocument(parseTheme(DEFAULT_THEMES[name ?? "opencode"]), mode)
+    try {
+      expectFooter(theme, expected)
+      expect(rgba(theme.background).toInts()).toEqual(RGBA.fromHex(colors.defaultBackground!).toInts())
+      expect(theme.footer.categorical.map((color) => rgba(color).toInts())).toEqual(
+        expected.categorical.map((scale) => scale[mode === "light" ? 800 : 200].toInts()),
+      )
+      expect(theme.block.syntax?.getAllStyles().size).toBeGreaterThan(0)
+      for (const color of [
+        theme.entry.user.body,
+        theme.entry.assistant.body,
+        theme.block.text,
+        ...Object.values(theme.splash),
+      ]) {
+        expect(rgba(color).intent).toBe("indexed")
+        expect(rgba(color).slot).toBeLessThan(256)
+      }
+      expect(rgba(theme.footer.text).intent).toBe("rgb")
+      for (const style of theme.block.syntax!.getAllStyles().values()) {
+        if (style.fg && style.fg.a !== 0) expect(style.fg.intent).toBe("indexed")
+        if (style.bg && style.bg.a !== 0) expect(style.bg.intent).toBe("indexed")
+      }
+    } finally {
+      theme.block.syntax?.destroy()
+    }
   }
 })
 
-test("resolveTheme preserves Mini indexed color and result shape semantics", () => {
-  const item = structuredClone(DEFAULT_THEMES.opencode)
-  item.theme.primary = 6
-  delete item.theme.selectedListItemText
-
-  const theme = resolveTheme(item, "dark")
-  expect(theme.primary.intent).toBe("indexed")
-  expect(theme.primary.slot).toBe(6)
-  expect(theme.selectedListItemText).toBe(theme.background)
-  expect("_hasSelectedListItemText" in theme).toBe(false)
-})
-
-test("returns syntax styles and indexed splash colors", async () => {
-  const theme = await resolveRunTheme(renderer({ themeMode: "dark" }))
-
+test.each(["light", "dark"] as const)("shares the %s system scheme while retaining terminal intent", async (mode) => {
+  const colors = terminalColors({
+    defaultBackground: mode === "light" ? "#fbf1c7" : "#0f172a",
+    defaultForeground: mode === "light" ? "#3c3836" : "#e2e8f0",
+  })
+  const theme = await resolveRunTheme(renderer({ colors }), { name: "system", mode })
   try {
-    expect(theme.block.syntax).toBeDefined()
-    expect([...theme.block.syntax!.getAllStyles()].length).toBeGreaterThan(0)
-    expectIndexed(theme.splash.left)
-    expectIndexed(theme.splash.right)
-    expectIndexed(theme.splash.leftShadow)
-    expectRgba(theme.footer.highlight)
-    expectRgba(theme.footer.statusAccent)
-    expectRgba(theme.footer.surface)
-    expect(expectRgba(theme.footer.statusAccent).toInts()).not.toEqual(expectRgba(theme.footer.status).toInts())
+    expectFooter(theme, resolveThemeDocument(parseTheme(generateSystem(colors, mode)), mode))
+    expect(rgba(theme.footer.text).intent).toBe("default")
+    expect(rgba(theme.entry.user.body).intent).toBe("default")
+    expect(rgba(theme.entry.assistant.body).intent).toBe("default")
+    expect(theme.block.syntax?.getStyle("default")?.fg?.intent).toBe("default")
+    expect(rgba(theme.footer.surface).intent).toBe("rgb")
+    expect(rgba(theme.entry.reasoning.body).intent).toBe("indexed")
+    Object.values(theme.splash).forEach((color) => expect(rgba(color).intent).toBe("indexed"))
   } finally {
     theme.block.syntax?.destroy()
   }
 })
 
-test("keeps footer surfaces exact while scrollback stays palette matched", async () => {
-  const colors = terminalColors({
-    defaultBackground: "#0f172a",
-    defaultForeground: "#e2e8f0",
-  })
-  const theme = await resolveRunTheme(renderer({ themeMode: "dark", colors }))
-  const exact = resolveTheme(generateSystem(colors, "dark"), "dark")
+test.each(["light", "dark"] as const)(
+  "loads %s custom files with shared partial and standalone fallback",
+  async (mode) => {
+    for (const standalone of [false, true]) {
+      const source = {
+        version: 2,
+        standalone,
+        [mode]: {
+          hue: DEFAULT_THEME[mode].hue,
+          text: {
+            default: "#123456",
+            formfield: { default: "#234567", $selected: "#345678" },
+            feedback: { warning: { default: "#456789" } },
+          },
+          "@context:elevated": {
+            text: { action: { primary: { $focused: "#56789a" } }, formfield: { $focused: "#6789ab" } },
+            background: { action: { primary: { $focused: "#789abc" } }, formfield: { $focused: "#89abcd" } },
+          },
+        },
+      }
+      await Bun.write(path.join(tmp.path, "themes", "mini-custom.json"), JSON.stringify(source))
+      const theme = await resolveRunTheme(renderer({ colors: terminalColors({}, mode) }), { name: "mini-custom", mode })
+      try {
+        expectFooter(theme, resolveThemeDocument(parseTheme(source), mode))
+      } finally {
+        theme.block.syntax?.destroy()
+      }
+    }
+  },
+)
 
+test.each(["light", "dark"] as const)(
+  "falls back to shared %s defaults for unknown or invalid themes",
+  async (mode) => {
+    const expected = resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), mode)
+    for (const source of [
+      { version: 2, [mode]: { categorical: [] } },
+      { version: 2, [mode]: { text: { default: "$missing" } } },
+      undefined,
+    ]) {
+      if (source) await Bun.write(path.join(tmp.path, "themes", "mini-invalid.json"), JSON.stringify(source))
+      const theme = await resolveRunTheme(renderer({ colors: terminalColors({}, mode) }), {
+        name: source ? "mini-invalid" : "mini-unknown",
+        mode,
+      })
+      try {
+        expectFooter(theme, expected)
+      } finally {
+        theme.block.syntax?.destroy()
+      }
+    }
+  },
+)
+
+test.each(["light", "dark"] as const)("resolves dark-only Aura on an automatic %s terminal", async (mode) => {
+  const colors = terminalColors({
+    defaultBackground: mode === "light" ? "#ffffff" : "#0f0f0f",
+    defaultForeground: mode === "light" ? "#000000" : "#edecee",
+  })
+  const theme = await resolveRunTheme(renderer({ colors }), { name: "aura" })
   try {
-    expect(expectRgba(theme.footer.selected).toInts()).toEqual(expectRgba(exact.backgroundElement).toInts())
-    expect(expectRgba(theme.footer.border).toInts()).toEqual(expectRgba(exact.border).toInts())
-    expect(expectRgba(theme.footer.pane).toInts()).toEqual(expectRgba(exact.backgroundMenu).toInts())
-    expect(expectRgba(theme.footer.selected).intent).toBe("rgb")
+    expectFooter(theme, resolveThemeDocument(parseTheme(DEFAULT_THEMES[mode === "light" ? "opencode" : "aura"]), mode))
+    expect(rgba(theme.background).toInts()).toEqual(RGBA.fromHex(colors.defaultBackground!).toInts())
   } finally {
     theme.block.syntax?.destroy()
   }
 })
 
-test("uses refreshed background brightness when cached renderer mode is stale", async () => {
-  const colors = terminalColors({
-    defaultBackground: "#fbf1c7",
-    defaultForeground: "#3c3836",
-  })
-  const stale = await resolveRunTheme(renderer({ themeMode: "dark", colors }))
-  const light = await resolveRunTheme(renderer({ themeMode: "light", colors }))
+test.each(["light", "dark"] as const)(
+  "falls back only for unsupported modes of a %s-only custom theme",
+  async (mode) => {
+    const source = { version: 2, [mode]: { text: { default: "#123456" } } }
+    await Bun.write(path.join(tmp.path, "themes", "mini-one-mode.json"), JSON.stringify(source))
+    for (const requested of ["light", "dark"] as const) {
+      const theme = await resolveRunTheme(renderer({ colors: terminalColors({}, requested) }), {
+        name: "mini-one-mode",
+        mode: requested,
+      })
+      try {
+        expectFooter(
+          theme,
+          resolveThemeDocument(parseTheme(requested === mode ? source : DEFAULT_THEMES.opencode), requested),
+        )
+      } finally {
+        theme.block.syntax?.destroy()
+      }
+    }
+  },
+)
 
+test.each(["light", "dark"] as const)("handles unavailable palettes in %s mode", async (mode) => {
+  const expected = resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), mode)
+  for (const input of [
+    { fail: true },
+    { colors: emptyColors },
+    { colors: { ...emptyColors, defaultBackground: terminalColors({}, mode).defaultBackground } },
+    { colors: { ...emptyColors, defaultForeground: terminalColors({}, mode).defaultForeground } },
+  ]) {
+    const fallback = await resolveRunTheme(renderer(input), { name: "system", mode })
+    expect(fallback).toBe(mode === "light" ? RUN_THEME_FALLBACK_LIGHT : RUN_THEME_FALLBACK)
+    expectFooter(fallback, expected)
+  }
+  const theme = await resolveRunTheme(renderer({ fail: true }), { name: "opencode", mode })
   try {
-    expect(expectRgba(stale.footer.surface).toInts()).toEqual(expectRgba(light.footer.surface).toInts())
+    expectFooter(theme, expected)
   } finally {
-    stale.block.syntax?.destroy()
-    light.block.syntax?.destroy()
+    theme.block.syntax?.destroy()
   }
 })
 
-test("keeps renderer mode when refreshed default background is unavailable", async () => {
-  const colors = {
-    ...terminalColors(),
-    defaultBackground: null,
-    palette: ["#000000", ...terminalColors().palette.slice(1)],
-  }
-  const light = await resolveRunTheme(renderer({ themeMode: "light", colors }))
-  const dark = await resolveRunTheme(renderer({ themeMode: "dark", colors }))
-
-  try {
-    expect(expectRgba(light.footer.surface).toInts()).not.toEqual(expectRgba(dark.footer.surface).toInts())
-  } finally {
-    light.block.syntax?.destroy()
-    dark.block.syntax?.destroy()
+test("uses refreshed background brightness rather than stale mode or ANSI slot zero", async () => {
+  for (const colors of [
+    terminalColors({}, "light"),
+    terminalColors({ defaultBackground: null, palette: ["#000000", ...terminalColors().palette.slice(1)] }),
+  ]) {
+    const theme = await resolveRunTheme(renderer({ themeMode: colors.defaultBackground ? "dark" : "light", colors }), {
+      name: "system",
+    })
+    try {
+      expectFooter(theme, resolveThemeDocument(parseTheme(generateSystem(colors, "light")), "light"))
+    } finally {
+      theme.block.syntax?.destroy()
+    }
   }
 })
 
-test("keeps dark surfaces neutral on saturated backgrounds", () => {
-  const theme = resolveTheme(
-    generateSystem(
-      terminalColors({
-        defaultBackground: "#0000ff",
-        defaultForeground: "#ffffff",
-      }),
-      "dark",
-    ),
-    "dark",
-  )
-
-  expect(spread(theme.backgroundPanel)).toBeLessThan(10)
-  expect(spread(theme.backgroundElement)).toBeLessThan(10)
+test.each(["light", "dark"] as const)("follows physical %s mode over opposite configuration", async (mode) => {
+  const expected = resolveThemeDocument(parseTheme(DEFAULT_THEMES.opencode), mode)
+  for (const fail of [false, true]) {
+    const theme = await resolveRunTheme(renderer({ colors: terminalColors({}, mode), themeMode: mode, fail }), {
+      mode: mode === "light" ? "dark" : "light",
+    })
+    try {
+      expectFooter(theme, expected)
+    } finally {
+      theme.block.syntax?.destroy()
+    }
+  }
 })
 
-test("keeps light surfaces close to neutral on warm backgrounds", () => {
-  const theme = resolveTheme(
-    generateSystem(
-      terminalColors({
-        defaultBackground: "#fbf1c7",
-        defaultForeground: "#3c3836",
-      }),
+test.each(["system", "opencode"])(
+  "prefers a new renderer mode over cached %s colors after failed probes",
+  async (name) => {
+    const colors = terminalColors()
+    const expected = resolveThemeDocument(
+      parseTheme(name === "system" ? generateSystem(colors, "light") : DEFAULT_THEMES.opencode),
       "light",
-    ),
-    "light",
-  )
+    )
+    const input = { colors, fail: false, themeMode: "dark" as "dark" | "light" }
+    const term = renderer(input)
+    const initial = await resolveRunTheme(term, { name })
+    initial.block.syntax?.destroy()
+    input.themeMode = "light"
+    input.colors = emptyColors
+    for (const fail of [true, false]) {
+      input.fail = fail
+      const theme = await resolveRunTheme(term, { name })
+      try {
+        expectFooter(theme, expected)
+      } finally {
+        theme.block.syntax?.destroy()
+      }
+    }
+  },
+)
 
-  expect(spread(theme.backgroundPanel)).toBeLessThan(60)
-  expect(spread(theme.backgroundElement)).toBeLessThan(60)
+test("retains a usable system palette after background-only and empty probes", async () => {
+  const input = { colors: terminalColors() }
+  const expected = resolveThemeDocument(parseTheme(generateSystem(input.colors, "dark")), "dark")
+  const term = renderer(input)
+  const initial = await resolveRunTheme(term, { name: "system" })
+  initial.block.syntax?.destroy()
+  for (const colors of [{ ...emptyColors, defaultBackground: "#202020" }, emptyColors]) {
+    input.colors = colors
+    const theme = await resolveRunTheme(term, { name: "system" })
+    try {
+      expectFooter(theme, expected)
+      expect(rgba(theme.footer.text).intent).toBe("default")
+      expect(rgba(theme.entry.reasoning.body).intent).toBe("indexed")
+      expect(rgba(theme.entry.reasoning.body).toInts()).toEqual(rgba(initial.entry.reasoning.body).toInts())
+    } finally {
+      theme.block.syntax?.destroy()
+    }
+  }
 })
+
+test.each(["system", "opencode"])(
+  "retains and refreshes the %s scrollback palette across probe failures",
+  async (name) => {
+    const input = { fail: false, colors: terminalColors() }
+    const term = renderer(input)
+    const initial = await resolveRunTheme(term, { name })
+    input.fail = true
+    const retained = await resolveRunTheme(term, { name, mode: "light" })
+    input.fail = false
+    input.colors = terminalColors({ palette: Array.from({ length: 256 }, () => "#ff00ff") })
+    const refreshed = await resolveRunTheme(term, { name })
+    try {
+      expect(rgba(retained.footer.surface).toInts()).toEqual(rgba(initial.footer.surface).toInts())
+      expect(rgba(retained.entry.reasoning.body).toInts()).toEqual(rgba(initial.entry.reasoning.body).toInts())
+      expect(rgba(refreshed.entry.reasoning.body).toInts()).not.toEqual(rgba(initial.entry.reasoning.body).toInts())
+    } finally {
+      initial.block.syntax?.destroy()
+      retained.block.syntax?.destroy()
+      refreshed.block.syntax?.destroy()
+    }
+  },
+)

packages/tui/test/prompt/local-attachment.test.ts

@@ -1,6 +1,14 @@
 import { describe, expect, test } from "bun:test"
-import { parsePastedFilepaths, readLocalAttachmentWith } from "../../src/component/prompt/local-attachment"
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+import {
+  MAX_LOCAL_ATTACHMENT_BYTES,
+  parsePastedFilepaths,
+  readLocalAttachmentWith,
+  resolvePastedAttachments,
+} from "../../src/component/prompt/local-attachment"
 import type { LocalFiles } from "../../src/component/prompt/local-attachment"
+import { tmpdir } from "../fixture/fixture"
 
 function files(input: { mime: string; text?: string; bytes?: Uint8Array }): LocalFiles {
   return {
@@ -81,4 +89,90 @@ describe("prompt local attachments", () => {
       await readLocalAttachmentWith(files({ mime: "image/png", bytes: new Uint8Array(2) }), "/tmp/large.png", 1),
     ).toBeUndefined()
   })
+
+  test("resolves a single image path before splitting spaces", async () => {
+    await using tmp = await tmpdir()
+    const file = path.join(tmp.path, "one image.png")
+    await Bun.write(file, new Uint8Array([1, 2, 3]))
+
+    for (const input of [file, `'${file}'`, pathToFileURL(file).href]) {
+      expect(await resolvePastedAttachments(input, "linux")).toEqual([
+        { type: "file", uri: "data:image/png;base64,AQID", filename: "one image.png" },
+      ])
+    }
+  })
+
+  test("resolves quoted paths and URI lists as ordered attachments", async () => {
+    await using tmp = await tmpdir()
+    const image = path.join(tmp.path, "one image.png")
+    const pdf = path.join(tmp.path, "two file.pdf")
+    await Promise.all([Bun.write(image, new Uint8Array([1, 2, 3])), Bun.write(pdf, new Uint8Array([4, 5, 6]))])
+
+    for (const input of [
+      `'${image}' "${pdf}"`,
+      `# dropped files\r\n${pathToFileURL(image).href}\r\n${pathToFileURL(pdf).href}`,
+    ]) {
+      expect(await resolvePastedAttachments(input, "linux")).toEqual([
+        { type: "file", uri: "data:image/png;base64,AQID", filename: "one image.png" },
+        { type: "file", uri: "data:application/pdf;base64,BAUG", filename: "two file.pdf" },
+      ])
+    }
+  })
+
+  test("falls back to plain text for unsupported or incomplete drops", async () => {
+    await using tmp = await tmpdir()
+    const image = path.join(tmp.path, "image.png")
+    const text = path.join(tmp.path, "notes.txt")
+    await Promise.all([Bun.write(image, new Uint8Array([1])), Bun.write(text, "notes")])
+
+    for (const input of [
+      "",
+      "plain\r\ntext",
+      "https://example.com/image.png",
+      text,
+      `${image} ${text}`,
+      `${image} ${path.join(tmp.path, "missing.png")}`,
+    ]) {
+      expect(await resolvePastedAttachments(input, "linux")).toBeUndefined()
+    }
+  })
+
+  test("resolves SVG files as text with the original content", async () => {
+    await using tmp = await tmpdir()
+    const file = path.join(tmp.path, "image.svg")
+    const content = "<svg />\r\n"
+    await Bun.write(file, content)
+
+    expect(await resolvePastedAttachments(file, "linux")).toEqual([{ type: "text", content, filename: "image.svg" }])
+  })
+
+  test("shares the byte budget across binary and SVG attachments", async () => {
+    await using tmp = await tmpdir()
+    const image = path.join(tmp.path, "image.png")
+    const svg = path.join(tmp.path, "image.svg")
+    const content = "<svg>\u00e9</svg>"
+    await Promise.all([
+      Bun.write(image, new Uint8Array(MAX_LOCAL_ATTACHMENT_BYTES - Buffer.byteLength(content))),
+      Bun.write(svg, content),
+    ])
+
+    expect(await resolvePastedAttachments(`${image} ${svg}`, "linux")).toMatchObject([
+      { type: "file", filename: "image.png" },
+      { type: "text", content, filename: "image.svg" },
+    ])
+    await Bun.write(svg, content + " ")
+    expect(await resolvePastedAttachments(`${image} ${svg}`, "linux")).toBeUndefined()
+
+    await Bun.write(image, new Uint8Array(MAX_LOCAL_ATTACHMENT_BYTES + 1))
+    expect(await resolvePastedAttachments(image, "linux")).toBeUndefined()
+  })
+
+  test("bounds the number of resolved paths", async () => {
+    await using tmp = await tmpdir()
+    const file = path.join(tmp.path, "image.png")
+    await Bun.write(file, new Uint8Array([1]))
+
+    expect(await resolvePastedAttachments(Array(32).fill(file).join(" "), "linux")).toHaveLength(32)
+    expect(await resolvePastedAttachments(Array(33).fill(file).join(" "), "linux")).toBeUndefined()
+  })
 })

packages/util/src/cross-spawn-spawner.ts

@@ -231,56 +231,38 @@ const makeCrossSpawnSpawner = Effect.gen(function* () {
       return Effect.succeed(sink)
     })
 
-  const setupOutput = Effect.fnUntraced(function* (
+  const setupOutput = (
     command: ChildProcess.StandardCommand,
     proc: NodeChildProcess.ChildProcess,
     out: ChildProcess.StdoutConfig,
     err: ChildProcess.StderrConfig,
     stopOutput: Deferred.Deferred<void>,
-  ) {
-    const capture = Effect.fnUntraced(function* (readable: NodeChildProcess.ChildProcess["stdout"], name: string) {
+  ) => {
+    const capture = (readable: NodeChildProcess.ChildProcess["stdout"], name: string) => {
       if (!readable) return Stream.empty
-      // Buffer before the child exits: Node may drain unread stdio before an Effect reader starts.
-      const tap = new PassThrough()
-      const onError = (cause: Error) => tap.destroy(cause)
-      readable.on("error", onError)
-      // Errors before subscription remain observable through tap.errored.
-      tap.on("error", () => {})
-      readable.pipe(tap)
-      const release = Effect.sync(() => {
-        readable.unpipe(tap)
-        readable.off("error", onError)
-        tap.destroy()
-      })
-      yield* Effect.addFinalizer(() => release)
-      return Stream.suspend(() =>
-        tap.errored
-          ? Stream.fail(toPlatformError(`fromReadable(${name})`, tap.errored, command))
-          : NodeStream.fromReadable({
-              evaluate: () => tap,
-              onError: (cause) => toPlatformError(`fromReadable(${name})`, toError(cause), command),
-              closeOnDone: false,
-            }),
-      ).pipe(
+      return NodeStream.fromReadable({
+        evaluate: () => readable,
+        onError: (cause) => toPlatformError(`fromReadable(${name})`, toError(cause), command),
+        closeOnDone: false,
+      }).pipe(
         Stream.interruptWhen(Deferred.await(stopOutput)),
         Stream.ensuring(
           Effect.gen(function* () {
-            yield* release
             // Only the capture deadline transfers the reader back to the process scope.
             if (yield* Deferred.isDone(stopOutput)) return
             readable.destroy()
           }),
         ),
       )
-    })
+    }
 
-    let stdout = yield* capture(proc.stdout, "stdout")
-    let stderr = yield* capture(proc.stderr, "stderr")
+    let stdout = capture(proc.stdout, "stdout")
+    let stderr = capture(proc.stderr, "stderr")
     if (Sink.isSink(out.stream)) stdout = Stream.transduce(stdout, out.stream)
     if (Sink.isSink(err.stream)) stderr = Stream.transduce(stderr, err.stream)
 
     return { stdout, stderr, all: Stream.merge(stdout, stderr) }
-  })
+  }
 
   const launchProcess = (command: ChildProcess.StandardCommand, opts: NodeChildProcess.SpawnOptions) =>
     Effect.callback<Spawned, PlatformError.PlatformError>((resume) => {
@@ -336,8 +318,7 @@ const makeCrossSpawnSpawner = Effect.gen(function* () {
 
   const discard = (readable: NodeChildProcess.ChildProcess["stdout"]) => {
     if (!readable || readable.destroyed) return
-    // Capture has ended; discard inherited output without filling the bounded buffer.
-    readable.unpipe()
+    // read() also drains while a backpressured Effect adapter still has a readable listener.
     const drain = () => {
       while (readable.read() !== null) {}
     }
@@ -442,11 +423,8 @@ const makeCrossSpawnSpawner = Effect.gen(function* () {
             }),
             Effect.fnUntraced(
               function* ([proc, closed, exited, stopOutput]) {
-                discard(proc.stdout)
-                discard(proc.stderr)
-                if (yield* Deferred.isDone(exited)) {
-                  // Reporting exit must not shorten the inherited-pipe grace period on scope release.
-                  yield* Effect.raceFirst(Deferred.await(closed), Deferred.await(stopOutput))
+                const done = (yield* Deferred.isDone(closed)) || (yield* Deferred.isDone(stopOutput))
+                if (done) {
                   const [code] = yield* Deferred.await(exited)
                   if (process.platform === "win32") return
                   if (code === 0 || Predicate.isNull(code)) return
@@ -469,8 +447,12 @@ const makeCrossSpawnSpawner = Effect.gen(function* () {
             ),
           )
 
+          const completion = Effect.raceFirst(
+            Deferred.await(closed),
+            Deferred.await(stopOutput).pipe(Effect.andThen(Deferred.await(exited))),
+          )
           const fd = yield* setupFds(command, proc, extra)
-          const out = yield* setupOutput(command, proc, sout, serr, stopOutput)
+          const out = setupOutput(command, proc, sout, serr, stopOutput)
           let ref = true
           return makeHandle({
             pid: ProcessId(proc.pid!),
@@ -480,8 +462,10 @@ const makeCrossSpawnSpawner = Effect.gen(function* () {
             all: out.all,
             getInputFd: fd.getInputFd,
             getOutputFd: fd.getOutputFd,
-            isRunning: Effect.map(Deferred.isDone(exited), (done) => !done),
-            exitCode: Effect.flatMap(Deferred.await(exited), ([code, signal]) => {
+            isRunning: Effect.gen(function* () {
+              return !(yield* Deferred.isDone(closed)) && !(yield* Deferred.isDone(stopOutput))
+            }),
+            exitCode: Effect.flatMap(completion, ([code, signal]) => {
               if (Predicate.isNotNull(code)) return Effect.succeed(ExitCode(code))
               return Effect.fail(
                 toPlatformError(

packages/util/src/patch.ts

@@ -130,10 +130,9 @@ export function derive(path: string, chunks: ReadonlyArray<UpdateFileChunk>, ori
   const lines = source.text.split("\n")
   if (lines.at(-1) === "") lines.pop()
   const replacements = computeReplacements(lines, path, chunks)
-  const updated = [...lines]
-  for (const [start, remove, insert] of replacements.toReversed()) updated.splice(start, remove, ...insert)
-  if (updated.at(-1) !== "") updated.push("")
-  const next = Bom.split(updated.join("\n"))
+  for (const [start, remove, insert] of replacements.reverse()) lines.splice(start, remove, ...insert)
+  if (lines.at(-1) !== "") lines.push("")
+  const next = Bom.split(lines.join("\n"))
   return { content: next.text, bom: source.bom || next.bom }
 }
 
@@ -339,7 +338,7 @@ function computeReplacements(lines: ReadonlyArray<string>, path: string, chunks:
     replacements.push([found, oldLines.length, newLines])
     lineIndex = found + oldLines.length
   }
-  return replacements.toSorted((left, right) => left[0] - right[0])
+  return replacements.sort((left, right) => left[0] - right[0])
 }
 
 function seek(lines: ReadonlyArray<string>, pattern: ReadonlyArray<string>, start: number, eof = false) {