@phenx-inc/ctlsurf 0.17.2 → 0.17.4

package/src/renderer/components/SettingsDialog.tsx

@@ -69,60 +69,21 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const [saved, setSaved] = useState(false)
   const [version, setVersion] = useState('')
 
-  // Observer (global) — the key is write-only over IPC; we only learn
-  // whether one is configured (hasApiKey) and from where (keySource).
-  const [obsEnabled, setObsEnabled] = useState(false)
-  const [obsApiKey, setObsApiKey] = useState('')
-  const [obsHasKey, setObsHasKey] = useState(false)
-  const [obsKeySource, setObsKeySource] = useState<'settings' | 'env' | null>(null)
-  const [obsCapUsd, setObsCapUsd] = useState(1)
-  const [obsSaved, setObsSaved] = useState(false)
-
   const loadProfiles = async () => {
     const data = await window.worker.listProfiles() as ProfileListResponse
     setProfileList(data)
     setActiveProfileId(data.activeProfile)
   }
 
-  const loadObserver = async () => {
-    try {
-      const o = await window.worker.getObserverSettings()
-      setObsEnabled(o.enabled)
-      setObsHasKey(o.hasApiKey)
-      setObsKeySource(o.keySource)
-      setObsCapUsd(o.dailyCapUsd)
-      setObsApiKey('')
-    } catch { /* older main process without observer IPC */ }
-  }
-
   useEffect(() => {
     if (open) {
       loadProfiles()
-      loadObserver()
       setEditingId(null)
       setSaved(false)
-      setObsSaved(false)
       window.worker.getVersion().then(setVersion).catch(() => { /* ignore */ })
     }
   }, [open])
 
-  const handleObserverSave = async () => {
-    const data: { enabled: boolean; anthropicApiKey?: string; dailyCapUsd?: number } = {
-      enabled: obsEnabled,
-      dailyCapUsd: Math.max(0.05, obsCapUsd) || 1,
-    }
-    // Only send the key if the user typed a new one (blank = keep stored).
-    if (obsApiKey.trim()) {
-      data.anthropicApiKey = obsApiKey.trim()
-    }
-    const o = await window.worker.setObserverSettings(data)
-    setObsHasKey(o.hasApiKey)
-    setObsKeySource(o.keySource)
-    setObsApiKey('')
-    setObsSaved(true)
-    setTimeout(() => setObsSaved(false), 900)
-  }
-
   const startEditing = (profile: ProfileSummary) => {
     setEditingId(profile.id)
     setName(profile.name)
@@ -359,71 +320,6 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
           </div>
         )}
 
-        {!editingId && (
-          // ─── Observer (global) ─────────────────
-          <div className="settings-section">
-            <h4>Observer</h4>
-            <p className="settings-hint">
-              Reviews agent sessions for assumptions, unverified claims, and
-              dependency/license risk, tracks time per work item, and posts a
-              session digest to the project's Agent Datastore page.
-            </p>
-
-            <label className="settings-checkbox">
-              <input
-                type="checkbox"
-                checked={obsEnabled}
-                onChange={e => setObsEnabled(e.target.checked)}
-              />
-              <span>Enable Observer</span>
-              <span className="settings-hint">
-                Applies to newly started agent tabs. Advisory only — never
-                blocks or slows the agent.
-              </span>
-            </label>
-
-            <label>
-              Anthropic API Key
-              <input
-                type="password"
-                value={obsApiKey}
-                onChange={e => setObsApiKey(e.target.value)}
-                placeholder={
-                  obsKeySource === 'settings' ? '***configured*** (leave blank to keep)'
-                  : obsKeySource === 'env' ? 'using ANTHROPIC_API_KEY from environment'
-                  : 'sk-ant-…'
-                }
-              />
-              <span className="settings-hint">
-                Your own Anthropic key — separate from the ctlsurf profile key.
-                Without one, the Observer still records the session ledger,
-                Tier-0 tags, and spans, but skips model review and digests.
-              </span>
-            </label>
-
-            <label>
-              Daily budget cap (USD)
-              <input
-                type="number"
-                min={0.05}
-                step={0.25}
-                value={obsCapUsd}
-                onChange={e => setObsCapUsd(parseFloat(e.target.value) || 1)}
-              />
-              <span className="settings-hint">
-                Model review pauses for the day once spend reaches the cap;
-                Tier-0 tagging and spans continue.
-              </span>
-            </label>
-
-            <div className="settings-actions">
-              <button className="btn-primary" onClick={handleObserverSave}>
-                {obsSaved ? 'Saved!' : 'Save Observer Settings'}
-              </button>
-            </div>
-          </div>
-        )}
-
         <div className="settings-section settings-about">
           <h4>About</h4>
           <div className="about-name">ctlsurf{version ? ` · v${version}` : ''}</div>

