Match transparent canvas backgrounds to the active theme

pnpm-workspace.yaml

@@ -29,7 +29,7 @@ supportedArchitectures:
 overrides:
   '@hono/node-server': 2.0.11
   '@xmldom/xmldom@0.8': 0.8.15
-  adm-zip: ^0.6.0
+  adm-zip: ^0.6.1
   brace-expansion: 5.0.9
   minimatch: 10.2.5
   deepmerge-ts: 8.0.0
@@ -73,11 +73,10 @@ minimumReleaseAgeExclude:
   - ip-address
   - undici
 
-# adm-zip has no non-vulnerable published release: 0.6.0 fixes the 4 GB memory
-# allocation advisory, but it and every release back to 0.5.9 follow destination
-# symlinks during extraction. Keep the upstream-compatible symlink guard locally
-# until a release newer than 0.6.0 includes cthackers/adm-zip#575. The regression
-# test in scripts/adm-zip-symlink-patch.test.ts fails if this patch is dropped.
+# adm-zip 0.6.1 fixes the declared-size allocation advisory and includes the
+# destination-symlink protections previously carried as a local patch. The
+# regression test in scripts/adm-zip-symlink-patch.test.ts keeps that protection
+# pinned if a future release regresses it.
 
 # Four patches to @anthropic-ai/sandbox-runtime, all in one patch file. Drop
 # each once upstream does the same; the named test fails loudly if a version
@@ -112,4 +111,3 @@ minimumReleaseAgeExclude:
 #    `project-sandbox/worktree-preparation.test.ts`.
 patchedDependencies:
   '@anthropic-ai/sandbox-runtime@0.0.74': patches/@anthropic-ai__sandbox-runtime@0.0.74.patch
-  adm-zip@0.6.0: patches/adm-zip@0.6.0.patch

src/main/index.ts

@@ -29,6 +29,7 @@ import {
 import { attachBrowserGuestContextMenu } from './windows/browser-context-menu.ts'
 import { applyAppIcon } from './app-icon.ts'
 import type { LLMMessage, StreamChunk } from '@shared/types'
+import { THEME_BACKGROUND } from '@shared/theme.ts'
 import {
   assertPrimaryMainWindow,
   beginMainWindowQuit,
@@ -37,6 +38,7 @@ import {
   getMainWindow,
   getRestorableMainWindowRecords,
 } from './windows/create-main-window.ts'
+import { readBootTheme } from './windows/boot-theme.ts'
 import { setShellOutputSink } from './services/exec/shell-output-context.ts'
 import { setSecretCipher } from './services/storage/secret-cipher.ts'
 import { createKeyringCipher, createMigratingCipher } from './services/storage/keyring-cipher.ts'
@@ -301,9 +303,39 @@ setCanvasArtefactSink((artefact) => {
   })
 })
 
+async function currentCanvasBackgroundColor(): Promise<string> {
+  const fallback = THEME_BACKGROUND[readBootTheme()]
+  const win = getMainWindow()
+  if (!win || win.isDestroyed()) return fallback
+  try {
+    const value: unknown = await win.webContents.executeJavaScript(
+      `(() => {
+        const canvas = document.createElement('canvas')
+        canvas.width = 1
+        canvas.height = 1
+        const context = canvas.getContext('2d')
+        if (!context) return ''
+        context.fillStyle = getComputedStyle(document.body).backgroundColor
+        context.fillRect(0, 0, 1, 1)
+        const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data
+        if (alpha === 0) return ''
+        return 'rgba(' + [red, green, blue, alpha / 255].join(', ') + ')'
+      })()`,
+      true,
+    )
+    return typeof value === 'string' && value.trim() ? value : fallback
+  } catch {
+    return fallback
+  }
+}
+
 // Load every artefact into the headless agent session as well, so the model can
 // snapshot and screenshot the canvas it just rendered instead of working blind.
-setCanvasArtefactMirror((artefact) => mirrorArtefactToAgent(artefact, getBrowserSession()))
+// The preview window is otherwise white by default, while the visible webview
+// exposes Copse's theme through a transparent artefact.
+setCanvasArtefactMirror(async (artefact) =>
+  mirrorArtefactToAgent(artefact, getBrowserSession(), await currentCanvasBackgroundColor()),
+)
 
 setContextEstimateRefreshSink(() => {
   const win = getMainWindow()

src/main/services/browser/session-manager.ts

@@ -47,6 +47,13 @@ export interface NavigateResult {
   url: string
 }
 
+export interface BrowserNavigateOptions {
+  newTab?: boolean | undefined
+  viewId?: string | undefined
+  /** Backdrop used when a page leaves its root transparent. */
+  backgroundColor?: string | undefined
+}
+
 export interface TabInfo {
   viewId: string
   title: string
@@ -69,7 +76,7 @@ export class BrowserSessionManager {
   private lastActiveId: string | null = null
   private counter = 0
 
-  private createTab(): Tab {
+  private createTab(backgroundColor?: string): Tab {
     if (this.tabs.length >= MAX_TABS) {
       throw new Error(`browser tab limit reached (${String(MAX_TABS)}); close a tab first`)
     }
@@ -79,6 +86,7 @@ export class BrowserSessionManager {
       show: false,
       width: DEFAULT_WIDTH,
       height: DEFAULT_HEIGHT,
+      ...(backgroundColor ? { backgroundColor } : {}),
       webPreferences: {
         // Dedicated agent browser profile, isolated from the user's interactive
         // browser pane, so automation never inherits the user's logged-in
@@ -116,12 +124,10 @@ export class BrowserSessionManager {
     return this.createTab()
   }
 
-  async navigate(
-    url: string,
-    opts?: { newTab?: boolean | undefined; viewId?: string | undefined },
-  ): Promise<NavigateResult> {
-    const tab = opts?.newTab ? this.createTab() : this.resolveTab(opts?.viewId)
+  async navigate(url: string, opts?: BrowserNavigateOptions): Promise<NavigateResult> {
+    const tab = opts?.newTab ? this.createTab(opts.backgroundColor) : this.resolveTab(opts?.viewId)
     this.lastActiveId = tab.id
+    if (opts?.backgroundColor) tab.window.setBackgroundColor(opts.backgroundColor)
     try {
       await tab.window.webContents.loadURL(url)
     } catch (err) {