@phenx-inc/ctlsurf 0.17.6 → 0.17.7

package/scripts/test-work-map-ui.cjs

@@ -62,9 +62,10 @@ async function main() {
     const investigationCount = `document.querySelector('.work-map-activity-count.investigating .work-map-count')`
     const visibleInvestigationCount = `Array.from(${investigationCount}.querySelectorAll('.work-map-counter-reel'),el=>String(Math.round(-new DOMMatrixReadOnly(getComputedStyle(el).transform).m42/parseFloat(getComputedStyle(el).fontSize))%10)).join('')`
     await run(`new Promise(resolve=>setTimeout(resolve,150))`)
-    assert.equal(await run(`document.querySelector('.work-map-goal-heading').getAttribute('aria-expanded')`), 'true')
-    assert.equal(await run(`document.querySelector('.work-map-branch-heading').getAttribute('aria-expanded')`), 'false')
-    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 0, 'event groups start collapsed')
+    assert.equal(await run(`document.querySelector('button.work-map-goal-heading')`), null, 'goals cannot hide reasoning and updates')
+    assert.equal(await run(`document.querySelector('button.work-map-branch-heading').getAttribute('aria-expanded')`), 'false')
+    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 1, 'thinking and decisions stay visible while technical activity starts collapsed')
+    assert.match(await run(`document.querySelector('.work-map-step').textContent`), /Preserve the reader/)
     assert.deepEqual(await run(`[...document.querySelectorAll('.work-map-activity-count')].map(el=>el.getAttribute('aria-label'))`), ['Thinking: 1', 'Investigations: 10, 1 running', 'Edits: 9', 'Tests: 9, 1 failed'])
     assert.equal(await run(`${visibleInvestigationCount}`), '10', 'initial counts are settled immediately')
     await run(`window.emitMap({nodes:window.mapSnapshot().nodes.map(n=>n.id==='step-27'?{...n,status:'succeeded'}:n)})`)
@@ -72,7 +73,7 @@ async function main() {
     assert.equal(await run(`${investigationCount}.dataset.value`), '10', 'a tool result does not add another event')
     assert.equal(await run(`document.querySelector('.work-map-activity-count.investigating').getAttribute('aria-label')`), 'Investigations: 10')
     assert.equal(await run(`${investigationCount}.getAnimations({subtree:true}).length`), 0, 'status changes do not roll unchanged counts')
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 29, 'choices and actions must share one thread')
     assert.equal(await run(`document.querySelector('.work-map-view')`), null, 'there are no separate decision/activity tabs')
