diff options
18 files changed, 316 insertions, 132 deletions
diff --git a/.opencode/plugins/tui-smoke.tsx b/.opencode/plugins/tui-smoke.tsx index febfc3e37..63f9f331e 100644 --- a/.opencode/plugins/tui-smoke.tsx +++ b/.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) @@ -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]", "", { "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]", "", { "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]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-92joqr0ucGaIBCl9uYhe5DwAPbgGMTaCsCeY8Yf3VQ72wjGbOTwnC1TvU5wC6bUmiyqfijCqMyuUnj83teIVVQ=="], + "@opentui/core-darwin-arm64": ["@opentui/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-909i75uhLmlUFCK3LK4iICaymiA7QaB45X9IDX94KaDyHL3Y1PgYTzoRZLJlqeOfOBjVfEjMAh/zA5XexWDMpA=="], - "@opentui/core-darwin-x64": ["@opentui/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-+TLL3Kp3x7DTWEAkCAYe+RjRhl58QndoeXMstZNS8GQyrjSpUuivzwidzAz0HZK9SbZJfvaxZmXsToAIdI2fag=="], + "@opentui/core-darwin-x64": ["@opentui/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-qukQjjScKldZAfgY9qVMPv4ZA6Ko7oXjNBUcSMGDgUiOitH6INT1cJQVUnAIu14DY15yEl08MEQ8soLDaSAHcg=="], - "@opentui/core-linux-arm64": ["@opentui/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-dAYeRqh7P8o0xFZleDDR1Abt4gSvCISqw6syOrbH3dl7pMbVdGgzA5stM9jqMgdPUVE7Ngumo17C23ehkGv93A=="], + "@opentui/core-linux-arm64": ["@opentui/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-9ktmyS24nfSmlFPX0GMWEaEYSjtEPbRn59y4KBhHVhzPsl+YKlzstyHomTBu51IAPu6oL3+t3Lu4gU+k1gFOQQ=="], - "@opentui/core-linux-x64": ["@opentui/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-O54TCgK8E7j2NKrDXUOTZqO4sb8JjeAfnhrStxAMMEw4RFCGWx3p3wLesqR16uKfFFJFDyoh2OWZ698tO88EAA=="], + "@opentui/core-linux-x64": ["@opentui/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-m2pVhIdtqFYO+QSMc2VZgSSCNxRGPL+U+aKYYbvJjPzqCnIkHB9eO0ePU4b3t+V7GaWCcCP3vDCy3g1J5/FreA=="], - "@opentui/core-win32-arm64": ["@opentui/[email protected]", "", { "os": "win32", "cpu": "arm64" }, "sha512-T1RlZ6U/95eYDN6rUm4SLOVA5LBR7iL3TcBroQhV/883bVczXIBPhriEXQayup5FsAemnQba1BzMNvy6128SUw=="], + "@opentui/core-win32-arm64": ["@opentui/[email protected]", "", { "os": "win32", "cpu": "arm64" }, "sha512-OybZ4jvX6H6RKYyGpZqzy3ZrwKaxaXKWwFsmG6pC2J+GRhf5oCIIEy3Y5573h7zy1cq3T9cb225KzBANq9j5BA=="], - "@opentui/core-win32-x64": ["@opentui/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-lH2FHO0HSP2xWT+ccoz0BkLYFsMm7e6OYOh63BUHHh5b7ispnzP4aTyxiaLWrfJwdL0M9rp5cLIY32bhBKF2oA=="], + "@opentui/core-win32-x64": ["@opentui/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-3YKjg90j14I7dJ94yN0pAYcTf4ogCoohv6ptRdG96XUyzrYhQiDMP398vCIOMjaLBjtMtFmTxSf+W46zm96BCQ=="], - "@opentui/solid": ["@opentui/[email protected]", "", { "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]", "", { "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=="], diff --git a/packages/opencode/package.json b/packages/opencode/package.json index d09a1972b..173bec6e8 100644 --- a/packages/opencode/package.json +++ b/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", diff --git a/packages/opencode/specs/tui-plugins.md b/packages/opencode/specs/tui-plugins.md index 632f1e170..c5420586e 100644 --- a/packages/opencode/specs/tui-plugins.md +++ b/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` diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx index 96563b884..0c55ef627 100644 --- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx +++ b/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> diff --git a/packages/opencode/src/cli/cmd/tui/plugin/api.tsx b/packages/opencode/src/cli/cmd/tui/plugin/api.tsx index e5bd41b9d..529c50cfa 100644 --- a/packages/opencode/src/cli/cmd/tui/plugin/api.tsx +++ b/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} /> diff --git a/packages/opencode/src/cli/cmd/tui/plugin/runtime.ts b/packages/opencode/src/cli/cmd/tui/plugin/runtime.ts index e5bc15d5c..b33efdbd3 100644 --- a/packages/opencode/src/cli/cmd/tui/plugin/runtime.ts +++ b/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 })) diff --git a/packages/opencode/src/cli/cmd/tui/plugin/slots.tsx b/packages/opencode/src/cli/cmd/tui/plugin/slots.tsx index 3fd77875e..085f6994b 100644 --- a/packages/opencode/src/cli/cmd/tui/plugin/slots.tsx +++ b/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) }, diff --git a/packages/opencode/src/cli/cmd/tui/routes/home.tsx b/packages/opencode/src/cli/cmd/tui/routes/home.tsx index 8826df314..79b5c4d7a 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/home.tsx +++ b/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> diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx index bb00f548f..48d6f9cb8 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx +++ b/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 /> diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/permission.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/permission.tsx index a0d9a54ea..e0b5002b6 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/session/permission.tsx +++ b/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} diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/question.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/question.tsx index dd046c354..65989b9f3 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/session/question.tsx +++ b/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() diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx index 64bd4fbb0..4442eb9e6 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx +++ b/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} diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx index 370fc54bd..6df99c33f 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx +++ b/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} diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx index 2690c9d78..30cf3b954 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx +++ b/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 diff --git a/packages/opencode/test/fixture/tui-plugin.ts b/packages/opencode/test/fixture/tui-plugin.ts index 7a34877e9..a9b1ed4ce 100644 --- a/packages/opencode/test/fixture/tui-plugin.ts +++ b/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: { diff --git a/packages/plugin/package.json b/packages/plugin/package.json index e81385688..e1cde0fd7 100644 --- a/packages/plugin/package.json +++ b/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:", diff --git a/packages/plugin/src/tui.ts b/packages/plugin/src/tui.ts index b082f6abe..27b59b8d5 100644 --- a/packages/plugin/src/tui.ts +++ b/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 |