package/src/renderer/components/WorkMapPanel.tsx

@@ -0,0 +1,235 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import type { MapActivity, MapIntent, MapNode, MapSettings, MapSnapshot } from '../../shared/workMap'
+import { thinkingHighlights } from '../lib/workMapHighlights'
+
+const ICONS: Record<MapActivity, string> = { thinking: '✦', investigating: '⌕', editing: '✎', testing: '✓', planning: '◇', reporting: '≡' }
+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' }
+
+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 [selected, setSelected] = useState<string | null>(null)
+  const [following, setFollowing] = useState(true)
+  const [paths, setPaths] = useState({ pythonPath: '', modelPath: '' })
+  const [fullSource, setFullSource] = useState<{ eventId: string; text?: string; error?: string; loading?: boolean } | null>(null)
+  const scroll = useRef<HTMLDivElement>(null)
+  const alive = useRef(true)
+  const revision = useRef(-1)
+
+  const accept = (next: MapSnapshot) => {
+    if (!alive.current || next.tabId !== tabId || next.revision < revision.current) return
+    revision.current = next.revision
+    setSnapshot(next)
+  }
+
+  useEffect(() => {
+    alive.current = true
+    const unsubscribe = window.worker.onWorkMapUpdate(accept)
+    window.worker.getWorkMap(tabId).then(next => {
+      accept(next)
+      if (alive.current) setPaths({ pythonPath: next.settings.pythonPath, modelPath: next.settings.modelPath })
+    }).catch(err => { if (alive.current) setError(String(err)) })
+    return () => { alive.current = false; unsubscribe() }
+  }, [tabId])
+
+  useEffect(() => {
+    const event = snapshot?.nodes.find(n => n.id === selected)?.evidence.find(e => e.kind === 'thinking' || e.kind === 'message')
+    if (!event) { setFullSource(null); return }
+    let cancelled = false
+    setFullSource({ eventId: event.id, loading: true })
+    if (typeof window.worker.getWorkMapSource !== 'function') {
+      setFullSource({ eventId: event.id, error: 'Restart the app to load full source text. Showing the recorded preview.' })
+      return
+    }
+    window.worker.getWorkMapSource(tabId, event.id).then(source => {
+      if (!cancelled) setFullSource(source ? { eventId: event.id, text: source.text } : { eventId: event.id, error: 'The original source record is no longer available.' })
+    }).catch(err => { if (!cancelled) setFullSource({ eventId: event.id, error: String(err) }) })
+    return () => { cancelled = true }
+  }, [selected, tabId])
+
+  useLayoutEffect(() => {
+    if (following && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight
+  }, [snapshot?.revision, following])
+
+  async function configure(settings: Partial<MapSettings>) {
+    setSaving(true)
+    setError(null)
+    try { accept(await window.worker.setWorkMap(tabId, settings)) }
+    catch (err) { if (alive.current) setError(String(err)) }
+    finally { if (alive.current) setSaving(false) }
+  }
+
+  const toggleBranch = (id: string) => setCollapsed(prev => {
+    const next = new Set(prev)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    return next
+  })
+
+  const nodes = snapshot?.nodes || []
+  const steps = nodes.filter(n => n.kind === 'step')
+  const decisions = steps.filter(n => n.intent && n.intent !== 'context')
+  const nodeById = new Map(nodes.map(n => [n.id, n]))
+  const goals = nodes.filter(n => n.kind === 'goal')
+
+  // 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[] }> = []
+    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
+      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] })
+    }
+    return runs
+  }
+  const enabled = snapshot?.settings.enabled || false
+  const available = snapshot?.capability?.state === 'available'
+  const runtime = snapshot?.runtime
+  const activity = snapshot?.ended ? 'Session ended'
+    : !enabled ? 'Map is off'
+    : !snapshot?.supported ? 'Waiting for a local agent'
+    : snapshot.state === 'awaiting_decision' ? 'Waiting for approval'
+    : snapshot.state === 'awaiting_input' ? 'Waiting for you'
+    : runtime === 'loading' ? 'Loading Clef-Flash…'
+    : runtime === 'thinking' ? 'Connecting the dots…'
+    : runtime === 'error' ? 'Model paused'
+    : steps.length ? 'Following this session' : 'Waiting for activity'
+
+  function renderStep(node: MapNode) {
+    const open = selected === node.id
+    const thinking = node.evidence[0]?.kind === 'thinking'
+    const actions = nodes.filter(n => n.contextId === node.id)
+    const linked = !!node.contextId && nodeById.has(node.contextId)
+    return <li key={node.id} className={`work-map-step ${node.status}${linked ? ' follows-intent' : ''}`}>
+      <button className="work-map-step-button" onClick={() => setSelected(open ? null : node.id)} aria-expanded={open}>
+        <span className={`work-map-activity ${node.activity}`} title={node.activity} aria-label={node.activity}>{ICONS[node.activity]}</span>
+        <span className="work-map-step-copy"><span className="work-map-step-title">{node.focus?.text || node.title}</span>
+          {node.focus?.reason && <span className="work-map-reason"><b>Why</b> {node.focus.reason}</span>}
+          <span className="work-map-step-meta">
+            {node.intent && node.intent !== 'context' ? <span className={`work-map-intent ${node.intent}`}>{INTENTS[node.intent]}</span> : <span className={`work-map-status ${node.status}`}>{STATUS[node.status]}</span>}
+            {(thinking || node.evidence[0]?.kind === 'message') && <span>{thinking ? 'Thinking summary' : 'Agent update'}</span>}
+            {linked && <span className="work-map-link" title={`Follows: ${nodeById.get(node.contextId!)?.title}`}>↳ {nodeById.get(node.contextId!)?.evidence[0]?.kind === 'thinking' ? 'Follows thinking' : 'Follows update'}</span>}
+            <time dateTime={node.ts}>{new Date(node.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</time>
+            {actions.length > 0 && <span>{actions.length} following {actions.length === 1 ? 'action' : 'actions'}</span>}
+            {node.placement === 'clef-flash' && <span title="Topic placement suggested by Clef-Flash">Clef ↗</span>}
+          </span>
+        </span>
+        <span className="work-map-receipt-caret" aria-hidden="true">{open ? '−' : '+'}</span>
+      </button>
+      {open && <div className="work-map-evidence">
+        <div className="work-map-evidence-heading">Source events</div>
+        {node.evidence.map(e => <div key={e.id} className="work-map-receipt">
+          <span>{e.kind === 'thinking' ? fullSource?.eventId === e.id && fullSource.text !== undefined ? 'Full thinking' : 'Thinking summary' : e.kind === 'tool' ? 'Tool call' : e.kind === 'result' ? 'Tool result' : fullSource?.eventId === e.id && fullSource.text !== undefined ? 'Full agent update' : 'Agent message'}</span>
+          {fullSource?.eventId === e.id && fullSource.loading && <small>Loading full source…</small>}
+          {fullSource?.eventId === e.id && fullSource.error && <small>{fullSource.error}</small>}
+          <pre className="work-map-source-text">{highlightSource(fullSource?.eventId === e.id && fullSource.text !== undefined ? fullSource.text : e.text, node.focus)}</pre>
+          {node.focus && <small className="work-map-highlight-key"><span>Highlighted: important choice</span>{node.focus.reason && <span>supporting reason</span>}</small>}
+          <code title={`${e.source} · ${e.toolId || e.id}`}>{e.source}<br />{e.toolId || e.id}</code>
+        </div>)}
+        {node.placement === 'clef-flash' && <small>Clef suggested the topic{thinking ? ' and interpretation' : ''}. {thinking ? 'A stated plan or hypothesis is not a verified result.' : 'Execution status comes from the tool result.'}</small>}
+      </div>}
+    </li>
+  }
+
+  return <section className="work-map-panel" aria-label="Live work map">
+    <div className="work-map-controls">
+      <div className="work-map-heading"><span className="work-map-kicker">THE THREAD OF WORK</span>
+        <div className="work-map-heading-row"><h2>Follow the thread.</h2>
+          <button className={`work-map-switch ${enabled ? 'on' : ''}`} role="switch" aria-label="Enable work map" aria-checked={enabled}
+            disabled={!snapshot || saving || !available} onClick={() => void configure({ enabled: !enabled })}>
+            <span /><b>{enabled ? 'On' : 'Off'}</b>
+          </button>
+        </div>
+      </div>
+      <div className="work-map-engine-row"><label htmlFor={`map-engine-${tabId}`}>Engine</label>
+        <select id={`map-engine-${tabId}`} value={snapshot?.settings.engine || 'clef-flash'} disabled={!snapshot || saving || !available}
+          onChange={e => void configure({ engine: e.target.value as MapSettings['engine'] })}>
+          <option value="clef-flash">Clef-Flash · local</option><option value="rules">Rules · lightweight</option>
+        </select>
+      </div>
+      {!available && snapshot && <p className="work-map-thinking-status" role="status">{snapshot.capability?.reason || 'Restart the app to check Apple GPU availability.'}</p>}
+      {enabled && snapshot?.supported && <p className="work-map-thinking-status" role="status">
+        {snapshot.thinkingStatus === 'available' ? 'Readable thinking included'
+          : snapshot.thinkingStatus === 'unavailable' ? 'This transcript omits readable thinking summaries.'
+          : 'Waiting for a readable thinking summary.'}
+      </p>}
+      <div className="work-map-live" role="status"><span className={`work-map-live-dot ${enabled && snapshot?.supported && !snapshot?.ended ? 'on' : ''}`} />
+        {activity}<span className="work-map-agent">{snapshot?.agentName}</span>
+      </div>
+      {(error || snapshot?.error) && <div className="work-map-error" role="alert">{error || snapshot?.error}
+        <button disabled={saving || !available} onClick={() => void configure({ enabled: true })}>Retry</button>
+      </div>}
+      {snapshot?.settings.engine === 'clef-flash' && <details className="work-map-setup">
+        <summary>Local model setup</summary>
+        <p>Use your downloaded Clef-Flash 8-bit model and its Python environment. Inference stays on this Mac.</p>
+        <label>Python executable<input value={paths.pythonPath} onChange={e => setPaths(p => ({ ...p, pythonPath: e.target.value }))} spellCheck={false} /></label>
+        <label>Model folder<input value={paths.modelPath} onChange={e => setPaths(p => ({ ...p, modelPath: e.target.value }))} spellCheck={false} /></label>
+        <button disabled={saving || !available || !paths.pythonPath.trim() || !paths.modelPath.trim()} onClick={() => void configure(paths)}>Save paths</button>
+      </details>}
+    </div>
+
+    <div className="work-map-scroll" ref={scroll} onScroll={() => {
+      const el = scroll.current
+      if (el) setFollowing(el.scrollHeight - el.scrollTop - el.clientHeight < 55)
+    }}>
+      {goals.length === 0 ? <div className="work-map-empty">
+        <div className="work-map-empty-tree" aria-hidden="true">◇<span>├─ ⌕</span><span>└─ ✓</span></div>
+        <h3>{enabled ? 'The choices and the work, together.' : 'A map of what happens next.'}</h3>
+        <p>{!enabled ? 'Turn on the map to follow goals, investigations, edits, and checks as your agent works.'
+          : !snapshot?.supported ? 'Start a local Claude Code or Codex session to see its work here. Remote sessions are not supported yet.'
+          : '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}>
+            <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>
+          </button>
+          {!collapsed.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)}>
+                  <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>
+                </button>
+                {!collapsed.has(run.id) && <ul className="work-map-steps" aria-label="Activity thread">{run.nodes.map(renderStep)}</ul>}
+              </div>
+            })}
+          </div>}
+        </article>)}
+        {snapshot?.dropped ? <p className="work-map-retained">Earlier activity trimmed · keeping the latest 240 nodes</p> : null}
+      </div>}
+    </div>
+    {!following && steps.length > 0 && <button className="work-map-jump" onClick={() => setFollowing(true)}>↓ Follow latest</button>}
+    <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) }
+        catch (err) { if (alive.current) setError(String(err)) }
+      }}>Clear map</button>
+    </footer>
+  </section>
+}
+
+function highlightSource(text: string, focus?: MapNode['focus']): ReactNode {
+  const ranges = thinkingHighlights(text, focus)
+  if (!ranges.length) return text
+  const parts: ReactNode[] = []
+  let offset = 0
+  for (const range of ranges) {
+    parts.push(text.slice(offset, range.start))
+    parts.push(<mark key={range.start} className={`work-map-highlight ${range.kind}`}>{text.slice(range.start, range.end)}</mark>)
+    offset = range.end
+  }
+  parts.push(text.slice(offset))
+  return parts
+}

