@phenx-inc/ctlsurf 0.17.5 → 0.17.7

package/out/renderer/assets/{typescript-BmhhpI43.js → typescript-DiF0ejYV.js}

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

package/out/renderer/assets/{xml-CTMRAgAB.js → xml-BLsIDJrq.js}

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

package/out/renderer/assets/{yaml-DYNNafNI.js → yaml-BWqzZSkF.js}

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

package/out/renderer/index.html

@@ -106,8 +106,8 @@
     :root[data-theme='catppuccin-latte'] .boot-splash-title { color: #2f3145; }
     :root[data-theme='catppuccin-latte'] .boot-splash-label { color: #7c7f93; }
   </style>
-  <script type="module" crossorigin src="./assets/index-CbuISbRh.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CBWAeUYW.css">
+  <script type="module" crossorigin src="./assets/index-CHdMn4av.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-CmvYnexl.css">
 </head>
 <body>
   <div id="boot-splash">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.17.5",
+  "version": "0.17.7",
   "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/scripts/test-work-map-ui.cjs

@@ -55,12 +55,25 @@ async function main() {
     }
     win = new BrowserWindow({ show: false, width: 430, height: 860, webPreferences: { backgroundThrottling: false } })
     await win.loadFile(path.join(temp, 'index.html'))
+    win.webContents.debugger.attach('1.3')
+    await win.webContents.debugger.sendCommand('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-reduced-motion', value: 'no-preference' }] })
     const run = code => win.webContents.executeJavaScript(code)
+    const finishRolls = () => run(`Promise.all(document.querySelector('.work-map-forest').getAnimations({subtree:true}).map(a=>a.finished.catch(()=>{})))`)
+    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')
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    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)})`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    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('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')
@@ -89,10 +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`), 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.querySelectorAll('.work-map-step').length`), 0)
-    await run(`document.querySelector('.work-map-branch-heading').click()`)
+    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('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))`)
@@ -106,9 +126,65 @@ 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('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 })
     await fs.writeFile(screenshot, (await win.webContents.capturePage()).toPNG())
+    await run(`
+      window.beforeCountNodes=window.mapSnapshot().nodes;
+      window.withInvestigationCount=count=>window.emitMap({nodes:[
+        ...window.beforeCountNodes.filter(n=>n.kind!=='step'||n.activity!=='investigating'),
+        ...Array.from({length:count},(_,i)=>({...window.beforeCountNodes.find(n=>n.kind==='step'&&n.activity==='investigating'),id:'counter-step-'+i}))
+      ]});
+      window.withInvestigationCount(99);
+    `)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    await finishRolls()
+    assert.equal(await run(visibleInvestigationCount), '99')
+    await run(`window.withInvestigationCount(100)`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert(await run(`${investigationCount}.getAnimations({subtree:true}).length>0`), 'digit carry animates from 99 to 100')
+    await finishRolls()
+    assert.equal(await run(visibleInvestigationCount), '100')
+    for (const count of [101, 105]) {
+      await run(`window.withInvestigationCount(${count})`)
+      await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    }
+    await finishRolls()
+    assert.equal(await run(visibleInvestigationCount), '105', 'bursts settle on the latest count')
+    await run(`window.withInvestigationCount(9)`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert.equal(await run(visibleInvestigationCount), '9', 'trimming or reclassification can decrease a count')
+    await win.webContents.debugger.sendCommand('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-reduced-motion', value: 'reduce' }] })
+    await run(`window.withInvestigationCount(10)`)
+    await run(`new Promise(resolve=>setTimeout(resolve,30))`)
+    assert.equal(await run(visibleInvestigationCount), '10')
+    assert.equal(await run(`${investigationCount}.getAnimations({subtree:true}).length`), 0, 'reduced motion updates counts immediately')
+    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)
@@ -117,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')
@@ -128,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, unified chronological thread, salient excerpts and reasons, source receipts, action links, omitted-thinking notice, 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/RollingCount.tsx

@@ -0,0 +1,60 @@
+import { useLayoutEffect, useRef } from 'react'
+
+/** Each place rolls independently, including the carry from 9 to 10. */
+export function RollingCount({ value, label }: { value: number; label?: string }) {
+  const previous = useRef(value)
+  const increasing = value > previous.current
+  useLayoutEffect(() => { previous.current = value }, [value])
+
+  return <span className="work-map-count" role="img" aria-label={label || String(value)} data-value={value}>
+    <span className="work-map-counter" aria-hidden="true">
+      {String(value).split('').map((_, index, digits) => {
+        const place = digits.length - index - 1
+        const turns = Math.floor(value / 10 ** place)
+        return <RollingDigit key={place} turns={turns} initial={increasing ? 0 : turns} />
+      })}
+    </span>
+  </span>
+}
+
+function RollingDigit({ turns, initial }: { turns: number; initial: number }) {
+  const reel = useRef<HTMLSpanElement>(null)
+  const previous = useRef(initial)
+  const animation = useRef<Animation | null>(null)
+  const digit = turns % 10
+
+  useLayoutEffect(() => {
+    const el = reel.current!
+    const before = previous.current
+    previous.current = turns
+    let start = before % 10
+    // Continue from the visible position when another event arrives mid-roll.
+    if (animation.current) {
+      const style = getComputedStyle(el)
+      start = (-new DOMMatrixReadOnly(style.transform).m42 / parseFloat(style.fontSize)) % 10
+      animation.current.cancel()
+      animation.current = null
+    }
+    if (turns <= before || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    const distance = Math.min(turns - before, 10 + (turns - before) % 10)
+    let end = before % 10 + distance
+    while (end <= start) end += 10
+    const roll = el.animate([
+      { transform: `translateY(${-start}em)` },
+      { transform: `translateY(${-end}em)` },
+    ], { duration: 550, easing: 'cubic-bezier(.2, .65, .3, 1)' })
+    animation.current = roll
+    void roll.finished.then(() => {
+      if (animation.current === roll) animation.current = null
+    }, () => {})
+  }, [turns])
+
+  useLayoutEffect(() => () => { animation.current?.cancel() }, [])
+
+  return <span className="work-map-counter-digit">
+    <span className="work-map-counter-reel" ref={reel} style={{ transform: `translateY(${-digit}em)` }}>
+      {Array.from({ length: 30 }, (_, i) => <span key={i}>{i % 10}</span>)}
+    </span>
+  </span>
+}

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

@@ -1,8 +1,10 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import type { MapActivity, MapIntent, MapNode, MapSettings, MapSnapshot } from '../../shared/workMap'
 import { thinkingHighlights } from '../lib/workMapHighlights'
+import { RollingCount } from './RollingCount'
 
 const ICONS: Record<MapActivity, string> = { thinking: '✦', investigating: '⌕', editing: '✎', testing: '✓', planning: '◇', reporting: '≡' }
+const ACTIVITIES: Record<MapActivity, string> = { thinking: 'Thinking', investigating: 'Investigations', editing: 'Edits', testing: 'Tests', planning: 'Plans', reporting: 'Updates' }
 const STATUS = { running: 'Running', succeeded: 'Succeeded', failed: 'Failed', unknown: 'Recorded', interrupted: 'Stopped' }
 const INTENTS: Record<MapIntent, string> = { decision: 'Decision', hypothesis: 'Hypothesis', alternative: 'Alternative', next_step: 'Next step', context: 'Thinking' }
 
@@ -10,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)
@@ -63,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)
@@ -86,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
   }
