@phenx-inc/ctlsurf 0.9.0 → 0.11.0

package/src/main/orchestrator.ts

@@ -7,6 +7,7 @@ import { AgentConfig, isCodingAgent } from './agents'
 import { CtlsurfApi } from './ctlsurfApi'
 import { ConversationBridge } from './bridge'
 import { TranscriptTailer, supportsTranscriptLogging, readLatestAssistantReply } from './transcripts'
+import { AgentStateMonitor, type AgentState } from './agentState'
 import { WorkerWsClient, type WorkerWsStatus, type IncomingMessage } from './workerWs'
 import { TimeTracker } from './timeTracker'
 import { TicketStore, type TicketInput } from './ticketStore'
@@ -51,6 +52,10 @@ export interface OrchestratorEvents {
   // text-to-speech. Optional and wired only by the Electron entry — the
   // headless build leaves it unset, so replies are never spoken in a terminal.
   onAgentMessage?: (text: string) => void
+  // Real-time agent activity state (busy vs awaiting the user). `anyAwaiting`
+  // is true when any tab is waiting on the user, and drives the dock/taskbar
+  // attention indicator. Optional — only the Electron entry wires it.
+  onAgentStateChange?: (tabId: string, state: AgentState, anyAwaiting: boolean) => void
 }
 
 interface TabState {
@@ -102,11 +107,17 @@ export class Orchestrator {
   private noProjectPollCwd: string | null = null
   private currentProjectName: string | null = null
   private transcriptTailer: TranscriptTailer | null = null
+  private readonly stateMonitor: AgentStateMonitor
 
   constructor(settingsDir: string, events: OrchestratorEvents) {
     this.settingsDir = settingsDir
     this.events = events
 
+    this.stateMonitor = new AgentStateMonitor(({ tabId, state, anyAwaiting }) => {
+      this.events.onAgentStateChange?.(tabId, state, anyAwaiting)
+    })
+    this.stateMonitor.start()
+
     this.workerWs = new WorkerWsClient({
       onStatusChange: (status: WorkerWsStatus) => {
         log(`[worker-ws] Status: ${status}`)
@@ -119,9 +130,10 @@ export class Orchestrator {
 
         if (message.type === 'prompt' || message.type === 'task_dispatch') {
           const activeTab = this.activeTabId ? this.tabs.get(this.activeTabId) : null
-          if (activeTab) {
+          if (activeTab && this.activeTabId) {
             activeTab.ptyManager.write(message.content + '\r')
             this.bridge.feedInput(message.content + '\r')
+            this.stateMonitor.noteInput(this.activeTabId, message.content + '\r')
           }
         }
       },
@@ -463,10 +475,14 @@ export class Orchestrator {
     const ptyManager = new PtyManager(agent, cwd)
     const tab: TabState = { ptyManager, agent, cwd, termStreamBuffer: '', termStreamTimer: null }
     this.tabs.set(tabId, tab)
+    // Track all tabs (not just the active one): a background agent finishing is
+    // exactly when the dock indicator is most useful.
+    this.stateMonitor.trackTab(tabId, agent.id, cwd)
 
     ptyManager.onData((data: string) => {
       this.events.onPtyData(tabId, data)
       this.timeTracker.recordActivity(tabId)
+      this.stateMonitor.feed(tabId, data)
       if (tabId === this.activeTabId) {
         this.bridge.feedOutput(data)
         this.streamTerminalData(tabId, data)
@@ -485,6 +501,7 @@ export class Orchestrator {
       // Clean up tab state
       const t = this.tabs.get(tabId)
       if (t?.termStreamTimer) clearTimeout(t.termStreamTimer)
+      this.stateMonitor.removeTab(tabId)
     })
 
     this.startChatLogging(agent, cwd)
@@ -511,6 +528,7 @@ export class Orchestrator {
 
   writePty(tabId: string, data: string): void {
     this.tabs.get(tabId)?.ptyManager.write(data)
+    this.stateMonitor.noteInput(tabId, data)
     if (tabId === this.activeTabId) {
       this.bridge.feedInput(data)
     }
@@ -531,6 +549,7 @@ export class Orchestrator {
     await this.timeTracker.endSession(tabId)
     tab.ptyManager.kill()
     this.tabs.delete(tabId)
+    this.stateMonitor.removeTab(tabId)
     if (tabId === this.activeTabId) {
       this.stopChatLogging()
       if (isCodingAgent(tab.agent)) {
@@ -702,6 +721,7 @@ export class Orchestrator {
   async shutdown(): Promise<void> {
     this.stopNoProjectPolling()
     this.stopChatLogging()
+    this.stateMonitor.stop()
     await this.timeTracker.endAll()
     for (const [, tab] of this.tabs) {
       if (tab.termStreamTimer) clearTimeout(tab.termStreamTimer)

package/src/preload/index.ts

@@ -119,6 +119,14 @@ const api = {
     ipcRenderer.on('agent:message', listener)
     return () => ipcRenderer.removeListener('agent:message', listener)
   },
+  // Real-time agent activity state for an in-app indicator dot.
+  // state: 'idle' | 'busy' | 'awaiting_input' | 'awaiting_decision'
+  onAgentState: (callback: (tabId: string, state: string, anyAwaiting: boolean) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, tabId: string, state: string, anyAwaiting: boolean) =>
+      callback(tabId, state, anyAwaiting)
+    ipcRenderer.on('agent:state', listener)
+    return () => ipcRenderer.removeListener('agent:state', listener)
+  },
   // Latest assistant reply from the active tab's transcript (null if none).
   getLastReply: (): Promise<string | null> =>
     ipcRenderer.invoke('agent:getLastReply'),

package/src/renderer/App.tsx

@@ -14,7 +14,7 @@ import {
 } from './components/PaneLayout'
 import { StatusBar } from './components/StatusBar'
 import { SettingsDialog } from './components/SettingsDialog'
-import { TicketPanel } from './components/TicketPanel'
+import { TicketPane } from './components/TicketPanel'
 
 interface AgentConfig {
   id: string
@@ -60,6 +60,7 @@ declare global {
       getSpeakReplies: () => Promise<{ enabled: boolean }>
       setSpeakReplies: (enabled: boolean) => Promise<{ enabled: boolean }>
       onAgentMessage: (callback: (text: string) => void) => () => void
+      onAgentState: (callback: (tabId: string, state: string, anyAwaiting: boolean) => void) => () => void
       getLastReply: () => Promise<string | null>
       createProject: () => Promise<{ ok: boolean; folder_id?: string; error?: string }>
       getWebviewInfo: () => Promise<{
@@ -95,11 +96,13 @@ const DEFAULT_LAYOUT: LayoutNode = {
   direction: 'horizontal',
   children: [
     { type: 'leaf', paneId: 'terminal' },
-    { type: 'leaf', paneId: 'ctlsurf' },
+    { type: 'leaf', paneId: 'tickets' },
   ],
   sizes: [50, 50],
 }
 
+// Panes shown as plain toggle buttons in the titlebar. `tickets` has its own
+// dedicated icon button, so it's not listed here.
 const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
 
 interface TabInfo {
@@ -137,7 +140,9 @@ export default function App() {
   })
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id)
   const [trackingActive, setTrackingActive] = useState(false)
-  const [showTicketPanel, setShowTicketPanel] = useState(false)
+  // Per-tab agent activity ('busy' | 'awaiting_input' | 'awaiting_decision' | 'idle'),
+  // driven by the main process. Powers the awaiting-input dot on each tab.
+  const [agentStates, setAgentStates] = useState<Record<string, string>>({})
   // Draggable on-canvas push-to-talk mic; visibility persists across launches.
   const [showFloatingMic, setShowFloatingMic] = useState<boolean>(() => {
     try { return localStorage.getItem('ctlsurf.floatingMicVisible') !== 'false' } catch { return true }
@@ -202,6 +207,16 @@ export default function App() {
     return unsub
   }, [])
 
+  // Track each tab's agent activity for the awaiting-input dot. The aggregate-
+  // only signal arrives with an empty tabId, which we ignore here.
+  useEffect(() => {
+    const unsub = window.worker.onAgentState((tabId, state) => {
+      if (!tabId) return
+      setAgentStates(prev => (prev[tabId] === state ? prev : { ...prev, [tabId]: state }))
+    })
+    return unsub
+  }, [])
+
   // Reflect tracking state for the active tab; refresh on tab switch and poll
   // periodically so the UI catches changes (e.g. a session ending naturally).
   useEffect(() => {
@@ -385,6 +400,7 @@ export default function App() {
           case 'E': e.preventDefault(); togglePane('editor'); break
           case 'T': e.preventDefault(); togglePane('terminal'); break
           case 'P': e.preventDefault(); togglePane('ctlsurf'); break
+          case 'K': e.preventDefault(); togglePane('tickets'); break
         }
       }
     }
@@ -424,8 +440,15 @@ export default function App() {
               >
                 <span className="terminal-tab-label">
                   {tab.agent ? tab.agent.name : tab.label}
-                  {tab.agentStatus === 'active' && <span className="terminal-tab-dot active" />}
-                  {tab.agentStatus === 'exited' && <span className="terminal-tab-dot exited" />}
+                  {tab.agentStatus === 'exited' ? (
+                    <span className="terminal-tab-dot exited" />
+                  ) : agentStates[tab.id] === 'awaiting_decision' ? (
+                    <span className="terminal-tab-dot decision" title="Awaiting your approval" />
+                  ) : agentStates[tab.id] === 'awaiting_input' ? (
+                    <span className="terminal-tab-dot awaiting" title="Awaiting your input" />
+                  ) : tab.agentStatus === 'active' ? (
+                    <span className="terminal-tab-dot active" />
+                  ) : null}
                 </span>
                 {tabs.length > 1 && (
                   <button
@@ -467,6 +490,7 @@ export default function App() {
       ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
+    { id: 'tickets', label: 'Tickets', content: <TicketPane /> },
   ]
 
   return (
@@ -495,9 +519,9 @@ export default function App() {
             <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"
+            className={`titlebar-btn titlebar-icon-btn ${visiblePaneIds.includes('tickets') ? 'active' : ''}`}
+            onClick={() => togglePane('tickets')}
+            title="Toggle tickets pane for the active project"
             aria-label="Tickets"
           >
             <svg className="ticket-tag-icon" viewBox="0 0 24 24" width="13" height="13"
@@ -568,7 +592,6 @@ 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

package/src/renderer/components/TicketPanel.tsx

@@ -26,11 +26,6 @@ interface Ticket {
   created: string | null
 }
 
-interface TicketPanelProps {
-  open: boolean
-  onClose: () => void
-}
-
 type SaveState = { kind: 'idle' } | { kind: 'saving' } | { kind: 'error'; message: string }
 type View = 'list' | 'form'
 
@@ -79,7 +74,10 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
   )
 }
 
-export function TicketPanel({ open, onClose }: TicketPanelProps) {
+// 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() {
   const [project, setProject] = useState<string | null>(null)
   const [view, setView] = useState<View>('list')
 
@@ -111,17 +109,18 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
     }
   }, [])
 
-  // On open: reset to the list and (re)load project + tickets.
+  // Load project + tickets on mount, and refresh whenever the connected project
+  // (cwd) changes so the list always tracks the active project.
   useEffect(() => {
-    if (!open) return
-    setView('list')
     let cancelled = false
-    window.worker.getTicketProject()
+    const loadProject = () => window.worker.getTicketProject()
       .then(r => { if (!cancelled) setProject(r?.name ?? null) })
       .catch(() => { if (!cancelled) setProject(null) })
+    loadProject()
     void refreshList()
-    return () => { cancelled = true }
-  }, [open, refreshList])
+    const unsub = window.worker.onCwdChanged(() => { loadProject(); void refreshList() })
+    return () => { cancelled = true; unsub() }
+  }, [refreshList])
 
   const openNewForm = useCallback(() => {
     setEditingId(null)
@@ -162,28 +161,26 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
     }
   }, [title, description, status, priority, editingId, save.kind, refreshList])
 
-  // Esc: form → back to list, list → close. Cmd/Ctrl+Enter saves in the form.
+  // Only capture keys while editing a ticket, so list-view typing in the terminal
+  // isn't hijacked. Esc returns to the list; Cmd/Ctrl+Enter saves.
   useEffect(() => {
-    if (!open) return
+    if (view !== 'form') return
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
-        if (view === 'form') setView('list')
-        else onClose()
-      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && view === 'form') {
+        setView('list')
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
         void handleSave()
       }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [open, view, onClose, handleSave])
+  }, [view, handleSave])
 
   return (
-    <>
-      <div className={`ticket-scrim ${open ? 'open' : ''}`} onClick={onClose} />
-      <div className={`ticket-drawer ${open ? 'open' : ''}`} role="dialog" aria-label="Tickets">
-        <div className="ticket-drawer-header">
+    <div className="ticket-pane" role="region" aria-label="Tickets">
+      <div className="ticket-drawer-header">
           <div className="ticket-drawer-heading">
             {view === 'form' ? (
               <button className="ticket-drawer-back" onClick={() => setView('list')} title="Back (Esc)">‹</button>
@@ -201,7 +198,6 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
               </span>
             </div>
           </div>
-          <button className="ticket-drawer-close" onClick={onClose} title="Close">×</button>
         </div>
 
         {view === 'list' ? (
@@ -302,7 +298,6 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
             </div>
           </>
         )}
-      </div>
-    </>
+    </div>
   )
 }

package/src/renderer/styles.css

@@ -202,6 +202,24 @@ html, body, #root {
   background: #565f89;
 }
 
+/* Agent is waiting on the user — pulse to draw the eye across tabs. */
+.terminal-tab-dot.awaiting {
+  background: #e0af68; /* amber: waiting for next prompt */
+  color: #e0af68;      /* drives the box-shadow glow via currentColor */
+  animation: tab-dot-pulse 1.1s ease-in-out infinite;
+}
+
+.terminal-tab-dot.decision {
+  background: #f7768e; /* red: blocked on an approval/permission prompt */
+  color: #f7768e;
+  animation: tab-dot-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes tab-dot-pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+  50% { opacity: 0.35; box-shadow: 0 0 4px 1px currentColor; }
+}
+
 .terminal-tab-close {
   background: none;
   border: none;
@@ -1440,38 +1458,13 @@ html, body, #root {
 
 /* ─── Ticket drawer ──────────────────────────────── */
 
-.ticket-scrim {
-  position: fixed;
-  inset: 0;
-  background: rgba(13, 14, 22, 0.55);
-  backdrop-filter: blur(2px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: 90;
-}
-.ticket-scrim.open {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.ticket-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 380px;
-  background: linear-gradient(180deg, #20243a 0%, #1b1e2e 100%);
-  border-left: 1px solid #343860;
-  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
+/* Docked side-pane variant: fills its pane (header/body/footer flex column). */
+.ticket-pane {
   display: flex;
   flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
-  z-index: 100;
-}
-.ticket-drawer.open {
-  transform: translateX(0);
+  height: 100%;
+  min-height: 0;
+  background: linear-gradient(180deg, #20243a 0%, #1b1e2e 100%);
 }
 
 /* ── header ── */
@@ -1521,22 +1514,6 @@ html, body, #root {
 .ticket-drawer-warn {
   color: #e0af68;
 }
-.ticket-drawer-close {
-  background: none;
-  border: none;
-  color: #565f89;
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 6px;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.ticket-drawer-close:hover {
-  color: #d5dbf5;
-  background: rgba(255, 255, 255, 0.06);
-}
-
 /* ── body ── */
 .ticket-drawer-body {
   flex: 1;