package/src/renderer/components/WorkMapToggle.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import type { MapCapability } from '../../shared/workMap'
+
+let capability: MapCapability = { state: 'checking', reason: 'Checking Apple GPU availability…' }
+
+export function canOpenWorkMap(): boolean {
+  return capability.state === 'available'
+}
+
+export function WorkMapToggle({ visible, onToggle, onUnavailable }: {
+  visible: boolean
+  onToggle: () => void
+  onUnavailable: () => void
+}) {
+  const [current, setCurrent] = useState(capability)
+  useEffect(() => {
+    let cancelled = false
+    let pushed = false
+    const accept = (next: MapCapability) => {
+      if (cancelled) return
+      capability = next
+      setCurrent(next)
+      if (next.state === 'unavailable') onUnavailable()
+    }
+    if (!window.worker.getWorkMapCapability) {
+      accept({ state: 'unavailable', reason: 'Restart the app to check Apple GPU availability.' })
+      return
+    }
+    const unsubscribe = window.worker.onWorkMapCapability(next => { pushed = true; accept(next) })
+    window.worker.getWorkMapCapability().then(next => { if (!pushed) accept(next) })
+      .catch(() => accept({ state: 'unavailable', reason: 'GPU availability could not be verified.' }))
+    return () => { cancelled = true; unsubscribe() }
+  }, [])
+
+  const available = current.state === 'available'
+  return <button
+    className={`titlebar-btn titlebar-icon-btn ${visible ? 'active' : ''}`}
+    onClick={onToggle}
+    disabled={!available}
+    title={available ? `Show or hide the live work map · ${current.gpuName || 'Apple GPU'} (Ctrl+Shift+M)` : current.reason || 'Work map is unavailable'}
+    aria-label="Work map"
+    aria-pressed={visible}
+  >
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true">
+      <rect x="2" y="9" width="6" height="6" rx="2" /><rect x="16" y="2" width="6" height="6" rx="2" /><rect x="16" y="16" width="6" height="6" rx="2" />
+      <path d="M8 12h4V5h4M12 12v7h4" />
+    </svg>
+    <span>Work map</span>
+  </button>
+}

