@phenx-inc/ctlsurf 0.17.4 → 0.17.6

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

@@ -55,8 +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')
+    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('.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')
     assert.match(await run(`document.querySelector('.work-map-reason').textContent`), /Why.*does not interrupt/)
@@ -87,6 +104,13 @@ async function main() {
     await run(`document.querySelector('.work-map-branch-heading').click()`)
     await run(`new Promise(resolve=>setTimeout(resolve,30))`)
     assert.equal(await run(`document.querySelectorAll('.work-map-step').length`), 0)
+    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(`${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(`new Promise(resolve=>setTimeout(resolve,30))`)
     await run(`document.querySelector('.work-map-step-button').click()`)
@@ -101,9 +125,44 @@ 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(`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(`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)
@@ -111,6 +170,9 @@ async function main() {
     await run(`window.emitMap({thinkingStatus:'unavailable',nodes:window.exampleNodes.filter(n=>n.id!=='thought')})`)
     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(`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')
     for (const state of ['checking', 'unavailable']) {
@@ -120,7 +182,7 @@ async function main() {
       assert(await run(`document.querySelector('[role=switch]').disabled`))
       assert(await run(`document.querySelector('select').disabled`))
     }
-    console.log('PASS unified chronological thread, salient excerpts and reasons, source receipts, action links, omitted-thinking notice, controls and scroll')
+    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('Screenshot:', screenshot)
   } finally {
     win?.destroy()

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/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,8 @@ 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 [collapsed, setCollapsed] = useState<Set<string>>(new Set())
+  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)
   const [paths, setPaths] = useState({ pythonPath: '', modelPath: '' })
@@ -62,7 +65,14 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
     finally { if (alive.current) setSaving(false) }
   }
 
-  const toggleBranch = (id: string) => setCollapsed(prev => {
+  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)
     else next.add(id)
@@ -188,20 +198,23 @@ 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={() => toggleBranch(goal.id)} aria-expanded={!collapsed.has(goal.id)} title={goal.evidence[0]?.text}>
+          <button className="work-map-goal-heading" onClick={() => toggleGoal(goal.id)} aria-expanded={!collapsedGoals.has(goal.id)} 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">{collapsed.has(goal.id) ? '▸' : '▾'}</span>
+            <span className="work-map-caret">{collapsedGoals.has(goal.id) ? '▸' : '▾'}</span>
           </button>
-          {!collapsed.has(goal.id) && <div className="work-map-branches">
+          {!collapsedGoals.has(goal.id) && <div className="work-map-branches">
             {threadRuns(goal.id).map(run => {
               const failed = run.nodes.some(n => n.status === 'failed')
               return <div className="work-map-branch" key={run.id}>
-                <button className="work-map-branch-heading" onClick={() => toggleBranch(run.id)} aria-expanded={!collapsed.has(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>
-                  <span className="work-map-caret">{collapsed.has(run.id) ? '▸' : '▾'}</span>
+                  <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>
+                  <span className="work-map-caret">{expandedThreads.has(run.id) ? '▾' : '▸'}</span>
                 </button>
-                {!collapsed.has(run.id) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
+                {expandedThreads.has(run.id) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
               </div>
             })}
           </div>}
@@ -213,13 +226,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)); setCollapsed(new Set()); setSelected(null); setFollowing(true) }
+        try { accept(await window.worker.clearWorkMap(tabId)); setCollapsedGoals(new Set()); 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)); }