smoke test home slots

.opencode/plugins/smoke-theme.json

@@ -48,11 +48,11 @@
       "light": "nord10"
     },
     "text": {
-      "dark": "nord4",
+      "dark": "nord6",
       "light": "nord0"
     },
     "textMuted": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord1"
     },
     "background": {
@@ -64,7 +64,7 @@
       "light": "nord5"
     },
     "backgroundElement": {
-      "dark": "nord1",
+      "dark": "nord2",
       "light": "nord4"
     },
     "border": {
@@ -88,11 +88,11 @@
       "light": "nord11"
     },
     "diffContext": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "diffHunkHeader": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "diffHighlightAdded": {
@@ -104,12 +104,12 @@
       "light": "nord11"
     },
     "diffAddedBg": {
-      "dark": "#3B4252",
-      "light": "#E5E9F0"
+      "dark": "#36413C",
+      "light": "#E6EBE7"
     },
     "diffRemovedBg": {
-      "dark": "#3B4252",
-      "light": "#E5E9F0"
+      "dark": "#43393D",
+      "light": "#ECE6E8"
     },
     "diffContextBg": {
       "dark": "nord1",
@@ -120,12 +120,12 @@
       "light": "nord4"
     },
     "diffAddedLineNumberBg": {
-      "dark": "#3B4252",
-      "light": "#E5E9F0"
+      "dark": "#303A35",
+      "light": "#DDE4DF"
     },
     "diffRemovedLineNumberBg": {
-      "dark": "#3B4252",
-      "light": "#E5E9F0"
+      "dark": "#3C3336",
+      "light": "#E4DDE0"
     },
     "markdownText": {
       "dark": "nord4",
@@ -148,7 +148,7 @@
       "light": "nord14"
     },
     "markdownBlockQuote": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "markdownEmph": {
@@ -160,7 +160,7 @@
       "light": "nord13"
     },
     "markdownHorizontalRule": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "markdownListItem": {
@@ -184,7 +184,7 @@
       "light": "nord0"
     },
     "syntaxComment": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "syntaxKeyword": {

.opencode/plugins/tui-smoke.tsx

@@ -0,0 +1,965 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { RGBA, VignetteEffect } from "@opentui/core"
+import type { TuiApi, TuiKeybindSet, TuiPluginInit, TuiPluginInput, TuiSlotPlugin } from "@opencode-ai/plugin/tui"
+
+const tabs = ["overview", "counter", "help"]
+const bind = {
+  modal: "ctrl+shift+m",
+  screen: "ctrl+shift+o",
+  home: "escape,ctrl+h",
+  left: "left,h",
+  right: "right,l",
+  up: "up,k",
+  down: "down,j",
+  alert: "a",
+  confirm: "c",
+  prompt: "p",
+  select: "s",
+  modal_accept: "enter,return",
+  modal_close: "escape",
+  dialog_close: "escape",
+  local: "x",
+  local_push: "enter,return",
+  local_close: "q,backspace",
+  host: "z",
+}
+
+const pick = (value: unknown, fallback: string) => {
+  if (typeof value !== "string") return fallback
+  if (!value.trim()) return fallback
+  return value
+}
+
+const num = (value: unknown, fallback: number) => {
+  if (typeof value !== "number") return fallback
+  return value
+}
+
+const rec = (value: unknown) => {
+  if (!value || typeof value !== "object") return
+  return value as Record<string, unknown>
+}
+
+type Cfg = {
+  label: string
+  route: string
+  vignette: number
+  keybinds: Record<string, unknown> | undefined
+}
+
+type Route = {
+  modal: string
+  screen: string
+}
+
+type State = {
+  tab: number
+  count: number
+  source: string
+  note: string
+  selected: string
+  local: number
+}
+
+const cfg = (options: Record<string, unknown> | undefined) => {
+  return {
+    label: pick(options?.label, "smoke"),
+    route: pick(options?.route, "workspace-smoke"),
+    vignette: Math.max(0, num(options?.vignette, 0.35)),
+    keybinds: rec(options?.keybinds),
+  }
+}
+
+const names = (input: Cfg) => {
+  return {
+    modal: `${input.route}.modal`,
+    screen: `${input.route}.screen`,
+  }
+}
+
+type Keys = TuiKeybindSet
+const ui = {
+  panel: "#1d1d1d",
+  border: "#4a4a4a",
+  text: "#f0f0f0",
+  muted: "#a5a5a5",
+  accent: "#5f87ff",
+}
+
+type Color = RGBA | string
+
+const cash = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+})
+
+const ink = (map: Record<string, unknown>, name: string, fallback: string): Color => {
+  const value = map[name]
+  if (typeof value === "string") return value
+  if (value && typeof value === "object") return value as RGBA
+  return fallback
+}
+
+const look = (map: Record<string, unknown>) => {
+  return {
+    panel: ink(map, "backgroundPanel", ui.panel),
+    border: ink(map, "border", ui.border),
+    text: ink(map, "text", ui.text),
+    muted: ink(map, "textMuted", ui.muted),
+    accent: ink(map, "primary", ui.accent),
+    selected: ink(map, "selectedListItemText", ui.text),
+  }
+}
+
+const tone = (api: TuiApi) => {
+  return look(api.theme.current as Record<string, unknown>)
+}
+
+type Skin = {
+  panel: Color
+  border: Color
+  text: Color
+  muted: Color
+  accent: Color
+  selected: Color
+}
+
+const Btn = (props: { txt: string; run: () => void; skin: Skin; on?: boolean }) => {
+  return (
+    <box
+      onMouseUp={() => {
+        props.run()
+      }}
+      backgroundColor={props.on ? props.skin.accent : props.skin.border}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={props.on ? props.skin.selected : props.skin.text}>{props.txt}</text>
+    </box>
+  )
+}
+
+const parse = (params: Record<string, unknown> | undefined) => {
+  const tab = typeof params?.tab === "number" ? params.tab : 0
+  const count = typeof params?.count === "number" ? params.count : 0
+  const source = typeof params?.source === "string" ? params.source : "unknown"
+  const note = typeof params?.note === "string" ? params.note : ""
+  const selected = typeof params?.selected === "string" ? params.selected : ""
+  const local = typeof params?.local === "number" ? params.local : 0
+  return {
+    tab: Math.max(0, Math.min(tab, tabs.length - 1)),
+    count,
+    source,
+    note,
+    selected,
+    local: Math.max(0, local),
+  }
+}
+
+const current = (api: TuiApi, route: Route) => {
+  const value = api.route.current
+  const ok = Object.values(route).includes(value.name)
+  if (!ok) return parse(undefined)
+  if (!("params" in value)) return parse(undefined)
+  return parse(value.params)
+}
+
+const opts = [
+  {
+    title: "Overview",
+    value: 0,
+    description: "Switch to overview tab",
+  },
+  {
+    title: "Counter",
+    value: 1,
+    description: "Switch to counter tab",
+  },
+  {
+    title: "Help",
+    value: 2,
+    description: "Switch to help tab",
+  },
+]
+
+const host = (api: TuiApi, input: Cfg, skin: Skin) => {
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
+      <text fg={skin.text}>
+        <b>{input.label} host overlay</b>
+      </text>
+      <text fg={skin.muted}>Using api.ui.dialog stack with built-in backdrop</text>
+      <text fg={skin.muted}>esc closes · depth {api.ui.dialog.depth}</text>
+      <box flexDirection="row" gap={1}>
+        <Btn txt="close" run={() => api.ui.dialog.clear()} skin={skin} on />
+      </box>
+    </box>
+  ))
+}
+
+const warn = (api: TuiApi, route: Route, value: State) => {
+  const DialogAlert = api.ui.DialogAlert
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogAlert
+      title="Smoke alert"
+      message="Testing built-in alert dialog"
+      onConfirm={() => api.route.navigate(route.screen, { ...value, source: "alert" })}
+    />
+  ))
+}
+
+const check = (api: TuiApi, route: Route, value: State) => {
+  const DialogConfirm = api.ui.DialogConfirm
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogConfirm
+      title="Smoke confirm"
+      message="Apply +1 to counter?"
+      onConfirm={() => api.route.navigate(route.screen, { ...value, count: value.count + 1, source: "confirm" })}
+      onCancel={() => api.route.navigate(route.screen, { ...value, source: "confirm-cancel" })}
+    />
+  ))
+}
+
+const entry = (api: TuiApi, route: Route, value: State) => {
+  const DialogPrompt = api.ui.DialogPrompt
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogPrompt
+      title="Smoke prompt"
+      value={value.note}
+      onConfirm={(note) => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, { ...value, note, source: "prompt" })
+      }}
+      onCancel={() => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, value)
+      }}
+    />
+  ))
+}
+
+const picker = (api: TuiApi, route: Route, value: State) => {
+  const DialogSelect = api.ui.DialogSelect
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogSelect
+      title="Smoke select"
+      options={opts}
+      current={value.tab}
+      onSelect={(item) => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, {
+          ...value,
+          tab: typeof item.value === "number" ? item.value : value.tab,
+          selected: item.title,
+          source: "select",
+        })
+      }}
+    />
+  ))
+}
+
+const Screen = (props: {
+  api: TuiApi
+  input: Cfg
+  route: Route
+  keys: Keys
+  meta: TuiPluginInit
+  params?: Record<string, unknown>
+}) => {
+  const dim = useTerminalDimensions()
+  const value = parse(props.params)
+  const skin = tone(props.api)
+  const set = (local: number, base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    props.api.route.navigate(props.route.screen, { ...next, local: Math.max(0, local), source: "local" })
+  }
+  const push = (base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    set(next.local + 1, next)
+  }
+  const open = () => {
+    const next = current(props.api, props.route)
+    if (next.local > 0) return
+    set(1, next)
+  }
+  const pop = (base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    const local = Math.max(0, next.local - 1)
+    set(local, next)
+  }
+  const show = () => {
+    setTimeout(() => {
+      open()
+    }, 0)
+  }
+  useKeyboard((evt) => {
+    if (props.api.route.current.name !== props.route.screen) return
+    const next = current(props.api, props.route)
+    if (props.api.ui.dialog.open) {
+      if (props.keys.match("dialog_close", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        props.api.ui.dialog.clear()
+        return
+      }
+      return
+    }
+
+    if (next.local > 0) {
+      if (evt.name === "escape" || props.keys.match("local_close", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        pop(next)
+        return
+      }
+
+      if (props.keys.match("local_push", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        push(next)
+        return
+      }
+      return
+    }
+
+    if (props.keys.match("home", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate("home")
+      return
+    }
+
+    if (props.keys.match("left", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, tab: (next.tab - 1 + tabs.length) % tabs.length })
+      return
+    }
+
+    if (props.keys.match("right", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, tab: (next.tab + 1) % tabs.length })
+      return
+    }
+
+    if (props.keys.match("up", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, count: next.count + 1 })
+      return
+    }
+
+    if (props.keys.match("down", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, count: next.count - 1 })
+      return
+    }
+
+    if (props.keys.match("modal", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.modal, next)
+      return
+    }
+
+    if (props.keys.match("local", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      open()
+      return
+    }
+
+    if (props.keys.match("host", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      host(props.api, props.input, skin)
+      return
+    }
+
+    if (props.keys.match("alert", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      warn(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("confirm", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      check(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("prompt", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      entry(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("select", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      picker(props.api, props.route, next)
+    }
+  })
+
+  return (
+    <box width={dim().width} height={dim().height} backgroundColor={skin.panel} position="relative">
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+      >
+        <box flexDirection="row" justifyContent="space-between" paddingBottom={1}>
+          <text fg={skin.text}>
+            <b>{props.input.label} screen</b>
+            <span style={{ fg: skin.muted }}> plugin route</span>
+          </text>
+          <text fg={skin.muted}>{props.keys.print("home")} home</text>
+        </box>
+
+        <box flexDirection="row" gap={1} paddingBottom={1}>
+          {tabs.map((item, i) => {
+            const on = value.tab === i
+            return (
+              <Btn
+                txt={item}
+                run={() => props.api.route.navigate(props.route.screen, { ...value, tab: i })}
+                skin={skin}
+                on={on}
+              />
+            )
+          })}
+        </box>
+
+        <box
+          border
+          borderColor={skin.border}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexGrow={1}
+        >
+          {value.tab === 0 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.text}>Route: {props.route.screen}</text>
+              <text fg={skin.muted}>plugin state: {props.meta.state}</text>
+              <text fg={skin.muted}>
+                first: {props.meta.state === "first" ? "yes" : "no"} · updated:{" "}
+                {props.meta.state === "updated" ? "yes" : "no"} · loads: {props.meta.entry.load_count}
+              </text>
+              <text fg={skin.muted}>plugin source: {props.meta.entry.source}</text>
+              <text fg={skin.muted}>source: {value.source}</text>
+              <text fg={skin.muted}>note: {value.note || "(none)"}</text>
+              <text fg={skin.muted}>selected: {value.selected || "(none)"}</text>
+              <text fg={skin.muted}>local stack depth: {value.local}</text>
+              <text fg={skin.muted}>host stack open: {props.api.ui.dialog.open ? "yes" : "no"}</text>
+            </box>
+          ) : null}
+
+          {value.tab === 1 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.text}>Counter: {value.count}</text>
+              <text fg={skin.muted}>
+                {props.keys.print("up")} / {props.keys.print("down")} change value
+              </text>
+            </box>
+          ) : null}
+
+          {value.tab === 2 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.muted}>
+                {props.keys.print("modal")} modal | {props.keys.print("alert")} alert | {props.keys.print("confirm")}{" "}
+                confirm | {props.keys.print("prompt")} prompt | {props.keys.print("select")} select
+              </text>
+              <text fg={skin.muted}>
+                {props.keys.print("local")} local stack | {props.keys.print("host")} host stack
+              </text>
+              <text fg={skin.muted}>
+                local open: {props.keys.print("local_push")} push nested · esc or {props.keys.print("local_close")}{" "}
+                close
+              </text>
+              <text fg={skin.muted}>{props.keys.print("home")} returns home</text>
+            </box>
+          ) : null}
+        </box>
+
+        <box flexDirection="row" gap={1} paddingTop={1}>
+          <Btn txt="go home" run={() => props.api.route.navigate("home")} skin={skin} />
+          <Btn txt="modal" run={() => props.api.route.navigate(props.route.modal, value)} skin={skin} on />
+          <Btn txt="local overlay" run={show} skin={skin} />
+          <Btn txt="host overlay" run={() => host(props.api, props.input, skin)} skin={skin} />
+          <Btn txt="alert" run={() => warn(props.api, props.route, value)} skin={skin} />
+          <Btn txt="confirm" run={() => check(props.api, props.route, value)} skin={skin} />
+          <Btn txt="prompt" run={() => entry(props.api, props.route, value)} skin={skin} />
+          <Btn txt="select" run={() => picker(props.api, props.route, value)} skin={skin} />
+        </box>
+      </box>
+
+      <box
+        visible={value.local > 0}
+        width={dim().width}
+        height={dim().height}
+        alignItems="center"
+        position="absolute"
+        zIndex={3000}
+        paddingTop={dim().height / 4}
+        left={0}
+        top={0}
+        backgroundColor={RGBA.fromInts(0, 0, 0, 160)}
+        onMouseUp={() => {
+          pop()
+        }}
+      >
+        <box
+          onMouseUp={(evt) => {
+            evt.stopPropagation()
+          }}
+          width={60}
+          maxWidth={dim().width - 2}
+          backgroundColor={skin.panel}
+          border
+          borderColor={skin.border}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          gap={1}
+          flexDirection="column"
+        >
+          <text fg={skin.text}>
+            <b>{props.input.label} local overlay</b>
+          </text>
+          <text fg={skin.muted}>Plugin-owned stack depth: {value.local}</text>
+          <text fg={skin.muted}>
+            {props.keys.print("local_push")} push nested · {props.keys.print("local_close")} pop/close
+          </text>
+          <box flexDirection="row" gap={1}>
+            <Btn txt="push" run={push} skin={skin} on />
+            <Btn txt="pop" run={pop} skin={skin} />
+          </box>
+        </box>
+      </box>
+    </box>
+  )
+}
+
+const Modal = (props: { api: TuiApi; input: Cfg; route: Route; keys: Keys; params?: Record<string, unknown> }) => {
+  const Dialog = props.api.ui.Dialog
+  const value = parse(props.params)
+  const skin = tone(props.api)
+
+  useKeyboard((evt) => {
+    if (props.api.route.current.name !== props.route.modal) return
+
+    if (props.keys.match("modal_accept", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...value, source: "modal" })
+      return
+    }
+
+    if (props.keys.match("modal_close", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate("home")
+    }
+  })
+
+  return (
+    <box width="100%" height="100%" backgroundColor={skin.panel}>
+      <Dialog onClose={() => props.api.route.navigate("home")}>
+        <box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
+          <text fg={skin.text}>
+            <b>{props.input.label} modal</b>
+          </text>
+          <text fg={skin.muted}>{props.keys.print("modal")} modal command</text>
+          <text fg={skin.muted}>{props.keys.print("screen")} screen command</text>
+          <text fg={skin.muted}>
+            {props.keys.print("modal_accept")} opens screen · {props.keys.print("modal_close")} closes
+          </text>
+          <box flexDirection="row" gap={1}>
+            <Btn
+              txt="open screen"
+              run={() => props.api.route.navigate(props.route.screen, { ...value, source: "modal" })}
+              skin={skin}
+              on
+            />
+            <Btn txt="cancel" run={() => props.api.route.navigate("home")} skin={skin} />
+          </box>
+        </box>
+      </Dialog>
+    </box>
+  )
+}
+
+const slot = (input: Cfg): TuiSlotPlugin => ({
+  id: "workspace-smoke",
+  slots: {
+    home_logo(ctx) {
+      const map = ctx.theme.current as Record<string, unknown>
+      const skin = look(map)
+      const art = [
+        "                                  $$\\",
+        "                                  $$ |",
+        " $$$$$$$\\ $$$$$$\\$$$$\\   $$$$$$\\  $$ |  $$\\  $$$$$$\\",
+        "$$  _____|$$  _$$  _$$\\ $$  __$$\\ $$ | $$  |$$  __$$\\",
+        "\\$$$$$$\\  $$ / $$ / $$ |$$ /  $$ |$$$$$$  / $$$$$$$$ |",
+        " \\____$$\\ $$ | $$ | $$ |$$ |  $$ |$$  _$$<  $$   ____|",
+        "$$$$$$$  |$$ | $$ | $$ |\\$$$$$$  |$$ | \\$$\\ \\$$$$$$$\\",
+        "\\_______/ \\__| \\__| \\__| \\______/ \\__|  \\__| \\_______|",
+      ]
+      const fill = [
+        skin.accent,
+        skin.muted,
+        ink(map, "info", ui.accent),
+        skin.text,
+        ink(map, "success", ui.accent),
+        ink(map, "warning", ui.accent),
+        ink(map, "secondary", ui.accent),
+        ink(map, "error", ui.accent),
+      ]
+
+      return (
+        <box flexDirection="column">
+          {art.map((line, i) => (
+            <text fg={fill[i]}>{line}</text>
+          ))}
+        </box>
+      )
+    },
+    home_tips(ctx, value) {
+      if (!value.show_tips) return null
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+
+      return (
+        <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
+          <text fg={skin.muted}>
+            <span style={{ fg: skin.accent }}>{input.label}</span> replaces the built-in home tips slot
+          </text>
+        </box>
+      )
+    },
+    home_below_tips(ctx, value) {
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+      const text = value.first_time_user
+        ? "first-time user state"
+        : value.tips_hidden
+          ? "tips are hidden"
+          : "extra content below tips"
+
+      return (
+        <box width="100%" maxWidth={75} alignItems="center" paddingTop={1} flexShrink={0}>
+          <box
+            border
+            borderColor={skin.border}
+            backgroundColor={skin.panel}
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={2}
+            paddingRight={2}
+            width="100%"
+          >
+            <text fg={skin.muted}>
+              <span style={{ fg: skin.accent }}>{input.label}</span> {text}
+            </text>
+          </box>
+        </box>
+      )
+    },
+    sidebar_top(ctx, value) {
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+
+      return (
+        <box
+          border
+          borderColor={skin.border}
+          backgroundColor={skin.panel}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="column"
+          gap={1}
+        >
+          <text fg={skin.accent}>
+            <b>{input.label}</b>
+          </text>
+          <text fg={skin.text}>sidebar slot active</text>
+          <text fg={skin.muted}>session {value.session_id.slice(0, 8)}</text>
+        </box>
+      )
+    },
+    sidebar_title(ctx, value) {
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+
+      return (
+        <box paddingRight={1} flexDirection="column" gap={1}>
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={skin.text}>
+              <b>{value.title}</b>
+            </text>
+            <text fg={skin.accent}>plugin</text>
+          </box>
+          <text fg={skin.muted}>session {value.session_id.slice(0, 8)}</text>
+          {value.share_url ? <text fg={skin.muted}>{value.share_url}</text> : null}
+        </box>
+      )
+    },
+    sidebar_context(ctx, value) {
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+      const used = value.percentage === null ? "n/a" : `${value.percentage}%`
+      const bar =
+        value.percentage === null ? "" : "■".repeat(Math.max(1, Math.min(10, Math.round(value.percentage / 10))))
+
+      return (
+        <box
+          border
+          borderColor={skin.border}
+          backgroundColor={skin.panel}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="column"
+          gap={1}
+        >
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={skin.text}>
+              <b>Context</b>
+            </text>
+            <text fg={skin.accent}>slot</text>
+          </box>
+          <text fg={skin.text}>{value.tokens.toLocaleString()} tokens</text>
+          <text fg={skin.muted}>{bar ? `${used} · ${bar}` : used}</text>
+          <text fg={skin.muted}>{cash.format(value.cost)} spent</text>
+        </box>
+      )
+    },
+    sidebar_files(ctx, value) {
+      if (!value.items.length) return null
+      const map = ctx.theme.current as Record<string, unknown>
+      const skin = look(map)
+      const add = ink(map, "diffAdded", "#7bd389")
+      const del = ink(map, "diffRemoved", "#ff8e8e")
+      const list = value.items.slice(0, 3)
+
+      return (
+        <box
+          border
+          borderColor={skin.border}
+          backgroundColor={skin.panel}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="column"
+          gap={1}
+        >
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={skin.text}>
+              <b>Working Tree</b>
+            </text>
+            <text fg={skin.accent}>{value.items.length}</text>
+          </box>
+          {list.map((item) => (
+            <box flexDirection="row" gap={1} justifyContent="space-between">
+              <text fg={skin.muted} wrapMode="none">
+                {item.file}
+              </text>
+              <text fg={skin.text}>
+                {item.additions ? <span style={{ fg: add }}>+{item.additions}</span> : null}
+                {item.deletions ? <span style={{ fg: del }}> -{item.deletions}</span> : null}
+              </text>
+            </box>
+          ))}
+          {value.items.length > list.length ? (
+            <text fg={skin.muted}>+{value.items.length - list.length} more file(s)</text>
+          ) : null}
+        </box>
+      )
+    },
+    sidebar_bottom(ctx, value) {
+      const skin = look(ctx.theme.current as Record<string, unknown>)
+
+      return (
+        <box
+          border
+          borderColor={skin.border}
+          backgroundColor={skin.panel}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="column"
+          gap={1}
+        >
+          <text fg={skin.accent}>
+            <b>{input.label} footer slot</b>
+          </text>
+          <text fg={skin.muted}>
+            append demo after {value.show_getting_started ? "welcome card" : "default footer"}
+          </text>
+          <text fg={skin.text}>
+            {value.directory_name} · {value.version}
+          </text>
+        </box>
+      )
+    },
+  },
+})
+
+const reg = (api: TuiApi, input: Cfg, keys: Keys) => {
+  const route = names(input)
+  api.command.register(() => [
+    {
+      title: `${input.label} modal`,
+      value: "plugin.smoke.modal",
+      keybind: keys.get("modal"),
+      category: "Plugin",
+      slash: {
+        name: "smoke",
+      },
+      onSelect: () => {
+        api.route.navigate(route.modal, { source: "command" })
+      },
+    },
+    {
+      title: `${input.label} screen`,
+      value: "plugin.smoke.screen",
+      keybind: keys.get("screen"),
+      category: "Plugin",
+      slash: {
+        name: "smoke-screen",
+      },
+      onSelect: () => {
+        api.route.navigate(route.screen, { source: "command", tab: 0, count: 0 })
+      },
+    },
+    {
+      title: `${input.label} alert dialog`,
+      value: "plugin.smoke.alert",
+      category: "Plugin",
+      slash: {
+        name: "smoke-alert",
+      },
+      onSelect: () => {
+        warn(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} confirm dialog`,
+      value: "plugin.smoke.confirm",
+      category: "Plugin",
+      slash: {
+        name: "smoke-confirm",
+      },
+      onSelect: () => {
+        check(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} prompt dialog`,
+      value: "plugin.smoke.prompt",
+      category: "Plugin",
+      slash: {
+        name: "smoke-prompt",
+      },
+      onSelect: () => {
+        entry(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} select dialog`,
+      value: "plugin.smoke.select",
+      category: "Plugin",
+      slash: {
+        name: "smoke-select",
+      },
+      onSelect: () => {
+        picker(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} host overlay`,
+      value: "plugin.smoke.host",
+      keybind: keys.get("host"),
+      category: "Plugin",
+      slash: {
+        name: "smoke-host",
+      },
+      onSelect: () => {
+        host(api, input, tone(api))
+      },
+    },
+    {
+      title: `${input.label} go home`,
+      value: "plugin.smoke.home",
+      category: "Plugin",
+      enabled: api.route.current.name !== "home",
+      onSelect: () => {
+        api.route.navigate("home")
+      },
+    },
+    {
+      title: `${input.label} toast`,
+      value: "plugin.smoke.toast",
+      category: "Plugin",
+      onSelect: () => {
+        api.ui.toast({
+          variant: "info",
+          title: "Smoke",
+          message: "Plugin toast works",
+          duration: 2000,
+        })
+      },
+    },
+  ])
+}
+
+const tui = async (input: TuiPluginInput, options: Record<string, unknown> | null, meta: TuiPluginInit) => {
+  if (options?.enabled === false) return
+
+  await input.api.theme.install("./smoke-theme.json")
+  input.api.theme.set("smoke-theme")
+
+  const value = cfg(options ?? undefined)
+  const route = names(value)
+  const keys = input.api.keybind.create(bind, value.keybinds)
+  const fx = new VignetteEffect(value.vignette)
+  input.renderer.addPostProcessFn(fx.apply.bind(fx))
+
+  input.api.route.register([
+    {
+      name: route.screen,
+      render: ({ params }) => (
+        <Screen api={input.api} input={value} route={route} keys={keys} meta={meta} params={params} />
+      ),
+    },
+    {
+      name: route.modal,
+      render: ({ params }) => <Modal api={input.api} input={value} route={route} keys={keys} params={params} />,
+    },
+  ])
+
+  reg(input.api, value, keys)
+  input.slots.register(slot(value))
+}
+
+export default {
+  tui,
+}

.opencode/themes/.gitignore

@@ -0,0 +1 @@
+smoke-theme.json

.opencode/tui.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "theme": "smoke-theme",
+  "plugin": [
+    [
+      "./plugins/tui-smoke.tsx",
+      {
+        "enabled": true,
+        "label": "workspace",
+        "keybinds": {
+          "modal": "ctrl+alt+m",
+          "screen": "ctrl+alt+o",
+          "home": "escape,ctrl+shift+h",
+          "dialog_close": "escape,q"
+        }
+      }
+    ]
+  ]
+}

bun.lock

@@ -338,8 +338,8 @@
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@openrouter/ai-sdk-provider": "1.5.4",
-        "@opentui/core": "0.1.87",
-        "@opentui/solid": "0.1.87",
+        "@opentui/core": "0.0.0-20260318-39211c40",
+        "@opentui/solid": "0.0.0-20260318-39211c40",
         "@parcel/watcher": "2.5.1",
         "@pierre/diffs": "catalog:",
         "@solid-primitives/event-bus": "1.1.2",
@@ -425,11 +425,18 @@
         "zod": "catalog:",
       },
       "devDependencies": {
+        "@opentui/core": "0.0.0-20260318-39211c40",
         "@tsconfig/node22": "catalog:",
         "@types/node": "catalog:",
         "@typescript/native-preview": "catalog:",
         "typescript": "catalog:",
       },
+      "peerDependencies": {
+        "@opentui/core": ">=0.1.87",
+      },
+      "optionalPeers": [
+        "@opentui/core",
+      ],
     },
     "packages/script": {
       "name": "@opencode-ai/script",
@@ -1448,21 +1455,21 @@
 
     "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
-    "@opentui/core": ["@opentui/core@0.1.87", "", { "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.87", "@opentui/core-darwin-x64": "0.1.87", "@opentui/core-linux-arm64": "0.1.87", "@opentui/core-linux-x64": "0.1.87", "@opentui/core-win32-arm64": "0.1.87", "@opentui/core-win32-x64": "0.1.87", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-dhsmMv0IqKftwG7J/pBrLBj2armsYIg5R3LBvciRQI/6X89GufP4l1u0+QTACAx6iR4SYJJNVNQ2tdX8LM9rMw=="],
+    "@opentui/core": ["@opentui/core@0.0.0-20260318-39211c40", "", { "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.0.0-20260318-39211c40", "@opentui/core-darwin-x64": "0.0.0-20260318-39211c40", "@opentui/core-linux-arm64": "0.0.0-20260318-39211c40", "@opentui/core-linux-x64": "0.0.0-20260318-39211c40", "@opentui/core-win32-arm64": "0.0.0-20260318-39211c40", "@opentui/core-win32-x64": "0.0.0-20260318-39211c40", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-HGMpIpTzl4vb7uwjsx9S9EoefM0saNTeYvOMMQu0ktkwuDYftWaiWgO+MubLzHuiocATMaJjLhvjaPuXUgqF/w=="],
 
-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.87", "", { "os": "darwin", "cpu": "arm64" }, "sha512-G8oq85diOfkU6n0T1CxCle7oDmpKxwhcdhZ9khBMU5IrfLx9ZDuCM3F6MsiRQWdvPPCq2oomNbd64bYkPamYgw=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.0.0-20260318-39211c40", "", { "os": "darwin", "cpu": "arm64" }, "sha512-XTgNp2x8ET0i2HoukUTdb/fzgdV988flCzANvuquTB5obM821peyWxqvLX1I/aq4A4PHV7Zj1v56GjZfWHSikw=="],
 
-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.87", "", { "os": "darwin", "cpu": "x64" }, "sha512-MYTFQfOHm6qO7YaY4GHK9u/oJlXY6djaaxl5I+k4p2mk3vvuFIl/AP1ypITwBFjyV5gyp7PRWFp4nGfY9oN8bw=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.0.0-20260318-39211c40", "", { "os": "darwin", "cpu": "x64" }, "sha512-n7UIx8ClnkXitqpVNg386SyfSIBWVM/1CndF/zzjd+GOY0rctC2DKQxZnazHPChSXKXGQeq5xfML9Nuoi+PVkw=="],
 
-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.87", "", { "os": "linux", "cpu": "arm64" }, "sha512-he8o1h5M6oskRJ7wE+xKJgmWnv5ZwN6gB3M/Z+SeHtOMPa5cZmi3TefTjG54llEgFfx0F9RcqHof7TJ/GNxRkw=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.0.0-20260318-39211c40", "", { "os": "linux", "cpu": "arm64" }, "sha512-8gOrB9xpccdNTvZNaTPWuZuIN/PnPbD6lgklbKnBqmZdHbxzfEOobJn/QAvH4KPY4ur0A4TcQkx31ZPu9i7Erg=="],
 
-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.87", "", { "os": "linux", "cpu": "x64" }, "sha512-aiUwjPlH4yDcB8/6YDKSmMkaoGAAltL0Xo0AzXyAtJXWK5tkCSaYjEVwzJ/rYRkr4Magnad+Mjth4AQUWdR2AA=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.0.0-20260318-39211c40", "", { "os": "linux", "cpu": "x64" }, "sha512-eI1HUr8xmLiJ/z5JkjZgu4QBbJfIt5w7YjKugHXNiO39OexlnYa1W+Pi6ivLowTeJ1KOhLRltHUE4uCiPy/ItQ=="],
 
-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.87", "", { "os": "win32", "cpu": "arm64" }, "sha512-cmP0pOyREjWGniHqbDmaMY7U+1AyagrD8VseJbU0cGpNgVpG2/gbrJUGdfdLB0SNb+mzLdx6SOjdxtrElwRCQA=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.0.0-20260318-39211c40", "", { "os": "win32", "cpu": "arm64" }, "sha512-JkniQxnud5q1K2jbrgLpoyKRtqIQ+TsAMmR6R0PsllJ8mjZSgggbgRpsJSagBDVvtSaYRpeFdW4fsFiEJxLsJA=="],
 
-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.87", "", { "os": "win32", "cpu": "x64" }, "sha512-N2GErAAP8iODf2RPp86pilPaVKiD6G4pkpZL5nLGbKsl0bndrVTpSqZcn8+/nQwFZDPD/AsiRTYNOfWOblhzOw=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.0.0-20260318-39211c40", "", { "os": "win32", "cpu": "x64" }, "sha512-X7GviGO1tEnu1htDh9h4ojUOtgQNqLp0bSdtWx+U8nvY3Cuj7SuffZZgWJomeDDTLyzekNZvFCy0jJi5s8UCuQ=="],
 
-    "@opentui/solid": ["@opentui/solid@0.1.87", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.87", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-lRT9t30l8+FtgOjjWJcdb2MT6hP8/RKqwGgYwTI7fXrOqdhxxwdP2SM+rH2l3suHeASheiTdlvPAo230iUcsvg=="],
+    "@opentui/solid": ["@opentui/solid@0.0.0-20260318-39211c40", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.0.0-20260318-39211c40", "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-TVjGR0tCxISAQKl6g4k88YhkfE+PclPrbC+4N7mFOAUJ3i+OMsdIFg/j7bhay55P9J5tMULnO6AygiSoG0fpeg=="],
 
     "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],
 
@@ -3820,7 +3827,7 @@
 
     "pagefind": ["pagefind@1.4.0", "", { "optionalDependencies": { "@pagefind/darwin-arm64": "1.4.0", "@pagefind/darwin-x64": "1.4.0", "@pagefind/freebsd-x64": "1.4.0", "@pagefind/linux-arm64": "1.4.0", "@pagefind/linux-x64": "1.4.0", "@pagefind/windows-x64": "1.4.0" }, "bin": { "pagefind": "lib/runner/bin.cjs" } }, "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g=="],
 
-    "pako": ["pako@0.2.9", "", {}, "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="],
+    "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
 
     "param-case": ["param-case@3.0.4", "", { "dependencies": { "dot-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A=="],
 
@@ -5196,8 +5203,6 @@
 
     "@opentui/solid/@babel/core": ["@babel/core@7.28.0", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.27.3", "@babel/helpers": "^7.27.6", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ=="],
 
-    "@opentui/solid/babel-preset-solid": ["babel-preset-solid@1.9.9", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.40.1" }, "peerDependencies": { "@babel/core": "^7.0.0", "solid-js": "^1.9.8" }, "optionalPeers": ["solid-js"] }, "sha512-pCnxWrciluXCeli/dj5PIEHgbNzim3evtTn12snjqqg8QZWJNMjH1AWIp4iG/tbVjqQ72aBEymMSagvmgxubXw=="],
-
     "@oslojs/jwt/@oslojs/encoding": ["@oslojs/encoding@0.4.1", "", {}, "sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q=="],
 
     "@pierre/diffs/@shikijs/transformers": ["@shikijs/transformers@3.20.0", "", { "dependencies": { "@shikijs/core": "3.20.0", "@shikijs/types": "3.20.0" } }, "sha512-PrHHMRr3Q5W1qB/42kJW6laqFyWdhrPF2hNR9qjOm1xcSiAO3hAHo7HaVyHE6pMyevmy3i51O8kuGGXC78uK3g=="],
@@ -5542,6 +5547,10 @@
 
     "openid-client/lru-cache": ["lru-cache@6.0.0", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="],
 
+    "opentui-spinner/@opentui/core": ["@opentui/core@0.1.86", "", { "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.86", "@opentui/core-darwin-x64": "0.1.86", "@opentui/core-linux-arm64": "0.1.86", "@opentui/core-linux-x64": "0.1.86", "@opentui/core-win32-arm64": "0.1.86", "@opentui/core-win32-x64": "0.1.86", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-3tRLbI9ADrQE1jEEn4x2aJexEOQZkv9Emk2BixMZqxfVhz2zr2SxtpimDAX0vmZK3+GnWAwBWxuaCAsxZpY4+w=="],
+
+    "opentui-spinner/@opentui/solid": ["@opentui/solid@0.1.86", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.86", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-pOZC9dlZIH+bpstVVZ2AvYukBnslZTKSl/y5H8FWcMTHGv/BzpGxXBxstL65E/IQASqPFbvFcs7yMRzdLhynmA=="],
+
     "ora/bl": ["bl@4.1.0", "", { "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", "readable-stream": "^3.4.0" } }, "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="],
 
     "ora/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@@ -5648,12 +5657,12 @@
 
     "type-is/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
+    "unicode-trie/pako": ["pako@0.2.9", "", {}, "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="],
+
     "unifont/ofetch": ["ofetch@1.5.1", "", { "dependencies": { "destr": "^2.0.5", "node-fetch-native": "^1.6.7", "ufo": "^1.6.1" } }, "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA=="],
 
     "uri-js/punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
-    "utif2/pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
-
     "vite-plugin-icons-spritesheet/glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],
 
     "vitest/@vitest/expect": ["@vitest/expect@4.0.18", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.0.18", "@vitest/utils": "4.0.18", "chai": "^6.2.1", "tinyrainbow": "^3.0.3" } }, "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ=="],
@@ -6292,6 +6301,22 @@
 
     "opencontrol/@modelcontextprotocol/sdk/zod-to-json-schema": ["zod-to-json-schema@3.25.1", "", { "peerDependencies": { "zod": "^3.25 || ^4" } }, "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA=="],
 
+    "opentui-spinner/@opentui/core/@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.86", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Zp7q64+d+Dcx6YrH3mRcnHq8EOBnrfc1RvjgSWLhpXr49hY6LzuhqpfZM57aGErPYlR+ff8QM6e5FUkFnDfyjw=="],
+
+    "opentui-spinner/@opentui/core/@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.86", "", { "os": "darwin", "cpu": "x64" }, "sha512-NcxfjCJm1kLnTMVOpAPdRYNi8W8XdAXNa6N7i9khiVFrl2v5KRQfUjbrSOUYVxFJNc3jKFG6rsn3jEApvn92qA=="],
+
+    "opentui-spinner/@opentui/core/@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.86", "", { "os": "linux", "cpu": "arm64" }, "sha512-EDHAvqSOr8CXzbDvo1aE5blJ6wu1aSbR2LqoXtoeXHemr2T2W42D2TdIWewG6K+/BuRbzZnqt9wnYFBksLW6lw=="],
+
+    "opentui-spinner/@opentui/core/@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.86", "", { "os": "linux", "cpu": "x64" }, "sha512-VBaBkVdQDxYV4WcKjb+jgyMS5PiVHepvfaoKWpz1Bq+J01xXW4XPcXyPGkgR1+2R93KzaugEnLscTW4mWtLHlQ=="],
+
+    "opentui-spinner/@opentui/core/@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.86", "", { "os": "win32", "cpu": "arm64" }, "sha512-xKbT7sEKYKGwUPkoqmLfHjbJU+vwHPDwf/r/mIunL41JXQBB35CSZ3/QgIwpp2kkteu7oE1tdBdg15ogUU4OMg=="],
+
+    "opentui-spinner/@opentui/core/@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.86", "", { "os": "win32", "cpu": "x64" }, "sha512-HRfgAUlcu71/MrtgfX4Gj7PsDtfXZiuC506Pkn1OnRN1Xomcu10BVRDweUa0/g8ldU9i9kLjMGGnpw6/NjaBFg=="],
+
+    "opentui-spinner/@opentui/solid/@babel/core": ["@babel/core@7.28.0", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.27.3", "@babel/helpers": "^7.27.6", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ=="],
+
+    "opentui-spinner/@opentui/solid/babel-preset-solid": ["babel-preset-solid@1.9.9", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.40.1" }, "peerDependencies": { "@babel/core": "^7.0.0", "solid-js": "^1.9.8" }, "optionalPeers": ["solid-js"] }, "sha512-pCnxWrciluXCeli/dj5PIEHgbNzim3evtTn12snjqqg8QZWJNMjH1AWIp4iG/tbVjqQ72aBEymMSagvmgxubXw=="],
+
     "ora/bl/buffer": ["buffer@5.7.1", "", { "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.1.13" } }, "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="],
 
     "ora/bl/readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
@@ -6620,6 +6645,8 @@
 
     "opencontrol/@modelcontextprotocol/sdk/express/type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
 
+    "opentui-spinner/@opentui/solid/@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
     "ora/bl/buffer/ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "pkg-up/find-up/locate-path/p-locate": ["p-locate@3.0.0", "", { "dependencies": { "p-limit": "^2.0.0" } }, "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ=="],

packages/app/src/components/status-popover.tsx

@@ -188,7 +188,9 @@ export function StatusPopover() {
   const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
   const lspItems = createMemo(() => sync.data.lsp ?? [])
   const lspCount = createMemo(() => lspItems().length)
-  const plugins = createMemo(() => sync.data.config.plugin ?? [])
+  const plugins = createMemo(() =>
+    (sync.data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])),
+  )
   const pluginCount = createMemo(() => plugins().length)
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
   const overallHealthy = createMemo(() => {

packages/opencode/package.json

@@ -95,8 +95,8 @@
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/util": "workspace:*",
     "@openrouter/ai-sdk-provider": "1.5.4",
-    "@opentui/core": "0.1.87",
-    "@opentui/solid": "0.1.87",
+    "@opentui/core": "0.0.0-20260318-39211c40",
+    "@opentui/solid": "0.0.0-20260318-39211c40",
     "@effect/platform-node": "catalog:",
     "@parcel/watcher": "2.5.1",
     "@pierre/diffs": "catalog:",

packages/opencode/script/build.ts

@@ -4,7 +4,7 @@ import { $ } from "bun"
 import fs from "fs"
 import path from "path"
 import { fileURLToPath } from "url"
-import solidPlugin from "@opentui/solid/bun-plugin"
+import { createSolidTransformPlugin } from "@opentui/solid/bun-plugin"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -59,6 +59,7 @@ console.log(`Loaded ${migrations.length} migrations`)
 const singleFlag = process.argv.includes("--single")
 const baselineFlag = process.argv.includes("--baseline")
 const skipInstall = process.argv.includes("--skip-install")
+const plugin = createSolidTransformPlugin()
 
 const allTargets: {
   os: string
@@ -177,7 +178,7 @@ for (const item of targets) {
   await Bun.build({
     conditions: ["browser"],
     tsconfig: "./tsconfig.json",
-    plugins: [solidPlugin],
+    plugins: [plugin],
     compile: {
       autoloadBunfig: false,
       autoloadDotenv: false,

packages/opencode/src/bun/index.ts

@@ -68,12 +68,13 @@ export namespace BunProc {
 
     if (!modExists || !cachedVersion) {
       // continue to install
-    } else if (version !== "latest" && cachedVersion === version) {
-      return mod
     } else if (version === "latest") {
-      const isOutdated = await PackageRegistry.isOutdated(pkg, cachedVersion, Global.Path.cache)
-      if (!isOutdated) return mod
+      if (!PackageRegistry.online()) return mod
+      const stale = await PackageRegistry.isOutdated(pkg, cachedVersion, Global.Path.cache)
+      if (!stale) return mod
       log.info("Cached version is outdated, proceeding with install", { pkg, cachedVersion })
+    } else if (cachedVersion === version) {
+      return mod
     }
 
     // Build command arguments

packages/opencode/src/bun/registry.ts

@@ -9,7 +9,18 @@ export namespace PackageRegistry {
     return process.execPath
   }
 
+  export function online() {
+    const nav = globalThis.navigator
+    if (!nav || typeof nav.onLine !== "boolean") return true
+    return nav.onLine
+  }
+
   export async function info(pkg: string, field: string, cwd?: string): Promise<string | null> {
+    if (!online()) {
+      log.debug("offline, skipping bun info", { pkg, field })
+      return null
+    }
+
     const { code, stdout, stderr } = await Process.run([which(), "info", pkg, field], {
       cwd,
       env: {

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -1,13 +1,25 @@
-import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
+import { render, TimeToFirstDraw, useKeyboard, useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
 import { Clipboard } from "@tui/util/clipboard"
 import { Selection } from "@tui/util/selection"
-import { MouseButton, TextAttributes } from "@opentui/core"
+import { createCliRenderer, MouseButton, TextAttributes, type CliRendererConfig, type ParsedKey } from "@opentui/core"
 import { RouteProvider, useRoute } from "@tui/context/route"
-import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
+import {
+  Switch,
+  Match,
+  createEffect,
+  createMemo,
+  untrack,
+  ErrorBoundary,
+  createSignal,
+  onMount,
+  batch,
+  Show,
+  on,
+} from "solid-js"
 import { win32DisableProcessedInput, win32FlushInputBuffer, win32InstallCtrlCGuard } from "./win32"
 import { Installation } from "@/installation"
 import { Flag } from "@/flag/flag"
-import { DialogProvider, useDialog } from "@tui/ui/dialog"
+import { Dialog as DialogUI, DialogProvider, useDialog } from "@tui/ui/dialog"
 import { DialogProvider as DialogProviderList } from "@tui/component/dialog-provider"
 import { SDKProvider, useSDK } from "@tui/context/sdk"
 import { SyncProvider, useSync } from "@tui/context/sync"
@@ -21,7 +33,7 @@ import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command
 import { DialogAgent } from "@tui/component/dialog-agent"
 import { DialogSessionList } from "@tui/component/dialog-session-list"
 import { DialogWorkspaceList } from "@tui/component/dialog-workspace-list"
-import { KeybindProvider } from "@tui/context/keybind"
+import { KeybindProvider, useKeybind } from "@tui/context/keybind"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { Home } from "@tui/routes/home"
 import { Session } from "@tui/routes/session"
@@ -29,6 +41,9 @@ import { PromptHistoryProvider } from "./component/prompt/history"
 import { FrecencyProvider } from "./component/prompt/frecency"
 import { PromptStashProvider } from "./component/prompt/stash"
 import { DialogAlert } from "./ui/dialog-alert"
+import { DialogConfirm } from "./ui/dialog-confirm"
+import { DialogPrompt } from "./ui/dialog-prompt"
+import { DialogSelect, type DialogSelectOption as SelectOption } from "./ui/dialog-select"
 import { ToastProvider, useToast } from "./ui/toast"
 import { ExitProvider, useExit } from "./context/exit"
 import { Session as SessionApi } from "@/session"
@@ -41,6 +56,9 @@ import { writeHeapSnapshot } from "v8"
 import { PromptRefProvider, usePromptRef } from "./context/prompt"
 import { TuiConfigProvider } from "./context/tui-config"
 import { TuiConfig } from "@/config/tui"
+import type { TuiApi, TuiDialogSelectOption, TuiRouteDefinition } from "@opencode-ai/plugin/tui"
+import { TuiPlugin } from "./plugin"
+import { FormatError, FormatUnknownError } from "@/cli/error"
 
 async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
   // can't set raw mode if not a TTY
@@ -104,6 +122,263 @@ async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
 
 import type { EventSource } from "./context/sdk"
 
+function rendererConfig(_config: TuiConfig.Info): CliRendererConfig {
+  return {
+    targetFps: 60,
+    gatherStats: false,
+    exitOnCtrlC: false,
+    useKittyKeyboard: {},
+    autoFocus: false,
+    openConsoleOnError: false,
+    consoleOptions: {
+      keyBindings: [{ name: "y", ctrl: true, action: "copy-selection" }],
+      onCopySelection: (text) => {
+        Clipboard.copy(text).catch((error) => {
+          console.error(`Failed to copy console selection to clipboard: ${error}`)
+        })
+      },
+    },
+  }
+}
+
+type RouteEntry = {
+  key: symbol
+  render: TuiRouteDefinition["render"]
+}
+
+type RouteMap = Map<string, RouteEntry[]>
+
+type ApiInput = {
+  command: ReturnType<typeof useCommandDialog>
+  dialog: ReturnType<typeof useDialog>
+  keybind: ReturnType<typeof useKeybind>
+  route: ReturnType<typeof useRoute>
+  routes: RouteMap
+  bump: () => void
+  theme: ReturnType<typeof useTheme>
+  toast: ReturnType<typeof useToast>
+}
+
+function routeRegister(routes: RouteMap, list: TuiRouteDefinition<JSX.Element>[], bump: () => void) {
+  const key = Symbol()
+  for (const item of list) {
+    const prev = routes.get(item.name) ?? []
+    prev.push({ key, render: item.render })
+    routes.set(item.name, prev)
+  }
+  bump()
+
+  return () => {
+    for (const item of list) {
+      const prev = routes.get(item.name)
+      if (!prev) continue
+      const next = prev.filter((x) => x.key !== key)
+      if (!next.length) {
+        routes.delete(item.name)
+        continue
+      }
+      routes.set(item.name, next)
+    }
+    bump()
+  }
+}
+
+function routeNavigate(route: ReturnType<typeof useRoute>, name: string, params?: Record<string, unknown>) {
+  if (name === "home") {
+    route.navigate({ type: "home" })
+    return
+  }
+
+  if (name === "session") {
+    const sessionID = params?.sessionID
+    if (typeof sessionID !== "string") return
+    route.navigate({ type: "session", sessionID })
+    return
+  }
+
+  route.navigate({ type: "plugin", id: name, data: params })
+}
+
+function routeCurrent(route: ReturnType<typeof useRoute>): TuiApi<JSX.Element>["route"]["current"] {
+  if (route.data.type === "home") return { name: "home" }
+  if (route.data.type === "session") {
+    return {
+      name: "session",
+      params: {
+        sessionID: route.data.sessionID,
+        initialPrompt: route.data.initialPrompt,
+      },
+    }
+  }
+
+  return {
+    name: route.data.id,
+    params: route.data.data,
+  }
+}
+
+function mapOption<Value>(item: TuiDialogSelectOption<Value, JSX.Element>): SelectOption<Value> {
+  return {
+    ...item,
+    onSelect: () => item.onSelect?.(),
+  }
+}
+
+function pickOption<Value>(item: SelectOption<Value>): TuiDialogSelectOption<Value, JSX.Element> {
+  return {
+    title: item.title,
+    value: item.value,
+    description: item.description,
+    footer: item.footer,
+    category: item.category,
+    disabled: item.disabled,
+  }
+}
+
+function mapOptionCb<Value>(cb?: (item: TuiDialogSelectOption<Value, JSX.Element>) => void) {
+  if (!cb) return
+  return (item: SelectOption<Value>) => cb(pickOption(item))
+}
+
+function createTuiApi(input: ApiInput): TuiApi<JSX.Element> {
+  return {
+    command: {
+      register(cb) {
+        input.command.register(() => cb())
+      },
+      trigger(value) {
+        input.command.trigger(value)
+      },
+    },
+    route: {
+      register(list) {
+        return routeRegister(input.routes, list, input.bump)
+      },
+      navigate(name, params) {
+        routeNavigate(input.route, name, params)
+      },
+      get current() {
+        return routeCurrent(input.route)
+      },
+    },
+    ui: {
+      Dialog(props) {
+        return (
+          <DialogUI size={props.size} onClose={props.onClose}>
+            {props.children as JSX.Element}
+          </DialogUI>
+        )
+      },
+      DialogAlert(props) {
+        return <DialogAlert {...props} />
+      },
+      DialogConfirm(props) {
+        return <DialogConfirm {...props} />
+      },
+      DialogPrompt(props) {
+        return <DialogPrompt {...props} description={props.description as (() => JSX.Element) | undefined} />
+      },
+      DialogSelect(props) {
+        return (
+          <DialogSelect
+            title={props.title}
+            placeholder={props.placeholder}
+            options={props.options.map(mapOption)}
+            flat={props.flat}
+            onMove={mapOptionCb(props.onMove)}
+            onFilter={props.onFilter}
+            onSelect={mapOptionCb(props.onSelect)}
+            skipFilter={props.skipFilter}
+            current={props.current}
+          />
+        )
+      },
+      toast(inputToast) {
+        input.toast.show({
+          title: inputToast.title,
+          message: inputToast.message,
+          variant: inputToast.variant ?? "info",
+          duration: inputToast.duration,
+        })
+      },
+      dialog: {
+        replace(render, onClose) {
+          input.dialog.replace(render, onClose)
+        },
+        clear() {
+          input.dialog.clear()
+        },
+        setSize(size) {
+          input.dialog.setSize(size)
+        },
+        get size() {
+          return input.dialog.size
+        },
+        get depth() {
+          return input.dialog.stack.length
+        },
+        get open() {
+          return input.dialog.stack.length > 0
+        },
+      },
+    },
+    keybind: {
+      parse(evt: ParsedKey) {
+        return input.keybind.parse(evt)
+      },
+      match(key, evt: ParsedKey) {
+        return input.keybind.match(key, evt)
+      },
+      print(key) {
+        return input.keybind.print(key)
+      },
+      create(defaults, overrides) {
+        return input.keybind.create(defaults, overrides)
+      },
+    },
+    theme: {
+      get current() {
+        return input.theme.theme
+      },
+      get selected() {
+        return input.theme.selected
+      },
+      has(name) {
+        return input.theme.has(name)
+      },
+      set(name) {
+        return input.theme.set(name)
+      },
+      async install(_jsonPath) {
+        throw new Error("theme.install is only available in plugin context")
+      },
+      mode() {
+        return input.theme.mode()
+      },
+      get ready() {
+        return input.theme.ready
+      },
+    },
+  }
+}
+
+function errorMessage(error: unknown) {
+  const formatted = FormatError(error)
+  if (formatted !== undefined) return formatted
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "data" in error &&
+    typeof error.data === "object" &&
+    error.data !== null &&
+    "message" in error.data &&
+    typeof error.data.message === "string"
+  ) {
+    return error.data.message
+  }
+  return FormatUnknownError(error)
+}
+
 export function tui(input: {
   url: string
   args: Args
@@ -129,73 +404,57 @@ export function tui(input: {
       resolve()
     }
 
-    render(
-      () => {
-        return (
-          <ErrorBoundary
-            fallback={(error, reset) => <ErrorComponent error={error} reset={reset} onExit={onExit} mode={mode} />}
-          >
-            <ArgsProvider {...input.args}>
-              <ExitProvider onExit={onExit}>
-                <KVProvider>
-                  <ToastProvider>
-                    <RouteProvider>
-                      <TuiConfigProvider config={input.config}>
-                        <SDKProvider
-                          url={input.url}
-                          directory={input.directory}
-                          fetch={input.fetch}
-                          headers={input.headers}
-                          events={input.events}
-                        >
-                          <SyncProvider>
-                            <ThemeProvider mode={mode}>
-                              <LocalProvider>
-                                <KeybindProvider>
-                                  <PromptStashProvider>
-                                    <DialogProvider>
-                                      <CommandProvider>
-                                        <FrecencyProvider>
-                                          <PromptHistoryProvider>
-                                            <PromptRefProvider>
-                                              <App />
-                                            </PromptRefProvider>
-                                          </PromptHistoryProvider>
-                                        </FrecencyProvider>
-                                      </CommandProvider>
-                                    </DialogProvider>
-                                  </PromptStashProvider>
-                                </KeybindProvider>
-                              </LocalProvider>
-                            </ThemeProvider>
-                          </SyncProvider>
-                        </SDKProvider>
-                      </TuiConfigProvider>
-                    </RouteProvider>
-                  </ToastProvider>
-                </KVProvider>
-              </ExitProvider>
-            </ArgsProvider>
-          </ErrorBoundary>
-        )
-      },
-      {
-        targetFps: 60,
-        gatherStats: false,
-        exitOnCtrlC: false,
-        useKittyKeyboard: {},
-        autoFocus: false,
-        openConsoleOnError: false,
-        consoleOptions: {
-          keyBindings: [{ name: "y", ctrl: true, action: "copy-selection" }],
-          onCopySelection: (text) => {
-            Clipboard.copy(text).catch((error) => {
-              console.error(`Failed to copy console selection to clipboard: ${error}`)
-            })
-          },
-        },
-      },
-    )
+    const renderer = await createCliRenderer(rendererConfig(input.config))
+
+    await render(() => {
+      return (
+        <ErrorBoundary
+          fallback={(error, reset) => <ErrorComponent error={error} reset={reset} onExit={onExit} mode={mode} />}
+        >
+          <ArgsProvider {...input.args}>
+            <ExitProvider onExit={onExit}>
+              <KVProvider>
+                <ToastProvider>
+                  <RouteProvider>
+                    <TuiConfigProvider config={input.config}>
+                      <SDKProvider
+                        url={input.url}
+                        directory={input.directory}
+                        fetch={input.fetch}
+                        headers={input.headers}
+                        events={input.events}
+                      >
+                        <SyncProvider>
+                          <ThemeProvider mode={mode}>
+                            <LocalProvider>
+                              <KeybindProvider>
+                                <PromptStashProvider>
+                                  <DialogProvider>
+                                    <CommandProvider>
+                                      <FrecencyProvider>
+                                        <PromptHistoryProvider>
+                                          <PromptRefProvider>
+                                            <App />
+                                          </PromptRefProvider>
+                                        </PromptHistoryProvider>
+                                      </FrecencyProvider>
+                                    </CommandProvider>
+                                  </DialogProvider>
+                                </PromptStashProvider>
+                              </KeybindProvider>
+                            </LocalProvider>
+                          </ThemeProvider>
+                        </SyncProvider>
+                      </SDKProvider>
+                    </TuiConfigProvider>
+                  </RouteProvider>
+                </ToastProvider>
+              </KVProvider>
+            </ExitProvider>
+          </ArgsProvider>
+        </ErrorBoundary>
+      )
+    }, renderer)
   })
 }
 
@@ -208,12 +467,43 @@ function App() {
   const local = useLocal()
   const kv = useKV()
   const command = useCommandDialog()
+  const keybind = useKeybind()
   const sdk = useSDK()
   const toast = useToast()
-  const { theme, mode, setMode } = useTheme()
+  const themeState = useTheme()
+  const { theme, mode, setMode } = themeState
   const sync = useSync()
   const exit = useExit()
   const promptRef = usePromptRef()
+  const routes: RouteMap = new Map()
+  const [routeRev, setRouteRev] = createSignal(0)
+  const routeView = (name: string) => {
+    routeRev()
+    return routes.get(name)?.at(-1)?.render
+  }
+  const api = createTuiApi({
+    command,
+    dialog,
+    keybind,
+    route,
+    routes,
+    bump: () => setRouteRev((x) => x + 1),
+    theme: themeState,
+    toast,
+  })
+  const [ready, setReady] = createSignal(false)
+  TuiPlugin.init({
+    client: sdk.client,
+    event: sdk.event,
+    renderer,
+    api,
+  })
+    .catch((error) => {
+      console.error("Failed to load TUI plugins", error)
+    })
+    .finally(() => {
+      setReady(true)
+    })
 
   useKeyboard((evt) => {
     if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
@@ -256,10 +546,6 @@ function App() {
   }
   const [terminalTitleEnabled, setTerminalTitleEnabled] = createSignal(kv.get("terminal_title_enabled", true))
 
-  createEffect(() => {
-    console.log(JSON.stringify(route.data))
-  })
-
   // Update terminal window title based on current route and session
   createEffect(() => {
     if (!terminalTitleEnabled() || Flag.OPENCODE_DISABLE_TERMINAL_TITLE) return
@@ -276,9 +562,13 @@ function App() {
         return
       }
 
-      // Truncate title to 40 chars max
       const title = session.title.length > 40 ? session.title.slice(0, 37) + "..." : session.title
       renderer.setTerminalTitle(`OC | ${title}`)
+      return
+    }
+
+    if (route.data.type === "plugin") {
+      renderer.setTerminalTitle(`OC | ${route.data.id}`)
     }
   })
 
@@ -710,17 +1000,7 @@ function App() {
   sdk.event.on(SessionApi.Event.Error.type, (evt) => {
     const error = evt.properties.error
     if (error && typeof error === "object" && error.name === "MessageAbortedError") return
-    const message = (() => {
-      if (!error) return "An error occurred"
-
-      if (typeof error === "object") {
-        const data = error.data
-        if ("message" in data && typeof data.message === "string") {
-          return data.message
-        }
-      }
-      return String(error)
-    })()
+    const message = errorMessage(error)
 
     toast.show({
       variant: "error",
@@ -738,29 +1018,58 @@ function App() {
     })
   })
 
-  return (
-    <box
-      width={dimensions().width}
-      height={dimensions().height}
-      backgroundColor={theme.background}
-      onMouseDown={(evt) => {
-        if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
-        if (evt.button !== MouseButton.RIGHT) return
+  const plugin = createMemo(() => {
+    if (route.data.type !== "plugin") return
+    const render = routeView(route.data.id)
+    if (!render) return <PluginRouteMissing id={route.data.id} onHome={() => route.navigate({ type: "home" })} />
+    return render({ params: route.data.data })
+  })
 
-        if (!Selection.copy(renderer, toast)) return
-        evt.preventDefault()
-        evt.stopPropagation()
-      }}
-      onMouseUp={Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT ? undefined : () => Selection.copy(renderer, toast)}
-    >
-      <Switch>
-        <Match when={route.data.type === "home"}>
-          <Home />
-        </Match>
-        <Match when={route.data.type === "session"}>
-          <Session />
-        </Match>
-      </Switch>
+  return (
+    <Show when={ready()}>
+      <box
+        width={dimensions().width}
+        height={dimensions().height}
+        backgroundColor={theme.background}
+        onMouseDown={(evt) => {
+          if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
+          if (evt.button !== MouseButton.RIGHT) return
+
+          if (!Selection.copy(renderer, toast)) return
+          evt.preventDefault()
+          evt.stopPropagation()
+        }}
+        onMouseUp={
+          Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT ? undefined : () => Selection.copy(renderer, toast)
+        }
+      >
+        <Show when={Flag.OPENCODE_SHOW_TTFD}>
+          <TimeToFirstDraw />
+        </Show>
+        <Switch>
+          <Match when={route.data.type === "home"}>
+            <Home />
+          </Match>
+          <Match when={route.data.type === "session"}>
+            <Session />
+          </Match>
+        </Switch>
+        {plugin()}
+        <TuiPlugin.Slot name="app" />
+      </box>
+    </Show>
+  )
+}
+
+function PluginRouteMissing(props: { id: string; onHome: () => void }) {
+  const { theme } = useTheme()
+
+  return (
+    <box width="100%" height="100%" alignItems="center" justifyContent="center" flexDirection="column" gap={1}>
+      <text fg={theme.warning}>Unknown plugin route: {props.id}</text>
+      <box onMouseUp={props.onHome} backgroundColor={theme.backgroundElement} paddingLeft={1} paddingRight={1}>
+        <text fg={theme.text}>go home</text>
+      </box>
     </box>
   )
 }

packages/opencode/src/cli/cmd/tui/component/dialog-command.tsx

@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
-import { type KeybindKey, useKeybind } from "@tui/context/keybind"
+import { useKeybind } from "@tui/context/keybind"
 
 type Context = ReturnType<typeof init>
 const ctx = createContext<Context>()
@@ -21,7 +21,7 @@ export type Slash = {
 }
 
 export type CommandOption = DialogSelectOption<string> & {
-  keybind?: KeybindKey
+  keybind?: string
   suggested?: boolean
   slash?: Slash
   hidden?: boolean

packages/opencode/src/cli/cmd/tui/component/dialog-status.tsx

@@ -16,7 +16,8 @@ export function DialogStatus() {
 
   const plugins = createMemo(() => {
     const list = sync.data.config.plugin ?? []
-    const result = list.map((value) => {
+    const result = list.map((item) => {
+      const value = typeof item === "string" ? item : item[0]
       if (value.startsWith("file://")) {
         const path = fileURLToPath(value)
         const parts = path.split("/")

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -1,4 +1,4 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg } from "@opentui/core"
+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 "opentui-spinner/solid"
 import path from "path"
@@ -936,7 +936,7 @@ export function Prompt(props: PromptProps) {
                 // Normalize line endings at the boundary
                 // Windows ConPTY/Terminal often sends CR-only newlines in bracketed paste
                 // Replace CRLF first, then any remaining CR
-                const normalizedText = event.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
+                const normalizedText = decodePasteBytes(event.bytes).replace(/\r\n/g, "\n").replace(/\r/g, "\n")
                 const pastedContent = normalizedText.trim()
                 if (!pastedContent) {
                   command.trigger("prompt.paste")

packages/opencode/src/cli/cmd/tui/context/keybind-plugin.ts

@@ -0,0 +1,44 @@
+import type { ParsedKey } from "@opentui/core"
+
+export type PluginKeybindMap = Record<string, string>
+
+type Base<Info> = {
+  parse: (evt: ParsedKey) => Info
+  match: (key: string, evt: ParsedKey) => boolean
+  print: (key: string) => string
+}
+
+export type PluginKeybind<Info> = {
+  readonly all: PluginKeybindMap
+  get: (name: string) => string
+  parse: (evt: ParsedKey) => Info
+  match: (name: string, evt: ParsedKey) => boolean
+  print: (name: string) => string
+}
+
+const txt = (value: unknown) => {
+  if (typeof value !== "string") return
+  if (!value.trim()) return
+  return value
+}
+
+export function createPluginKeybind<Info>(
+  base: Base<Info>,
+  defaults: PluginKeybindMap,
+  overrides?: Record<string, unknown>,
+): PluginKeybind<Info> {
+  const all = Object.freeze(
+    Object.fromEntries(Object.entries(defaults).map(([name, value]) => [name, txt(overrides?.[name]) ?? value])),
+  ) as PluginKeybindMap
+  const get = (name: string) => all[name] ?? name
+
+  return {
+    get all() {
+      return all
+    },
+    get,
+    parse: (evt) => base.parse(evt),
+    match: (name, evt) => base.match(get(name), evt),
+    print: (name) => base.print(get(name)),
+  }
+}

packages/opencode/src/cli/cmd/tui/context/keybind.tsx

@@ -6,6 +6,7 @@ import type { ParsedKey, Renderable } from "@opentui/core"
 import { createStore } from "solid-js/store"
 import { useKeyboard, useRenderer } from "@opentui/solid"
 import { createSimpleContext } from "./helper"
+import { createPluginKeybind, type PluginKeybindMap } from "./keybind-plugin"
 import { useTuiConfig } from "./tui-config"
 
 export type KeybindKey = keyof NonNullable<TuiConfig.Info["keybinds"]> & string
@@ -80,21 +81,27 @@ export const { use: useKeybind, provider: KeybindProvider } = createSimpleContex
         }
         return Keybind.fromParsedKey(evt, store.leader)
       },
-      match(key: KeybindKey, evt: ParsedKey) {
-        const keybind = keybinds()[key]
-        if (!keybind) return false
+      match(key: string, evt: ParsedKey) {
+        const list = keybinds()[key] ?? Keybind.parse(key)
+        if (!list.length) return false
         const parsed: Keybind.Info = result.parse(evt)
-        for (const key of keybind) {
-          if (Keybind.match(key, parsed)) {
+        for (const item of list) {
+          if (Keybind.match(item, parsed)) {
             return true
           }
         }
+        return false
       },
-      print(key: KeybindKey) {
-        const first = keybinds()[key]?.at(0)
+      print(key: string) {
+        const first = keybinds()[key]?.at(0) ?? Keybind.parse(key).at(0)
         if (!first) return ""
-        const result = Keybind.toString(first)
-        return result.replace("<leader>", Keybind.toString(keybinds().leader![0]!))
+        const text = Keybind.toString(first)
+        const lead = keybinds().leader?.[0]
+        if (!lead) return text
+        return text.replace("<leader>", Keybind.toString(lead))
+      },
+      create(defaults: PluginKeybindMap, overrides?: Record<string, unknown>) {
+        return createPluginKeybind(result, defaults, overrides)
       },
     }
     return result

packages/opencode/src/cli/cmd/tui/context/route.tsx

@@ -14,7 +14,13 @@ export type SessionRoute = {
   initialPrompt?: PromptInfo
 }
 
-export type Route = HomeRoute | SessionRoute
+export type PluginRoute = {
+  type: "plugin"
+  id: string
+  data?: Record<string, unknown>
+}
+
+export type Route = HomeRoute | SessionRoute | PluginRoute
 
 export const { use: useRoute, provider: RouteProvider } = createSimpleContext({
   name: "Route",
@@ -32,7 +38,6 @@ export const { use: useRoute, provider: RouteProvider } = createSimpleContext({
         return store
       },
       navigate(route: Route) {
-        console.log("navigate", route)
         setStore(route)
       },
     }

packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -42,6 +42,7 @@ import { createStore, produce } from "solid-js/store"
 import { Global } from "@/global"
 import { Filesystem } from "@/util/filesystem"
 import { useTuiConfig } from "./tui-config"
+import { isRecord } from "@/util/record"
 
 type ThemeColors = {
   primary: RGBA
@@ -174,6 +175,56 @@ export const DEFAULT_THEMES: Record<string, ThemeJson> = {
   carbonfox,
 }
 
+type State = {
+  themes: Record<string, ThemeJson>
+  mode: "dark" | "light"
+  active: string
+  ready: boolean
+}
+
+const [store, setStore] = createStore<State>({
+  themes: DEFAULT_THEMES,
+  mode: "dark",
+  active: "opencode",
+  ready: false,
+})
+
+function mergeThemes(themes: Record<string, ThemeJson>) {
+  setStore(
+    produce((draft) => {
+      for (const [name, theme] of Object.entries(themes)) {
+        if (draft.themes[name]) continue
+        draft.themes[name] = theme
+      }
+    }),
+  )
+}
+
+export function allThemes() {
+  return store.themes
+}
+
+function isTheme(theme: unknown): theme is ThemeJson {
+  if (!isRecord(theme)) return false
+  if (!isRecord(theme.theme)) return false
+  return true
+}
+
+export function hasTheme(name: string) {
+  if (!name) return false
+  return allThemes()[name] !== undefined
+}
+
+export function addTheme(name: string, theme: unknown) {
+  if (!name) return false
+  if (!isTheme(theme)) return false
+  if (hasTheme(name)) return false
+  mergeThemes({
+    [name]: theme,
+  })
+  return true
+}
+
 function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
   const defs = theme.defs ?? {}
   function resolveColor(c: ColorValue): RGBA {
@@ -282,12 +333,14 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   init: (props: { mode: "dark" | "light" }) => {
     const config = useTuiConfig()
     const kv = useKV()
-    const [store, setStore] = createStore({
-      themes: DEFAULT_THEMES,
-      mode: kv.get("theme_mode", props.mode),
-      active: (config.theme ?? kv.get("theme", "opencode")) as string,
-      ready: false,
-    })
+
+    setStore(
+      produce((draft) => {
+        draft.mode = kv.get("theme_mode", props.mode)
+        draft.active = (config.theme ?? kv.get("theme", "opencode")) as string
+        draft.ready = false
+      }),
+    )
 
     createEffect(() => {
       const theme = config.theme
@@ -295,55 +348,49 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     function init() {
-      resolveSystemTheme()
-      getCustomThemes()
-        .then((custom) => {
-          setStore(
-            produce((draft) => {
-              Object.assign(draft.themes, custom)
-            }),
-          )
-        })
-        .catch(() => {
-          setStore("active", "opencode")
-        })
-        .finally(() => {
-          if (store.active !== "system") {
-            setStore("ready", true)
-          }
-        })
+      Promise.allSettled([
+        resolveSystemTheme(),
+        getCustomThemes()
+          .then((custom) => {
+            setStore(
+              produce((draft) => {
+                Object.assign(draft.themes, custom)
+              }),
+            )
+          })
+          .catch(() => {
+            setStore("active", "opencode")
+          }),
+      ]).finally(() => {
+        setStore("ready", true)
+      })
     }
 
     onMount(init)
 
     function resolveSystemTheme() {
-      console.log("resolveSystemTheme")
-      renderer
+      return renderer
         .getPalette({
           size: 16,
         })
         .then((colors) => {
-          console.log(colors.palette)
           if (!colors.palette[0]) {
             if (store.active === "system") {
-              setStore(
-                produce((draft) => {
-                  draft.active = "opencode"
-                  draft.ready = true
-                }),
-              )
+              setStore("active", "opencode")
             }
             return
           }
           setStore(
             produce((draft) => {
               draft.themes.system = generateSystem(colors, store.mode)
-              if (store.active === "system") {
-                draft.ready = true
-              }
             }),
           )
         })
+        .catch(() => {
+          if (store.active === "system") {
+            setStore("active", "opencode")
+          }
+        })
     }
 
     const renderer = useRenderer()
@@ -370,7 +417,10 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         return store.active
       },
       all() {
-        return store.themes
+        return allThemes()
+      },
+      has(name: string) {
+        return hasTheme(name)
       },
       syntax,
       subtleSyntax,
@@ -382,8 +432,10 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         kv.set("theme_mode", mode)
       },
       set(theme: string) {
+        if (!hasTheme(theme)) return false
         setStore("active", theme)
         kv.set("theme", theme)
+        return true
       },
       get ready() {
         return store.ready

packages/opencode/src/cli/cmd/tui/plugin.ts

@@ -0,0 +1,362 @@
+import "@opentui/solid/runtime-plugin-support"
+import {
+  type TuiPlugin as TuiPluginFn,
+  type TuiPluginInit,
+  type TuiPluginInput,
+  type TuiTheme,
+  type TuiSlotContext,
+  type TuiSlotMap,
+  type TuiSlots,
+  type SlotMode,
+} from "@opencode-ai/plugin/tui"
+import { createSlot, createSolidSlotRegistry, type JSX, type SolidPlugin } from "@opentui/solid"
+import type { CliRenderer } from "@opentui/core"
+import path from "path"
+import { fileURLToPath } from "url"
+
+import { Config } from "@/config/config"
+import { TuiConfig } from "@/config/tui"
+import { Log } from "@/util/log"
+import { isRecord } from "@/util/record"
+import { Instance } from "@/project/instance"
+import { resolvePluginTarget, uniqueModuleEntries } from "@/plugin/shared"
+import { PluginMeta } from "@/plugin/meta"
+import { addTheme, hasTheme } from "./context/theme"
+import { Global } from "@/global"
+import { Filesystem } from "@/util/filesystem"
+
+type SlotProps<K extends keyof TuiSlotMap> = {
+  name: K
+  mode?: SlotMode
+  children?: JSX.Element
+} & TuiSlotMap[K]
+
+type Slot = <K extends keyof TuiSlotMap>(props: SlotProps<K>) => JSX.Element | null
+type InitInput = Omit<TuiPluginInput<CliRenderer>, "slots">
+type Loaded = {
+  item: Config.PluginSpec
+  spec: string
+  mod: Record<string, unknown>
+  install: TuiTheme["install"]
+  init: TuiPluginInit
+}
+type Deps = {
+  wait?: Promise<void>
+}
+
+const log = Log.create({ service: "tui.plugin" })
+
+function empty<K extends keyof TuiSlotMap>(_props: SlotProps<K>) {
+  return null
+}
+
+function isTuiSlotPlugin(value: unknown): value is SolidPlugin<TuiSlotMap, TuiSlotContext> {
+  if (!isRecord(value)) return false
+  if (typeof value.id !== "string") return false
+  if (!isRecord(value.slots)) return false
+  return true
+}
+
+function getTuiSlotPlugin(value: unknown) {
+  if (isTuiSlotPlugin(value)) return value
+  if (!isRecord(value)) return
+  if (!isTuiSlotPlugin(value.slots)) return
+  return value.slots
+}
+
+function isTuiPlugin(value: unknown): value is TuiPluginFn<CliRenderer> {
+  return typeof value === "function"
+}
+
+function getTuiPlugin(value: unknown) {
+  if (!isRecord(value) || !("tui" in value)) return
+  if (!isTuiPlugin(value.tui)) return
+  return value.tui
+}
+
+function isTheme(value: unknown) {
+  if (!isRecord(value)) return false
+  if (!isRecord(value.theme)) return false
+  return true
+}
+
+function localDir(file: string) {
+  const dir = path.dirname(file)
+  if (path.basename(dir) === ".opencode") return path.join(dir, "themes")
+  return path.join(dir, ".opencode", "themes")
+}
+
+function scopeDir(pluginMeta: TuiConfig.PluginMeta) {
+  if (pluginMeta.scope === "local") return localDir(pluginMeta.source)
+  return path.join(Global.Path.config, "themes")
+}
+
+function pluginRoot(spec: string, target: string) {
+  if (spec.startsWith("file://")) return path.dirname(fileURLToPath(spec))
+  if (target.startsWith("file://")) return path.dirname(fileURLToPath(target))
+  return target
+}
+
+function resolveThemePath(root: string, file: string) {
+  if (file.startsWith("file://")) return fileURLToPath(file)
+  if (path.isAbsolute(file)) return file
+  return path.resolve(root, file)
+}
+
+function themeName(file: string) {
+  return path.basename(file, path.extname(file))
+}
+
+function getPluginMeta(config: TuiConfig.Info, item: Config.PluginSpec) {
+  const key = Config.getPluginName(item)
+  return config.plugin_meta?.[key]
+}
+
+function makeInstallFn(meta: TuiConfig.PluginMeta, root: string, spec: string): TuiTheme["install"] {
+  return async (file) => {
+    const src = resolveThemePath(root, file)
+    const theme = themeName(src)
+    if (hasTheme(theme)) return
+
+    const text = await Bun.file(src)
+      .text()
+      .catch((error) => {
+        log.warn("failed to read tui plugin theme", { path: spec, theme: src, error })
+        return
+      })
+    if (text === undefined) return
+
+    const fail = Symbol()
+    const data = await Promise.resolve(text)
+      .then((x) => JSON.parse(x) as unknown)
+      .catch((error) => {
+        log.warn("failed to parse tui plugin theme", { path: spec, theme: src, error })
+        return fail
+      })
+    if (data === fail) return
+
+    if (!isTheme(data)) {
+      log.warn("invalid tui plugin theme", { path: spec, theme: src })
+      return
+    }
+
+    const dest = path.join(scopeDir(meta), `${theme}.json`)
+    if (!(await Filesystem.exists(dest))) {
+      await Filesystem.write(dest, text).catch((error) => {
+        log.warn("failed to persist tui plugin theme", { path: spec, theme: src, dest, error })
+      })
+    }
+
+    addTheme(theme, data)
+  }
+}
+
+function waitDeps(state: Deps) {
+  state.wait ??= TuiConfig.waitForDependencies().catch((error) => {
+    log.warn("failed waiting for tui plugin dependencies", { error })
+  })
+  return state.wait
+}
+
+async function prepPlugin(config: TuiConfig.Info, item: Config.PluginSpec, retry = false): Promise<Loaded | undefined> {
+  const spec = Config.pluginSpecifier(item)
+  log.info("loading tui plugin", { path: spec, retry })
+  const target = await resolvePluginTarget(spec).catch((error) => {
+    log.error("failed to resolve tui plugin", { path: spec, retry, error })
+    return
+  })
+  if (!target) return
+
+  const meta = await PluginMeta.touch(spec, target).catch((error) => {
+    log.warn("failed to track tui plugin", { path: spec, retry, error })
+  })
+  if (meta && meta.state !== "same") {
+    log.info("tui plugin metadata updated", {
+      path: spec,
+      retry,
+      state: meta.state,
+      source: meta.entry.source,
+      version: meta.entry.version,
+      modified: meta.entry.modified,
+    })
+  }
+
+  const now = Date.now()
+  const init: TuiPluginInit = meta
+    ? {
+        state: meta.state,
+        entry: meta.entry,
+      }
+    : {
+        state: "first",
+        entry: {
+          name: spec,
+          source: spec.startsWith("file://") ? "file" : "npm",
+          spec,
+          target,
+          first_time: now,
+          last_time: now,
+          time_changed: now,
+          load_count: 1,
+          fingerprint: target,
+        },
+      }
+
+  const root = pluginRoot(spec, target)
+  const pluginMeta = getPluginMeta(config, item)
+  if (!pluginMeta) {
+    log.warn("missing tui plugin metadata", {
+      path: spec,
+      retry,
+      name: Config.getPluginName(item),
+    })
+    return
+  }
+
+  const install = makeInstallFn(pluginMeta, root, spec)
+  const mod = await import(target).catch((error) => {
+    log.error("failed to load tui plugin", { path: spec, retry, error })
+    return
+  })
+  if (!mod) return
+
+  return {
+    item,
+    spec,
+    mod,
+    install,
+    init,
+  }
+}
+
+async function applyPlugin(input: TuiPluginInput<CliRenderer>, load: Loaded) {
+  const api = {
+    command: input.api.command,
+    route: input.api.route,
+    ui: input.api.ui,
+    keybind: input.api.keybind,
+    theme: Object.create(input.api.theme, {
+      install: {
+        value: load.install,
+        configurable: true,
+        enumerable: true,
+      },
+    }),
+  } satisfies TuiPluginInput<CliRenderer>["api"]
+  const opts = Config.pluginOptions(load.item) ?? null
+
+  for (const [name, value] of uniqueModuleEntries(load.mod)) {
+    if (!value || typeof value !== "object") {
+      log.warn("ignoring non-object tui plugin export", {
+        path: load.spec,
+        name,
+        type: value === null ? "null" : typeof value,
+      })
+      continue
+    }
+
+    const slotPlugin = getTuiSlotPlugin(value)
+    if (slotPlugin) input.slots.register(slotPlugin)
+
+    const tuiPlugin = getTuiPlugin(value)
+    if (!tuiPlugin) continue
+    await tuiPlugin(
+      {
+        ...input,
+        api,
+      },
+      opts,
+      load.init,
+    )
+  }
+}
+
+export namespace TuiPlugin {
+  let dir = ""
+  let loaded: Promise<void> | undefined
+  let view: Slot = empty
+
+  export const Slot: Slot = (props) => view(props)
+
+  function setupSlots(input: InitInput): TuiSlots {
+    const reg = createSolidSlotRegistry<TuiSlotMap, TuiSlotContext>(
+      input.renderer,
+      {
+        theme: input.api.theme,
+      },
+      {
+        onPluginError(event) {
+          console.error("[tui.slot] plugin error", {
+            plugin: event.pluginId,
+            slot: event.slot,
+            phase: event.phase,
+            source: event.source,
+            message: event.error.message,
+          })
+        },
+      },
+    )
+
+    const slot = createSlot<TuiSlotMap, TuiSlotContext>(reg)
+    view = (props) => slot(props)
+    return {
+      register(pluginSlot) {
+        if (!isTuiSlotPlugin(pluginSlot)) return () => {}
+        return reg.register(pluginSlot)
+      },
+    }
+  }
+
+  export async function init(input: InitInput) {
+    const cwd = process.cwd()
+    if (loaded && dir === cwd) return loaded
+    dir = cwd
+    loaded = load({
+      ...input,
+      slots: setupSlots(input),
+    })
+    return loaded
+  }
+
+  async function load(input: TuiPluginInput<CliRenderer>) {
+    const dir = process.cwd()
+
+    await Instance.provide({
+      directory: dir,
+      fn: async () => {
+        const config = await TuiConfig.get()
+        const plugins = config.plugin ?? []
+        const deps: Deps = {}
+
+        try {
+          const loaded = await Promise.all(plugins.map((item) => prepPlugin(config, item)))
+
+          for (let i = 0; i < plugins.length; i++) {
+            let entry = loaded[i]
+            if (!entry) {
+              const item = plugins[i]
+              if (!item) continue
+              const spec = Config.pluginSpecifier(item)
+              if (!spec.startsWith("file://")) continue
+              await waitDeps(deps)
+              entry = await prepPlugin(config, item, true)
+            }
+            if (!entry) continue
+
+            // Keep plugin execution sequential for deterministic side effects:
+            // command registration order affects keybind/command precedence,
+            // route registration is last-wins when ids collide,
+            // and hook chains rely on stable plugin ordering.
+            await applyPlugin(input, entry)
+          }
+        } finally {
+          await PluginMeta.persist().catch((error) => {
+            log.warn("failed to persist tui plugin metadata", { error })
+          })
+        }
+      },
+    }).catch((error) => {
+      log.error("failed to load tui plugins", { directory: dir, error })
+    })
+  }
+}

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -15,6 +15,7 @@ import { Installation } from "@/installation"
 import { useKV } from "../context/kv"
 import { useCommandDialog } from "../component/dialog-command"
 import { useLocal } from "../context/local"
+import { TuiPlugin } from "../plugin"
 
 // TODO: what is the best way to do this?
 let once = false
@@ -57,8 +58,8 @@ export function Home() {
   ])
 
   const Hint = (
-    <Show when={connectedMcpCount() > 0}>
-      <box flexShrink={0} flexDirection="row" gap={1}>
+    <box flexShrink={0} flexDirection="row" gap={1}>
+      <Show when={connectedMcpCount() > 0}>
         <text fg={theme.text}>
           <Switch>
             <Match when={mcpError()}>
@@ -71,8 +72,8 @@ export function Home() {
             </Match>
           </Switch>
         </text>
-      </box>
-    </Show>
+      </Show>
+    </box>
   )
 
   let prompt: PromptRef
@@ -111,7 +112,9 @@ export function Home() {
         <box flexGrow={1} minHeight={0} />
         <box height={4} minHeight={0} flexShrink={1} />
         <box flexShrink={0}>
-          <Logo />
+          <TuiPlugin.Slot name="home_logo" mode="replace">
+            <Logo />
+          </TuiPlugin.Slot>
         </box>
         <box height={1} minHeight={0} flexShrink={1} />
         <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
@@ -124,11 +127,25 @@ export function Home() {
             workspaceID={route.workspaceID}
           />
         </box>
-        <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
-          <Show when={showTips()}>
-            <Tips />
-          </Show>
-        </box>
+        <TuiPlugin.Slot
+          name="home_tips"
+          mode="replace"
+          show_tips={showTips()}
+          tips_hidden={tipsHidden()}
+          first_time_user={isFirstTimeUser()}
+        >
+          <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
+            <Show when={showTips()}>
+              <Tips />
+            </Show>
+          </box>
+        </TuiPlugin.Slot>
+        <TuiPlugin.Slot
+          name="home_below_tips"
+          show_tips={showTips()}
+          tips_hidden={tipsHidden()}
+          first_time_user={isFirstTimeUser()}
+        />
         <box flexGrow={1} minHeight={0} />
         <Toast />
       </box>

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -70,7 +70,6 @@ import { Toast, useToast } from "../../ui/toast"
 import { useKV } from "../../context/kv.tsx"
 import { Editor } from "../../util/editor"
 import stripAnsi from "strip-ansi"
-import { Footer } from "./footer.tsx"
 import { usePromptRef } from "../../context/prompt"
 import { useExit } from "../../context/exit"
 import { Filesystem } from "@/util/filesystem"

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -2,15 +2,17 @@ import { useSync } from "@tui/context/sync"
 import { createMemo, For, Show, Switch, Match } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useTheme } from "../../context/theme"
-import { Locale } from "@/util/locale"
-import path from "path"
 import type { AssistantMessage } from "@opencode-ai/sdk/v2"
-import { Global } from "@/global"
 import { Installation } from "@/installation"
-import { useKeybind } from "../../context/keybind"
 import { useDirectory } from "../../context/directory"
 import { useKV } from "../../context/kv"
 import { TodoItem } from "../../component/todo-item"
+import { TuiPlugin } from "../../plugin"
+
+const money = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+})
 
 export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
   const sync = useSync()
@@ -27,36 +29,40 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     lsp: true,
   })
 
-  // Sort MCP servers alphabetically for consistent display order
-  const mcpEntries = createMemo(() => Object.entries(sync.data.mcp).sort(([a], [b]) => a.localeCompare(b)))
+  const mcp = createMemo(() =>
+    Object.entries(sync.data.mcp)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([name, item]) => ({
+        name,
+        status: item.status,
+        error: item.status === "failed" ? item.error : undefined,
+      })),
+  )
 
-  // Count connected and error MCP servers for collapsed header display
-  const connectedMcpCount = createMemo(() => mcpEntries().filter(([_, item]) => item.status === "connected").length)
+  const lsp = createMemo(() => sync.data.lsp.map((item) => ({ id: item.id, root: item.root, status: item.status })))
+
+  const connectedMcpCount = createMemo(() => mcp().filter((item) => item.status === "connected").length)
   const errorMcpCount = createMemo(
     () =>
-      mcpEntries().filter(
-        ([_, item]) =>
+      mcp().filter(
+        (item) =>
           item.status === "failed" || item.status === "needs_auth" || item.status === "needs_client_registration",
       ).length,
   )
 
-  const cost = createMemo(() => {
-    const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(total)
-  })
+  const cost = createMemo(() => messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0))
 
   const context = createMemo(() => {
-    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
-    if (!last) return
-    const total =
+    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as
+      | AssistantMessage
+      | undefined
+    if (!last) return { tokens: 0, percentage: null as number | null }
+    const tokens =
       last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
     const model = sync.data.provider.find((x) => x.id === last.providerID)?.models[last.modelID]
     return {
-      tokens: total.toLocaleString(),
-      percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
+      tokens,
+      percentage: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : null,
     }
   })
 
@@ -67,6 +73,16 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     sync.data.provider.some((x) => x.id !== "opencode" || Object.values(x.models).some((y) => y.cost?.input !== 0)),
   )
   const gettingStartedDismissed = createMemo(() => kv.get("dismissed_getting_started", false))
+  const showGettingStarted = createMemo(() => !hasProviders() && !gettingStartedDismissed())
+  const dir = createMemo(() => {
+    const value = directory()
+    const parts = value.split("/")
+    return {
+      value,
+      parent: parts.slice(0, -1).join("/"),
+      name: parts.at(-1) ?? "",
+    }
+  })
 
   return (
     <Show when={session()}>
@@ -90,163 +106,200 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
           }}
         >
           <box flexShrink={0} gap={1} paddingRight={1}>
-            <box paddingRight={1}>
-              <text fg={theme.text}>
-                <b>{session().title}</b>
-              </text>
-              <Show when={session().share?.url}>
-                <text fg={theme.textMuted}>{session().share!.url}</text>
+            <TuiPlugin.Slot name="sidebar_top" session_id={props.sessionID} />
+            <TuiPlugin.Slot
+              name="sidebar_title"
+              mode="replace"
+              session_id={props.sessionID}
+              title={session().title}
+              share_url={session().share?.url}
+            >
+              <box paddingRight={1}>
+                <text fg={theme.text}>
+                  <b>{session().title}</b>
+                </text>
+                <Show when={session().share?.url}>
+                  <text fg={theme.textMuted}>{session().share!.url}</text>
+                </Show>
+              </box>
+            </TuiPlugin.Slot>
+            <TuiPlugin.Slot
+              name="sidebar_context"
+              mode="replace"
+              session_id={props.sessionID}
+              tokens={context().tokens}
+              percentage={context().percentage}
+              cost={cost()}
+            >
+              <box>
+                <text fg={theme.text}>
+                  <b>Context</b>
+                </text>
+                <text fg={theme.textMuted}>{context().tokens.toLocaleString()} tokens</text>
+                <text fg={theme.textMuted}>{context().percentage ?? 0}% used</text>
+                <text fg={theme.textMuted}>{money.format(cost())} spent</text>
+              </box>
+            </TuiPlugin.Slot>
+            <TuiPlugin.Slot
+              name="sidebar_mcp"
+              mode="replace"
+              session_id={props.sessionID}
+              items={mcp()}
+              connected={connectedMcpCount()}
+              errors={errorMcpCount()}
+            >
+              <Show when={mcp().length > 0}>
+                <box>
+                  <box
+                    flexDirection="row"
+                    gap={1}
+                    onMouseDown={() => mcp().length > 2 && setExpanded("mcp", !expanded.mcp)}
+                  >
+                    <Show when={mcp().length > 2}>
+                      <text fg={theme.text}>{expanded.mcp ? "▼" : "▶"}</text>
+                    </Show>
+                    <text fg={theme.text}>
+                      <b>MCP</b>
+                      <Show when={!expanded.mcp}>
+                        <span style={{ fg: theme.textMuted }}>
+                          {" "}
+                          ({connectedMcpCount()} active
+                          {errorMcpCount() > 0 ? `, ${errorMcpCount()} error${errorMcpCount() > 1 ? "s" : ""}` : ""})
+                        </span>
+                      </Show>
+                    </text>
+                  </box>
+                  <Show when={mcp().length <= 2 || expanded.mcp}>
+                    <For each={mcp()}>
+                      {(item) => (
+                        <box flexDirection="row" gap={1}>
+                          <text
+                            flexShrink={0}
+                            style={{
+                              fg: (
+                                {
+                                  connected: theme.success,
+                                  failed: theme.error,
+                                  disabled: theme.textMuted,
+                                  needs_auth: theme.warning,
+                                  needs_client_registration: theme.error,
+                                } as Record<string, typeof theme.success>
+                              )[item.status],
+                            }}
+                          >
+                            •
+                          </text>
+                          <text fg={theme.text} wrapMode="word">
+                            {item.name}{" "}
+                            <span style={{ fg: theme.textMuted }}>
+                              <Switch fallback={item.status}>
+                                <Match when={item.status === "connected"}>Connected</Match>
+                                <Match when={item.status === "failed"}>
+                                  <i>{item.error}</i>
+                                </Match>
+                                <Match when={item.status === "disabled"}>Disabled</Match>
+                                <Match when={item.status === "needs_auth"}>Needs auth</Match>
+                                <Match when={item.status === "needs_client_registration"}>Needs client ID</Match>
+                              </Switch>
+                            </span>
+                          </text>
+                        </box>
+                      )}
+                    </For>
+                  </Show>
+                </box>
               </Show>
-            </box>
-            <box>
-              <text fg={theme.text}>
-                <b>Context</b>
-              </text>
-              <text fg={theme.textMuted}>{context()?.tokens ?? 0} tokens</text>
-              <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text>
-              <text fg={theme.textMuted}>{cost()} spent</text>
-            </box>
-            <Show when={mcpEntries().length > 0}>
+            </TuiPlugin.Slot>
+            <TuiPlugin.Slot
+              name="sidebar_lsp"
+              mode="replace"
+              session_id={props.sessionID}
+              items={lsp()}
+              disabled={sync.data.config.lsp === false}
+            >
               <box>
                 <box
                   flexDirection="row"
                   gap={1}
-                  onMouseDown={() => mcpEntries().length > 2 && setExpanded("mcp", !expanded.mcp)}
+                  onMouseDown={() => lsp().length > 2 && setExpanded("lsp", !expanded.lsp)}
                 >
-                  <Show when={mcpEntries().length > 2}>
-                    <text fg={theme.text}>{expanded.mcp ? "▼" : "▶"}</text>
+                  <Show when={lsp().length > 2}>
+                    <text fg={theme.text}>{expanded.lsp ? "▼" : "▶"}</text>
                   </Show>
                   <text fg={theme.text}>
-                    <b>MCP</b>
-                    <Show when={!expanded.mcp}>
-                      <span style={{ fg: theme.textMuted }}>
-                        {" "}
-                        ({connectedMcpCount()} active
-                        {errorMcpCount() > 0 ? `, ${errorMcpCount()} error${errorMcpCount() > 1 ? "s" : ""}` : ""})
-                      </span>
-                    </Show>
+                    <b>LSP</b>
                   </text>
                 </box>
-                <Show when={mcpEntries().length <= 2 || expanded.mcp}>
-                  <For each={mcpEntries()}>
-                    {([key, item]) => (
+                <Show when={lsp().length <= 2 || expanded.lsp}>
+                  <Show when={lsp().length === 0}>
+                    <text fg={theme.textMuted}>
+                      {sync.data.config.lsp === false
+                        ? "LSPs have been disabled in settings"
+                        : "LSPs will activate as files are read"}
+                    </text>
+                  </Show>
+                  <For each={lsp()}>
+                    {(item) => (
                       <box flexDirection="row" gap={1}>
                         <text
                           flexShrink={0}
                           style={{
-                            fg: (
-                              {
-                                connected: theme.success,
-                                failed: theme.error,
-                                disabled: theme.textMuted,
-                                needs_auth: theme.warning,
-                                needs_client_registration: theme.error,
-                              } as Record<string, typeof theme.success>
-                            )[item.status],
+                            fg: {
+                              connected: theme.success,
+                              error: theme.error,
+                            }[item.status],
                           }}
                         >
                           •
                         </text>
-                        <text fg={theme.text} wrapMode="word">
-                          {key}{" "}
-                          <span style={{ fg: theme.textMuted }}>
-                            <Switch fallback={item.status}>
-                              <Match when={item.status === "connected"}>Connected</Match>
-                              <Match when={item.status === "failed" && item}>{(val) => <i>{val().error}</i>}</Match>
-                              <Match when={item.status === "disabled"}>Disabled</Match>
-                              <Match when={(item.status as string) === "needs_auth"}>Needs auth</Match>
-                              <Match when={(item.status as string) === "needs_client_registration"}>
-                                Needs client ID
-                              </Match>
-                            </Switch>
-                          </span>
+                        <text fg={theme.textMuted}>
+                          {item.id} {item.root}
                         </text>
                       </box>
                     )}
                   </For>
                 </Show>
               </box>
-            </Show>
-            <box>
-              <box
-                flexDirection="row"
-                gap={1}
-                onMouseDown={() => sync.data.lsp.length > 2 && setExpanded("lsp", !expanded.lsp)}
-              >
-                <Show when={sync.data.lsp.length > 2}>
-                  <text fg={theme.text}>{expanded.lsp ? "▼" : "▶"}</text>
-                </Show>
-                <text fg={theme.text}>
-                  <b>LSP</b>
-                </text>
-              </box>
-              <Show when={sync.data.lsp.length <= 2 || expanded.lsp}>
-                <Show when={sync.data.lsp.length === 0}>
-                  <text fg={theme.textMuted}>
-                    {sync.data.config.lsp === false
-                      ? "LSPs have been disabled in settings"
-                      : "LSPs will activate as files are read"}
-                  </text>
-                </Show>
-                <For each={sync.data.lsp}>
-                  {(item) => (
-                    <box flexDirection="row" gap={1}>
-                      <text
-                        flexShrink={0}
-                        style={{
-                          fg: {
-                            connected: theme.success,
-                            error: theme.error,
-                          }[item.status],
-                        }}
-                      >
-                        •
-                      </text>
-                      <text fg={theme.textMuted}>
-                        {item.id} {item.root}
-                      </text>
-                    </box>
-                  )}
-                </For>
+            </TuiPlugin.Slot>
+            <TuiPlugin.Slot name="sidebar_todo" mode="replace" session_id={props.sessionID} items={todo()}>
+              <Show when={todo().length > 0 && todo().some((item) => item.status !== "completed")}>
+                <box>
+                  <box
+                    flexDirection="row"
+                    gap={1}
+                    onMouseDown={() => todo().length > 2 && setExpanded("todo", !expanded.todo)}
+                  >
+                    <Show when={todo().length > 2}>
+                      <text fg={theme.text}>{expanded.todo ? "▼" : "▶"}</text>
+                    </Show>
+                    <text fg={theme.text}>
+                      <b>Todo</b>
+                    </text>
+                  </box>
+                  <Show when={todo().length <= 2 || expanded.todo}>
+                    <For each={todo()}>{(item) => <TodoItem status={item.status} content={item.content} />}</For>
+                  </Show>
+                </box>
               </Show>
-            </box>
-            <Show when={todo().length > 0 && todo().some((t) => t.status !== "completed")}>
-              <box>
-                <box
-                  flexDirection="row"
-                  gap={1}
-                  onMouseDown={() => todo().length > 2 && setExpanded("todo", !expanded.todo)}
-                >
-                  <Show when={todo().length > 2}>
-                    <text fg={theme.text}>{expanded.todo ? "▼" : "▶"}</text>
-                  </Show>
-                  <text fg={theme.text}>
-                    <b>Todo</b>
-                  </text>
-                </box>
-                <Show when={todo().length <= 2 || expanded.todo}>
-                  <For each={todo()}>{(todo) => <TodoItem status={todo.status} content={todo.content} />}</For>
-                </Show>
-              </box>
-            </Show>
-            <Show when={diff().length > 0}>
-              <box>
-                <box
-                  flexDirection="row"
-                  gap={1}
-                  onMouseDown={() => diff().length > 2 && setExpanded("diff", !expanded.diff)}
-                >
-                  <Show when={diff().length > 2}>
-                    <text fg={theme.text}>{expanded.diff ? "▼" : "▶"}</text>
-                  </Show>
-                  <text fg={theme.text}>
-                    <b>Modified Files</b>
-                  </text>
-                </box>
-                <Show when={diff().length <= 2 || expanded.diff}>
-                  <For each={diff() || []}>
-                    {(item) => {
-                      return (
+            </TuiPlugin.Slot>
+            <TuiPlugin.Slot name="sidebar_files" mode="replace" session_id={props.sessionID} items={diff()}>
+              <Show when={diff().length > 0}>
+                <box>
+                  <box
+                    flexDirection="row"
+                    gap={1}
+                    onMouseDown={() => diff().length > 2 && setExpanded("diff", !expanded.diff)}
+                  >
+                    <Show when={diff().length > 2}>
+                      <text fg={theme.text}>{expanded.diff ? "▼" : "▶"}</text>
+                    </Show>
+                    <text fg={theme.text}>
+                      <b>Modified Files</b>
+                    </text>
+                  </box>
+                  <Show when={diff().length <= 2 || expanded.diff}>
+                    <For each={diff()}>
+                      {(item) => (
                         <box flexDirection="row" gap={1} justifyContent="space-between">
                           <text fg={theme.textMuted} wrapMode="none">
                             {item.file}
@@ -260,60 +313,96 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
                             </Show>
                           </box>
                         </box>
-                      )
-                    }}
-                  </For>
-                </Show>
-              </box>
-            </Show>
+                      )}
+                    </For>
+                  </Show>
+                </box>
+              </Show>
+            </TuiPlugin.Slot>
           </box>
         </scrollbox>
 
         <box flexShrink={0} gap={1} paddingTop={1}>
-          <Show when={!hasProviders() && !gettingStartedDismissed()}>
-            <box
-              backgroundColor={theme.backgroundElement}
-              paddingTop={1}
-              paddingBottom={1}
-              paddingLeft={2}
-              paddingRight={2}
-              flexDirection="row"
-              gap={1}
-            >
-              <text flexShrink={0} fg={theme.text}>
-                ⬖
-              </text>
-              <box flexGrow={1} gap={1}>
-                <box flexDirection="row" justifyContent="space-between">
-                  <text fg={theme.text}>
-                    <b>Getting started</b>
-                  </text>
-                  <text fg={theme.textMuted} onMouseDown={() => kv.set("dismissed_getting_started", true)}>
-                    ✕
-                  </text>
-                </box>
-                <text fg={theme.textMuted}>OpenCode includes free models so you can start immediately.</text>
-                <text fg={theme.textMuted}>
-                  Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
+          <TuiPlugin.Slot
+            name="sidebar_getting_started"
+            mode="replace"
+            session_id={props.sessionID}
+            show_getting_started={showGettingStarted()}
+            has_providers={hasProviders()}
+            dismissed={gettingStartedDismissed()}
+          >
+            <Show when={showGettingStarted()}>
+              <box
+                backgroundColor={theme.backgroundElement}
+                paddingTop={1}
+                paddingBottom={1}
+                paddingLeft={2}
+                paddingRight={2}
+                flexDirection="row"
+                gap={1}
+              >
+                <text flexShrink={0} fg={theme.text}>
+                  ⬖
                 </text>
-                <box flexDirection="row" gap={1} justifyContent="space-between">
-                  <text fg={theme.text}>Connect provider</text>
-                  <text fg={theme.textMuted}>/connect</text>
+                <box flexGrow={1} gap={1}>
+                  <box flexDirection="row" justifyContent="space-between">
+                    <text fg={theme.text}>
+                      <b>Getting started</b>
+                    </text>
+                    <text fg={theme.textMuted} onMouseDown={() => kv.set("dismissed_getting_started", true)}>
+                      ✕
+                    </text>
+                  </box>
+                  <text fg={theme.textMuted}>OpenCode includes free models so you can start immediately.</text>
+                  <text fg={theme.textMuted}>
+                    Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
+                  </text>
+                  <box flexDirection="row" gap={1} justifyContent="space-between">
+                    <text fg={theme.text}>Connect provider</text>
+                    <text fg={theme.textMuted}>/connect</text>
+                  </box>
                 </box>
               </box>
-            </box>
-          </Show>
-          <text>
-            <span style={{ fg: theme.textMuted }}>{directory().split("/").slice(0, -1).join("/")}/</span>
-            <span style={{ fg: theme.text }}>{directory().split("/").at(-1)}</span>
-          </text>
-          <text fg={theme.textMuted}>
-            <span style={{ fg: theme.success }}>•</span> <b>Open</b>
-            <span style={{ fg: theme.text }}>
-              <b>Code</b>
-            </span>{" "}
-            <span>{Installation.VERSION}</span>
-          </text>
+            </Show>
+          </TuiPlugin.Slot>
+          <TuiPlugin.Slot
+            name="sidebar_directory"
+            mode="replace"
+            session_id={props.sessionID}
+            directory={dir().value}
+            directory_parent={dir().parent}
+            directory_name={dir().name}
+          >
+            <text>
+              <span style={{ fg: theme.textMuted }}>{dir().parent}/</span>
+              <span style={{ fg: theme.text }}>{dir().name}</span>
+            </text>
+          </TuiPlugin.Slot>
+          <TuiPlugin.Slot
+            name="sidebar_version"
+            mode="replace"
+            session_id={props.sessionID}
+            version={Installation.VERSION}
+          >
+            <text fg={theme.textMuted}>
+              <span style={{ fg: theme.success }}>•</span> <b>Open</b>
+              <span style={{ fg: theme.text }}>
+                <b>Code</b>
+              </span>{" "}
+              <span>{Installation.VERSION}</span>
+            </text>
+          </TuiPlugin.Slot>
+          <TuiPlugin.Slot
+            name="sidebar_bottom"
+            session_id={props.sessionID}
+            directory={dir().value}
+            directory_parent={dir().parent}
+            directory_name={dir().name}
+            version={Installation.VERSION}
+            show_getting_started={showGettingStarted()}
+            has_providers={hasProviders()}
+            dismissed={gettingStartedDismissed()}
+          />
         </box>
       </box>
     </Show>

packages/opencode/src/cli/cmd/tui/ui/dialog.tsx

@@ -35,6 +35,7 @@ export function Dialog(
       height={dimensions().height}
       alignItems="center"
       position="absolute"
+      zIndex={3000}
       paddingTop={dimensions().height / 4}
       left={0}
       top={0}
@@ -72,6 +73,9 @@ function init() {
     if (evt.defaultPrevented) return
     if ((evt.name === "escape" || (evt.ctrl && evt.name === "c")) && renderer.getSelection()?.getSelectedText()) return
     if (evt.name === "escape" || (evt.ctrl && evt.name === "c")) {
+      if (renderer.getSelection()) {
+        renderer.clearSelection()
+      }
       const current = store.stack.at(-1)!
       current.onClose?.()
       setStore("stack", store.stack.slice(0, -1))
@@ -151,6 +155,7 @@ export function DialogProvider(props: ParentProps) {
       {props.children}
       <box
         position="absolute"
+        zIndex={3000}
         onMouseDown={(evt) => {
           if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
           if (evt.button !== MouseButton.RIGHT) return

packages/opencode/src/config/config.ts

@@ -1,6 +1,6 @@
 import { Log } from "../util/log"
 import path from "path"
-import { pathToFileURL, fileURLToPath } from "url"
+import { pathToFileURL } from "url"
 import { createRequire } from "module"
 import os from "os"
 import z from "zod"
@@ -34,6 +34,7 @@ import { PackageRegistry } from "@/bun/registry"
 import { proxied } from "@/util/proxied"
 import { iife } from "@/util/iife"
 import { Account } from "@/account"
+import { isRecord } from "@/util/record"
 import { ConfigPaths } from "./paths"
 import { Filesystem } from "@/util/filesystem"
 import { Process } from "@/util/process"
@@ -41,6 +42,11 @@ import { Lock } from "@/util/lock"
 
 export namespace Config {
   const ModelId = z.string().meta({ $ref: "https://models.dev/model-schema.json#/$defs/Model" })
+  const PluginOptions = z.record(z.string(), z.unknown())
+  export const PluginSpec = z.union([z.string(), z.tuple([z.string(), PluginOptions])])
+
+  export type PluginOptions = z.infer<typeof PluginOptions>
+  export type PluginSpec = z.infer<typeof PluginSpec>
 
   const log = Log.create({ service: "config" })
 
@@ -355,8 +361,9 @@ export namespace Config {
 
     const targetVersion = Installation.isLocal() ? "latest" : Installation.VERSION
     if (targetVersion === "latest") {
-      const isOutdated = await PackageRegistry.isOutdated("@opencode-ai/plugin", depVersion, dir)
-      if (!isOutdated) return false
+      if (!PackageRegistry.online()) return false
+      const stale = await PackageRegistry.isOutdated("@opencode-ai/plugin", depVersion, dir)
+      if (!stale) return false
       log.info("Cached version is outdated, proceeding with install", {
         pkg: "@opencode-ai/plugin",
         cachedVersion: depVersion,
@@ -495,7 +502,7 @@ export namespace Config {
   }
 
   async function loadPlugin(dir: string) {
-    const plugins: string[] = []
+    const plugins: PluginSpec[] = []
 
     for (const item of await Glob.scan("{plugin,plugins}/*.{ts,js}", {
       cwd: dir,
@@ -508,6 +515,32 @@ export namespace Config {
     return plugins
   }
 
+  export function pluginSpecifier(plugin: PluginSpec): string {
+    return Array.isArray(plugin) ? plugin[0] : plugin
+  }
+
+  export function pluginOptions(plugin: PluginSpec): PluginOptions | undefined {
+    return Array.isArray(plugin) ? plugin[1] : undefined
+  }
+
+  export function resolvePluginSpec(plugin: PluginSpec, configFilepath: string): PluginSpec {
+    const spec = pluginSpecifier(plugin)
+    try {
+      const resolved = import.meta.resolve!(spec, configFilepath)
+      if (Array.isArray(plugin)) return [resolved, plugin[1]]
+      return resolved
+    } catch {
+      try {
+        const require = createRequire(configFilepath)
+        const resolved = pathToFileURL(require.resolve(spec)).href
+        if (Array.isArray(plugin)) return [resolved, plugin[1]]
+        return resolved
+      } catch {
+        return plugin
+      }
+    }
+  }
+
   /**
    * Extracts a canonical plugin name from a plugin specifier.
    * - For file:// URLs: extracts filename without extension
@@ -518,15 +551,16 @@ export namespace Config {
    * getPluginName("oh-my-opencode@2.4.3") // "oh-my-opencode"
    * getPluginName("@scope/pkg@1.0.0") // "@scope/pkg"
    */
-  export function getPluginName(plugin: string): string {
-    if (plugin.startsWith("file://")) {
-      return path.parse(new URL(plugin).pathname).name
+  export function getPluginName(plugin: PluginSpec): string {
+    const spec = pluginSpecifier(plugin)
+    if (spec.startsWith("file://")) {
+      return path.parse(new URL(spec).pathname).name
     }
-    const lastAt = plugin.lastIndexOf("@")
+    const lastAt = spec.lastIndexOf("@")
     if (lastAt > 0) {
-      return plugin.substring(0, lastAt)
+      return spec.substring(0, lastAt)
     }
-    return plugin
+    return spec
   }
 
   /**
@@ -540,14 +574,14 @@ export namespace Config {
    * Since plugins are added in low-to-high priority order,
    * we reverse, deduplicate (keeping first occurrence), then restore order.
    */
-  export function deduplicatePlugins(plugins: string[]): string[] {
+  export function deduplicatePlugins(plugins: PluginSpec[]): PluginSpec[] {
     // seenNames: canonical plugin names for duplicate detection
     // e.g., "oh-my-opencode", "@scope/pkg"
     const seenNames = new Set<string>()
 
     // uniqueSpecifiers: full plugin specifiers to return
-    // e.g., "oh-my-opencode@2.4.3", "file:///path/to/plugin.js"
-    const uniqueSpecifiers: string[] = []
+    // e.g., "oh-my-opencode@2.4.3", ["file:///path/to/plugin.js", { ... }]
+    const uniqueSpecifiers: PluginSpec[] = []
 
     for (const specifier of plugins.toReversed()) {
       const name = getPluginName(specifier)
@@ -1051,13 +1085,13 @@ export namespace Config {
           ignore: z.array(z.string()).optional(),
         })
         .optional(),
-      plugin: z.string().array().optional(),
       snapshot: z
         .boolean()
         .optional()
         .describe(
           "Enable or disable snapshot tracking. When false, filesystem snapshots are not recorded and undoing or reverting will not undo/redo file changes. Defaults to true.",
         ),
+      plugin: PluginSpec.array().optional(),
       share: z
         .enum(["manual", "auto", "disabled"])
         .optional()
@@ -1304,19 +1338,7 @@ export namespace Config {
       const data = parsed.data
       if (data.plugin && isFile) {
         for (let i = 0; i < data.plugin.length; i++) {
-          const plugin = data.plugin[i]
-          try {
-            data.plugin[i] = import.meta.resolve!(plugin, options.path)
-          } catch (e) {
-            try {
-              // import.meta.resolve sometimes fails with newly created node_modules
-              const require = createRequire(options.path)
-              const resolvedPath = require.resolve(plugin)
-              data.plugin[i] = pathToFileURL(resolvedPath).href
-            } catch {
-              // Ignore, plugin might be a generic string identifier like "mcp-server"
-            }
-          }
+          data.plugin[i] = resolvePluginSpec(data.plugin[i], options.path)
         }
       }
       return data
@@ -1363,10 +1385,6 @@ export namespace Config {
     return candidates[0]
   }
 
-  function isRecord(value: unknown): value is Record<string, unknown> {
-    return !!value && typeof value === "object" && !Array.isArray(value)
-  }
-
   function patchJsonc(input: string, patch: unknown, path: string[] = []): string {
     if (!isRecord(patch)) {
       const edits = modify(input, path, patch, {
@@ -1460,5 +1478,3 @@ export namespace Config {
     return state().then((x) => x.directories)
   }
 }
-Filesystem.write
-Filesystem.write

packages/opencode/src/config/tui-schema.ts

@@ -29,6 +29,7 @@ export const TuiInfo = z
     $schema: z.string().optional(),
     theme: z.string().optional(),
     keybinds: KeybindOverride.optional(),
+    plugin: Config.PluginSpec.array().optional(),
   })
   .extend(TuiOptions.shape)
   .strict()

packages/opencode/src/config/tui.ts

@@ -8,6 +8,7 @@ import { TuiInfo } from "./tui-schema"
 import { Instance } from "@/project/instance"
 import { Flag } from "@/flag/flag"
 import { Log } from "@/util/log"
+import { isRecord } from "@/util/record"
 import { Global } from "@/global"
 
 export namespace TuiConfig {
@@ -15,16 +16,94 @@ export namespace TuiConfig {
 
   export const Info = TuiInfo
 
-  export type Info = z.output<typeof Info>
+  export type PluginMeta = {
+    scope: "global" | "local"
+    source: string
+  }
+
+  type PluginEntry = {
+    item: Config.PluginSpec
+    meta: PluginMeta
+  }
+
+  type Acc = {
+    result: Info
+    entries: PluginEntry[]
+  }
+
+  export type Info = z.output<typeof Info> & {
+    plugin_meta?: Record<string, PluginMeta>
+  }
+
+  function pluginScope(file: string): PluginMeta["scope"] {
+    if (Instance.containsPath(file)) return "local"
+    return "global"
+  }
+
+  function dedupePlugins(list: PluginEntry[]) {
+    const seen = new Set<string>()
+    const result: PluginEntry[] = []
+    for (const item of list.toReversed()) {
+      const name = Config.getPluginName(item.item)
+      if (seen.has(name)) continue
+      seen.add(name)
+      result.push(item)
+    }
+    return result.toReversed()
+  }
 
   function mergeInfo(target: Info, source: Info): Info {
-    return mergeDeep(target, source)
+    const merged = mergeDeep(target, source)
+    if (target.plugin && source.plugin) {
+      merged.plugin = [...target.plugin, ...source.plugin]
+    }
+    return merged
   }
 
   function customPath() {
     return Flag.OPENCODE_TUI_CONFIG
   }
 
+  function normalize(raw: Record<string, unknown>) {
+    const data = { ...raw }
+    if (!("tui" in data)) return data
+    if (!isRecord(data.tui)) {
+      delete data.tui
+      return data
+    }
+
+    const tui = data.tui
+    delete data.tui
+    return {
+      ...tui,
+      ...data,
+    }
+  }
+
+  function installDeps(dir: string): Promise<void> {
+    return Config.needsInstall(dir).then((yes) => {
+      if (!yes) return
+      return Config.installDependencies(dir)
+    })
+  }
+
+  async function mergeFile(acc: Acc, file: string) {
+    const data = await loadFile(file)
+    acc.result = mergeInfo(acc.result, data)
+    if (!data.plugin?.length) return
+
+    const scope = pluginScope(file)
+    for (const item of data.plugin) {
+      acc.entries.push({
+        item,
+        meta: {
+          scope,
+          source: file,
+        },
+      })
+    }
+  }
+
   const state = Instance.state(async () => {
     let projectFiles = Flag.OPENCODE_DISABLE_PROJECT_CONFIG
       ? []
@@ -38,38 +117,55 @@ export namespace TuiConfig {
       ? []
       : await ConfigPaths.projectFiles("tui", Instance.directory, Instance.worktree)
 
-    let result: Info = {}
+    const acc: Acc = {
+      result: {},
+      entries: [],
+    }
 
     for (const file of ConfigPaths.fileInDirectory(Global.Path.config, "tui")) {
-      result = mergeInfo(result, await loadFile(file))
+      await mergeFile(acc, file)
     }
 
     if (custom) {
-      result = mergeInfo(result, await loadFile(custom))
+      await mergeFile(acc, custom)
       log.debug("loaded custom tui config", { path: custom })
     }
 
     for (const file of projectFiles) {
-      result = mergeInfo(result, await loadFile(file))
+      await mergeFile(acc, file)
     }
 
     for (const dir of unique(directories)) {
       if (!dir.endsWith(".opencode") && dir !== Flag.OPENCODE_CONFIG_DIR) continue
       for (const file of ConfigPaths.fileInDirectory(dir, "tui")) {
-        result = mergeInfo(result, await loadFile(file))
+        await mergeFile(acc, file)
       }
     }
 
     if (existsSync(managed)) {
       for (const file of ConfigPaths.fileInDirectory(managed, "tui")) {
-        result = mergeInfo(result, await loadFile(file))
+        await mergeFile(acc, file)
       }
     }
 
-    result.keybinds = Config.Keybinds.parse(result.keybinds ?? {})
+    const merged = dedupePlugins(acc.entries)
+    acc.result.keybinds = Config.Keybinds.parse(acc.result.keybinds ?? {})
+    acc.result.plugin = merged.map((item) => item.item)
+    acc.result.plugin_meta = merged.length
+      ? Object.fromEntries(merged.map((item) => [Config.getPluginName(item.item), item.meta]))
+      : undefined
+
+    const deps: Promise<void>[] = []
+    if (acc.result.plugin?.length) {
+      for (const dir of unique(directories)) {
+        if (!dir.endsWith(".opencode") && dir !== Flag.OPENCODE_CONFIG_DIR) continue
+        deps.push(installDeps(dir))
+      }
+    }
 
     return {
-      config: result,
+      config: acc.result,
+      deps,
     }
   })
 
@@ -77,6 +173,11 @@ export namespace TuiConfig {
     return state().then((x) => x.config)
   }
 
+  export async function waitForDependencies() {
+    const deps = await state().then((x) => x.deps)
+    await Promise.all(deps)
+  }
+
   async function loadFile(filepath: string): Promise<Info> {
     const text = await ConfigPaths.readFile(filepath)
     if (!text) return {}
@@ -87,25 +188,12 @@ export namespace TuiConfig {
   }
 
   async function load(text: string, configFilepath: string): Promise<Info> {
-    const data = await ConfigPaths.parseText(text, configFilepath, "empty")
-    if (!data || typeof data !== "object" || Array.isArray(data)) return {}
+    const raw = await ConfigPaths.parseText(text, configFilepath, "empty")
+    if (!isRecord(raw)) return {}
 
     // Flatten a nested "tui" key so users who wrote `{ "tui": { ... } }` inside tui.json
     // (mirroring the old opencode.json shape) still get their settings applied.
-    const normalized = (() => {
-      const copy = { ...(data as Record<string, unknown>) }
-      if (!("tui" in copy)) return copy
-      if (!copy.tui || typeof copy.tui !== "object" || Array.isArray(copy.tui)) {
-        delete copy.tui
-        return copy
-      }
-      const tui = copy.tui as Record<string, unknown>
-      delete copy.tui
-      return {
-        ...tui,
-        ...copy,
-      }
-    })()
+    const normalized = normalize(raw)
 
     const parsed = Info.safeParse(normalized)
     if (!parsed.success) {
@@ -113,6 +201,13 @@ export namespace TuiConfig {
       return {}
     }
 
-    return parsed.data
+    const data = parsed.data
+    if (data.plugin) {
+      for (let i = 0; i < data.plugin.length; i++) {
+        data.plugin[i] = Config.resolvePluginSpec(data.plugin[i], configFilepath)
+      }
+    }
+
+    return data
   }
 }

packages/opencode/src/flag/flag.ts

@@ -16,10 +16,12 @@ export namespace Flag {
   export const OPENCODE_CONFIG = process.env["OPENCODE_CONFIG"]
   export declare const OPENCODE_TUI_CONFIG: string | undefined
   export declare const OPENCODE_CONFIG_DIR: string | undefined
+  export declare const OPENCODE_PLUGIN_META_FILE: string | undefined
   export const OPENCODE_CONFIG_CONTENT = process.env["OPENCODE_CONFIG_CONTENT"]
   export const OPENCODE_DISABLE_AUTOUPDATE = truthy("OPENCODE_DISABLE_AUTOUPDATE")
   export const OPENCODE_DISABLE_PRUNE = truthy("OPENCODE_DISABLE_PRUNE")
   export const OPENCODE_DISABLE_TERMINAL_TITLE = truthy("OPENCODE_DISABLE_TERMINAL_TITLE")
+  export const OPENCODE_SHOW_TTFD = truthy("OPENCODE_SHOW_TTFD")
   export const OPENCODE_PERMISSION = process.env["OPENCODE_PERMISSION"]
   export const OPENCODE_DISABLE_DEFAULT_PLUGINS = truthy("OPENCODE_DISABLE_DEFAULT_PLUGINS")
   export const OPENCODE_DISABLE_LSP_DOWNLOAD = truthy("OPENCODE_DISABLE_LSP_DOWNLOAD")
@@ -114,6 +116,17 @@ Object.defineProperty(Flag, "OPENCODE_CONFIG_DIR", {
   configurable: false,
 })
 
+// Dynamic getter for OPENCODE_PLUGIN_META_FILE
+// This must be evaluated at access time, not module load time,
+// because tests and external tooling may set this env var at runtime
+Object.defineProperty(Flag, "OPENCODE_PLUGIN_META_FILE", {
+  get() {
+    return process.env["OPENCODE_PLUGIN_META_FILE"]
+  },
+  enumerable: true,
+  configurable: false,
+})
+
 // Dynamic getter for OPENCODE_CLIENT
 // This must be evaluated at access time, not module load time,
 // because some commands override the client at runtime

packages/opencode/src/plugin/index.ts

@@ -4,21 +4,89 @@ import { Bus } from "../bus"
 import { Log } from "../util/log"
 import { createOpencodeClient } from "@opencode-ai/sdk"
 import { Server } from "../server/server"
-import { BunProc } from "../bun"
 import { Instance } from "../project/instance"
 import { Flag } from "../flag/flag"
 import { CodexAuthPlugin } from "./codex"
 import { Session } from "../session"
 import { NamedError } from "@opencode-ai/util/error"
 import { CopilotAuthPlugin } from "./copilot"
+import { parsePluginSpecifier, resolvePluginTarget, uniqueModuleEntries } from "./shared"
 import { gitlabAuthPlugin as GitlabAuthPlugin } from "@gitlab/opencode-gitlab-auth"
 
 export namespace Plugin {
   const log = Log.create({ service: "plugin" })
 
+  type Loaded = {
+    item: Config.PluginSpec
+    spec: string
+    mod: Record<string, unknown>
+  }
+
+  const BUILTIN = ["opencode-anthropic-auth@0.0.13"]
   // Built-in plugins that are directly imported (not installed from npm)
   const INTERNAL_PLUGINS: PluginInstance[] = [CodexAuthPlugin, CopilotAuthPlugin, GitlabAuthPlugin]
 
+  function isServerPlugin(value: unknown): value is PluginInstance {
+    return typeof value === "function"
+  }
+
+  function getServerPlugin(value: unknown) {
+    if (isServerPlugin(value)) return value
+    if (!value || typeof value !== "object" || !("server" in value)) return
+    if (!isServerPlugin(value.server)) return
+    return value.server
+  }
+
+  async function resolvePlugin(spec: string) {
+    const parsed = parsePluginSpecifier(spec)
+    const target = await resolvePluginTarget(spec, parsed).catch((err) => {
+      const cause = err instanceof Error ? err.cause : err
+      const detail = cause instanceof Error ? cause.message : String(cause ?? err)
+      log.error("failed to install plugin", { pkg: parsed.pkg, version: parsed.version, error: detail })
+      Bus.publish(Session.Event.Error, {
+        error: new NamedError.Unknown({
+          message: `Failed to install plugin ${parsed.pkg}@${parsed.version}: ${detail}`,
+        }).toObject(),
+      })
+      return ""
+    })
+    if (!target) return
+    return target
+  }
+
+  async function prepPlugin(item: Config.PluginSpec): Promise<Loaded | undefined> {
+    const spec = Config.pluginSpecifier(item)
+    // ignore old codex plugin since it is supported first party now
+    if (spec.includes("opencode-openai-codex-auth") || spec.includes("opencode-copilot-auth")) return
+    log.info("loading plugin", { path: spec })
+    const target = await resolvePlugin(spec)
+    if (!target) return
+    const mod = await import(target).catch((err) => {
+      const message = err instanceof Error ? err.message : String(err)
+      log.error("failed to load plugin", { path: spec, error: message })
+      Bus.publish(Session.Event.Error, {
+        error: new NamedError.Unknown({
+          message: `Failed to load plugin ${spec}: ${message}`,
+        }).toObject(),
+      })
+      return
+    })
+    if (!mod) return
+    return {
+      item,
+      spec,
+      mod,
+    }
+  }
+
+  async function applyPlugin(load: Loaded, input: PluginInput, hooks: Hooks[]) {
+    for (const [, entry] of uniqueModuleEntries(load.mod)) {
+      const server = getServerPlugin(entry)
+      if (!server) throw new TypeError("Plugin export is not a function")
+      hooks.push(await server(input, Config.pluginOptions(load.item)))
+    }
+  }
+
   const state = Instance.state(async () => {
     const client = createOpencodeClient({
       baseUrl: "http://localhost:4096",
@@ -53,49 +121,28 @@ export namespace Plugin {
 
     let plugins = config.plugin ?? []
     if (plugins.length) await Config.waitForDependencies()
+    if (!Flag.OPENCODE_DISABLE_DEFAULT_PLUGINS) {
+      plugins = [...BUILTIN, ...plugins]
+    }
 
-    for (let plugin of plugins) {
-      // ignore old codex plugin since it is supported first party now
-      if (plugin.includes("opencode-openai-codex-auth") || plugin.includes("opencode-copilot-auth")) continue
-      log.info("loading plugin", { path: plugin })
-      if (!plugin.startsWith("file://")) {
-        const lastAtIndex = plugin.lastIndexOf("@")
-        const pkg = lastAtIndex > 0 ? plugin.substring(0, lastAtIndex) : plugin
-        const version = lastAtIndex > 0 ? plugin.substring(lastAtIndex + 1) : "latest"
-        plugin = await BunProc.install(pkg, version).catch((err) => {
-          const cause = err instanceof Error ? err.cause : err
-          const detail = cause instanceof Error ? cause.message : String(cause ?? err)
-          log.error("failed to install plugin", { pkg, version, error: detail })
-          Bus.publish(Session.Event.Error, {
-            error: new NamedError.Unknown({
-              message: `Failed to install plugin ${pkg}@${version}: ${detail}`,
-            }).toObject(),
-          })
-          return ""
-        })
-        if (!plugin) continue
-      }
+    const loaded = await Promise.all(plugins.map((item) => prepPlugin(item)))
+    for (const load of loaded) {
+      if (!load) continue
+
+      // Keep plugin execution sequential so hook registration and execution
+      // order remains deterministic across plugin runs.
       // Prevent duplicate initialization when plugins export the same function
       // as both a named export and default export (e.g., `export const X` and `export default X`).
-      // Object.entries(mod) would return both entries pointing to the same function reference.
-      await import(plugin)
-        .then(async (mod) => {
-          const seen = new Set<PluginInstance>()
-          for (const [_name, fn] of Object.entries<PluginInstance>(mod)) {
-            if (seen.has(fn)) continue
-            seen.add(fn)
-            hooks.push(await fn(input))
-          }
-        })
-        .catch((err) => {
-          const message = err instanceof Error ? err.message : String(err)
-          log.error("failed to load plugin", { path: plugin, error: message })
-          Bus.publish(Session.Event.Error, {
-            error: new NamedError.Unknown({
-              message: `Failed to load plugin ${plugin}: ${message}`,
-            }).toObject(),
-          })
+      // uniqueModuleEntries keeps only the first export for each shared value reference.
+      await applyPlugin(load, input, hooks).catch((err) => {
+        const message = err instanceof Error ? err.message : String(err)
+        log.error("failed to load plugin", { path: load.spec, error: message })
+        Bus.publish(Session.Event.Error, {
+          error: new NamedError.Unknown({
+            message: `Failed to load plugin ${load.spec}: ${message}`,
+          }).toObject(),
         })
+      })
     }
 
     return {

packages/opencode/src/plugin/meta.ts

@@ -0,0 +1,160 @@
+import path from "path"
+import { fileURLToPath } from "url"
+
+import { Flag } from "@/flag/flag"
+import { Global } from "@/global"
+import { Filesystem } from "@/util/filesystem"
+
+import { parsePluginSpecifier } from "./shared"
+
+export namespace PluginMeta {
+  type Source = "file" | "npm"
+
+  export type Entry = {
+    name: string
+    source: Source
+    spec: string
+    target: string
+    requested?: string
+    version?: string
+    modified?: number
+    first_time: number
+    last_time: number
+    time_changed: number
+    load_count: number
+    fingerprint: string
+  }
+
+  export type State = "first" | "updated" | "same"
+
+  type Store = Record<string, Entry>
+  type Core = Omit<Entry, "first_time" | "last_time" | "time_changed" | "load_count" | "fingerprint">
+
+  const cache = {
+    ready: false,
+    path: "",
+    store: {} as Store,
+    dirty: false,
+  }
+
+  function storePath() {
+    return Flag.OPENCODE_PLUGIN_META_FILE ?? path.join(Global.Path.state, "plugin-meta.json")
+  }
+
+  function sourceKind(spec: string): Source {
+    if (spec.startsWith("file://")) return "file"
+    return "npm"
+  }
+
+  function entryKey(spec: string) {
+    if (spec.startsWith("file://")) return `file:${fileURLToPath(spec)}`
+    return `npm:${parsePluginSpecifier(spec).pkg}`
+  }
+
+  function entryName(spec: string) {
+    if (spec.startsWith("file://")) return path.parse(fileURLToPath(spec)).name
+    return parsePluginSpecifier(spec).pkg
+  }
+
+  function fileTarget(spec: string, target: string) {
+    if (spec.startsWith("file://")) return fileURLToPath(spec)
+    if (target.startsWith("file://")) return fileURLToPath(target)
+    return
+  }
+
+  function modifiedAt(file: string) {
+    const stat = Filesystem.stat(file)
+    if (!stat) return
+    const value = stat.mtimeMs
+    return Math.floor(typeof value === "bigint" ? Number(value) : value)
+  }
+
+  function resolvedTarget(target: string) {
+    if (target.startsWith("file://")) return fileURLToPath(target)
+    return target
+  }
+
+  async function npmVersion(target: string) {
+    const resolved = resolvedTarget(target)
+    const stat = Filesystem.stat(resolved)
+    const dir = stat?.isDirectory() ? resolved : path.dirname(resolved)
+    return Filesystem.readJson<{ version?: string }>(path.join(dir, "package.json"))
+      .then((item) => item.version)
+      .catch(() => undefined)
+  }
+
+  async function entryCore(spec: string, target: string): Promise<Core> {
+    const source = sourceKind(spec)
+    if (source === "file") {
+      const file = fileTarget(spec, target)
+      return {
+        name: entryName(spec),
+        source,
+        spec,
+        target,
+        modified: file ? modifiedAt(file) : undefined,
+      }
+    }
+
+    return {
+      name: entryName(spec),
+      source,
+      spec,
+      target,
+      requested: parsePluginSpecifier(spec).version,
+      version: await npmVersion(target),
+    }
+  }
+
+  function fingerprint(value: Core) {
+    if (value.source === "file") return [value.target, value.modified ?? ""].join("|")
+    return [value.target, value.requested ?? "", value.version ?? ""].join("|")
+  }
+
+  async function load() {
+    const next = storePath()
+    if (cache.ready && cache.path === next) return
+    cache.path = next
+    cache.store = await Filesystem.readJson<Store>(next).catch(() => ({}) as Store)
+    cache.dirty = false
+    cache.ready = true
+  }
+
+  export async function touch(spec: string, target: string): Promise<{ state: State; entry: Entry }> {
+    await load()
+    const now = Date.now()
+    const id = entryKey(spec)
+    const prev = cache.store[id]
+    const core = await entryCore(spec, target)
+    const entry: Entry = {
+      ...core,
+      first_time: prev?.first_time ?? now,
+      last_time: now,
+      time_changed: prev?.time_changed ?? now,
+      load_count: (prev?.load_count ?? 0) + 1,
+      fingerprint: fingerprint(core),
+    }
+
+    const state: State = !prev ? "first" : prev.fingerprint === entry.fingerprint ? "same" : "updated"
+    if (state === "updated") entry.time_changed = now
+
+    cache.store[id] = entry
+    cache.dirty = true
+    return {
+      state,
+      entry,
+    }
+  }
+
+  export async function persist() {
+    await load()
+    if (!cache.dirty) return
+    await Filesystem.writeJson(cache.path, cache.store)
+    cache.dirty = false
+  }
+
+  export async function list(): Promise<Store> {
+    await load()
+    return { ...cache.store }
+  }
+}

packages/opencode/src/plugin/shared.ts

@@ -0,0 +1,26 @@
+import { BunProc } from "@/bun"
+
+export function parsePluginSpecifier(spec: string) {
+  const lastAt = spec.lastIndexOf("@")
+  const pkg = lastAt > 0 ? spec.substring(0, lastAt) : spec
+  const version = lastAt > 0 ? spec.substring(lastAt + 1) : "latest"
+  return { pkg, version }
+}
+
+export async function resolvePluginTarget(spec: string, parsed = parsePluginSpecifier(spec)) {
+  if (spec.startsWith("file://")) return spec
+  return BunProc.install(parsed.pkg, parsed.version)
+}
+
+export function uniqueModuleEntries(mod: Record<string, unknown>) {
+  const seen = new Set<unknown>()
+  const entries: [string, unknown][] = []
+
+  for (const [name, entry] of Object.entries(mod)) {
+    if (seen.has(entry)) continue
+    seen.add(entry)
+    entries.push([name, entry])
+  }
+
+  return entries
+}

packages/opencode/src/util/record.ts

@@ -0,0 +1,3 @@
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === "object" && !Array.isArray(value)
+}

packages/opencode/test/cli/tui/keybind-plugin.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, test } from "bun:test"
+import type { ParsedKey } from "@opentui/core"
+import { createPluginKeybind } from "../../../src/cli/cmd/tui/context/keybind-plugin"
+
+describe("createPluginKeybind", () => {
+  const defaults = {
+    open: "ctrl+o",
+    close: "escape",
+  }
+
+  test("uses defaults when overrides are missing", () => {
+    const api = {
+      parse: () => "parsed",
+      match: () => false,
+      print: (key: string) => key,
+    }
+    const bind = createPluginKeybind(api, defaults)
+
+    expect(bind.all).toEqual(defaults)
+    expect(bind.get("open")).toBe("ctrl+o")
+    expect(bind.get("close")).toBe("escape")
+  })
+
+  test("applies valid overrides", () => {
+    const api = {
+      parse: () => "parsed",
+      match: () => false,
+      print: (key: string) => key,
+    }
+    const bind = createPluginKeybind(api, defaults, {
+      open: "ctrl+alt+o",
+      close: "q",
+    })
+
+    expect(bind.all).toEqual({
+      open: "ctrl+alt+o",
+      close: "q",
+    })
+  })
+
+  test("ignores invalid overrides", () => {
+    const api = {
+      parse: () => "parsed",
+      match: () => false,
+      print: (key: string) => key,
+    }
+    const bind = createPluginKeybind(api, defaults, {
+      open: "   ",
+      close: 1,
+      extra: "ctrl+x",
+    })
+
+    expect(bind.all).toEqual(defaults)
+    expect(bind.get("extra")).toBe("extra")
+  })
+
+  test("delegates parse", () => {
+    const evt = { name: "x" } as ParsedKey
+    const api = {
+      parse: (value: ParsedKey) => value,
+      match: () => false,
+      print: (key: string) => key,
+    }
+    const bind = createPluginKeybind(api, defaults)
+
+    expect(bind.parse(evt)).toBe(evt)
+  })
+
+  test("resolves names for match", () => {
+    const list: string[] = []
+    const api = {
+      parse: () => "parsed",
+      match: (key: string) => {
+        list.push(key)
+        return true
+      },
+      print: (key: string) => key,
+    }
+    const bind = createPluginKeybind(api, defaults, {
+      open: "ctrl+shift+o",
+    })
+
+    bind.match("open", { name: "x" } as ParsedKey)
+    bind.match("ctrl+k", { name: "x" } as ParsedKey)
+
+    expect(list).toEqual(["ctrl+shift+o", "ctrl+k"])
+  })
+
+  test("resolves names for print", () => {
+    const list: string[] = []
+    const api = {
+      parse: () => "parsed",
+      match: () => false,
+      print: (key: string) => {
+        list.push(key)
+        return `print:${key}`
+      },
+    }
+    const bind = createPluginKeybind(api, defaults, {
+      close: "q",
+    })
+
+    expect(bind.print("close")).toBe("print:q")
+    expect(bind.print("ctrl+p")).toBe("print:ctrl+p")
+    expect(list).toEqual(["q", "ctrl+p"])
+  })
+})

packages/opencode/test/cli/tui/plugin-loader-missing-meta.test.ts

@@ -0,0 +1,216 @@
+import { expect, mock, spyOn, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { pathToFileURL } from "url"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2"
+import type { CliRenderer } from "@opentui/core"
+import { tmpdir } from "../../fixture/fixture"
+import { Log } from "../../../src/util/log"
+import { TuiConfig } from "../../../src/config/tui"
+import { createPluginKeybind } from "../../../src/cli/cmd/tui/context/keybind-plugin"
+
+mock.module("@opentui/solid/preload", () => ({}))
+mock.module("@opentui/solid", () => ({
+  createSolidSlotRegistry: () => ({
+    register: () => () => {},
+  }),
+  createSlot: () => () => null,
+  useRenderer: () => ({
+    getPalette: async () => ({ palette: [] as string[] }),
+    clearPaletteCache: () => {},
+  }),
+}))
+mock.module("@opentui/solid/jsx-runtime", () => ({
+  Fragment: Symbol.for("Fragment"),
+  jsx: () => null,
+  jsxs: () => null,
+  jsxDEV: () => null,
+}))
+const { TuiPlugin } = await import("../../../src/cli/cmd/tui/plugin")
+
+async function waitForLog(text: string, timeout = 1000) {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    const file = Log.file()
+    if (file) {
+      const content = await Bun.file(file)
+        .text()
+        .catch(() => "")
+      if (content.includes(text)) return content
+    }
+    await Bun.sleep(25)
+  }
+  return Bun.file(Log.file())
+    .text()
+    .catch(() => "")
+}
+
+test("continues loading tui plugins when a plugin is missing config metadata", async () => {
+  const stamp = Date.now()
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      const badPluginPath = path.join(dir, `missing-meta-plugin-${stamp}.ts`)
+      const nextPluginPath = path.join(dir, `next-plugin-${stamp}.ts`)
+      const badSpec = pathToFileURL(badPluginPath).href
+      const nextSpec = pathToFileURL(nextPluginPath).href
+      const badMarker = path.join(dir, "missing-meta-called.txt")
+      const nextMarker = path.join(dir, "next-called.txt")
+
+      await Bun.write(
+        badPluginPath,
+        `export default {
+  tui: async (_input, options) => {
+    if (!options?.marker) return
+    await Bun.write(options.marker, "called")
+  },
+}
+`,
+      )
+
+      await Bun.write(
+        nextPluginPath,
+        `export default {
+  tui: async (_input, options) => {
+    if (!options?.marker) return
+    await Bun.write(options.marker, "called")
+  },
+}
+`,
+      )
+
+      return {
+        badSpec,
+        nextSpec,
+        badMarker,
+        nextMarker,
+      }
+    },
+  })
+
+  process.env.OPENCODE_PLUGIN_META_FILE = path.join(tmp.path, "plugin-meta.json")
+  const bad = path.parse(new URL(tmp.extra.badSpec).pathname).name
+  const next = path.parse(new URL(tmp.extra.nextSpec).pathname).name
+  const get = spyOn(TuiConfig, "get").mockResolvedValue({
+    plugin: [
+      [tmp.extra.badSpec, { marker: tmp.extra.badMarker }],
+      [tmp.extra.nextSpec, { marker: tmp.extra.nextMarker }],
+    ],
+    plugin_meta: {
+      [next]: {
+        scope: "local",
+        source: path.join(tmp.path, "tui.json"),
+      },
+    },
+  })
+  const wait = spyOn(TuiConfig, "waitForDependencies").mockResolvedValue()
+
+  const cwd = spyOn(process, "cwd").mockImplementation(() => tmp.path)
+  let selected = "opencode"
+  const renderer = {
+    ...Object.create(null),
+    once(this: CliRenderer) {
+      return this
+    },
+  } satisfies CliRenderer
+  const keybind = {
+    parse: (evt: { name?: string; ctrl?: boolean; meta?: boolean; shift?: boolean; super?: boolean }) => ({
+      name: evt.name ?? "",
+      ctrl: evt.ctrl ?? false,
+      meta: evt.meta ?? false,
+      shift: evt.shift ?? false,
+      super: evt.super,
+      leader: false,
+    }),
+    match: () => false,
+    print: (key: string) => key,
+  }
+
+  try {
+    await TuiPlugin.init({
+      client: createOpencodeClient({
+        baseUrl: "http://localhost:4096",
+      }),
+      event: {
+        on: () => () => {},
+      },
+      renderer,
+      api: {
+        command: {
+          register: () => {},
+          trigger: () => {},
+        },
+        route: {
+          register: () => () => {},
+          navigate: () => {},
+          get current() {
+            return { name: "home" as const }
+          },
+        },
+        ui: {
+          Dialog: () => null,
+          DialogAlert: () => null,
+          DialogConfirm: () => null,
+          DialogPrompt: () => null,
+          DialogSelect: () => null,
+          toast: () => {},
+          dialog: {
+            replace: () => {},
+            clear: () => {},
+            setSize: () => {},
+            get size() {
+              return "medium" as const
+            },
+            get depth() {
+              return 0
+            },
+            get open() {
+              return false
+            },
+          },
+        },
+        keybind: {
+          ...keybind,
+          create(defaults, overrides) {
+            return createPluginKeybind(keybind, defaults, overrides)
+          },
+        },
+        theme: {
+          get current() {
+            return {}
+          },
+          get selected() {
+            return selected
+          },
+          has() {
+            return false
+          },
+          set(name) {
+            selected = name
+            return true
+          },
+          async install() {
+            throw new Error("base theme.install should not run")
+          },
+          mode() {
+            return "dark" as const
+          },
+          get ready() {
+            return true
+          },
+        },
+      },
+    })
+
+    await expect(fs.readFile(tmp.extra.badMarker, "utf8")).rejects.toThrow()
+    await expect(fs.readFile(tmp.extra.nextMarker, "utf8")).resolves.toBe("called")
+
+    const log = await waitForLog("missing tui plugin metadata")
+    expect(log).toContain("missing tui plugin metadata")
+    expect(log).toContain(`name=${bad}`)
+  } finally {
+    cwd.mockRestore()
+    get.mockRestore()
+    wait.mockRestore()
+    delete process.env.OPENCODE_PLUGIN_META_FILE
+  }
+})

packages/opencode/test/cli/tui/plugin-loader.test.ts

@@ -0,0 +1,536 @@
+import { expect, mock, spyOn, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { pathToFileURL } from "url"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2"
+import type { CliRenderer } from "@opentui/core"
+import { tmpdir } from "../../fixture/fixture"
+import { Log } from "../../../src/util/log"
+import { Global } from "../../../src/global"
+import { createPluginKeybind } from "../../../src/cli/cmd/tui/context/keybind-plugin"
+
+mock.module("@opentui/solid/preload", () => ({}))
+mock.module("@opentui/solid", () => ({
+  createSolidSlotRegistry: () => ({
+    register: () => () => {},
+  }),
+  createSlot: () => () => null,
+  useRenderer: () => ({
+    getPalette: async () => ({ palette: [] as string[] }),
+    clearPaletteCache: () => {},
+  }),
+}))
+mock.module("@opentui/solid/jsx-runtime", () => ({
+  Fragment: Symbol.for("Fragment"),
+  jsx: () => null,
+  jsxs: () => null,
+  jsxDEV: () => null,
+}))
+const { allThemes, addTheme } = await import("../../../src/cli/cmd/tui/context/theme")
+const { TuiPlugin } = await import("../../../src/cli/cmd/tui/plugin")
+const { PluginMeta } = await import("../../../src/plugin/meta")
+
+async function waitForLog(text: string, timeout = 1000) {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    const file = Log.file()
+    if (file) {
+      const content = await Bun.file(file)
+        .text()
+        .catch(() => "")
+      if (content.includes(text)) return content
+    }
+    await Bun.sleep(25)
+  }
+  return Bun.file(Log.file())
+    .text()
+    .catch(() => "")
+}
+
+test("loads plugin theme and keybind APIs with scoped theme installation", async () => {
+  const stamp = Date.now()
+  const globalConfigPath = path.join(Global.Path.config, "tui.json")
+  const backup = await Bun.file(globalConfigPath)
+    .text()
+    .catch(() => undefined)
+
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      const localPluginPath = path.join(dir, "local-plugin.ts")
+      const invalidPluginPath = path.join(dir, "invalid-plugin.ts")
+      const preloadedPluginPath = path.join(dir, "preloaded-plugin.ts")
+      const globalPluginPath = path.join(dir, "global-plugin.ts")
+      const localSpec = pathToFileURL(localPluginPath).href
+      const invalidSpec = pathToFileURL(invalidPluginPath).href
+      const preloadedSpec = pathToFileURL(preloadedPluginPath).href
+      const globalSpec = pathToFileURL(globalPluginPath).href
+      const localThemeFile = `local-theme-${stamp}.json`
+      const invalidThemeFile = `invalid-theme-${stamp}.json`
+      const globalThemeFile = `global-theme-${stamp}.json`
+      const preloadedThemeFile = `preloaded-theme-${stamp}.json`
+      const localThemeName = localThemeFile.replace(/\.json$/, "")
+      const invalidThemeName = invalidThemeFile.replace(/\.json$/, "")
+      const globalThemeName = globalThemeFile.replace(/\.json$/, "")
+      const preloadedThemeName = preloadedThemeFile.replace(/\.json$/, "")
+      const localThemePath = path.join(dir, localThemeFile)
+      const invalidThemePath = path.join(dir, invalidThemeFile)
+      const globalThemePath = path.join(dir, globalThemeFile)
+      const preloadedThemePath = path.join(dir, preloadedThemeFile)
+      const localDest = path.join(dir, ".opencode", "themes", localThemeFile)
+      const globalDest = path.join(Global.Path.config, "themes", globalThemeFile)
+      const preloadedDest = path.join(dir, ".opencode", "themes", preloadedThemeFile)
+      const fnMarker = path.join(dir, "function-called.txt")
+      const localMarker = path.join(dir, "local-called.json")
+      const invalidMarker = path.join(dir, "invalid-called.json")
+      const globalMarker = path.join(dir, "global-called.json")
+      const preloadedMarker = path.join(dir, "preloaded-called.json")
+      const localConfigPath = path.join(dir, "tui.json")
+
+      await Bun.write(localThemePath, JSON.stringify({ theme: { primary: "#101010" } }, null, 2))
+      await Bun.write(invalidThemePath, "{ invalid json }")
+      await Bun.write(globalThemePath, JSON.stringify({ theme: { primary: "#202020" } }, null, 2))
+      await Bun.write(preloadedThemePath, JSON.stringify({ theme: { primary: "#f0f0f0" } }, null, 2))
+      await Bun.write(preloadedDest, JSON.stringify({ theme: { primary: "#303030" } }, null, 2))
+
+      await Bun.write(
+        localPluginPath,
+        `export default async (_input, options) => {
+  if (!options?.fn_marker) return
+  await Bun.write(options.fn_marker, "called")
+}
+
+export const object_plugin = {
+  tui: async (input, options, init) => {
+    if (!options?.marker) return
+    const key = input.api.keybind.create(
+      { modal: "ctrl+shift+m", screen: "ctrl+shift+o", close: "escape" },
+      options.keybinds,
+    )
+    const depth_before = input.api.ui.dialog.depth
+    const open_before = input.api.ui.dialog.open
+    const size_before = input.api.ui.dialog.size
+    input.api.ui.dialog.setSize("large")
+    const size_after = input.api.ui.dialog.size
+    input.api.ui.dialog.replace(() => null)
+    const depth_after = input.api.ui.dialog.depth
+    const open_after = input.api.ui.dialog.open
+    input.api.ui.dialog.clear()
+    const open_clear = input.api.ui.dialog.open
+    const before = input.api.theme.has(options.theme_name)
+    const set_missing = input.api.theme.set(options.theme_name)
+    await input.api.theme.install(options.theme_path)
+    const after = input.api.theme.has(options.theme_name)
+    const set_installed = input.api.theme.set(options.theme_name)
+    const first = await Bun.file(options.dest).text()
+    await Bun.write(options.source, JSON.stringify({ theme: { primary: "#fefefe" } }, null, 2))
+    await input.api.theme.install(options.theme_path)
+    const second = await Bun.file(options.dest).text()
+    const init_state = init.state
+    const init_source = init.entry.source
+    const init_load_count = init.entry.load_count
+    await Bun.write(
+      options.marker,
+      JSON.stringify({
+        before,
+        set_missing,
+        after,
+        set_installed,
+        selected: input.api.theme.selected,
+        same: first === second,
+        key_modal: key.get("modal"),
+        key_close: key.get("close"),
+        key_unknown: key.get("ctrl+k"),
+        key_print: key.print("modal"),
+        depth_before,
+        open_before,
+        size_before,
+        size_after,
+        depth_after,
+        open_after,
+        open_clear,
+        init_state,
+        init_source,
+        init_load_count,
+      }),
+    )
+  },
+}
+`,
+      )
+
+      await Bun.write(
+        invalidPluginPath,
+        `export default {
+  tui: async (input, options) => {
+    if (!options?.marker) return
+    const before = input.api.theme.has(options.theme_name)
+    const set_missing = input.api.theme.set(options.theme_name)
+    await input.api.theme.install(options.theme_path)
+    const after = input.api.theme.has(options.theme_name)
+    const set_installed = input.api.theme.set(options.theme_name)
+    await Bun.write(
+      options.marker,
+      JSON.stringify({
+        before,
+        set_missing,
+        after,
+        set_installed,
+      }),
+    )
+  },
+}
+`,
+      )
+
+      await Bun.write(
+        preloadedPluginPath,
+        `export default {
+  tui: async (input, options, init) => {
+    if (!options?.marker) return
+    const before = input.api.theme.has(options.theme_name)
+    await input.api.theme.install(options.theme_path)
+    const after = input.api.theme.has(options.theme_name)
+    const text = await Bun.file(options.dest).text()
+    await Bun.write(
+      options.marker,
+      JSON.stringify({
+        before,
+        after,
+        text,
+        init_state: init.state,
+        init_source: init.entry.source,
+        init_load_count: init.entry.load_count,
+      }),
+    )
+  },
+}
+`,
+      )
+
+      await Bun.write(
+        globalPluginPath,
+        `export default {
+  tui: async (input, options, init) => {
+    if (!options?.marker) return
+    await input.api.theme.install(options.theme_path)
+    const has = input.api.theme.has(options.theme_name)
+    const set_installed = input.api.theme.set(options.theme_name)
+    await Bun.write(
+      options.marker,
+      JSON.stringify({
+        has,
+        set_installed,
+        selected: input.api.theme.selected,
+        init_state: init.state,
+        init_source: init.entry.source,
+        init_load_count: init.entry.load_count,
+      }),
+    )
+  },
+}
+`,
+      )
+
+      await Bun.write(
+        globalConfigPath,
+        JSON.stringify(
+          {
+            plugin: [
+              [globalSpec, { marker: globalMarker, theme_path: `./${globalThemeFile}`, theme_name: globalThemeName }],
+            ],
+          },
+          null,
+          2,
+        ),
+      )
+
+      await Bun.write(
+        localConfigPath,
+        JSON.stringify(
+          {
+            plugin: [
+              [
+                localSpec,
+                {
+                  fn_marker: fnMarker,
+                  marker: localMarker,
+                  source: localThemePath,
+                  dest: localDest,
+                  theme_path: `./${localThemeFile}`,
+                  theme_name: localThemeName,
+                  keybinds: {
+                    modal: "ctrl+alt+m",
+                    close: "q",
+                  },
+                },
+              ],
+              [
+                invalidSpec,
+                {
+                  marker: invalidMarker,
+                  theme_path: `./${invalidThemeFile}`,
+                  theme_name: invalidThemeName,
+                },
+              ],
+              [
+                preloadedSpec,
+                {
+                  marker: preloadedMarker,
+                  dest: preloadedDest,
+                  theme_path: `./${preloadedThemeFile}`,
+                  theme_name: preloadedThemeName,
+                },
+              ],
+            ],
+          },
+          null,
+          2,
+        ),
+      )
+
+      return {
+        localThemeFile,
+        invalidThemeFile,
+        globalThemeFile,
+        preloadedThemeFile,
+        localThemeName,
+        invalidThemeName,
+        globalThemeName,
+        preloadedThemeName,
+        localDest,
+        globalDest,
+        preloadedDest,
+        localPluginPath,
+        invalidPluginPath,
+        globalPluginPath,
+        preloadedPluginPath,
+        localSpec,
+        invalidSpec,
+        globalSpec,
+        preloadedSpec,
+        fnMarker,
+        localMarker,
+        invalidMarker,
+        globalMarker,
+        preloadedMarker,
+      }
+    },
+  })
+  process.env.OPENCODE_PLUGIN_META_FILE = path.join(tmp.path, "plugin-meta.json")
+  if (!process.env.OPENCODE_PLUGIN_META_FILE) throw new Error("missing meta file")
+  await PluginMeta.touch(tmp.extra.localSpec, tmp.extra.localSpec)
+  await PluginMeta.touch(tmp.extra.globalSpec, tmp.extra.globalSpec)
+  await PluginMeta.persist()
+  await Bun.sleep(20)
+  const text = await Bun.file(tmp.extra.globalPluginPath).text()
+  await Bun.write(tmp.extra.globalPluginPath, `${text}\n`)
+
+  const cwd = spyOn(process, "cwd").mockImplementation(() => tmp.path)
+  let selected = "opencode"
+  let depth = 0
+  let size: "medium" | "large" = "medium"
+
+  const renderer = {
+    ...Object.create(null),
+    once(this: CliRenderer) {
+      return this
+    },
+  } satisfies CliRenderer
+  const keybind = {
+    parse: (evt: { name?: string; ctrl?: boolean; meta?: boolean; shift?: boolean; super?: boolean }) => ({
+      name: evt.name ?? "",
+      ctrl: evt.ctrl ?? false,
+      meta: evt.meta ?? false,
+      shift: evt.shift ?? false,
+      super: evt.super,
+      leader: false,
+    }),
+    match: () => false,
+    print: (key: string) => `print:${key}`,
+  }
+
+  try {
+    expect(addTheme(tmp.extra.preloadedThemeName, { theme: { primary: "#303030" } })).toBe(true)
+
+    await TuiPlugin.init({
+      client: createOpencodeClient({
+        baseUrl: "http://localhost:4096",
+      }),
+      event: {
+        on: () => () => {},
+      },
+      renderer,
+      api: {
+        command: {
+          register: () => {},
+          trigger: () => {},
+        },
+        route: {
+          register: () => () => {},
+          navigate: () => {},
+          get current() {
+            return { name: "home" as const }
+          },
+        },
+        ui: {
+          Dialog: () => null,
+          DialogAlert: () => null,
+          DialogConfirm: () => null,
+          DialogPrompt: () => null,
+          DialogSelect: () => null,
+          toast: () => {},
+          dialog: {
+            replace: () => {
+              depth = 1
+            },
+            clear: () => {
+              depth = 0
+              size = "medium"
+            },
+            setSize: (next) => {
+              size = next
+            },
+            get size() {
+              return size
+            },
+            get depth() {
+              return depth
+            },
+            get open() {
+              return depth > 0
+            },
+          },
+        },
+        keybind: {
+          ...keybind,
+          create(defaults, overrides) {
+            return createPluginKeybind(keybind, defaults, overrides)
+          },
+        },
+        theme: {
+          get current() {
+            return {}
+          },
+          get selected() {
+            return selected
+          },
+          has(name) {
+            return allThemes()[name] !== undefined
+          },
+          set(name) {
+            if (!allThemes()[name]) return false
+            selected = name
+            return true
+          },
+          async install() {
+            throw new Error("base theme.install should not run")
+          },
+          mode() {
+            return "dark" as const
+          },
+          get ready() {
+            return true
+          },
+        },
+      },
+    })
+
+    const local = JSON.parse(await fs.readFile(tmp.extra.localMarker, "utf8"))
+    expect(local.before).toBe(false)
+    expect(local.set_missing).toBe(false)
+    expect(local.after).toBe(true)
+    expect(local.set_installed).toBe(true)
+    expect(local.selected).toBe(tmp.extra.localThemeName)
+    expect(local.same).toBe(true)
+    expect(local.key_modal).toBe("ctrl+alt+m")
+    expect(local.key_close).toBe("q")
+    expect(local.key_unknown).toBe("ctrl+k")
+    expect(local.key_print).toBe("print:ctrl+alt+m")
+    expect(local.depth_before).toBe(0)
+    expect(local.open_before).toBe(false)
+    expect(local.size_before).toBe("medium")
+    expect(local.size_after).toBe("large")
+    expect(local.depth_after).toBe(1)
+    expect(local.open_after).toBe(true)
+    expect(local.open_clear).toBe(false)
+    expect(local.init_state).toBe("same")
+    expect(local.init_source).toBe("file")
+    expect(local.init_load_count).toBe(2)
+
+    const global = JSON.parse(await fs.readFile(tmp.extra.globalMarker, "utf8"))
+    expect(global.has).toBe(true)
+    expect(global.set_installed).toBe(true)
+    expect(global.selected).toBe(tmp.extra.globalThemeName)
+    expect(global.init_state).toBe("updated")
+    expect(global.init_source).toBe("file")
+    expect(global.init_load_count).toBe(2)
+
+    const invalid = JSON.parse(await fs.readFile(tmp.extra.invalidMarker, "utf8"))
+    expect(invalid.before).toBe(false)
+    expect(invalid.set_missing).toBe(false)
+    expect(invalid.after).toBe(false)
+    expect(invalid.set_installed).toBe(false)
+
+    const preloaded = JSON.parse(await fs.readFile(tmp.extra.preloadedMarker, "utf8"))
+    expect(preloaded.before).toBe(true)
+    expect(preloaded.after).toBe(true)
+    expect(preloaded.text).toContain("#303030")
+    expect(preloaded.text).not.toContain("#f0f0f0")
+    expect(preloaded.init_state).toBe("first")
+    expect(preloaded.init_source).toBe("file")
+    expect(preloaded.init_load_count).toBe(1)
+
+    await expect(fs.readFile(tmp.extra.fnMarker, "utf8")).rejects.toThrow()
+
+    const localInstalled = await fs.readFile(tmp.extra.localDest, "utf8")
+    expect(localInstalled).toContain("#101010")
+    expect(localInstalled).not.toContain("#fefefe")
+
+    const globalInstalled = await fs.readFile(tmp.extra.globalDest, "utf8")
+    expect(globalInstalled).toContain("#202020")
+
+    const preloadedInstalled = await fs.readFile(tmp.extra.preloadedDest, "utf8")
+    expect(preloadedInstalled).toContain("#303030")
+    expect(preloadedInstalled).not.toContain("#f0f0f0")
+
+    expect(
+      await fs
+        .stat(path.join(Global.Path.config, "themes", tmp.extra.localThemeFile))
+        .then(() => true)
+        .catch(() => false),
+    ).toBe(false)
+    expect(
+      await fs
+        .stat(path.join(tmp.path, ".opencode", "themes", tmp.extra.globalThemeFile))
+        .then(() => true)
+        .catch(() => false),
+    ).toBe(false)
+
+    const log = await waitForLog("ignoring non-object tui plugin export")
+    expect(log).toContain("ignoring non-object tui plugin export")
+    expect(log).toContain("name=default")
+    expect(log).toContain("type=function")
+
+    const badThemeLog = await waitForLog("failed to parse tui plugin theme")
+    expect(badThemeLog).toContain("failed to parse tui plugin theme")
+    expect(badThemeLog).toContain(tmp.extra.invalidThemeFile)
+
+    const meta = JSON.parse(await fs.readFile(path.join(tmp.path, "plugin-meta.json"), "utf8")) as Record<
+      string,
+      { name: string; load_count: number }
+    >
+    const rows = Object.values(meta)
+    expect(rows.find((item) => item.name === "local-plugin")?.load_count).toBe(2)
+    expect(rows.find((item) => item.name === "global-plugin")?.load_count).toBe(2)
+    expect(rows.find((item) => item.name === "preloaded-plugin")?.load_count).toBe(1)
+  } finally {
+    cwd.mockRestore()
+    if (backup === undefined) {
+      await fs.rm(globalConfigPath, { force: true })
+    } else {
+      await Bun.write(globalConfigPath, backup)
+    }
+    await fs.rm(tmp.extra.globalDest, { force: true }).catch(() => {})
+    delete process.env.OPENCODE_PLUGIN_META_FILE
+  }
+})

packages/opencode/test/cli/tui/theme-store.test.ts

@@ -0,0 +1,44 @@
+import { expect, mock, test } from "bun:test"
+
+mock.module("@opentui/solid/jsx-runtime", () => ({
+  Fragment: Symbol.for("Fragment"),
+  jsx: () => null,
+  jsxs: () => null,
+  jsxDEV: () => null,
+}))
+
+const { DEFAULT_THEMES, allThemes, addTheme, hasTheme } = await import("../../../src/cli/cmd/tui/context/theme")
+
+test("addTheme writes into module theme store", () => {
+  const name = `plugin-theme-${Date.now()}`
+  expect(addTheme(name, DEFAULT_THEMES.opencode)).toBe(true)
+
+  expect(allThemes()[name]).toBeDefined()
+})
+
+test("addTheme keeps first theme for duplicate names", () => {
+  const name = `plugin-theme-keep-${Date.now()}`
+  const one = structuredClone(DEFAULT_THEMES.opencode)
+  const two = structuredClone(DEFAULT_THEMES.opencode)
+  ;(one.theme as Record<string, unknown>).primary = "#101010"
+  ;(two.theme as Record<string, unknown>).primary = "#fefefe"
+
+  expect(addTheme(name, one)).toBe(true)
+  expect(addTheme(name, two)).toBe(false)
+
+  expect(allThemes()[name]).toBeDefined()
+  expect(allThemes()[name]!.theme.primary).toBe("#101010")
+})
+
+test("addTheme ignores entries without a theme object", () => {
+  const name = `plugin-theme-invalid-${Date.now()}`
+  expect(addTheme(name, { defs: { a: "#ffffff" } })).toBe(false)
+  expect(allThemes()[name]).toBeUndefined()
+})
+
+test("hasTheme checks theme presence", () => {
+  const name = `plugin-theme-has-${Date.now()}`
+  expect(hasTheme(name)).toBe(false)
+  expect(addTheme(name, DEFAULT_THEMES.opencode)).toBe(true)
+  expect(hasTheme(name)).toBe(true)
+})

packages/opencode/test/config/config.test.ts

@@ -1809,7 +1809,7 @@ describe("deduplicatePlugins", () => {
 
         const myPlugins = plugins.filter((p) => Config.getPluginName(p) === "my-plugin")
         expect(myPlugins.length).toBe(1)
-        expect(myPlugins[0].startsWith("file://")).toBe(true)
+        expect(Config.pluginSpecifier(myPlugins[0]).startsWith("file://")).toBe(true)
       },
     })
   })

packages/opencode/test/config/tui.test.ts

@@ -458,9 +458,15 @@ test("applies file substitutions when first identical token is in a commented li
 test("loads managed tui config and gives it highest precedence", async () => {
   await using tmp = await tmpdir({
     init: async (dir) => {
-      await Bun.write(path.join(dir, "tui.json"), JSON.stringify({ theme: "project-theme" }, null, 2))
+      await Bun.write(
+        path.join(dir, "tui.json"),
+        JSON.stringify({ theme: "project-theme", plugin: ["shared-plugin@1.0.0"] }, null, 2),
+      )
       await fs.mkdir(managedConfigDir, { recursive: true })
-      await Bun.write(path.join(managedConfigDir, "tui.json"), JSON.stringify({ theme: "managed-theme" }, null, 2))
+      await Bun.write(
+        path.join(managedConfigDir, "tui.json"),
+        JSON.stringify({ theme: "managed-theme", plugin: ["shared-plugin@2.0.0"] }, null, 2),
+      )
     },
   })
 
@@ -469,6 +475,13 @@ test("loads managed tui config and gives it highest precedence", async () => {
     fn: async () => {
       const config = await TuiConfig.get()
       expect(config.theme).toBe("managed-theme")
+      expect(config.plugin).toEqual(["shared-plugin@2.0.0"])
+      expect(config.plugin_meta).toEqual({
+        "shared-plugin": {
+          scope: "global",
+          source: path.join(managedConfigDir, "tui.json"),
+        },
+      })
     },
   })
 })
@@ -508,3 +521,110 @@ test("gracefully falls back when tui.json has invalid JSON", async () => {
     },
   })
 })
+
+test("supports tuple plugin specs with options in tui.json", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      await Bun.write(
+        path.join(dir, "tui.json"),
+        JSON.stringify({
+          plugin: [["acme-plugin@1.2.3", { enabled: true, label: "demo" }]],
+        }),
+      )
+    },
+  })
+
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      const config = await TuiConfig.get()
+      expect(config.plugin).toEqual([["acme-plugin@1.2.3", { enabled: true, label: "demo" }]])
+      expect(config.plugin_meta).toEqual({
+        "acme-plugin": {
+          scope: "local",
+          source: path.join(tmp.path, "tui.json"),
+        },
+      })
+    },
+  })
+})
+
+test("deduplicates tuple plugin specs by name with higher precedence winning", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      await Bun.write(
+        path.join(Global.Path.config, "tui.json"),
+        JSON.stringify({
+          plugin: [["acme-plugin@1.0.0", { source: "global" }]],
+        }),
+      )
+      await Bun.write(
+        path.join(dir, "tui.json"),
+        JSON.stringify({
+          plugin: [
+            ["acme-plugin@2.0.0", { source: "project" }],
+            ["second-plugin@3.0.0", { source: "project" }],
+          ],
+        }),
+      )
+    },
+  })
+
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      const config = await TuiConfig.get()
+      expect(config.plugin).toEqual([
+        ["acme-plugin@2.0.0", { source: "project" }],
+        ["second-plugin@3.0.0", { source: "project" }],
+      ])
+      expect(config.plugin_meta).toEqual({
+        "acme-plugin": {
+          scope: "local",
+          source: path.join(tmp.path, "tui.json"),
+        },
+        "second-plugin": {
+          scope: "local",
+          source: path.join(tmp.path, "tui.json"),
+        },
+      })
+    },
+  })
+})
+
+test("tracks global and local plugin metadata in merged tui config", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      await Bun.write(
+        path.join(Global.Path.config, "tui.json"),
+        JSON.stringify({
+          plugin: ["global-plugin@1.0.0"],
+        }),
+      )
+      await Bun.write(
+        path.join(dir, "tui.json"),
+        JSON.stringify({
+          plugin: ["local-plugin@2.0.0"],
+        }),
+      )
+    },
+  })
+
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      const config = await TuiConfig.get()
+      expect(config.plugin).toEqual(["global-plugin@1.0.0", "local-plugin@2.0.0"])
+      expect(config.plugin_meta).toEqual({
+        "global-plugin": {
+          scope: "global",
+          source: path.join(Global.Path.config, "tui.json"),
+        },
+        "local-plugin": {
+          scope: "local",
+          source: path.join(tmp.path, "tui.json"),
+        },
+      })
+    },
+  })
+})

packages/opencode/test/plugin/loader-shared.test.ts

@@ -0,0 +1,306 @@
+import { afterAll, afterEach, describe, expect, mock, spyOn, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { pathToFileURL } from "url"
+import { tmpdir } from "../fixture/fixture"
+
+const disableDefault = process.env.OPENCODE_DISABLE_DEFAULT_PLUGINS
+process.env.OPENCODE_DISABLE_DEFAULT_PLUGINS = "1"
+
+const { Plugin } = await import("../../src/plugin/index")
+const { Instance } = await import("../../src/project/instance")
+const { BunProc } = await import("../../src/bun")
+const { Bus } = await import("../../src/bus")
+const { Session } = await import("../../src/session")
+
+afterAll(() => {
+  if (disableDefault === undefined) {
+    delete process.env.OPENCODE_DISABLE_DEFAULT_PLUGINS
+    return
+  }
+  process.env.OPENCODE_DISABLE_DEFAULT_PLUGINS = disableDefault
+})
+
+afterEach(async () => {
+  mock.restore()
+  await Instance.disposeAll()
+})
+
+async function load(dir: string) {
+  return Instance.provide({
+    directory: dir,
+    fn: async () => {
+      await Plugin.list()
+    },
+  })
+}
+
+async function errs(dir: string) {
+  return Instance.provide({
+    directory: dir,
+    fn: async () => {
+      const errors: string[] = []
+      const off = Bus.subscribe(Session.Event.Error, (evt) => {
+        const error = evt.properties.error
+        if (!error || typeof error !== "object") return
+        if (!("data" in error)) return
+        if (!error.data || typeof error.data !== "object") return
+        if (!("message" in error.data)) return
+        if (typeof error.data.message !== "string") return
+        errors.push(error.data.message)
+      })
+      await Plugin.list()
+      off()
+      return errors
+    },
+  })
+}
+
+describe("plugin.loader.shared", () => {
+  test("loads a file:// plugin function export", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = path.join(dir, "plugin.ts")
+        const mark = path.join(dir, "called.txt")
+        await Bun.write(
+          file,
+          [
+            "export default async () => {",
+            `  await Bun.write(${JSON.stringify(mark)}, \"called\")`,
+            "  return {}",
+            "}",
+            "",
+          ].join("\n"),
+        )
+
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify({ plugin: [pathToFileURL(file).href] }, null, 2),
+        )
+
+        return { mark }
+      },
+    })
+
+    await load(tmp.path)
+    expect(await fs.readFile(tmp.extra.mark, "utf8")).toBe("called")
+  })
+
+  test("deduplicates same function exported as default and named", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = path.join(dir, "plugin.ts")
+        const mark = path.join(dir, "count.txt")
+        await Bun.write(
+          file,
+          [
+            "const run = async () => {",
+            `  const text = await Bun.file(${JSON.stringify(mark)}).text().catch(() => \"\")`,
+            `  await Bun.write(${JSON.stringify(mark)}, text + \"1\")`,
+            "  return {}",
+            "}",
+            "export default run",
+            "export const named = run",
+            "",
+          ].join("\n"),
+        )
+
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify({ plugin: [pathToFileURL(file).href] }, null, 2),
+        )
+
+        return { mark }
+      },
+    })
+
+    await load(tmp.path)
+    expect(await fs.readFile(tmp.extra.mark, "utf8")).toBe("1")
+  })
+
+  test("resolves npm plugin specs with explicit and default versions", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = path.join(dir, "plugin.ts")
+        await Bun.write(file, ["export default async () => {", "  return {}", "}", ""].join("\n"))
+
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify({ plugin: ["acme-plugin", "scope-plugin@2.3.4"] }, null, 2),
+        )
+
+        return { file }
+      },
+    })
+
+    const install = spyOn(BunProc, "install").mockImplementation(async () => pathToFileURL(tmp.extra.file).href)
+
+    await load(tmp.path)
+
+    expect(install.mock.calls).toContainEqual(["acme-plugin", "latest"])
+    expect(install.mock.calls).toContainEqual(["scope-plugin", "2.3.4"])
+  })
+
+  test("skips legacy codex and copilot auth plugin specs", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify(
+            {
+              plugin: ["opencode-openai-codex-auth@1.0.0", "opencode-copilot-auth@1.0.0", "regular-plugin@1.0.0"],
+            },
+            null,
+            2,
+          ),
+        )
+      },
+    })
+
+    const install = spyOn(BunProc, "install").mockResolvedValue("")
+
+    await load(tmp.path)
+
+    const pkgs = install.mock.calls.map((call) => call[0])
+    expect(pkgs).toContain("regular-plugin")
+    expect(pkgs).not.toContain("opencode-openai-codex-auth")
+    expect(pkgs).not.toContain("opencode-copilot-auth")
+  })
+
+  test("publishes session.error when install fails", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(path.join(dir, "opencode.json"), JSON.stringify({ plugin: ["broken-plugin@9.9.9"] }, null, 2))
+      },
+    })
+
+    spyOn(BunProc, "install").mockRejectedValue(new Error("boom"))
+
+    const errors = await errs(tmp.path)
+
+    expect(errors.some((x) => x.includes("Failed to install plugin broken-plugin@9.9.9") && x.includes("boom"))).toBe(
+      true,
+    )
+  })
+
+  test("publishes session.error when plugin init throws", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = pathToFileURL(path.join(dir, "throws.ts")).href
+        await Bun.write(
+          path.join(dir, "throws.ts"),
+          ["export default async () => {", '  throw new Error("explode")', "}", ""].join("\n"),
+        )
+
+        await Bun.write(path.join(dir, "opencode.json"), JSON.stringify({ plugin: [file] }, null, 2))
+
+        return { file }
+      },
+    })
+
+    const errors = await errs(tmp.path)
+
+    expect(errors.some((x) => x.includes(`Failed to load plugin ${tmp.extra.file}: explode`))).toBe(true)
+  })
+
+  test("publishes session.error when plugin module has invalid export", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = pathToFileURL(path.join(dir, "invalid.ts")).href
+        await Bun.write(
+          path.join(dir, "invalid.ts"),
+          ["export default async () => {", "  return {}", "}", 'export const meta = { name: "invalid" }', ""].join(
+            "\n",
+          ),
+        )
+
+        await Bun.write(path.join(dir, "opencode.json"), JSON.stringify({ plugin: [file] }, null, 2))
+
+        return { file }
+      },
+    })
+
+    const errors = await errs(tmp.path)
+
+    expect(errors.some((x) => x.includes(`Failed to load plugin ${tmp.extra.file}`))).toBe(true)
+  })
+
+  test("publishes session.error when plugin import fails", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const missing = pathToFileURL(path.join(dir, "missing-plugin.ts")).href
+        await Bun.write(path.join(dir, "opencode.json"), JSON.stringify({ plugin: [missing] }, null, 2))
+
+        return { missing }
+      },
+    })
+
+    const errors = await errs(tmp.path)
+
+    expect(errors.some((x) => x.includes(`Failed to load plugin ${tmp.extra.missing}`))).toBe(true)
+  })
+
+  test("loads object plugin via plugin.server", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = path.join(dir, "object-plugin.ts")
+        const mark = path.join(dir, "object-called.txt")
+        await Bun.write(
+          file,
+          [
+            "const plugin = {",
+            "  server: async () => {",
+            `    await Bun.write(${JSON.stringify(mark)}, \"called\")`,
+            "    return {}",
+            "  },",
+            "}",
+            "export default plugin",
+            "",
+          ].join("\n"),
+        )
+
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify({ plugin: [pathToFileURL(file).href] }, null, 2),
+        )
+
+        return { mark }
+      },
+    })
+
+    await load(tmp.path)
+    expect(await fs.readFile(tmp.extra.mark, "utf8")).toBe("called")
+  })
+
+  test("passes tuple plugin options into server plugin", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const file = path.join(dir, "options-plugin.ts")
+        const mark = path.join(dir, "options.json")
+        await Bun.write(
+          file,
+          [
+            "const plugin = {",
+            "  server: async (_input, options) => {",
+            `    await Bun.write(${JSON.stringify(mark)}, JSON.stringify(options ?? null))`,
+            "    return {}",
+            "  },",
+            "}",
+            "export default plugin",
+            "",
+          ].join("\n"),
+        )
+
+        await Bun.write(
+          path.join(dir, "opencode.json"),
+          JSON.stringify({ plugin: [[pathToFileURL(file).href, { source: "tuple", enabled: true }]] }, null, 2),
+        )
+
+        return { mark }
+      },
+    })
+
+    await load(tmp.path)
+    expect(JSON.parse(await fs.readFile(tmp.extra.mark, "utf8"))).toEqual({ source: "tuple", enabled: true })
+  })
+})