package/src/renderer/lib/workMapHighlights.ts

@@ -0,0 +1,41 @@
+export interface ThinkingHighlight { start: number; end: number; kind: 'choice' | 'reason' }
+
+function canonical(text: string) {
+  let value = ''
+  const offsets: number[] = []
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '*' || text[i] === '`') continue
+    const ch = /\s/.test(text[i]) ? ' ' : text[i]
+    if (ch === ' ' && value.endsWith(' ')) continue
+    value += ch
+    offsets.push(i)
+  }
+  return { value, offsets }
+}
+
+/** Locate selected excerpts in the original text, preserving whitespace and Markdown. */
+export function thinkingHighlights(text: string, focus?: { text: string; reason?: string }): ThinkingHighlight[] {
+  if (!focus) return []
+  const source = canonical(text)
+  const ranges: ThinkingHighlight[] = []
+  for (const kind of ['choice', 'reason'] as const) {
+    const excerpt = kind === 'choice' ? focus.text : focus.reason
+    if (!excerpt) continue
+    const needle = canonical(excerpt).value.trim()
+    if (!needle) continue
+    const index = source.value.indexOf(needle)
+    if (index < 0) continue
+    let start = source.offsets[index]
+    let end = source.offsets[index + needle.length - 1] + 1
+    while (start > 0 && /[*`]/.test(text[start - 1])) start--
+    while (end < text.length && /[*`]/.test(text[end])) end++
+    ranges.push({ start, end, kind })
+  }
+  const merged: ThinkingHighlight[] = []
+  for (const range of ranges.sort((a, b) => a.start - b.start)) {
+    const last = merged.at(-1)
+    if (last && range.start < last.end) { last.end = Math.max(last.end, range.end); if (range.kind === 'choice') last.kind = 'choice' }
+    else merged.push({ ...range })
+  }
+  return merged
+}

