refactor(core): use native Cloudflare provider

Co-authored-by: Aiden Cline <aidenpcline@gmail.com>

packages/ai/src/providers/cloudflare-workers-ai.ts

@@ -0,0 +1,19 @@
+import type { ProviderPackage } from "../provider-package"
+import type { OpenAIProviderOptionsInput } from "./openai-options"
+import { CloudflareWorkersAI } from "./cloudflare"
+
+export interface Settings extends ProviderPackage.Settings {
+  readonly accountId?: string
+  readonly apiKey?: string
+  readonly providerOptions?: OpenAIProviderOptionsInput
+}
+
+export const model: ProviderPackage.Definition<Settings>["model"] = (modelID, settings) =>
+  CloudflareWorkersAI.configure({
+    ...(typeof settings.baseURL === "string" ? { baseURL: settings.baseURL } : { accountId: settings.accountId ?? "" }),
+    apiKey: settings.apiKey,
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    limits: settings.limits,
+    providerOptions: settings.providerOptions,
+  }).model(modelID)

packages/ai/test/provider/cloudflare-workers-ai.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test"
+import { model } from "../../src/providers/cloudflare-workers-ai"
+
+describe("Cloudflare Workers AI provider package", () => {
+  test("derives the endpoint from accountId", () => {
+    const resolved = model("@cf/model", { accountId: "account", apiKey: "secret" })
+
+    expect(resolved.route.endpoint.baseURL).toBe("https://api.cloudflare.com/client/v4/accounts/account/ai/v1")
+  })
+
+  test("preserves an explicit endpoint", () => {
+    const resolved = model("@cf/model", { baseURL: "https://proxy.example/v1", apiKey: "secret" })
+
+    expect(resolved.route.endpoint.baseURL).toBe("https://proxy.example/v1")
+  })
+})

packages/app/src/pages/session/timeline/observe-element-offset.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test"
 import { type Virtualizer } from "@tanstack/solid-virtual"
