refactor(tui): port sidebar plugin to snapshot api

Author: Tarquinen

tui/index.tsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource @opentui/solid */
-import type { TuiPluginInput } from "@opencode-ai/plugin/tui"
+import type { TuiPlugin } from "@opencode-ai/plugin/tui"
 import { getConfigForDirectory } from "../lib/config"
 import { Logger } from "../lib/logger"
 import { createSidebarTopSlot } from "./slots/sidebar-top"
 import { createSummaryRoute } from "./routes/summary"
 import { NAMES } from "./shared/names"
 
-const tui = async (input: TuiPluginInput) => {
+const tui: TuiPlugin = async (api) => {
     const config = getConfigForDirectory(process.cwd(), (title, message) => {
-        input.api.ui.toast({
+        api.ui.toast({
             title,
             message,
             variant: "warning",
@@ -19,19 +19,10 @@ const tui = async (input: TuiPluginInput) => {
 
     const logger = new Logger(config.tui.debug, "tui")
 
-    input.api.route.register([createSummaryRoute(input.api)])
+    api.route.register([createSummaryRoute(api)])
 
     if (config.tui.sidebar) {
-        input.slots.register(
-            createSidebarTopSlot(
-                input.api,
-                input.client,
-                input.event,
-                input.renderer,
-                NAMES,
-                logger,
-            ),
-        )
+        api.slots.register(createSidebarTopSlot(api, NAMES, logger))
     }
 }
 

tui/routes/summary.tsx

@@ -100,16 +100,19 @@ function CollapsibleSectionRow(props: { section: CollapsibleSection; palette: Dc
 }
 
 function SummaryScreen(props: { api: TuiApi }) {
-    const params = createMemo(() => (props.api.route.current.params ?? {}) as SummaryRouteParams)
+    const params = createMemo(() => {
+        const current = props.api.route.current
+        return ("params" in current ? current.params : {}) as SummaryRouteParams
+    })
     const palette = createMemo(() => getPalette(props.api.theme.current as Record<string, unknown>))
     const parsed = createMemo(() => parseSummary(params().summary || ""))
 
-    const keys = props.api.keybind?.create({ close: "escape" })
+    const keys = props.api.keybind.create({ close: "escape" })
 
     useKeyboard((evt: any) => {
         if (props.api.route.current.name !== NAMES.routes.summary) return
-        if (props.api.ui?.dialog?.open) return
-        const matched = keys ? keys.match("close", evt) : evt.name === "escape"
+        if (props.api.ui.dialog.open) return
+        const matched = keys.match("close", evt)
         if (!matched) return
         evt.preventDefault()
         evt.stopPropagation()

tui/shared/types.ts

@@ -1,10 +1,11 @@
-import type { TuiPluginInput } from "@opencode-ai/plugin/tui"
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type {
     MessageStatus as DcpMessageStatus,
     TokenBreakdown as DcpContextBreakdown,
 } from "../../lib/analysis/tokens"
 
-export type DcpTuiClient = TuiPluginInput["client"]
+export type DcpTuiApi = TuiPluginApi
+export type DcpTuiClient = DcpTuiApi["client"]
 
 export type { DcpMessageStatus }
 

tui/slots/sidebar-top.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 import { createEffect, createMemo, createSignal, on, onCleanup, untrack } from "solid-js"
-import type { TuiApi, TuiPluginInput } from "@opencode-ai/plugin/tui"
+import type { TuiSlotPlugin } from "@opencode-ai/plugin/tui"
 import { Logger } from "../../lib/logger"
 import {
     createPlaceholderContextSnapshot,
@@ -10,7 +10,7 @@ import {
 } from "../data/context"
 import { getPalette, toneColor, type DcpColor, type DcpPalette } from "../shared/theme"
 import { LABEL, type DcpRouteNames } from "../shared/names"
-import type { DcpActiveBlockInfo, DcpMessageStatus, DcpTuiClient } from "../shared/types"
+import type { DcpActiveBlockInfo, DcpMessageStatus, DcpTuiApi } from "../shared/types"
 
 const SINGLE_BORDER = { type: "single" } as any
 const DIM_TEXT = { dim: true } as any
@@ -114,10 +114,7 @@ const SidebarContextBar = (props: {
 }
 
 const SidebarContext = (props: {
-    api: TuiApi
-    client: DcpTuiClient
-    event: TuiPluginInput["event"]
-    renderer: TuiPluginInput["renderer"]
+    api: DcpTuiApi
     names: DcpRouteNames
     palette: DcpPalette
     sessionID: () => string
@@ -137,7 +134,7 @@ const SidebarContext = (props: {
         renderTimeout = setTimeout(() => {
             renderTimeout = undefined
             try {
-                props.renderer.requestRender()
+                props.api.renderer.requestRender()
             } catch (error) {
                 props.logger.warn("Failed to request TUI render", {
                     error: error instanceof Error ? error.message : String(error),
@@ -180,7 +177,7 @@ const SidebarContext = (props: {
         const currentRequest = ++requestVersion
 
         try {
-            const value = await loadContextSnapshotCached(props.client, props.logger, sessionID)
+            const value = await loadContextSnapshotCached(props.api.client, props.logger, sessionID)
             if (currentRequest !== requestVersion || props.sessionID() !== sessionID) {
                 return
             }
@@ -230,43 +227,43 @@ const SidebarContext = (props: {
                 }
 
                 const unsubs = [
-                    props.event.on("message.updated", (event) => {
+                    props.api.event.on("message.updated", (event) => {
                         if (event.properties.info.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("message.removed", (event) => {
+                    props.api.event.on("message.removed", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("message.part.updated", (event) => {
+                    props.api.event.on("message.part.updated", (event) => {
                         if (event.properties.part.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("message.part.delta", (event) => {
+                    props.api.event.on("message.part.delta", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("message.part.removed", (event) => {
+                    props.api.event.on("message.part.removed", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("session.updated", (event) => {
+                    props.api.event.on("session.updated", (event) => {
                         if (event.properties.info.id !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("session.deleted", (event) => {
+                    props.api.event.on("session.deleted", (event) => {
                         if (event.properties.info.id !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("session.diff", (event) => {
+                    props.api.event.on("session.diff", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("session.error", (event) => {
+                    props.api.event.on("session.error", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
-                    props.event.on("session.status", (event) => {
+                    props.api.event.on("session.status", (event) => {
                         if (event.properties.sessionID !== sessionID) return
                         scheduleRefresh()
                     }),
@@ -471,13 +468,10 @@ const SidebarContext = (props: {
 }
 
 export const createSidebarTopSlot = (
-    api: TuiApi,
-    client: DcpTuiClient,
-    event: TuiPluginInput["event"],
-    renderer: TuiPluginInput["renderer"],
+    api: DcpTuiApi,
     names: DcpRouteNames,
     logger: Logger,
-) => ({
+): TuiSlotPlugin => ({
     id: names.slot,
     slots: {
         sidebar_top(
@@ -490,9 +484,6 @@ export const createSidebarTopSlot = (
             return (
                 <SidebarContext
                     api={api}
-                    client={client}
-                    event={event}
-                    renderer={renderer}
                     names={names}
                     palette={palette()}
                     sessionID={() => value.session_id}