feat(tui): add clipboard image previews and transcript rendering

package.json

@@ -46,9 +46,9 @@
       "@octokit/rest": "22.0.0",
       "@hono/standard-validator": "0.2.0",
       "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.4.5",
-      "@opentui/keymap": "0.4.5",
-      "@opentui/solid": "0.4.5",
+      "@opentui/core": "0.0.0-20260808-9ecf7c0a",
+      "@opentui/keymap": "0.0.0-20260808-9ecf7c0a",
+      "@opentui/solid": "0.0.0-20260808-9ecf7c0a",
       "@tanstack/solid-virtual": "3.13.32",
       "@shikijs/stream": "4.2.0",
       "@standard-schema/spec": "1.1.0",
@@ -150,9 +150,9 @@
     "electron"
   ],
   "overrides": {
-    "@opentui/core": "catalog:",
-    "@opentui/keymap": "catalog:",
-    "@opentui/solid": "catalog:",
+    "@opentui/core": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/keymap": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/solid": "0.0.0-20260808-9ecf7c0a",
     "@types/bun": "catalog:",
     "@types/node": "catalog:",
     "effect": "catalog:"

packages/plugin/package.json

@@ -31,9 +31,9 @@
   },
   "peerDependencies": {
     "@opencode-ai/theme": "workspace:*",
-    "@opentui/core": ">=0.4.5",
-    "@opentui/keymap": ">=0.4.5",
-    "@opentui/solid": ">=0.4.5",
+    "@opentui/core": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/keymap": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/solid": "0.0.0-20260808-9ecf7c0a",
     "solid-js": ">=1.9.0"
   },
   "peerDependenciesMeta": {

packages/tui/package.json

@@ -93,7 +93,6 @@
     "@opentui/keymap": "catalog:",
     "@opentui/solid": "catalog:",
     "@solid-primitives/event-bus": "1.1.2",
-    "clipboardy": "4.0.0",
     "effect": "catalog:",
     "fuzzysort": "catalog:",
     "get-east-asian-width": "catalog:",

packages/tui/src/app.tsx

@@ -97,6 +97,7 @@ import { destroyRenderer } from "./util/renderer"
 import { cliErrorMessage, errorFormat } from "./util/error"
 import { AttentionProvider } from "./context/attention"
 import { StorageProvider } from "./context/storage"
+import { createTuiClipboard } from "./clipboard"
 
 registerOpencodeSpinner()
 
@@ -251,6 +252,13 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
           (renderer) => Effect.sync(() => destroyRenderer(renderer)),
         )
       })
