@phenx-inc/ctlsurf 0.12.0 → 0.13.1

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 {
@@ -67,27 +53,72 @@ interface TerminalPanelProps {
 // Keyed by tabId so each tab has its own xterm + pty listeners.
 // Survives React re-renders but cleaned up when tab is closed.
 
-const _terminals = new Map<string, {
+type TermState = {
   terminal: Terminal
   fitAddon: FitAddon
   unsubData: (() => void) | null
   unsubExit: (() => void) | null
   spawnedAgentId: string | null
+  // Follow mode: while true, new output keeps the view pinned to the bottom.
   pinnedToBottom: boolean
-}>()
+  // When NOT following, the absolute buffer line held at the top of the
+  // viewport — restored after each write so redraws can't drag the view
+  // (neither down to the bottom, nor up to the top — the old bug).
+  anchorLine: number | null
+  // One-shot flag set by a real user scroll gesture (wheel / scroll keys) and
+  // consumed by the very next onScroll, so a redraw firing onScroll right after
+  // a gesture isn't mistaken for one. Spinner redraws (~10x/s while "thinking")
+  // would otherwise be misread as user intent and re-pin to the bottom.
+  userScrollPending: boolean
+  // Guard so our own programmatic scrolls don't feed back through onScroll.
+  holding: boolean
+  // Subscribers (the jump-to-latest button) notified when follow mode flips.
+  pinListeners: Set<(pinned: boolean) => void>
+}
 
+const _terminals = new Map<string, TermState>()
+
+// Within a couple of lines of the bottom still counts as "at bottom", so a
+// small redraw delta doesn't strand the view just shy of the end.
 function isAtBottom(terminal: Terminal): boolean {
   const buf = terminal.buffer.active
-  return buf.viewportY >= buf.baseY
+  return buf.baseY - buf.viewportY <= 2
 }
 
-function scrollIfPinned(tabId: string, terminal: Terminal) {
-  const state = _terminals.get(tabId)
-  if (state?.pinnedToBottom) {
-    terminal.scrollToBottom()
+function notifyPin(state: TermState): void {
+  state.pinListeners.forEach((fn) => fn(state.pinnedToBottom))
+}
+
+function setPinned(state: TermState, pinned: boolean): void {
+  if (pinned) state.anchorLine = null
+  if (state.pinnedToBottom === pinned) return
+  state.pinnedToBottom = pinned
+  notifyPin(state)
+}
+
+// Re-assert the intended scroll position: follow the bottom while pinned,
+// otherwise hold the user's anchored line. Guarded so the resulting onScroll
+// is recognised as ours and ignored. This both keeps output pinned AND stops
+// involuntary redraw jumps (the old "scrolls to the top" bug) from sticking.
+function reassert(state: TermState): void {
+  const { terminal } = state
+  state.holding = true
+  try {
+    if (state.pinnedToBottom) {
+      terminal.scrollToBottom()
+    } else if (state.anchorLine != null && terminal.buffer.active.viewportY !== state.anchorLine) {
+      terminal.scrollToLine(state.anchorLine)
+    }
+  } finally {
+    state.holding = false
   }
 }
 
+function markGesture(tabId: string): void {
+  const s = _terminals.get(tabId)
+  if (s) s.userScrollPending = true
+}
+
 function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): { terminal: Terminal; fitAddon: FitAddon } {
   const existing = _terminals.get(tabId)
   if (existing) {
@@ -137,6 +168,10 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   // is running, where right-click is forwarded to the program instead.
   terminal.attachCustomKeyEventHandler((e) => {
     if (e.type !== 'keydown') return true
+    // Buffer-scroll keys count as a user gesture (see onScroll).
+    if (e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Home' || e.key === 'End') {
+      markGesture(tabId)
+    }
     const isCombo = (e.metaKey || e.ctrlKey) && e.shiftKey && e.code === 'KeyE'
     if (!isCombo) return true
     e.preventDefault()
@@ -144,32 +179,53 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     return false // consume — don't forward to the pty
   })
 
-  const state = {
+  const state: TermState = {
     terminal,
     fitAddon,
-    unsubData: null as (() => void) | null,
-    unsubExit: null as (() => void) | null,
-    spawnedAgentId: null as string | null,
+    unsubData: null,
+    unsubExit: null,
+    spawnedAgentId: null,
     pinnedToBottom: true,
+    anchorLine: null,
+    userScrollPending: false,
+    holding: false,
+    pinListeners: new Set(),
   }
 
-  // Track scroll position
+  // Track scroll position. Distinguish a real user scroll (recent wheel/key
+  // gesture) from the involuntary viewport jumps TUI redraws cause: trust the
+  // former to set follow/anchor; for the latter, re-assert our target so the
+  // view neither snaps to the bottom nor jumps to the top.
   terminal.onScroll(() => {
-    state.pinnedToBottom = isAtBottom(terminal)
+    if (state.holding) return
+    if (!state.userScrollPending) {
+      // Not tied to a user gesture → an involuntary scroll from a redraw.
+      // Hold our target instead of trusting it (this is the spinner case:
+      // every screen update would otherwise drag the view back to the bottom).
+      reassert(state)
+      return
+    }
+    state.userScrollPending = false
+    if (isAtBottom(terminal)) {
+      setPinned(state, true)
+    } else {
+      state.anchorLine = terminal.buffer.active.viewportY
+      setPinned(state, false)
+    }
   })
 
-  // Send keystrokes to pty
+  // Send keystrokes to pty — typing always returns to (and follows) the bottom.
   terminal.onData((data) => {
-    state.pinnedToBottom = true
+    setPinned(state, true)
     terminal.scrollToBottom()
     window.worker.writePty(tabId, data)
   })
 
-  // Receive pty output for this tab
+  // Receive pty output for this tab. Re-assert AFTER the write is parsed (the
+  // write callback) so we read settled buffer coordinates.
   state.unsubData = window.worker.onPtyData((eventTabId, data) => {
     if (eventTabId === tabId) {
-      terminal.write(data)
-      scrollIfPinned(tabId, terminal)
+      terminal.write(data, () => reassert(state))
     }
   })
 
@@ -206,6 +262,17 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
   const containerRef = useRef<HTMLDivElement>(null)
   const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
   const [toast, setToast] = useState<string | null>(null)
+  // Mirrors the terminal's follow-mode; drives the "jump to latest" overlay,
+  // which only shows while the user has scrolled up.
+  const [followBottom, setFollowBottom] = useState(true)
+
+  const jumpToLatest = () => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setPinned(s, true)
+    s.terminal.scrollToBottom()
+    s.terminal.focus()
+  }
 
   // Right-click → offer "Copy as email table", but only when the current
   // selection actually parses as a table; otherwise fall through to default.
@@ -270,7 +337,13 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
 
     fitAddon.fit()
-    scrollIfPinned(tabId, terminal)
+    const attached = _terminals.get(tabId)
+    if (attached) reassert(attached)
+
+    // Wheel over the terminal is an explicit user scroll — stamp it so onScroll
+    // treats the resulting move as intentional (not an involuntary redraw jump).
+    const onWheel = () => markGesture(tabId)
+    terminal.element?.addEventListener('wheel', onWheel, { passive: true })
 
     // Resize handling — skip when the container is hidden (display:none → 0x0),
     // otherwise fit() reports a tiny size and the PTY gets stuck at ~4 cols
@@ -286,7 +359,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
         state.fitAddon.fit()
         const { cols, rows } = state.terminal
         if (cols < 10 || rows < 5) return
-        scrollIfPinned(tabId, state.terminal)
+        reassert(state)
         window.worker.resizePty(tabId, cols, rows)
       }, 150)
     }
@@ -299,6 +372,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       clearTimeout(resizeTimeout)
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
+      terminal.element?.removeEventListener('wheel', onWheel)
       // Do NOT dispose terminal or unsub PTY listeners — they persist across remounts
     }
   }, [tabId, onExit])
