@phenx-inc/ctlsurf 0.17.5 → 0.17.6

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' }
 
@@ -206,7 +208,10 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
               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>
+                  <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>
                 {expandedThreads.has(run.id) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
@@ -228,6 +233,24 @@ export function WorkMapPanel({ tabId }: { tabId: string }) {
   </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)); }