@phenx-inc/ctlsurf 0.13.5 → 0.14.0

package/src/main/orchestrator.ts

@@ -12,6 +12,8 @@ import { AgentStateMonitor, type AgentState } from './agentState'
 import { WorkerWsClient, type WorkerWsStatus, type IncomingMessage } from './workerWs'
 import { TimeTracker } from './timeTracker'
 import { TicketStore, type TicketInput } from './ticketStore'
+import { Observer } from './observer/observer'
+import { OBSERVER_DEFAULTS, type ObserverSettings } from './observer/types'
 import { log } from './logger'
 
 // ─── Types ────────────────────────────────────────
@@ -37,6 +39,10 @@ export interface SettingsData {
   // Speak agent replies aloud (Electron desktop only). Drives the transcript
   // tailer the same way logChat does, independent of chat logging.
   speakReplies?: boolean
+  // Observer supervision layer (advisory; off by default). See
+  // src/main/observer/. Requires an Anthropic API key for Tiers 1–2;
+  // without one it still records the ledger, Tier-0 tags, and spans.
+  observer?: ObserverSettings
 }
 
 export interface OrchestratorEvents {
@@ -57,6 +63,12 @@ export interface OrchestratorEvents {
   // is true when any tab is waiting on the user, and drives the dock/taskbar
   // attention indicator. Optional — only the Electron entry wires it.
   onAgentStateChange?: (tabId: string, state: AgentState, anyAwaiting: boolean) => void
+  // Live Observer feed item (finding / digest / health / status) for the
+  // in-app Observer panel. Optional — only the Electron entry wires it.
+  onObserverUpdate?: (item: unknown) => void
+  // Observer model review in-flight (true while a Tier-1/Tier-2 call runs) —
+  // drives the panel's processing animation.
+  onObserverActivity?: (reviewing: boolean) => void
 }
 
 interface TabState {
@@ -97,6 +109,7 @@ export class Orchestrator {
   readonly workerWs: WorkerWsClient
   readonly timeTracker = new TimeTracker(this.ctlsurfApi)
   readonly ticketStore = new TicketStore(this.ctlsurfApi)
+  readonly observer: Observer
 
   // State
   private tabs = new Map<string, TabState>()
@@ -122,8 +135,17 @@ export class Orchestrator {
     this.settingsDir = settingsDir
     this.events = events
 
+    this.observer = new Observer({
+      settingsDir,
+      api: this.ctlsurfApi,
+      getSettings: () => this.settings.observer || {},
+      onUpdate: (item) => this.events.onObserverUpdate?.(item),
+      onActivity: (reviewing) => this.events.onObserverActivity?.(reviewing),
+    })
+
     this.stateMonitor = new AgentStateMonitor(({ tabId, state, anyAwaiting }) => {
       this.events.onAgentStateChange?.(tabId, state, anyAwaiting)
+      this.observer.noteAgentState(tabId, state)
     })
     this.stateMonitor.start()
 
@@ -205,6 +227,53 @@ export class Orchestrator {
     this.restartActiveChatLogging()
   }
 
+  // ─── Observer settings ──────────────────────────
+
+  /** Summary for the settings UI — never echoes the API key back. */
+  getObserverSettingsSummary(): { enabled: boolean; hasApiKey: boolean; keySource: 'settings' | 'env' | null; dailyCapUsd: number } {
+    const o = this.settings.observer || {}
+    const keySource = o.anthropicApiKey ? 'settings' : process.env.ANTHROPIC_API_KEY ? 'env' : null
+    return {
+      enabled: !!o.enabled,
+      hasApiKey: keySource !== null,
+      keySource,
+      dailyCapUsd: o.dailyCapUsd ?? OBSERVER_DEFAULTS.dailyCapUsd,
+    }
+  }
+
+  /** Persist observer settings. The Observer reads them lazily, so changes
+   * apply to new model calls immediately and to newly spawned agent tabs;
+   * an empty apiKey means "keep the stored one" (profile-edit convention). */
+  saveObserverSettings(data: { enabled: boolean; anthropicApiKey?: string; dailyCapUsd?: number; sensitivity?: ObserverSettings['sensitivity'] }): void {
+    const prev = this.settings.observer || {}
+    this.settings.observer = {
+      ...prev,
+      enabled: !!data.enabled,
+      ...(data.anthropicApiKey?.trim() ? { anthropicApiKey: data.anthropicApiKey.trim() } : {}),
+      ...(data.dailyCapUsd !== undefined && Number.isFinite(data.dailyCapUsd)
+        ? { dailyCapUsd: Math.max(0.05, data.dailyCapUsd) }
+        : {}),
+      ...(data.sensitivity && ['severe', 'balanced', 'all'].includes(data.sensitivity)
+        ? { sensitivity: data.sensitivity }
+        : {}),
+    }
+    this.saveSettings()
+    log(`[observer] Settings saved: enabled=${!!data.enabled}${data.sensitivity ? ` sensitivity=${data.sensitivity}` : ''}`)
+  }
+
+  /** Flip the Observer on/off live (panel toggle). Enabling attaches to all
+   * running agent tabs immediately; disabling detaches quietly (no digests). */
+  setObserverEnabled(enabled: boolean): void {
+    this.saveObserverSettings({ enabled })
+    if (enabled) {
+      for (const [tabId, tab] of this.tabs) {
+        this.observer.attachTab(tabId, tab.agent.id, tab.agent.name, tab.cwd)
+      }
+    } else {
+      this.observer.detachAll()
+    }
+  }
+
   // Re-evaluate the transcript tailer for the active tab against the current
   // logChat / speakReplies flags. Both setters funnel through here.
   private restartActiveChatLogging(): void {
@@ -557,6 +626,7 @@ export class Orchestrator {
     ptyManager.onExit(async (exitCode: number) => {
       this.events.onPtyExit(tabId, exitCode)
       await this.timeTracker.endSession(tabId)
+      void this.observer.endTab(tabId, this.tabs.get(tabId)?.projectRootPath)
       if (tabId === this.activeTabId) {
         this.stopChatLogging()
         if (this.currentAgent && isCodingAgent(this.currentAgent)) {
@@ -570,6 +640,7 @@ export class Orchestrator {
     })
 
     this.startChatLogging(agent, cwd)
+    this.observer.attachTab(tabId, agent.id, agent.name, cwd)
 
     const profile = this.getActiveProfile()
     const shouldTrack = opts?.trackTime !== undefined ? opts.trackTime : (profile.trackTime !== false)
@@ -594,6 +665,7 @@ export class Orchestrator {
   writePty(tabId: string, data: string): void {
     this.tabs.get(tabId)?.ptyManager.write(data)
     this.stateMonitor.noteInput(tabId, data)
+    this.observer.noteHumanInput(tabId)
     if (tabId === this.activeTabId) {
       this.bridge.feedInput(data)
     }
@@ -612,6 +684,7 @@ export class Orchestrator {
     if (!tab) return
     if (tab.termStreamTimer) clearTimeout(tab.termStreamTimer)
     await this.timeTracker.endSession(tabId)
+    void this.observer.endTab(tabId, tab.projectRootPath)
     tab.ptyManager.kill()
     this.tabs.delete(tabId)
     this.stateMonitor.removeTab(tabId)
@@ -831,6 +904,7 @@ export class Orchestrator {
     this.stopChatLogging()
     this.stateMonitor.stop()
     await this.timeTracker.endAll()
+    await this.observer.shutdown()
     for (const [, tab] of this.tabs) {
       if (tab.termStreamTimer) clearTimeout(tab.termStreamTimer)
       tab.ptyManager.kill()

package/src/main/transcripts.ts

@@ -40,6 +40,13 @@ export interface TranscriptTailerOptions {
   agentId: TranscriptAgentId
   cwd: string
   sink: ChatLogSink
+  /**
+   * Optional raw-line hook: receives every parsed transcript JSONL object
+   * (before chat filtering), minus replayed history and codex files excluded
+   * by cwd. Used by the Observer to see tool_use/tool_result records the
+   * chat sink discards. Must never throw.
+   */
+  rawSink?: (obj: unknown) => void
   /** Override transcript roots (for tests). */
   claudeProjectsDir?: string
   codexSessionsDir?: string
@@ -61,6 +68,7 @@ export class TranscriptTailer {
   private readonly agentId: TranscriptAgentId
   private readonly cwd: string
   private readonly sink: ChatLogSink
+  private readonly rawSink?: (obj: unknown) => void
   private readonly claudeProjectsDir: string
   private readonly codexSessionsDir: string
 
@@ -72,6 +80,7 @@ export class TranscriptTailer {
     this.agentId = options.agentId
     this.cwd = stripTrailingSep(options.cwd)
     this.sink = options.sink
+    this.rawSink = options.rawSink
     this.claudeProjectsDir = options.claudeProjectsDir || path.join(os.homedir(), '.claude', 'projects')
     this.codexSessionsDir = options.codexSessionsDir || path.join(os.homedir(), '.codex', 'sessions')
   }
@@ -209,6 +218,15 @@ export class TranscriptTailer {
       return // tolerate partial/corrupt lines
     }
 
+    // Raw hook (Observer): every parsed object except replayed history.
+    // Codex lines from excluded files never reach here (drainFile stops).
+    if (this.rawSink) {
+      const rawMs = typeof obj?.timestamp === 'string' ? Date.parse(obj.timestamp) : NaN
+      if (!Number.isFinite(rawMs) || rawMs >= this.sinceMs - DISCOVERY_SLACK_MS) {
+        try { this.rawSink(obj) } catch { /* observer errors must not break tailing */ }
+      }
+    }
+
     const entry = this.agentId === 'claude' ? this.parseClaudeLine(obj) : this.parseCodexLine(obj, tail)
     if (!entry) return
 

package/src/preload/index.ts

@@ -81,9 +81,11 @@ const api = {
     ipcRenderer.invoke('app:browseCwd'),
 
   // Clipboard — write a rich-HTML table (+ plain-text fallback) for email paste.
-  copyEmailTable: (html: string, text: string): Promise<{ ok: boolean }> =>
+  // `ok` reflects a read-back verification in the main process, not just that the
+  // call was made; `error` is set when the write threw.
+  copyEmailTable: (html: string, text: string): Promise<{ ok: boolean; error?: string }> =>
     ipcRenderer.invoke('clipboard:writeTable', html, text),
-  copyText: (text: string): Promise<{ ok: boolean }> =>
+  copyText: (text: string): Promise<{ ok: boolean; error?: string }> =>
     ipcRenderer.invoke('clipboard:writeText', text),
   getVersion: (): Promise<string> =>
     ipcRenderer.invoke('app:getVersion'),
@@ -142,6 +144,42 @@ const api = {
     ipcRenderer.invoke('speak:get'),
   setSpeakReplies: (enabled: boolean): Promise<{ enabled: boolean }> =>
     ipcRenderer.invoke('speak:set', enabled),
+
+  // Observer supervision layer (global). The API key is write-only over IPC:
+  // the getter reports only whether one is configured and from where.
+  getObserverSettings: (): Promise<{ enabled: boolean; hasApiKey: boolean; keySource: 'settings' | 'env' | null; dailyCapUsd: number }> =>
+    ipcRenderer.invoke('observer:get'),
+  setObserverSettings: (data: { enabled: boolean; anthropicApiKey?: string; dailyCapUsd?: number; sensitivity?: 'severe' | 'balanced' | 'all' }): Promise<{ enabled: boolean; hasApiKey: boolean; keySource: 'settings' | 'env' | null; dailyCapUsd: number }> =>
+    ipcRenderer.invoke('observer:set', data),
+  // Observer panel: feed snapshot, live on/off toggle, and push updates.
+  getObserverFeed: (): Promise<{
+    items: Array<Record<string, unknown>>
+    enabled: boolean
+    hasApiKey: boolean
+    observing: Array<{ tabId: string; agentName: string; session: string }>
+    spentTodayUsd: number
+    reviewing: boolean
+    sensitivity: 'severe' | 'balanced' | 'all'
+  }> => ipcRenderer.invoke('observer:feed'),
+  toggleObserver: (enabled: boolean): Promise<{
+    items: Array<Record<string, unknown>>
+    enabled: boolean
+    hasApiKey: boolean
+    observing: Array<{ tabId: string; agentName: string; session: string }>
+    spentTodayUsd: number
+    reviewing: boolean
+    sensitivity: 'severe' | 'balanced' | 'all'
+  }> => ipcRenderer.invoke('observer:toggle', enabled),
+  onObserverUpdate: (callback: (item: Record<string, unknown>) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, item: Record<string, unknown>) => callback(item)
+    ipcRenderer.on('observer:update', listener)
+    return () => ipcRenderer.removeListener('observer:update', listener)
+  },
+  onObserverActivity: (callback: (reviewing: boolean) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, reviewing: boolean) => callback(reviewing)
+    ipcRenderer.on('observer:activity', listener)
+    return () => ipcRenderer.removeListener('observer:activity', listener)
+  },
   onAgentMessage: (callback: (text: string) => void) => {
     const listener = (_event: Electron.IpcRendererEvent, text: string) => callback(text)
     ipcRenderer.on('agent:message', listener)

package/src/renderer/App.tsx

@@ -16,6 +16,7 @@ import {
 import { StatusBar } from './components/StatusBar'
 import { SettingsDialog } from './components/SettingsDialog'
 import { TicketPane } from './components/TicketPanel'
+import { ObserverPane } from './components/ObserverPanel'
 
 interface AgentConfig {
   id: string
@@ -67,6 +68,12 @@ declare global {
       setLogChat: (enabled: boolean) => Promise<{ enabled: boolean }>
       getSpeakReplies: () => Promise<{ enabled: boolean }>
       setSpeakReplies: (enabled: boolean) => Promise<{ enabled: boolean }>
+      getObserverSettings: () => Promise<{ enabled: boolean; hasApiKey: boolean; keySource: 'settings' | 'env' | null; dailyCapUsd: number }>
+      setObserverSettings: (data: { enabled: boolean; anthropicApiKey?: string; dailyCapUsd?: number; sensitivity?: 'severe' | 'balanced' | 'all' }) => Promise<{ enabled: boolean; hasApiKey: boolean; keySource: 'settings' | 'env' | null; dailyCapUsd: number }>
+      getObserverFeed: () => Promise<{ items: Array<Record<string, unknown>>; enabled: boolean; hasApiKey: boolean; observing: Array<{ tabId: string; agentName: string; session: string }>; spentTodayUsd: number; reviewing: boolean; sensitivity: 'severe' | 'balanced' | 'all' }>
+      toggleObserver: (enabled: boolean) => Promise<{ items: Array<Record<string, unknown>>; enabled: boolean; hasApiKey: boolean; observing: Array<{ tabId: string; agentName: string; session: string }>; spentTodayUsd: number; reviewing: boolean; sensitivity: 'severe' | 'balanced' | 'all' }>
+      onObserverUpdate: (callback: (item: Record<string, unknown>) => void) => () => void
+      onObserverActivity: (callback: (reviewing: boolean) => void) => () => void
       onAgentMessage: (callback: (text: string) => void) => () => void
       onAgentState: (callback: (tabId: string, state: string, anyAwaiting: boolean) => void) => () => void
       getLastReply: () => Promise<string | null>
@@ -524,6 +531,7 @@ export default function App() {
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
     { id: 'tickets', label: 'Tickets', content: <TicketPane onSendToTerminal={handleSendToTerminal} /> },
+    { id: 'observer', label: 'Observer', content: <ObserverPane /> },
   ]
 
   return (
@@ -565,6 +573,20 @@ export default function App() {
             </svg>
             <span>Tickets</span>
           </button>
+          <button
+            className={`titlebar-btn titlebar-icon-btn ${visiblePaneIds.includes('observer') ? 'active' : ''}`}
+            onClick={() => togglePane('observer')}
+            title="Toggle Observer pane — live session review"
+            aria-label="Observer"
+          >
+            <svg viewBox="0 0 24 24" width="13" height="13"
+              fill="none" stroke="currentColor" strokeWidth="2"
+              strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+            <span>Observer</span>
+          </button>
           <button
             className={`titlebar-btn titlebar-icon-btn ${showFloatingMic ? 'active' : ''}`}
             onClick={() => setFloatingMicVisible(!showFloatingMic)}

package/src/renderer/components/ObserverPanel.tsx

@@ -0,0 +1,289 @@
+import { useState, useEffect, useCallback } from 'react'
+
+/**
+ * Observer side pane — live supervision feed for the current session.
+ *
+ * Shares the drawer chrome with the Tickets pane but renders its own card
+ * language: severity-accented finding cards, a digest card per session, and
+ * muted one-line heartbeats so it's always visible that a review ran. The
+ * header switch turns the whole feature on/off, applying immediately to
+ * running agent tabs.
+ */
+
+interface FeedItem {
+  id: string
+  ts: string
+  kind: 'finding' | 'digest' | 'health' | 'status'
+  tabId?: string
+  session?: string
+  title: string
+  detail?: string
+  category?: string
+  severity?: string
+  confidence?: number
+  receipts?: string[]
+  tier?: number
+}
+
+type Sensitivity = 'severe' | 'balanced' | 'all'
+
+interface FeedSnapshot {
+  items: FeedItem[]
+  enabled: boolean
+  hasApiKey: boolean
+  observing: Array<{ tabId: string; agentName: string; session: string }>
+  spentTodayUsd: number
+  reviewing: boolean
+  sensitivity: Sensitivity
+}
+
+const SENSITIVITY_LEVELS: Array<{ value: Sensitivity; label: string; hint: string }> = [
+  { value: 'severe', label: 'Severe', hint: 'Only high/critical findings — near silence' },
+  { value: 'balanced', label: 'Balanced', hint: 'Warn and above — clear signals only' },
+  { value: 'all', label: 'All signals', hint: 'Everything, including low-confidence observations' },
+]
+
+const SEVERITY_COLORS: Record<string, string> = {
+  info: '#7aa2f7',
+  warn: '#e0af68',
+  high: '#ff9e64',
+  critical: '#f7768e',
+}
+const DIGEST_COLOR = '#bb9af7'
+
+function EyeIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
+      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+function formatTime(iso: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+}
+
+function Chip({ color, label }: { color: string; label: string }) {
+  return (
+    <span className="obs-chip" style={{ color, borderColor: `${color}55`, background: `${color}14` }}>
+      <span className="obs-chip-dot" style={{ background: color }} />
+      {label}
+    </span>
+  )
+}
+
+function FindingCard({ item }: { item: FeedItem }) {
+  const [expanded, setExpanded] = useState(false)
+  const color = SEVERITY_COLORS[item.severity || 'info'] || SEVERITY_COLORS.info
+  return (
+    <button
+      type="button"
+      className="obs-card"
+      style={{ borderLeftColor: color }}
+      onClick={() => setExpanded(v => !v)}
+      aria-expanded={expanded}
+    >
+      <div className="obs-card-top">
+        <Chip color={color} label={item.severity || 'info'} />
+        <span className="obs-card-cat">{(item.category || '').replace(/_/g, ' ')}</span>
+        <span className="obs-card-time">{formatTime(item.ts)}</span>
+      </div>
+      <div className="obs-card-title">{item.title}</div>
+      {expanded && (
+        <div className="obs-card-body">
+          {item.detail && <p>{item.detail}</p>}
+          <div className="obs-card-facts">
+            {typeof item.confidence === 'number' && (
+              <span className="obs-fact">{Math.round(item.confidence * 100)}% confidence</span>
+            )}
+            {typeof item.tier === 'number' && <span className="obs-fact">tier {item.tier}</span>}
+            {item.receipts && item.receipts.length > 0 && (
+              <span className="obs-fact">{item.receipts.join(' · ')}</span>
+            )}
+          </div>
+        </div>
+      )}
+      <span className={`obs-card-caret ${expanded ? 'open' : ''}`} aria-hidden="true">▸</span>
+    </button>
+  )
+}
+
+function DigestCard({ item }: { item: FeedItem }) {
+  const [expanded, setExpanded] = useState(true)
+  return (
+    <button
+      type="button"
+      className="obs-card"
+      style={{ borderLeftColor: DIGEST_COLOR }}
+      onClick={() => setExpanded(v => !v)}
+      aria-expanded={expanded}
+    >
+      <div className="obs-card-top">
+        <Chip color={DIGEST_COLOR} label="digest" />
+        <span className="obs-card-time">{formatTime(item.ts)}</span>
+      </div>
+      <div className="obs-card-title">{item.title}</div>
+      {expanded && item.detail && (
+        <div className="obs-card-body"><p>{item.detail}</p></div>
+      )}
+      <span className={`obs-card-caret ${expanded ? 'open' : ''}`} aria-hidden="true">▸</span>
+    </button>
+  )
+}
+
+export function ObserverPane() {
+  const [snapshot, setSnapshot] = useState<FeedSnapshot | null>(null)
+  const [toggling, setToggling] = useState(false)
+  const [reviewing, setReviewing] = useState(false)
+
+  const refresh = useCallback(async () => {
+    try {
+      const s = await window.worker.getObserverFeed()
+      setSnapshot(s as FeedSnapshot)
+      setReviewing((s as FeedSnapshot).reviewing)
+    } catch { /* main process without observer support */ }
+  }, [])
+
+  useEffect(() => {
+    void refresh()
+    const unsub = window.worker.onObserverUpdate((item) => {
+      setSnapshot(prev => prev
+        ? { ...prev, items: [...prev.items.filter(i => i.id !== (item as FeedItem).id), item as FeedItem].slice(-200) }
+        : prev)
+    })
+    const unsubActivity = window.worker.onObserverActivity(setReviewing)
+    // Status bits (observing list, spend) refresh with the project/tab context.
+    const unsubCwd = window.worker.onCwdChanged(() => void refresh())
+    return () => { unsub(); unsubActivity(); unsubCwd() }
+  }, [refresh])
+
+  const handleToggle = useCallback(async (enabled: boolean) => {
+    if (toggling) return
+    setToggling(true)
+    try {
+      const s = await window.worker.toggleObserver(enabled)
+      setSnapshot(s as FeedSnapshot)
+    } finally {
+      setToggling(false)
+    }
+  }, [toggling])
+
+  const handleSensitivity = useCallback(async (level: Sensitivity) => {
+    const current = snapshot
+    if (!current || current.sensitivity === level) return
+    setSnapshot({ ...current, sensitivity: level }) // optimistic
+    try {
+      await window.worker.setObserverSettings({ enabled: current.enabled, sensitivity: level })
+    } catch {
+      void refresh()
+    }
+  }, [snapshot, refresh])
+
+  const enabled = snapshot?.enabled ?? false
+  const items = [...(snapshot?.items || [])].reverse() // newest first
+  const findings = items.filter(i => i.kind === 'finding')
+
+  return (
+    <div className="ticket-pane observer-pane" role="region" aria-label="Observer">
+      <div className="ticket-drawer-header">
+        <div className="ticket-drawer-heading">
+          <span className={`ticket-drawer-badge obs-badge ${reviewing && enabled ? 'reviewing' : ''}`}>
+            <EyeIcon size={16} />
+          </span>
+          <div className="ticket-drawer-headtext">
+            <span className="ticket-drawer-title">Observer</span>
+            <span className="ticket-drawer-subtitle">
+              {!snapshot ? 'loading…'
+                : !enabled ? 'off'
+                : !snapshot.hasApiKey ? <span className="ticket-drawer-warn">no Anthropic API key — Tier 0 only (add in Settings)</span>
+                : snapshot.observing.length === 0 ? 'on — waiting for an agent tab'
+                : <>watching <strong>{snapshot.observing.map(o => o.agentName).join(', ')}</strong></>}
+            </span>
+          </div>
+        </div>
+        <label className="observer-switch" title={enabled ? 'Turn Observer off' : 'Turn Observer on'}>
+          <input
+            type="checkbox"
+            checked={enabled}
+            disabled={toggling || !snapshot}
+            onChange={e => void handleToggle(e.target.checked)}
+          />
+          <span className="observer-switch-track"><span className="observer-switch-thumb" /></span>
+        </label>
+      </div>
+
+      {enabled && snapshot && (
+        <div className="obs-toolbar">
+          <div className="obs-sensitivity" role="radiogroup" aria-label="Detection threshold">
+            {SENSITIVITY_LEVELS.map(l => (
+              <button
+                key={l.value}
+                type="button"
+                className={`obs-sens-btn ${snapshot.sensitivity === l.value ? 'active' : ''}`}
+                title={l.hint}
+                aria-pressed={snapshot.sensitivity === l.value}
+                onClick={() => void handleSensitivity(l.value)}
+              >
+                {l.label}
+              </button>
+            ))}
+          </div>
+          {reviewing && (
+            <span className="obs-reviewing" aria-live="polite">
+              <span className="obs-reviewing-dot" />
+              <span className="obs-reviewing-dot" />
+              <span className="obs-reviewing-dot" />
+              reviewing
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="ticket-list-body obs-feed">
+        {!enabled && (
+          <div className="ticket-empty">
+            <span className="ticket-empty-icon"><EyeIcon size={26} /></span>
+            <span className="ticket-empty-title">Observer is off</span>
+            <span className="ticket-empty-hint">
+              Flip the switch to review this session for assumptions, unverified
+              claims, and dependency/license risk each time the agent hands
+              control back to you.
+            </span>
+          </div>
+        )}
+        {enabled && items.length === 0 && (
+          <div className="ticket-empty">
+            <span className="ticket-empty-icon"><EyeIcon size={26} /></span>
+            <span className="ticket-empty-title">Nothing yet</span>
+            <span className="ticket-empty-hint">
+              Reviews run when the agent finishes a turn. Results land here.
+            </span>
+          </div>
+        )}
+        {enabled && items.map(item => {
+          if (item.kind === 'finding') return <FindingCard key={item.id} item={item} />
+          if (item.kind === 'digest') return <DigestCard key={item.id} item={item} />
+          return (
+            <div key={item.id} className={`obs-line ${item.kind}`}>
+              <span className="obs-line-dot" aria-hidden="true" />
+              <span className="obs-line-text">{item.title}</span>
+              <span className="obs-line-time">{formatTime(item.ts)}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {snapshot && enabled && (
+        <div className="ticket-drawer-footer">
+          <span className="ticket-drawer-hint">
+            {findings.length} finding{findings.length === 1 ? '' : 's'} · ${snapshot.spentTodayUsd.toFixed(2)} spent today
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}