@@ -317,7 +391,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       const s = _terminals.get(tabId)
       if (s) {
         s.fitAddon.fit()
-        s.pinnedToBottom = true
+        setPinned(s, true)
         s.terminal.scrollToBottom()
         const { cols, rows } = s.terminal
         window.worker.resizePty(tabId, cols, rows)
@@ -337,7 +411,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
           if (state) {
             state.fitAddon.fit()
             state.terminal.focus()
-            scrollIfPinned(tabId, state.terminal)
+            reassert(state)
             const { cols, rows } = state.terminal
             window.worker.resizePty(tabId, cols, rows)
           }
@@ -346,9 +420,32 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
   }, [isActive, tabId])
 
+  // Subscribe to follow-mode flips so the jump button shows/hides. Runs after
+  // the attach effect has created the terminal for this tab.
+  useEffect(() => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setFollowBottom(s.pinnedToBottom)
+    const fn = (p: boolean) => setFollowBottom(p)
+    s.pinListeners.add(fn)
+    return () => { s.pinListeners.delete(fn) }
+  }, [tabId])
+
   return (
     <>
-      <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+      <div className="terminal-wrap">
+        <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+        {!followBottom && (
+          <button
+            type="button"
+            className="term-jump-latest"
+            onMouseDown={(e) => { e.preventDefault(); jumpToLatest() }}
+            title="Jump to latest output"
+          >
+            ↓ Latest
+          </button>
+        )}
+      </div>
       {menu && (
         <div className="term-context-menu" style={{ position: 'fixed', left: menu.x, top: menu.y }}>
           <button type="button" onMouseDown={(e) => { e.preventDefault(); runConvert() }}>

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
@@ -74,17 +112,61 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
   )
 }
 
+// A single ticket row. Shared between the open list and the (collapsible)
+// 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 (
+    <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>
+        <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"
+      >
+        <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
+  // on what's still open; the user can expand to review completed work.
+  const [showDone, setShowDone] = useState(false)
 
   // form state
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -99,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)
@@ -178,6 +263,10 @@ export function TicketPane() {
     return () => window.removeEventListener('keydown', onKey)
   }, [view, handleSave])
 