+      const clipboard = yield* Effect.acquireRelease(
+        Effect.sync(() => createTuiClipboard(renderer)),
+        (clipboard) =>
+          Effect.tryPromise(() => clipboard.dispose()).pipe(
+            Effect.catch((error) => Effect.sync(() => log("error", "Failed to dispose TUI clipboard", { error }))),
+          ),
+      )
       win32DisableProcessedInput()
       const finalizers = new Set<() => Promise<void>>()
       yield* Effect.addFinalizer(() =>
@@ -287,7 +295,11 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                 <EpilogueProvider set={(value) => (exit.epilogue = value)}>
                   <TuiAppProvider value={input.app}>
                     <ErrorBoundary
-                      fallback={(error, reset) => <ErrorComponent error={error} reset={reset} mode={mode} />}
+                      fallback={(error, reset) => (
+                        <ClipboardProvider value={clipboard}>
+                          <ErrorComponent error={error} reset={reset} mode={mode} />
+                        </ClipboardProvider>
+                      )}
                     >
                       <TuiPathsProvider
                         value={{
@@ -336,7 +348,7 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                                   skipInitialLoading: Boolean(process.env.OPENCODE_FAST_BOOT),
                                 }}
                               >
-                                <ClipboardProvider>
+                                <ClipboardProvider value={clipboard}>
                                   <ArgsProvider {...input.args}>
                                     <ConfigProvider
                                       config={config}
@@ -504,7 +516,7 @@ function App(props: { pair?: DialogPairCredentials }) {
     if (!text || text.length === 0) return
 
     await clipboard
-      .write?.(text)
+      .write(text)
       .then(() => toast.show({ message: "Copied to clipboard", variant: "info" }))
       .catch(toast.error)
 

packages/tui/src/clipboard.ts

@@ -1,125 +1,66 @@
-import { execFile, spawn } from "node:child_process"
-import { readFile, rm } from "node:fs/promises"
-import { platform, release, tmpdir } from "node:os"
-import path from "node:path"
-import { promisify } from "node:util"
+import {
+  createClipboard,
+  createHostClipboard,
+  createRendererClipboardAdapter,
+  decodePasteBytes,
+  type ClipboardService as CoreClipboardService,
+  type RendererClipboardBoundary,
+} from "@opentui/core"
+import type { ClipboardContent, ClipboardService } from "./context/clipboard"
 
-const exec = promisify(execFile)
+export type OwnedClipboardService = Required<ClipboardService> & Readonly<{ dispose(): Promise<void> }>
 
-function command(command: string, args: string[] = [], input?: string) {
-  return new Promise<Buffer>((resolve, reject) => {
-    const child = spawn(command, args, { stdio: [input === undefined ? "ignore" : "pipe", "pipe", "ignore"] })
-    const output: Buffer[] = []
-    child.on("error", reject)
-    child.stdout?.on("data", (chunk: Buffer) => output.push(chunk))
-    child.on("close", (code) => {
-      if (code === 0) return resolve(Buffer.concat(output))
-      reject(new Error(`${command} exited with code ${code}`))
-    })
-    if (input !== undefined) child.stdin?.end(input)
-  })
+export function createTuiClipboard(renderer: RendererClipboardBoundary): OwnedClipboardService {
+  return createClipboardAdapter(
+    createClipboard({
+      host: createHostClipboard(),
+      terminal: createRendererClipboardAdapter(renderer),
+    }),
+  )
 }
 
-function writeOsc52(text: string) {
-  if (!process.stdout.isTTY) return
-  const sequence = `\x1b]52;c;${Buffer.from(text).toString("base64")}\x07`
-  const passthrough = `\x1bPtmux;\x1b${sequence}\x1b\\`
-  process.stdout.write(process.env.TMUX ? sequence + passthrough : process.env.STY ? passthrough : sequence)
-}
-
-export async function read() {
-  if (platform() === "darwin") {
-    const file = path.join(tmpdir(), "opencode-clipboard.png")
-    try {
-      await exec("osascript", [
-        "-e",
-        'set imageData to the clipboard as "PNGf"',
-        "-e",
-        `set fileRef to open for access POSIX file "${file}" with write permission`,
-        "-e",
-        "set eof fileRef to 0",
-        "-e",
-        "write imageData to fileRef",
-        "-e",
-        "close access fileRef",
-      ])
-      return { data: (await readFile(file)).toString("base64"), mime: "image/png" }
-    } catch {
-      // Fall through to text clipboard.
-    } finally {
-      await rm(file, { force: true }).catch(() => {})
-    }
-  }
-
-  if (platform() === "win32" || release().includes("WSL")) {
-    const script =
-      "Add-Type -AssemblyName System.Windows.Forms; $img = [System.Windows.Forms.Clipboard]::GetImage(); if ($img) { $ms = New-Object System.IO.MemoryStream; $img.Save($ms, [System.Drawing.Imaging.ImageFormat]::Png); [System.Convert]::ToBase64String($ms.ToArray()) }"
-    const image = await command("powershell.exe", ["-NonInteractive", "-NoProfile", "-command", script]).catch(() =>
-      Buffer.alloc(0),
-    )
-    if (image.length) return { data: image.toString().trim(), mime: "image/png" }
-  }
-
-  if (platform() === "linux") {
-    const wayland = await command("wl-paste", ["-t", "image/png"]).catch(() => Buffer.alloc(0))
-    if (wayland.length) return { data: wayland.toString("base64"), mime: "image/png" }
-    const x11 = await command("xclip", ["-selection", "clipboard", "-t", "image/png", "-o"]).catch(() =>
-      Buffer.alloc(0),
-    )
-    if (x11.length) return { data: x11.toString("base64"), mime: "image/png" }
-  }
-
-  const { default: clipboardy } = await import("clipboardy")
-  const text = await clipboardy.read().catch(() => undefined)
-  if (text) return { data: text, mime: "text/plain" }
-}
-
-export function copyCommand(
-  os: NodeJS.Platform,
-  wayland: boolean,
-  has: (name: string) => boolean,
-): string[] | undefined {
-  if (os === "darwin" && has("osascript")) return ["osascript"]
-  if (os === "linux" && wayland && has("wl-copy")) return ["wl-copy"]
-  if (os === "linux" && has("xclip")) return ["xclip", "-selection", "clipboard"]
-  if (os === "linux" && has("xsel")) return ["xsel", "--clipboard", "--input"]
-  if (os === "win32" && has("powershell.exe")) {
-    return [
-      "powershell.exe",
-      "-NonInteractive",
-      "-NoProfile",
-      "-Command",
-      "[Console]::InputEncoding = [System.Text.Encoding]::UTF8; Set-Clipboard -Value ([Console]::In.ReadToEnd())",
-    ]
-  }
-}
-
-let copyMethod: Promise<(text: string) => Promise<void>> | undefined
+export function createClipboardAdapter(clipboard: CoreClipboardService): OwnedClipboardService {
+  return {
+    async read(): Promise<ClipboardContent | undefined> {
+      const result = await clipboard.read({
+        preferredTypes: ["image/png", "text/plain"],
+        selection: "clipboard",
+      })
+      if (result.status !== "read") {
+        if (result.status === "failed") throw result.error
+        if (result.status === "timed-out") throw new Error("Clipboard read timed out")
+        if (result.status === "limit-exceeded") {
+          throw new RangeError("Clipboard content exceeded configured read or image conversion limits")
+        }
+        return undefined
+      }
 
-function getCopyMethod() {
-  return (copyMethod ??= (async () => {
-    const { which } = await import("@opencode-ai/core/util/which")
-    const native = copyCommand(platform(), Boolean(process.env.WAYLAND_DISPLAY), (name) => Boolean(which(name)))
-    if (native?.[0] === "osascript") {
-      return async (text: string) => {
-        const escaped = text.replace(/\\/g, "\\\\").replace(/"/g, '\\"')
-        await command("osascript", ["-e", `set the clipboard to "${escaped}"`]).catch(() => undefined)
+      if (result.representation.mimeType === "image/png") {
+        return {
+          data: Buffer.from(result.representation.bytes).toString("base64"),
+          mime: result.representation.mimeType,
+        }
       }
-    }
-    if (native) {
-      return async (text: string) => {
-        await command(native[0], native.slice(1), text).catch(() => undefined)
+      if (result.representation.mimeType === "text/plain") {
+        if (result.representation.bytes.length === 0) return undefined
+        return {
+          data: decodePasteBytes(result.representation.bytes),
+          mime: result.representation.mimeType,
+        }
       }
-    }
-    return async (text: string) => {
-      const { default: clipboardy } = await import("clipboardy")
-      await clipboardy.write(text).catch(() => undefined)
-    }
-  })())
-}
-
-export async function write(text: string) {
-  writeOsc52(text)
-  const method = await getCopyMethod()
-  await method(text)
+      throw new Error(`Unexpected clipboard MIME type: ${result.representation.mimeType}`)
+    },
+    async write(text) {
+      const result = await clipboard.writeText(text, {
+        destination: "all-available",
+        selection: "clipboard",
+      })
+      if (result.host.status === "written" || result.terminal.status === "attempted") return
+      if (result.host.status === "failed") throw result.host.error
+      throw new Error(`Clipboard write failed (host: ${result.host.status}, terminal: ${result.terminal.status})`)
+    },
+    dispose() {
+      return clipboard.dispose()
+    },
+  }
 }

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",
@@ -188,6 +197,15 @@ export const settings: Setting[] = [
     values: ["compact", "full"],
     keywords: ["paste summary", "clipboard", "pasted content"],
   },
+  {
+    title: "Image previews",
+    category: "Input",
+    path: ["prompt", "image_preview"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+    keywords: ["attachments", "clipboard", "images", "prompt"],
+  },
   {
     title: "Leader timeout",
     category: "Input",

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

@@ -39,7 +39,7 @@ export function DialogDebug() {
       .map((entry) => `${entry.label}: ${entry.value}`)
       .join("\n")
     void clipboard
-      .write?.(text)
+      .write(text)
       .then(() => {
         setCopied(true)
         toast.show({ message: "Debug info copied to clipboard", variant: "info" })

packages/tui/src/component/dialog-image-preview.tsx

@@ -0,0 +1,71 @@
+import { TextAttributes } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { createMemo, createSignal } from "solid-js"
+import { Keymap } from "../context/keymap"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+
+type ImagePreviewItem = Readonly<{
+  uri: string
+  mention?: Readonly<{ text: string }>
+}>
+
+export function DialogImagePreview(props: { images: readonly ImagePreviewItem[]; initial: number }) {
+  const dialog = useDialog()
+  const dimensions = useTerminalDimensions()
+  const theme = useTheme("elevated")
+  const [index, setIndex] = createSignal(Math.max(0, Math.min(props.images.length - 1, props.initial)))
+  const [failed, setFailed] = createSignal(false)
+  const current = createMemo(() => props.images[index()])
+  const imageHeight = createMemo(() => Math.max(3, dimensions().height - 8))
+
+  dialog.setSize("xlarge")
+  dialog.setCentered(true)
+
+  function move(direction: number) {
+    if (props.images.length < 2) return
+    setFailed(false)
+    setIndex((value) => (value + direction + props.images.length) % props.images.length)
+  }
+
+  Keymap.createLayer(() => ({
+    mode: "modal",
+    commands: [
+      { bind: "left", title: "Previous image", group: "Dialog", run: () => move(-1) },
+      { bind: "right", title: "Next image", group: "Dialog", run: () => move(1) },
+    ],
+  }))
+
+  return (
+    <box id="prompt-image-viewer" paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+          Image {index() + 1} of {props.images.length}
+        </text>
+        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <image
+        id="prompt-image-viewer-image"
+        source={current().uri}
+        fit="fit"
+        protocol="auto"
+        width="100%"
+        height={imageHeight()}
+        onError={() => setFailed(true)}
+      />
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.text.subdued} onMouseUp={() => move(-1)}>
+          {props.images.length > 1 ? "← previous" : ""}
+        </text>
+        <text fg={failed() ? theme.text.feedback.error.default : theme.text.subdued} wrapMode="none" truncate>
+          {failed() ? "No preview" : (current().mention?.text ?? `Image ${index() + 1}`)}
+        </text>
+        <text fg={theme.text.subdued} onMouseUp={() => move(1)}>
+          {props.images.length > 1 ? "next →" : ""}
+        </text>
+      </box>
+    </box>
+  )
+}