fix(core): clarify Code Mode tool boundary

Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>

bun.lock

@@ -859,6 +859,20 @@
         "vite": "catalog:",
       },
     },
+    "packages/theme": {
+      "name": "@opencode-ai/theme",
+      "version": "0.0.0",
+      "dependencies": {
+        "@opentui/core": "catalog:",
+        "effect": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+        "typescript": "catalog:",
+      },
+    },
     "packages/tui": {
       "name": "@opencode-ai/tui",
       "version": "1.18.4",
@@ -868,6 +882,7 @@
         "@opencode-ai/plugin": "workspace:*",
         "@opencode-ai/schema": "workspace:*",
         "@opencode-ai/simulation": "workspace:*",
+        "@opencode-ai/theme": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@opentui/core": "catalog:",
@@ -1030,6 +1045,7 @@
       },
       "devDependencies": {
         "@astrojs/cloudflare": "14.1.4",
+        "@opencode-ai/theme": "workspace:*",
         "@types/bun": "catalog:",
         "astro": "7.1.3",
         "effect": "catalog:",
@@ -2075,6 +2091,8 @@
 
     "@opencode-ai/storybook": ["@opencode-ai/storybook@workspace:packages/storybook"],
 
+    "@opencode-ai/theme": ["@opencode-ai/theme@workspace:packages/theme"],
+
     "@opencode-ai/tui": ["@opencode-ai/tui@workspace:packages/tui"],
 
     "@opencode-ai/ui": ["@opencode-ai/ui@workspace:packages/ui"],

packages/ai/package.json

@@ -15,6 +15,7 @@
   ],
   "exports": {
     ".": "./src/index.ts",
+    "./testing": "./src/testing.ts",
     "./*": "./src/*.ts"
   },
   "devDependencies": {

packages/ai/src/provider-error.ts

@@ -135,7 +135,7 @@ export function classifyProviderFailure(input: ProviderFailure): LLMError["reaso
       rateLimit: input.rateLimit,
     })
   }