+  // Split out Done tickets so they can live in their own collapsed section.
+  const activeTickets = tickets.filter(t => t.status !== 'Done')
+  const doneTickets = tickets.filter(t => t.status === 'Done')
+
   return (
     <div className="ticket-pane" role="region" aria-label="Tickets">
       <div className="ticket-drawer-header">
@@ -198,6 +287,9 @@ export function TicketPane() {
               </span>
             </div>
           </div>
+          {view === 'list' && (
+            <button className="ticket-drawer-new" onClick={openNewForm} title="New ticket">+ New</button>
+          )}
         </div>
 
         {view === 'list' ? (
@@ -214,34 +306,39 @@ export function TicketPane() {
                   <span className="ticket-empty-hint">Log the first one for this project.</span>
                 </div>
               )}
-              {!listLoading && tickets.map(t => (
-                <button key={t.id} className="ticket-card" onClick={() => openEditForm(t)}>
-                  <span className="ticket-card-bar" style={{ background: colorOf(STATUS_OPTIONS, t.status) }} />
-                  <div className="ticket-card-main">
-                    <span className="ticket-card-title">{t.title || 'Untitled'}</span>
-                    <div className="ticket-card-meta">
-                      <span className="ticket-card-status" style={{ color: colorOf(STATUS_OPTIONS, t.status) }}>
-                        <span className="ticket-seg-dot" style={{ background: colorOf(STATUS_OPTIONS, t.status) }} />
-                        {t.status}
-                      </span>
-                      {t.created && <span className="ticket-card-date">{formatDate(t.created)}</span>}
-                    </div>
-                  </div>
-                  <span
-                    className="ticket-card-pri"
-                    style={{ color: colorOf(PRIORITY_OPTIONS, t.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, t.priority)}66` }}
-                  >
-                    {t.priority}
-                  </span>
-                </button>
+              {!listLoading && activeTickets.map(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>
+              )}
+              {!listLoading && doneTickets.length > 0 && (
+                <>
+                  <button
+                    type="button"
+                    className="ticket-done-toggle"
+                    onClick={() => setShowDone(v => !v)}
+                    aria-expanded={showDone}
+                  >
+                    <span className={`ticket-done-caret ${showDone ? 'open' : ''}`} aria-hidden="true">▸</span>
+                    <span className="ticket-done-label">Done</span>
+                    <span className="ticket-done-count">{doneTickets.length}</span>
+                  </button>
+                  {showDone && doneTickets.map(t => (
+                    <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} onSend={() => onSendToTerminal(ticketPrompt(t, refs))} />
+                  ))}
+                </>
+              )}
             </div>
-            <div className="ticket-drawer-footer">
-              <span className="ticket-drawer-hint">
-                {tickets.length > 0 && `${tickets.length} ticket${tickets.length === 1 ? '' : 's'}`}
-              </span>
-              <button className="ticket-btn-primary" onClick={openNewForm}>+ New ticket</button>
-            </div>
+            {tickets.length > 0 && (
+              <div className="ticket-drawer-footer">
+                <span className="ticket-drawer-hint">
+                  {doneTickets.length > 0
+                    ? `${activeTickets.length} open · ${doneTickets.length} done`
+                    : `${tickets.length} ticket${tickets.length === 1 ? '' : 's'}`}
+                </span>
+              </div>
+            )}
           </>
         ) : (
           <>