@phenx-inc/ctlsurf 0.12.1 → 0.13.4

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))} />
                   ))}
                 </>
               )}

package/src/renderer/lib/speech.ts

@@ -78,7 +78,8 @@ function splitIntoChunks(text: string): string[] {
 // ─── Preferences ─────────────────────────────────────
 
 export function getEngine(): TtsEngineId {
-  try { return localStorage.getItem(ENGINE_KEY) === 'neural' ? 'neural' : 'web' } catch { return 'web' }
+  // Default to the neural voice; only an explicit 'web' choice opts back out.
+  try { return localStorage.getItem(ENGINE_KEY) === 'web' ? 'web' : 'neural' } catch { return 'neural' }
 }
 export function setEngine(id: TtsEngineId): void {
   try { localStorage.setItem(ENGINE_KEY, id) } catch { /* ignore */ }

package/src/renderer/styles.css

@@ -529,13 +529,88 @@ html, body, #root {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ctlsurf-addressbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 6px;
+  background: #1a1b26;
+  border-bottom: 1px solid #2a2b3d;
+}
+
+.ctlsurf-nav-btn {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #a9b1d6;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ctlsurf-nav-btn:hover:not(:disabled) {
+  background: #2a2b3d;
+}
+
+.ctlsurf-nav-btn:disabled {
+  color: #565f89;
+  opacity: 0.5;
+  cursor: default;
 }
 
-.ctlsurf-panel webview {
+.ctlsurf-address-form {
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 0;
+}
+
+.ctlsurf-address-input {
+  width: 100%;
+  height: 26px;
+  padding: 0 11px;
+  background: #16161e;
+  border: 1px solid #2a2b3d;
+  border-radius: 13px;
+  color: #c0caf5;
+  font-size: 12px;
+  outline: none;
+}
+
+.ctlsurf-address-input:focus {
+  border-color: #7aa2f7;
+}
+
+.ctlsurf-webview-host {
+  flex: 1 1 auto;
+  position: relative;
+  min-height: 0;
+}
+
+.ctlsurf-webview-host webview {
   width: 100%;
   height: 100%;
 }
 
+.ctlsurf-webview-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Status bar */
 .statusbar {
   height: 24px;
@@ -1541,6 +1616,22 @@ html, body, #root {
   font-size: 16px;
 }
 
+/* About section inside the Settings dialog. */
+.settings-about {
+  border-top: 1px solid #2a2b3d;
+  padding-top: 16px;
+}
+.settings-about .about-name {
+  color: #c0caf5;
+  font-size: 14px;
+  font-weight: 600;
+}
+.settings-about .about-copyright {
+  color: #9aa5ce;
+  font-size: 12px;
+  margin: 6px 0 8px;
+}
+
 .settings-section {
   margin-bottom: 20px;
 }
@@ -2052,24 +2143,57 @@ html, body, #root {
 .ticket-card {
   display: flex;
   align-items: stretch;
-  gap: 10px;
   background: #15161f;
   border: 1px solid #262a3f;
   border-radius: 10px;
-  padding: 10px 11px 10px 0;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
   overflow: hidden;
-  transition: border-color 0.13s ease, background 0.13s ease, transform 0.06s ease;
+  transition: border-color 0.13s ease, background 0.13s ease;
 }
 .ticket-card:hover {
   border-color: #3d425f;
   background: #181a26;
 }
-.ticket-card:active {
+/* Clickable body of the card — opens the editor. */
+.ticket-card-open {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  padding: 10px 11px 10px 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: transform 0.06s ease;
+}
+.ticket-card-open:active {
   transform: scale(0.99);
 }
+/* Trailing button that dispatches the ticket to the coding terminal. */
+.ticket-card-send {
+  flex-shrink: 0;
+  width: 36px;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-left: 1px solid #262a3f;
+  color: #565f89;
+  cursor: pointer;
+  transition: background 0.13s ease, color 0.13s ease, transform 0.06s ease;
+}
+.ticket-card-send:hover {
+  background: #1b2030;
+  color: #7aa2f7;
+}
+.ticket-card-send:active {
+  transform: scale(0.9);
+}
 .ticket-card-bar {
   width: 3px;
   border-radius: 3px;
@@ -2144,6 +2268,106 @@ html, body, #root {
 .term-context-menu button:hover {
   background: #2a2b3d;
 }
+/* Always-visible utility button (top-right) — opens the snapshot panel. */
+.term-util-btn {
+  position: absolute;
+  top: 6px;
+  right: 14px;
+  z-index: 6;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #2a2b3d;
+  border: 1px solid #414868;
+  color: #c0caf5;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.55;
+  transition: opacity 0.13s ease, background 0.13s ease;
+}
+.term-util-btn:hover {
+  opacity: 1;
+  background: #343650;
+}
+
+/* Snapshot panel: a frozen, selectable copy of the screen text. */
+.term-snapshot {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  background: #16161e;
+  border: 1px solid #414868;
+}
+.term-snapshot-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  background: #1f2335;
+  border-bottom: 1px solid #414868;
+  color: #9aa5ce;
+  font-size: 12px;
+}
+.term-snapshot-x {
+  background: transparent;
+  border: none;
+  color: #9aa5ce;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.term-snapshot-x:hover {
+  background: #2a2b3d;
+  color: #c0caf5;
+}
+.term-snapshot-text {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  margin: 0;
+  padding: 10px 12px;
+  white-space: pre;
+  user-select: text;
+  cursor: text;
+  color: #c0caf5;
+  background: #16161e;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.term-snapshot-text::selection {
+  background: #33467c;
+}
+.term-snapshot-actions {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #1f2335;
+  border-top: 1px solid #414868;
+}
+.term-snapshot-actions button {
+  background: #2a2b3d;
+  border: 1px solid #414868;
+  border-radius: 5px;
+  color: #c0caf5;
+  font-size: 12.5px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.term-snapshot-actions button:hover {
+  background: #343650;
+}
+.term-snapshot-done {
+  margin-left: auto;
+}
 .term-toast {
   position: fixed;
   bottom: 24px;