-  if (input.status !== undefined && input.status >= 500)
+  if (input.status === 408 || input.status === 409 || (input.status !== undefined && input.status >= 500))
     return new ProviderInternalReason({
       ...common,
       status: input.status,
@@ -145,7 +145,6 @@ export function classifyProviderFailure(input: ProviderFailure): LLMError["reaso
   if (
     input.status === 400 ||
     input.status === 404 ||
-    input.status === 409 ||
     input.status === 413 ||
     input.status === 422
   )

packages/ai/src/testing.ts

@@ -0,0 +1,157 @@
+export * as TestLLM from "./testing"
+
+import { LLMClient, type Interface as LLMClientShape } from "./route/client"
+import {
+  LLMEvent,
+  LLMResponse,
+  type FinishReasonDetails,
+  type LLMError,
+  type LLMRequest,
+  type UsageInput,
+} from "./schema"
+import { Context, Deferred, Effect, Latch, Layer, Queue, Scope, Stream } from "effect"
+
+export type Response = readonly LLMEvent[] | Stream.Stream<LLMEvent, LLMError>
+
+export type Gate = Readonly<{ started: Effect.Effect<void>; release: Effect.Effect<void> }>
+
+export interface Interface {
+  readonly requests: LLMRequest[]
+  readonly push: (...responses: readonly Response[]) => Effect.Effect<void>
+  readonly always: (response: Response) => Effect.Effect<void>
+  readonly wait: (count: number) => Effect.Effect<void>
+  readonly gate: Effect.Effect<Gate, never, Scope.Scope>
+  readonly client: LLMClientShape
+}
+
+export interface LayerOptions {
+  readonly transformRequest?: (request: LLMRequest) => LLMRequest
+  /** Used after the one-shot response queue is exhausted. Omit to defect on unexpected requests. */
+  readonly fallback?: Response
+}
+
+export class Service extends Context.Service<Service, Interface>()("@opencode/ai/TestLLM") {}
+
+export const complete = (
+  options: { readonly reason: FinishReasonDetails; readonly usage?: UsageInput },
+  ...events: readonly LLMEvent[]
+) => [
+  LLMEvent.stepStart({ index: 0 }),
+  ...events,
+  LLMEvent.stepFinish({ index: 0, reason: options.reason, usage: options.usage }),
+  LLMEvent.finish({ reason: options.reason }),
+]
+
+export const stop = (...events: readonly LLMEvent[]) => complete({ reason: { normalized: "stop" } }, ...events)
+
+export const toolCalls = (...events: readonly LLMEvent[]) =>
+  complete({ reason: { normalized: "tool-calls" } }, ...events)
+
+const textEvents = (value: string, id: string) => [
+  LLMEvent.textStart({ id }),
+  LLMEvent.textDelta({ id, text: value }),
+  LLMEvent.textEnd({ id }),
+]
+
+export const text = (value: string, id: string) => stop(...textEvents(value, id))
+
+export const textWithUsage = (value: string, id: string, inputTokens: number) =>
+  complete(
+    { reason: { normalized: "stop" }, usage: { inputTokens, nonCachedInputTokens: inputTokens } },
+    ...textEvents(value, id),
+  )
+
+export const tool = (id: string, name: string, input: unknown) => toolCalls(LLMEvent.toolCall({ id, name, input }))
+
+export const failAfter = (error: LLMError, ...events: readonly LLMEvent[]) =>
+  Stream.fromIterable(events).pipe(Stream.concat(Stream.fail(error)))
+
+export const hangAfter = (...events: readonly LLMEvent[]) => Stream.concat(Stream.fromIterable(events), Stream.never)
+
+const toStream = (response: Response) => (Stream.isStream(response) ? response : Stream.fromIterable(response))
+
+export const layer = (options: LayerOptions = {}) =>
+  Layer.effect(
+    Service,
+    Effect.gen(function* () {
+      const requests: LLMRequest[] = []
+      const responses: Response[] = []
+      let started = Deferred.makeUnsafe<void>()
+      let fallback = options.fallback
+      let activeGate: { readonly started: Queue.Queue<void>; readonly release: Latch.Latch } | undefined
+      const wait = (count: number): Effect.Effect<void> =>
+        Effect.suspend(() =>
+          requests.length >= count ? Effect.void : Deferred.await(started).pipe(Effect.andThen(wait(count))),
+        )
+
+      const stream = ((request: LLMRequest) => {
+        requests.push(options.transformRequest?.(request) ?? request)
+        const waiting = started
+        started = Deferred.makeUnsafe()
+        Deferred.doneUnsafe(waiting, Effect.void)
+        const response = responses.shift() ?? fallback
+        if (!response) return Stream.die(new Error(`TestLLM has no response for request ${requests.length}`))
+        const streamed = toStream(response)
+        const gate = activeGate
+        if (!gate) return streamed
+        return Stream.unwrap(
+          Queue.offer(gate.started, undefined).pipe(Effect.andThen(gate.release.await), Effect.as(streamed)),
+        )
+      }) as LLMClientShape["stream"]
+      const client = LLMClient.Service.of({
+        prepare: () => Effect.die("TestLLM does not prepare provider-native requests"),
+        stream,
+        generate: (request) =>
+          stream(request).pipe(
+            Stream.runFold(LLMResponse.empty, LLMResponse.reduce),
+            Effect.flatMap((state) => {
+              const response = LLMResponse.complete(state)
+              if (response) return Effect.succeed(response)
+              return Effect.die("TestLLM response ended without a terminal finish event")
+            }),
+          ),
+      })
+
+      return Service.of({
+        requests,
+        push: (...input) =>
+          Effect.sync(() => {
+            responses.push(...input)
+          }),
+        always: (response) =>
+          Effect.sync(() => {
+            fallback = response
+          }),
+        wait,
+        gate: Effect.gen(function* () {
+          const gate = {
+            started: yield* Effect.acquireRelease(Queue.unbounded<void>(), Queue.shutdown),
+            release: yield* Latch.make(),
+          }
+          activeGate = gate
+          const release = Effect.sync(() => {
+            if (activeGate === gate) activeGate = undefined
+          }).pipe(Effect.andThen(gate.release.open), Effect.asVoid)
+          yield* Effect.addFinalizer(() => release)
+          return {
+            started: Queue.take(gate.started),
+            release,
+          }
+        }),
+        client,
+      })
+    }),
+  )
+
+export const clientLayer = Layer.effect(
+  LLMClient.Service,
+  Effect.map(Service, (service) => service.client),
+)
+
+export const push = (...responses: readonly Response[]) => Service.use((service) => service.push(...responses))
+
+export const always = (response: Response) => Service.use((service) => service.always(response))
+
+export const wait = (count: number) => Service.use((service) => service.wait(count))
+
+export const gate = Service.use((service) => service.gate)

packages/ai/test/exports.test.ts

@@ -19,6 +19,7 @@ import {
   OpenResponses,
 } from "@opencode-ai/ai/protocols"
 import * as AnthropicMessages from "@opencode-ai/ai/protocols/anthropic-messages"
+import { TestLLM } from "@opencode-ai/ai/testing"
 
 describe("public exports", () => {
   test("root exposes app-facing runtime APIs", () => {
@@ -28,6 +29,7 @@ describe("public exports", () => {
     expect(ImageInput.bytes).toBeFunction()
     expect(Provider.make).toBeFunction()
     expect(ProviderSubpath.make).toBe(Provider.make)
+    expect(TestLLM.layer).toBeFunction()
   })
 
   test("route barrel exposes route-authoring APIs", () => {

packages/ai/test/provider-error.test.ts

@@ -58,6 +58,12 @@ describe("provider error classification", () => {
     ).toEqual(["ProviderInternal", "ProviderInternal"])
   })
 
+  test("classifies transient client statuses as provider internal", () => {
+    expect(
+      [408, 409].map((status) => classifyProviderFailure({ message: `HTTP ${status}`, status })._tag),
+    ).toEqual(["ProviderInternal", "ProviderInternal"])
+  })
+
   test("classifies nested provider codes when a top-level code is also present", () => {
     expect(
       [

packages/app/src/components/dialog-select-server.tsx

@@ -562,6 +562,7 @@ export function useServerManagementController(options: { onSelect?: () => void;
     startEdit,
     resetForm,
     submitForm,
+    canRemove: server.canRemove,
     handleRemove,
     handleFormChange: () => (isAddMode() ? handleAddChange : handleEditChange),
     handleFormNameChange: () => (isAddMode() ? handleAddNameChange : handleEditNameChange),
@@ -649,13 +650,15 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                             </DropdownMenu.ItemLabel>
                           </DropdownMenu.Item>
                         </Show>
-                        <DropdownMenu.Separator />
-                        <DropdownMenu.Item
-                          onSelect={() => props.controller.handleRemove(ServerConnection.key(i))}
-                          class="text-text-on-critical-base hover:bg-surface-critical-weak"
-                        >
-                          <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
+                        <Show when={props.controller.canRemove(key)}>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Item
+                            onSelect={() => props.controller.handleRemove(ServerConnection.key(i))}
+                            class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                          >
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
+                        </Show>
                       </DropdownMenu.Content>
                     </DropdownMenu.Portal>
                   </DropdownMenu>

packages/app/src/components/server/server-row-menu.tsx

@@ -21,6 +21,7 @@ export const ServerRowMenu: Component<{
       labels={serverMenuLabels(language)}
       canDefault={props.controller.canDefault()}
       isDefault={props.controller.defaultKey() === key}
+      canRemove={props.controller.canRemove(key)}
       onEdit={props.onEdit}
       onSetDefault={() => props.controller.setDefault(key)}
       onRemoveDefault={() => props.controller.setDefault(null)}
@@ -47,6 +48,7 @@ export const ServerRowMenuView: Component<{
   labels: ReturnType<typeof serverMenuLabels>
   canDefault: boolean
   isDefault: boolean
+  canRemove: boolean
   onEdit: (server: ServerConnection.Http) => void
   onSetDefault: () => void
   onRemoveDefault: () => void
@@ -84,10 +86,10 @@ export const ServerRowMenuView: Component<{
             <Show when={props.canDefault && props.isDefault}>
               <MenuV2.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</MenuV2.Item>
             </Show>
-            <MenuV2.Separator />
-            <MenuV2.Item disabled={builtin()} onSelect={props.onRemove}>
-              {props.labels.delete}
-            </MenuV2.Item>
+            <Show when={props.canRemove}>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={props.onRemove}>{props.labels.delete}</MenuV2.Item>
+            </Show>
           </MenuV2.Group>
         </MenuV2.Content>
       </MenuV2.Portal>

packages/app/src/components/titlebar.tsx

@@ -395,27 +395,25 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   }}
                   onReorder={(keys) => tabsStoreActions.reorder(keys)}
                 />
-                <Show when={!creating()}>
-                  <TooltipV2
-                    placement="bottom"
-                    value={
-                      <>
-                        {language.t("command.session.new")}
-                        <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
-                      </>
-                    }
-                  >
-                    <IconButtonV2
-                      type="button"
-                      variant="ghost-muted"
-                      size="large"
-                      class="shrink-0"
-                      icon={<IconV2 name="plus" />}
-                      onClick={openNewTab}
-                      aria-label={language.t("command.session.new")}
-                    />
-                  </TooltipV2>
-                </Show>
+                <TooltipV2
+                  placement="bottom"
+                  value={
+                    <>
+                      {language.t("command.session.new")}
+                      <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
+                    </>
+                  }
+                >
+                  <IconButtonV2
+                    type="button"
+                    variant="ghost-muted"
+                    size="large"
+                    class="shrink-0"
+                    icon={<IconV2 name="plus" />}
+                    onClick={openNewTab}
+                    aria-label={language.t("command.session.new")}
+                  />
+                </TooltipV2>
                 <div class="flex-1" />
                 <TitlebarV2Right state={v2RightState()} />
               </div>

packages/app/src/context/server.tsx

@@ -178,6 +178,17 @@ export function resolveServerList(input: {
   return [...deduped.values()]
 }
 
+export function canRemoveServer(input: {
+  key: ServerConnection.Key
+  provided?: Array<ServerConnection.Any>
+  stored: StoredServer[]
+}) {
+  if (input.provided?.some((server) => ServerConnection.key(server) === input.key)) return false
+  return input.stored.some((server) =>
+    typeof server === "string" ? server === input.key : ("type" in server ? server.http.url : server.url) === input.key,
+  )
+}
+
 export namespace ServerConnection {
   type Base = { displayName?: string; label?: string }
 
@@ -312,6 +323,10 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       })
     }
 
+    function canRemove(key: ServerConnection.Key) {
+      return canRemoveServer({ key, provided: props.servers, stored: store.list })
+    }
+
     const isReady = Object.assign(
       createMemo(() => ready() && !!state.active),
       { promise: ready.promise },
@@ -350,6 +365,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       setActive,
       add,
       remove,
+      canRemove,
       scope,
       projects: {
         ...projects,

packages/app/src/pages/home/home-projects-controller.tsx

@@ -60,6 +60,7 @@ export function createHomeProjectsController(home: HomeController) {
       defaultKey: serverManagement.defaultKey,
       setDefault: (conn: ServerConnection.Any | undefined) =>
         serverManagement.setDefault(conn ? ServerConnection.key(conn) : null),
+      canRemove: (conn: ServerConnection.Any) => serverManagement.canRemove(ServerConnection.key(conn)),
       remove: (conn: ServerConnection.Any) => serverManagement.handleRemove(ServerConnection.key(conn)),
       edit: (conn: ServerConnection.Http) => dialog.show(() => <DialogServerV2 mode="edit" server={conn} />),
       focus: home.selection.focusServer,

packages/app/src/pages/home/home-projects-view.tsx

@@ -47,6 +47,7 @@ export type HomeProjectsViewProps = {
   onToggleCollapsed: (server: ServerConnection.Any) => void
   onEditServer: (server: ServerConnection.Http) => void
   onSetDefaultServer: (server: ServerConnection.Any | undefined) => void
+  canRemoveServer: (server: ServerConnection.Any) => boolean
   onRemoveServer: (server: ServerConnection.Any) => void
   onMoveProject: (server: ServerConnection.Any, worktree: string, index: number) => void
   onSelectProject: (server: ServerConnection.Any, directory: string) => void
@@ -192,6 +193,7 @@ function HomeServerRow(props: {
   onToggleCollapsed: HomeProjectsViewProps["onToggleCollapsed"]
   onEditServer: HomeProjectsViewProps["onEditServer"]
   onSetDefaultServer: HomeProjectsViewProps["onSetDefaultServer"]
+  canRemoveServer: HomeProjectsViewProps["canRemoveServer"]
   onRemoveServer: HomeProjectsViewProps["onRemoveServer"]
   onSetContextMenuOpen: HomeProjectsContextMenuProps["onSetContextMenuOpen"]
   onChooseProject: HomeProjectsViewProps["onChooseProject"]
@@ -277,6 +279,7 @@ function HomeServerRow(props: {
           labels={serverMenuLabels(props.language)}
           canDefault={props.canDefaultServer()}
           isDefault={props.defaultServerKey() === ServerConnection.key(props.server)}
+          canRemove={props.canRemoveServer(props.server)}
           onEdit={props.onEditServer}
           onSetDefault={() => props.onSetDefaultServer(props.server)}
           onRemoveDefault={() => props.onSetDefaultServer(undefined)}

packages/app/src/pages/home/home-projects.tsx

@@ -24,6 +24,7 @@ export function HomeProjects(props: { projects: HomeProjectsController; scroll:
       onToggleCollapsed={props.projects.server.toggleCollapsed}
       onEditServer={props.projects.server.edit}
       onSetDefaultServer={props.projects.server.setDefault}
+      canRemoveServer={props.projects.server.canRemove}
       onRemoveServer={props.projects.server.remove}
       onMoveProject={props.projects.project.move}
       onSelectProject={props.projects.project.select}

packages/cli/src/commands/commands.ts

@@ -14,10 +14,23 @@ const ServerParams = {
   ),
 }
 
+const PermissionParams = {
+  auto: Flag.boolean("auto").pipe(
+    Flag.withDescription("Auto-approve permissions that are not explicitly denied"),
+    Flag.withDefault(false),
+  ),
+  yolo: Flag.boolean("yolo").pipe(Flag.withDefault(false), Flag.withHidden),
+  dangerouslySkipPermissions: Flag.boolean("dangerously-skip-permissions").pipe(
+    Flag.withDefault(false),
+    Flag.withHidden,
+  ),
+}
+
 export const Commands = Spec.make(typeof OPENCODE_CLI_NAME === "string" ? OPENCODE_CLI_NAME : "opencode", {
   description: "OpenCode 2.0 preview command line interface",
   params: {
     ...ServerParams,
+    ...PermissionParams,
     directory: Argument.string("directory").pipe(
       Argument.withDescription("Directory to start OpenCode in"),
       Argument.optional,
@@ -196,11 +209,7 @@ export const Commands = Spec.make(typeof OPENCODE_CLI_NAME === "string" ? OPENCO
         ),
         title: Flag.string("title").pipe(Flag.withDescription("Session title"), Flag.optional),
         thinking: Flag.boolean("thinking").pipe(Flag.withDescription("Show thinking blocks"), Flag.withDefault(false)),
-        auto: Flag.boolean("auto").pipe(
-          Flag.withDescription("Auto-approve permissions that are not explicitly denied"),
-          Flag.withDefault(false),
-        ),
-        yolo: Flag.boolean("yolo").pipe(Flag.withDefault(false), Flag.withHidden),
+        ...PermissionParams,
       },
     }),
     Spec.make("service", {

packages/cli/src/commands/handlers/default.ts

@@ -59,6 +59,7 @@ export default Runtime.handler(Commands, (input) =>
         continue: input.continue,
         sessionID: Option.getOrUndefined(input.session),
         prompt: Option.getOrUndefined(input.prompt),
+        auto: input.auto || input.yolo || input.dangerouslySkipPermissions,
       },
       config: {
         path: config.path,

packages/cli/src/commands/handlers/run.ts

@@ -24,7 +24,7 @@ export default Runtime.handler(Commands.commands.run, (input) =>
         file: [...input.file],
         title: Option.getOrUndefined(input.title),
         thinking: input.thinking,
-        auto: input.auto || input.yolo,
+        auto: input.auto || input.yolo || input.dangerouslySkipPermissions,
       }),
     )
   }),

packages/core/src/codemode/instructions.ts

@@ -6,7 +6,9 @@ import { Instructions } from "../instructions/index"
 import { CodeModeCatalog } from "./catalog"
 
 // prettier-ignore
-const prompt = (hasMoreTools: boolean) => `The Code Mode tool catalog below is ${hasMoreTools ? "partial" : "complete"}.${hasMoreTools ? `
+const prompt = (hasMoreTools: boolean) => `The Code Mode tool catalog below is ${hasMoreTools ? "partial" : "complete"}.
+
+The Code Mode catalog and \`search\` results are the complete set of tools available within Code Mode. Tools presented elsewhere are not available in this runtime.${hasMoreTools ? `
 
 ## Search
 

packages/core/src/codemode/tool.ts

@@ -33,7 +33,7 @@ type CollectedFiles = {
 
 // Invariant model-facing guidance; the changing tool catalog is delivered through Instructions.
 const description = [
-  "Run JavaScript to orchestrate tool calls and compose their results through `{ code }` in a confined Code Mode runtime.",
+  "Run JavaScript in a confined Code Mode runtime to orchestrate tool calls and compose their results.",
   "Imports, direct filesystem access, and timers are unavailable. Do not use `fetch`; all external access goes through `tools`.",
   "Within `{ code }`, the only callable tools are those explicitly listed in the Code Mode catalog instructions or returned by `search`. Inside `{ code }`, ignore tools shown outside the Code Mode catalog. They are not available in the Code Mode runtime.",
   'Call tools through `tools` using only exact paths and signatures from the catalog. Do not infer or normalize tool names; preserve bracket notation such as `tools.<namespace>["tool-name"](input)`.',

packages/core/src/plugin/supervisor.ts

@@ -2,7 +2,7 @@ export * as PluginSupervisor from "./supervisor"
 
 import type { Plugin as PluginDefinition } from "@opencode-ai/plugin/effect/plugin"
 import { Event } from "@opencode-ai/schema/config"
-import { Context, Deferred, Effect, Layer, Option, PubSub, Schema, Semaphore, Stream } from "effect"
+import { Context, Deferred, Effect, Layer, Option, PubSub, Schema, Stream } from "effect"
 import path from "path"
 import { fileURLToPath, pathToFileURL } from "url"
 import { Agent } from "../agent"
@@ -230,10 +230,8 @@ const layer = Layer.effect(
     const bus = yield* Bus.Service
     const watcher = yield* Watcher.Service
     const fs = yield* FSUtil.Service
-    const lock = Semaphore.makeUnsafe(1)
     const ready = yield* Deferred.make<void>()
     let observed = 0
-    let applied = -1
 
     // Configured local plugin files can live outside config roots, where the
     // config change feed cannot see them; watch those entrypoints directly.
@@ -265,61 +263,40 @@ const layer = Layer.effect(
       }
     })
 
-    const activate = Effect.fn("PluginSupervisor.activate")(function* (target: number) {
-      yield* lock.withPermit(
-        Effect.gen(function* () {
-          if (applied >= target) return
-          // Resolve OpenCode's internal plugins with their privileged Location services.
-          const internal = yield* PluginInternal.list()
-          // Combine internal plugins with host-contributed SDK plugins in boot order.
-          const pre = [...internal.pre.map((plugin) => ({ ...plugin, version: "internal" })), ...sdk.all()]
-          const post = internal.post.map((plugin) => ({ ...plugin, version: "internal" }))
-          const entries = yield* config.entries()
-          const operations = yield* scan(entries)
-          yield* watchConfiguredSources(entries, operations)
-          // Apply config operations and load enabled package plugins into one ordered generation.
-          const plugins = yield* resolve(pre, post, operations)
-          // Replace the active generation in one scoped, batched activation.
-          yield* registry.activate(plugins)
-          applied = target
-        }),
-      )
+    const activate = Effect.fn("PluginSupervisor.activate")(function* () {
+      // Resolve OpenCode's internal plugins with their privileged Location services.
+      const internal = yield* PluginInternal.list()
+      // Combine internal plugins with host-contributed SDK plugins in boot order.
+      const pre = [...internal.pre.map((plugin) => ({ ...plugin, version: "internal" })), ...sdk.all()]
+      const post = internal.post.map((plugin) => ({ ...plugin, version: "internal" }))
+      const entries = yield* config.entries()
+      const operations = yield* scan(entries)
+      yield* watchConfiguredSources(entries, operations)
+      // Apply config operations and load enabled package plugins into one ordered generation.
+      const plugins = yield* resolve(pre, post, operations)
+      // Replace the active generation in one scoped, batched activation.
+      yield* registry.activate(plugins)
     })
-    const sourceChanges = config.changes().pipe(
-      Stream.filterEffect((update) => Effect.map(config.entries(), (entries) => isPluginSource(entries, update.path))),
-      Stream.merge(Stream.fromPubSub(configuredChanges)),
-      // Make accepted filesystem work visible to flush before coalescing the burst.
-      Stream.mapEffect(() => Effect.sync(() => ++observed)),
-      Stream.debounce("100 millis"),
-    )
-    const busUpdates = bus
-      .subscribe([Event.Updated, SdkPlugins.Updated])
-      .pipe(Stream.mapEffect(() => Effect.sync(() => ++observed)))
-    const updates = yield* Stream.merge(busUpdates, sourceChanges).pipe(
-      Stream.toQueue({ capacity: 1, strategy: "sliding" }),
-    )
-    const signals = yield* Stream.concat(Stream.succeed(0), Stream.fromQueue(updates)).pipe(
-      Stream.broadcast({ capacity: 1, strategy: "sliding", replay: 1 }),
-    )
-    const attempt = (target: number) =>
-      activate(target).pipe(
-        Effect.map(() => observed === target),
-        Effect.catchCause((cause) => Effect.logError("failed to reload plugins", { cause }).pipe(Effect.as(false))),
-      )
-
-    yield* signals.pipe(
-      Stream.runForEach((target) =>
-        activate(target).pipe(Effect.catchCause((cause) => Effect.logError("failed to reload plugins", { cause }))),
+    const updates = Stream.merge(
+      config.changes().pipe(
+        Stream.filterEffect((update) => Effect.map(config.entries(), (entries) => isPluginSource(entries, update.path))),
+        Stream.merge(Stream.fromPubSub(configuredChanges)),
       ),
-      Effect.forkScoped({ startImmediately: true }),
+      bus.subscribe([Event.Updated, SdkPlugins.Updated]),
+    ).pipe(
+      // Make accepted work visible to flush before coalescing the burst.
+      Stream.mapEffect(() => Effect.sync(() => ++observed)),
     )
-    yield* signals.pipe(
+    yield* Stream.concat(Stream.succeed(0), updates).pipe(
+      // Keep observing updates while activation runs, retaining only the latest generation request.
+      Stream.buffer({ capacity: 1, strategy: "sliding" }),
       Stream.debounce("100 millis"),
-      Stream.mapEffect(attempt),
-      Stream.filter((settled) => settled),
-      Stream.take(1),
-      Stream.runDrain,
-      Effect.andThen(Deferred.succeed(ready, undefined)),
+      Stream.runForEach((target) =>
+        Effect.gen(function* () {
+          yield* activate()
+          if (observed === target) yield* Deferred.succeed(ready, undefined)
+        }).pipe(Effect.catchCause((cause) => Effect.logError("failed to reload plugins", { cause }))),
+      ),
       Effect.forkScoped({ startImmediately: true }),
     )
     return Service.of({ flush: Deferred.await(ready) })

packages/core/src/tool/plugin/websearch.ts

@@ -32,85 +32,109 @@ export const Plugin = {
 
     yield* ctx.tool
       .transform((draft) =>
-        draft.add(
-          {
-            name,
-            options: { codemode: false },
-            description,
-            input: Input,
-            output: Output,
-            execute: (input, context) =>
-              Effect.gen(function* () {
-                yield* permission.assert({
-                  action: name,
-                  resources: [input.query],
-                  save: ["*"],
-                  metadata: input,
-                  sessionID: context.sessionID,
-                  agent: context.agent,
-                  source: { type: "tool", messageID: context.messageID, callID: context.callID },
-                })
-                const result = yield* ctx.websearch.query(input).pipe(
-                  Effect.catch((error) => {
-                    if (!Schema.is(WebSearch.ProviderRequiredError)(error)) return Effect.fail(error)
-                    return Effect.gen(function* () {
-                      const providers = (yield* ctx.websearch.providers()).data
-                      if (providers.length === 0) return yield* new WebSearch.ProviderRequiredError()
-                      const response = yield* forms.ask({
-                        sessionID: context.sessionID,
-                        title: "Choose a provider so the agent can search the web",
-                        metadata: { kind: "websearch.provider" },
-                        fields: [
-                          {
-                            key: "provider",
-                            title: "Provider",
-                            description: "OpenCode will use your choice for future searches.",
-                            type: "string",
-                            required: true,
-                            custom: false,
-                            options: [
-                              ...providers.map((provider) => ({ value: provider.id, label: provider.name })),
-                              { value: "__disable__", label: "Disable web search" },
-                            ],
-                          },
-                        ],
-                      })
-                      if (response.status === "cancelled") return yield* Effect.fail(new Error("Web search cancelled"))
-                      const answer = response.answer.provider
-                      if (answer === "__disable__") {
-                        yield* kv.set("websearch:provider", false)
-                        return yield* new WebSearch.DisabledError()
-                      }
-                      if (typeof answer !== "string" || !providers.some((provider) => provider.id === answer))
-                        return yield* new WebSearch.ProviderRequiredError()
-                      yield* kv.set("websearch:provider", answer)
-                      return yield* ctx.websearch.query(input)
+        draft.add({
+          name,
+          options: { codemode: false },
+          description,
+          input: Input,
+          output: Output,
+          execute: (input, context) =>
+            Effect.gen(function* () {
+              yield* permission.assert({
+                action: name,
+                resources: [input.query],
+                save: ["*"],
+                metadata: input,
+                sessionID: context.sessionID,
+                agent: context.agent,
+                source: { type: "tool", messageID: context.messageID, callID: context.callID },
+              })
+              const result = yield* ctx.websearch.query(input).pipe(
+                Effect.catch((error) => {
+                  if (!Schema.is(WebSearch.ProviderRequiredError)(error)) return Effect.fail(error)
+                  return Effect.gen(function* () {
+                    const providers = (yield* ctx.websearch.providers()).data
+                    const defaultProvider = providers[0]
+                    if (!defaultProvider) return yield* new WebSearch.ProviderRequiredError()
+                    const response = yield* forms.ask({
+                      sessionID: context.sessionID,
+                      title: "Web Search",
+                      metadata: { kind: "websearch.provider" },
+                      fields: [
+                        {
+                          key: "choice",
+                          description: "Allow OpenCode to search the web for up-to-date information?",
+                          type: "string",
+                          required: true,
+                          custom: false,
+                          options: [
+                            {
+                              value: "allow",
+                              label: `Allow web search via ${defaultProvider.name}`,
+                            },
+                            {
+                              value: "choose",
+                              label: "Choose another provider",
+                            },
+                            { value: "disable", label: "Disable web search" },
+                          ],
+                        },
+                      ],
                     })
-                  }),
-                )
-                const output = {
-                  provider: result.data.providerID,
-                  results: result.data.results,
-                }
-                const content = output.results.length
-                  ? output.results
-                      .map((result) => {
-                        const title = result.title ?? result.url
-                        const published = result.time.published
-                          ? `\nPublished: ${new Date(result.time.published).toISOString()}`
-                          : ""
-                        return `## [${title}](${result.url})${published}${result.content ? `\n\n${result.content}` : ""}`
-                      })
-                      .join("\n\n")
-                  : NO_RESULTS
-                return { output, content, metadata: { provider: output.provider } }
-              }).pipe(
-                Effect.mapError(
-                  (error) => new ToolFailure({ message: `Unable to search the web for ${input.query}`, error }),
-                ),
+                    if (response.status === "cancelled") return yield* Effect.fail(new Error("Web search cancelled"))
+                    if (response.answer.choice === "disable") {
+                      yield* kv.set("websearch:provider", false)
+                      return yield* new WebSearch.DisabledError()
+                    }
+                    const selection =
+                      response.answer.choice === "choose"
+                        ? yield* forms.ask({
+                            sessionID: context.sessionID,
+                            title: "Choose a web search provider",
+                            metadata: { kind: "websearch.provider" },
+                            fields: [
+                              {
+                                key: "provider",
+                                description: "Choose a provider for web search.",
+                                type: "string",
+                                required: true,
+                                custom: false,
+                                options: providers.map((provider) => ({ value: provider.id, label: provider.name })),
+                              },
+                            ],
+                          })
+                        : undefined
+                    if (selection?.status === "cancelled") return yield* Effect.fail(new Error("Web search cancelled"))
+                    const providerID = selection?.answer.provider ?? defaultProvider.id
+                    if (typeof providerID !== "string" || !providers.some((provider) => provider.id === providerID))
+                      return yield* new WebSearch.ProviderRequiredError()
+                    yield* kv.set("websearch:provider", providerID)
+                    return yield* ctx.websearch.query(input)
+                  })
+                }),
+              )
+              const output = {
+                provider: result.data.providerID,
+                results: result.data.results,
+              }
+              const content = output.results.length
+                ? output.results
+                    .map((result) => {
+                      const title = result.title ?? result.url
+                      const published = result.time.published
+                        ? `\nPublished: ${new Date(result.time.published).toISOString()}`
+                        : ""
+                      return `## [${title}](${result.url})${published}${result.content ? `\n\n${result.content}` : ""}`
+                    })
+                    .join("\n\n")
+                : NO_RESULTS
+              return { output, content, metadata: { provider: output.provider } }
+            }).pipe(
+              Effect.mapError(
+                (error) => new ToolFailure({ message: `Unable to search the web for ${input.query}`, error }),
               ),
-          },
-        ),
+            ),
+        }),
       )
       .pipe(Effect.orDie)
 

packages/core/test/codemode/instructions.test.ts

@@ -44,6 +44,9 @@ describe("CodeModeInstructions", () => {
   it.effect("renders the initial catalog, semantic deltas, and removal", () =>
     Effect.gen(function* () {
       const initialized = yield* readInitial(CodeModeInstructions.make([echo]))
+      expect(initialized.text).toContain(
+        "The Code Mode catalog and `search` results are the complete set of tools available within Code Mode. Tools presented elsewhere are not available in this runtime.",
+      )
       expect(initialized.text).toContain("## Available tools")
       expect(initialized.text).not.toContain("## Search")
       expect(initialized.text).toContain(`  - ${echo.signature} // Echo text`)

packages/core/test/generate.test.ts

@@ -1,6 +1,7 @@
 import { expect } from "bun:test"
-import { LLMClient, LLMEvent, LLMResponse, Model } from "@opencode-ai/ai"
+import { Model } from "@opencode-ai/ai"
 import { OpenAIChat } from "@opencode-ai/ai/protocols"
+import { TestLLM } from "@opencode-ai/ai/testing"
 import { AISDK } from "@opencode-ai/core/aisdk"
 import { Catalog } from "@opencode-ai/core/catalog"
 import { Generate } from "@opencode-ai/core/generate"
@@ -9,7 +10,7 @@ import { ModelResolver } from "@opencode-ai/core/model-resolver"
 import { ID, Info, Ref } from "@opencode-ai/core/model"
 import { Provider } from "@opencode-ai/core/provider"
 import { Npm } from "@opencode-ai/util/npm"
-import { Effect, Layer, Stream } from "effect"
+import { Effect, Layer } from "effect"
 import { testEffect } from "./lib/effect"
 
 const selected = Info.make({
@@ -64,21 +65,7 @@ const aisdk = Layer.mock(AISDK.Service, {
   },
   model: () => Effect.succeed(runtime),
 })
-const client = Layer.mock(LLMClient.Service)({
-  prepare: () => Effect.die("unused"),
-  stream: () => Stream.die("unused"),
-  generate: () =>
-    Effect.sync(() => {
-      const response = LLMResponse.fromEvents([
-        LLMEvent.textStart({ id: "generate" }),
-        LLMEvent.textDelta({ id: "generate", text: "OK" }),
-        LLMEvent.textEnd({ id: "generate" }),
-        LLMEvent.finish({ reason: { normalized: "stop" } }),
-      ])
-      if (!response) throw new Error("Incomplete generate response")
-      return response
-    }),
-})
+const client = TestLLM.clientLayer.pipe(Layer.provide(TestLLM.layer({ fallback: TestLLM.text("OK", "generate") })))
 
 const resolver = ModelResolver.layer.pipe(Layer.provide(Layer.mergeAll(catalog, integrations, npm, aisdk)))
 const it = testEffect(Generate.layer.pipe(Layer.provide(Layer.merge(resolver, client))))

packages/core/test/tool-execute.test.ts

@@ -22,7 +22,7 @@ const createCodeMode = (tools: ReadonlyMap<string, Info>) =>
 test("execute describes invariant Code Mode behavior", () => {
   expect(createCodeMode(new Map()).description).toBe(
     [
-      "Run JavaScript to orchestrate tool calls and compose their results through `{ code }` in a confined Code Mode runtime.",
+      "Run JavaScript in a confined Code Mode runtime to orchestrate tool calls and compose their results.",
       "Imports, direct filesystem access, and timers are unavailable. Do not use `fetch`; all external access goes through `tools`.",
       "Within `{ code }`, the only callable tools are those explicitly listed in the Code Mode catalog instructions or returned by `search`. Inside `{ code }`, ignore tools shown outside the Code Mode catalog. They are not available in the Code Mode runtime.",
       'Call tools through `tools` using only exact paths and signatures from the catalog. Do not infer or normalize tool names; preserve bracket notation such as `tools.<namespace>["tool-name"](input)`.',

packages/core/test/tool-websearch.test.ts

@@ -30,6 +30,15 @@ const webSearchToolNode = makeLocationNode({
 const sessionID = Session.ID.make("ses_websearch_test")
 const assertions: Permission.AssertInput[] = []
 const queries: WebSearch.Input[] = []
+const formRequests: Form.CreateInput[] = []
+const values = new Map<string, KV.Value>()
+const providers = [
+  { id: WebSearch.ID.make("exa"), name: "Exa" },
+  { id: WebSearch.ID.make("parallel"), name: "Parallel" },
+]
+let providerRequired = false
+let formResponse: Form.TerminalState = { status: "cancelled" }
+const formResponses: Form.TerminalState[] = []
 let result = new WebSearch.Response({
   providerID: WebSearch.ID.make("exa"),
   results: [{ url: "https://example.com", title: "Search results", content: "search results", time: {} }],
@@ -38,6 +47,11 @@ let result = new WebSearch.Response({
 beforeEach(() => {
   assertions.length = 0
   queries.length = 0
+  formRequests.length = 0
+  values.clear()
+  providerRequired = false
+  formResponse = { status: "cancelled" }
+  formResponses.length = 0
   result = new WebSearch.Response({
     providerID: WebSearch.ID.make("exa"),
     results: [{ url: "https://example.com", title: "Search results", content: "search results", time: {} }],
@@ -60,11 +74,15 @@ const websearch = Layer.succeed(
   WebSearch.Service.of({
     transform: () => Effect.die("unused"),
     reload: () => Effect.die("unused"),
-    providers: () => Effect.succeed([]),
+    providers: () => Effect.succeed(providers),
     default: () => Effect.succeed(undefined),
     query: (input) =>
-      Effect.sync(() => {
+      Effect.gen(function* () {
         queries.push(input)
+        const stored = values.get("websearch:provider")
+        if (providerRequired && typeof stored !== "string") return yield* new WebSearch.ProviderRequiredError()
+        if (typeof stored === "string")
+          return new WebSearch.Response({ providerID: WebSearch.ID.make(stored), results: result.results })
         return result
       }),
   }),
@@ -73,7 +91,11 @@ const form = Layer.succeed(
   Form.Service,
   Form.Service.of({
     create: () => Effect.die("unused"),
-    ask: () => Effect.die("unused"),
+    ask: (input) =>
+      Effect.sync(() => {
+        formRequests.push(input)
+        return formResponses.shift() ?? formResponse
+      }),
     get: () => Effect.die("unused"),
     list: () => Effect.die("unused"),
     state: () => Effect.die("unused"),
@@ -84,22 +106,19 @@ const form = Layer.succeed(
 const kv = Layer.succeed(
   KV.Service,
   KV.Service.of({
-    get: () => Effect.succeed(undefined),
-    set: () => Effect.void,
-    remove: () => Effect.void,
+    get: (key) => Effect.succeed(values.get(key)),
+    set: (key, value) => Effect.sync(() => values.set(key, value)).pipe(Effect.asVoid),
+    remove: (key) => Effect.sync(() => values.delete(key)).pipe(Effect.asVoid),
   }),
 )
 const it = testEffect(
-  AppNodeBuilder.build(
-    LayerNode.group([Tool.node, WebSearch.node, webSearchToolNode]),
-    [
-      [Permission.node, permission],
-      [WebSearch.node, websearch],
-      [Form.node, form],
-      [KV.node, kv],
-      [Image.node, imagePassthrough],
-    ],
-  ),
+  AppNodeBuilder.build(LayerNode.group([Tool.node, WebSearch.node, webSearchToolNode]), [
+    [Permission.node, permission],
+    [WebSearch.node, websearch],
+    [Form.node, form],
+    [KV.node, kv],
+    [Image.node, imagePassthrough],
+  ]),
 )
 
 describe("WebSearchTool registration", () => {
@@ -202,4 +221,116 @@ describe("WebSearchTool registration", () => {
       })
     }),
   )
+
+  it.effect("asks once and uses the default provider when web search is first enabled", () =>
+    Effect.gen(function* () {
+      providerRequired = true
+      formResponse = { status: "answered", answer: { choice: "allow" } }
+      const registry = yield* Tool.Service
+
+      expect(
+        yield* executeTool(registry, {
+          sessionID,
+          ...toolIdentity,
+          call: { type: "tool-call", id: "call-enable", name: "websearch", input: { query: "effect" } },
+        }),
+      ).toMatchObject({ status: "completed", metadata: { provider: "exa" } })
+      expect(values.get("websearch:provider")).toBe("exa")
+      expect(queries).toHaveLength(2)
+      expect(formRequests).toEqual([
+        {
+          sessionID,
+          title: "Web Search",
+          metadata: { kind: "websearch.provider" },
+          fields: [
+            {
+              key: "choice",
+              description: "Allow OpenCode to search the web for up-to-date information?",
+              type: "string",
+              required: true,
+              custom: false,
+              options: [
+                {
+                  value: "allow",
+                  label: "Allow web search via Exa",
+                },
+                {
+                  value: "choose",
+                  label: "Choose another provider",
+                },
+                { value: "disable", label: "Disable web search" },
+              ],
+            },
+          ],
+        },
+      ])
+
+      expect(
+        yield* executeTool(registry, {
+          sessionID,
+          ...toolIdentity,
+          call: { type: "tool-call", id: "call-enabled", name: "websearch", input: { query: "effect schema" } },
+        }),
+      ).toMatchObject({ status: "completed", metadata: { provider: "exa" } })
+      expect(formRequests).toHaveLength(1)
+      expect(queries).toHaveLength(3)
+    }),
+  )
+
+  it.effect("asks a second form when choosing another provider", () =>
+    Effect.gen(function* () {
+      providerRequired = true
+      formResponses.push(
+        { status: "answered", answer: { choice: "choose" } },
+        { status: "answered", answer: { provider: "parallel" } },
+      )
+      const registry = yield* Tool.Service
+
+      expect(
+        yield* executeTool(registry, {
+          sessionID,
+          ...toolIdentity,
+          call: { type: "tool-call", id: "call-choose", name: "websearch", input: { query: "effect" } },
+        }),
+      ).toMatchObject({ status: "completed", metadata: { provider: "parallel" } })
+      expect(values.get("websearch:provider")).toBe("parallel")
+      expect(queries).toHaveLength(2)
+      expect(formRequests[1]).toEqual({
+        sessionID,
+        title: "Choose a web search provider",
+        metadata: { kind: "websearch.provider" },
+        fields: [
+          {
+            key: "provider",
+            description: "Choose a provider for web search.",
+            type: "string",
+            required: true,
+            custom: false,
+            options: [
+              { value: "exa", label: "Exa" },
+              { value: "parallel", label: "Parallel" },
+            ],
+          },
+        ],
+      })
+    }),
+  )
+
+  it.effect("persists the choice to disable web search", () =>
+    Effect.gen(function* () {
+      providerRequired = true
+      formResponse = { status: "answered", answer: { choice: "disable" } }
+      const registry = yield* Tool.Service
+
+      expect(
+        yield* executeTool(registry, {
+          sessionID,
+          ...toolIdentity,
+          call: { type: "tool-call", id: "call-disable", name: "websearch", input: { query: "effect" } },
+        }),
+      ).toMatchObject({ status: "error" })
+      expect(values.get("websearch:provider")).toBe(false)
+      expect(queries).toHaveLength(1)
+    }),
+  )
 })

packages/plugin/src/tui/context.ts

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

packages/theme/package.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/theme",
+  "version": "0.0.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anomalyco/opencode.git",
+    "directory": "packages/theme"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./tui": "./src/tui/index.ts",
+    "./tui/v1": "./src/tui/v1.ts"
+  },
+  "scripts": {
+    "build": "bun run script/build.ts",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@opentui/core": "catalog:",
+    "effect": "catalog:"
+  },
+  "devDependencies": {
+    "@tsconfig/bun": "catalog:",
+    "@types/bun": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "typescript": "catalog:"
+  }
+}

packages/theme/script/build.ts

@@ -0,0 +1,9 @@
+#!/usr/bin/env bun
+
+import { $ } from "bun"
+import { fileURLToPath } from "node:url"
+
+process.chdir(fileURLToPath(new URL("..", import.meta.url)))
+
+await $`rm -rf dist`
+await $`bun tsc -p tsconfig.build.json`

packages/theme/script/publish.ts

@@ -0,0 +1,45 @@
+#!/usr/bin/env bun
+
+import { Script } from "@opencode-ai/script"
+import { $ } from "bun"
+import { rm } from "node:fs/promises"
+import { fileURLToPath } from "node:url"
+
+process.chdir(fileURLToPath(new URL("..", import.meta.url)))
+
+const originalText = await Bun.file("package.json").text()
+const pkg = JSON.parse(originalText) as {
+  name: string
+  version: string
+  exports: Record<string, string | { import: string; types: string }>
+}
+const tarball = `${pkg.name.replace("@", "").replace("/", "-")}-${pkg.version}.tgz`
+
+if ((await $`npm view ${pkg.name}@${pkg.version} version`.nothrow()).exitCode === 0) {
+  console.log(`already published ${pkg.name}@${pkg.version}`)
+  process.exit(0)
+}
+
+try {
+  await $`bun run typecheck`
+  await $`bun run build`
+  pkg.exports = Object.fromEntries(
+    Object.entries(pkg.exports).map(([key, value]) => {
+      if (typeof value !== "string") return [key, value]
+      return [
+        key,
+        {
+          import: value.replace("./src/", "./dist/").replace(/\.ts$/, ".js"),
+          types: value.replace("./src/", "./dist/").replace(/\.ts$/, ".d.ts"),
+        },
+      ]
+    }),
+  )
+  await Bun.write("package.json", JSON.stringify(pkg, null, 2) + "\n")
+  await rm(tarball, { force: true })
+  await $`bun pm pack`
+  await $`npm publish ${tarball} --tag ${Script.channel} --access public`
+} finally {
+  await Bun.write("package.json", originalText)
+  await rm(tarball, { force: true })
+}

packages/theme/src/tui/color.ts

@@ -0,0 +1,77 @@
+type OklchColor = {
+  l: number
+  c: number
+  h: number
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value))
+}
+
+function hue(value: number) {
+  return ((value % 360) + 360) % 360
+}
+
+function linearToSrgb(value: number) {
+  if (value <= 0.0031308) return value * 12.92
+  return 1.055 * Math.pow(value, 1 / 2.4) - 0.055
+}
+
+function srgbToLinear(value: number) {
+  if (value <= 0.04045) return value / 12.92
+  return Math.pow((value + 0.055) / 1.055, 2.4)
+}
+
+export function rgbToOklch(red: number, green: number, blue: number): OklchColor {
+  const linearRed = srgbToLinear(red)
+  const linearGreen = srgbToLinear(green)
+  const linearBlue = srgbToLinear(blue)
+  const lRoot = Math.cbrt(0.4122214708 * linearRed + 0.5363325363 * linearGreen + 0.0514459929 * linearBlue)
+  const mRoot = Math.cbrt(0.2119034982 * linearRed + 0.6806995451 * linearGreen + 0.1073969566 * linearBlue)
+  const sRoot = Math.cbrt(0.0883024619 * linearRed + 0.2817188376 * linearGreen + 0.6299787005 * linearBlue)
+  const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot
+  const b = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot
+  const chroma = Math.sqrt(a * a + b * b)
+  const angle = Math.atan2(b, a) * (180 / Math.PI)
+  return { l: lightness, c: chroma, h: angle < 0 ? angle + 360 : angle }
+}
+
+function oklchToRgb(color: OklchColor) {
+  const a = color.c * Math.cos((color.h * Math.PI) / 180)
+  const b = color.c * Math.sin((color.h * Math.PI) / 180)
+  const lRoot = color.l + 0.3963377774 * a + 0.2158037573 * b
+  const mRoot = color.l - 0.1055613458 * a - 0.0638541728 * b
+  const sRoot = color.l - 0.0894841775 * a - 1.291485548 * b
+  const l = lRoot * lRoot * lRoot
+  const m = mRoot * mRoot * mRoot
+  const s = sRoot * sRoot * sRoot
+  return {
+    r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+  }
+}
+
+function fitOklch(color: OklchColor): OklchColor {
+  const base = { l: clamp(color.l, 0, 1), c: Math.max(0, color.c), h: hue(color.h) }
+  const rgb = oklchToRgb(base)
+  if (rgb.r >= 0 && rgb.r <= 1 && rgb.g >= 0 && rgb.g <= 1 && rgb.b >= 0 && rgb.b <= 1) return base
+
+  const fitted = Array.from({ length: 24 }).reduce<OklchColor | undefined>((result, _, index) => {
+    if (result) return result
+    const next = { ...base, c: base.c * Math.pow(0.9, index + 1) }
+    const output = oklchToRgb(next)
+    if (output.r >= 0 && output.r <= 1 && output.g >= 0 && output.g <= 1 && output.b >= 0 && output.b <= 1) return next
+  }, undefined)
+  return fitted ?? { ...base, c: 0 }
+}
+
+export function oklchToHex(color: OklchColor) {
+  const rgb = oklchToRgb(fitOklch(color))
+  const toHex = (value: number) =>
+    Math.round(clamp(value, 0, 1) * 255)
+      .toString(16)
+      .padStart(2, "0")
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
+}

packages/theme/src/tui/defaults.ts

@@ -1,4 +1,4 @@
-import type { HueName, ThemeDocument } from "./schema"
+import type { HueName, ThemeDocument } from "./schema.js"
 
 export const DEFAULT_CATEGORICAL = [
   "blue",

packages/theme/src/tui/expand.ts

@@ -4,8 +4,8 @@ import type {
   StatefulColorDefinition,
   TextDefinition,
   ThemeTokensDefinition,
-} from "./index"
-import { ActionState } from "./schema"
+} from "./index.js"
+import { ActionState } from "./schema.js"
 
 export function expandTheme<Definition extends ModeDefinition>(definition: Definition): Definition {
   return {

packages/theme/src/tui/fallback.ts

@@ -0,0 +1,57 @@
+import type { ThemeTokensDefinition } from "./index.js"
+import { ActionVariant, FeedbackKind } from "./schema.js"
+
+export function fallback(): ThemeTokensDefinition {
+  const red = "#ff0000"
+
+  return {
+    text: {
+      default: red,
+      action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
+      formfield: { default: red },
+      feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
+    },
+    background: {
+      default: red,
+      surface: { offset: red, overlay: red },
+      action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
+      formfield: { default: red },
+      feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
+    },
+    border: { default: red },
+    scrollbar: { default: red },
+    diff: {
+      text: { added: red, removed: red, context: red, hunkHeader: red },
+      background: { added: red, removed: red, context: red },
+      highlight: { added: red, removed: red },
+      lineNumber: { text: red, background: { added: red, removed: red } },
+    },
+    syntax: {
+      comment: red,
+      keyword: red,
+      function: red,
+      variable: red,
+      string: red,
+      number: red,
+      type: red,
+      operator: red,
+      punctuation: red,
+    },
+    markdown: {
+      text: red,
+      heading: red,
+      link: red,
+      linkText: red,
+      code: red,
+      blockQuote: red,
+      emphasis: red,
+      strong: red,
+      horizontalRule: red,
+      listItem: red,
+      listEnumeration: red,
+      image: red,
+      imageText: red,
+      codeBlock: red,
+    },
+  }
+}

packages/theme/src/tui/index.ts

@@ -29,7 +29,7 @@ export {
   type ContextKey,
   type TextDefinition,
   type ThemeTokensDefinition,
-} from "./schema"
+} from "./schema.js"
 
 export type {
   Categorical,
@@ -42,7 +42,9 @@ export type {
   ResolvedTheme,
   ResolvedThemeView,
   StatefulColor,
-} from "./types"
-export { DEFAULT_CATEGORICAL } from "./defaults"
-export { migrateV1 } from "./v1-migrate"
-export { selectTheme, selectThemeMode, supportsThemeMode, themeModes } from "./select"
+} from "./types.js"
+export { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js"
+export { migrateV1 } from "./v1-migrate.js"
+export { resolveTheme, resolveThemeDocument, themeDecodeError } from "./resolve.js"
+export { selectTheme, selectThemeMode, supportsThemeMode, themeModes } from "./select.js"
+export { generateSyntax } from "./syntax.js"

packages/theme/src/tui/resolve.ts

@@ -1,8 +1,8 @@
 import { RGBA } from "@opentui/core"
 import { Schema } from "effect"
-import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults"
-import { expandTheme, expandTokens, mergeTheme } from "./expand"
-import { fallback } from "./fallback"
+import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js"
+import { expandTheme, expandTokens, mergeTheme } from "./expand.js"
+import { fallback } from "./fallback.js"
 import {
   ActionState,
   ActionVariant,
@@ -12,7 +12,7 @@ import {
   HueStep,
   ThemeDefinition,
   ThemeDocument,
-} from "./schema"
+} from "./schema.js"
 import type {
   ActionStateKey,
   HueDefinition,
@@ -22,8 +22,8 @@ import type {
   ResolvedThemeView,
   StatefulColorDefinition,
   ThemeTokensDefinition,
-} from "./index"
-import { selectTheme, selectThemeMode } from "./select"
+} from "./index.js"
+import { selectTheme, selectThemeMode } from "./select.js"
 
 const decodeThemeDefinitionSchema = Schema.decodeUnknownSync(ThemeDefinition)
 

packages/theme/src/tui/select.ts

@@ -1,4 +1,4 @@
-import { expandTheme, mergeTheme } from "./expand"
+import { expandTheme, mergeTheme } from "./expand.js"
 import type {
   FileThemeDefinition,
   MergeModeDefinition,
@@ -6,7 +6,7 @@ import type {
   ModeDefinition,
   ThemeDefinition,
   ThemeDocument,
-} from "./index"
+} from "./index.js"
 
 export function selectTheme(
   document: ThemeDocument & { light: ThemeDefinition; dark: ThemeDefinition },

packages/theme/src/tui/syntax.ts

@@ -1,5 +1,5 @@
 import { SyntaxStyle, type RGBA, type ThemeTokenStyle } from "@opentui/core"
-import type { Mode, ResolvedThemeView } from "./index"
+import type { Mode, ResolvedThemeView } from "./index.js"
 
 export function generateSyntax(theme: ResolvedThemeView, mode: Mode) {
   const step = mode === "light" ? 800 : 200

packages/theme/src/tui/types.ts

@@ -9,7 +9,7 @@ import type {
   MarkdownToken,
   ContextKey,
   SyntaxToken,
-} from "./schema"
+} from "./schema.js"
 
 export type ResolvedActionState = "default" | ActionState
 export type ResolvedFormfieldState = ResolvedActionState

packages/theme/src/tui/v1-migrate.ts

@@ -1,9 +1,9 @@
 import { RGBA } from "@opentui/core"
-import { oklchToHex, rgbToOklch } from "@opencode-ai/ui/theme/color"
-import type { Theme, ThemeV1Json } from "../v1"
-import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults"
-import type { FileThemeDefinition, Mode, ThemeDocument } from "./index"
-import { HueStep } from "./schema"
+import { oklchToHex, rgbToOklch } from "./color.js"
+import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js"
+import type { FileThemeDefinition, Mode, ThemeDocument } from "./index.js"
+import { HueStep } from "./schema.js"
+import type { Theme, ThemeV1Json } from "./v1.js"
 
 type ThemeColor = Exclude<keyof Theme, "thinkingOpacity" | "_hasSelectedListItemText">
 type ChromaticHue = "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple"

packages/theme/src/tui/v1.ts

@@ -0,0 +1,76 @@
+import type { RGBA } from "@opentui/core"
+
+export type Theme = {
+  readonly primary: RGBA
+  readonly secondary: RGBA
+  readonly accent: RGBA
+  readonly error: RGBA
+  readonly warning: RGBA
+  readonly success: RGBA
+  readonly info: RGBA
+  readonly text: RGBA
+  readonly textMuted: RGBA
+  readonly selectedListItemText: RGBA
+  readonly background: RGBA
+  readonly backgroundPanel: RGBA
+  readonly backgroundElement: RGBA
+  readonly backgroundMenu: RGBA
+  readonly border: RGBA
+  readonly borderActive: RGBA
+  readonly borderSubtle: RGBA
+  readonly diffAdded: RGBA
+  readonly diffRemoved: RGBA
+  readonly diffContext: RGBA
+  readonly diffHunkHeader: RGBA
+  readonly diffHighlightAdded: RGBA
+  readonly diffHighlightRemoved: RGBA
+  readonly diffAddedBg: RGBA
+  readonly diffRemovedBg: RGBA
+  readonly diffContextBg: RGBA
+  readonly diffLineNumber: RGBA
+  readonly diffAddedLineNumberBg: RGBA
+  readonly diffRemovedLineNumberBg: RGBA
+  readonly markdownText: RGBA
+  readonly markdownHeading: RGBA
+  readonly markdownLink: RGBA
+  readonly markdownLinkText: RGBA
+  readonly markdownCode: RGBA
+  readonly markdownBlockQuote: RGBA
+  readonly markdownEmph: RGBA
+  readonly markdownStrong: RGBA
+  readonly markdownHorizontalRule: RGBA
+  readonly markdownListItem: RGBA
+  readonly markdownListEnumeration: RGBA
+  readonly markdownImage: RGBA
+  readonly markdownImageText: RGBA
+  readonly markdownCodeBlock: RGBA
+  readonly syntaxComment: RGBA
+  readonly syntaxKeyword: RGBA
+  readonly syntaxFunction: RGBA
+  readonly syntaxVariable: RGBA
+  readonly syntaxString: RGBA
+  readonly syntaxNumber: RGBA
+  readonly syntaxType: RGBA
+  readonly syntaxOperator: RGBA
+  readonly syntaxPunctuation: RGBA
+  readonly thinkingOpacity: number
+  _hasSelectedListItemText: boolean
+}
+
+export type ThemeColor = Exclude<keyof Theme, "thinkingOpacity" | "_hasSelectedListItemText">
+export type HexColor = `#${string}`
+export type RefName = string
+export type Variant = {
+  dark: HexColor | RefName
+  light: HexColor | RefName
+}
+export type ColorValue = HexColor | RefName | Variant | RGBA | number
+export type ThemeV1Json = {
+  $schema?: string
+  defs?: Record<string, HexColor | RefName>
+  theme: Omit<Record<ThemeColor, ColorValue>, "selectedListItemText" | "backgroundMenu"> & {
+    selectedListItemText?: ColorValue
+    backgroundMenu?: ColorValue
+    thinkingOpacity?: number
+  }
+}

packages/theme/sst-env.d.ts

@@ -0,0 +1,10 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/* deno-fmt-ignore-file */
+/* biome-ignore-all lint: auto-generated */
+
+/// <reference path="../../sst-env.d.ts" />
+
+import "sst"
+export {}

packages/theme/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "noEmit": false,
+    "declaration": true
+  },
+  "include": ["src"]
+}

packages/theme/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/bun/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "allowImportingTsExtensions": false,
+    "allowJs": false,
+    "noUncheckedIndexedAccess": false
+  }
+}

packages/tui/package.json

@@ -83,6 +83,7 @@
     "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/schema": "workspace:*",
     "@opencode-ai/simulation": "workspace:*",
+    "@opencode-ai/theme": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
     "@opencode-ai/util": "workspace:*",
     "@opentui/core": "catalog:",

packages/tui/src/app.tsx

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

packages/tui/src/context/theme.tsx

@@ -1,5 +1,6 @@
 import { CliRenderEvents, SyntaxStyle, type TerminalColors } from "@opentui/core"
 import { useRenderer } from "@opentui/solid"
+import { generateSyntax, resolveThemeDocument, themeModes } from "@opencode-ai/theme/tui"
 import {
   DEFAULT_THEMES,
   addTheme,
@@ -14,12 +15,9 @@ import {
   type Theme,
   type ThemeDocumentSource,
 } from "../theme"
-import { generateSyntax } from "../theme/v2/syntax"
 import { generateSystem, terminalMode } from "../theme/system"
 import { discoverThemes, themeDirectories } from "../theme/discovery"
-import { createComponentTheme, type ComponentTheme } from "../theme/v2/component"
-import { resolveThemeDocument } from "../theme/v2/resolve"
-import { themeModes } from "../theme/v2/select"
+import { createComponentTheme, type ComponentTheme } from "../theme/component"
 import { createEffect, createMemo, onCleanup, onMount, type Accessor, type ParentProps } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "./helper"

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

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

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

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

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

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

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

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

packages/tui/src/plugin/context.tsx

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

packages/tui/src/routes/home.tsx

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

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

@@ -5,11 +5,13 @@ import { useDirectory } from "../../context/directory"
 import { useConnected } from "../../component/use-connected"
 import { createStore } from "solid-js/store"
 import { useRoute } from "../../context/route"
+import { usePermission } from "../../context/permission"
 
 export function Footer() {
   const { themeV2 } = useTheme()
   const data = useData()
   const route = useRoute()
+  const permission = usePermission()
   const mcp = createMemo(
     () => (data.location.mcp.server.list() ?? []).filter((x) => x.status.status === "connected").length,
   )
@@ -61,7 +63,7 @@ export function Footer() {
             </text>
           </Match>
           <Match when={connected()}>
-            <Show when={permissions().length > 0}>
+            <Show when={permission.mode !== "auto" && permissions().length > 0}>
               <text fg={themeV2.text.feedback.warning.default}>
                 <span style={{ fg: themeV2.text.feedback.warning.default }}>△</span> {permissions().length} Permission
                 {permissions().length > 1 ? "s" : ""}

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

@@ -746,11 +746,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
         <Show when={!confirm() && answerField()}>
           <box paddingLeft={1} gap={1}>
             <box>
-              <text fg={themeV2.text.default}>
-                {answerField()!.description ?? formLabel(answerField()!)}
-                {answerField()!.required ? " (required)" : ""}
-                {multi() ? " (select all that apply)" : ""}
-              </text>
+              <text fg={themeV2.text.default}>{answerField()!.description ?? formLabel(answerField()!)}</text>
             </box>
             <Show when={textual() ? answerField()!.key : undefined} keyed>
               <box paddingLeft={1}>

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

@@ -77,7 +77,6 @@ import { nextThinkingMode, reasoningSummary, type ThinkingMode } from "../../con
 import { getScrollAcceleration } from "../../util/scroll"
 import { collapseToolOutput } from "../../util/collapse-tool-output"
 import { usePluginRuntime } from "../../plugin/runtime"
-import { PluginSlot } from "../../plugin/context"
 import { Keymap, type KeymapCommand } from "../../context/keymap"
 import { usePathFormatter } from "../../context/path-format"
 import { useLocation } from "../../context/location"
@@ -158,6 +157,7 @@ export function Session() {
       (sessionID) => data.session.permission.list(sessionID) ?? [],
     )
   })
+  const promptedPermissions = createMemo(() => (local.permission.mode === "auto" ? [] : permissions()))
   const forms = createMemo(() => {
     const global = data.session.form.list("global", location()) ?? []
     if (session()?.parentID) return global
@@ -169,7 +169,7 @@ export function Session() {
     open: false,
     tab: undefined as string | undefined,
   })
-  const disabled = createMemo(() => permissions().length > 0 || forms().length > 0)
+  const disabled = createMemo(() => promptedPermissions().length > 0 || forms().length > 0)
 
   const pending = createMemo(() => {
     const completed = messages().findLast((x) => x.type === "assistant" && x.time.completed)?.id
@@ -915,7 +915,6 @@ export function Session() {
     >
       <box flexDirection="row" flexGrow={1} minHeight={0}>
         <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
-          <PluginSlot name="session.header" input={{ sessionID: route.sessionID }} />
           <Show when={session()}>
             <scrollbox
               ref={(r) => (scroll = r)}
@@ -960,7 +959,6 @@ export function Session() {
               </Show>
             </scrollbox>
             <box flexShrink={0}>
-              <PluginSlot name="session.composer.top" input={{ sessionID: route.sessionID }} />
               <Composer
                 sessionID={route.sessionID}
                 open={composer.open || (!!session()?.parentID && forms().length === 0)}
@@ -969,10 +967,10 @@ export function Session() {
               />
               <Switch>
                 <Match when={composer.open || (!!session()?.parentID && forms().length === 0)}>{null}</Match>
-                <Match when={permissions().length > 0}>
-                  <Show when={permissions()[0]?.id} keyed>
+                <Match when={promptedPermissions().length > 0}>
+                  <Show when={promptedPermissions()[0]?.id} keyed>
                     {(_) => {
-                      const request = permissions()[0]
+                      const request = promptedPermissions()[0]
                       return request ? (
                         <PermissionPrompt request={request} directory={session()?.location.directory} />
                       ) : null
@@ -2327,6 +2325,17 @@ function GenericTool(props: ToolProps) {
   )
 }
 
+function useToolPermission(part: () => SessionMessageAssistantTool | undefined) {
+  const ctx = use()
+  const data = useData()
+  const local = useLocal()
+  return createMemo(() => {
+    if (local.permission.mode === "auto") return false
+    const request = data.session.permission.list(ctx.sessionID)?.[0]
+    return request?.source?.type === "tool" && request.source.callID === part()?.id
+  })
+}
+
 function InlineTool(props: {
   icon: string
   iconColor?: RGBA
@@ -2341,16 +2350,10 @@ function InlineTool(props: {
   onClick?: () => void
 }) {
   const { themeV2 } = useTheme()
-  const ctx = use()
-  const data = useData()
   const renderer = useRenderer()
   const [hover, setHover] = createSignal(false)
   const [errorExpanded, setErrorExpanded] = createSignal(false)
-
-  const permission = createMemo(() => {
-    const request = data.session.permission.list(ctx.sessionID)?.[0]
-    return request?.source?.type === "tool" && request.source.callID === props.part.id
-  })
+  const permission = useToolPermission(() => props.part)
 
   const error = createMemo(() => (props.part.state.status === "error" ? props.part.state.error.message : undefined))
 
@@ -2529,15 +2532,10 @@ function BlockTool(props: BlockToolProps) {
 function BlockToolContent(props: BlockToolProps & { borderColor: RGBA }) {
   const { themeV2 } = useTheme()
   const ctx = use()
-  const data = useData()
   const renderer = useRenderer()
   const [hover, setHover] = createSignal(false)
   const error = createMemo(() => (props.part?.state.status === "error" ? props.part.state.error.message : undefined))
-  const permission = createMemo(() => {
-    if (!props.part) return false
-    const request = data.session.permission.list(ctx.sessionID)?.[0]
-    return request?.source?.type === "tool" && request.source.callID === props.part.id
-  })
+  const permission = useToolPermission(() => props.part)
   return (
     <box
       border={["left"]}
@@ -2614,10 +2612,7 @@ function Shell(props: ToolProps) {
   const client = useClient()
   const data = useData()
   const pathFormatter = usePathFormatter()
-  const permission = createMemo(() => {
-    const request = data.session.permission.list(ctx.sessionID)?.[0]
-    return request?.source?.type === "tool" && request.source.callID === props.part.id
-  })
+  const permission = useToolPermission(() => props.part)
   const color = createMemo(() => (permission() ? themeV2.text.feedback.warning.default : themeV2.text.default))
   const shellID = createMemo(() => stringValue(props.metadata.shellID))
   const background = createMemo(() => Boolean(shellID()) && props.part.state.status !== "running")

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

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

packages/tui/src/theme/component.ts

@@ -1,6 +1,6 @@
 import type { RGBA } from "@opentui/core"
 import type { Accessor } from "solid-js"
-import type { Mode, ResolvedThemeView } from "./index"
+import type { Mode, ResolvedThemeView } from "@opencode-ai/theme/tui"
 
 export function createComponentTheme(current: Accessor<ResolvedThemeView>, mode: Accessor<Mode>) {
   return {

packages/tui/src/theme/index.ts

@@ -1,9 +1,7 @@
 import { Schema } from "effect"
+import { migrateV1, resolveThemeDocument, ThemeDocument, themeDecodeError } from "@opencode-ai/theme/tui"
 import { resolveThemeColors } from "./resolve"
 import { DEFAULT_THEMES, type Theme, type ThemeV1Json } from "./v1"
-import { resolveThemeDocument, themeDecodeError } from "./v2/resolve"
-import { ThemeDocument } from "./v2/schema"
-import { migrateV1 } from "./v2/v1-migrate"
 
 export { DEFAULT_THEMES, generateSyntax, selectedForeground, type Theme, type ThemeV1Json } from "./v1"
 export { resolveThemeDocument, type ThemeDocument }

packages/tui/src/theme/v1.ts

@@ -1,4 +1,5 @@
 import { RGBA, SyntaxStyle } from "@opentui/core"
+import type { Theme, ThemeV1Json } from "@opencode-ai/theme/tui/v1"
 import aura from "./assets/aura.json" with { type: "json" }
 import ayu from "./assets/ayu.json" with { type: "json" }
 import carbonfox from "./assets/carbonfox.json" with { type: "json" }
@@ -33,80 +34,7 @@ import vercel from "./assets/vercel.json" with { type: "json" }
 import vesper from "./assets/vesper.json" with { type: "json" }
 import zenburn from "./assets/zenburn.json" with { type: "json" }
 
-export type Theme = {
-  readonly primary: RGBA
-  readonly secondary: RGBA
-  readonly accent: RGBA
-  readonly error: RGBA
-  readonly warning: RGBA
-  readonly success: RGBA
-  readonly info: RGBA
-  readonly text: RGBA
-  readonly textMuted: RGBA
-  readonly selectedListItemText: RGBA
-  readonly background: RGBA
-  readonly backgroundPanel: RGBA
-  readonly backgroundElement: RGBA
-  readonly backgroundMenu: RGBA
-  readonly border: RGBA
-  readonly borderActive: RGBA
-  readonly borderSubtle: RGBA
-  readonly diffAdded: RGBA
-  readonly diffRemoved: RGBA
-  readonly diffContext: RGBA
-  readonly diffHunkHeader: RGBA
-  readonly diffHighlightAdded: RGBA
-  readonly diffHighlightRemoved: RGBA
-  readonly diffAddedBg: RGBA
-  readonly diffRemovedBg: RGBA
-  readonly diffContextBg: RGBA
-  readonly diffLineNumber: RGBA
-  readonly diffAddedLineNumberBg: RGBA
-  readonly diffRemovedLineNumberBg: RGBA
-  readonly markdownText: RGBA
-  readonly markdownHeading: RGBA
-  readonly markdownLink: RGBA
-  readonly markdownLinkText: RGBA
-  readonly markdownCode: RGBA
-  readonly markdownBlockQuote: RGBA
-  readonly markdownEmph: RGBA
-  readonly markdownStrong: RGBA
-  readonly markdownHorizontalRule: RGBA
-  readonly markdownListItem: RGBA
-  readonly markdownListEnumeration: RGBA
-  readonly markdownImage: RGBA
-  readonly markdownImageText: RGBA
-  readonly markdownCodeBlock: RGBA
-  readonly syntaxComment: RGBA
-  readonly syntaxKeyword: RGBA
-  readonly syntaxFunction: RGBA
-  readonly syntaxVariable: RGBA
-  readonly syntaxString: RGBA
-  readonly syntaxNumber: RGBA
-  readonly syntaxType: RGBA
-  readonly syntaxOperator: RGBA
-  readonly syntaxPunctuation: RGBA
-  readonly thinkingOpacity: number
-  _hasSelectedListItemText: boolean
-}
-
-export type ThemeColor = Exclude<keyof Theme, "thinkingOpacity" | "_hasSelectedListItemText">
-export type HexColor = `#${string}`
-export type RefName = string
-export type Variant = {
-  dark: HexColor | RefName
-  light: HexColor | RefName
-}
-export type ColorValue = HexColor | RefName | Variant | RGBA | number
-export type ThemeV1Json = {
-  $schema?: string
-  defs?: Record<string, HexColor | RefName>
-  theme: Omit<Record<ThemeColor, ColorValue>, "selectedListItemText" | "backgroundMenu"> & {
-    selectedListItemText?: ColorValue
-    backgroundMenu?: ColorValue
-    thinkingOpacity?: number
-  }
-}
+export type { ColorValue, HexColor, RefName, Theme, ThemeColor, ThemeV1Json, Variant } from "@opencode-ai/theme/tui/v1"
 
 export const DEFAULT_THEMES: Record<string, ThemeV1Json> = {
   aura,

packages/tui/src/theme/v2/fallback.ts

@@ -1,57 +0,0 @@
-import type { ThemeTokensDefinition } from "./index"
-import { ActionVariant, FeedbackKind } from "./schema"
-
-export function fallback(): ThemeTokensDefinition {
-  const red = "#ff0000"
-
-  return {
-    text: {
-        default: red,
-        action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
-        formfield: { default: red },
-        feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
-    },
-    background: {
-        default: red,
-        surface: { offset: red, overlay: red },
-        action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
-        formfield: { default: red },
-        feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
-    },
-    border: { default: red },
-    scrollbar: { default: red },
-    diff: {
-        text: { added: red, removed: red, context: red, hunkHeader: red },
-        background: { added: red, removed: red, context: red },
-        highlight: { added: red, removed: red },
-        lineNumber: { text: red, background: { added: red, removed: red } },
-    },
-    syntax: {
-        comment: red,
-        keyword: red,
-        function: red,
-        variable: red,
-        string: red,
-        number: red,
-        type: red,
-        operator: red,
-        punctuation: red,
-    },
-    markdown: {
-        text: red,
-        heading: red,
-        link: red,
-        linkText: red,
-        code: red,
-        blockQuote: red,
-        emphasis: red,
-        strong: red,
-        horizontalRule: red,
-        listItem: red,
-        listEnumeration: red,
-        image: red,
-        imageText: red,
-        codeBlock: red,
-    },
-  }
-}

packages/tui/src/theme/v2/solid.ts

@@ -1,52 +0,0 @@
-import { createComponent, createContext, useContext, type Accessor, type ParentProps } from "solid-js"
-import { createComponentTheme, type ComponentTheme } from "./component"
-import type { ContextKey, Mode, ResolvedTheme } from "./index"
-
-type ThemeRuntime = {
-  readonly resolved: Accessor<ResolvedTheme>
-  readonly mode: Accessor<Mode>
-  readonly component: ComponentTheme
-}
-
-const ThemeContext = createContext<ThemeRuntime>()
-
-export function ThemeProvider(props: ParentProps<{ theme: ResolvedTheme; mode?: Mode }>) {
-  const resolved = () => props.theme
-  const mode = () => props.mode ?? "light"
-  return createComponent(ThemeContext.Provider, {
-    value: { resolved, mode, component: createComponentTheme(resolved, mode) },
-    get children() {
-      return props.children
-    },
-  })
-}
-
-export function ContextProvider(props: ParentProps<{ context: ContextKey }>) {
-  const parent = runtime()
-  const context = () => {
-    const value = parent.resolved().contexts[props.context]
-    if (!value) throw new Error(`Theme context is not defined: ${props.context}`)
-    return value
-  }
-  context()
-  return createComponent(ThemeContext.Provider, {
-    value: { resolved: parent.resolved, mode: parent.mode, component: createComponentTheme(context, parent.mode) },
-    get children() {
-      return props.children
-    },
-  })
-}
-
-export function useTheme() {
-  return runtime().component
-}
-
-export function useResolvedTheme() {
-  return runtime().resolved
-}
-
-function runtime() {
-  const context = useContext(ThemeContext)
-  if (!context) throw new Error("Theme context must be used within a ThemeProvider")
-  return context
-}

packages/tui/test/cli/tui/theme-mode.test.tsx

@@ -2,10 +2,9 @@
 import { testRender } from "@opentui/solid"
 import { expect, test } from "bun:test"
 import { RGBA } from "@opentui/core"
+import { DEFAULT_THEME, selectTheme } from "@opencode-ai/theme/tui"
 import { createTuiResolvedConfig } from "../../fixture/tui-runtime"
 import { DEFAULT_THEMES } from "../../../src/theme"
-import { DEFAULT_THEME } from "../../../src/theme/v2/defaults"
-import { selectTheme } from "../../../src/theme/v2/select"
 import { ConfigProvider } from "../../../src/config"
 import { ThemeProvider, useTheme, type ThemeError } from "../../../src/context/theme"
 

packages/tui/test/theme/v2/component.test.ts

@@ -1,11 +1,8 @@
 import { expect, test } from "bun:test"
 import { createSignal } from "solid-js"
 import { RGBA } from "@opentui/core"
-import { createComponentTheme } from "../../../src/theme/v2/component"
-import { DEFAULT_THEME } from "../../../src/theme/v2/defaults"
-import { resolveTheme } from "../../../src/theme/v2/resolve"
-import { selectTheme } from "../../../src/theme/v2/select"
-import type { ContextKey } from "../../../src/theme/v2"
+import { DEFAULT_THEME, resolveTheme, selectTheme, type ContextKey } from "@opencode-ai/theme/tui"
+import { createComponentTheme } from "../../../src/theme/component"
 
 test("provides reactive properties, states, contexts, and color operations", () => {
   const [resolved, setResolved] = createSignal(resolveTheme(selectTheme(DEFAULT_THEME, "light")))

packages/tui/test/theme/v2/resolve.test.ts

@@ -1,10 +1,14 @@
 import { expect, test } from "bun:test"
 import { RGBA } from "@opentui/core"
+import {
+  DEFAULT_THEME,
+  resolveTheme,
+  resolveThemeDocument,
+  selectTheme,
+  type Mode,
+  type ThemeDefinition,
+} from "@opencode-ai/theme/tui"
 import { parseTheme, type ThemeDocumentSource } from "../../../src/theme"
-import { DEFAULT_THEME } from "../../../src/theme/v2/defaults"
-import type { Mode, ThemeDefinition } from "../../../src/theme/v2"
-import { resolveTheme, resolveThemeDocument } from "../../../src/theme/v2/resolve"
-import { selectTheme } from "../../../src/theme/v2/select"
 
 const light = selectTheme(DEFAULT_THEME, "light")
 const dark = selectTheme(DEFAULT_THEME, "dark")

packages/tui/test/theme/v2/select.test.ts

@@ -1,6 +1,13 @@
 import { expect, test } from "bun:test"
-import type { HueDefinition, ThemeDefinition, ThemeDocument } from "../../../src/theme/v2"
-import { selectTheme, selectThemeMode, supportsThemeMode, themeModes } from "../../../src/theme/v2/select"
+import {
+  selectTheme,
+  selectThemeMode,
+  supportsThemeMode,
+  themeModes,
+  type HueDefinition,
+  type ThemeDefinition,
+  type ThemeDocument,
+} from "@opencode-ai/theme/tui"
 
 const hue = {} as HueDefinition
 const light = { hue, categorical: ["blue"], text: { default: "#111111", subdued: "#222222" } } satisfies ThemeDefinition

packages/tui/test/theme/v2/types.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import type { BackgroundDefinition, TextDefinition, ThemeDefinition, ThemeDocument } from "../../../src/theme/v2"
+import type { BackgroundDefinition, TextDefinition, ThemeDefinition, ThemeDocument } from "@opencode-ai/theme/tui"
 
 const text = {
   default: "$hue.neutral.900",

packages/tui/test/theme/v2/v1-migrate.test.ts

@@ -1,9 +1,13 @@
 import { expect, test } from "bun:test"
+import {
+  DEFAULT_CATEGORICAL,
+  DEFAULT_THEME,
+  migrateV1,
+  resolveThemeDocument,
+  selectThemeMode,
+  themeModes,
+} from "@opencode-ai/theme/tui"
 import { DEFAULT_THEMES, resolveTheme as resolveV1 } from "../../../src/theme"
-import { resolveThemeDocument } from "../../../src/theme/v2/resolve"
-import { selectThemeMode, themeModes } from "../../../src/theme/v2/select"
-import { migrateV1 } from "../../../src/theme/v2/v1-migrate"
-import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "../../../src/theme/v2/defaults"
 
 test("migrates resolved V1 modes into V2 tokens", () => {
   const migrated = migrateV1(DEFAULT_THEMES.opencode)

packages/www/package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@astrojs/cloudflare": "14.1.4",
+    "@opencode-ai/theme": "workspace:*",
     "@types/bun": "catalog:",
     "astro": "7.1.3",
     "effect": "catalog:",

packages/www/script/generate-theme-tokens.ts

@@ -2,7 +2,7 @@
 
 import { Schema, SchemaAST } from "effect"
 import { format } from "prettier"
-import { ThemeDefinition, ThemeDocument } from "../../tui/src/theme/v2/schema"
+import { ThemeDefinition, ThemeDocument } from "@opencode-ai/theme/tui"
 
 const target = import.meta.dir + "/../snippets/generated/theme-tokens.mdx"
 const root = requireObject(ThemeDefinition.ast)
@@ -64,7 +64,7 @@ ${JSON.stringify(example, null, 2)}
 ## Token reference
 
 This reference is generated from the Effect schema in
-\`packages/tui/src/theme/v2/schema.ts\`. Changes to the runtime schema update
+\`@opencode-ai/theme/tui\`. Changes to the runtime schema update
 this section through \`bun run generate\`.
 
 ### Hue tokens

packages/www/snippets/generated/theme-tokens.mdx

@@ -30,7 +30,7 @@
 ## Token reference
 
 This reference is generated from the Effect schema in
-`packages/tui/src/theme/v2/schema.ts`. Changes to the runtime schema update
+`@opencode-ai/theme/tui`. Changes to the runtime schema update
 this section through `bun run generate`.
 
 ### Hue tokens

script/publish.ts

@@ -38,6 +38,9 @@ await prepareReleaseFiles()
 console.log("\n=== schema ===\n")
 await $`bun ./packages/schema/script/publish.ts`
 
+console.log("\n=== theme ===\n")
+await $`bun ./packages/theme/script/publish.ts`
+
 console.log("\n=== ai ===\n")
 await $`bun ./packages/ai/script/publish.ts`