@phenx-inc/ctlsurf 0.3.13 → 0.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "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": {

package/src/main/agents.ts

@@ -1,3 +1,6 @@
+import { accessSync, constants } from 'fs'
+import { join, delimiter } from 'path'
+
 export interface AgentConfig {
   id: string
   name: string
@@ -11,6 +14,27 @@ function getShellCommand(): string {
   return process.env.SHELL || '/bin/zsh'
 }
 
+// Resolve a bare command name against PATH (like `which`/`where`), so we only
+// offer coding agents whose CLI is actually installed. Both launch modes
+// inherit the user's shell PATH (the `ctlsurf` launcher runs under their
+// shell), so process.env.PATH is the right thing to scan.
+function isCommandAvailable(command: string): boolean {
+  const dirs = (process.env.PATH || '').split(delimiter).filter(Boolean)
+  const isWin = process.platform === 'win32'
+  const exts = isWin
+    ? (process.env.PATHEXT || '.EXE;.CMD;.BAT;.COM').split(';').filter(Boolean)
+    : ['']
+  for (const dir of dirs) {
+    for (const ext of exts) {
+      try {
+        accessSync(join(dir, command + ext), isWin ? constants.F_OK : constants.X_OK)
+        return true
+      } catch { /* not in this dir */ }
+    }
+  }
+  return false
+}
+
 export function getBuiltinAgents(): AgentConfig[] {
   return [
     {
@@ -37,8 +61,19 @@ export function getBuiltinAgents(): AgentConfig[] {
   ]
 }
 
+// Builtin agents filtered to those actually usable: coding agents only when
+// their CLI is installed (on PATH), with the shell always offered last. If no
+// coding agent is installed the list collapses to just the shell.
+export function getAvailableAgents(): AgentConfig[] {
+  const all = getBuiltinAgents()
+  const coding = all.filter(a => isCodingAgent(a) && isCommandAvailable(a.command))
+  const shell = all.filter(a => !isCodingAgent(a))
+  return [...coding, ...shell]
+}
+
 export function getDefaultAgent(): AgentConfig {
-  return getBuiltinAgents()[0]
+  // First available coding agent, or the shell when none are installed.
+  return getAvailableAgents()[0]
 }
 
 export function isCodingAgent(agent: AgentConfig): boolean {

package/src/main/ctlsurfApi.ts

@@ -123,6 +123,17 @@ export class CtlsurfApi {
     return this.request('PUT', `/datastore/${blockId}/rows/${rowId}`, { data })
   }
 
+  async queryRows(blockId: string, opts?: {
+    orderBy?: string; order?: 'asc' | 'desc'; limit?: number
+  }): Promise<{ rows: Array<{ id: string; data: Record<string, unknown>; created_at: string | null; updated_at: string | null }>; total_count: number }> {
+    const params = new URLSearchParams()
+    if (opts?.orderBy) params.set('order_by', opts.orderBy)
+    if (opts?.order) params.set('order', opts.order)
+    params.set('limit', String(opts?.limit ?? 200))
+    const qs = params.toString()
+    return this.request('GET', `/datastore/${blockId}/rows${qs ? `?${qs}` : ''}`)
+  }
+
   async getDatastoreSchema(blockId: string): Promise<{ block_id: string; columns: Array<{ id: string; name: string; type: string }> }> {
     return this.request('GET', `/datastore/${blockId}/schema`)
   }

package/src/main/headless.ts

@@ -29,7 +29,7 @@ setSilent(true)
 
 import { Orchestrator } from './orchestrator'
 import { getSettingsDir } from './settingsDir'
-import { getBuiltinAgents, isCodingAgent, type AgentConfig } from './agents'
+import { getBuiltinAgents, getAvailableAgents, isCodingAgent, type AgentConfig } from './agents'
 import { Tui } from './tui'
 import { fetchLatestNpmVersion, compareSemver, NPM_PACKAGE } from './updateCheck'
 
@@ -103,7 +103,9 @@ async function main() {
   await checkVersionAndNotify()
 
   const tui = new Tui()
-  const agents = getBuiltinAgents()
+  // Picker only offers installed coding agents (+ shell, last). Explicit
+  // --agent still resolves against the full builtin list below.
+  const agents = getAvailableAgents()
 
   // ─── Orchestrator (loaded early so picker can read profile defaults) ──
 
@@ -140,7 +142,7 @@ async function main() {
   let trackTimeOverride: boolean | undefined
 
   if (args.agent) {
-    const found = agents.find(a => a.id === args.agent)
+    const found = getBuiltinAgents().find(a => a.id === args.agent)
     agent = found || {
       id: args.agent,
       name: args.agent,

package/src/main/index.ts

@@ -21,7 +21,7 @@ function log(...args: unknown[]): void {
   try { console.log(...args) } catch { /* EPIPE safe */ }
 }
 
-import { AgentConfig, getDefaultAgent, getBuiltinAgents } from './agents'
+import { AgentConfig, getDefaultAgent, getAvailableAgents } from './agents'
 import { getSettingsDir } from './settingsDir'
 import { Orchestrator } from './orchestrator'
 
@@ -105,6 +105,7 @@ const orchestrator = new Orchestrator(
     onWorkerStatus: (status) => mainWindow?.webContents.send('worker:status', status),
     onWorkerMessage: (message) => mainWindow?.webContents.send('worker:message', message),
     onWorkerRegistered: (data) => mainWindow?.webContents.send('worker:registered', data),
+    onProjectChanged: (name) => mainWindow?.webContents.send('app:projectChanged', name),
     onCwdChanged: () => {
       mainWindow?.webContents.send('app:cwdChanged')
       updateProjectBadge(orchestrator.cwd)
@@ -165,11 +166,12 @@ ipcMain.handle('pty:setActiveTab', (_event, tabId: string) => {
   orchestrator.setActiveTab(tabId)
 })
 
-ipcMain.handle('agents:list', () => getBuiltinAgents())
+ipcMain.handle('agents:list', () => getAvailableAgents())
 ipcMain.handle('agents:default', () => getDefaultAgent())
 
 ipcMain.handle('app:homePath', () => app.getPath('home'))
 ipcMain.handle('app:cwd', () => process.env.CTLSURF_WORKER_CWD || process.cwd())
+ipcMain.handle('app:projectName', () => orchestrator.projectName)
 
 ipcMain.handle('app:browseCwd', async () => {
   if (!mainWindow) return null
@@ -366,6 +368,26 @@ ipcMain.handle('tracking:set', async (_event, enabled: boolean) => {
   return { active: orchestrator.isActiveTabTracking() }
 })
 
+// ─── Tickets IPC ──────────────────────────────────
+
+ipcMain.handle('tickets:project', () => {
+  const cwd = orchestrator.getActiveTabCwd()
+  return { cwd, name: cwd ? cwd.split('/').filter(Boolean).pop() || cwd : null }
+})
+ipcMain.handle('tickets:add', async (_event, input: {
+  title: string; description?: string; status?: string; priority?: string
+}) => {
+  return orchestrator.addTicketForActiveTab(input)
+})
+ipcMain.handle('tickets:update', async (_event, rowId: string, input: {
+  title: string; description?: string; status?: string; priority?: string
+}) => {
+  return orchestrator.updateTicketForActiveTab(rowId, input)
+})
+ipcMain.handle('tickets:list', async () => {
+  return orchestrator.listTicketsForActiveTab()
+})
+
 // ─── Legacy Settings IPC ──────────────────────────
 
 ipcMain.handle('settings:get', (_event, key: string) => {

package/src/main/orchestrator.ts

@@ -8,6 +8,7 @@ import { CtlsurfApi } from './ctlsurfApi'
 import { ConversationBridge } from './bridge'
 import { WorkerWsClient, type WorkerWsStatus, type IncomingMessage } from './workerWs'
 import { TimeTracker } from './timeTracker'
+import { TicketStore, type TicketInput } from './ticketStore'
 import { log } from './logger'
 
 // ─── Types ────────────────────────────────────────
@@ -39,6 +40,9 @@ export interface OrchestratorEvents {
   onWorkerMessage: (message: IncomingMessage) => void
   onWorkerRegistered: (data: { worker_id: string; folder_id: string | null; status: string }) => void
   onCwdChanged: () => void
+  // Human-readable name of the connected ctlsurf project (folder), or null
+  // when no project is connected. Optional — only the desktop header uses it.
+  onProjectChanged?: (name: string | null) => void
 }
 
 interface TabState {
@@ -74,6 +78,7 @@ export class Orchestrator {
   readonly bridge = new ConversationBridge()
   readonly workerWs: WorkerWsClient
   readonly timeTracker = new TimeTracker(this.ctlsurfApi)
+  readonly ticketStore = new TicketStore(this.ctlsurfApi)
 
   // State
   private tabs = new Map<string, TabState>()
@@ -87,6 +92,7 @@ export class Orchestrator {
   }
   private noProjectPollTimer: ReturnType<typeof setInterval> | null = null
   private noProjectPollCwd: string | null = null
+  private currentProjectName: string | null = null
 
   constructor(settingsDir: string, events: OrchestratorEvents) {
     this.settingsDir = settingsDir
@@ -114,12 +120,14 @@ export class Orchestrator {
         log(`[worker-ws] Registered: worker_id=${data.worker_id}, folder_id=${data.folder_id}, status=${data.status}`)
         events.onWorkerRegistered(data)
         if (!data.folder_id) {
+          this.setProjectName(null)
           events.onWorkerStatus('no_project')
           if (this.currentCwd && data.status !== 'pending_approval') {
             this.startNoProjectPolling(this.currentCwd)
           }
         } else {
           this.stopNoProjectPolling()
+          this.resolveProjectName(data.folder_id)
         }
       },
       onTerminalInput: (data: string) => {
@@ -163,6 +171,29 @@ export class Orchestrator {
     return this.currentCwd
   }
 
+  // Name of the connected ctlsurf project (folder) for the desktop header.
+  get projectName(): string | null {
+    return this.currentProjectName
+  }
+
+  private setProjectName(name: string | null): void {
+    if (this.currentProjectName === name) return
+    this.currentProjectName = name
+    this.events.onProjectChanged?.(name)
+  }
+
+  // Resolve the connected folder's human-readable name. Best-effort: a failed
+  // lookup just leaves the project name unset rather than blocking anything.
+  private async resolveProjectName(folderId: string): Promise<void> {
+    try {
+      const folder = await this.ctlsurfApi.getFolder(folderId)
+      const name = folder?.name ?? folder?.title
+      this.setProjectName(typeof name === 'string' && name ? name : null)
+    } catch (err) {
+      log(`[worker-ws] Failed to resolve project name for folder ${folderId}: ${err}`)
+    }
+  }
+
   get agent(): AgentConfig | null {
     return this.currentAgent
   }
@@ -480,6 +511,41 @@ export class Orchestrator {
     }
   }
 
+  // ─── Tickets (active tab) ───────────────────────
+
+  /** cwd of the focused terminal tab, or null if no tab is active. */
+  getActiveTabCwd(): string | null {
+    if (!this.activeTabId) return null
+    return this.tabs.get(this.activeTabId)?.cwd ?? null
+  }
+
+  async addTicketForActiveTab(input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+    const cwd = this.getActiveTabCwd()
+    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.addTicket(cwd, input)
+  }
+
+  async updateTicketForActiveTab(rowId: string, input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+    const cwd = this.getActiveTabCwd()
+    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)
+  }
+
+  async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; error?: string }> {
+    const cwd = this.getActiveTabCwd()
+    if (!cwd) return { ok: false, tickets: [], error: 'No active terminal tab' }
+    if (!this.ctlsurfApi.getApiKey()) {
+      return { ok: false, tickets: [], error: 'ctlsurf API key not configured' }
+    }
+    return this.ticketStore.listTickets(cwd)
+  }
+
   // ─── Worker WebSocket ───────────────────────────
 
   connectWorkerWs(agent: AgentConfig, cwd: string): void {

package/src/main/ticketStore.ts

@@ -0,0 +1,252 @@
+import type { CtlsurfApi } from './ctlsurfApi'
+
+const DATASTORE_TITLE = 'Tickets'
+const AGENT_DATASTORE_PAGE_TITLE = 'Agent Datastore'
+const SYSTEM_KEY = 'tickets' // stable identifier in props.system_key; lookup survives title rename
+
+const STATUS_OPTIONS = [
+  { value: 'Open', color: 'blue' },
+  { value: 'In Progress', color: 'yellow' },
+  { value: 'Blocked', color: 'red' },
+  { value: 'Done', color: 'green' },
+]
+const PRIORITY_OPTIONS = [
+  { value: 'Low', color: 'gray' },
+  { value: 'Med', color: 'yellow' },
+  { value: 'High', color: 'red' },
+]
+
+interface ColumnSpec {
+  name: string
+  type: string
+  options?: Array<{ value: string; color?: string }>
+}
+
+const COLUMNS: ColumnSpec[] = [
+  { name: 'Title', type: 'text' },
+  { name: 'Description', type: 'text' },
+  { name: 'Status', type: 'select', options: STATUS_OPTIONS },
+  { name: 'Priority', type: 'select', options: PRIORITY_OPTIONS },
+  { name: 'Created', type: 'date' },
+]
+
+export interface TicketInput {
+  title: string
+  description?: string
+  status?: string
+  priority?: string
+}
+
+export interface Ticket {
+  id: string
+  title: string
+  description: string
+  status: string
+  priority: string
+  created: string | null
+}
+
+function log(...args: unknown[]): void {
+  try { console.log('[ticket-store]', ...args) } catch { /* EPIPE safe */ }
+}
+
+function findPageByTitle(pages: any[], title: string): any | null {
+  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
+    }
+  }
+  return null
+}
+
+/**
+ * Per-project `Tickets` datastore manager. Mirrors TimeTracker's datastore
+ * resolution (find folder → Agent Datastore page → find/create block by
+ * system_key), minus all the session/checkpoint machinery — a ticket is a
+ * single manual capture, not a tracked session.
+ */
+export class TicketStore {
+  private api: CtlsurfApi
+  private blockCache = new Map<string, string>()
+
+  constructor(api: CtlsurfApi) {
+    this.api = api
+  }
+
+  /** Resolves (or creates) the project's Tickets datastore and appends a row. */
+  async addTicket(cwd: string, input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+    const title = input.title?.trim()
+    if (!title) return { ok: false, error: 'Title is required' }
+    try {
+      const blockId = await this.ensureDatastore(cwd, true)
+      if (!blockId) {
+        return { ok: false, error: 'No ctlsurf project found for this folder' }
+      }
+      await this.api.addRow(blockId, {
+        Title: title,
+        Description: input.description?.trim() || '',
+        Status: input.status || 'Open',
+        Priority: input.priority || 'Med',
+        Created: new Date().toISOString(),
+      })
+      log(`Added ticket "${title}" for ${cwd}`)
+      return { ok: true }
+    } catch (err: any) {
+      log(`addTicket failed for ${cwd}: ${err?.message || err}`)
+      return { ok: false, error: err?.message || String(err) }
+    }
+  }
+
+  /** Updates an existing ticket row in the project's Tickets datastore. */
+  async updateTicket(cwd: string, rowId: string, input: TicketInput): Promise<{ ok: boolean; error?: string }> {
+    const title = input.title?.trim()
+    if (!title) return { ok: false, error: 'Title is required' }
+    try {
+      const blockId = await this.ensureDatastore(cwd, false)
+      if (!blockId) return { ok: false, error: 'No Tickets datastore for this project' }
+      await this.api.updateRow(blockId, rowId, {
+        Title: title,
+        Description: input.description?.trim() || '',
+        Status: input.status || 'Open',
+        Priority: input.priority || 'Med',
+      })
+      log(`Updated ticket ${rowId} for ${cwd}`)
+      return { ok: true }
+    } catch (err: any) {
+      log(`updateTicket failed for ${cwd}: ${err?.message || err}`)
+      return { ok: false, error: err?.message || String(err) }
+    }
+  }
+
+  /** Lists existing tickets for the project, newest first. Does not create the
+   * datastore — an unconfigured project simply has no tickets yet. */
+  async listTickets(cwd: string): Promise<{ ok: boolean; tickets: Ticket[]; error?: string }> {
+    try {
+      const blockId = await this.ensureDatastore(cwd, false)
+      if (!blockId) return { ok: true, tickets: [] }
+      const res = await this.api.queryRows(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 }
+    } 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<string | null> {
+    const cached = this.blockCache.get(cwd)
+    if (cached) return cached
+
+    let folder: any = null
+    try {
+      folder = await this.api.findFolderByPath(cwd)
+    } catch {
+      return null
+    }
+    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 blockId = await this.findOrAdoptBlock(agentPage.id)
+    if (blockId) {
+      await this.ensureColumns(blockId)
+      this.blockCache.set(cwd, blockId)
+      return blockId
+    }
+
+    if (!create) return null
+
+    const columns = COLUMNS.map((c, i) => ({
+      id: `col_${i}`,
+      name: c.name,
+      type: c.type,
+      ...(c.options ? { options: c.options } : {}),
+    }))
+    const created = await this.api.createBlock(agentPage.id, {
+      type: 'datastore',
+      title: DATASTORE_TITLE,
+      props: { columns, system_key: SYSTEM_KEY },
+    })
+    if (created?.id) {
+      log(`Created "${DATASTORE_TITLE}" datastore on Agent Datastore page for ${cwd}`)
+      this.blockCache.set(cwd, created.id)
+      return created.id
+    }
+    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> {
+    const summaries = (await this.api.getPageBlockSummaries(pageId)) || []
+    const datastoreSummaries = summaries.filter((b: any) => b?.type === 'datastore' && b?.id)
+    if (datastoreSummaries.length === 0) return null
+
+    let titleFallbackId: string | null = null
+    let titleFallbackProps: Record<string, unknown> | null = null
+    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
+        }
+      } catch (err: any) {
+        log(`getBlock(${s.id}) failed during lookup: ${err?.message || err}`)
+      }
+    }
+
+    if (titleFallbackId) {
+      try {
+        await this.api.updateBlock(titleFallbackId, {
+          props: { ...(titleFallbackProps || {}), system_key: SYSTEM_KEY },
+        })
+        log(`Backfilled system_key on legacy Tickets block ${titleFallbackId}`)
+      } catch (err: any) {
+        log(`backfill system_key failed on ${titleFallbackId}: ${err?.message || err}`)
+      }
+      return titleFallbackId
+    }
+    return null
+  }
+
+  private async ensureColumns(blockId: string): Promise<void> {
+    try {
+      const schema = await this.api.getDatastoreSchema(blockId)
+      const existingCols = schema.columns || []
+      const existingNames = new Set(existingCols.map(c => c.name))
+      const missing = COLUMNS.filter(c => !existingNames.has(c.name))
+      if (missing.length === 0) return
+
+      const usedIds = new Set(existingCols.map(c => c.id))
+      let nextIdx = existingCols.length
+      const appended = missing.map(c => {
+        let id = `col_${nextIdx++}`
+        while (usedIds.has(id)) id = `col_${nextIdx++}`
+        usedIds.add(id)
+        return { id, name: c.name, type: c.type, ...(c.options ? { options: c.options } : {}) }
+      })
+      const merged = [...existingCols, ...appended]
+      await this.api.updateDatastoreSchema(blockId, merged)
+      log(`Added ${missing.length} missing column(s) to existing Tickets datastore: ${missing.map(c => c.name).join(', ')}`)
+    } catch (err: any) {
+      log(`ensureColumns failed: ${err?.message || err}`)
+    }
+  }
+}

package/src/preload/index.ts

@@ -44,6 +44,13 @@ const api = {
     ipcRenderer.invoke('app:homePath'),
   getCwd: (): Promise<string> =>
     ipcRenderer.invoke('app:cwd'),
+  getProjectName: (): Promise<string | null> =>
+    ipcRenderer.invoke('app:projectName'),
+  onProjectChanged: (callback: (name: string | null) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, name: string | null) => callback(name)
+    ipcRenderer.on('app:projectChanged', listener)
+    return () => ipcRenderer.removeListener('app:projectChanged', listener)
+  },
   browseCwd: (): Promise<string | null> =>
     ipcRenderer.invoke('app:browseCwd'),
   getVersion: (): Promise<string> =>
@@ -82,6 +89,16 @@ const api = {
   setTracking: (enabled: boolean): Promise<{ active: boolean }> =>
     ipcRenderer.invoke('tracking:set', enabled),
 
+  // Tickets (active tab)
+  getTicketProject: (): Promise<{ cwd: string | null; name: string | null }> =>
+    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 }> =>
+    ipcRenderer.invoke('tickets:list'),
+
   // Chat logging (global)
   getLogChat: (): Promise<{ enabled: boolean }> =>
     ipcRenderer.invoke('logchat:get'),

package/src/renderer/App.tsx

@@ -12,6 +12,7 @@ import {
 } from './components/PaneLayout'
 import { StatusBar } from './components/StatusBar'
 import { SettingsDialog } from './components/SettingsDialog'
+import { TicketPanel } from './components/TicketPanel'
 
 interface AgentConfig {
   id: string
@@ -35,6 +36,8 @@ declare global {
       getDefaultAgent: () => Promise<AgentConfig>
       getHomePath: () => Promise<string>
       getCwd: () => Promise<string>
+      getProjectName: () => Promise<string | null>
+      onProjectChanged: (callback: (name: string | null) => void) => () => void
       browseCwd: () => Promise<string | null>
       getSetting: (key: string) => Promise<string | null>
       setSetting: (key: string, value: string) => Promise<{ ok: boolean }>
@@ -44,6 +47,10 @@ declare global {
       saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string }) => Promise<{ ok: boolean }>
       switchProfile: (profileId: string) => Promise<{ ok: boolean }>
       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 }>; error?: string }>
       getTracking: () => Promise<{ active: boolean }>
       setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       getLogChat: () => Promise<{ enabled: boolean }>
@@ -107,6 +114,7 @@ export default function App() {
   const [showSettings, setShowSettings] = useState(false)
   const [wsStatus, setWsStatus] = useState('disconnected')
   const [cwd, setCwd] = useState<string | null>(null)
+  const [projectName, setProjectName] = useState<string | null>(null)
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
 
   // Multi-tab state
@@ -116,6 +124,7 @@ export default function App() {
   })
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id)
   const [trackingActive, setTrackingActive] = useState(false)
+  const [showTicketPanel, setShowTicketPanel] = useState(false)
 
   // Agent picker state: which tab is being configured (null = initial picker for first tab)
   const [pickerTargetTabId, setPickerTargetTabId] = useState<string | null>(tabs[0].id)
@@ -134,10 +143,17 @@ export default function App() {
       const initialCwd = await window.worker.getCwd().catch(() => window.worker.getHomePath())
       setCwd(initialCwd)
       cwdRef.current = initialCwd
+      // Connected ctlsurf project name for the header (null until a worker registers)
+      window.worker.getProjectName().then(setProjectName).catch(() => { /* ignore */ })
     }
     init()
   }, [])
 
+  useEffect(() => {
+    const unsub = window.worker.onProjectChanged((name) => setProjectName(name))
+    return unsub
+  }, [])
+
   useEffect(() => {
     const unsub = window.worker.onWorkerStatus((status) => setWsStatus(status))
     return unsub
@@ -398,7 +414,15 @@ export default function App() {
   return (
     <div className="app">
       <div className="titlebar">
-        <span className="titlebar-title">ctlsurf-worker</span>
+        <span className="titlebar-title">
+          ctlsurf
+          {projectName && (
+            <>
+              <span className="titlebar-title-sep">·</span>
+              <span className="titlebar-project" title={projectName}>{projectName}</span>
+            </>
+          )}
+        </span>
         <div className="titlebar-controls">
           <button className="titlebar-btn" onClick={() => setShowSettings(true)} title="Settings">
             Settings
@@ -412,6 +436,20 @@ export default function App() {
             <span className="tracking-icon">⏱</span>
             <span className={`tracking-dot ${trackingActive ? 'on' : 'off'}`} />
           </button>
+          <button
+            className={`titlebar-btn titlebar-icon-btn ${showTicketPanel ? 'active' : ''}`}
+            onClick={() => setShowTicketPanel(v => !v)}
+            title="Tickets for the active project"
+            aria-label="Tickets"
+          >
+            <svg className="ticket-tag-icon" viewBox="0 0 24 24" width="13" height="13"
+              fill="none" stroke="currentColor" strokeWidth="2"
+              strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+              <line x1="7" y1="7" x2="7.01" y2="7" />
+            </svg>
+            <span>Tickets</span>
+          </button>
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)
@@ -457,6 +495,7 @@ export default function App() {
 
       <StatusBar wsStatus={wsStatus} cwd={cwd} onChangeCwd={handleChangeCwd} updateInfo={updateInfo} />
       <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+      <TicketPanel open={showTicketPanel} onClose={() => setShowTicketPanel(false)} />
 
       {showAgentPicker && agents.length > 0 && (
         <AgentPicker