@phenx-inc/ctlsurf 0.10.0 → 0.11.0

package/out/renderer/assets/{python-BExaDVxv.js → python-DYHeg5b2.js}

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

package/out/renderer/assets/{razor-HL8ANmQ4.js → razor-Cqcks14K.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-Dg1vMspf.js";
+import { l as languages } from "./index-BDlCPzCG.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-Dqd8vdLE.js → tsMode-YTLgCayh.js}

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-Dg1vMspf.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-BDlCPzCG.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-Dysz1PTX.js → typescript-oxBn_Vcw.js}

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

package/out/renderer/assets/{xml-BHp5Z9nc.js → xml-BEqGMCTc.js}

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

package/out/renderer/assets/{yaml-CPDHxVup.js → yaml-BGSrk5HC.js}

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

package/out/renderer/index.html

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

package/package.json

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

@@ -51,12 +51,12 @@ function getProjectAbbrev(cwdPath: string): string {
   return word.slice(0, 2).toUpperCase()
 }
 
-// Draw a 32x32 filled circle overlay. `red` switches between the project-badge
-// blue and the "awaiting input" red dot.
-function createDotOverlay(red: boolean): Electron.NativeImage {
+// Draw a 32x32 filled circle overlay (Windows taskbar). `ready` switches between
+// the project-badge blue and the green "ready for you" dot.
+function createDotOverlay(ready: boolean): Electron.NativeImage {
   const size = 32
   const canvas = Buffer.alloc(size * size * 4, 0) // RGBA
-  const [r, g, b] = red ? [235, 64, 52] : [122, 162, 247]
+  const [r, g, b] = ready ? [52, 199, 89] : [122, 162, 247]
   for (let y = 0; y < size; y++) {
     for (let x = 0; x < size; x++) {
       const cx = x - size / 2
@@ -73,6 +73,43 @@ function createDotOverlay(red: boolean): Electron.NativeImage {
   return nativeImage.createFromBuffer(canvas, { width: size, height: size })
 }
 
+// The plain dock icon (macOS), loaded once at startup. Reused to composite the
+// green "ready" dot on top, and to restore the clean icon when it clears.
+let baseDockIcon: Electron.NativeImage | null = null
+
+// Composite a green "ready for you" dot (with a soft dark ring for contrast) into
+// the lower-right of the dock icon. Reads/writes the bitmap as a matched
+// toBitmap()/createFromBitmap() pair, which share the same (BGRA) byte order.
+function dockIconWithReadyDot(base: Electron.NativeImage): Electron.NativeImage {
+  const { width, height } = base.getSize()
+  if (!width || !height) return base
+  const bmp = base.toBitmap()
+  const r = Math.round(Math.min(width, height) * 0.17)   // dot radius
+  const ring = Math.max(2, Math.round(r * 0.22))         // ring thickness
+  const cx = width - r - Math.round(width * 0.05)
+  const cy = height - r - Math.round(height * 0.05)
+  const put = (x: number, y: number, b: number, g: number, rr: number) => {
+    const idx = (y * width + x) * 4
+    bmp[idx] = b; bmp[idx + 1] = g; bmp[idx + 2] = rr; bmp[idx + 3] = 255
+  }
+  for (let y = cy - r - ring; y <= cy + r + ring; y++) {
+    if (y < 0 || y >= height) continue
+    for (let x = cx - r - ring; x <= cx + r + ring; x++) {
+      if (x < 0 || x >= width) continue
+      const d = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2)
+      if (d <= r) put(x, y, 89, 199, 52)        // green #34c759 (BGRA)
+      else if (d <= r + ring) put(x, y, 24, 26, 31) // dark ring #1f1a18
+    }
+  }
+  return nativeImage.createFromBitmap(bmp, { width, height })
+}
+
+// Show/clear the green "ready" dot on the macOS dock icon.
+function setDockReadyDot(on: boolean): void {
+  if (process.platform !== 'darwin' || !app.dock || !baseDockIcon) return
+  app.dock.setIcon(on ? dockIconWithReadyDot(baseDockIcon) : baseDockIcon)
+}
+
 // Last project abbreviation, so the steady badge can be restored after the
 // "awaiting input" indicator clears.
 let projectAbbrev = ''
@@ -90,8 +127,9 @@ function updateProjectBadge(cwdPath: string | null): void {
   if (!cwdPath) return
   projectAbbrev = getProjectAbbrev(cwdPath)
 
-  // Don't stomp the awaiting-input blink; it restores the steady badge itself.
-  if (!blinkTimer) applySteadyBadge()
+  // The project badge and the "ready" dot are now independent surfaces (badge
+  // vs dock icon), so the badge can always update.
+  applySteadyBadge()
 
   // All platforms: update window title
   if (mainWindow) {
@@ -100,18 +138,17 @@ function updateProjectBadge(cwdPath: string | null): void {
   }
 }
 
-// ─── "Awaiting input" attention indicator (cross-platform) ──────────
+// ─── "Ready for you" attention indicator (cross-platform) ──────────
 //
 // The detection is OS-independent; only the visual differs:
-//   macOS   — blink a red dot in the dock badge + one bounce
-//   Windows — red overlay icon on the taskbar button + flash the button
+//   macOS   — steady green dot composited on the dock icon + one bounce
+//   Windows — green overlay icon on the taskbar button + flash the button
 //   Linux   — badge count where supported + flash (window urgency hint)
 // While the window is focused the dock/taskbar nag is suppressed (the in-app
 // dot is enough); the renderer always gets `agent:state` regardless of OS.
 
 const attention = new AttentionController()
-let blinkTimer: ReturnType<typeof setInterval> | null = null
-let blinkOn = false
+let attentionActive = false
 let bounceId = -1
 
 function setAwaitingIndicator(on: boolean): void {
@@ -124,40 +161,31 @@ function applyAttention(active: boolean): void {
 }
 
 function startAttention(): void {
-  if (blinkTimer) return
-  log('[agent-state] attention START (blink + bounce)')
+  if (attentionActive) return
+  attentionActive = true
+  log('[agent-state] attention START (green ready dot + bounce)')
 
   if (process.platform === 'darwin' && app.dock) {
+    setDockReadyDot(true)
     bounceId = app.dock.bounce('informational')
   }
   if (process.platform === 'win32' && mainWindow) {
-    mainWindow.setOverlayIcon(createDotOverlay(true), 'Awaiting input')
+    mainWindow.setOverlayIcon(createDotOverlay(true), 'Ready for you')
     mainWindow.flashFrame(true)
   }
   if (process.platform === 'linux') {
     if (typeof app.badgeCount === 'number') app.badgeCount = 1
     mainWindow?.flashFrame(true)
   }
-
-  // Blink the macOS dock badge — the whole red pill (project initials and all)
-  // toggles on/off, so the project letters are preserved on the "on" frames
-  // rather than being replaced by a dot.
-  blinkOn = true
-  blinkTimer = setInterval(() => {
-    blinkOn = !blinkOn
-    if (process.platform === 'darwin' && app.dock) {
-      app.dock.setBadge(blinkOn ? (projectAbbrev || '●') : '')
-    }
-  }, 600)
 }
 
 function stopAttention(): void {
-  if (blinkTimer) {
-    clearInterval(blinkTimer)
-    blinkTimer = null
-    log('[agent-state] attention STOP')
-  }
+  if (!attentionActive) return
+  attentionActive = false
+  log('[agent-state] attention STOP')
+
   if (process.platform === 'darwin' && app.dock) {
+    setDockReadyDot(false)
     if (bounceId >= 0) { app.dock.cancelBounce(bounceId); bounceId = -1 }
   }
   if (process.platform === 'win32' && mainWindow) {
@@ -582,7 +610,8 @@ app.whenReady().then(() => {
   if (process.platform === 'darwin' && app.dock) {
     const iconPath = path.join(__dirname, '../../resources/icon.png')
     try {
-      app.dock.setIcon(nativeImage.createFromPath(iconPath))
+      baseDockIcon = nativeImage.createFromPath(iconPath)
+      app.dock.setIcon(baseDockIcon)
     } catch { /* ignore */ }
   }
 

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
@@ -96,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 {
@@ -141,7 +143,6 @@ export default function App() {
   // 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>>({})
-  const [showTicketPanel, setShowTicketPanel] = useState(false)
   // 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 }
@@ -399,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
         }
       }
     }
@@ -488,6 +490,7 @@ export default function App() {
       ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
+    { id: 'tickets', label: 'Tickets', content: <TicketPane /> },
   ]
 
   return (
@@ -516,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"
@@ -589,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

@@ -1458,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 ── */
@@ -1539,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;