@phenx-inc/ctlsurf 0.14.2 → 0.15.1

package/out/renderer/assets/{javascript-D6OeziKX.js → javascript-B9GYUE-I.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-ZBQlq256.js";
-import "./index-BJNR4hRK.js";
+import { conf as conf$1, language as language$1 } from "./typescript-9o62WOnS.js";
+import "./index-CN3UN7Tm.js";
 const conf = conf$1;
 const language = {
   // Set defaultToken to invalid to see what you do not tokenize yet

package/out/renderer/assets/{jsonMode-t5SESE75.js → jsonMode-BzFKTZjJ.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-BJNR4hRK.js";
-import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-BEgiDCIW.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-BEgiDCIW.js";
+import { c as createWebWorker, l as languages, e as editor } from "./index-CN3UN7Tm.js";
+import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-BE0g7ubH.js";
+import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-BE0g7ubH.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{liquid-B5Wjh0p_.js → liquid-Ccw-S_Y6.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{lspLanguageFeatures-BEgiDCIW.js → lspLanguageFeatures-BE0g7ubH.js}

@@ -1,4 +1,4 @@
-import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-BJNR4hRK.js";
+import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-CN3UN7Tm.js";
 var DocumentUri;
 (function(DocumentUri2) {
   function is(value) {

package/out/renderer/assets/{mdx-ByNAXh8t.js → mdx-oXeAA0qU.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const conf = {
   comments: {
     blockComment: ["{/*", "*/}"]

package/out/renderer/assets/{python-CIFO0XQW.js → python-DlSX3TvA.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const conf = {
   comments: {
     lineComment: "#",

package/out/renderer/assets/{razor-LXHhGcNO.js → razor-ButO9S7r.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-WiO8CDaI.js → tsMode-CTCpE-67.js}

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-BJNR4hRK.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-CN3UN7Tm.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-ZBQlq256.js → typescript-9o62WOnS.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const conf = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
   comments: {

package/out/renderer/assets/{xml-DBaLJlQU.js → xml-C4nOH2_D.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const conf = {
   comments: {
     blockComment: ["<!--", "-->"]

package/out/renderer/assets/{yaml-CId9skah.js → yaml-mXYgKoWW.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-CN3UN7Tm.js";
 const conf = {
   comments: {
     lineComment: "#"

package/out/renderer/index.html

@@ -4,10 +4,42 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
+  <!-- Stamp the theme before the first paint. This has to be an inline,
+       synchronous script in <head>: reading the pref over IPC (or waiting for
+       the bundle) would let one frame of the wrong theme through, which reads
+       as a flash every launch. lib/theme.ts owns the same key afterwards. -->
+  <script>
+    (function () {
+      var DARK = 'tokyo-night', LIGHT = 'tokyo-day'
+      var a = null
+      try {
+        var raw = localStorage.getItem('ctlsurf.appearance')
+        if (raw) a = JSON.parse(raw)
+        else {
+          // Migrate the original system/light/dark preference. lib/theme.ts
+          // performs the same mapping; both must agree or the first frame
+          // disagrees with the second.
+          var legacy = localStorage.getItem('ctlsurf.theme')
+          if (legacy === 'light') a = { sync: false, theme: LIGHT }
+          else if (legacy === 'dark') a = { sync: false, theme: DARK }
+        }
+      } catch (e) { /* private mode, or corrupt JSON */ }
+      var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+      var id
+      if (a && a.sync === false) id = a.theme
+      else if (a) id = prefersLight ? a.light : a.dark
+      else id = prefersLight ? LIGHT : DARK
+      document.documentElement.setAttribute('data-theme', id || (prefersLight ? LIGHT : DARK))
+    })()
+  </script>
   <!-- Boot splash styles are inlined here so they paint on the first frame,
        before the JS bundle and styles.css have loaded. Without this the window
-       shows an empty dark pane while React mounts and the startup IPC runs. -->
+       shows an empty dark pane while React mounts and the startup IPC runs.
+       They cannot use the tokens in styles.css for the same reason, so the two
+       palettes are repeated here — keep them in step with :root there. -->
   <style>
+    :root { color-scheme: dark }
+    :root[data-theme='tokyo-day'], :root[data-theme='catppuccin-latte'] { color-scheme: light }
     #boot-splash {
       position: fixed;
       inset: 0;
@@ -48,9 +80,34 @@
       letter-spacing: 0.04em;
       color: #565f89;
     }
+    /* One rule per theme: the splash paints before styles.css exists, so it
+       cannot use the tokens. Keep in step with the :root blocks there. */
+    :root[data-theme='tokyo-day'] #boot-splash { background: #e9eaef; }
+    :root[data-theme='tokyo-day'] .boot-spinner {
+      border-color: rgba(46, 125, 233, 0.22);
+      border-top-color: #2e7de9;
+    }
+    :root[data-theme='tokyo-day'] .boot-splash-title { color: #1b1e33; }
+    :root[data-theme='tokyo-day'] .boot-splash-label { color: #6b7190; }
+
+    :root[data-theme='catppuccin-mocha'] #boot-splash { background: #1e1e2e; }
+    :root[data-theme='catppuccin-mocha'] .boot-spinner {
+      border-color: rgba(137, 180, 250, 0.22);
+      border-top-color: #89b4fa;
+    }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-title { color: #cdd6f4; }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-label { color: #7f849c; }
+
+    :root[data-theme='catppuccin-latte'] #boot-splash { background: #eff1f5; }
+    :root[data-theme='catppuccin-latte'] .boot-spinner {
+      border-color: rgba(30, 102, 245, 0.22);
+      border-top-color: #1e66f5;
+    }
+    :root[data-theme='catppuccin-latte'] .boot-splash-title { color: #2f3145; }
+    :root[data-theme='catppuccin-latte'] .boot-splash-label { color: #7c7f93; }
   </style>
-  <script type="module" crossorigin src="./assets/index-BJNR4hRK.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-BpCORklm.css">
+  <script type="module" crossorigin src="./assets/index-CN3UN7Tm.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-3sFJEz7i.css">
 </head>
 <body>
   <div id="boot-splash">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.14.2",
-  "description": "Agent-agnostic terminal and desktop app for ctlsurf \u2014 run Claude Code, Codex, or any coding agent with live session logging and remote control",
+  "version": "0.15.1",
+  "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {
     "ctlsurf": "./bin/ctlsurf-worker.js",
@@ -15,7 +15,8 @@
     "src/",
     "package.json",
     "electron-vite.config.ts",
-    "tsconfig*.json"
+    "tsconfig*.json",
+    "THIRD-PARTY-NOTICES.md"
   ],
   "scripts": {
     "dev": "electron-vite dev",
@@ -84,4 +85,4 @@
   "bugs": {
     "email": "phenx@phenx.io"
   }
-}
+}

package/src/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, dialog, nativeImage, clipboard } from 'electron'
+import { app, BrowserWindow, ipcMain, dialog, nativeImage, clipboard, nativeTheme } from 'electron'
 import path from 'path'
 import fs from 'fs'
 
@@ -233,12 +233,24 @@ const orchestrator = new Orchestrator(
 // ─── Window ───────────────────────────────────────
 
 function createWindow(): void {
+  // Replay last session's appearance choice before the window exists, so the
+  // frame Electron paints before the renderer loads is already the right
+  // colour. The renderer re-asserts this over app:setAppearance once booted.
+  const saved = orchestrator.settingsData
+  if (saved.themeSource === 'light' || saved.themeSource === 'dark' || saved.themeSource === 'system') {
+    nativeTheme.themeSource = saved.themeSource
+  }
+  const savedBg = typeof saved.themeBackground === 'string' && /^#[0-9a-fA-F]{6}$/.test(saved.themeBackground)
+    ? saved.themeBackground
+    : null
+
   mainWindow = new BrowserWindow({
     width: 1400,
     height: 900,
     minWidth: 600,
     minHeight: 400,
     title: 'ctlsurf-worker',
+    backgroundColor: savedBg ?? (nativeTheme.shouldUseDarkColors ? '#1a1b26' : '#e9eaef'),
     titleBarStyle: 'hiddenInset',
     icon: path.join(__dirname, '../../resources/icon.png'),
     webPreferences: {
@@ -388,6 +400,45 @@ ipcMain.handle('app:homePath', () => app.getPath('home'))
 ipcMain.handle('app:cwd', () => process.env.CTLSURF_WORKER_CWD || process.cwd())
 ipcMain.handle('app:projectName', () => orchestrator.projectName)
 
+// The renderer owns the theme preference (see lib/theme.ts) and mirrors it here
+// so the parts Chromium paints for us — native form controls, scrollbars, and
+// the window background between loads — match the app chrome. Also remembered
+// so the next launch can paint the right backgroundColor before the renderer
+// has booted.
+// The renderer owns the appearance preference (see renderer/lib/theme.ts) and
+// mirrors it here for two reasons: so Chromium paints native form controls,
+// scrollbars and the pre-load window background to match, and so createWindow
+// can pick the right backgroundColor on the *next* launch, before the renderer
+// has booted. It is also the recovery source if localStorage is ever wiped.
+ipcMain.handle('app:getAppearance', () => ({
+  pref: orchestrator.settingsData.appearance ?? null,
+}))
+
+ipcMain.handle('app:setAppearance', (_e, data: {
+  pref?: unknown
+  source?: 'system' | 'light' | 'dark'
+  background?: string
+}) => {
+  const source = data?.source
+  if (source !== 'system' && source !== 'light' && source !== 'dark') return { ok: false }
+  nativeTheme.themeSource = source
+
+  const settings = orchestrator.settingsData
+  if (data.pref && typeof data.pref === 'object') {
+    settings.appearance = data.pref as Record<string, unknown>
+  }
+  settings.themeSource = source
+  // Only trust a plain hex colour — this value is handed straight to Electron.
+  if (typeof data.background === 'string' && /^#[0-9a-fA-F]{6}$/.test(data.background)) {
+    settings.themeBackground = data.background
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.setBackgroundColor(data.background)
+    }
+  }
+  orchestrator.saveSettings()
+  return { ok: true }
+})
+
 ipcMain.handle('app:browseCwd', async () => {
   if (!mainWindow) return null
   const result = await dialog.showOpenDialog(mainWindow, {
@@ -659,8 +710,8 @@ ipcMain.handle('tickets:add', async (_event, input: {
 })
 ipcMain.handle('tickets:update', async (_event, rowId: string, input: {
   title: string; description?: string; status?: string; priority?: string
-}) => {
-  return orchestrator.updateTicketForActiveTab(rowId, input)
+}, blockId?: string) => {
+  return orchestrator.updateTicketForActiveTab(rowId, input, blockId)
 })
 ipcMain.handle('tickets:list', async () => {
   return orchestrator.listTicketsForActiveTab()

package/src/main/orchestrator.ts

@@ -43,6 +43,14 @@ export interface SettingsData {
   // src/main/observer/. Requires an Anthropic API key for Tiers 1–2;
   // without one it still records the ledger, Tier-0 tags, and spans.
   observer?: ObserverSettings
+  // Mirror of the renderer's appearance preference (localStorage owns the
+  // authoritative copy — index.html has to read it before first paint). Kept
+  // here so createWindow can pick the right backgroundColor on the next launch
+  // before the renderer boots, and so the choice survives a wiped localStorage.
+  // Shape is owned by renderer/lib/theme.ts; the main process only round-trips it.
+  appearance?: Record<string, unknown>
+  themeSource?: 'system' | 'light' | 'dark'
+  themeBackground?: string
 }
 
 export interface OrchestratorEvents {
@@ -772,13 +780,13 @@ export class Orchestrator {
     return this.ticketStore.addTicket(cwd, input)
   }
 
-  async updateTicketForActiveTab(rowId: string, input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+  async updateTicketForActiveTab(rowId: string, input: TicketInput, blockId?: string): Promise<{ ok: boolean; error?: string }> {
     const cwd = this.getActiveTabProjectPath()
     if (!cwd) return { ok: false, error: 'No active terminal tab' }
     if (!this.ctlsurfApi.getApiKey()) {
       return { ok: false, error: 'ctlsurf API key not configured' }
     }
-    return this.ticketStore.updateTicket(cwd, rowId, input)
+    return this.ticketStore.updateTicket(cwd, rowId, input, blockId)
   }
 
   async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; blockId?: string; pageId?: string; error?: string }> {

package/src/main/ticketStore.ts

@@ -45,23 +45,31 @@ export interface Ticket {
   status: string
   priority: string
   created: string | null
+  // Owning datastore, so edits and agent dispatches target the store this row
+  // actually lives in — a folder can accumulate more than one Tickets store.
+  blockId: string
+  pageId: string
 }
 
 function log(...args: unknown[]): void {
   baseLog('[ticket-store]', ...args)
 }
 
-function findPageByTitle(pages: any[], title: string): any | null {
+/** Collects every page with the given title, in tree order. A folder can end
+ * up with duplicate "Agent Datastore" pages (e.g. an agent creating its own
+ * under an unrelated page), with tickets split across them. */
+function findPagesByTitle(pages: any[], title: string): any[] {
+  const found: any[] = []
   for (const p of pages) {
-    if (p?.title === title) return p
-    if (p?.children?.length) {
-      const c = findPageByTitle(p.children, title)
-      if (c) return c
-    }
+    if (p?.title === title) found.push(p)
+    if (p?.children?.length) found.push(...findPagesByTitle(p.children, title))
   }
-  return null
+  return found
 }
 
+interface DsRef { blockId: string; pageId: string }
+interface ResolvedStores { primary: DsRef; all: DsRef[] }
+
 /**
  * Per-project `Tickets` datastore manager. Mirrors TimeTracker's datastore
  * resolution (find folder → Agent Datastore page → find/create block by
@@ -70,10 +78,10 @@ function findPageByTitle(pages: any[], title: string): any | null {
  */
 export class TicketStore {
   private api: CtlsurfApi
-  // Per-cwd cache of the resolved Tickets datastore: the block (the datastore
-  // element) and the Agent Datastore page it lives on. Both ids are handed to
-  // the coding agent so it can read/update tickets via the ctlsurf MCP tools.
-  private dsCache = new Map<string, { blockId: string; pageId: string }>()
+  // Per-cwd cache of every resolved Tickets datastore. `primary` is where new
+  // tickets are written and what gets handed to the coding agent; `all` covers
+  // duplicate Agent Datastore pages so listing misses nothing.
+  private dsCache = new Map<string, ResolvedStores>()
 
   constructor(api: CtlsurfApi) {
     this.api = api
@@ -84,11 +92,11 @@ export class TicketStore {
     const title = input.title?.trim()
     if (!title) return { ok: false, error: 'Title is required' }
     try {
-      const ds = await this.ensureDatastore(cwd, true)
-      if (!ds) {
+      const stores = await this.resolveStores(cwd, true)
+      if (!stores) {
         return { ok: false, error: 'No ctlsurf project found for this folder' }
       }
-      await this.api.addRow(ds.blockId, {
+      await this.api.addRow(stores.primary.blockId, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -103,14 +111,15 @@ export class TicketStore {
     }
   }
 
-  /** Updates an existing ticket row in the project's Tickets datastore. */
-  async updateTicket(cwd: string, rowId: string, input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+  /** Updates an existing ticket row. `blockId` names the store the row lives
+   * in (from listTickets); without it the primary store is assumed. */
+  async updateTicket(cwd: string, rowId: string, input: TicketInput, blockId?: string): Promise<{ ok: boolean; error?: string }> {
     const title = input.title?.trim()
     if (!title) return { ok: false, error: 'Title is required' }
     try {
-      const ds = await this.ensureDatastore(cwd, false)
-      if (!ds) return { ok: false, error: 'No Tickets datastore for this project' }
-      await this.api.updateRow(ds.blockId, rowId, {
+      const stores = await this.resolveStores(cwd, false)
+      if (!stores) return { ok: false, error: 'No Tickets datastore for this project' }
+      await this.api.updateRow(blockId || stores.primary.blockId, rowId, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -124,29 +133,42 @@ export class TicketStore {
     }
   }
 
-  /** Lists existing tickets for the project, newest first. Does not create the
-   * datastore — an unconfigured project simply has no tickets yet. */
+  /** Lists existing tickets across every Tickets store in the project's
+   * folder, newest first. Does not create the datastore — an unconfigured
+   * project simply has no tickets yet. */
   async listTickets(cwd: string): Promise<{ ok: boolean; tickets: Ticket[]; blockId?: string; pageId?: string; error?: string }> {
     try {
-      const ds = await this.ensureDatastore(cwd, false)
-      if (!ds) return { ok: true, tickets: [] }
-      const res = await this.api.queryRows(ds.blockId, { orderBy: 'Created', order: 'desc', limit: 200 })
-      const tickets: Ticket[] = (res?.rows || []).map(r => ({
-        id: r.id,
-        title: String(r.data?.Title ?? ''),
-        description: String(r.data?.Description ?? ''),
-        status: String(r.data?.Status ?? 'Open'),
-        priority: String(r.data?.Priority ?? 'Med'),
-        created: (r.data?.Created as string) ?? r.created_at ?? null,
-      }))
-      return { ok: true, tickets, blockId: ds.blockId, pageId: ds.pageId }
+      const stores = await this.resolveStores(cwd, false)
+      if (!stores) return { ok: true, tickets: [] }
+      const tickets: Ticket[] = []
+      for (const ds of stores.all) {
+        const res = await this.api.queryRows(ds.blockId, { orderBy: 'Created', order: 'desc', limit: 200 })
+        for (const r of res?.rows || []) {
+          tickets.push({
+            id: r.id,
+            title: String(r.data?.Title ?? ''),
+            description: String(r.data?.Description ?? ''),
+            status: String(r.data?.Status ?? 'Open'),
+            priority: String(r.data?.Priority ?? 'Med'),
+            created: (r.data?.Created as string) ?? r.created_at ?? null,
+            blockId: ds.blockId,
+            pageId: ds.pageId,
+          })
+        }
+      }
+      // Each store is queried newest-first; re-sort the merged list so rows
+      // from different stores interleave correctly (ISO strings compare fine).
+      if (stores.all.length > 1) {
+        tickets.sort((a, b) => (b.created || '').localeCompare(a.created || ''))
+      }
+      return { ok: true, tickets, blockId: stores.primary.blockId, pageId: stores.primary.pageId }
     } catch (err: any) {
       log(`listTickets failed for ${cwd}: ${err?.message || err}`)
       return { ok: false, tickets: [], error: err?.message || String(err) }
     }
   }
 
-  private async ensureDatastore(cwd: string, create: boolean): Promise<{ blockId: string; pageId: string } | null> {
+  private async resolveStores(cwd: string, create: boolean): Promise<ResolvedStores | null> {
     const cached = this.dsCache.get(cwd)
     if (cached) return cached
 
@@ -159,20 +181,34 @@ export class TicketStore {
     if (!folder?.id) return null
 
     const folderDetail = await this.api.getFolder(folder.id)
-    const agentPage = findPageByTitle(folderDetail?.pages || [], AGENT_DATASTORE_PAGE_TITLE)
-    if (!agentPage?.id) return null
-    const pageId: string = agentPage.id
+    const agentPages = findPagesByTitle(folderDetail?.pages || [], AGENT_DATASTORE_PAGE_TITLE)
+    if (agentPages.length === 0) return null
 
-    const blockId = await this.findOrAdoptBlock(pageId)
-    if (blockId) {
-      await this.ensureColumns(blockId)
-      const ds = { blockId, pageId }
-      this.dsCache.set(cwd, ds)
-      return ds
+    // The page bound to the codebase root is the canonical one; prefer it as
+    // the write target. Stable sort keeps tree order among the rest.
+    const rootPath = folder.root_path || cwd
+    agentPages.sort((a, b) => Number(b?.root_path === rootPath) - Number(a?.root_path === rootPath))
+    if (agentPages.length > 1) {
+      log(`Found ${agentPages.length} "Agent Datastore" pages for ${cwd}; aggregating tickets across all of them`)
+    }
+
+    const all: DsRef[] = []
+    for (const page of agentPages) {
+      for (const blockId of await this.findTicketBlocks(page.id)) {
+        all.push({ blockId, pageId: page.id })
+      }
+    }
+
+    if (all.length > 0) {
+      for (const ds of all) await this.ensureColumns(ds.blockId)
+      const stores = { primary: all[0], all }
+      this.dsCache.set(cwd, stores)
+      return stores
     }
 
     if (!create) return null
 
+    const pageId: string = agentPages[0].id
     const columns = COLUMNS.map((c, i) => ({
       id: `col_${i}`,
       name: c.name,
@@ -187,50 +223,48 @@ export class TicketStore {
     if (created?.id) {
       log(`Created "${DATASTORE_TITLE}" datastore on Agent Datastore page for ${cwd}`)
       const ds = { blockId: created.id, pageId }
-      this.dsCache.set(cwd, ds)
-      return ds
+      const stores = { primary: ds, all: [ds] }
+      this.dsCache.set(cwd, stores)
+      return stores
     }
     return null
   }
 
-  /** Finds an existing Tickets block on the page. Prefers a system_key match
-   * (which survives title renames). Falls back to title match for legacy blocks
-   * and backfills system_key on the way out. */
-  private async findOrAdoptBlock(pageId: string): Promise<string | null> {
+  /** Finds every Tickets block on the page: system_key matches first, then
+   * title matches for legacy blocks. When no system_key block exists, the
+   * first legacy block is adopted (system_key backfilled so it survives a
+   * later rename); extra title matches are still listed but left unstamped so
+   * the primary can't flip between sessions. */
+  private async findTicketBlocks(pageId: string): Promise<string[]> {
     const summaries = (await this.api.getPageBlockSummaries(pageId)) || []
     const datastoreSummaries = summaries.filter((b: any) => b?.type === 'datastore' && b?.id)
-    if (datastoreSummaries.length === 0) return null
+    if (datastoreSummaries.length === 0) return []
 
-    let titleFallbackId: string | null = null
-    let titleFallbackProps: Record<string, unknown> | null = null
+    const keyed: string[] = []
+    const legacy: Array<{ id: string; props: Record<string, unknown> }> = []
     for (const s of datastoreSummaries) {
       try {
         const block = await this.api.getBlock(s.id)
         const props = (block?.props || {}) as Record<string, unknown>
-        if (props.system_key === SYSTEM_KEY) {
-          return s.id
-        }
-        if (s.title === DATASTORE_TITLE && titleFallbackId === null) {
-          titleFallbackId = s.id
-          titleFallbackProps = props
-        }
+        if (props.system_key === SYSTEM_KEY) keyed.push(s.id)
+        else if (s.title === DATASTORE_TITLE) legacy.push({ id: s.id, props })
       } catch (err: any) {
         log(`getBlock(${s.id}) failed during lookup: ${err?.message || err}`)
       }
     }
 
-    if (titleFallbackId) {
+    if (keyed.length === 0 && legacy.length > 0) {
+      const adopt = legacy[0]
       try {
-        await this.api.updateBlock(titleFallbackId, {
-          props: { ...(titleFallbackProps || {}), system_key: SYSTEM_KEY },
+        await this.api.updateBlock(adopt.id, {
+          props: { ...adopt.props, system_key: SYSTEM_KEY },
         })
-        log(`Backfilled system_key on legacy Tickets block ${titleFallbackId}`)
+        log(`Backfilled system_key on legacy Tickets block ${adopt.id}`)
       } catch (err: any) {
-        log(`backfill system_key failed on ${titleFallbackId}: ${err?.message || err}`)
+        log(`backfill system_key failed on ${adopt.id}: ${err?.message || err}`)
       }
-      return titleFallbackId
     }
-    return null
+    return [...keyed, ...legacy.map(l => l.id)]
   }
 
   private async ensureColumns(blockId: string): Promise<void> {

package/src/preload/index.ts

@@ -79,6 +79,16 @@ const api = {
   },
   browseCwd: (): Promise<string | null> =>
     ipcRenderer.invoke('app:browseCwd'),
+  // Mirror the renderer's appearance preference onto Chromium's nativeTheme and
+  // persist it. localStorage stays the source of truth (see renderer/lib/theme.ts);
+  // this copy backs the pre-load window background and localStorage recovery.
+  setAppearance: (data: {
+    pref: unknown
+    source: 'system' | 'light' | 'dark'
+    background: string
+  }): Promise<{ ok: boolean }> => ipcRenderer.invoke('app:setAppearance', data),
+  getAppearance: (): Promise<{ pref: unknown }> =>
+    ipcRenderer.invoke('app:getAppearance'),
 
   // Clipboard — write a rich-HTML table (+ plain-text fallback) for email paste.
   // `ok` reflects a read-back verification in the main process, not just that the
@@ -128,9 +138,9 @@ const api = {
     ipcRenderer.invoke('tickets:project'),
   addTicket: (input: { title: string; description?: string; status?: string; priority?: string }): Promise<{ ok: boolean; error?: string }> =>
     ipcRenderer.invoke('tickets:add', input),
-  updateTicket: (rowId: string, input: { title: string; description?: string; status?: string; priority?: string }): Promise<{ ok: boolean; error?: string }> =>
-    ipcRenderer.invoke('tickets:update', rowId, input),
-  listTickets: (): Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null }>; error?: string }> =>
+  updateTicket: (rowId: string, input: { title: string; description?: string; status?: string; priority?: string }, blockId?: string): Promise<{ ok: boolean; error?: string }> =>
+    ipcRenderer.invoke('tickets:update', rowId, input, blockId),
+  listTickets: (): Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null; blockId?: string; pageId?: string }>; blockId?: string; pageId?: string; error?: string }> =>
     ipcRenderer.invoke('tickets:list'),
 
   // Chat logging (global)

package/src/renderer/App.tsx

@@ -50,6 +50,8 @@ declare global {
       getProjectName: () => Promise<string | null>
       onProjectChanged: (callback: (name: string | null) => void) => () => void
       browseCwd: () => Promise<string | null>
+      setAppearance?: (data: { pref: unknown; source: 'system' | 'light' | 'dark'; background: string }) => Promise<{ ok: boolean }>
+      getAppearance?: () => Promise<{ pref: unknown }>
       getSetting: (key: string) => Promise<string | null>
       setSetting: (key: string, value: string) => Promise<{ ok: boolean }>
       getAllSettings: () => Promise<Record<string, string | null>>
@@ -60,8 +62,8 @@ declare global {
       deleteProfile: (profileId: string) => Promise<{ ok: boolean }>
       getTicketProject: () => Promise<{ cwd: string | null; name: string | null }>
       addTicket: (input: { title: string; description?: string; status?: string; priority?: string }) => Promise<{ ok: boolean; error?: string }>
-      updateTicket: (rowId: string, input: { title: string; description?: string; status?: string; priority?: string }) => Promise<{ ok: boolean; error?: string }>
-      listTickets: () => Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null }>; blockId?: string; pageId?: string; error?: string }>
+      updateTicket: (rowId: string, input: { title: string; description?: string; status?: string; priority?: string }, blockId?: string) => Promise<{ ok: boolean; error?: string }>
+      listTickets: () => Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null; blockId?: string; pageId?: string }>; blockId?: string; pageId?: string; error?: string }>
       getTracking: () => Promise<{ active: boolean }>
       setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       getLogChat: () => Promise<{ enabled: boolean }>

package/src/renderer/components/CtlsurfPanel.tsx

@@ -190,7 +190,7 @@ export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
           />
         ) : (
           <div className="ctlsurf-webview-loading">
-            <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
+            <span style={{ color: 'var(--text-muted)', fontSize: '13px' }}>Loading ctlsurf...</span>
           </div>
         )}
       </div>