amicode: widget-kernel — home dashboard, in-chat widget authoring, Amico presence, clipboard/model bridges (fork half of amicode#136)

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }
 

packages/app/src/components/amicode-default-model-value.ts

@@ -0,0 +1,17 @@
+// Pure "providerID/modelID" <-> ModelKey helpers for the dashboard default-model
+// control. Split out of amicode-default-model.tsx so they're unit-testable
+// without evaluating the SolidJS component (which touches client-only context).
+
+/** "providerID/modelID". modelID may itself contain "/", so callers split on the first. */
+export function formatModelValue(key: { providerID: string; modelID: string }): string {
+ return `${key.providerID}/${key.modelID}`
+}
+
+/** Inverse of formatModelValue; null on a malformed/empty value. Splits on the
+ * FIRST slash so a model id containing slashes (e.g. openrouter/meta-llama/…)
+ * round-trips. */
+export function parseModelValue(value: string): { providerID: string; modelID: string } | null {
+ const slash = value.indexOf("/")
+ if (slash <= 0 || slash === value.length - 1) return null
+ return { providerID: value.slice(0, slash), modelID: value.slice(slash + 1) }
+}

packages/app/src/components/amicode-default-model.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+describe("amicode default-model value round-trip", () => {
+ test("format then parse is identity, incl. model ids with dots/dashes", () => {
+ const key = { providerID: "anthropic", modelID: "claude-sonnet-5" }
+ expect(formatModelValue(key)).toBe("anthropic/claude-sonnet-5")
+ expect(parseModelValue(formatModelValue(key))).toEqual(key)
+ expect(parseModelValue("opencode/deepseek-v4-flash-free")).toEqual({
+ providerID: "opencode",
+ modelID: "deepseek-v4-flash-free",
+ })
+ })
+
+ test("splits on the FIRST slash so a model id may itself contain slashes", () => {
+ expect(parseModelValue("openrouter/meta-llama/llama-3.3")).toEqual({
+ providerID: "openrouter",
+ modelID: "meta-llama/llama-3.3",
+ })
+ })
+
+ test("rejects malformed / empty values (→ null, no selection)", () => {
+ expect(parseModelValue("")).toBeNull()
+ expect(parseModelValue("noslash")).toBeNull()
+ expect(parseModelValue("/leading")).toBeNull()
+ expect(parseModelValue("trailing/")).toBeNull()
+ })
+})

packages/app/src/components/amicode-default-model.tsx