-import { Window } from "happy-dom"
+import { Node, Window } from "happy-dom"
 import { mutationNodesContainElement, observeElementOffsetReconnectAware } from "./observe-element-offset"
 
 test("matches only the scroll element or an ancestor containing it", () => {
@@ -18,6 +18,7 @@ test("matches only the scroll element or an ancestor containing it", () => {
 
 test("reports a divergent native offset once and ignores equal offsets and unrelated mutations", async () => {
   const targetWindow = new Window()
+  const mutations = controlledMutations(targetWindow)
   const route = targetWindow.document.createElement("section")
   const viewport = targetWindow.document.createElement("div")
   const unrelated = targetWindow.document.createElement("div")
@@ -40,24 +41,24 @@ test("reports a divergent native offset once and ignores equal offsets and unrel
     instance.scrollOffset = offset
   })
 
-  targetWindow.document.body.append(unrelated)
-  unrelated.remove()
-  await frames(2, targetWindow)
-  expect(calls).toEqual([])
+  try {
+    mutations.append(targetWindow.document.body, unrelated)
+    mutations.remove(unrelated)
+    expect(calls).toEqual([])
 
-  route.remove()
-  targetWindow.document.body.append(route)
-  await waitFor(() => calls.length === 1, targetWindow)
-  expect(calls).toEqual([[0, false]])
+    mutations.remove(route)
+    mutations.append(targetWindow.document.body, route)
+    await frames(2, targetWindow)
+    expect(calls).toEqual([[0, false]])
 
-  route.remove()
-  targetWindow.document.body.append(route)
-  await new Promise((resolve) => setTimeout(resolve, 0))
-  await frames(3, targetWindow)
-  expect(calls).toEqual([[0, false]])
-
-  cleanup?.()
-  await targetWindow.happyDOM.close()
+    mutations.remove(route)
+    mutations.append(targetWindow.document.body, route)
+    await frames(2, targetWindow)
+    expect(calls).toEqual([[0, false]])
+  } finally {
+    cleanup?.()
+    await targetWindow.happyDOM.close()
+  }
 })
 
 test("keeps checking until stale reset-delay callbacks can no longer win", async () => {
@@ -204,7 +205,33 @@ async function frames(count: number, targetWindow: FrameWindow = window) {
   }
 }
 
-async function waitFor(condition: () => boolean, targetWindow: FrameWindow = window) {
-  const deadline = targetWindow.performance.now() + 1_000
-  while (!condition() && targetWindow.performance.now() < deadline) await frames(1, targetWindow)
+function controlledMutations(targetWindow: Window) {
+  let emit: (record: MutationRecord) => void = () => {
+    throw new Error("Mutation observer is not active")
+  }
+  class ControlledMutationObserver {
+    constructor(callback: MutationCallback) {
+      emit = (record) => callback([record], this as unknown as MutationObserver)
+    }
+    observe() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+  Object.defineProperty(targetWindow, "MutationObserver", { value: ControlledMutationObserver })
+  const record = (target: Node, addedNodes: Node[], removedNodes: Node[]) =>
+    ({ type: "childList", target, addedNodes, removedNodes }) as unknown as MutationRecord
+  return {
+    append(parent: Node, node: Node) {
+      parent.appendChild(node)
+      emit(record(parent, [node], []))
+    },
+    remove(node: Node) {
+      const parent = node.parentNode
+      if (!parent) throw new Error("Mutation target has no parent")
+      parent.removeChild(node)
+      emit(record(parent, [], [node]))
+    },
+  }
 }

packages/cli/test/acp/lifecycle.subprocess.test.ts

@@ -11,7 +11,9 @@ import { createAcpFixture, expectOk, initialize, newSession, selectConfigOption
 describe("acp lifecycle subprocess", () => {
   test("stdin EOF exits cleanly", async () => {
     await using fixture = await createAcpFixture()
-    expect(await fixture.spawn().close()).toBe(0)
+    const acp = fixture.spawn()
+    await initialize(acp)
+    expect(await acp.close()).toBe(0)
   }, 60_000)
 
   test("close capability and close request", async () => {

packages/core/src/plugin/provider/cloudflare-workers-ai.ts

@@ -8,13 +8,14 @@ import { iife } from "../../util/iife"
 import { configuredSettings } from "./configured"
 
 const providerID = Provider.ID.make("cloudflare-workers-ai")
+const nativePackage = "@opencode-ai/ai/providers/cloudflare-workers-ai"
 
 export const CloudflareWorkersAIPlugin = define({
   id: "opencode.provider.cloudflare-workers-ai",
   effect: Effect.fn(function* (ctx) {
     const configured = yield* configuredSettings(providerID)
     const form = iife(() => {
-      if (typeof configured?.baseURL === "string" || resolveAccountId(configured ?? {})) return
+      if (hasExplicitEndpoint(configured?.baseURL) || resolveAccountId(configured ?? {})) return
       return Form.Fields.make([
         {
           type: "string",
@@ -38,12 +39,24 @@ export const CloudflareWorkersAIPlugin = define({
     yield* ctx.catalog.transform((evt) => {
       const item = evt.provider.get(providerID)
       if (!item) return
+      const compatible =
+        Provider.isAISDK(item.provider.package) &&
+        Provider.packageName(item.provider.package) === "@ai-sdk/openai-compatible"
       evt.provider.update(item.provider.id, (provider) => {
-        if (!Provider.isAISDK(provider.package)) return
-        if (typeof provider.settings?.baseURL === "string") return
-        const accountId = resolveAccountId(provider.settings ?? {})
-        if (accountId) provider.settings = { ...provider.settings, baseURL: workersEndpoint(accountId) }
+        if (!compatible) return
+        provider.package = nativePackage
+        provider.settings = nativeSettings(provider.settings)
       })
+      for (const model of item.models.values()) {
+        evt.model.update(item.provider.id, model.id, (draft) => {
+          if (!draft.package && !compatible) return
+          if (draft.package === nativePackage) return
+          if (draft.package && !Provider.isAISDK(draft.package)) return
+          if (draft.package && Provider.packageName(draft.package) !== "@ai-sdk/openai-compatible") return
+          if (draft.package) draft.package = nativePackage
+          draft.settings = nativeSettings(draft.settings)
+        })
+      }
     })
     yield* ctx.aisdk.hook(
       "sdk",
@@ -83,6 +96,17 @@ function workersEndpoint(accountId: string) {
   return `https://api.cloudflare.com/client/v4/accounts/${accountId}/ai/v1`
 }
 
+function hasExplicitEndpoint(baseURL: unknown) {
+  return typeof baseURL === "string" && !baseURL.includes("${CLOUDFLARE_ACCOUNT_ID}")
+}
+
+function nativeSettings(settings: Record<string, unknown> | undefined) {
+  const result = { ...settings }
+  if (process.env.CLOUDFLARE_ACCOUNT_ID) result.baseURL = workersEndpoint(process.env.CLOUDFLARE_ACCOUNT_ID)
+  else if (!hasExplicitEndpoint(result.baseURL)) delete result.baseURL
+  return result
+}
+
 function hasWorkersEndpoint(model: {
   readonly package?: string
   readonly settings?: Readonly<Record<string, unknown>>
@@ -93,7 +117,7 @@ function hasWorkersEndpoint(model: {
 function sdkOptions(options: Record<string, any>, app: App.Info) {
   return {
     ...options,
-    baseURL: expandAccountId(options.baseURL),
+    baseURL: expandAccountId(options.baseURL, resolveAccountId(options)),
     apiKey: process.env.CLOUDFLARE_API_KEY ?? options.apiKey,
     headers: {
       "User-Agent": `${App.useragent(app)} cloudflare-workers-ai (${os.platform()} ${os.release()}; ${os.arch()})`,
@@ -103,9 +127,9 @@ function sdkOptions(options: Record<string, any>, app: App.Info) {
   }
 }
 
-function expandAccountId(baseURL: unknown) {
+function expandAccountId(baseURL: unknown, accountId: string | undefined) {
   if (typeof baseURL !== "string") return baseURL
-  return baseURL.replaceAll("${CLOUDFLARE_ACCOUNT_ID}", process.env.CLOUDFLARE_ACCOUNT_ID ?? "${CLOUDFLARE_ACCOUNT_ID}")
+  return baseURL.replaceAll("${CLOUDFLARE_ACCOUNT_ID}", accountId ?? "${CLOUDFLARE_ACCOUNT_ID}")
 }
 
 function stringOption(options: Record<string, unknown>, key: string) {

packages/core/test/config/agent.test.ts

@@ -465,6 +465,7 @@ Use native v2 fields.`,
               },
             }),
           )
+          yield* Effect.yieldNow
 
           yield* Effect.promise(() => fs.writeFile(path.join(directory, "reviewer.md"), "Review once"))
           yield* configTest.emitChange({ type: "create", path: path.join(directory, "reviewer.md") })

packages/core/test/config/command.test.ts

@@ -185,6 +185,7 @@ Review files`,
               },
             }),
           )
+          yield* Effect.yieldNow
           yield* Effect.promise(() => fs.writeFile(path.join(directory, "review.md"), "Review once"))
           yield* configTest.emitChange({ type: "create", path: path.join(directory, "review.md") })
           yield* configTest.emitChange({ type: "update", path: path.join(directory, "review.md") })

packages/core/test/plugin/provider-cloudflare-workers-ai.test.ts

@@ -2,6 +2,8 @@ import { AISDK } from "@opencode-ai/core/aisdk"
 import { describe, expect } from "bun:test"
 import { Effect } from "effect"
 import { Catalog } from "@opencode-ai/core/catalog"
+import { Credential } from "@opencode-ai/core/credential"
+import { ModelResolver } from "@opencode-ai/core/model-resolver"
 import { Model } from "@opencode-ai/core/model"
 import { Plugin } from "@opencode-ai/core/plugin"
 import { PluginHost } from "@opencode-ai/core/plugin/host"
@@ -16,7 +18,6 @@ const it = testEffect(PluginTestLayer)
 
 const addPlugin = Effect.fn(function* () {
   const plugin = yield* Plugin.Service
-  const aisdk = yield* AISDK.Service
   const host = yield* PluginHost.make(plugin)
   yield* CloudflareWorkersAIPlugin.effect(host)
 })
@@ -103,15 +104,13 @@ describe("CloudflareWorkersAIPlugin", () => {
     ),
   )
 
-  it.effect("maps account ID to endpoint URL and creates an OpenAI-compatible SDK", () =>
+  it.effect("maps the environment account ID to the native endpoint", () =>
     withEnv({ CLOUDFLARE_ACCOUNT_ID: "acct", CLOUDFLARE_API_KEY: "key" }, () =>
       Effect.gen(function* () {
-        const plugin = yield* Plugin.Service
-        const aisdk = yield* AISDK.Service
         const catalog = yield* Catalog.Service
         yield* catalog.transform((catalog) =>
           catalog.provider.update(Provider.ID.make("cloudflare-workers-ai"), (provider) => {
-            provider.package = Provider.aisdk("test-provider")
+            provider.package = Provider.aisdk("@ai-sdk/openai-compatible")
           }),
         )
         yield* addPlugin()
@@ -119,21 +118,10 @@ describe("CloudflareWorkersAIPlugin", () => {
           (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-workers-ai")))?.methods,
         ).toContainEqual({ type: "key", label: "API key" })
         const provider = required(yield* catalog.provider.get(Provider.ID.make("cloudflare-workers-ai")))
-        const sdk = yield* aisdk.runSDK({
-          model: Model.Info.make({
-            ...Model.Info.default(Provider.ID.make("cloudflare-workers-ai"), Model.ID.make("@cf/model")),
-            modelID: Model.ID.make("@cf/model"),
-            package: provider.package,
-            settings: provider.settings,
-          }),
-          package: "@ai-sdk/openai-compatible",
-          options: { name: "cloudflare-workers-ai", headers: { custom: "header" } },
-        })
         expect(provider).toMatchObject({
-          package: "aisdk:test-provider",
+          package: "@opencode-ai/ai/providers/cloudflare-workers-ai",
           settings: { baseURL: "https://api.cloudflare.com/client/v4/accounts/acct/ai/v1" },
         })
-        expect(sdk.sdk).toBeDefined()
       }),
     ),
   )
@@ -193,19 +181,72 @@ describe("CloudflareWorkersAIPlugin", () => {
         const catalog = yield* Catalog.Service
         yield* catalog.transform((catalog) =>
           catalog.provider.update(Provider.ID.make("cloudflare-workers-ai"), (provider) => {
-            provider.package = Provider.aisdk("test-provider")
+            provider.package = Provider.aisdk("@ai-sdk/openai-compatible")
             provider.settings = { ...provider.settings, accountId: "configured-acct" }
           }),
         )
         yield* addPlugin()
         expect(required(yield* catalog.provider.get(Provider.ID.make("cloudflare-workers-ai")))).toMatchObject({
-          package: "aisdk:test-provider",
-          settings: { baseURL: "https://api.cloudflare.com/client/v4/accounts/env-acct/ai/v1" },
+          package: "@opencode-ai/ai/providers/cloudflare-workers-ai",
+          settings: {
+            accountId: "configured-acct",
+            baseURL: "https://api.cloudflare.com/client/v4/accounts/env-acct/ai/v1",
+          },
         })
       }),
     ),
   )
 
+  it.effect("passes the connected account ID to the native provider at runtime", () =>
+    withEnv({ CLOUDFLARE_ACCOUNT_ID: undefined }, () =>
+      Effect.gen(function* () {
+        const catalog = yield* Catalog.Service
+        const providerID = Provider.ID.make("cloudflare-workers-ai")
+        yield* catalog.transform((draft) => {
+          draft.provider.update(providerID, (provider) => {
+            provider.package = Provider.aisdk("@ai-sdk/openai-compatible")
+            provider.settings = {
+              accountId: "configured-acct",
+              baseURL: "https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/ai/v1",
+            }
+          })
+          draft.model.update(providerID, Model.ID.make("@cf/model"), (model) => {
+            model.settings = {
+              accountId: "model-acct",
+              baseURL: "https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/ai/v1",
+            }
+          })
+        })
+        yield* addPlugin()
+
+        const selected = required(yield* catalog.model.get(providerID, Model.ID.make("@cf/model")))
+        const { model } = yield* Effect.promise(() => import("@opencode-ai/ai/providers/cloudflare-workers-ai"))
+        const resolved = yield* ModelResolver.fromCatalogModel(
+          selected,
+          Credential.Key.make({
+            type: "key",
+            key: "secret",
+            configuration: { accountId: "connected-acct" },
+          }),
+          { loadPackage: () => Effect.succeed({ model }) },
+        )
+
+        expect(required(yield* catalog.provider.get(providerID))).toMatchObject({
+          package: "@opencode-ai/ai/providers/cloudflare-workers-ai",
+          settings: { accountId: "configured-acct" },
+        })
+        expect(selected).toMatchObject({
+          package: "@opencode-ai/ai/providers/cloudflare-workers-ai",
+          settings: { accountId: "model-acct" },
+        })
+        expect(selected.settings).not.toHaveProperty("baseURL")
+        expect(resolved.route.endpoint.baseURL).toBe(
+          "https://api.cloudflare.com/client/v4/accounts/connected-acct/ai/v1",
+        )
+      }),
+    ),
+  )
+
   it.effect("uses env API key over auth or configured API key and keeps the Cloudflare User-Agent", () =>
     withEnv({ CLOUDFLARE_ACCOUNT_ID: "acct", CLOUDFLARE_API_KEY: "env-key" }, () =>
       Effect.gen(function* () {

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

@@ -286,27 +286,30 @@ describe("ShellTool", () => {
     ),
   )
 
-  it.live("permissions compound commands separately", () =>
-    Effect.acquireUseRelease(
-      Effect.promise(() => tmpdir()),
-      (tmp) => {
-        reset()
-        return withSession(tmp.path, (registry) =>
-          executeTool(registry, call({ command: "printf one && printf two" }, "call-compound")),
-        ).pipe(
-          Effect.andThen(
-            Effect.sync(() => {
-              expect(assertions).toHaveLength(1)
-              expect(assertions[0]).toMatchObject({
-                resources: ["printf one", "printf two"],
-                save: ["printf *", "printf *"],
-              })
-            }),
-          ),
-        )
-      },
-      (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]().then(() => undefined)),
-    ),
+  it.live(
+    "permissions compound commands separately",
+    () =>
+      Effect.acquireUseRelease(
+        Effect.promise(() => tmpdir()),
+        (tmp) => {
+          reset()
+          return withSession(tmp.path, (registry) =>
+            executeTool(registry, call({ command: "printf one && printf two" }, "call-compound")),
+          ).pipe(
+            Effect.andThen(
+              Effect.sync(() => {
+                expect(assertions).toHaveLength(1)
+                expect(assertions[0]).toMatchObject({
+                  resources: ["printf one", "printf two"],
+                  save: ["printf *", "printf *"],
+                })
+              }),
+            ),
+          )
+        },
+        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]().then(() => undefined)),
+      ),
+    { timeout: 15_000 },
   )
 
   it.live(

packages/tui/src/component/dialog-config.tsx

@@ -84,6 +84,15 @@ export const settings: Setting[] = [
     values: ["none", "auto"],
     keywords: ["transcript", "messages"],
   },
+  {
+    title: "Transcript images",
+    category: "Session",
+    path: ["session", "image_preview"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+    keywords: ["attachments", "images", "tool output"],
+  },
   {
     title: "Enabled",
     category: "Tabs",

packages/tui/src/config/index.tsx

@@ -131,6 +131,9 @@ export const Info = Schema.Struct({
       grouping: Schema.optional(Schema.Literals(["auto", "none"])).annotate({
         description: "Group related transcript items automatically or render each item separately",
       }),
+      image_preview: Schema.optional(Schema.Boolean).annotate({
+        description: "Show user attachment and tool-result images in the session transcript",
+      }),
       markdown: Schema.optional(Schema.Literals(["source", "rendered"])).annotate({
         description: "Show Markdown syntax markers or conceal them in rendered transcript content",
       }),

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

@@ -24,7 +24,7 @@ import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
 import { Spinner, SPINNER_FRAMES } from "../../component/spinner"
 import { PatchDiff } from "../../component/patch-diff"
 import { createSyntaxStyleMemo, ThemeContextProvider, useTheme, useThemes } from "../../context/theme"
-import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA } from "@opentui/core"
+import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA, MouseEvent } from "@opentui/core"
 import { Prompt, type PromptRef } from "../../component/prompt"
 import type {
   ModelInfo,
@@ -54,6 +54,7 @@ import { openEditor } from "../../editor"
 import { useDialog } from "../../ui/dialog"
 import { DialogSelect } from "../../ui/dialog-select"
 import { DialogSessionRename } from "../../component/dialog-session-rename"
+import { DialogImagePreview } from "../../component/dialog-image-preview"
 import { DialogMessage } from "./dialog-message"
 import { DialogFork } from "./dialog-fork"
 import { DialogTimeline } from "./dialog-timeline"
@@ -1592,8 +1593,9 @@ function SessionGroupView(props: {
           </InlineToolRow>
         </Show>
         <Show when={expanded() && grouped().length > 0}>
-          <For each={grouped()}>{(part) => <ToolPart part={part} />}</For>
+          <For each={grouped()}>{(part) => <ToolPart part={part} images={false} />}</For>
         </Show>
+        <ToolImages parts={grouped()} />
         <For each={pending()}>{(part) => <ToolPart part={part} />}</For>
       </Show>
     </Show>
@@ -1897,6 +1899,11 @@ function UserMessage(props: { message: SessionMessageUser }) {
   const local = useLocal()
   const files = createMemo(() => props.message.files ?? [])
   const skills = createMemo(() => props.message.skills ?? [])
+  const images = createMemo(() =>
+    files().flatMap((file) =>
+      file.mime.startsWith("image/") ? [{ uri: `data:${file.mime};base64,${file.data}` }] : [],
+    ),
+  )
   const themes = useThemes()
   const theme = useTheme("elevated")
   const mode = themes.mode
@@ -1918,6 +1925,7 @@ function UserMessage(props: { message: SessionMessageUser }) {
         borderColor={delivery() ? theme.border.default : color()}
         customBorderChars={SplitBorder.customBorderChars}
       >
+        <SessionImages images={images()} paddingLeft={2} />
         <box
           onMouseOver={() => {
             setHover(true)
@@ -2210,7 +2218,7 @@ function TextPart(props: { last: boolean; part: SessionMessageAssistantText }) {
 
 // Pending messages moved to individual tool pending functions
 
-function ToolPart(props: { part: SessionMessageAssistantTool }) {
+function ToolPart(props: { part: SessionMessageAssistantTool; images?: boolean }) {
   const display = createMemo(() => toolDisplay(props.part.name))
 
   const toolprops = {
@@ -2234,7 +2242,7 @@ function ToolPart(props: { part: SessionMessageAssistantTool }) {
     },
   }
 
-  return (
+  const content = (
     <Switch>
       <Match when={display() === "shell"}>
         <Shell {...toolprops} />
@@ -2280,6 +2288,87 @@ function ToolPart(props: { part: SessionMessageAssistantTool }) {
       </Match>
     </Switch>
   )
+  return [
+    content,
+    <Show when={props.images !== false}>
+      <ToolImages parts={[props.part]} />
+    </Show>,
+  ]
+}
+
+function ToolImages(props: { parts: readonly SessionMessageAssistantTool[] }) {
+  const images = createMemo(() => props.parts.flatMap(inlineToolImages))
+  return <SessionImages images={images()} />
+}
+
+function SessionImages(props: { images: readonly { uri: string }[]; paddingLeft?: number }) {
+  const ctx = use()
+  const dialog = useDialog()
+  const dimensions = useTerminalDimensions()
+  const images = createMemo(() => (ctx.config.session?.image_preview ? props.images : []))
+  const height = createMemo(() => Math.max(4, Math.min(8, Math.floor(dimensions().height / 4))))
+  const visible = createMemo(() => images().slice(0, 3))
+
+  return (
+    <Show when={visible().length > 0}>
+      <box
+        flexDirection="row"
+        flexShrink={0}
+        paddingTop={1}
+        paddingLeft={props.paddingLeft ?? 3}
+        paddingRight={2}
+        paddingBottom={1}
+        gap={1}
+      >
+        <For each={visible()}>
+          {(image, index) => {
+            const [failed, setFailed] = createSignal(false)
+            return (
+              <box
+                width={height() * 2}
+                height={height()}
+                flexBasis={height() * 2}
+                flexShrink={1}
+                alignItems="center"
+                justifyContent="center"
+                onMouseUp={(event: MouseEvent) => {
+                  if (event.button !== 0) return
+                  event.stopPropagation()
+                  dialog.replace(() => <DialogImagePreview images={images()} initial={index()} />)
+                }}
+              >
+                <Show when={!failed()} fallback={<text>No preview</text>}>
+                  <image
+                    source={image.uri}
+                    fit="cover"
+                    protocol="auto"
+                    width="100%"
+                    height="100%"
+                    onError={() => setFailed(true)}
+                  />
+                </Show>
+              </box>
+            )
+          }}
+        </For>
+        <Show when={images().length > visible().length}>
+          <box width={8} height={height()} flexShrink={1} alignItems="center" justifyContent="center">
+            <text wrapMode="none" truncate>
+              +{images().length - visible().length} more
+            </text>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+function inlineToolImages(part: SessionMessageAssistantTool) {
+  return toolDisplayContent(part.state).flatMap((content) =>
+    content.type === "file" && content.mime.startsWith("image/") && content.uri.startsWith("data:image/")
+      ? [{ uri: content.uri }]
+      : [],
+  )
 }
 
 type ToolProps = {

packages/tui/test/config-v2.test.tsx

@@ -24,6 +24,7 @@ test("validates the session tabs setting", () => {
   expect(() => decode({ tabs: { layout: true } })).toThrow()
   expect(() => decode({ tabs: { enabled: "on" } })).toThrow()
   expect(decode({ prompt: { image_preview: true } })).toEqual({ prompt: { image_preview: true } })
+  expect(decode({ session: { image_preview: true } })).toEqual({ session: { image_preview: true } })
 })
 
 test("resolves nested config and keybind defaults", () => {