packages/opencode/test/plugin/meta.test.ts

@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { pathToFileURL } from "url"
+
+import { tmpdir } from "../fixture/fixture"
+
+const { PluginMeta } = await import("../../src/plugin/meta")
+
+afterEach(() => {
+  delete process.env.OPENCODE_PLUGIN_META_FILE
+})
+
+describe("plugin.meta", () => {
+  test("tracks file plugin loads and changes", async () => {
+    await using tmp = await tmpdir<{ file: string }>({
+      init: async (dir) => {
+        const file = path.join(dir, "plugin.ts")
+        await Bun.write(file, "export default async () => ({})\n")
+        return { file }
+      },
+    })
+
+    process.env.OPENCODE_PLUGIN_META_FILE = path.join(tmp.path, "state", "plugin-meta.json")
+    const file = process.env.OPENCODE_PLUGIN_META_FILE!
+    const spec = pathToFileURL(tmp.extra.file).href
+
+    const one = await PluginMeta.touch(spec, spec)
+    expect(one.state).toBe("first")
+    expect(one.entry.source).toBe("file")
+    expect(one.entry.modified).toBeDefined()
+
+    const two = await PluginMeta.touch(spec, spec)
+    expect(two.state).toBe("same")
+    expect(two.entry.load_count).toBe(2)
+
+    await Bun.sleep(20)
+    await Bun.write(tmp.extra.file, "export default async () => ({ ok: true })\n")
+
+    const three = await PluginMeta.touch(spec, spec)
+    expect(three.state).toBe("updated")
+    expect(three.entry.load_count).toBe(3)
+    expect((three.entry.modified ?? 0) >= (one.entry.modified ?? 0)).toBe(true)
+
+    await expect(fs.readFile(file, "utf8")).rejects.toThrow()
+    await PluginMeta.persist()
+
+    const all = await PluginMeta.list()
+    expect(Object.values(all).some((item) => item.spec === spec && item.source === "file")).toBe(true)
+    const saved = JSON.parse(await fs.readFile(file, "utf8")) as Record<string, { spec: string; load_count: number }>
+    expect(Object.values(saved).some((item) => item.spec === spec && item.load_count === 3)).toBe(true)
+  })
+
+  test("tracks npm plugin versions", async () => {
+    await using tmp = await tmpdir<{ mod: string; pkg: string }>({
+      init: async (dir) => {
+        const mod = path.join(dir, "node_modules", "acme-plugin")
+        const pkg = path.join(mod, "package.json")
+        await fs.mkdir(mod, { recursive: true })
+        await Bun.write(pkg, JSON.stringify({ name: "acme-plugin", version: "1.0.0" }, null, 2))
+        return { mod, pkg }
+      },
+    })
+
+    process.env.OPENCODE_PLUGIN_META_FILE = path.join(tmp.path, "state", "plugin-meta.json")
+    const file = process.env.OPENCODE_PLUGIN_META_FILE!
+
+    const one = await PluginMeta.touch("acme-plugin@latest", tmp.extra.mod)
+    expect(one.state).toBe("first")
+    expect(one.entry.source).toBe("npm")
+    expect(one.entry.requested).toBe("latest")
+    expect(one.entry.version).toBe("1.0.0")
+
+    await Bun.write(tmp.extra.pkg, JSON.stringify({ name: "acme-plugin", version: "1.1.0" }, null, 2))
+
+    const two = await PluginMeta.touch("acme-plugin@latest", tmp.extra.mod)
+    expect(two.state).toBe("updated")
+    expect(two.entry.version).toBe("1.1.0")
+    expect(two.entry.load_count).toBe(2)
+    await PluginMeta.persist()
+
+    const all = await PluginMeta.list()
+    expect(Object.values(all).some((item) => item.name === "acme-plugin" && item.version === "1.1.0")).toBe(true)
+    const saved = JSON.parse(await fs.readFile(file, "utf8")) as Record<string, { name: string; version?: string }>
+    expect(Object.values(saved).some((item) => item.name === "acme-plugin" && item.version === "1.1.0")).toBe(true)
+  })
+})

