refactor(core): move image config into state

packages/core/src/config/plugin/image.ts

@@ -0,0 +1,38 @@
+export * as ConfigImagePlugin from "./image.js"
+
+import { define } from "@opencode-ai/plugin/effect/plugin"
+import { Effect, Stream } from "effect"
+import { Config } from "../../config.js"
+import { Image } from "../../image.js"
+
+export const Plugin = define({
+  id: "opencode.config.image",
+  effect: Effect.fn(function* (ctx) {
+    const config = yield* Config.Service
+    const image = yield* Image.Service
+    const loaded = { entries: yield* config.entries() }
+    yield* image.transform((draft) => {
+      for (const entry of loaded.entries) {
+        if (entry.type !== "document") continue
+        const configured = entry.info.media?.image
+        if (!configured) continue
+        draft.configure({
+          ...(configured.auto_resize === undefined ? {} : { autoResize: configured.auto_resize }),
+          ...(configured.max_width === undefined ? {} : { maxWidth: configured.max_width }),
+          ...(configured.max_height === undefined ? {} : { maxHeight: configured.max_height }),
+          ...(configured.max_base64_bytes === undefined ? {} : { maxBase64Bytes: configured.max_base64_bytes }),
+        })
+      }
+    })
+    yield* ctx.event.subscribe().pipe(
+      Stream.filter((event) => event.type === "config.updated"),
+      Stream.runForEach(() =>
+        config.entries().pipe(
+          Effect.tap((entries) => Effect.sync(() => (loaded.entries = entries))),
+          Effect.andThen(image.reload()),
+        ),
+      ),
+      Effect.forkScoped({ startImmediately: true }),
+    )
+  }),
+})

packages/core/src/image.ts

@@ -2,8 +2,8 @@ export * as Image from "./image.js"
 
 import { makeLocationNode } from "@opencode-ai/util/effect/app-node"
 import { Context, Effect, Layer, Schema } from "effect"
-import { Config } from "./config.js"
 import { FileSystem } from "./filesystem.js"
+import { State } from "./state.js"
 
 export class ResizerUnavailableError extends Schema.TaggedErrorClass<ResizerUnavailableError>()(
   "Image.ResizerUnavailableError",
@@ -32,7 +32,18 @@ export class SizeError extends Schema.TaggedErrorClass<SizeError>()("Image.SizeE
   }
 }
 
