feat(tui): expand v2 plugin context

This commit is contained in:
Dax Raad 2026-07-28 11:03:40 -04:00
commit 010133f6df
14 changed files with 545 additions and 204 deletions

View file

@ -1,6 +1,5 @@
import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/v1/tui"
import type { PluginRuntime } from "../plugin/runtime"
import Notifications from "./system/notifications"
import PluginManager from "./system/plugins"
import WhichKey from "./system/which-key"
@ -11,7 +10,7 @@ export type BuiltinTuiPlugin = Omit<TuiPluginModule, "id"> & {
}
export function createBuiltinPlugins(): BuiltinTuiPlugin[] {
return [Notifications, PluginManager, WhichKey]
return [PluginManager, WhichKey]
}
export async function loadBuiltinPlugins(api: TuiPluginApi, runtime: PluginRuntime) {

View file

@ -2,13 +2,11 @@ import { Plugin } from "@opencode-ai/plugin/tui"
import { createMemo, Match, Show, Switch } from "solid-js"
import { useTerminalDimensions } from "@opentui/solid"
import { useTuiApp, useTuiPaths } from "../../context/runtime"
import { useTheme } from "../../context/theme"
import { abbreviateHome } from "../../runtime"
import { FilePath } from "../../ui/file-path"
import { stringWidth } from "../../util/string-width"
function Directory(props: { context: Plugin.Context; maxWidth: number }) {
const { themeV2 } = useTheme()
const paths = useTuiPaths()
const directory = createMemo(() =>
props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
@ -16,13 +14,12 @@ function Directory(props: { context: Plugin.Context; maxWidth: number }) {
return (
<Show when={directory()}>
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={themeV2.text.subdued} />}
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.text.subdued} />}
</Show>
)
}
function Mcp(props: { context: Plugin.Context }) {
const { themeV2 } = useTheme()
const list = createMemo(() => props.context.data.location.mcp.server.list(props.context.location) ?? [])
const failed = createMemo(() => list().some((item) => item.status.status === "failed"))
const count = createMemo(() => list().filter((item) => item.status.status === "connected").length)
@ -30,25 +27,31 @@ function Mcp(props: { context: Plugin.Context }) {
return (
<Show when={list().length}>
<box gap={1} flexDirection="row" flexShrink={0}>
<text fg={themeV2.text.default}>
<text fg={props.context.theme.text.default}>
<Switch>
<Match when={failed()}>
<span style={{ fg: themeV2.text.feedback.error.default }}> </span>
<span style={{ fg: props.context.theme.text.feedback.error.default }}> </span>
</Match>
<Match when={true}>
<span style={{ fg: count() > 0 ? themeV2.text.feedback.success.default : themeV2.text.subdued }}> </span>
<span
style={{
fg:
count() > 0 ? props.context.theme.text.feedback.success.default : props.context.theme.text.subdued,
}}
>
{" "}
</span>
</Match>
</Switch>
{count()} MCP
</text>
<text fg={themeV2.text.subdued}>/status</text>
<text fg={props.context.theme.text.subdued}>/status</text>
</box>
</Show>
)
}
function View(props: { context: Plugin.Context }) {
const { themeV2 } = useTheme()
const app = useTuiApp()
const dimensions = useTerminalDimensions()
const mcpWidth = createMemo(() => {
@ -76,7 +79,7 @@ function View(props: { context: Plugin.Context }) {
<Mcp context={props.context} />
<box flexGrow={1} />
<box flexShrink={0}>
<text fg={themeV2.text.subdued}>{app.version}</text>
<text fg={props.context.theme.text.subdued}>{app.version}</text>
</box>
</box>
)

View file

@ -83,7 +83,7 @@ function diffSourceLabel(mode: DiffMode) {
function DiffViewer(props: { context: Plugin.Context }) {
const dimensions = useTerminalDimensions()
const config = useConfig()
const dialog = useDialog()
const dialog = props.context.ui.dialog
const themeState = useTheme()
const themeV2 = themeState.themeV2
const params = () => {
@ -141,7 +141,7 @@ function DiffViewer(props: { context: Plugin.Context }) {
const fileRows = createMemo(() => flattenFileTree(fileTree(), expandedFileNodes()))
const patchFileIndexes = createMemo(() => orderedPatchFileIndexes(flattenFileTree(fileTree())))
const focusRunner = (input: Record<DiffViewerFocus, () => void>) => () => input[focus()]()
const shortcut = (id: string) => () => props.context.keymap.shortcut(id)
const shortcut = (id: string) => () => props.context.keymap.shortcuts(id)[0]
const switchFocusShortcut = shortcut("diff.switch_focus")
const nextHunkShortcut = shortcut("diff.next_hunk")
const previousHunkShortcut = shortcut("diff.previous_hunk")
@ -703,7 +703,7 @@ function DiffViewer(props: { context: Plugin.Context }) {
})
const openSwitchDiffDialog = () => {
dialog.replace(() => (
dialog.show(() => (
<DialogSelect
title="Switch source"
skipFilter={true}
@ -711,7 +711,7 @@ function DiffViewer(props: { context: Plugin.Context }) {
current={mode()}
options={switchDiffOptions().map((option) => ({
...option,
onSelect(dialog) {
onSelect() {
dialog.clear()
props.context.ui.router.navigate({
type: "plugin",
@ -729,8 +729,8 @@ function DiffViewer(props: { context: Plugin.Context }) {
}
const openHelpDialog = () => {
dialog.replace(() => <DiffViewerHelpDialog context={props.context} />)
dialog.setSize("large")
dialog.show(() => <DiffViewerHelpDialog context={props.context} />)
dialog.set({ size: "large" })
}
props.context.keymap.layer(() => ({
@ -952,7 +952,7 @@ function DiffViewer(props: { context: Plugin.Context }) {
function DiffViewerHelpDialog(props: { context: Plugin.Context }) {
const { themeV2 } = useTheme().contextual("elevated")
const shortcut = (id: string) => () => props.context.keymap.shortcut(id)
const shortcut = (id: string) => () => props.context.keymap.shortcuts(id)[0]
const rows = [
{
shortcut: () => "q",

View file

@ -1,21 +1,19 @@
import { Plugin } from "@opencode-ai/plugin/tui"
import type { AttentionSoundName } from "@opencode-ai/plugin/tui/context"
import type { OpenCodeEvent } from "@opencode-ai/client"
import type { TuiAttentionSoundName, TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/v1/tui"
import type { BuiltinTuiPlugin } from "../builtins"
const id = "internal:notifications"
type SessionError = Extract<OpenCodeEvent, { type: "session.error" }>["data"]["error"]
function notify(
api: TuiPluginApi,
context: Plugin.Context,
sessionID: string | undefined,
message: string,
sound: TuiAttentionSoundName,
sound: AttentionSoundName,
title?: string,
) {
const session = sessionID ? api.state.session.get(sessionID) : undefined
const session = sessionID ? context.data.session.get(sessionID) : undefined
const isSubagent = session?.parentID !== undefined
void api.attention.notify({
void context.attention.notify({
title: title ?? session?.title,
message,
notification: isSubagent ? false : { when: "blurred" },
@ -32,101 +30,74 @@ function sessionErrorMessage(error: SessionError) {
return "Session error"
}
const tui: TuiPlugin = async (api) => {
const errored = new Set<string>()
const terminal = new Set<string>()
const forms = new Set<string>()
const questions = new Set<string>()
const permissions = new Set<string>()
export default Plugin.define({
id: "opencode.notifications",
setup(context) {
const errored = new Set<string>()
const terminal = new Set<string>()
const forms = new Set<string>()
const questions = new Set<string>()
const permissions = new Set<string>()
api.event.on("form.created", (event) => {
if (forms.has(event.data.form.id)) return
forms.add(event.data.form.id)
notify(
api,
event.data.form.sessionID,
"Input needs response",
"question",
event.data.form.title,
)
})
api.event.on("form.replied", (event) => {
forms.delete(event.data.id)
})
api.event.on("form.cancelled", (event) => {
forms.delete(event.data.id)
})
api.event.on("question.asked", (event) => {
if (questions.has(event.data.id)) return
questions.add(event.data.id)
notify(api, event.data.sessionID, "Question needs input", "question")
})
api.event.on("question.replied", (event) => {
questions.delete(event.data.requestID)
})
api.event.on("question.rejected", (event) => {
questions.delete(event.data.requestID)
})
api.event.on("permission.asked", (event) => {
if (permissions.has(event.data.id)) return
permissions.add(event.data.id)
notify(api, event.data.sessionID, "Permission needs input", "permission")
})
api.event.on("permission.replied", (event) => {
permissions.delete(event.data.requestID)
})
const started = (sessionID: string) => {
errored.delete(sessionID)
terminal.delete(sessionID)
}
const ended = (sessionID: string) => {
if (terminal.has(sessionID)) return
terminal.add(sessionID)
if (errored.has(sessionID)) {
const started = (sessionID: string) => {
errored.delete(sessionID)
return
terminal.delete(sessionID)
}
const ended = (sessionID: string) => {
if (terminal.has(sessionID)) return
terminal.add(sessionID)
if (errored.has(sessionID)) {
errored.delete(sessionID)
return
}
const session = context.data.session.get(sessionID)
notify(context, sessionID, "Session done", session?.parentID ? "subagent_done" : "done")
}
const session = api.state.session.get(sessionID)
notify(api, sessionID, "Session done", session?.parentID ? "subagent_done" : "done")
}
const dispose = [
context.data.on("form.created", (event) => {
if (forms.has(event.data.form.id)) return
forms.add(event.data.form.id)
notify(context, event.data.form.sessionID, "Input needs response", "question", event.data.form.title)
}),
context.data.on("form.replied", (event) => forms.delete(event.data.id)),
context.data.on("form.cancelled", (event) => forms.delete(event.data.id)),
context.data.on("question.asked", (event) => {
if (questions.has(event.data.id)) return
questions.add(event.data.id)
notify(context, event.data.sessionID, "Question needs input", "question")
}),
context.data.on("question.replied", (event) => questions.delete(event.data.requestID)),
context.data.on("question.rejected", (event) => questions.delete(event.data.requestID)),
context.data.on("permission.asked", (event) => {
if (permissions.has(event.data.id)) return
permissions.add(event.data.id)
notify(context, event.data.sessionID, "Permission needs input", "permission")
}),
context.data.on("permission.replied", (event) => permissions.delete(event.data.requestID)),
context.data.on("session.execution.started", (event) => started(event.data.sessionID)),
context.data.on("session.execution.succeeded", (event) => ended(event.data.sessionID)),
context.data.on("session.execution.interrupted", (event) => ended(event.data.sessionID)),
context.data.on("session.execution.failed", (event) => {
const sessionID = event.data.sessionID
if (errored.has(sessionID)) {
ended(sessionID)
return
}
errored.add(sessionID)
notify(context, sessionID, event.data.error.message, "error")
ended(sessionID)
}),
context.data.on("session.error", (event) => {
const sessionID = event.data.sessionID
if (!sessionID) return
if (context.data.session.status(sessionID) !== "running") return
if (errored.has(sessionID)) return
errored.add(sessionID)
notify(context, sessionID, sessionErrorMessage(event.data.error), "error")
}),
]
api.event.on("session.execution.started", (event) => started(event.data.sessionID))
api.event.on("session.execution.succeeded", (event) => ended(event.data.sessionID))
api.event.on("session.execution.interrupted", (event) => ended(event.data.sessionID))
api.event.on("session.execution.failed", (event) => {
const sessionID = event.data.sessionID
if (errored.has(sessionID)) {
ended(sessionID)
return
}
errored.add(sessionID)
notify(api, sessionID, event.data.error.message, "error")
ended(sessionID)
})
api.event.on("session.error", (event) => {
const sessionID = event.data.sessionID
if (!sessionID) return
if (api.state.session.status(sessionID)?.type !== "busy") return
if (errored.has(sessionID)) return
errored.add(sessionID)
notify(api, sessionID, sessionErrorMessage(event.data.error), "error")
})
}
const plugin: BuiltinTuiPlugin = {
id,
tui,
}
export default plugin
return () => dispose.reverse().forEach((cleanup) => cleanup())
},
})