feat(tui): refine plugin context slots

packages/plugin/src/tui/context.ts

@@ -113,7 +113,22 @@ export interface Page {
   readonly render: (input: { readonly data?: Record<string, any> }) => JSX.Element
 }
 
-export type Slot = (props: Record<string, any>) => JSX.Element
+export interface SlotMap {
+  readonly app: Readonly<Record<string, never>>
+  readonly "home.footer": Readonly<Record<string, never>>
+  readonly "sidebar.content": {
+    readonly sessionID: string
+  }
+  readonly "sidebar.footer": Readonly<Record<string, never>>
+}
+
+export type SlotName = keyof SlotMap
+export type Slot<Name extends SlotName = SlotName> = (props: SlotMap[Name]) => JSX.Element
+
+export interface App {
+  readonly version: string
+  readonly channel: string
+}
 
 export type ToastVariant = "info" | "success" | "warning" | "error"
 
@@ -308,17 +323,21 @@ export interface Keymap {
 export interface UI {
   readonly dialog: Dialog
   readonly toast: Toast
+  readonly format: {
+    path(value: string): string
+  }
   readonly router: {
     register(page: Page): () => void
     navigate(destination: Destination): void
     current(): Route
   }
-  readonly slot: (name: string, render: Slot) => () => void
+  readonly slot: <Name extends SlotName>(name: Name, render: Slot<Name>) => () => void
 }
 
 export interface Context {
   readonly options: Readonly<Record<string, any>>
   readonly location: LocationRef | undefined
+  readonly app: App
   readonly renderer: CliRenderer
   readonly client: OpenCodeClient
   readonly data: Data

packages/tui/src/app.tsx

@@ -1127,10 +1127,7 @@ function App(props: { pair?: DialogPairCredentials }) {
                 </Match>
               </Switch>
             </box>
-            <box flexShrink={0}>
+            <PluginSlot name="app" input={{}} mode="all" />
-              <PluginSlot name="app.bottom" />
-            </box>
-            <PluginSlot name="app" />
           </Show>
         </box>
       </box>

packages/tui/src/feature-plugins/home/footer.tsx

@@ -1,20 +1,17 @@
 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 { abbreviateHome } from "../../runtime"
 import { FilePath } from "../../ui/file-path"
 import { stringWidth } from "../../util/string-width"
 
 function Directory(props: { context: Plugin.Context; maxWidth: number }) {
-  const paths = useTuiPaths()
   const directory = createMemo(() =>
-    props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
+    props.context.location ? props.context.ui.format.path(props.context.location.directory) : undefined,
   )
 
   return (
     <Show when={directory()}>
-      {(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.text.subdued} />}
+      {(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.themeV2.text.subdued} />}
     </Show>
   )
 }
@@ -27,16 +24,18 @@ function Mcp(props: { context: Plugin.Context }) {
   return (
     <Show when={list().length}>
       <box gap={1} flexDirection="row" flexShrink={0}>
-        <text fg={props.context.theme.text.default}>
+        <text fg={props.context.theme.themeV2.text.default}>
           <Switch>
             <Match when={failed()}>
-              <span style={{ fg: props.context.theme.text.feedback.error.default }}>⊙ </span>
+              <span style={{ fg: props.context.theme.themeV2.text.feedback.error.default }}>⊙ </span>
             </Match>
             <Match when={true}>
               <span
                 style={{
                   fg:
-                    count() > 0 ? props.context.theme.text.feedback.success.default : props.context.theme.text.subdued,
+                    count() > 0
+                      ? props.context.theme.themeV2.text.feedback.success.default
+                      : props.context.theme.themeV2.text.subdued,
                 }}
               >
                 ⊙{" "}
@@ -45,14 +44,13 @@ function Mcp(props: { context: Plugin.Context }) {
           </Switch>
           {count()} MCP
         </text>
-        <text fg={props.context.theme.text.subdued}>/status</text>
+        <text fg={props.context.theme.themeV2.text.subdued}>/status</text>
       </box>
     </Show>
   )
 }
 
 function View(props: { context: Plugin.Context }) {
-  const app = useTuiApp()
   const dimensions = useTerminalDimensions()
   const mcpWidth = createMemo(() => {
     const list = props.context.data.location.mcp.server.list(props.context.location) ?? []
@@ -74,12 +72,12 @@ function View(props: { context: Plugin.Context }) {
     >
       <Directory
         context={props.context}
-        maxWidth={Math.max(2, dimensions().width - 8 - stringWidth(app.version) - mcpWidth())}
+        maxWidth={Math.max(2, dimensions().width - 8 - stringWidth(props.context.app.version) - mcpWidth())}
       />
       <Mcp context={props.context} />
       <box flexGrow={1} />
       <box flexShrink={0}>
-        <text fg={props.context.theme.text.subdued}>{app.version}</text>
+        <text fg={props.context.theme.themeV2.text.subdued}>{props.context.app.version}</text>
       </box>
     </box>
   )

packages/tui/src/feature-plugins/sidebar/footer.tsx

@@ -1,18 +1,15 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { createMemo, Show } from "solid-js"
-import { useTuiPaths } from "../../context/runtime"
-import { useTheme } from "../../context/theme"
-import { abbreviateHome } from "../../runtime"
 import { FilePath } from "../../ui/file-path"
 
 function View(props: { context: Plugin.Context }) {
-  const { themeV2 } = useTheme()
-  const paths = useTuiPaths()
   const directory = createMemo(() =>
-    props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
+    props.context.location ? props.context.ui.format.path(props.context.location.directory) : undefined,
   )
   return (
-    <Show when={directory()}>{(value) => <FilePath value={value()} maxWidth={38} fg={themeV2.text.subdued} />}</Show>
+    <Show when={directory()}>
+      {(value) => <FilePath value={value()} maxWidth={38} fg={props.context.theme.themeV2.text.subdued} />}
+    </Show>
   )
 }
 

packages/tui/src/feature-plugins/system/diff-viewer.tsx

@@ -16,7 +16,6 @@ import path from "path"
 import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
 import { DiffViewerFileTree } from "./diff-viewer-file-tree"
 import { Panel, PanelGroup, Separator } from "./diff-viewer-ui"
-import { useDialog } from "../../ui/dialog"
 import { DialogSelect } from "../../ui/dialog-select"
 import { getScrollAcceleration } from "../../util/scroll"
 import { useConfig } from "../../config"
@@ -1051,7 +1050,6 @@ function DiffViewerHelpDialog(props: { context: Plugin.Context }) {
 }
 
 function Commands(props: { context: Plugin.Context }) {
-  const dialog = useDialog()
   props.context.keymap.layer(() => ({
     mode: "global",
     commands: [
@@ -1083,7 +1081,7 @@ function Commands(props: { context: Plugin.Context }) {
               returnRoute,
             },
           })
-          dialog.clear()
+          props.context.ui.dialog.clear()
         },
       },
     ],

packages/tui/src/feature-plugins/system/scrap.tsx

@@ -1,12 +1,9 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { useTerminalDimensions } from "@opentui/solid"
-import { Keymap } from "../../context/keymap"
 import { useTheme } from "../../context/theme"
-import { useDialog } from "../../ui/dialog"
 
 function Commands(props: { context: Plugin.Context }) {
-  const dialog = useDialog()
+  props.context.keymap.layer(() => ({
-  Keymap.createLayer(() => ({
     mode: "global",
     commands: [
       {
@@ -16,7 +13,7 @@ function Commands(props: { context: Plugin.Context }) {
         palette: true,
         run() {
           props.context.ui.router.navigate({ type: "plugin", name: "scrap" })
-          dialog.clear()
+          props.context.ui.dialog.clear()
         },
       },
     ],
@@ -29,7 +26,7 @@ function Scrap(props: { context: Plugin.Context }) {
   const { themeV2 } = useTheme()
   const { themeV2: elevatedTheme } = useTheme().contextual("elevated")
 
-  Keymap.createLayer(() => ({
+  props.context.keymap.layer(() => ({
     commands: [
       {
         bind: "escape",

packages/tui/src/plugin/context.tsx

@@ -13,7 +13,7 @@ import {
 import path from "path"
 import { stat } from "fs/promises"
 import { fileURLToPath, pathToFileURL } from "url"
-import type { Context, Dialog, Page, Slot, Toast } from "@opencode-ai/plugin/tui/context"
+import type { Context, Dialog, Page, Slot, SlotMap, SlotName, Toast } from "@opencode-ai/plugin/tui/context"
 import { createStore, produce, reconcile as reconcileStore } from "solid-js/store"
 import { useRenderer } from "@opentui/solid"
 import { useConfig } from "../config"
@@ -21,7 +21,7 @@ import { useClient } from "../context/client"
 import { useData } from "../context/data"
 import { Keymap } from "../context/keymap"
 import { useRoute } from "../context/route"
-import { useTuiLifecycle } from "../context/runtime"
+import { useTuiApp, useTuiLifecycle, useTuiPaths } from "../context/runtime"
 import { useLocation } from "../context/location"
 import { useTheme } from "../context/theme"
 import { DialogAlert } from "../ui/dialog-alert"
@@ -31,6 +31,7 @@ import { DialogSelect } from "../ui/dialog-select"
 import { useDialog } from "../ui/dialog"
 import { useToast } from "../ui/toast"
 import { useAttention } from "../context/attention"
+import { abbreviateHome } from "../util/path-format"
 import { builtins } from "./builtins"
 
 export interface PackageResolver {
@@ -47,7 +48,7 @@ type Value = {
   readonly ready: () => boolean
   readonly list: () => ReadonlyArray<State>
   readonly route: (id: string, name: string) => Page["render"] | undefined
-  readonly slot: (name: string) => ReadonlyArray<Slot>
+  readonly slot: <Name extends SlotName>(name: Name) => ReadonlyArray<Slot<Name>>
   readonly activate: (id: string) => Promise<boolean>
   readonly deactivate: (id: string) => Promise<boolean>
 }
@@ -75,6 +76,8 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
   const shortcuts = Keymap.useShortcuts()
   const keymapState = Keymap.useState()
   const lifecycle = useTuiLifecycle()
+  const app = useTuiApp()
+  const paths = useTuiPaths()
   const location = useLocation()
   const theme = useTheme()
   const dialog = useDialog()
@@ -120,7 +123,6 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
         dialog.setCentered(options.centered ?? false)
       },
       clear() {
-        if (!activeDialog) return
         dialog.clear()
       },
       alert(options) {
@@ -218,11 +220,12 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
       get location() {
         return location.current
       },
+      app: { version: app.version, channel: app.channel },
       renderer,
       client: client.api,
       data,
       attention,
-      theme: theme.themeV2,
+      theme,
       keymap: {
         layer: Keymap.createLayer,
         dispatch: keymap.dispatch,
@@ -235,6 +238,9 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
       ui: {
         dialog: dialogApi,
         toast: toastApi,
+        format: {
+          path: (value) => abbreviateHome(value, paths.home),
+        },
         router: {
           register(page) {
             if (store.registrations[item.plugin.id]?.routes[page.name])
@@ -530,7 +536,16 @@ export function PluginRoute(props: { readonly fallback: (id: string, name: strin
   return <>{content()}</>
 }
 
-export function PluginSlot(props: { readonly name: string; readonly input?: Record<string, any> }) {
+export function PluginSlot<Name extends SlotName>(props: {
+  readonly name: Name
+  readonly input: SlotMap[Name]
+  readonly mode: "all" | "replace"
+}) {
   const plugins = usePlugin()
-  return <For each={plugins.slot(props.name)}>{(render) => render(props.input ?? {})}</For>
+  const renderers = createMemo(() => {
+    const items = plugins.slot(props.name)
+    if (props.mode === "replace") return items.slice(-1)
+    return items
+  })
+  return <For each={renderers()}>{(render) => render(props.input)}</For>
 }

packages/tui/src/routes/home.tsx

@@ -85,11 +85,10 @@ export function Home() {
             />
           </pluginRuntime.Slot>
         </box>
-        <PluginSlot name="home.bottom" />
         <box flexGrow={1} minHeight={0} />
       </box>
       <box width="100%" flexShrink={0}>
-        <PluginSlot name="home.footer" />
+        <PluginSlot name="home.footer" input={{}} mode="replace" />
       </box>
       <Show when={forms()[0]?.id} keyed>
         {(_) => {

packages/tui/src/routes/session/index.tsx

@@ -77,7 +77,6 @@ import { nextThinkingMode, reasoningSummary, type ThinkingMode } from "../../con
 import { getScrollAcceleration } from "../../util/scroll"
 import { collapseToolOutput } from "../../util/collapse-tool-output"
 import { usePluginRuntime } from "../../plugin/runtime"
-import { PluginSlot } from "../../plugin/context"
 import { Keymap, type KeymapCommand } from "../../context/keymap"
 import { usePathFormatter } from "../../context/path-format"
 import { useLocation } from "../../context/location"
@@ -915,7 +914,6 @@ export function Session() {
     >
       <box flexDirection="row" flexGrow={1} minHeight={0}>
         <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
-          <PluginSlot name="session.header" input={{ sessionID: route.sessionID }} />
           <Show when={session()}>
             <scrollbox
               ref={(r) => (scroll = r)}
@@ -960,7 +958,6 @@ export function Session() {
               </Show>
             </scrollbox>
             <box flexShrink={0}>
-              <PluginSlot name="session.composer.top" input={{ sessionID: route.sessionID }} />
               <Composer
                 sessionID={route.sessionID}
                 open={composer.open || (!!session()?.parentID && forms().length === 0)}

packages/tui/src/routes/session/sidebar.tsx

@@ -53,12 +53,12 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
                 </Show>
               </box>
             </pluginRuntime.Slot>
-            <PluginSlot name="sidebar.content" input={{ sessionID: props.sessionID }} />
+            <PluginSlot name="sidebar.content" input={{ sessionID: props.sessionID }} mode="all" />
           </box>
         </scrollbox>
 
         <box flexShrink={0} gap={1} paddingTop={1}>
-          <PluginSlot name="sidebar.footer" />
+          <PluginSlot name="sidebar.footer" input={{}} mode="replace" />
         </box>
       </box>
     </Show>