-export interface Interface {
+export type Limits = {
+  autoResize: boolean
+  maxWidth: number
+  maxHeight: number
+  maxBase64Bytes: number
+}
+
+export type Draft = {
+  configure: (limits: Partial<Limits>) => void
+}
+
+export interface Interface extends State.Transformable<Draft> {
   readonly normalize: (
     resource: string,
     content: FileSystem.Content & { readonly encoding: "base64" },
@@ -47,7 +58,23 @@ export class Service extends Context.Service<Service, Interface>()("@opencode/Im
 const layer = Layer.effect(
   Service,
   Effect.gen(function* () {
-    const config = yield* Config.Service
+    const state = State.create<Limits, Draft>({
+      name: "image",
+      initial: () => ({
+        autoResize: true,
+        maxWidth: 2_000,
+        maxHeight: 2_000,
+        maxBase64Bytes: 5 * 1024 * 1024,
+      }),
+      draft: (draft) => ({
+        configure: (limits) => {
+          if (limits.autoResize !== undefined) draft.autoResize = limits.autoResize
+          if (limits.maxWidth !== undefined) draft.maxWidth = limits.maxWidth
+          if (limits.maxHeight !== undefined) draft.maxHeight = limits.maxHeight
+          if (limits.maxBase64Bytes !== undefined) draft.maxBase64Bytes = limits.maxBase64Bytes
+        },
+      }),
+    })
     const loadAdapter = yield* Effect.cached(
       Effect.tryPromise({
         try: () => import("./image/photon.js"),
@@ -58,22 +85,11 @@ const layer = Layer.effect(
       resource: string,
       content: FileSystem.Content & { readonly encoding: "base64" },
     ) {
-      const image = Object.assign(
-        {},
-        ...(yield* config.entries()).flatMap((entry) =>
-          entry.type === "document" && entry.info.media?.image ? [entry.info.media.image] : [],
-        ),
-      )
       const normalize = yield* loadAdapter
-      return yield* normalize(resource, content, {
-        autoResize: image.auto_resize ?? true,
-        maxWidth: image.max_width ?? 2_000,
-        maxHeight: image.max_height ?? 2_000,
-        maxBase64Bytes: image.max_base64_bytes ?? 5 * 1024 * 1024,
-      })
+      return yield* normalize(resource, content, state.get())
     })
-    return Service.of({ normalize })
+    return Service.of({ transform: state.transform, reload: state.reload, normalize })
   }),
 )
 
-export const node = makeLocationNode({ service: Service, layer, deps: [Config.node] })
+export const node = makeLocationNode({ service: Service, layer, deps: [] })

packages/core/src/plugin/internal.ts

@@ -12,6 +12,7 @@ import { Config } from "../config.js"
 import { Credential } from "../credential.js"
 import { ConfigAgentPlugin } from "../config/plugin/agent.js"
 import { ConfigCommandPlugin } from "../config/plugin/command.js"
+import { ConfigImagePlugin } from "../config/plugin/image.js"
 import { ConfigInstructionPlugin } from "../config/plugin/instruction.js"
 import { ConfigProviderPlugin } from "../config/plugin/provider.js"
 import { ConfigPolicyPlugin } from "../config/plugin/policy.js"
@@ -224,6 +225,7 @@ const post = [
   ConfigReferencePlugin.Plugin,
   ConfigAgentPlugin.Plugin,
   ConfigCommandPlugin.Plugin,
+  ConfigImagePlugin.Plugin,
   ConfigSkillPlugin.Plugin,
   ConfigProviderPlugin.Plugin,
   ConfigWebSearchPlugin.Plugin,

packages/core/src/plugin/skill/opencode.md

@@ -29,10 +29,41 @@ V1 documentation and syntax may be consulted only when the user explicitly
 asks about V1 or when needed as migration input. Outputs and recommendations
 must still use V2 unless the user specifically requests a V1 result.
 
-## [Configuration](https://opencode.ai/v2/docs/config)
+## [CLI](https://opencode.ai/v2/docs/cli)
 
-OpenCode configuration uses JSON or JSONC. Include the published schema so the
-user's editor can validate fields and provide autocomplete:
+For questions about the terminal interface, command-line invocation, `run`,
+`mini`, terminal providers, or other CLI behavior, fetch the
+[CLI guide](https://opencode.ai/v2/docs/cli) and the relevant page linked from
+that section.
+
+CLI and TUI preferences are separate from OpenCode's server and project
+configuration. They live in the global `~/.config/opencode/cli.json`, or
+`$XDG_CONFIG_HOME/opencode/cli.json` when `XDG_CONFIG_HOME` is set. There is no
+project-local CLI configuration. Most preferences can also be changed from the
+TUI by pressing `Ctrl+P` and selecting **Open settings**.
+
+Fetch the full [CLI configuration guide](https://opencode.ai/v2/docs/cli/config)
+before editing `cli.json`. It covers terminal-only settings such as themes,
+keybindings, terminal plugins, scrolling, attention alerts, diff presentation,
+and terminal integration. Do not put these settings in `opencode.json(c)`.
+
+### [Keybinds](https://opencode.ai/v2/docs/cli/keybinds)
+
+Configure keybindings under `keybinds` in `cli.json`. The leader key is the
+`keybinds.leader` entry; leader timing is configured separately under
+`leader.timeout`. Bindings can use a string, an array of strings, or an object
+when event behavior such as `preventDefault` is required. Disable a binding
+with `"none"` or `false`.
+
+Never guess a command ID, default binding, or accepted key syntax. Fetch the
+full [keybind reference](https://opencode.ai/v2/docs/cli/keybinds), which lists
+the current IDs and defaults, before answering or editing a binding.
+
+## [OpenCode configuration](https://opencode.ai/v2/docs/config)
+
+OpenCode's server and project configuration uses JSON or JSONC. Include the
+published schema so the user's editor can validate fields and provide
+autocomplete:
 
 ```jsonc
 {
@@ -55,6 +86,10 @@ Common configuration fields include `model`, `default_agent`, `permissions`,
 `agents`, `commands`, `plugins`, `providers`, `mcp`, `skills`, `instructions`,
 `references`, `formatter`, and `lsp`.
 
+This configuration is distinct from `cli.json`. Use the
+[CLI configuration guide](https://opencode.ai/v2/docs/cli/config) for terminal
+preferences, especially themes and keybindings.
+
 Do not guess field names or shapes. Fetch the V2 configuration guide and its
 linked topic guide as the source of truth, and preserve unrelated settings when
 editing an existing file. Keep the published `$schema` URL in configuration

packages/core/test/config/image.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect } from "bun:test"
+import { Bus } from "@opencode-ai/core/bus"
+import { Config } from "@opencode-ai/core/config"
+import { ConfigImagePlugin } from "@opencode-ai/core/config/plugin/image"
+import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
+import { Image } from "@opencode-ai/core/image"
+import { Plugin } from "@opencode-ai/core/plugin"
+import { PluginHost } from "@opencode-ai/core/plugin/host"
+import { Document, Event, Info, type Entry } from "@opencode-ai/schema/config"
+import { Effect, Layer, Schema } from "effect"
+import { testEffect } from "../lib/effect"
+import { PluginTestLayer } from "../plugin/fixture"
+
+const it = testEffect(Layer.merge(PluginTestLayer, AppNodeBuilder.build(Image.node)))
+const decode = Schema.decodeUnknownSync(Info)
+const content = {
+  uri: "file:///pixel.png",
+  content: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+  encoding: "base64" as const,
+  mime: "image/png",
+}
+
+describe("ConfigImagePlugin.Plugin", () => {
+  it.live("merges image limits and reloads changed config", () =>
+    Effect.gen(function* () {
+      const image = yield* Image.Service
+      const bus = yield* Bus.Service
+      const config = yield* Config.Test
+      const plugins = yield* Plugin.Service
+      yield* ConfigImagePlugin.Plugin.effect(yield* PluginHost.make(plugins))
+
+      expect(yield* limits(image)).toEqual({ maxWidth: 1_200, maxHeight: 900, maxBytes: 1 })
+
+      yield* config.setEntries([document({ auto_resize: false, max_width: 700, max_base64_bytes: 1 })])
+      yield* bus.publish(Event.Updated, {})
+      yield* waitUntil(
+        limits(image).pipe(
+          Effect.map((current) => current.maxWidth === 700 && current.maxHeight === 2_000 && current.maxBytes === 1),
+        ),
+      )
+    }).pipe(
+      Effect.provide(
+        Config.testLayer([
+          document({ auto_resize: false, max_width: 1_200 }),
+          document({ max_height: 900, max_base64_bytes: 1 }),
+        ]),
+      ),
+    ),
+  )
+})
+
+function document(image: NonNullable<typeof Info.Encoded.media>["image"]): Entry {
+  return new Document({ type: "document", info: decode({ media: { image } }) })
+}
+
+const limits = Effect.fnUntraced(function* (image: Image.Interface) {
+  const error = yield* image.normalize("pixel.png", content).pipe(Effect.flip, Effect.orDie)
+  if (error._tag !== "Image.SizeError") return yield* Effect.die(error)
+  return { maxWidth: error.maxWidth, maxHeight: error.maxHeight, maxBytes: error.maxBytes }
+})
+
+const waitUntil = Effect.fnUntraced(function* (condition: Effect.Effect<boolean>) {
+  for (let attempt = 0; attempt < 200; attempt++) {
+    if (yield* condition) return
+    yield* Effect.sleep("10 millis")
+  }
+  yield* Effect.die(new Error("Timed out waiting for image config reload"))
+})

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

@@ -1,9 +1,7 @@
 import { beforeEach, describe, expect } from "bun:test"
 import path from "path"
-import { Effect, Exit, Layer, Stream } from "effect"
+import { Effect, Exit, Layer } from "effect"
 import { Config } from "@opencode-ai/core/config"
-import { Document, Info } from "@opencode-ai/schema/config"
-import { ConfigMedia } from "@opencode-ai/schema/config/media"
 import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { LayerNode } from "@opencode-ai/util/effect/layer-node"
 import { FileSystem } from "@opencode-ai/core/filesystem"
@@ -90,7 +88,7 @@ const permission = permissionLayer({
     ),
 })
 const config = Config.testLayer()
-const imageLayer = AppNodeBuilder.build(Image.node, [[Config.node, config]])
+const imageLayer = AppNodeBuilder.build(Image.node)
 const testFileSystem = Layer.effect(
   FSUtil.Service,
   FSUtil.Service.use((fs) =>
@@ -130,10 +128,9 @@ const mutation = Layer.succeed(
     },
   }),
 )
-const unavailableImage = Layer.succeed(
-  Image.Service,
-  Image.Service.of({ normalize: () => Effect.fail(new Image.ResizerUnavailableError()) }),
-)
+const unavailableImage = Layer.mock(Image.Service, {
+  normalize: () => Effect.fail(new Image.ResizerUnavailableError()),
+})
 const readLayer = (imageLayer: Layer.Layer<Image.Service>) =>
   Layer.mergeAll(
     AppNodeBuilder.build(LayerNode.group([Tool.node, readToolNode]), [
@@ -146,8 +143,9 @@ const readLayer = (imageLayer: Layer.Layer<Image.Service>) =>
       [Location.node, locationLayer],
       [Global.node, Global.layerWith({ data: Global.Path.data })],
     ]),
-    // Merge by reference so Config.Test resolves to the memoized instance.
+    // Merge by reference so Config.Test and Image.Service resolve to the memoized instances.
     config,
+    imageLayer,
   )
 const it = testEffect(readLayer(imageLayer))
 const itWithoutResizer = testEffect(readLayer(unavailableImage))
@@ -384,17 +382,8 @@ describe("ReadTool", () => {
         encoding: "base64",
         mime: "image/png",
       }
-      const configTest = yield* Config.Test
-      yield* configTest.setEntries([
-        new Document({
-          type: "document",
-          info: new Info({
-            media: new ConfigMedia.Info({
-              image: new ConfigMedia.Image({ auto_resize: false, max_width: 4 }),
-            }),
-          }),
-        }),
-      ])
+      const image = yield* Image.Service
+      yield* image.transform((draft) => draft.configure({ autoResize: false, maxWidth: 4 }))
       const registry = yield* Tool.Service
 
       expect(
@@ -427,15 +416,8 @@ describe("ReadTool", () => {
         encoding: "base64",
         mime: "image/png",
       }
-      const configTest = yield* Config.Test
-      yield* configTest.setEntries([
-        new Document({
-          type: "document",
-          info: new Info({
-            media: new ConfigMedia.Info({ image: new ConfigMedia.Image({ max_width: 4 }) }),
-          }),
-        }),
-      ])
+      const image = yield* Image.Service
+      yield* image.transform((draft) => draft.configure({ maxWidth: 4 }))
       const registry = yield* Tool.Service
       const result = yield* executeTool(registry, {
         sessionID,
@@ -466,17 +448,8 @@ describe("ReadTool", () => {
         encoding: "base64",
         mime: "image/png",
       }
-      const configTest = yield* Config.Test
-      yield* configTest.setEntries([
-        new Document({
-          type: "document",
-          info: new Info({
-            media: new ConfigMedia.Info({
-              image: new ConfigMedia.Image({ max_base64_bytes: 1 }),
-            }),
-          }),
-        }),
-      ])
+      const image = yield* Image.Service
+      yield* image.transform((draft) => draft.configure({ maxBase64Bytes: 1 }))
       const registry = yield* Tool.Service
 
       expect(

packages/tui/src/component/session-tabs.tsx

@@ -23,7 +23,7 @@ import {
   NEW_SESSION_TAB_TITLE,
   sessionTabComplete,
   sessionTabDetail,
-  sessionTabShortcutLabel,
+  sessionTabNumberLabel,
   seedSessionTabMotion,
   sessionTabOverflowWidth,
   type SessionTab,
@@ -426,7 +426,7 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                 const value = session()
                 return value ? data.project.get(value.projectID) : undefined
               })
-              const numberWidth = () => 2
+              const numberWidth = () => Math.max(2, String(items().length).length)
               const restingTitleWidth = () => Math.max(1, width() - numberWidth() - 2)
               const hoveredTitleWidth = () => Math.max(1, restingTitleWidth() - 1)
               const titleWidth = () => (hovered() === tab.sessionID ? hoveredTitleWidth() : restingTitleWidth())
@@ -657,14 +657,14 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                       backgroundColor={pulseBackground()}
                       onLevel={setSweepLevel}
                     />
-                    <box zIndex={1} width="100%" flexDirection="row" paddingLeft={1} paddingRight={1}>
+                    <box zIndex={1} width="100%" flexDirection="row" paddingRight={1}>
                       <text
-                        width={numberWidth()}
+                        width={numberWidth() + 1}
                         fg={numberColor()}
                         selectable={false}
                         attributes={selected() ? TextAttributes.BOLD : undefined}
                       >
-                        {sessionTabShortcutLabel(index())}
+                        {sessionTabNumberLabel(index()).padStart(numberWidth())}
                       </text>
                       <text
                         width={titleWidth()}
@@ -1040,8 +1040,7 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
           const glows = () => !selected() && (status().attention || (!status().busy && status().unread !== undefined))
           const title = () => tab.title ?? "Untitled session"
           const tabNumber = createMemo(() => items().findIndex((item) => item.sessionID === tab.sessionID) + 1)
-          // Shortcut labels stay one cell wide: 1-9, 0 for ten, then a neutral dot.
-          const numberWidth = () => 2
+          const numberWidth = () => Math.max(2, String(items().length).length)
           // Hovering reveals the close mark, so the title's right bound shifts left of it.
           const restingTitleWidth = () => Math.max(1, width() - 1 - numberWidth())
           const hoveredTitleWidth = () => Math.max(1, restingTitleWidth() - 2)
@@ -1141,11 +1140,8 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
                 onLevel={setSweepLevel}
               />
               <box zIndex={1} width="100%" flexDirection="row">
-                <text width={1} selectable={false}>
-                  {" "}
-                </text>
-                <text width={numberWidth()} fg={numberColor()} selectable={false} attributes={bold()}>
-                  {tab === NEW_SESSION_TAB ? "+" : sessionTabShortcutLabel(tabNumber() - 1)}
+                <text width={numberWidth() + 1} fg={numberColor()} selectable={false} attributes={bold()}>
+                  {(tab === NEW_SESSION_TAB ? "+" : sessionTabNumberLabel(tabNumber() - 1)).padStart(numberWidth())}
                 </text>
                 <text
                   width={availableTitleWidth()}

packages/tui/src/context/session-tabs-model.ts

@@ -7,10 +7,8 @@ export type SessionTabUnread = "activity" | "error"
 
 export const NEW_SESSION_TAB_TITLE = "New session"
 
-export function sessionTabShortcutLabel(index: number) {
-  if (index >= 0 && index < 9) return String(index + 1)
-  if (index === 9) return "0"
-  return "·"
+export function sessionTabNumberLabel(index: number) {
+  return String(index + 1)
 }
 
 export function sessionTabDetail(

packages/tui/test/context/session-tabs-model.test.ts

@@ -13,7 +13,7 @@ import {
   sessionTabComplete,
   sessionTabDetail,
   sessionTabOverflowWidth,
-  sessionTabShortcutLabel,
+  sessionTabNumberLabel,
 } from "../../src/context/session-tabs-model"
 
 describe("session tabs", () => {
@@ -25,8 +25,8 @@ describe("session tabs", () => {
     expect(sessionTabDetail("opencode", undefined, "main", true)).toBe("opencode")
   })
 
-  test("labels direct shortcut tabs and marks unbound tabs with a dot", () => {
-    expect(Array.from({ length: 12 }, (_, index) => sessionTabShortcutLabel(index))).toEqual([
+  test("labels tabs by ordinal", () => {
+    expect(Array.from({ length: 12 }, (_, index) => sessionTabNumberLabel(index))).toEqual([
       "1",
       "2",
       "3",
@@ -36,9 +36,9 @@ describe("session tabs", () => {
       "7",
       "8",
       "9",
-      "0",
-      "·",
-      "·",
+      "10",
+      "11",
+      "12",
     ])
   })