packages/plugin/package.json

@@ -10,7 +10,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./tool": "./src/tool.ts"
+    "./tool": "./src/tool.ts",
+    "./tui": "./src/tui.ts"
   },
   "files": [
     "dist"
@@ -19,7 +20,16 @@
     "@opencode-ai/sdk": "workspace:*",
     "zod": "catalog:"
   },
+  "peerDependencies": {
+    "@opentui/core": ">=0.1.87"
+  },
+  "peerDependenciesMeta": {
+    "@opentui/core": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@opentui/core": "0.0.0-20260318-39211c40",
     "@tsconfig/node22": "catalog:",
     "@types/node": "catalog:",
     "typescript": "catalog:",

packages/plugin/src/index.ts

@@ -9,7 +9,7 @@ import type {
   Message,
   Part,
   Auth,
-  Config,
+  Config as SDKConfig,
 } from "@opencode-ai/sdk"
 
 import type { BunShell } from "./shell.js"
@@ -32,7 +32,13 @@ export type PluginInput = {
   $: BunShell
 }
 
-export type Plugin = (input: PluginInput) => Promise<Hooks>
+export type PluginOptions = Record<string, unknown>
+
+export type Config = Omit<SDKConfig, "plugin"> & {
+  plugin?: Array<string | [string, PluginOptions]>
+}
+
+export type Plugin = (input: PluginInput, options?: PluginOptions) => Promise<Hooks>
 
 type Rule = {
   key: string

packages/plugin/src/tui.ts

@@ -0,0 +1,320 @@
+import type {
+  createOpencodeClient as createOpencodeClientV2,
+  Event as TuiEvent,
+  LspStatus,
+  McpStatus,
+  Todo,
+} from "@opencode-ai/sdk/v2"
+import type { CliRenderer, ParsedKey, Plugin as CorePlugin } from "@opentui/core"
+import type { Plugin as ServerPlugin, PluginOptions } from "./index.js"
+
+export type { CliRenderer, SlotMode } from "@opentui/core"
+
+export type TuiRouteCurrent =
+  | {
+      name: "home"
+    }
+  | {
+      name: "session"
+      params: {
+        sessionID: string
+        initialPrompt?: unknown
+      }
+    }
+  | {
+      name: string
+      params?: Record<string, unknown>
+    }
+
+export type TuiRouteDefinition<Node = unknown> = {
+  name: string
+  render: (input: { params?: Record<string, unknown> }) => Node
+}
+
+export type TuiCommand = {
+  title: string
+  value: string
+  description?: string
+  category?: string
+  keybind?: string
+  suggested?: boolean
+  hidden?: boolean
+  enabled?: boolean
+  slash?: {
+    name: string
+    aliases?: string[]
+  }
+  onSelect?: () => void
+}
+
+export type TuiKeybind = {
+  name: string
+  ctrl: boolean
+  meta: boolean
+  shift: boolean
+  super?: boolean
+  leader: boolean
+}
+
+export type TuiKeybindMap = Record<string, string>
+
+export type TuiKeybindSet = {
+  readonly all: TuiKeybindMap
+  get: (name: string) => string
+  parse: (evt: ParsedKey) => TuiKeybind
+  match: (name: string, evt: ParsedKey) => boolean
+  print: (name: string) => string
+}
+
+export type TuiDialogProps<Node = unknown> = {
+  size?: "medium" | "large"
+  onClose: () => void
+  children?: Node
+}
+
+export type TuiDialogStack<Node = unknown> = {
+  replace: (render: () => Node, onClose?: () => void) => void
+  clear: () => void
+  setSize: (size: "medium" | "large") => void
+  readonly size: "medium" | "large"
+  readonly depth: number
+  readonly open: boolean
+}
+
+export type TuiDialogAlertProps = {
+  title: string
+  message: string
+  onConfirm?: () => void
+}
+
+export type TuiDialogConfirmProps = {
+  title: string
+  message: string
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+export type TuiDialogPromptProps<Node = unknown> = {
+  title: string
+  description?: () => Node
+  placeholder?: string
+  value?: string
+  onConfirm?: (value: string) => void
+  onCancel?: () => void
+}
+
+export type TuiDialogSelectOption<Value = unknown, Node = unknown> = {
+  title: string
+  value: Value
+  description?: string
+  footer?: Node | string
+  category?: string
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+export type TuiDialogSelectProps<Value = unknown, Node = unknown> = {
+  title: string
+  placeholder?: string
+  options: TuiDialogSelectOption<Value, Node>[]
+  flat?: boolean
+  onMove?: (option: TuiDialogSelectOption<Value, Node>) => void
+  onFilter?: (query: string) => void
+  onSelect?: (option: TuiDialogSelectOption<Value, Node>) => void
+  skipFilter?: boolean
+  current?: Value
+}
+
+export type TuiToast = {
+  variant?: "info" | "success" | "warning" | "error"
+  title?: string
+  message: string
+  duration?: number
+}
+
+export type TuiTheme = {
+  readonly current: Record<string, unknown>
+  readonly selected: string
+  has: (name: string) => boolean
+  set: (name: string) => boolean
+  install: (jsonPath: string) => Promise<void>
+  mode: () => "dark" | "light"
+  readonly ready: boolean
+}
+
+export type TuiApi<Node = unknown> = {
+  command: {
+    register: (cb: () => TuiCommand[]) => void
+    trigger: (value: string) => void
+  }
+  route: {
+    register: (routes: TuiRouteDefinition<Node>[]) => () => void
+    navigate: (name: string, params?: Record<string, unknown>) => void
+    readonly current: TuiRouteCurrent
+  }
+  ui: {
+    Dialog: (props: TuiDialogProps<Node>) => Node
+    DialogAlert: (props: TuiDialogAlertProps) => Node
+    DialogConfirm: (props: TuiDialogConfirmProps) => Node
+    DialogPrompt: (props: TuiDialogPromptProps<Node>) => Node
+    DialogSelect: <Value = unknown>(props: TuiDialogSelectProps<Value, Node>) => Node
+    toast: (input: TuiToast) => void
+    dialog: TuiDialogStack<Node>
+  }
+  keybind: {
+    parse: (evt: ParsedKey) => TuiKeybind
+    match: (key: string, evt: ParsedKey) => boolean
+    print: (key: string) => string
+    create: (defaults: TuiKeybindMap, overrides?: Record<string, unknown>) => TuiKeybindSet
+  }
+  theme: TuiTheme
+}
+
+export type TuiSidebarMcpItem = {
+  name: string
+  status: McpStatus["status"]
+  error?: string
+}
+
+export type TuiSidebarLspItem = Pick<LspStatus, "id" | "root" | "status">
+
+export type TuiSidebarTodoItem = Pick<Todo, "content" | "status">
+
+export type TuiSidebarFileItem = {
+  file: string
+  additions: number
+  deletions: number
+}
+
+export type TuiSlotMap = {
+  app: {}
+  home_logo: {}
+  home_tips: {
+    show_tips: boolean
+    tips_hidden: boolean
+    first_time_user: boolean
+  }
+  home_below_tips: {
+    show_tips: boolean
+    tips_hidden: boolean
+    first_time_user: boolean
+  }
+  sidebar_top: {
+    session_id: string
+  }
+  sidebar_title: {
+    session_id: string
+    title: string
+    share_url?: string
+  }
+  sidebar_context: {
+    session_id: string
+    tokens: number
+    percentage: number | null
+    cost: number
+  }
+  sidebar_mcp: {
+    session_id: string
+    items: TuiSidebarMcpItem[]
+    connected: number
+    errors: number
+  }
+  sidebar_lsp: {
+    session_id: string
+    items: TuiSidebarLspItem[]
+    disabled: boolean
+  }
+  sidebar_todo: {
+    session_id: string
+    items: TuiSidebarTodoItem[]
+  }
+  sidebar_files: {
+    session_id: string
+    items: TuiSidebarFileItem[]
+  }
+  sidebar_getting_started: {
+    session_id: string
+    show_getting_started: boolean
+    has_providers: boolean
+    dismissed: boolean
+  }
+  sidebar_directory: {
+    session_id: string
+    directory: string
+    directory_parent: string
+    directory_name: string
+  }
+  sidebar_version: {
+    session_id: string
+    version: string
+  }
+  sidebar_bottom: {
+    session_id: string
+    directory: string
+    directory_parent: string
+    directory_name: string
+    version: string
+    show_getting_started: boolean
+    has_providers: boolean
+    dismissed: boolean
+  }
+}
+
+export type TuiSlotContext = {
+  theme: TuiTheme
+}
+
+export type TuiSlotPlugin<Node = unknown> = CorePlugin<Node, TuiSlotMap, TuiSlotContext>
+
+export type TuiSlots = {
+  register: (plugin: TuiSlotPlugin) => () => void
+}
+
+export type TuiEventBus = {
+  on: <Type extends TuiEvent["type"]>(
+    type: Type,
+    handler: (event: Extract<TuiEvent, { type: Type }>) => void,
+  ) => () => void
+}
+
+export type TuiPluginState = "first" | "updated" | "same"
+
+export type TuiPluginMeta = {
+  name: string
+  source: "file" | "npm"
+  spec: string
+  target: string
+  requested?: string
+  version?: string
+  modified?: number
+  first_time: number
+  last_time: number
+  time_changed: number
+  load_count: number
+  fingerprint: string
+}
+
+export type TuiPluginInit = {
+  state: TuiPluginState
+  entry: TuiPluginMeta
+}
+
+export type TuiPluginInput<Renderer = CliRenderer, Node = unknown> = {
+  client: ReturnType<typeof createOpencodeClientV2>
+  event: TuiEventBus
+  renderer: Renderer
+  slots: TuiSlots
+  api: TuiApi<Node>
+}
+
+export type TuiPlugin<Renderer = CliRenderer, Node = unknown> = (
+  input: TuiPluginInput<Renderer, Node>,
+  options: PluginOptions | null,
+  init: TuiPluginInit,
+) => Promise<void>
+
+export type TuiPluginModule<Renderer = CliRenderer, Node = unknown> = {
+  server?: ServerPlugin
+  tui?: TuiPlugin<Renderer, Node>
+  slots?: TuiSlotPlugin
+}

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -1342,7 +1342,15 @@ export type Config = {
   watcher?: {
     ignore?: Array<string>
   }
-  plugin?: Array<string>
+  plugin?: Array<
+    | string
+    | [
+        string,
+        {
+          [key: string]: unknown
+        },
+      ]
+  >
   /**
    * Enable or disable snapshot tracking. When false, filesystem snapshots are not recorded and undoing or reverting will not undo/redo file changes. Defaults to true.
    */