Adds TUI prompt traits, refs, and plugin slots (#20741)

.opencode/plugins/tui-smoke.tsx

@@ -653,23 +653,30 @@ const home = (api: TuiPluginApi, input: Cfg) => ({
       const skin = look(ctx.theme.current)
       type Prompt = (props: {
         workspaceID?: string
+        visible?: boolean
+        disabled?: boolean
+        onSubmit?: () => void
         hint?: JSX.Element
+        right?: JSX.Element
+        showPlaceholder?: boolean
         placeholders?: {
           normal?: string[]
           shell?: string[]
         }
       }) => JSX.Element
-      if (!("Prompt" in api.ui)) return null
-      const view = api.ui.Prompt
-      if (typeof view !== "function") return null
-      const Prompt = view as Prompt
+      type Slot = (
+        props: { name: string; mode?: unknown; children?: JSX.Element } & Record<string, unknown>,
+      ) => JSX.Element | null
+      const ui = api.ui as TuiPluginApi["ui"] & { Prompt: Prompt; Slot: Slot }
+      const Prompt = ui.Prompt
+      const Slot = ui.Slot
       const normal = [
         `[SMOKE] route check for ${input.label}`,
         "[SMOKE] confirm home_prompt slot override",
-        "[SMOKE] verify api.ui.Prompt rendering",
+        "[SMOKE] verify prompt-right slot passthrough",
       ]
       const shell = ["printf '[SMOKE] home prompt\n'", "git status --short", "bun --version"]
-      const Hint = (
+      const hint = (
         <box flexShrink={0} flexDirection="row" gap={1}>
           <text fg={skin.muted}>
             <span style={{ fg: skin.accent }}>•</span> smoke home prompt
@@ -677,7 +684,46 @@ const home = (api: TuiPluginApi, input: Cfg) => ({
         </box>
       )
 
-      return <Prompt workspaceID={value.workspace_id} hint={Hint} placeholders={{ normal, shell }} />
+      return (
+        <Prompt
+          workspaceID={value.workspace_id}
+          hint={hint}
+          right={
+            <box flexDirection="row" gap={1}>
+              <Slot name="home_prompt_right" workspace_id={value.workspace_id} />
+              <Slot name="smoke_prompt_right" workspace_id={value.workspace_id} label={input.label} />
+            </box>
+          }
+          placeholders={{ normal, shell }}
+        />
+      )
+    },
+    home_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      const id = value.workspace_id?.slice(0, 8) ?? "none"
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{input.label}</span> home:{id}
+        </text>
+      )
+    },
+    session_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{input.label}</span> session:{value.session_id.slice(0, 8)}
+        </text>
+      )
+    },
+    smoke_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      const id = typeof value.workspace_id === "string" ? value.workspace_id.slice(0, 8) : "none"
+      const label = typeof value.label === "string" ? value.label : input.label
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{label}</span> custom:{id}
+        </text>
+      )
     },
     home_bottom(ctx) {
       const skin = look(ctx.theme.current)

bun.lock

@@ -341,8 +341,8 @@
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@openrouter/ai-sdk-provider": "2.3.3",
-        "@opentui/core": "0.1.95",
-        "@opentui/solid": "0.1.95",
+        "@opentui/core": "0.1.96",
+        "@opentui/solid": "0.1.96",
         "@parcel/watcher": "2.5.1",
         "@pierre/diffs": "catalog:",
         "@solid-primitives/event-bus": "1.1.2",
@@ -434,16 +434,16 @@
         "zod": "catalog:",
       },
       "devDependencies": {
-        "@opentui/core": "0.1.95",
-        "@opentui/solid": "0.1.95",
+        "@opentui/core": "0.1.96",
+        "@opentui/solid": "0.1.96",
         "@tsconfig/node22": "catalog:",
         "@types/node": "catalog:",
         "@typescript/native-preview": "catalog:",
         "typescript": "catalog:",
       },
       "peerDependencies": {
-        "@opentui/core": ">=0.1.95",
-        "@opentui/solid": ">=0.1.95",
+        "@opentui/core": ">=0.1.96",
+        "@opentui/solid": ">=0.1.96",
       },
       "optionalPeers": [
         "@opentui/core",
@@ -1498,21 +1498,21 @@
 
     "@opentelemetry/api": ["@opentelemetry/[email protected]", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
-    "@opentui/core": ["@opentui/[email protected]5", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.95", "@opentui/core-darwin-x64": "0.1.95", "@opentui/core-linux-arm64": "0.1.95", "@opentui/core-linux-x64": "0.1.95", "@opentui/core-win32-arm64": "0.1.95", "@opentui/core-win32-x64": "0.1.95", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-Ha73I+PPSy6Jk8CTZgdGRHU+nnmrPAs7m6w0k6ge1/kWbcNcZB0lY67sWQMdoa6bSINQMNWg7SjbNCC9B/0exg=="],
+    "@opentui/core": ["@opentui/[email protected]6", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.96", "@opentui/core-darwin-x64": "0.1.96", "@opentui/core-linux-arm64": "0.1.96", "@opentui/core-linux-x64": "0.1.96", "@opentui/core-win32-arm64": "0.1.96", "@opentui/core-win32-x64": "0.1.96", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-VBO5zRiGM6fhibG3AwTMpf0JgbYWG0sXP5AsSJAYw8tQ18OCPj+EDLXGZ1DFmMnJWEi+glKYjmqnIp4yRCqi+Q=="],
 
-    "@opentui/core-darwin-arm64": ["@opentui/[email protected]5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-92joqr0ucGaIBCl9uYhe5DwAPbgGMTaCsCeY8Yf3VQ72wjGbOTwnC1TvU5wC6bUmiyqfijCqMyuUnj83teIVVQ=="],
+    "@opentui/core-darwin-arm64": ["@opentui/[email protected]6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-909i75uhLmlUFCK3LK4iICaymiA7QaB45X9IDX94KaDyHL3Y1PgYTzoRZLJlqeOfOBjVfEjMAh/zA5XexWDMpA=="],
 
-    "@opentui/core-darwin-x64": ["@opentui/[email protected]5", "", { "os": "darwin", "cpu": "x64" }, "sha512-+TLL3Kp3x7DTWEAkCAYe+RjRhl58QndoeXMstZNS8GQyrjSpUuivzwidzAz0HZK9SbZJfvaxZmXsToAIdI2fag=="],
+    "@opentui/core-darwin-x64": ["@opentui/[email protected]6", "", { "os": "darwin", "cpu": "x64" }, "sha512-qukQjjScKldZAfgY9qVMPv4ZA6Ko7oXjNBUcSMGDgUiOitH6INT1cJQVUnAIu14DY15yEl08MEQ8soLDaSAHcg=="],
 
-    "@opentui/core-linux-arm64": ["@opentui/[email protected]5", "", { "os": "linux", "cpu": "arm64" }, "sha512-dAYeRqh7P8o0xFZleDDR1Abt4gSvCISqw6syOrbH3dl7pMbVdGgzA5stM9jqMgdPUVE7Ngumo17C23ehkGv93A=="],
+    "@opentui/core-linux-arm64": ["@opentui/[email protected]6", "", { "os": "linux", "cpu": "arm64" }, "sha512-9ktmyS24nfSmlFPX0GMWEaEYSjtEPbRn59y4KBhHVhzPsl+YKlzstyHomTBu51IAPu6oL3+t3Lu4gU+k1gFOQQ=="],
 
-    "@opentui/core-linux-x64": ["@opentui/[email protected]5", "", { "os": "linux", "cpu": "x64" }, "sha512-O54TCgK8E7j2NKrDXUOTZqO4sb8JjeAfnhrStxAMMEw4RFCGWx3p3wLesqR16uKfFFJFDyoh2OWZ698tO88EAA=="],
+    "@opentui/core-linux-x64": ["@opentui/[email protected]6", "", { "os": "linux", "cpu": "x64" }, "sha512-m2pVhIdtqFYO+QSMc2VZgSSCNxRGPL+U+aKYYbvJjPzqCnIkHB9eO0ePU4b3t+V7GaWCcCP3vDCy3g1J5/FreA=="],
 
-    "@opentui/core-win32-arm64": ["@opentui/[email protected]5", "", { "os": "win32", "cpu": "arm64" }, "sha512-T1RlZ6U/95eYDN6rUm4SLOVA5LBR7iL3TcBroQhV/883bVczXIBPhriEXQayup5FsAemnQba1BzMNvy6128SUw=="],
+    "@opentui/core-win32-arm64": ["@opentui/[email protected]6", "", { "os": "win32", "cpu": "arm64" }, "sha512-OybZ4jvX6H6RKYyGpZqzy3ZrwKaxaXKWwFsmG6pC2J+GRhf5oCIIEy3Y5573h7zy1cq3T9cb225KzBANq9j5BA=="],
 
-    "@opentui/core-win32-x64": ["@opentui/[email protected]5", "", { "os": "win32", "cpu": "x64" }, "sha512-lH2FHO0HSP2xWT+ccoz0BkLYFsMm7e6OYOh63BUHHh5b7ispnzP4aTyxiaLWrfJwdL0M9rp5cLIY32bhBKF2oA=="],
+    "@opentui/core-win32-x64": ["@opentui/[email protected]6", "", { "os": "win32", "cpu": "x64" }, "sha512-3YKjg90j14I7dJ94yN0pAYcTf4ogCoohv6ptRdG96XUyzrYhQiDMP398vCIOMjaLBjtMtFmTxSf+W46zm96BCQ=="],
 
-    "@opentui/solid": ["@opentui/[email protected]5", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.95", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.10", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.11" } }, "sha512-iotYCvULgDurLXv3vgOzTLnEOySHFOa/6cEDex76jBt+gkniOEh2cjxxIVt6lkfTsk6UNTk6yCdwNK3nca/j+Q=="],
+    "@opentui/solid": ["@opentui/[email protected]6", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.96", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.10", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.11" } }, "sha512-NGiVvG1ylswMjF9fzvpSaWLcZKQsPw67KRkIZgsdf4ZIKUZEZ94NktabCA92ti4WVGXhPvyM3SIX5S2+HvnJFg=="],
 
     "@oslojs/asn1": ["@oslojs/[email protected]", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],
 

packages/opencode/package.json

@@ -104,8 +104,8 @@
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/util": "workspace:*",
     "@openrouter/ai-sdk-provider": "2.3.3",
-    "@opentui/core": "0.1.95",
-    "@opentui/solid": "0.1.95",
+    "@opentui/core": "0.1.96",
+    "@opentui/solid": "0.1.96",
     "@parcel/watcher": "2.5.1",
     "@pierre/diffs": "catalog:",
     "@solid-primitives/event-bus": "1.1.2",

packages/opencode/specs/tui-plugins.md

@@ -194,9 +194,9 @@ That is what makes local config-scoped plugins able to import `@opencode-ai/plug
 Top-level API groups exposed to `tui(api, options, meta)`:
 
 - `api.app.version`
-- `api.command.register(cb)` / `api.command.trigger(value)`
+- `api.command.register(cb)` / `api.command.trigger(value)` / `api.command.show()`
 - `api.route.register(routes)` / `api.route.navigate(name, params?)` / `api.route.current`
-- `api.ui.Dialog`, `DialogAlert`, `DialogConfirm`, `DialogPrompt`, `DialogSelect`, `Prompt`, `ui.toast`, `ui.dialog`
+- `api.ui.Dialog`, `DialogAlert`, `DialogConfirm`, `DialogPrompt`, `DialogSelect`, `Slot`, `Prompt`, `ui.toast`, `ui.dialog`
 - `api.keybind.match`, `print`, `create`
 - `api.tuiConfig`
 - `api.kv.get`, `set`, `ready`
@@ -225,6 +225,7 @@ Command behavior:
 - Registrations are reactive.
 - Later registrations win for duplicate `value` and for keybind handling.
 - Hidden commands are removed from the command dialog and slash list, but still respond to keybinds and `command.trigger(value)` if `enabled !== false`.
+- `api.command.show()` opens the host command dialog directly.
 
 ### Routes
 
@@ -242,7 +243,8 @@ Command behavior:
 
 - `ui.Dialog` is the base dialog wrapper.
 - `ui.DialogAlert`, `ui.DialogConfirm`, `ui.DialogPrompt`, `ui.DialogSelect` are built-in dialog components.
-- `ui.Prompt` renders the same prompt component used by the host app.
+- `ui.Slot` renders host or plugin-defined slots by name from plugin JSX.
+- `ui.Prompt` renders the same prompt component used by the host app and accepts `sessionID`, `workspaceID`, `ref`, and `right` for the prompt meta row's right side.
 - `ui.toast(...)` shows a toast.
 - `ui.dialog` exposes the host dialog stack:
   - `replace(render, onClose?)`
@@ -315,8 +317,12 @@ Current host slot names:
 
 - `app`
 - `home_logo`
-- `home_prompt` with props `{ workspace_id? }`
+- `home_prompt` with props `{ workspace_id?, ref? }`
+- `home_prompt_right` with props `{ workspace_id? }`
+- `session_prompt` with props `{ session_id, visible?, disabled?, on_submit?, ref? }`
+- `session_prompt_right` with props `{ session_id }`
 - `home_bottom`
+- `home_footer`
 - `sidebar_title` with props `{ session_id, title, share_url? }`
 - `sidebar_content` with props `{ session_id }`
 - `sidebar_footer` with props `{ session_id }`
@@ -328,8 +334,8 @@ Slot notes:
 - `api.slots.register(plugin)` does not return an unregister function.
 - Returned ids are `pluginId`, `pluginId:1`, `pluginId:2`, and so on.
 - Plugin-provided `id` is not allowed.
-- The current host renders `home_logo` and `home_prompt` with `replace`, `sidebar_title` and `sidebar_footer` with `single_winner`, and `app`, `home_bottom`, and `sidebar_content` with the slot library default mode.
-- Plugins cannot define new slot names in this branch.
+- The current host renders `home_logo`, `home_prompt`, and `session_prompt` with `replace`, `home_footer`, `sidebar_title`, and `sidebar_footer` with `single_winner`, and `app`, `home_prompt_right`, `session_prompt_right`, `home_bottom`, and `sidebar_content` with the slot library default mode.
+- Plugins can define custom slot names in `api.slots.register(...)` and render them from plugin UI with `ui.Slot`.
 
 ### Plugin control and lifecycle
 
@@ -425,5 +431,6 @@ The plugin manager is exposed as a command with title `Plugins` and value `plugi
 ## Current in-repo examples
 
 - Local smoke plugin: `.opencode/plugins/tui-smoke.tsx`
+- Local vim plugin: `.opencode/plugins/tui-vim.tsx`
 - Local smoke config: `.opencode/tui.json`
 - Local smoke theme: `.opencode/plugins/smoke-theme.json`

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -1,5 +1,5 @@
 import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, decodePasteBytes, t, dim, fg } from "@opentui/core"
-import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, on, Show, Switch, Match } from "solid-js"
+import { createEffect, createMemo, onMount, createSignal, onCleanup, on, Show, Switch, Match } from "solid-js"
 import "opentui-spinner/solid"
 import path from "path"
 import { Filesystem } from "@/util/filesystem"
@@ -18,7 +18,7 @@ import { usePromptStash } from "./stash"
 import { DialogStash } from "../dialog-stash"
 import { type AutocompleteRef, Autocomplete } from "./autocomplete"
 import { useCommandDialog } from "../dialog-command"
-import { useKeyboard, useRenderer } from "@opentui/solid"
+import { useKeyboard, useRenderer, type JSX } from "@opentui/solid"
 import { Editor } from "@tui/util/editor"
 import { useExit } from "../../context/exit"
 import { Clipboard } from "../../util/clipboard"
@@ -42,8 +42,9 @@ export type PromptProps = {
   visible?: boolean
   disabled?: boolean
   onSubmit?: () => void
-  ref?: (ref: PromptRef) => void
+  ref?: (ref: PromptRef | undefined) => void
   hint?: JSX.Element
+  right?: JSX.Element
   showPlaceholder?: boolean
   placeholders?: {
     normal?: string[]
@@ -92,6 +93,7 @@ export function Prompt(props: PromptProps) {
   const kv = useKV()
   const list = createMemo(() => props.placeholders?.normal ?? [])
   const shell = createMemo(() => props.placeholders?.shell ?? [])
+  const [auto, setAuto] = createSignal<AutocompleteRef>()
 
   function promptModelWarning() {
     toast.show({
@@ -435,11 +437,24 @@ export function Prompt(props: PromptProps) {
     },
   }
 
+  onCleanup(() => {
+    props.ref?.(undefined)
+  })
+
   createEffect(() => {
     if (props.visible !== false) input?.focus()
     if (props.visible === false) input?.blur()
   })
 
+  createEffect(() => {
+    if (!input || input.isDestroyed) return
+    input.traits = {
+      capture: auto()?.visible ? ["escape", "navigate", "submit", "tab"] : undefined,
+      suspend: !!props.disabled || store.mode === "shell",
+      status: store.mode === "shell" ? "SHELL" : undefined,
+    }
+  })
+
   function restoreExtmarksFromParts(parts: PromptInfo["parts"]) {
     input.extmarks.clear()
     setStore("extmarkToPartIndex", new Map())
@@ -844,7 +859,10 @@ export function Prompt(props: PromptProps) {
     <>
       <Autocomplete
         sessionID={props.sessionID}
-        ref={(r) => (autocomplete = r)}
+        ref={(r) => {
+          autocomplete = r
+          setAuto(() => r)
+        }}
         anchor={() => anchor}
         input={() => input}
         setPrompt={(cb) => {
@@ -1060,24 +1078,27 @@ export function Prompt(props: PromptProps) {
               cursorColor={theme.text}
               syntaxStyle={syntax()}
             />
-            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
-              <text fg={highlight()}>
-                {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
-              </text>
-              <Show when={store.mode === "normal"}>
-                <box flexDirection="row" gap={1}>
-                  <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
-                    {local.model.parsed().model}
-                  </text>
-                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
-                  <Show when={showVariant()}>
-                    <text fg={theme.textMuted}>·</text>
-                    <text>
-                      <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
+            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
+              <box flexDirection="row" gap={1}>
+                <text fg={highlight()}>
+                  {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
+                </text>
+                <Show when={store.mode === "normal"}>
+                  <box flexDirection="row" gap={1}>
+                    <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
+                      {local.model.parsed().model}
                     </text>
-                  </Show>
-                </box>
-              </Show>
+                    <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
+                    <Show when={showVariant()}>
+                      <text fg={theme.textMuted}>·</text>
+                      <text>
+                        <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
+                      </text>
+                    </Show>
+                  </box>
+                </Show>
+              </box>
+              {props.right}
             </box>
           </box>
         </box>

packages/opencode/src/cli/cmd/tui/plugin/api.tsx

@@ -1,5 +1,5 @@
 import type { ParsedKey } from "@opentui/core"
-import type { TuiDialogSelectOption, TuiPluginApi, TuiRouteDefinition } from "@opencode-ai/plugin/tui"
+import type { TuiDialogSelectOption, TuiPluginApi, TuiRouteDefinition, TuiSlotProps } from "@opencode-ai/plugin/tui"
 import type { useCommandDialog } from "@tui/component/dialog-command"
 import type { useKeybind } from "@tui/context/keybind"
 import type { useRoute } from "@tui/context/route"
@@ -15,6 +15,7 @@ import { DialogConfirm } from "../ui/dialog-confirm"
 import { DialogPrompt } from "../ui/dialog-prompt"
 import { DialogSelect, type DialogSelectOption as SelectOption } from "../ui/dialog-select"
 import { Prompt } from "../component/prompt"
+import { Slot as HostSlot } from "./slots"
 import type { useToast } from "../ui/toast"
 import { Installation } from "@/installation"
 import { createOpencodeClient, type OpencodeClient } from "@opencode-ai/sdk/v2"
@@ -244,6 +245,9 @@ export function createTuiApi(input: Input): TuiHostPluginApi {
       trigger(value) {
         input.command.trigger(value)
       },
+      show() {
+        input.command.show()
+      },
     },
     route: {
       register(list) {
@@ -288,14 +292,20 @@ export function createTuiApi(input: Input): TuiHostPluginApi {
           />
         )
       },
+      Slot<Name extends string>(props: TuiSlotProps<Name>) {
+        return <HostSlot {...props} />
+      },
       Prompt(props) {
         return (
           <Prompt
+            sessionID={props.sessionID}
             workspaceID={props.workspaceID}
             visible={props.visible}
             disabled={props.disabled}
             onSubmit={props.onSubmit}
+            ref={props.ref}
             hint={props.hint}
+            right={props.right}
             showPlaceholder={props.showPlaceholder}
             placeholders={props.placeholders}
           />

packages/opencode/src/cli/cmd/tui/plugin/runtime.ts

@@ -7,6 +7,7 @@ import {
   type TuiPluginModule,
   type TuiPluginMeta,
   type TuiPluginStatus,
+  type TuiSlotPlugin,
   type TuiTheme,
 } from "@opencode-ai/plugin/tui"
 import path from "path"
@@ -491,6 +492,9 @@ function pluginApi(runtime: RuntimeState, plugin: PluginEntry, scope: PluginScop
     trigger(value) {
       api.command.trigger(value)
     },
+    show() {
+      api.command.show()
+    },
   }
 
   const route: TuiPluginApi["route"] = {
@@ -518,7 +522,7 @@ function pluginApi(runtime: RuntimeState, plugin: PluginEntry, scope: PluginScop
   let count = 0
 
   const slots: TuiPluginApi["slots"] = {
-    register(plugin) {
+    register(plugin: TuiSlotPlugin) {
       const id = count ? `${base}:${count}` : base
       count += 1
       scope.track(host.register({ ...plugin, id }))

packages/opencode/src/cli/cmd/tui/plugin/slots.tsx

@@ -1,22 +1,21 @@
-import { type SlotMode, type TuiPluginApi, type TuiSlotContext, type TuiSlotMap } from "@opencode-ai/plugin/tui"
+import type { TuiPluginApi, TuiSlotContext, TuiSlotMap, TuiSlotProps } from "@opencode-ai/plugin/tui"
 import { createSlot, createSolidSlotRegistry, type JSX, type SolidPlugin } from "@opentui/solid"
 import { isRecord } from "@/util/record"
 
-type SlotProps<K extends keyof TuiSlotMap> = {
-  name: K
-  mode?: SlotMode
-  children?: JSX.Element
-} & TuiSlotMap[K]
+type RuntimeSlotMap = TuiSlotMap<Record<string, object>>
 
-type Slot = <K extends keyof TuiSlotMap>(props: SlotProps<K>) => JSX.Element | null
-export type HostSlotPlugin = SolidPlugin<TuiSlotMap, TuiSlotContext>
+type Slot = <Name extends string>(props: TuiSlotProps<Name>) => JSX.Element | null
+export type HostSlotPlugin<Slots extends Record<string, object> = {}> = SolidPlugin<TuiSlotMap<Slots>, TuiSlotContext>
 
 export type HostPluginApi = TuiPluginApi
 export type HostSlots = {
-  register: (plugin: HostSlotPlugin) => () => void
+  register: {
+    (plugin: HostSlotPlugin): () => void
+    <Slots extends Record<string, object>>(plugin: HostSlotPlugin<Slots>): () => void
+  }
 }
 
-function empty<K extends keyof TuiSlotMap>(_props: SlotProps<K>) {
+function empty<Name extends string>(_props: TuiSlotProps<Name>) {
   return null
 }
 
@@ -24,7 +23,7 @@ let view: Slot = empty
 
 export const Slot: Slot = (props) => view(props)
 
-function isHostSlotPlugin(value: unknown): value is HostSlotPlugin {
+function isHostSlotPlugin(value: unknown): value is HostSlotPlugin<Record<string, object>> {
   if (!isRecord(value)) return false
   if (typeof value.id !== "string") return false
   if (!isRecord(value.slots)) return false
@@ -32,7 +31,7 @@ function isHostSlotPlugin(value: unknown): value is HostSlotPlugin {
 }
 
 export function setupSlots(api: HostPluginApi): HostSlots {
-  const reg = createSolidSlotRegistry<TuiSlotMap, TuiSlotContext>(
+  const reg = createSolidSlotRegistry<RuntimeSlotMap, TuiSlotContext>(
     api.renderer,
     {
       theme: api.theme,
@@ -50,10 +49,10 @@ export function setupSlots(api: HostPluginApi): HostSlots {
     },
   )
 
-  const slot = createSlot<TuiSlotMap, TuiSlotContext>(reg)
+  const slot = createSlot<RuntimeSlotMap, TuiSlotContext>(reg)
   view = (props) => slot(props)
   return {
-    register(plugin) {
+    register(plugin: HostSlotPlugin) {
       if (!isHostSlotPlugin(plugin)) return () => {}
       return reg.register(plugin)
     },

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -1,5 +1,5 @@
 import { Prompt, type PromptRef } from "@tui/component/prompt"
-import { createEffect, on, onMount } from "solid-js"
+import { createEffect, createSignal } from "solid-js"
 import { Logo } from "../component/logo"
 import { useSync } from "../context/sync"
 import { Toast } from "../ui/toast"
@@ -20,34 +20,36 @@ export function Home() {
   const sync = useSync()
   const route = useRouteData("home")
   const promptRef = usePromptRef()
-  let prompt: PromptRef | undefined
+  const [ref, setRef] = createSignal<PromptRef | undefined>()
   const args = useArgs()
   const local = useLocal()
-  onMount(() => {
-    if (once) return
-    if (!prompt) return
+  let sent = false
+
+  const bind = (r: PromptRef | undefined) => {
+    setRef(r)
+    promptRef.set(r)
+    if (once || !r) return
     if (route.initialPrompt) {
-      prompt.set(route.initialPrompt)
-      once = true
-    } else if (args.prompt) {
-      prompt.set({ input: args.prompt, parts: [] })
+      r.set(route.initialPrompt)
       once = true
+      return
     }
-  })
+    if (!args.prompt) return
+    r.set({ input: args.prompt, parts: [] })
+    once = true
+  }
 
   // Wait for sync and model store to be ready before auto-submitting --prompt
-  createEffect(
-    on(
-      () => sync.ready && local.model.ready,
-      (ready) => {
-        if (!ready) return
-        if (!prompt) return
-        if (!args.prompt) return
-        if (prompt.current?.input !== args.prompt) return
-        prompt.submit()
-      },
-    ),
-  )
+  createEffect(() => {
+    const r = ref()
+    if (sent) return
+    if (!r) return
+    if (!sync.ready || !local.model.ready) return
+    if (!args.prompt) return
+    if (r.current.input !== args.prompt) return
+    sent = true
+    r.submit()
+  })
 
   return (
     <>
@@ -61,13 +63,11 @@ export function Home() {
         </box>
         <box height={1} minHeight={0} flexShrink={1} />
         <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
-          <TuiPluginRuntime.Slot name="home_prompt" mode="replace" workspace_id={route.workspaceID}>
+          <TuiPluginRuntime.Slot name="home_prompt" mode="replace" workspace_id={route.workspaceID} ref={bind}>
             <Prompt
-              ref={(r) => {
-                prompt = r
-                promptRef.set(r)
-              }}
+              ref={bind}
               workspaceID={route.workspaceID}
+              right={<TuiPluginRuntime.Slot name="home_prompt_right" workspace_id={route.workspaceID} />}
               placeholders={placeholder}
             />
           </TuiPluginRuntime.Slot>

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -82,6 +82,7 @@ import { formatTranscript } from "../../util/transcript"
 import { UI } from "@/cli/ui.ts"
 import { useTuiConfig } from "../../context/tui-config"
 import { getScrollAcceleration } from "../../util/scroll"
+import { TuiPluginRuntime } from "../../plugin"
 
 addDefaultParsers(parsers.parsers)
 
@@ -129,6 +130,8 @@ export function Session() {
     if (session()?.parentID) return []
     return children().flatMap((x) => sync.data.question[x.id] ?? [])
   })
+  const visible = createMemo(() => !session()?.parentID && permissions().length === 0 && questions().length === 0)
+  const disabled = createMemo(() => permissions().length > 0 || questions().length > 0)
 
   const pending = createMemo(() => {
     return messages().findLast((x) => x.role === "assistant" && !x.time.completed)?.id
@@ -190,12 +193,7 @@ export function Session() {
   const sdk = useSDK()
 
   // Handle initial prompt from fork
-  createEffect(() => {
-    if (route.initialPrompt && prompt) {
-      prompt.set(route.initialPrompt)
-    }
-  })
-
+  let seeded = false
   let lastSwitch: string | undefined = undefined
   sdk.event.on("message.part.updated", (evt) => {
     const part = evt.properties.part
@@ -214,7 +212,14 @@ export function Session() {
   })
 
   let scroll: ScrollBoxRenderable
-  let prompt: PromptRef
+  let prompt: PromptRef | undefined
+  const bind = (r: PromptRef | undefined) => {
+    prompt = r
+    promptRef.set(r)
+    if (seeded || !route.initialPrompt || !r) return
+    seeded = true
+    r.set(route.initialPrompt)
+  }
   const keybind = useKeybind()
   const dialog = useDialog()
   const renderer = useRenderer()
@@ -409,7 +414,7 @@ export function Session() {
               if (child) scroll.scrollBy(child.y - scroll.y - 1)
             }}
             sessionID={route.sessionID}
-            setPrompt={(promptInfo) => prompt.set(promptInfo)}
+            setPrompt={(promptInfo) => prompt?.set(promptInfo)}
           />
         ))
       },
@@ -510,7 +515,7 @@ export function Session() {
             toBottom()
           })
         const parts = sync.data.part[message.id]
-        prompt.set(
+        prompt?.set(
           parts.reduce(
             (agg, part) => {
               if (part.type === "text") {
@@ -543,7 +548,7 @@ export function Session() {
           sdk.client.session.unrevert({
             sessionID: route.sessionID,
           })
-          prompt.set({ input: "", parts: [] })
+          prompt?.set({ input: "", parts: [] })
           return
         }
         sdk.client.session.revert({
@@ -1124,7 +1129,7 @@ export function Session() {
                             <DialogMessage
                               messageID={message.id}
                               sessionID={route.sessionID}
-                              setPrompt={(promptInfo) => prompt.set(promptInfo)}
+                              setPrompt={(promptInfo) => prompt?.set(promptInfo)}
                             />
                           ))
                         }}
@@ -1154,22 +1159,28 @@ export function Session() {
               <Show when={session()?.parentID}>
                 <SubagentFooter />
               </Show>
-              <Prompt
-                visible={!session()?.parentID && permissions().length === 0 && questions().length === 0}
-                ref={(r) => {
-                  prompt = r
-                  promptRef.set(r)
-                  // Apply initial prompt when prompt component mounts (e.g., from fork)
-                  if (route.initialPrompt) {
-                    r.set(route.initialPrompt)
-                  }
-                }}
-                disabled={permissions().length > 0 || questions().length > 0}
-                onSubmit={() => {
-                  toBottom()
-                }}
-                sessionID={route.sessionID}
-              />
+              <Show when={visible()}>
+                <TuiPluginRuntime.Slot
+                  name="session_prompt"
+                  mode="replace"
+                  session_id={route.sessionID}
+                  visible={visible()}
+                  disabled={disabled()}
+                  on_submit={toBottom}
+                  ref={bind}
+                >
+                  <Prompt
+                    visible={visible()}
+                    ref={bind}
+                    disabled={disabled()}
+                    onSubmit={() => {
+                      toBottom()
+                    }}
+                    sessionID={route.sessionID}
+                    right={<TuiPluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
+                  />
+                </TuiPluginRuntime.Slot>
+              </Show>
             </box>
           </Show>
           <Toast />

packages/opencode/src/cli/cmd/tui/routes/session/permission.tsx

@@ -520,7 +520,10 @@ function RejectPrompt(props: { onConfirm: (message: string) => void; onCancel: (
         gap={1}
       >
         <textarea
-          ref={(val: TextareaRenderable) => (input = val)}
+          ref={(val: TextareaRenderable) => {
+            input = val
+            val.traits = { status: "REJECT" }
+          }}
           focused
           textColor={theme.text}
           focusedTextColor={theme.text}

packages/opencode/src/cli/cmd/tui/routes/session/question.tsx

@@ -380,6 +380,7 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
                       <textarea
                         ref={(val: TextareaRenderable) => {
                           textarea = val
+                          val.traits = { status: "ANSWER" }
                           queueMicrotask(() => {
                             val.focus()
                             val.gotoLineEnd()

packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx

@@ -100,7 +100,10 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
           }}
           height={3}
           keyBindings={[{ name: "return", action: "submit" }]}
-          ref={(val: TextareaRenderable) => (textarea = val)}
+          ref={(val: TextareaRenderable) => {
+            textarea = val
+            val.traits = { status: "FILENAME" }
+          }}
           initialValue={props.defaultFilename}
           placeholder="Enter filename"
           placeholderColor={theme.textMuted}

packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx

@@ -45,6 +45,13 @@ export function DialogPrompt(props: DialogPromptProps) {
 
   createEffect(() => {
     if (!textarea || textarea.isDestroyed) return
+    const traits = props.busy
+      ? {
+          suspend: true,
+          status: "BUSY",
+        }
+      : {}
+    textarea.traits = traits
     if (props.busy) {
       textarea.blur()
       return
@@ -71,7 +78,9 @@ export function DialogPrompt(props: DialogPromptProps) {
           }}
           height={3}
           keyBindings={props.busy ? [] : [{ name: "return", action: "submit" }]}
-          ref={(val: TextareaRenderable) => (textarea = val)}
+          ref={(val: TextareaRenderable) => {
+            textarea = val
+          }}
           initialValue={props.value}
           placeholder={props.placeholder ?? "Enter text"}
           placeholderColor={theme.textMuted}

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -258,6 +258,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
             focusedTextColor={theme.textMuted}
             ref={(r) => {
               input = r
+              input.traits = { status: "FILTER" }
               setTimeout(() => {
                 if (!input) return
                 if (input.isDestroyed) return

packages/opencode/test/fixture/tui-plugin.ts

@@ -211,6 +211,7 @@ export function createTuiPluginApi(opts: Opts = {}): HostPluginApi {
         }
       },
       trigger: () => {},
+      show: () => {},
     },
     route: {
       register: () => {
@@ -231,6 +232,7 @@ export function createTuiPluginApi(opts: Opts = {}): HostPluginApi {
       DialogConfirm: () => null,
       DialogPrompt: () => null,
       DialogSelect: () => null,
+      Slot: () => null,
       Prompt: () => null,
       toast: () => {},
       dialog: {

packages/plugin/package.json

@@ -21,8 +21,8 @@
     "zod": "catalog:"
   },
   "peerDependencies": {
-    "@opentui/core": ">=0.1.95",
-    "@opentui/solid": ">=0.1.95"
+    "@opentui/core": ">=0.1.96",
+    "@opentui/solid": ">=0.1.96"
   },
   "peerDependenciesMeta": {
     "@opentui/core": {
@@ -33,8 +33,8 @@
     }
   },
   "devDependencies": {
-    "@opentui/core": "0.1.95",
-    "@opentui/solid": "0.1.95",
+    "@opentui/core": "0.1.96",
+    "@opentui/solid": "0.1.96",
     "@tsconfig/node22": "catalog:",
     "@types/node": "catalog:",
     "typescript": "catalog:",

packages/plugin/src/tui.ts

@@ -1,6 +1,8 @@
 import type {
+  AgentPart,
   OpencodeClient,
   Event,
+  FilePart,
   LspStatus,
   McpStatus,
   Todo,
@@ -10,10 +12,11 @@ import type {
   PermissionRequest,
   QuestionRequest,
   SessionStatus,
+  TextPart,
   Workspace,
   Config as SdkConfig,
 } from "@opencode-ai/sdk/v2"
-import type { CliRenderer, ParsedKey, RGBA } from "@opentui/core"
+import type { CliRenderer, ParsedKey, RGBA, SlotMode } from "@opentui/core"
 import type { JSX, SolidPlugin } from "@opentui/solid"
 import type { Config as PluginConfig, PluginOptions } from "./index.js"
 
@@ -135,12 +138,43 @@ export type TuiDialogSelectProps<Value = unknown> = {
   current?: Value
 }
 
+export type TuiPromptInfo = {
+  input: string
+  mode?: "normal" | "shell"
+  parts: (
+    | Omit<FilePart, "id" | "messageID" | "sessionID">
+    | Omit<AgentPart, "id" | "messageID" | "sessionID">
+    | (Omit<TextPart, "id" | "messageID" | "sessionID"> & {
+        source?: {
+          text: {
+            start: number
+            end: number
+            value: string
+          }
+        }
+      })
+  )[]
+}
+
+export type TuiPromptRef = {
+  focused: boolean
+  current: TuiPromptInfo
+  set(prompt: TuiPromptInfo): void
+  reset(): void
+  blur(): void
+  focus(): void
+  submit(): void
+}
+
 export type TuiPromptProps = {
+  sessionID?: string
   workspaceID?: string
   visible?: boolean
   disabled?: boolean
   onSubmit?: () => void
+  ref?: (ref: TuiPromptRef | undefined) => void
   hint?: JSX.Element
+  right?: JSX.Element
   showPlaceholder?: boolean
   placeholders?: {
     normal?: string[]
@@ -289,11 +323,25 @@ export type TuiSidebarFileItem = {
   deletions: number
 }
 
-export type TuiSlotMap = {
+export type TuiHostSlotMap = {
   app: {}
   home_logo: {}
   home_prompt: {
     workspace_id?: string
+    ref?: (ref: TuiPromptRef | undefined) => void
+  }
+  home_prompt_right: {
+    workspace_id?: string
+  }
+  session_prompt: {
+    session_id: string
+    visible?: boolean
+    disabled?: boolean
+    on_submit?: () => void
+    ref?: (ref: TuiPromptRef | undefined) => void
+  }
+  session_prompt_right: {
+    session_id: string
   }
   home_bottom: {}
   home_footer: {}
@@ -310,18 +358,35 @@ export type TuiSlotMap = {
   }
 }
 
+export type TuiSlotMap<Slots extends Record<string, object> = {}> = TuiHostSlotMap & Slots
+
+type TuiSlotShape<Name extends string, Slots extends Record<string, object>> = Name extends keyof TuiHostSlotMap
+  ? TuiHostSlotMap[Name]
+  : Name extends keyof Slots
+    ? Slots[Name]
+    : Record<string, unknown>
+
+export type TuiSlotProps<Name extends string = string, Slots extends Record<string, object> = {}> = {
+  name: Name
+  mode?: SlotMode
+  children?: JSX.Element
+} & TuiSlotShape<Name, Slots>
+
 export type TuiSlotContext = {
   theme: TuiTheme
 }
 
-type SlotCore = SolidPlugin<TuiSlotMap, TuiSlotContext>
+type SlotCore<Slots extends Record<string, object> = {}> = SolidPlugin<TuiSlotMap<Slots>, TuiSlotContext>
 
-export type TuiSlotPlugin = Omit<SlotCore, "id"> & {
+export type TuiSlotPlugin<Slots extends Record<string, object> = {}> = Omit<SlotCore<Slots>, "id"> & {
   id?: never
 }
 
 export type TuiSlots = {
-  register: (plugin: TuiSlotPlugin) => string
+  register: {
+    (plugin: TuiSlotPlugin): string
+    <Slots extends Record<string, object>>(plugin: TuiSlotPlugin<Slots>): string
+  }
 }
 
 export type TuiEventBus = {
@@ -391,6 +456,7 @@ export type TuiPluginApi = {
   command: {
     register: (cb: () => TuiCommand[]) => () => void
     trigger: (value: string) => void
+    show: () => void
   }
   route: {
     register: (routes: TuiRouteDefinition[]) => () => void
@@ -403,6 +469,7 @@ export type TuiPluginApi = {
     DialogConfirm: (props: TuiDialogConfirmProps) => JSX.Element
     DialogPrompt: (props: TuiDialogPromptProps) => JSX.Element
     DialogSelect: <Value = unknown>(props: TuiDialogSelectProps<Value>) => JSX.Element
+    Slot: <Name extends string>(props: TuiSlotProps<Name>) => JSX.Element | null
     Prompt: (props: TuiPromptProps) => JSX.Element
     toast: (input: TuiToast) => void
     dialog: TuiDialogStack