@@ -0,0 +1,106 @@
+import { For, Show, createMemo } from "solid-js"
+import { useModels } from "@/context/models"
+import { formatModelValue, parseModelValue } from "./amicode-default-model-value"
+
+// Dashboard "Default model" control. Drives opencode's GLOBAL model store
+// (useModels — mounted app-wide, persisted via Persist.global), which is what
+// new chats inherit as their starting model (see local.tsx recentModel()), so
+// a change takes effect immediately with no server restart. It ALSO mirrors the
+// choice into the `amicode.defaultModel` VS Code setting over the iframe→parent
+// bridge (chat_panel.ts), keeping the headless/first-turn config pin in sync.
+// The in-chat picker still overrides per session.
+
+/** Post the chosen model to the extension host so it updates amicode.defaultModel.
+ * No-op when unframed (plain web/desktop): there's no parent shell to relay it. */
+function syncDefaultModelPin(model: string, win: Window = window): void {
+ if (win.parent === win) return
+ win.parent.postMessage({ source: "amicode", kind: "set-default-model", model }, "*")
+}
+
+export function AmicodeDefaultModel() {
+ const models = useModels()
+
+ const available = createMemo(() => models.list())
+ // opencode's default visibility hides dated, non-"latest" models — which can
+ // hide EVERY model and leave the control empty. Prefer the visible set, but
+ // fall back to all available models so the picker is never blank when models
+ // exist. (Guarded below on available(), so it only hides with zero models.)
+ const selectable = createMemo(() => {
+ const vis = available().filter((m) => models.visible({ providerID: m.provider.id, modelID: m.id }))
+ return vis.length > 0 ? vis : available()
+ })
+
+ const groups = createMemo(() => {
+ const byProvider = new Map<string, { provider: string; items: { value: string; name: string }[] }>()
+ for (const m of selectable()) {
+ const group = byProvider.get(m.provider.id) ?? { provider: m.provider.name, items: [] }
+ group.items.push({ value: formatModelValue({ providerID: m.provider.id, modelID: m.id }), name: m.name })
+ byProvider.set(m.provider.id, group)
+ }
+ return [...byProvider.values()]
+ })
+
+ // Bound to the DURABLE pin (models.pin), not the recents head — chats using
+ // other models must not move the dashboard's declared default. Empty = Auto
+ // (no pin; new chats fall back to recents/provider default).
+ const current = createMemo(() => {
+ const pin = models.pin.get()
+ return pin ? formatModelValue(pin) : ""
+ })
+
+ const choose = (value: string) => {
+ if (value === "") {
+ models.pin.set(undefined) // Auto: clear the pin, mirror the cleared setting
+ syncDefaultModelPin("")
+ return
+ }
+ const key = parseModelValue(value)
+ if (!key) return
+ models.pin.set(key)
+ syncDefaultModelPin(value)
+ }
+
+ return (
+ <Show when={available().length > 0}>
+ <label
+ data-component="amicode-default-model"
+ title="Default model for new chats"
+ style={{
+ display: "inline-flex",
+ "align-items": "center",
+ gap: "8px",
+ "font-size": "12px",
+ color: "var(--v2-text-text-muted)",
+ }}
+ >
+ <span data-slot="amicode-default-model-label" style={{ "font-weight": "550" }}>
+ Model
+ </span>
+ <select
+ data-slot="amicode-default-model-select"
+ value={current()}
+ onChange={(event) => choose(event.currentTarget.value)}
+ style={{
+ "font-size": "12px",
+ color: "var(--v2-text-text-base)",
+ background: "var(--v2-background-bg-layer-01)",
+ border: "1px solid var(--v2-border-border-base)",
+ "border-radius": "6px",
+ padding: "3px 6px",
+ "max-width": "220px",
+ cursor: "pointer",
+ }}
+ >
+ <option value="">Auto</option>
+ <For each={groups()}>
+ {(group) => (
+ <optgroup label={group.provider}>
+ <For each={group.items}>{(item) => <option value={item.value}>{item.name}</option>}</For>
+ </optgroup>
+ )}
+ </For>
+ </select>
+ </label>
+ </Show>
+ )
+}

packages/app/src/components/prompt-input.tsx

@@ -58,7 +58,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { inAmicode } from "@/pages/session/use-amicode-commands"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { readClipboardViaBridge } from "./prompt-input/clipboard-bridge"
+import { readClipboardViaBridge, readClipboardImageViaBridge } from "./prompt-input/clipboard-bridge"
 import { normalizePaste } from "./prompt-input/paste"
 import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
@@ -1147,6 +1147,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  // browser dispatches no usable paste event on ⌘V (unlike plain web/desktop,
  // where onPaste handles it). Intercept the keystroke and read the OS
  // clipboard over the extension bridge instead (see clipboard-bridge.ts).
+ // Image first (screenshots), then text — mirrors handlePaste's precedence.
  if (
  (event.metaKey || event.ctrlKey) &&
  !event.altKey &&
@@ -1155,9 +1156,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  inAmicode()
  ) {
  event.preventDefault()
- void readClipboardViaBridge().then((text) => {
+ void (async () => {
+ const image = await readClipboardImageViaBridge()
+ if (image) {
+ await addAttachment(image)
+ return
+ }
+ const text = await readClipboardViaBridge()
  if (text) addPart({ type: "text", content: normalizePaste(text), start: 0, end: 0 })
- })
+ })()
  return
  }
 