package/src/renderer/styles.css

@@ -17,6 +17,97 @@
    flipped mechanically.
    ───────────────────────────────────────────────────────────── */
 
+/* Live work map */
+.work-map-panel { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; background: var(--bg-app); color: var(--text); font-size: 12px; }
+.work-map-controls { padding: 20px 18px 12px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-chrome); max-height: 55%; overflow-y: auto; }
+.work-map-kicker { display: block; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; line-height: 1.8; }
+.work-map-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 10px; }
+.work-map-heading h2 { margin: 0; color: var(--text-bright); font-size: 21px; font-weight: 550; letter-spacing: -0.7px; }
+.work-map-panel button, .work-map-panel select, .work-map-panel input { font: inherit; }
+.work-map-panel button { cursor: pointer; }
+.work-map-panel button:disabled { opacity: .45; cursor: default; }
+.work-map-panel button:focus-visible, .work-map-panel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.work-map-switch { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 7px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-surface); color: var(--text-muted); }
+.work-map-switch span { width: 11px; height: 11px; border-radius: 50%; background: var(--text-muted); }
+.work-map-switch b { font-size: 10px; font-weight: 600; }
+.work-map-switch.on { color: var(--success); border-color: var(--success); background: var(--bg-chip-soft); }
+.work-map-switch.on span { background: var(--success); }
+.work-map-engine-row { display: flex; gap: 12px; align-items: center; }
+.work-map-engine-row label { color: var(--text-soft); font-size: 11px; }
+.work-map-engine-row select { flex: 1; min-width: 0; padding: 6px 8px; color: var(--text-bright); background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 6px; }
+.work-map-live { display: flex; align-items: center; gap: 6px; padding-top: 12px; font-size: 10px; color: var(--text-soft); }
+.work-map-live-dot { width: 5px; height: 5px; flex-shrink: 0; background: var(--text-muted); border-radius: 50%; }
+.work-map-live-dot.on { background: var(--success); box-shadow: 0 0 7px color-mix(in srgb, var(--success) 30%, transparent); }
+.work-map-agent { margin-left: auto; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.work-map-error { padding: 10px; margin-top: 12px; border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.work-map-error button, .work-map-setup button { display: block; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-bright); border-radius: 4px; padding: 4px 9px; margin-top: 8px; }
+.work-map-setup { margin-top: 10px; font-size: 10px; color: var(--text-muted); }
+.work-map-setup summary { cursor: pointer; width: fit-content; }
+.work-map-setup p { color: var(--text-soft); line-height: 1.6; }
+.work-map-setup label { display: block; margin-top: 8px; color: var(--text-soft); }
+.work-map-setup input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px; background: var(--bg-well); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; }
+.work-map-scroll { flex: 1; min-height: 0; overflow: auto; padding: 20px 14px 40px; scrollbar-gutter: stable; overflow-anchor: none; }
+.work-map-empty { padding: 24px 14px; max-width: 280px; margin: auto; }
+.work-map-empty-tree { display: flex; flex-direction: column; color: var(--accent); font: 22px/1.7 ui-monospace, monospace; margin: 0 0 20px 10px; }
+.work-map-empty-tree span { color: var(--text-muted); padding-left: 5px; }
+.work-map-empty h3 { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text-bright); margin: 0 0 10px; }
+.work-map-empty p { color: var(--text-soft); font-size: 12px; line-height: 1.8; margin: 0; }
+.work-map-goal + .work-map-goal { margin-top: 28px; }
+.work-map-goal-heading { display: flex; align-items: flex-start; gap: 9px; width: 100%; border: 0; padding: 0; background: transparent; text-align: left; color: var(--text-bright); }
+.work-map-goal-icon { font-size: 22px; line-height: 1.5; color: var(--accent); flex-shrink: 0; }
+.work-map-goal-heading strong { display: block; line-height: 1.5; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
+.work-map-caret { margin-left: auto; color: var(--text-muted); flex-shrink: 0; font-size: 12px; }
+.work-map-branches { margin: 12px 0 0 10px; padding-left: 17px; border-left: 1px solid var(--border-dim); }
+.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-point.failed { background: var(--danger); }
+.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-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)); }
+.work-map-step-button { display: flex; align-items: flex-start; gap: 8px; padding: 10px 9px; width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; }
+.work-map-step-button:hover { background: var(--bg-inset-hi); }
+.work-map-activity { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; background: var(--bg-chip); color: var(--accent); font-size: 17px; }
+.work-map-activity.editing { color: var(--warning); }
+.work-map-activity.testing { color: var(--success); }
+.work-map-activity.planning { color: var(--sev-digest); }
+.work-map-activity.thinking { color: var(--sev-digest); }
+.work-map-step.follows-intent { margin-left: 12px; border-left: 2px solid var(--border-dim); }
+.work-map-link { color: var(--text-soft); }
+.work-map-reason { display: block; border-left: 2px solid var(--border-dim); padding-left: 7px; margin-top: 7px; color: var(--text-soft); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
+.work-map-reason b { color: var(--text-bright); font-size: 9px; margin-right: 3px; }
+.work-map-receipt .work-map-source-text { max-height: 310px; line-height: 1.8; }
+.work-map-highlight { color: var(--text-bright); background: color-mix(in srgb, var(--warning) 25%, transparent); border-radius: 2px; padding: 1px 0; }
+.work-map-highlight.reason { background: color-mix(in srgb, var(--accent) 25%, transparent); }
+.work-map-highlight-key { display: flex !important; flex-wrap: wrap; gap: 10px; }
+.work-map-highlight-key span:first-child { color: var(--warning); }
+.work-map-highlight-key span + span { color: var(--accent); }
+.work-map-thinking-status { color: var(--text-muted); font-size: 10px; line-height: 1.5; margin: 8px 0 0; }
+.work-map-intent { color: var(--sev-digest); }
+.work-map-intent.hypothesis { color: var(--warning); }
+.work-map-intent.decision { color: var(--accent); }
+.work-map-step-copy { min-width: 0; flex: 1; }
+.work-map-step-title { display: block; overflow-wrap: anywhere; line-height: 1.6; font-size: 11px; }
+.work-map-step-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: 9px; color: var(--text-muted); }
+.work-map-status.running { color: var(--accent); }
+.work-map-status.succeeded { color: var(--success); }
+.work-map-status.failed { color: var(--danger); }
+.work-map-receipt-caret { color: var(--text-muted); line-height: 1.6; font-size: 12px; }
+.work-map-evidence { padding: 0 10px 10px; font-size: 10px; line-height: 1.6; }
+.work-map-evidence-heading { border-top: 1px solid var(--border-subtle); padding-top: 10px; color: var(--text-bright); font-weight: 600; }
+.work-map-receipt { margin-top: 10px; color: var(--text-soft); }
+.work-map-receipt pre { font: 10px/1.6 ui-monospace, monospace; color: var(--text); background: var(--bg-app); white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px; border-radius: 4px; max-height: 170px; overflow: auto; }
+.work-map-receipt code { display: block; color: var(--text-muted); font-size: 9px; overflow-wrap: anywhere; }
+.work-map-evidence small { display: block; margin-top: 10px; color: var(--text-muted); font-size: 9px; }
+.work-map-retained { color: var(--text-muted); font-size: 10px; padding: 12px 0; text-align: center; }
+.work-map-jump { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid var(--border-strong); border-radius: 20px; padding: 7px 13px; background: var(--bg-raised); color: var(--accent); box-shadow: 0 3px 12px var(--shadow-color); }
+.work-map-footer { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; gap: 8px; border-top: 1px solid var(--border-subtle); background: var(--bg-chrome); color: var(--text-muted); font-size: 9px; }
+.work-map-footer button { border: 0; background: transparent; color: var(--text-soft); padding: 2px; font-size: 10px; }
+
 :root,
 :root[data-theme='tokyo-night'] {
   color-scheme: dark;

package/src/shared/workMap.d.ts

@@ -0,0 +1,70 @@
+export type MapEngine = 'rules' | 'clef-flash'
+export type MapActivity = 'thinking' | 'investigating' | 'editing' | 'testing' | 'planning' | 'reporting'
+export type MapIntent = 'decision' | 'hypothesis' | 'alternative' | 'next_step' | 'context'
+export type MapStatus = 'running' | 'succeeded' | 'failed' | 'unknown' | 'interrupted'
+
+export interface MapCapability {
+  state: 'checking' | 'available' | 'unavailable'
+  reason: string | null
+  gpuName?: string
+}
+
+export interface MapSettings {
+  enabled: boolean
+  engine: MapEngine
+  pythonPath: string
+  modelPath: string
+}
+
+export interface MapEvidence {
+  id: string
+  ts: string
+  kind: 'prompt' | 'thinking' | 'message' | 'tool' | 'result'
+  text: string
+  source: string
+  tool?: string
+  toolId?: string
+  status?: MapStatus
+  /** Salient candidates from the complete readable block, before display truncation. */
+  segments?: string[]
+  /** Populated only by an on-demand source read, never retained in map snapshots. */
+  fullText?: string
+}
+
+export interface MapNode {
+  id: string
+  parentId: string | null
+  kind: 'goal' | 'branch' | 'step'
+  title: string
+  activity: MapActivity
+  status: MapStatus
+  ts: string
+  evidence: MapEvidence[]
+  placement?: MapEngine
+  confidence?: number
+  intent?: MapIntent
+  /** Most recent stated reasoning/intent before this action, within the same goal. */
+  contextId?: string
+  focus?: { text: string; reason?: string }
+}
+
+export interface MapSnapshot {
+  revision: number
+  tabId: string
+  agentName: string | null
+  supported: boolean
+  ended: boolean
+  state: string
+  settings: MapSettings
+  runtime: 'off' | 'idle' | 'loading' | 'ready' | 'thinking' | 'error'
+  error: string | null
+  nodes: MapNode[]
+  dropped: number
+  thinkingStatus: 'waiting' | 'available' | 'unavailable'
+  capability: MapCapability
+}
+
+export interface MapSource {
+  text: string
+  source: string
+}