@phenx-inc/ctlsurf 0.12.1 → 0.13.1

package/out/renderer/assets/{typescript-rZeCMf0a.js → typescript-CB71AtAT.js}

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

package/out/renderer/assets/{xml-fNSZ-7so.js → xml-tHS1Ec9w.js}

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

package/out/renderer/assets/{yaml-1wxIuvzh.js → yaml-CZcp5ueF.js}

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

package/out/renderer/index.html

@@ -49,8 +49,8 @@
       color: #565f89;
     }
   </style>
-  <script type="module" crossorigin src="./assets/index-DxhW1emk.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-Cc_TqOCL.css">
+  <script type="module" crossorigin src="./assets/index-MqgBcJzy.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-Bi_MjBqs.css">
 </head>
 <body>
   <div id="boot-splash">

package/package.json

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

package/src/main/index.ts

@@ -254,6 +254,15 @@ function createWindow(): void {
     callback(true)
   })
 
+  // Keep links opened from inside the embedded ctlsurf webview (target=_blank,
+  // window.open) in the panel instead of spawning a detached popup window.
+  mainWindow.webContents.on('did-attach-webview', (_e, contents) => {
+    contents.setWindowOpenHandler(({ url }) => {
+      setImmediate(() => contents.loadURL(url))
+      return { action: 'deny' }
+    })
+  })
+
   if (process.env.ELECTRON_RENDERER_URL) {
     mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
   } else {

package/src/main/orchestrator.ts

@@ -708,7 +708,7 @@ export class Orchestrator {
     return this.ticketStore.updateTicket(cwd, rowId, input)
   }
 
-  async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; error?: string }> {
+  async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; blockId?: string; pageId?: string; error?: string }> {
     const cwd = this.getActiveTabProjectPath()
     if (!cwd) return { ok: false, tickets: [], error: 'No active terminal tab' }
     if (!this.ctlsurfApi.getApiKey()) {

package/src/main/ticketStore.ts

@@ -69,7 +69,10 @@ function findPageByTitle(pages: any[], title: string): any | null {
  */
 export class TicketStore {
   private api: CtlsurfApi
-  private blockCache = new Map<string, string>()
+  // 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 }>()
 
   constructor(api: CtlsurfApi) {
     this.api = api
@@ -80,11 +83,11 @@ export class TicketStore {
     const title = input.title?.trim()
     if (!title) return { ok: false, error: 'Title is required' }
     try {
-      const blockId = await this.ensureDatastore(cwd, true)
-      if (!blockId) {
+      const ds = await this.ensureDatastore(cwd, true)
+      if (!ds) {
         return { ok: false, error: 'No ctlsurf project found for this folder' }
       }
-      await this.api.addRow(blockId, {
+      await this.api.addRow(ds.blockId, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -104,9 +107,9 @@ export class TicketStore {
     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, {
+      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, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -122,11 +125,11 @@ export class TicketStore {
 
   /** 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 }> {
+  async listTickets(cwd: string): Promise<{ ok: boolean; tickets: Ticket[]; blockId?: string; pageId?: string; 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 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 ?? ''),
@@ -135,15 +138,15 @@ export class TicketStore {
         priority: String(r.data?.Priority ?? 'Med'),
         created: (r.data?.Created as string) ?? r.created_at ?? null,
       }))
-      return { ok: true, tickets }
+      return { ok: true, tickets, blockId: ds.blockId, pageId: ds.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<string | null> {
-    const cached = this.blockCache.get(cwd)
+  private async ensureDatastore(cwd: string, create: boolean): Promise<{ blockId: string; pageId: string } | null> {
+    const cached = this.dsCache.get(cwd)
     if (cached) return cached
 
     let folder: any = null
@@ -157,12 +160,14 @@ export class TicketStore {
     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 blockId = await this.findOrAdoptBlock(agentPage.id)
+    const blockId = await this.findOrAdoptBlock(pageId)
     if (blockId) {
       await this.ensureColumns(blockId)
-      this.blockCache.set(cwd, blockId)
-      return blockId
+      const ds = { blockId, pageId }
+      this.dsCache.set(cwd, ds)
+      return ds
     }
 
     if (!create) return null
@@ -173,15 +178,16 @@ export class TicketStore {
       type: c.type,
       ...(c.options ? { options: c.options } : {}),
     }))
-    const created = await this.api.createBlock(agentPage.id, {
+    const created = await this.api.createBlock(pageId, {
       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
+      const ds = { blockId: created.id, pageId }
+      this.dsCache.set(cwd, ds)
+      return ds
     }
     return null
   }

package/src/renderer/App.tsx

@@ -60,7 +60,7 @@ declare global {
       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 }>
+      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 }>
       getTracking: () => Promise<{ active: boolean }>
       setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       getLogChat: () => Promise<{ enabled: boolean }>
@@ -269,6 +269,18 @@ export default function App() {
     setTimeout(() => window.worker.writePty(activeTabId, '\r'), 80)
   }, [activeTabId])
 
+  // Send a prepared prompt (e.g. a ticket) into the active terminal and submit
+  // it, so the coding agent can start working immediately. Same paste-then-
+  // delayed-\r dance as voice typing — a slightly longer delay since ticket
+  // prompts are multi-line and take a touch longer to drain before the Enter.
+  const handleSendToTerminal = useCallback((text: string) => {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    window.worker.writePty(activeTabId, trimmed)
+    focusTerminal(activeTabId)
+    setTimeout(() => window.worker.writePty(activeTabId, '\r'), 120)
+  }, [activeTabId])
+
   const cwdRef = useRef<string | null>(null)
 
   const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
@@ -510,7 +522,7 @@ export default function App() {
       ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
-    { id: 'tickets', label: 'Tickets', content: <TicketPane /> },
+    { id: 'tickets', label: 'Tickets', content: <TicketPane onSendToTerminal={handleSendToTerminal} /> },
   ]
 
   return (

package/src/renderer/components/CtlsurfPanel.tsx

@@ -1,65 +1,199 @@
-import { useRef, useEffect, useState } from 'react'
+import { useRef, useEffect, useState, useCallback } from 'react'
 
 interface CtlsurfPanelProps {
-  // An authenticated ctlsurf URL to load (e.g. from a terminal link click).
-  // `n` bumps per request so repeat navigations to the same URL still apply.
+  // A URL to load (e.g. from a terminal link click). `n` bumps per request so
+  // repeat navigations to the same URL still apply.
   navigate?: { url: string; n: number } | null
 }
 
+// The <webview> element exposes navigation methods at runtime that aren't in
+// React's typings — narrow the ref to the bits we use.
+type WebviewEl = HTMLElement & {
+  loadURL: (url: string) => void
+  goBack: () => void
+  goForward: () => void
+  reload: () => void
+  stop: () => void
+  canGoBack: () => boolean
+  canGoForward: () => boolean
+}
+
+// Strip the noisy auth/embed params so the address bar shows a clean URL.
+function displayUrl(raw: string): string {
+  try {
+    const u = new URL(raw)
+    u.searchParams.delete('_code')
+    u.searchParams.delete('embed')
+    return u.toString()
+  } catch {
+    return raw
+  }
+}
+
 export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
-  const webviewRef = useRef<HTMLWebViewElement>(null)
-  const [url, setUrl] = useState<string | null>(null)
-  const [key, setKey] = useState(0) // force remount on cwd change / navigation
+  const webviewRef = useRef<WebviewEl | null>(null)
+  const [src, setSrc] = useState<string | null>(null) // initial webview src
+  const [address, setAddress] = useState('')          // editable address-bar text
+  const [loading, setLoading] = useState(false)
+  const [nav, setNav] = useState({ back: false, forward: false })
+  const [key, setKey] = useState(0)                   // remount on cwd change
+
+  const hasSrcRef = useRef(false)                // has the webview been seeded?
+  const readyRef = useRef(false)                 // is the webview dom-ready?
+  const pendingRef = useRef<string | null>(null) // url queued before dom-ready
+
+  // Resolve a raw URL to an authenticated ctlsurf embed URL when it points at
+  // ctlsurf, else return it unchanged.
+  const resolve = useCallback(async (raw: string): Promise<string> => {
+    try {
+      return (await window.worker.getEmbedUrl(raw)) || raw
+    } catch {
+      return raw
+    }
+  }, [])
+
+  // Load a URL into the webview. The first load seeds the `src` attribute (the
+  // element doesn't exist yet); later loads call loadURL so in-webview history
+  // stays intact for the back/forward buttons.
+  const load = useCallback((url: string) => {
+    if (!url) return
+    setAddress(displayUrl(url))
+    if (!hasSrcRef.current) {
+      hasSrcRef.current = true
+      setSrc(url)
+      return
+    }
+    const wv = webviewRef.current
+    if (wv && readyRef.current) wv.loadURL(url)
+    else pendingRef.current = url
+  }, [])
 
-  const loadUrl = async () => {
+  // Default-load the project page, preferring the authenticated page URL.
+  const loadProject = useCallback(async () => {
     try {
       const info = await window.worker.getWebviewInfo()
-      setUrl(info.pageUrl || info.frontendUrl)
+      load(info.pageUrl || info.frontendUrl)
     } catch (err) {
       console.error('[ctlsurf] Failed to get webview info:', err)
-      setUrl('https://app.ctlsurf.com')
+      load('https://app.ctlsurf.com')
     }
-  }
+  }, [load])
 
-  // Default-load the project page on mount, unless a navigation is already
-  // queued (e.g. the pane was just revealed to show a clicked link).
-  useEffect(() => { if (!navigate?.url) loadUrl() }, [])
+  // On mount, load the project page unless a navigation is already queued (e.g.
+  // the pane was just revealed to show a clicked link).
+  useEffect(() => { if (!navigate?.url) loadProject() }, [])
 
-  // Navigate to a specific authenticated URL when requested.
+  // Navigate to a specific URL when requested (terminal / external link click).
   useEffect(() => {
-    if (navigate?.url) {
-      setUrl(navigate.url)
-      setKey(k => k + 1)
-    }
+    if (navigate?.url) resolve(navigate.url).then(load)
   }, [navigate?.n])
 
-  // Reload webview when cwd changes
+  // Reload (remount) when the cwd changes — new project context.
   useEffect(() => {
     const unsub = window.worker.onCwdChanged(() => {
-      setUrl(null)
+      hasSrcRef.current = false
+      readyRef.current = false
+      pendingRef.current = null
+      setSrc(null)
       setKey(k => k + 1)
-      loadUrl()
+      loadProject()
     })
     return unsub
-  }, [])
+  }, [loadProject])
 
-  if (!url) {
-    return (
-      <div className="ctlsurf-panel" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
-      </div>
-    )
+  // Wire webview lifecycle + navigation events to the address bar.
+  useEffect(() => {
+    const wv = webviewRef.current
+    if (!wv) return
+    const syncNav = () =>
+      setNav({ back: wv.canGoBack?.() ?? false, forward: wv.canGoForward?.() ?? false })
+    const onReady = () => {
+      readyRef.current = true
+      if (pendingRef.current) {
+        wv.loadURL(pendingRef.current)
+        pendingRef.current = null
+      }
+      syncNav()
+    }
+    const onNavigate = (e: Event) => {
+      const url = (e as Event & { url?: string }).url
+      if (url) setAddress(displayUrl(url))
+      syncNav()
+    }
+    const onStart = () => setLoading(true)
+    const onStop = () => { setLoading(false); syncNav() }
+    wv.addEventListener('dom-ready', onReady)
+    wv.addEventListener('did-navigate', onNavigate)
+    wv.addEventListener('did-navigate-in-page', onNavigate)
+    wv.addEventListener('did-start-loading', onStart)
+    wv.addEventListener('did-stop-loading', onStop)
+    return () => {
+      wv.removeEventListener('dom-ready', onReady)
+      wv.removeEventListener('did-navigate', onNavigate)
+      wv.removeEventListener('did-navigate-in-page', onNavigate)
+      wv.removeEventListener('did-start-loading', onStart)
+      wv.removeEventListener('did-stop-loading', onStop)
+    }
+  }, [src, key])
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    let target = address.trim()
+    if (!target) return
+    // Bare hostnames (no scheme) default to https.
+    if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(target)) target = 'https://' + target
+    resolve(target).then(load)
   }
 
   return (
     <div className="ctlsurf-panel">
-      <webview
-        key={key}
-        ref={webviewRef as any}
-        src={url}
-        style={{ width: '100%', height: '100%' }}
-        allowpopups={'true' as any}
-      />
+      <div className="ctlsurf-addressbar">
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title="Back"
+          disabled={!nav.back}
+          onClick={() => webviewRef.current?.goBack?.()}
+        >‹</button>
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title="Forward"
+          disabled={!nav.forward}
+          onClick={() => webviewRef.current?.goForward?.()}
+        >›</button>
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title={loading ? 'Stop' : 'Reload'}
+          onClick={() => (loading ? webviewRef.current?.stop?.() : webviewRef.current?.reload?.())}
+        >{loading ? '×' : '⟳'}</button>
+        <form className="ctlsurf-address-form" onSubmit={onSubmit}>
+          <input
+            className="ctlsurf-address-input"
+            value={address}
+            spellCheck={false}
+            placeholder="Enter a URL"
+            onChange={e => setAddress(e.target.value)}
+            onFocus={e => e.currentTarget.select()}
+          />
+        </form>
+      </div>
+      <div className="ctlsurf-webview-host">
+        {src ? (
+          <webview
+            key={key}
+            ref={webviewRef as any}
+            src={src}
+            style={{ width: '100%', height: '100%' }}
+            allowpopups={'true' as any}
+          />
+        ) : (
+          <div className="ctlsurf-webview-loading">
+            <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

package/src/renderer/components/TerminalPanel.tsx

@@ -22,29 +22,15 @@ function copySelectionAsEmailTable(terminal: Terminal): void {
   )
 }
 
-// Open a URL in the system browser, mirroring WebLinksAddon's safe default
-// (clear the opener so the new page can't reach back into this window).
-function openExternal(uri: string): void {
-  const win = window.open()
-  if (win) {
-    try { (win as { opener: unknown }).opener = null } catch { /* ignore */ }
-    win.location.href = uri
-  }
-}
-
-// Custom handler for links clicked in the terminal. ctlsurf page links are
-// routed into the embedded (authenticated) ctlsurf panel via a window event;
-// everything else opens in the default browser as before.
+// Custom handler for links clicked in the terminal. Every clicked URL is routed
+// into the embedded ctlsurf browser panel via a window event: ctlsurf links are
+// first resolved to an authenticated embed URL, anything else loads as-is.
 function handleTerminalLink(_event: MouseEvent, uri: string): void {
+  const openInPanel = (url: string) =>
+    window.dispatchEvent(new CustomEvent('ctlsurf-open-url', { detail: { url } }))
   window.worker.getEmbedUrl(uri)
-    .then((embedUrl) => {
-      if (embedUrl) {
-        window.dispatchEvent(new CustomEvent('ctlsurf-open-url', { detail: { url: embedUrl } }))
-      } else {
-        openExternal(uri)
-      }
-    })
-    .catch(() => openExternal(uri))
+    .then((embedUrl) => openInPanel(embedUrl || uri))
+    .catch(() => openInPanel(uri))
 }
 
 interface AgentConfig {

package/src/renderer/components/TicketPanel.tsx

@@ -46,6 +46,44 @@ function TagIcon({ size = 16 }: { size?: number }) {
   )
 }
 
+// Paper-plane "send" glyph for the per-ticket dispatch button.
+function SendIcon({ size = 15 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
+      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </svg>
+  )
+}
+
+interface TicketRefs { blockId: string; pageId: string }
+
+// Formats a ticket into a prompt the coding agent can act on directly. Includes
+// the ctlsurf identifiers (row / datastore block / page) so the agent can read
+// the full ticket or flip its status via the ctlsurf MCP tools.
+function ticketPrompt(t: Ticket, refs: TicketRefs | null): string {
+  const lines = [
+    'Please work on this ticket:',
+    `Title: ${t.title || 'Untitled'}`,
+    `Priority: ${t.priority}`,
+  ]
+  const desc = t.description?.trim()
+  if (desc) lines.push('', desc)
+  lines.push(
+    '',
+    'ctlsurf references (use the ctlsurf MCP tools to read details or update status):',
+    `- Ticket row ID: ${t.id}`,
+  )
+  if (refs) {
+    lines.push(
+      `- Tickets datastore block ID: ${refs.blockId}`,
+      `- Agent Datastore page ID: ${refs.pageId}`,
+    )
+  }
+  return lines.join('\n')
+}
+
 interface SegmentedProps {
   options: Option[]
   value: string
@@ -75,40 +113,55 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
 }
 
 // A single ticket row. Shared between the open list and the (collapsible)
-// Done section so both render identically.
-function TicketCard({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
+// Done section so both render identically. The card body opens the editor; the
+// trailing send button dispatches the ticket straight to the coding terminal.
+function TicketCard({ ticket, onClick, onSend }: { ticket: Ticket; onClick: () => void; onSend: () => void }) {
   return (
-    <button className="ticket-card" onClick={onClick}>
-      <span className="ticket-card-bar" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
-      <div className="ticket-card-main">
-        <span className="ticket-card-title">{ticket.title || 'Untitled'}</span>
-        <div className="ticket-card-meta">
-          <span className="ticket-card-status" style={{ color: colorOf(STATUS_OPTIONS, ticket.status) }}>
-            <span className="ticket-seg-dot" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
-            {ticket.status}
-          </span>
-          {ticket.created && <span className="ticket-card-date">{formatDate(ticket.created)}</span>}
+    <div className="ticket-card">
+      <button className="ticket-card-open" onClick={onClick} title="Edit ticket">
+        <span className="ticket-card-bar" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
+        <div className="ticket-card-main">
+          <span className="ticket-card-title">{ticket.title || 'Untitled'}</span>
+          <div className="ticket-card-meta">
+            <span className="ticket-card-status" style={{ color: colorOf(STATUS_OPTIONS, ticket.status) }}>
+              <span className="ticket-seg-dot" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
+              {ticket.status}
+            </span>
+            {ticket.created && <span className="ticket-card-date">{formatDate(ticket.created)}</span>}
+          </div>
         </div>
-      </div>
-      <span
-        className="ticket-card-pri"
-        style={{ color: colorOf(PRIORITY_OPTIONS, ticket.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, ticket.priority)}66` }}
+        <span
+          className="ticket-card-pri"
+          style={{ color: colorOf(PRIORITY_OPTIONS, ticket.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, ticket.priority)}66` }}
+        >
+          {ticket.priority}
+        </span>
+      </button>
+      <button
+        type="button"
+        className="ticket-card-send"
+        onClick={onSend}
+        title="Send to coding terminal"
+        aria-label="Send ticket to coding terminal"
       >
-        {ticket.priority}
-      </span>
-    </button>
+        <SendIcon />
+      </button>
+    </div>
   )
 }
 
 // Docked side-pane variant of the ticket UI: header + list/form body + footer.
 // It only mounts when its pane is visible, so it loads on mount and refreshes
 // when the connected project (cwd) changes. Closed via the pane's own header.
-export function TicketPane() {
+export function TicketPane({ onSendToTerminal }: { onSendToTerminal: (text: string) => void }) {
   const [project, setProject] = useState<string | null>(null)
   const [view, setView] = useState<View>('list')
 
   // list state
   const [tickets, setTickets] = useState<Ticket[]>([])
+  // ctlsurf identifiers for this project's Tickets datastore, sent along when
+  // dispatching a ticket so the agent can locate it via the MCP tools.
+  const [refs, setRefs] = useState<TicketRefs | null>(null)
   const [listLoading, setListLoading] = useState(false)
   const [listError, setListError] = useState<string | null>(null)
   // Done tickets are tucked into a collapsed section so the list stays focused
@@ -128,10 +181,13 @@ export function TicketPane() {
     setListError(null)
     try {
       const r = await window.worker.listTickets()
-      if (r?.ok) setTickets(r.tickets || [])
-      else { setTickets([]); setListError(r?.error || 'Failed to load tickets') }
+      if (r?.ok) {
+        setTickets(r.tickets || [])
+        setRefs(r.blockId && r.pageId ? { blockId: r.blockId, pageId: r.pageId } : null)
+      } else { setTickets([]); setRefs(null); setListError(r?.error || 'Failed to load tickets') }
     } catch (err: any) {
       setTickets([])
+      setRefs(null)
       setListError(err?.message || 'Failed to load tickets')
     } finally {
       setListLoading(false)
@@ -251,7 +307,7 @@ export function TicketPane() {
                 </div>
               )}
               {!listLoading && activeTickets.map(t => (
-                <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} />
+                <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} onSend={() => onSendToTerminal(ticketPrompt(t, refs))} />
               ))}
               {!listLoading && activeTickets.length === 0 && doneTickets.length > 0 && (
                 <div className="ticket-list-msg">Nothing open — all caught up.</div>
@@ -269,7 +325,7 @@ export function TicketPane() {
                     <span className="ticket-done-count">{doneTickets.length}</span>
                   </button>
                   {showDone && doneTickets.map(t => (
-                    <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} />
+                    <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} onSend={() => onSendToTerminal(ticketPrompt(t, refs))} />
                   ))}
                 </>
               )}