packages/app/src/components/prompt-input/clipboard-bridge.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { readClipboardViaBridge } from "./clipboard-bridge"
+import { readClipboardViaBridge, writeClipboardViaBridge } from "./clipboard-bridge"
 
 type Listener = (event: MessageEvent) => void
 
@@ -74,3 +74,26 @@ describe("readClipboardViaBridge", () => {
  expect(posted).toHaveLength(0)
  })
 })
+
+describe("writeClipboardViaBridge", () => {
+ test("pushes the copied text to the host so the OS clipboard matches ⌘V's read", () => {
+ const bridge = fakeFramedWindow()
+
+ expect(writeClipboardViaBridge("solve a CZ gate", bridge.win)).toBe(true)
+ expect(bridge.posted).toHaveLength(1)
+ const message = bridge.posted[0]
+ expect(message.source).toBe("amicode")
+ expect(message.kind).toBe("clipboard-write")
+ expect(message.text).toBe("solve a CZ gate")
+ })
+
+ test("is a no-op that posts nothing when the app is not framed", () => {
+ const posted: unknown[] = []
+ const win = { postMessage: (message: unknown) => posted.push(message) } as unknown as Window
+ // parent === self → plain web/desktop, where native copy already works
+ ;(win as unknown as { parent: Window }).parent = win
+
+ expect(writeClipboardViaBridge("ignored", win)).toBe(false)
+ expect(posted).toHaveLength(0)
+ })
+})

packages/app/src/components/prompt-input/clipboard-bridge.ts

@@ -12,6 +12,20 @@
 
 const BRIDGE_TIMEOUT_MS = 1500
 
+// ⌘C inside the Amicode chat is the mirror image of ⌘V: the sandboxed iframe's
+// native copy (and navigator.clipboard.writeText) never reaches the OS
+// clipboard, so a subsequent ⌘V — which DOES read the OS clipboard over the
+// bridge — pastes whatever stale thing was there before, not what you copied.
+// Push the copied text to the extension host, which writes vscode.env.clipboard
+// so read and write hit the same clipboard. Fire-and-forget: the host write is
+// near-instant and callers have nothing to await. Resolves false (no-op) when
+// unframed — native copy already works there.
+export function writeClipboardViaBridge(text: string, win: Window = window): boolean {
+ if (win.parent === win) return false
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-write", text }, "*")
+ return true
+}
+
 export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<string> {
  return new Promise<string>((resolve) => {
  // Unframed: native paste works — don't post into the void or wait out the timeout.
@@ -40,3 +54,54 @@ export function readClipboardViaBridge(win: Window = window, timeoutMs = BRIDGE_
  timer = setTimeout(() => finish(""), timeoutMs)
  })
 }
+
+// ⌘V image paste inside the Amicode chat. Unlike text (which the extension host
+// reads via vscode.env.clipboard — text-only, no image API), an image can only
+// come from the OUTER webview reading navigator.clipboard.read() client-side.
+// So we ask the parent relay (chat_panel.ts) rather than the host: it grabs the
+// first image/* clipboard item, encodes it as a data URL, and replies. We
+// rebuild a File from the reply so callers reuse the normal attachment path.
+// Resolves null when unframed, on a text-only clipboard, or after `timeoutMs`.
+export function readClipboardImageViaBridge(win: Window = window, timeoutMs = BRIDGE_TIMEOUT_MS): Promise<File | null> {
+ return new Promise<File | null>((resolve) => {
+ if (win.parent === win) {
+ resolve(null)
+ return
+ }
+
+ const nonce = Math.random().toString(36).slice(2)
+ let timer: ReturnType<typeof setTimeout> | undefined
+
+ const finish = (file: File | null) => {
+ win.removeEventListener("message", onMessage)
+ if (timer !== undefined) clearTimeout(timer)
+ resolve(file)
+ }
+
+ const onMessage = (event: MessageEvent) => {
+ const data = event.data as
+ | { source?: string; kind?: string; nonce?: string; dataUrl?: string; mime?: string; filename?: string }
+ | undefined
+ if (data?.source !== "amicode" || data.kind !== "clipboard-image" || data.nonce !== nonce) return
+ finish(fileFromDataUrl(data.dataUrl, data.mime, data.filename))
+ }
+
+ win.addEventListener("message", onMessage)
+ win.parent.postMessage({ source: "amicode", kind: "clipboard-image-request", nonce }, "*")
+ timer = setTimeout(() => finish(null), timeoutMs)
+ })
+}
+
+function fileFromDataUrl(dataUrl?: string, mime?: string, filename?: string): File | null {
+ if (!dataUrl || !mime) return null
+ const comma = dataUrl.indexOf(",")
+ if (comma === -1) return null
+ try {
+ const binary = atob(dataUrl.slice(comma + 1))
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+ return new File([bytes], filename || "pasted-image.png", { type: mime })
+ } catch {
+ return null
+ }
+}

packages/app/src/components/titlebar.tsx

@@ -40,6 +40,7 @@ import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
 import { Mark } from "@opencode-ai/ui/logo"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { AmicoSpinner } from "@opencode-ai/ui/amico-spinner"
 
 type TauriDesktopWindow = {
@@ -489,6 +490,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  ref.scrollIntoView({ behavior: "instant" })
  }}
  onClose={() => tabsStoreActions.removeTab(i())}