@@ -196,23 +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-label">{run.label}</span><span className="work-map-count">{run.nodes.length}</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>}
@@ -221,13 +224,31 @@ 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>
   </section>
 }
 
+function ActivityCounts({ nodes }: { nodes: MapNode[] }) {
+  return <span className="work-map-activity-counts">
+    {(Object.keys(ACTIVITIES) as MapActivity[]).map(activity => {
+      const events = nodes.filter(node => node.activity === activity)
+      if (!events.length) return null
+      const failed = events.filter(node => node.status === 'failed').length
+      const running = events.filter(node => node.status === 'running').length
+      const label = `${ACTIVITIES[activity]}: ${events.length}${running ? `, ${running} running` : ''}${failed ? `, ${failed} failed` : ''}`
+      return <span key={activity} className={`work-map-activity-count ${activity}`} role="img" aria-label={label} title={label}>
+        <span className={`work-map-activity ${activity}`} aria-hidden="true">{ICONS[activity]}</span>
+        <RollingCount value={events.length} />
+        {running > 0 && <span className="work-map-activity-running" aria-hidden="true" />}
+        {failed > 0 && <span className="work-map-activity-alert" aria-hidden="true">!</span>}
+      </span>
+    })}
+  </span>
+}
+
 function highlightSource(text: string, focus?: MapNode['focus']): ReactNode {
   const ranges = thinkingHighlights(text, focus)
   if (!ranges.length) return text

package/src/renderer/styles.css

@@ -61,11 +61,23 @@
 .work-map-branch { position: relative; padding: 0 0 17px; }
 .work-map-branch:last-child { padding-bottom: 0; }
 .work-map-branch::before { content: ''; position: absolute; left: -18px; top: 12px; width: 15px; height: 1px; background: var(--border-dim); }
-.work-map-branch-heading { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 0; border: 0; background: transparent; text-align: left; color: var(--text-bright); }
-.work-map-branch-point { width: 6px; height: 6px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
+.work-map-branch-heading { display: flex; align-items: flex-start; gap: 7px; width: 100%; padding: 5px 0; border: 0; background: transparent; text-align: left; color: var(--text-bright); }
+.work-map-branch-point { width: 6px; height: 6px; margin-top: 5px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
 .work-map-branch-point.failed { background: var(--danger); }
+.work-map-branch-copy { flex: 1; min-width: 0; }
+.work-map-branch-title { display: flex; align-items: center; gap: 7px; line-height: 1.5; }
 .work-map-branch-label { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 600; }
-.work-map-count { padding: 1px 5px; border-radius: 4px; background: var(--bg-chip); color: var(--text-soft); font-size: 9px; }
+.work-map-count { display: inline-flex; flex-shrink: 0; padding: 2px 5px; border-radius: 4px; background: var(--bg-chip); color: var(--text-soft); font-size: 9px; }
+.work-map-counter { display: inline-flex; height: 1em; line-height: 1; font-variant-numeric: tabular-nums; }
+.work-map-counter-digit { display: inline-block; width: 1ch; height: 1em; overflow: hidden; }
+.work-map-counter-reel { display: flex; flex-direction: column; }
+.work-map-counter-reel > span { flex: 0 0 1em; height: 1em; text-align: center; }
+.work-map-activity-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
+.work-map-activity-count { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--bg-well); }
+.work-map-activity-count .work-map-activity { width: 14px; height: 14px; font-size: 13px; background: transparent; }
+.work-map-activity-count .work-map-count { padding: 0; background: transparent; font-size: 10px; }
+.work-map-activity-running { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
+.work-map-activity-alert { color: var(--danger); font-size: 10px; font-weight: 700; line-height: 1; }
 .work-map-steps { list-style: none; margin: 5px 0 0 2px; padding: 0 0 0 8px; border-left: 1px solid var(--border-subtle); }
 .work-map-step { margin: 5px 0; border: 1px solid var(--border-well); background: var(--bg-well); border-radius: 7px; overflow: hidden; }
 .work-map-step.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--border-well)); }