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

This commit is contained in:
Sebastian 2026-04-02 22:11:17 +02:00 committed by GitHub
parent 5e1b513527
commit 29f7dc073b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 316 additions and 132 deletions

View file

@ -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",

View file

@ -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`

View file

@ -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>

View file

@ -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}
/>

View file

@ -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 }))

View file

@ -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)
},

View file

@ -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>

View file

@ -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 />

View file

@ -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}

View file

@ -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()

View file

@ -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}

View file

@ -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}

View file

@ -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

View file

@ -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: {