+ onCloseOthers={() => tabsStoreActions.closeOthers(i())}
+ onCloseLeft={() => tabsStoreActions.closeToLeft(i())}
+ onCloseRight={() => tabsStoreActions.closeToRight(i())}
+ canCloseOthers={tabsStore.length > 1}
+ canCloseLeft={i() > 0}
+ canCloseRight={i() < tabsStore.length - 1}
  active={currentTab() === tab}
  activeServer={tab.server === server.key}
  forceTruncate={tabsAreOverflowing()}
@@ -765,11 +772,18 @@ function TabNavItem(props: {
  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+ onCloseOthers: () => void
+ onCloseLeft: () => void
+ onCloseRight: () => void
+ canCloseOthers: boolean
+ canCloseLeft: boolean
+ canCloseRight: boolean
  onNavigate: () => void
  active?: boolean
  activeServer: boolean
  forceTruncate?: boolean
 }) {
+ const language = useLanguage()
  const closeTab = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
@@ -796,15 +810,17 @@ function TabNavItem(props: {
  )
 
  return (
- <div
- ref={props.ref}
- class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
- data-active={props.active}
- onMouseDown={(event) => {
- if (event.button !== 1) return
- closeTab(event)
- }}
- >
+ <ContextMenu modal={false}>
+ <ContextMenu.Trigger
+ as="div"
+ ref={props.ref}
+ class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+ data-active={props.active}
+ onMouseDown={(event: MouseEvent) => {
+ if (event.button !== 1) return
+ closeTab(event)
+ }}
+ >
  <Show when={session.latest}>
  {(session) => {
  const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
@@ -851,7 +867,24 @@ function TabNavItem(props: {
  icon={<IconV2 name="xmark-small" />}
  />
  </div>
- </div>
+ </ContextMenu.Trigger>
+ <ContextMenu.Portal>
+ <ContextMenu.Content>
+ <ContextMenu.Item onSelect={() => props.onClose()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTab")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseOthers} onSelect={() => props.onCloseOthers()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeOtherTabs")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseLeft} onSelect={() => props.onCloseLeft()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToLeft")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ <ContextMenu.Item disabled={!props.canCloseRight} onSelect={() => props.onCloseRight()}>
+ <ContextMenu.ItemLabel>{language.t("common.closeTabsToRight")}</ContextMenu.ItemLabel>
+ </ContextMenu.Item>
+ </ContextMenu.Content>
+ </ContextMenu.Portal>
+ </ContextMenu>
  )
 }