@@ -101,17 +102,17 @@ async function main() {
     await run(`new Promise(resolve=>setTimeout(resolve,80))`)
     assert.equal(await run(`document.querySelector('.work-map-scroll').scrollTop`), 0, 'updates preserve scroll position while reading history')
     assert(await run(`!!document.querySelector('.work-map-jump')`))
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
-    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 0)
+    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 1, 'collapsing technical activity keeps its preceding choice visible')
     await run(`window.emitMap({nodes:[...window.mapSnapshot().nodes,{...window.mapSnapshot().nodes.at(-1),id:'collapsed-step',status:'running'}]})`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
-    assert.equal(await run(`document.querySelector('.work-map-branch-heading').getAttribute('aria-expanded')`), 'false', 'new activity never reopens a collapsed investigation')
-    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 0)
+    assert.equal(await run(`document.querySelector('button.work-map-branch-heading').getAttribute('aria-expanded')`), 'false', 'new activity never reopens a collapsed investigation')
+    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 1)
     assert.equal(await run(`${investigationCount}.dataset.value`), '12', 'collapsed summaries still receive live events')
     assert(await run(`${investigationCount}.getAnimations({subtree:true}).length>0`), 'live counts roll upward')
     await finishRolls()
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     await run(`document.querySelector('.work-map-step-button').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
@@ -125,7 +126,8 @@ async function main() {
     await run(`document.querySelector('.work-map-scroll').scrollTop=0`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert(await run(`document.documentElement.scrollWidth<=window.innerWidth`), 'no horizontal overflow at panel width')
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
+    await run(`document.querySelector('.work-map-step-button[aria-expanded="true"]')?.click(); document.querySelector('.work-map-scroll').scrollTop=0`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     const screenshot = process.env.WORK_MAP_SCREENSHOT || path.join(repo, 'experiments/live-map/.cache/work-map-panel.png')
     await fs.mkdir(path.dirname(screenshot), { recursive: true })
@@ -163,6 +165,26 @@ async function main() {
     win.setSize(320, 860)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert(await run(`document.documentElement.scrollWidth<=window.innerWidth`), 'activity icons wrap at narrow panel widths')
+    await run(`window.emitMap({nodes:[...window.exampleNodes,
+      ...['planning','reporting','thinking','investigating','editing','testing'].map((activity,i)=>({
+        ...window.exampleNodes[2],id:'update-'+i,activity,intent:i===0?'next_step':i===1?'context':undefined,
+        title:'Visible agent update '+i,focus:undefined,
+        evidence:[{...window.exampleNodes[2].evidence[0],id:'update-event-'+i,kind:i===2?'thinking':'message'}]
+      }))
+    ]})`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 7, 'plans, reporting and readable text stay visible regardless of model activity labels')
+    assert.equal(await run(`document.querySelectorAll('button.work-map-branch-heading').length`), 1, 'narrative-only groups have no collapse control')
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert.deepEqual(await run(`[...document.querySelectorAll('.work-map-step-title')].map(e=>e.textContent)`), [
+      'Preserve the reader’s position instead of forcing the viewport down',
+      ...Array.from({length:28},(_,i)=>['Inspect the viewport and scroll listeners','Preserve the reader’s position during new output','Check terminal scroll regression'][i%3]),
+      ...Array.from({length:6},(_,i)=>'Visible agent update '+i)
+    ], 'expanding technical details preserves the chronology of surrounding updates')
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 7, 'collapsing technical activity cannot hide later reporting')
     await run(`document.querySelector('.work-map-footer button').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert.equal(await run(`document.querySelectorAll('.work-map-goal').length`), 0)
@@ -171,7 +193,7 @@ async function main() {
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert.match(await run(`document.querySelector('.work-map-thinking-status').textContent`), /omits readable thinking/)
     assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 0, 'events collected after clearing also start collapsed')
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    await run(`document.querySelector('button.work-map-branch-heading').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 28, 'activity remains visible when thinking is omitted')
     assert.equal(await run(`document.querySelectorAll('.work-map-intent').length`), 0, 'tool activity must not become invented decisions when thinking is omitted')
@@ -182,7 +204,7 @@ async function main() {
       assert(await run(`document.querySelector('[role=switch]').disabled`))
       assert(await run(`document.querySelector('select').disabled`))
     }
-    console.log('PASS collapsed event groups, live activity summaries, rolling counts and carry, interrupted rolls, reduced motion, unified chronological thread, source receipts, controls and scroll')
+    console.log('PASS visible thinking, decisions, plans and reporting, collapsed technical activity, live summaries, rolling counts, chronology, source receipts, controls and scroll')
     console.log('Screenshot:', screenshot)
   } finally {
     win?.destroy()

package/src/renderer/App.tsx

@@ -201,6 +201,14 @@ export default function App() {
   const [sessionStart, setSessionStart] = useState<Date | null>(null)
   const [layout, setLayout] = useState<LayoutNode>(DEFAULT_LAYOUT)
   const [hiddenPanes, setHiddenPanes] = useState<Set<string>>(new Set())
+  const ticketStartupPending = useRef(true)
+  const handleInitialTicketsLoaded = useCallback((empty: boolean) => {
+    if (!ticketStartupPending.current) return
+    ticketStartupPending.current = false
+    if (!empty) return
+    setLayout(previous => removePane(previous, 'tickets') || previous)
+    setHiddenPanes(previous => new Set([...previous, 'tickets']))
+  }, [])
   const [showSettings, setShowSettings] = useState(false)
   const [wsStatus, setWsStatus] = useState('disconnected')
   const [cwd, setCwd] = useState<string | null>(null)
@@ -529,6 +537,7 @@ export default function App() {
 
   // Toggle pane: hide removes from layout tree, show re-inserts
   const togglePane = useCallback((id: string) => {
+    if (id === 'tickets') ticketStartupPending.current = false
     if (id === 'workmap' && !visiblePaneIds.includes(id) && !canOpenWorkMap()) return
     if (visiblePaneIds.includes(id)) {
       // Hide: remove from tree
@@ -680,7 +689,7 @@ export default function App() {
       ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
-    { id: 'tickets', label: 'Tickets', content: <TicketPane onSendToTerminal={handleSendToTerminal} /> },
+    { id: 'tickets', label: 'Tickets', content: <TicketPane onSendToTerminal={handleSendToTerminal} onInitialLoad={handleInitialTicketsLoaded} /> },
     { id: 'workmap', label: 'Work map', content: <WorkMapPanel key={activeTabId} tabId={activeTabId} /> },
   ]
 

package/src/renderer/components/TicketPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 
 interface Option { value: string; color: string }
 
@@ -167,7 +167,9 @@ function TicketCard({ ticket, onClick, onSend }: { ticket: Ticket; onClick: () =
 // 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({ onSendToTerminal }: { onSendToTerminal: (text: string) => void }) {
+export function TicketPane({ onSendToTerminal, onInitialLoad }: { onSendToTerminal: (text: string) => void; onInitialLoad?: (empty: boolean) => void }) {
+  const initialLoadHandled = useRef(false)
+  const listRevision = useRef(0)
   const [project, setProject] = useState<string | null>(null)
   const [view, setView] = useState<View>('list')
 
@@ -193,20 +195,25 @@ export function TicketPane({ onSendToTerminal }: { onSendToTerminal: (text: stri
   const [save, setSave] = useState<SaveState>({ kind: 'idle' })
 
   const refreshList = useCallback(async () => {
+    const revision = ++listRevision.current
     setListLoading(true)
     setListError(null)
     try {
       const r = await window.worker.listTickets()
+      if (revision !== listRevision.current) return null
       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') }
+      return r?.ok ? (r.tickets || []).length === 0 : null
     } catch (err: any) {
+      if (revision !== listRevision.current) return null
       setTickets([])
       setRefs(null)
       setListError(err?.message || 'Failed to load tickets')
+      return null
     } finally {
-      setListLoading(false)
+      if (revision === listRevision.current) setListLoading(false)
     }
   }, [])
 
@@ -218,12 +225,22 @@ export function TicketPane({ onSendToTerminal }: { onSendToTerminal: (text: stri
       .then(r => { if (!cancelled) setProject(r?.name ?? null) })
       .catch(() => { if (!cancelled) setProject(null) })
     loadProject()
-    void refreshList()
-    const unsub = window.worker.onCwdChanged(() => { loadProject(); void refreshList() })
-    return () => { cancelled = true; unsub() }
-  }, [refreshList])
+    // The first successful load may follow choosing the startup session.
+    const loadTickets = () => void refreshList().then(empty => {
+      if (cancelled || empty === null || initialLoadHandled.current) return
+      initialLoadHandled.current = true
+      onInitialLoad?.(empty)
+    })
+    loadTickets()
+    const unsub = window.worker.onCwdChanged(() => {
+      loadProject()
+      loadTickets()
+    })
+    return () => { cancelled = true; listRevision.current++; unsub() }
+  }, [refreshList, onInitialLoad])
 
   const openNewForm = useCallback(() => {
+    initialLoadHandled.current = true
     setEditingId(null)
     setEditingBlockId(null)
     setTitle('')

package/src/renderer/components/WorkMapPanel.tsx

@@ -12,7 +12,6 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
   const [snapshot, setSnapshot] = useState<MapSnapshot | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
-  const [collapsedGoals, setCollapsedGoals] = useState<Set<string>>(new Set())
   const [expandedThreads, setExpandedThreads] = useState<Set<string>>(new Set())
   const [selected, setSelected] = useState<string | null>(null)
   const [following, setFollowing] = useState(true)
@@ -65,13 +64,6 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
     finally { if (alive.current) setSaving(false) }
   }
 
-  const toggleGoal = (id: string) => setCollapsedGoals(prev => {
-    const next = new Set(prev)
-    if (next.has(id)) next.delete(id)
-    else next.add(id)
-    return next
-  })
-
   const toggleThread = (id: string) => setExpandedThreads(prev => {
     const next = new Set(prev)
     if (next.has(id)) next.delete(id)
@@ -88,15 +80,19 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
   // Render consecutive runs in event order. Reusing a topic must not move new
   // actions back up the page or separate them from the preceding decision.
   function threadRuns(goalId: string) {
-    const runs: Array<{ id: string; key: string | null; label: string; nodes: MapNode[] }> = []
+    const runs: Array<{ id: string; key: string | null; label: string; technical: boolean; nodes: MapNode[] }> = []
     for (const node of steps) {
       if (nodeById.get(node.parentId || '')?.parentId !== goalId) continue
       const textSource = node.evidence[0]?.kind === 'thinking' || node.evidence[0]?.kind === 'message'
       const anchor = textSource ? node : nodeById.get(node.contextId || '')
       const key = anchor?.id || node.parentId
+      // Only tool activity can be tucked away. Keep stated reasoning and
+      // updates visible even when their topic or activity is reclassified.
+      const technical = !node.intent && ['investigating', 'editing', 'testing'].includes(node.activity)
+        && node.evidence.length > 0 && node.evidence.every(e => e.kind === 'tool' || e.kind === 'result')
       const previous = runs.at(-1)
-      if (previous?.key === key) previous.nodes.push(node)
-      else runs.push({ id: `thread-${node.id}`, key, label: nodeById.get(anchor?.parentId || node.parentId || '')?.title || 'Activity', nodes: [node] })
+      if (previous?.key === key && previous.technical === technical) previous.nodes.push(node)
+      else runs.push({ id: `thread-${node.id}`, key, technical, label: nodeById.get(anchor?.parentId || node.parentId || '')?.title || 'Activity', nodes: [node] })
     }
     return runs
   }
@@ -198,26 +194,28 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
           : 'Stated decisions, readable thinking, actions, and results appear in one continuous thread. Open any card to inspect its source.'}</p>
       </div> : <div className="work-map-forest">
         {goals.map((goal, i) => <article className="work-map-goal" key={goal.id}>
-          <button className="work-map-goal-heading" onClick={() => toggleGoal(goal.id)} aria-expanded={!collapsedGoals.has(goal.id)} title={goal.evidence[0]?.text}>
+          <div className="work-map-goal-heading" title={goal.evidence[0]?.text}>
             <span className="work-map-goal-icon" aria-hidden="true">◎</span><span><span className="work-map-kicker">GOAL {String(i + 1).padStart(2, '0')}</span><strong>{goal.title}</strong></span>
-            <span className="work-map-caret">{collapsedGoals.has(goal.id) ? '▸' : '▾'}</span>
-          </button>
-          {!collapsedGoals.has(goal.id) && <div className="work-map-branches">
+          </div>
+          <div className="work-map-branches">
             {threadRuns(goal.id).map(run => {
               const failed = run.nodes.some(n => n.status === 'failed')
+              const heading = <>
+                <span className={`work-map-branch-point ${failed ? 'failed' : ''}`} />
+                <span className="work-map-branch-copy">
+                  <span className="work-map-branch-title"><span className="work-map-branch-label">{run.technical ? `Technical activity · ${run.label}` : run.label}</span><RollingCount value={run.nodes.length} label={`${run.nodes.length} events`} /></span>
+                  <ActivityCounts nodes={run.nodes} />
+                </span>
+              </>
               return <div className="work-map-branch" key={run.id}>
-                <button className="work-map-branch-heading" onClick={() => toggleThread(run.id)} aria-expanded={expandedThreads.has(run.id)}>
-                  <span className={`work-map-branch-point ${failed ? 'failed' : ''}`} />
-                  <span className="work-map-branch-copy">
-                    <span className="work-map-branch-title"><span className="work-map-branch-label">{run.label}</span><RollingCount value={run.nodes.length} label={`${run.nodes.length} events`} /></span>
-                    <ActivityCounts nodes={run.nodes} />
-                  </span>
+                {run.technical ? <button className="work-map-branch-heading" onClick={() => toggleThread(run.id)} aria-expanded={expandedThreads.has(run.id)}>
+                  {heading}
                   <span className="work-map-caret">{expandedThreads.has(run.id) ? '▾' : '▸'}</span>
-                </button>
-                {expandedThreads.has(run.id) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
+                </button> : <div className="work-map-branch-heading">{heading}</div>}
+                {(!run.technical || expandedThreads.has(run.id)) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
               </div>
             })}
-          </div>}
+          </div>
         </article>)}
         {snapshot?.dropped ? <p className="work-map-retained">Earlier activity trimmed · keeping the latest 240 nodes</p> : null}
       </div>}
@@ -226,7 +224,7 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
     <footer className="work-map-footer"><span>{decisions.length} {decisions.length === 1 ? 'choice' : 'choices'} · {steps.length} events · local</span>
       <button disabled={!steps.length || saving} onClick={async () => {
         setError(null)
-        try { accept(await window.worker.clearWorkMap(tabId)); setCollapsedGoals(new Set()); setExpandedThreads(new Set()); setSelected(null); setFollowing(true) }
+        try { accept(await window.worker.clearWorkMap(tabId)); setExpandedThreads(new Set()); setSelected(null); setFollowing(true) }
         catch (err) { if (alive.current) setError(String(err)) }
       }}>Clear map</button>
     </footer>