fix(tui): share runtime with external TSX plugins

packages/tui/package.json

@@ -77,6 +77,11 @@
       "bun": "./src/plugin/runtime-plugin-support.bun.ts",
       "node": "./src/plugin/runtime-plugin-support.node.ts",
       "default": "./src/plugin/runtime-plugin-support.node.ts"
+    },
+    "#plugin-loader": {
+      "bun": "./src/plugin/loader.bun.ts",
+      "node": "./src/plugin/loader.node.ts",
+      "default": "./src/plugin/loader.node.ts"
     }
   },
   "dependencies": {

packages/tui/src/app.tsx

@@ -378,10 +378,7 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                                                                   <PromptRefProvider>
                                                                     <EditorContextProvider>
                                                                       <AttentionProvider>
-                                                                        <PluginProvider
-                                                                          packages={input.packages}
-                                                                          configDirectory={global.config}
-                                                                        >
+                                                                        <PluginProvider packages={input.packages}>
                                                                           <App
                                                                             pair={
                                                                               input.server.endpoint.auth

packages/tui/src/plugin/context.tsx

@@ -7,13 +7,14 @@ import type { Page, Slot, SlotName } from "@opencode-ai/plugin/tui/context"
 import { createStore, produce, reconcile as reconcileStore } from "solid-js/store"
 import { isDeepEqual } from "remeda"
 import "#runtime-plugin-support"
+import { preparePlugin } from "#plugin-loader"
 import { useConfig } from "../config"
 import { useTuiLifecycle } from "../context/runtime"
 import { errorMessage } from "../util/error"
 import { builtins } from "./builtins"
 import { createPluginContext, usePluginHost, type Dispose } from "./api"
 import { createSourceWatcher } from "./watch"
-import { discoverTuiPlugins, freshSpecifier, localSource, tuiPluginDirectories } from "./discovery"
+import { discoverTuiPlugins, freshSpecifier, localSource, tuiPluginDirectory } from "./discovery"
 
 export interface PackageResolver {
   readonly resolve: (spec: string) => Promise<string | undefined>
@@ -57,12 +58,11 @@ type Desired = Pick<Registration, "plugin" | "source" | "target" | "version" | "
 
 const PluginContext = createContext<Value>()
 
-export function PluginProvider(props: ParentProps<{ packages: PackageResolver; configDirectory: string }>) {
+export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>) {
   const host = usePluginHost()
   const config = useConfig()
   const lifecycle = useTuiLifecycle()
   const directory = config.path ? path.dirname(config.path) : process.cwd()
-  const pluginDirectories = tuiPluginDirectories(host.paths.cwd, props.configDirectory)
   const [store, setStore] = createStore({
     ready: false,
     states: [] as ReadonlyArray<State>,
@@ -187,8 +187,8 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver; c
   // every watch event; remember them until the configuration changes.
   const npmFailures = new Map<string, string>()
   const reconcile = async () => {
-    const entries = [...(await discoverTuiPlugins(pluginDirectories)), ...(config.data.plugins ?? [])]
-    pluginDirectories.forEach((directory) => watcher.add(directory, true))
+    const entries = [...(await discoverTuiPlugins(host.paths.cwd)), ...(config.data.plugins ?? [])]
+    watcher.add(tuiPluginDirectory(host.paths.cwd))
 
     // Resolve: fold entries into one desired generation. A source that fails
     // to import keeps its running previous version and only reports failure.
@@ -216,7 +216,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver; c
       const memo = local ? undefined : npmFailures.get(target)
       const resolved = memo
         ? { status: "failed" as const, error: memo }
-        : await resolvePlugin(target, local, options, previous, props.packages).catch((error) => ({
+        : await resolvePlugin(target, local, options, previous, props.packages, host.paths.state).catch((error) => ({
             status: "failed" as const,
             error: errorMessage(error),
           }))
@@ -440,6 +440,7 @@ async function resolvePlugin(
   options: Readonly<Record<string, any>> | undefined,
   previous: Registration | undefined,
   packages: PackageResolver,
+  state: string,
 ) {
   // Package entrypoints never change within a session, so a loaded previous
   // version needs no re-resolution (which could otherwise hit npm).
@@ -452,7 +453,7 @@ async function resolvePlugin(
   const version = local ? freshSpecifier(entrypoint, (await stat(new URL(entrypoint))).mtimeMs) : entrypoint
   if (previous && previous.version === version && sameOptions(previous.options, options))
     return { status: "unchanged" as const, plugin: previous.plugin, version }
-  const mod: { readonly default?: unknown } = await import(version)
+  const mod: { readonly default?: unknown } = await import(await preparePlugin(entrypoint, version, state))
   if (!isPlugin(mod.default)) throw new Error(`Invalid V2 TUI plugin module: ${spec}`)
   return { status: "loaded" as const, plugin: mod.default, version }
 }

packages/tui/src/plugin/discovery.ts

@@ -4,33 +4,20 @@ import { fileURLToPath, pathToFileURL } from "node:url"
 
 const extensions = new Set([".cjs", ".cts", ".js", ".jsx", ".mjs", ".mts", ".ts", ".tsx"])
 
-export function tuiPluginDirectories(cwd: string, configDirectory: string) {
-  const ancestors: string[] = []
-  let current = path.resolve(cwd)
-  while (true) {
-    ancestors.push(path.join(current, ".opencode", "plugins", "tui"))
-    const parent = path.dirname(current)
-    if (parent === current) break
-    current = parent
-  }
-  return [...new Set([path.join(configDirectory, "plugins", "tui"), ...ancestors.reverse()])]
+export function tuiPluginDirectory(cwd: string) {
+  return path.join(cwd, ".opencode", "plugins", "tui")
 }
 
-export async function discoverTuiPlugins(directories: string[]) {
-  return (
-    await Promise.all(
-      directories.map(async (directory) => {
-        const entries = await readdir(directory, { withFileTypes: true }).catch((error: unknown) => {
-          if (error && typeof error === "object" && Reflect.get(error, "code") === "ENOENT") return []
-          return Promise.reject(error)
-        })
-        return entries
-          .filter((entry) => (entry.isFile() || entry.isSymbolicLink()) && extensions.has(path.extname(entry.name)))
-          .map((entry) => path.join(directory, entry.name))
-          .sort()
-      }),
-    )
-  ).flat()
+export async function discoverTuiPlugins(cwd: string) {
+  const directory = tuiPluginDirectory(cwd)
+  const entries = await readdir(directory, { withFileTypes: true }).catch((error: unknown) => {
+    if (error && typeof error === "object" && Reflect.get(error, "code") === "ENOENT") return []
+    return Promise.reject(error)
+  })
+  return entries
+    .filter((entry) => (entry.isFile() || entry.isSymbolicLink()) && extensions.has(path.extname(entry.name)))
+    .map((entry) => path.join(directory, entry.name))
+    .sort()
 }
 
 export function localSource(spec: string, directory: string) {

packages/tui/src/plugin/loader.bun.ts

@@ -0,0 +1,44 @@
+import { createSolidTransformPlugin } from "@opentui/solid/bun-plugin"
+import { isCoreRuntimeModuleSpecifier, runtimeModuleIdForSpecifier } from "@opentui/core/runtime-plugin"
+import { mkdir } from "node:fs/promises"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const runtime = new Set([
+  "@opentui/solid",
+  "@opentui/solid/components",
+  "@opentui/solid/jsx-runtime",
+  "@opentui/solid/jsx-dev-runtime",
+  "solid-js",
+  "solid-js/store",
+])
+
+export async function preparePlugin(entrypoint: string, version: string, state: string) {
+  const source = fileURLToPath(entrypoint)
+  if (!source.endsWith(".tsx") && !source.endsWith(".jsx")) return version
+  const result = await Bun.build({
+    entrypoints: [source],
+    target: "bun",
+    format: "esm",
+    sourcemap: "inline",
+    plugins: [
+      createSolidTransformPlugin({
+        moduleName: runtimeModuleIdForSpecifier("@opentui/solid"),
+        resolvePath(specifier) {
+          if (!runtime.has(specifier) && !isCoreRuntimeModuleSpecifier(specifier)) return null
+          return runtimeModuleIdForSpecifier(specifier)
+        },
+      }),
+    ],
+    external: [...runtime, "@opentui/core", "@opentui/core/testing"].flatMap((specifier) => [
+      specifier,
+      runtimeModuleIdForSpecifier(specifier),
+    ]),
+  })
+  if (!result.success) throw new Error(result.logs.join("\n"))
+  const directory = path.join(state, "tui-plugin-cache")
+  const output = path.join(directory, `${Bun.hash(version).toString(16)}.mjs`)
+  await mkdir(directory, { recursive: true })
+  await Bun.write(output, result.outputs[0]!)
+  return output
+}

packages/tui/src/plugin/loader.node.ts

@@ -0,0 +1,3 @@
+export async function preparePlugin(_entrypoint: string, version: string, _state: string) {
+  return version
+}

packages/tui/src/plugin/watch.ts

@@ -10,24 +10,21 @@ import { lstat, realpath, stat } from "fs/promises"
 // Directory targets are watched at their root only: edits to nested helper
 // files do not change the entrypoint mtime and are not detected. Watches are
 // never torn down individually (a stale watch costs one fs handle and a
-// spurious onChange); all die with dispose(). Missing or temporarily
-// unwatchable targets are polled until they can be armed without relying on a
-// racy chain of ancestor watches.
+// spurious onChange); all die with dispose(). Failed or vanished watches are
+// forgotten so a later add() can re-arm once the path exists.
 export function createSourceWatcher(onChange: () => void) {
   const watchers = new Map<string, ReturnType<typeof watch>>()
   const watched = new Map<string, Set<string> | null>()
-  const missing = new Set<string>()
   let disposed = false
   const forget = (dir: string) => {
     watchers.get(dir)?.close()
     watchers.delete(dir)
     watched.delete(dir)
   }
-  const arm = (target: string, retry: boolean) => {
+  const arm = (target: string) => {
     stat(target)
       .then((info) => {
         if (disposed) return
-        const appeared = missing.delete(target)
         const dir = info.isDirectory() ? target : path.dirname(target)
         // Directories accept every filename (null); files accept their basename.
         const name = info.isDirectory() ? null : path.basename(target)
@@ -35,9 +32,9 @@ export function createSourceWatcher(onChange: () => void) {
         if (existing !== undefined) {
           if (name === null) watched.set(dir, null)
           else existing?.add(name)
-          if (appeared) onChange()
           return
         }
+        watched.set(dir, name === null ? null : new Set([name]))
         const watcher = watch(dir, (_event, filename) => {
           // A replaced directory keeps this watcher on the dead inode (Linux
           // emits rename, not error); forget it so a later add() re-arms on
@@ -52,36 +49,27 @@ export function createSourceWatcher(onChange: () => void) {
           if (filename && accept && !accept.has(filename.toString())) return
           onChange()
         })
-        watched.set(dir, name === null ? null : new Set([name]))
-        // Reconcile after watcher errors so every source is re-added and any
-        // temporarily unavailable target moves into the polling set.
-        watcher.on("error", () => {
-          forget(dir)
-          onChange()
-        })
+        // A watched directory can disappear out from under us; without a
+        // listener the error event would crash the process. Forget the path
+        // so a later add can re-arm once it exists again.
+        watcher.on("error", () => forget(dir))
         watchers.set(dir, watcher)
-        if (appeared) onChange()
-      })
-      .catch(() => {
-        if (retry) missing.add(target)
       })
+      .catch(() => undefined)
   }
-  const add = (target: string, retry = false) => {
-    arm(target, retry)
+  const add = (target: string) => {
+    arm(target)
     // A symlinked source receives edits at its resolved target.
     lstat(target)
       .then((info) => {
         if (!info.isSymbolicLink()) return
-        return realpath(target).then((target) => arm(target, retry))
+        return realpath(target).then(arm)
       })
       .catch(() => undefined)
   }
   const dispose = () => {
     disposed = true
-    clearInterval(poll)
     for (const watcher of watchers.values()) watcher.close()
   }
-  const poll = setInterval(() => missing.forEach((target) => arm(target, true)), 500)
-  poll.unref()
   return { add, dispose }
 }

packages/tui/test/plugin-discovery.test.ts

@@ -1,7 +1,7 @@
 import { mkdir, writeFile } from "node:fs/promises"
 import path from "node:path"
 import { expect, test } from "bun:test"
-import { discoverTuiPlugins, tuiPluginDirectories } from "../src/plugin/discovery"
+import { discoverTuiPlugins } from "../src/plugin/discovery"
 import { tmpdir } from "./fixture/fixture"
 
 test("discovers project TUI plugin files in stable order", async () => {
@@ -15,7 +15,7 @@ test("discovers project TUI plugin files in stable order", async () => {
     writeFile(path.join(directory, "nested", "ignored.ts"), "export default {}"),
   ])
 
-  expect(await discoverTuiPlugins(tuiPluginDirectories(tmp.path, path.join(tmp.path, "config")))).toEqual([
+  expect(await discoverTuiPlugins(tmp.path)).toEqual([
     path.join(directory, "first.js"),
     path.join(directory, "second.tsx"),
   ])
@@ -23,25 +23,5 @@ test("discovers project TUI plugin files in stable order", async () => {
 
 test("returns no project TUI plugins when the directory is absent", async () => {
   await using tmp = await tmpdir()
-  expect(await discoverTuiPlugins(tuiPluginDirectories(tmp.path, path.join(tmp.path, "config")))).toEqual([])
-})
-
-test("discovers global and ancestor plugin roots in precedence order", async () => {
-  await using tmp = await tmpdir()
-  const cwd = path.join(tmp.path, "repo", "packages", "app")
-  const config = path.join(tmp.path, "config")
-  const directories = [
-    path.join(config, "plugins", "tui"),
-    path.join(tmp.path, "repo", ".opencode", "plugins", "tui"),
-    path.join(tmp.path, "repo", "packages", ".opencode", "plugins", "tui"),
-  ]
-  await Promise.all(directories.map((directory) => mkdir(directory, { recursive: true })))
-  await Promise.all(
-    directories.map((directory, index) => writeFile(path.join(directory, `${index}.ts`), "export default {}")),
-  )
-
-  expect(await discoverTuiPlugins(tuiPluginDirectories(cwd, config))).toEqual(
-    directories.map((directory, index) => path.join(directory, `${index}.ts`)),
-  )
-  expect(tuiPluginDirectories(cwd, config)).toContain(path.join(cwd, ".opencode", "plugins", "tui"))
+  expect(await discoverTuiPlugins(tmp.path)).toEqual([])
 })

packages/tui/test/plugin-hot-reload.test.tsx

@@ -1,6 +1,7 @@
 import { expect, mock, test } from "bun:test"
 import { createTestRenderer } from "@opentui/core/testing"
 import { Effect, FileSystem } from "effect"
+import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { Global } from "@opencode-ai/util/global"
 import { mkdir, readFile, symlink, writeFile } from "node:fs/promises"
 import path from "node:path"
@@ -48,10 +49,7 @@ async function bootApp(directory: string) {
       packages: { resolve: async () => undefined },
       args: {},
       log: () => {},
-    }).pipe(
-      Effect.provide(Global.layerWith({ config: path.join(directory, ".global") })),
-      Effect.provide(FileSystem.layerNoop({})),
-    ),
+    }).pipe(Effect.provide(AppNodeBuilder.build(Global.node)), Effect.provide(FileSystem.layerNoop({}))),
   )
   return {
     task,
@@ -64,28 +62,6 @@ async function bootApp(directory: string) {
   }
 }
 
-test("discovers an ancestor TUI plugin directory created after startup", async () => {
-  await using tmp = await tmpdir()
-  const cwd = path.join(tmp.path, "repo", "packages", "app")
-  await mkdir(cwd, { recursive: true })
-  const marker = path.join(tmp.path, "marker.txt")
-
-  await using app = await bootApp(cwd)
-  const directory = path.join(tmp.path, "repo", ".opencode", "plugins", "tui")
-  await mkdir(directory, { recursive: true })
-  await writeFile(path.join(directory, "hot.ts"), lifecycleSource(marker, "test.hot", "v1"))
-
-  expect(
-    await until(
-      () => readFile(marker, "utf8"),
-      (value) => value === "v1:setup\n",
-    ),
-  ).toBe("v1:setup\n")
-
-  process.emit("SIGHUP")
-  await app.task
-})
-
 test("editing a discovered TUI plugin hot-reloads its fresh module", async () => {
   await using tmp = await tmpdir()
   const directory = path.join(tmp.path, ".opencode", "plugins", "tui")

packages/tui/test/plugin-reactivity.test.tsx

@@ -0,0 +1,72 @@
+import { expect, test } from "bun:test"
+import { createComponent, createSignal, type JSX } from "solid-js"
+import { testRender } from "@opentui/solid"
+import { mkdir, writeFile } from "node:fs/promises"
+import path from "node:path"
+import { preparePlugin } from "../src/plugin/loader.bun"
+import "../src/plugin/runtime-plugin-support.bun"
+import { tmpdir } from "./fixture/fixture"
+
+test("an external TSX plugin uses the host Solid runtime", async () => {
+  await using tmp = await tmpdir()
+  const root = path.join(tmp.path, ".opencode")
+  const source = path.join(root, "plugins", "tui", "reactive.tsx")
+  const helper = path.join(root, "plugins", "tui", "signal.ts")
+  const localSolid = path.join(root, "node_modules", "solid-js")
+  const localOpenTui = path.join(root, "node_modules", "@opentui", "solid")
+  await Promise.all([
+    mkdir(path.dirname(source), { recursive: true }),
+    mkdir(localSolid, { recursive: true }),
+    mkdir(localOpenTui, { recursive: true }),
+  ])
+  await Promise.all([
+    writeFile(
+      path.join(localSolid, "package.json"),
+      JSON.stringify({ name: "solid-js", type: "module", main: "index.js" }),
+    ),
+    writeFile(
+      path.join(localSolid, "index.js"),
+      "export const createSignal = () => { throw new Error('local Solid used') }\n",
+    ),
+    writeFile(
+      path.join(localOpenTui, "package.json"),
+      JSON.stringify({ name: "@opentui/solid", type: "module", main: "index.js" }),
+    ),
+    writeFile(path.join(localOpenTui, "index.js"), "throw new Error('local OpenTUI used')\n"),
+    writeFile(helper, 'export { createSignal, onCleanup } from "solid-js"\n'),
+    writeFile(
+      source,
+      `
+import { createSignal, onCleanup } from "./signal"
+
+export const signal = createSignal
+
+export default {
+  id: "test.reactive",
+  setup(context: any) {
+    context.ui.slot("home.footer", () => {
+      const [count, setCount] = createSignal(0)
+      const timer = setTimeout(() => setCount(1), 10)
+      onCleanup(() => clearTimeout(timer))
+      return <box><text>count:{count()}</text></box>
+    })
+  },
+}
+`,
+    ),
+  ])
+
+  const plugin = await import(await preparePlugin(new URL(`file://${source}`).href, `${source}?mtime=1`, tmp.path))
+  expect(plugin.signal).toBe(createSignal)
+  let slot: ((input: object) => JSX.Element) | undefined
+  await plugin.default.setup({ ui: { slot: (_name: string, render: typeof slot) => (slot = render) } })
+  if (!slot) throw new Error("Plugin did not register its slot")
+
+  const setup = await testRender(() => createComponent(slot!, {}), { width: 20, height: 2 })
+  try {
+    expect(await setup.waitForFrame((frame) => frame.includes("count:0"))).toContain("count:0")
+    expect(await setup.waitForFrame((frame) => frame.includes("count:1"))).toContain("count:1")
+  } finally {
+    setup.renderer.destroy()
+  }
+})