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

Author: kommander

bun.lock

@@ -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/package.json

@@ -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/specs/tui-plugins.md

@@ -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/component/prompt/index.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/api.tsx

@@ -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/runtime.ts

@@ -1,38 +1,37 @@
-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
 }
 
 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
   return true
 }
 
 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)
     },