@axiomatic-labs/claudeflow 2.33.1 → 2.33.2

package/lib/panel.js

@@ -1,2628 +0,0 @@
-// `claudeflow panel` — local web dashboard for inspecting claudeflow state.
-//
-// Spawns a Node http server bound to 127.0.0.1 on a free port, opens the
-// system browser, and serves a single-page UI that calls JSON endpoints
-// to render: version, CLAUDE.md state, hooks, MCP/observer, setup-context,
-// active build run, and doctor checks.
-//
-// Zero runtime dependencies — Node built-ins only. The HTML/CSS/JS frontend
-// lives inline as a string template.
-
-const http = require('http');
-const fs = require('fs');
-const path = require('path');
-const { spawn } = require('child_process');
-const { URL } = require('url');
-
-const ui = require('./ui.js');
-const {
-  deriveCdpPort,
-  checkCdpPortMismatch,
-  checkStaleLockfiles,
-  checkObserverState,
-  readObserverState: readObserverStateFromDoctor,
-  readPlaywrightCdpEndpoint,
-  applyCdpPortFix,
-} = require('./doctor.js');
-const {
-  readOverrides,
-  toggleHookOverride,
-  toggleReminderOverride,
-  toggleEnforcementMode,
-  toggleRunToCompletionReminder,
-  toggleCwdLock,
-  normalizeHandlerPath,
-} = require('./hook-overrides.js');
-
-function loadEnforcementCatalog(cwd) {
-  const p = path.join(cwd, '.claude', 'hooks', 'shared', 'enforcement-catalog.js');
-  if (!fs.existsSync(p)) return null;
-  try {
-    delete require.cache[require.resolve(p)];
-    return require(p);
-  } catch {
-    return null;
-  }
-}
-
-// Lazy-load the reminder catalog from the template hook helper. The path
-// resolves the same way at install time and from the template repo.
-function loadReminderHelpers(cwd) {
-  const candidates = [
-    path.join(cwd, '.claude', 'hooks', 'shared', 'reload-reminder.js'),
-  ];
-  for (const c of candidates) {
-    if (fs.existsSync(c)) {
-      // Bypass require cache so updates to the template are picked up.
-      delete require.cache[require.resolve(c)];
-      return require(c);
-    }
-  }
-  return null;
-}
-
-const IDLE_SHUTDOWN_MS = 30 * 60 * 1000; // 30 min
-
-// ─── data collectors ─────────────────────────────────────────────
-
-function getVersionInfo(cwd) {
-  let installed = null;
-  for (const rel of [path.join('.claudeflow', 'version'), path.join('.claude', '.claudeflow-version')]) {
-    try {
-      installed = fs.readFileSync(path.join(cwd, rel), 'utf8').trim().replace(/^v/, '');
-      if (installed) break;
-    } catch {}
-  }
-  return { installed: installed || 'unknown' };
-}
-
-function getClaudeMdInfo(cwd) {
-  const p = path.join(cwd, 'CLAUDE.md');
-  let stat;
-  try { stat = fs.statSync(p); } catch { return { exists: false, path: p }; }
-  const content = fs.readFileSync(p, 'utf8');
-  const lines = content.split('\n');
-  const begin = '<!-- claudeflow:default-rules:start';
-  const end = '<!-- claudeflow:default-rules:end -->';
-  const beginIdx = content.indexOf(begin);
-  const endIdx = content.indexOf(end);
-  let block = null;
-  let position = null;
-  if (beginIdx !== -1 && endIdx !== -1 && endIdx > beginIdx) {
-    const lineStart = content.slice(0, beginIdx).split('\n').length;
-    const lineEnd = content.slice(0, endIdx).split('\n').length;
-    block = { lineStart, lineEnd, bytes: endIdx + end.length - beginIdx };
-    const totalLines = lines.length;
-    if (lineStart <= 3) position = 'top';
-    else if (lineEnd >= totalLines - 3) position = 'bottom';
-    else position = 'middle';
-  }
-  const optOut = content.includes('claudeflow:default-rules:opt-out');
-  return {
-    exists: true,
-    path: p,
-    bytes: stat.size,
-    lines: lines.length,
-    block: block ? { present: true, position, ...block } : { present: false },
-    optOut,
-  };
-}
-
-function getAppendPromptInfo(cwd) {
-  const p = path.join(cwd, 'append-system-prompt.md');
-  try {
-    const stat = fs.statSync(p);
-    return { exists: true, path: p, bytes: stat.size };
-  } catch {
-    return { exists: false, path: p };
-  }
-}
-
-function getHooksInfo(cwd) {
-  const settingsPath = path.join(cwd, '.claude', 'settings.json');
-  let settings;
-  try { settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); }
-  catch { return { settingsFound: false, events: [] }; }
-
-  const overrides = readOverrides(cwd);
-  const disabledIndex = new Map();
-  for (const d of overrides.disabledHandlers || []) {
-    disabledIndex.set(`${d.event}|${d.matcher || ''}|${d.handler}`, d);
-  }
-  const catalog = loadEnforcementCatalog(cwd);
-  const isEnforcement = catalog && typeof catalog.isEnforcementHook === 'function'
-    ? catalog.isEnforcementHook
-    : () => false;
-  const enforcementDisabled = overrides.enforcementDisabled === true;
-
-  // settings.json lists every hook (with each command wrapped through
-  // run-with-override.js). The wrapper checks overrides at invocation time,
-  // so the panel just annotates each handler with its current disabled
-  // state from the overrides file.
-  const hooks = settings.hooks || {};
-  const events = [];
-  let totalHandlers = 0;
-  let warnings = 0;
-  let disabledCount = 0;
-
-  for (const [event, rules] of Object.entries(hooks)) {
-    const handlers = [];
-    for (const rule of rules) {
-      const matcher = rule.matcher || '';
-      for (const h of rule.hooks || []) {
-        const cmd = h.command || '';
-        const handlerPath = normalizeHandlerPath(cmd) || (cmd ? cmd : '');
-        const isEmpty = !handlerPath;
-        if (isEmpty) warnings++;
-        const key = `${event}|${matcher}|${handlerPath}`;
-        const enforcement = isEnforcement(event, matcher, handlerPath);
-        const masterDisabled = enforcement && enforcementDisabled;
-        const manualDisabled = disabledIndex.has(key);
-        const isDisabled = manualDisabled || masterDisabled;
-        if (isDisabled) disabledCount++;
-        handlers.push({
-          handler: handlerPath || '(empty command)',
-          matcher,
-          matcherDisplay: matcher || '(any)',
-          empty: isEmpty,
-          enforcement,
-          disabled: isDisabled,
-          disabledBy: masterDisabled && !manualDisabled ? 'enforcement-master'
-                    : manualDisabled ? 'manual'
-                    : null,
-          rawCommand: cmd,
-        });
-        totalHandlers++;
-      }
-    }
-    events.push({ event, count: handlers.length, handlers });
-  }
-
-  return {
-    settingsFound: true,
-    events,
-    totalHandlers,
-    activeHandlers: totalHandlers - disabledCount,
-    disabledHandlers: disabledCount,
-    warnings,
-  };
-}
-
-function getMcpInfo(cwd) {
-  const mcpPath = path.join(cwd, '.mcp.json');
-  let cfg;
-  try { cfg = JSON.parse(fs.readFileSync(mcpPath, 'utf8')); }
-  catch { return { configFound: false }; }
-
-  const servers = Object.keys(cfg.mcpServers || {});
-  const cdp = checkCdpPortMismatch(cwd);
-  const reading = readPlaywrightCdpEndpoint(mcpPath);
-  const observer = readObserverState(cwd);
-  const lockfiles = checkStaleLockfiles(cwd);
-
-  return {
-    configFound: true,
-    servers,
-    playwright: {
-      configured: reading.state === 'ok' ? reading.port : null,
-      computed: deriveCdpPort(cwd),
-      match: cdp.severity === 'ok',
-      // `fixable` is true only for the "wrong port" mismatch case — the
-      // applyCdpPortFix routine can rewrite the args entry. Other cases
-      // (invalid JSON, unparseable value) can't be auto-fixed by the panel.
-      fixable: cdp.severity === 'mismatch',
-      state: reading.state,
-      message: cdp.message,
-    },
-    observer,
-    staleLockfiles: lockfiles.severity === 'mismatch' ? lockfiles.detail : [],
-  };
-}
-
-// Re-export the canonical helper from doctor.js so panel callers keep the
-// same name. The implementation moved to doctor.js so both surfaces (CLI
-// doctor + panel) share a single source of truth.
-const readObserverState = readObserverStateFromDoctor;
-
-function getSetupContextInfo(cwd) {
-  const p = path.join(cwd, '.claudeflow', 'config', 'setup-context.json');
-  let ctx;
-  try { ctx = JSON.parse(fs.readFileSync(p, 'utf8')); }
-  catch { return { exists: false, path: p }; }
-
-  const canonicalToolingTypes = ['unit_test', 'integration_test', 'api_contract_test', 'e2e_test', 'security_test'];
-  const tooling = ctx.test_tooling || {};
-  const toolingComplete = canonicalToolingTypes.every((t) => {
-    const e = tooling[t];
-    return e && typeof e === 'object' && typeof e.command_pattern === 'string' && e.command_pattern.trim();
-  });
-  const missingTooling = canonicalToolingTypes.filter((t) => {
-    const e = tooling[t];
-    return !(e && typeof e === 'object' && e.command_pattern && e.command_pattern.trim());
-  });
-
-  return {
-    exists: true,
-    path: p,
-    selections: ctx.selections || null,
-    testTooling: tooling,
-    toolingComplete,
-    missingTooling,
-  };
-}
-
-function getActiveRunInfo(cwd) {
-  const p = path.join(cwd, '.claudeflow', 'tmp', 'workflow-state.json');
-  let state;
-  try { state = JSON.parse(fs.readFileSync(p, 'utf8')); }
-  catch { return { active: false }; }
-  const activeRunId = state.active_run;
-  if (!activeRunId) return { active: false };
-  const run = (state.runs || {})[activeRunId] || null;
-  return {
-    active: true,
-    runId: activeRunId,
-    kind: run?.kind || null,
-    topLevel: run?.top_level || null,
-    taskCount: run?.tasks ? Object.keys(run.tasks).length : 0,
-  };
-}
-
-function getEnforcementInfo(cwd) {
-  const catalog = loadEnforcementCatalog(cwd);
-  const overrides = readOverrides(cwd);
-  if (!catalog || !Array.isArray(catalog.ENFORCEMENT_HOOKS)) {
-    return { available: false, on: !overrides.enforcementDisabled, count: 0 };
-  }
-  return {
-    available: true,
-    on: !overrides.enforcementDisabled,
-    count: catalog.ENFORCEMENT_HOOKS.length,
-    hooks: catalog.ENFORCEMENT_HOOKS.map((h) => ({
-      event: h.event,
-      handler: h.handler,
-      matcher: h.matcher,
-    })),
-  };
-}
-
-function getValidatorsInfo(cwd) {
-  const file = path.join(cwd, '.claudeflow', 'tmp', 'validators-state.json');
-  let state = null;
-  try {
-    const raw = fs.readFileSync(file, 'utf8');
-    if (raw.trim()) state = JSON.parse(raw);
-  } catch {}
-  if (!state || !Array.isArray(state.runs)) {
-    return { ok: true, available: false, updated_at: null, runs: [], stats: { total: 0, pass: 0, block: 0, skip: 0, error: 0 } };
-  }
-  const stats = { total: state.runs.length, pass: 0, block: 0, skip: 0, error: 0 };
-  for (const r of state.runs) {
-    if (stats[r.status] !== undefined) stats[r.status] += 1;
-  }
-  return {
-    ok: true,
-    available: true,
-    updated_at: state.updated_at || null,
-    runs: state.runs,
-    stats,
-  };
-}
-
-function getObserverInfo(cwd) {
-  // Read both the canonical state file (full snapshot) AND the summary file
-  // (which is what hooks consume — has the incident filter applied).
-  const tmpDir = path.join(cwd, '.claudeflow', 'tmp');
-  const statePath = path.join(tmpDir, 'error-observer-state.json');
-  const summaryPath = path.join(tmpDir, 'error-observer-summary.json');
-  let state;
-  let summary;
-  try { state = JSON.parse(fs.readFileSync(statePath, 'utf8')); } catch { state = null; }
-  try { summary = JSON.parse(fs.readFileSync(summaryPath, 'utf8')); } catch { summary = null; }
-
-  // Daemon liveness reuses doctor.js's helper (same source of truth).
-  const daemon = readObserverState(cwd);
-
-  // Servers table — flatten into UI-friendly rows.
-  const servers = state && state.servers && typeof state.servers === 'object'
-    ? Object.entries(state.servers).map(([label, srv]) => ({
-        label,
-        port: srv.port || null,
-        status: srv.status || 'unknown',
-        supervised: !!srv.supervised,
-        observed_external: !!srv.observed_external,
-        health_ok: srv.health_ok !== false,
-        last_ready_at: srv.last_ready_at || null,
-        last_issue_at: srv.last_issue_at || null,
-        last_exit_at: srv.last_exit_at || null,
-        last_exit_code: srv.last_exit_code,
-        last_exit_signal: srv.last_exit_signal,
-      }))
-    : [];
-
-  // Browser section.
-  const browser = state && state.browser ? {
-    last_snapshot_at: state.browser.last_snapshot_at || null,
-    latest_url: state.browser.latest_url || null,
-    latest_route: state.browser.latest_route || null,
-    latest_origin: state.browser.latest_origin || null,
-    snapshots_received: state.browser.snapshots_received || 0,
-  } : null;
-
-  // Unresolved incidents — already filtered in summary, but expose state's
-  // full list too so the UI can show recent (incl. resolved) history.
-  const unresolvedIncidents = summary && Array.isArray(summary.unresolved_incidents)
-    ? summary.unresolved_incidents
-    : [];
-  const allInState = state && state.incidents && typeof state.incidents === 'object'
-    ? Object.values(state.incidents)
-        .sort((a, b) => String(b.last_seen_at || '').localeCompare(String(a.last_seen_at || '')))
-        .slice(0, 50)
-    : [];
-  // Default surface to UI: ACTIVE only. "Clear observer state" resolves all
-  // active incidents, so after clear the active list is empty (which matches
-  // the user's expectation that "Clear" empties the feed). Resolved incidents
-  // are kept in state.incidents for audit and can be surfaced via the
-  // "Show resolved" filter pill.
-  const activeIncidents = allInState.filter((inc) => !inc.resolved_at && inc.active !== false);
-  const resolvedIncidents = allInState.filter((inc) => inc.resolved_at || inc.active === false);
-
-  return {
-    daemon,
-    summary_status: summary ? summary.status : null,
-    summary_reason: summary ? summary.reason : null,
-    summary_checked_at: summary ? summary.checked_at : null,
-    started_at: state ? state.started_at : null,
-    updated_at: state ? state.updated_at : null,
-    servers,
-    browser,
-    unresolved_incidents: unresolvedIncidents,
-    active_incidents: activeIncidents,
-    resolved_incidents: resolvedIncidents,
-    // Kept for backwards compat with older render code — same as active_incidents.
-    recent_incidents: activeIncidents,
-    totals: summary ? {
-      unresolved: summary.unresolved_incidents_total || 0,
-      browser: summary.browser_incidents_total || 0,
-      server: summary.server_incidents_total || 0,
-    } : null,
-  };
-}
-
-function getRunToCompletionInfo(cwd) {
-  const overrides = readOverrides(cwd);
-  return {
-    on: overrides.runToCompletionReminderEnabled === true,
-    handler: 'UserPromptSubmit/run-to-completion-reminder.js',
-  };
-}
-
-function getCwdLockInfo(cwd) {
-  const overrides = readOverrides(cwd);
-  return {
-    on: overrides.cwdLockEnabled === true,
-    handler: 'CwdChanged/lock-cwd.js',
-  };
-}
-
-function getActivePlanInfo(cwd) {
-  const p = path.join(cwd, '.claudeflow', 'state', 'active-plan.json');
-  let raw;
-  try { raw = fs.readFileSync(p, 'utf8'); }
-  catch { return { available: false }; }
-  let record;
-  try { record = JSON.parse(raw); }
-  catch (err) { return { available: false, error: err.message }; }
-  const captured = record.captured_at ? Date.parse(record.captured_at) : null;
-  const ageSeconds = captured ? Math.floor((Date.now() - captured) / 1000) : null;
-  const content = typeof record.content === 'string' ? record.content : '';
-  return {
-    available: true,
-    path: record.path || null,
-    source: record.source || null,
-    sessionId: record.session_id || null,
-    capturedAt: record.captured_at || null,
-    ageSeconds,
-    sha256: record.sha256 || null,
-    contentBytes: record.contentBytes || content.length,
-    summaryPreview: content.slice(0, 240).replace(/\s+/g, ' ').trim(),
-  };
-}
-
-function getRemindersInfo(cwd) {
-  const helpers = loadReminderHelpers(cwd);
-  if (!helpers || typeof helpers.listReminderCatalog !== 'function') {
-    return { available: false, reminders: [], disabledCount: 0 };
-  }
-  const catalog = helpers.listReminderCatalog();
-  const overrides = readOverrides(cwd);
-  const disabledSet = new Set(overrides.disabledReminders || []);
-  const reminders = catalog.map((r) => ({
-    id: r.id,
-    label: r.label,
-    description: r.description,
-    slot: r.slot,
-    disabled: disabledSet.has(r.id),
-  }));
-  return {
-    available: true,
-    reminders,
-    disabledCount: reminders.filter((r) => r.disabled).length,
-    activeCount: reminders.filter((r) => !r.disabled).length,
-  };
-}
-
-// ─── token-budget thresholds ─────────────────────────────────────
-//
-// Anthropic does NOT publish official limits for per-turn additionalContext.
-// These defaults are heuristics derived from:
-//   - GitHub issue anthropics/claude-code#45188 (system prompt 100K+ tokens
-//     made sessions unusable without /compact)
-//   - Community guidance: keep injected per-turn content well under 10–15%
-//     of the 200K context window so user content + tool results have room
-//   - Practical observation that 5–10K tokens for project rules is common
-//
-// Override per project via env vars before launching `claudeflow panel`:
-//   CLAUDEFLOW_TOKEN_HEAVY=8000   (yellow threshold)
-//   CLAUDEFLOW_TOKEN_HIGH=20000   (red threshold)
-const TOKEN_HEAVY_DEFAULT = 8000;
-const TOKEN_HIGH_DEFAULT  = 20000;
-
-function tokenThresholds() {
-  const heavy = parseInt(process.env.CLAUDEFLOW_TOKEN_HEAVY, 10);
-  const high  = parseInt(process.env.CLAUDEFLOW_TOKEN_HIGH, 10);
-  return {
-    heavy: Number.isFinite(heavy) && heavy > 0 ? heavy : TOKEN_HEAVY_DEFAULT,
-    high:  Number.isFinite(high)  && high  > 0 ? high  : TOKEN_HIGH_DEFAULT,
-  };
-}
-
-function classifyTokens(tokens, thresholds = tokenThresholds()) {
-  if (!tokens || tokens <= 0) return 'none';
-  if (tokens >= thresholds.high)  return 'high';
-  if (tokens >= thresholds.heavy) return 'heavy';
-  if (tokens < 2000)              return 'light';
-  return 'normal';
-}
-
-// ─── log events (Logs tab) ───────────────────────────────────────
-//
-// Sidecar files live in `.claude/tmp/log-events/<id>.json`. Each is one
-// event (enforcement-silenced or reminder-injected) with metadata and,
-// for reminders, the full content that was injected at fire time. The
-// panel reads them via:
-//   GET /api/logs?limit=&type=&before=  → metadata-only paged list
-//   GET /api/logs/:id                   → full record incl. content
-function logEventsDir(cwd) {
-  return path.join(cwd, '.claude', 'tmp', 'log-events');
-}
-
-function isValidLogId(id) {
-  return typeof id === 'string' && /^[A-Za-z0-9_-]+$/.test(id) && id.length <= 64;
-}
-
-function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
-  const dir = logEventsDir(cwd);
-  let files;
-  try {
-    files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
-  } catch {
-    return { entries: [], total: 0, thresholds: tokenThresholds() };
-  }
-  files.sort().reverse(); // filenames begin with sortable timestamp; newest first
-  const total = files.length;
-  const thresholds = tokenThresholds();
-
-  let beforeIdx = 0;
-  if (before) {
-    const beforeFile = `${before}.json`;
-    const idx = files.indexOf(beforeFile);
-    if (idx >= 0) beforeIdx = idx + 1;
-  }
-
-  const entries = [];
-  for (let i = beforeIdx; i < files.length && entries.length < limit; i++) {
-    let r;
-    try { r = JSON.parse(fs.readFileSync(path.join(dir, files[i]), 'utf8')); }
-    catch { continue; }
-    if (type !== 'all') {
-      if (type === 'enforcement' && !r.type.startsWith('enforcement')) continue;
-      if (type === 'reminder' && !r.type.startsWith('reminder')) continue;
-      if (type === 'blocked' && r.type !== 'enforcement-blocked') continue;
-    }
-    // Strip large `content` from list view; clients fetch it via /api/logs/:id
-    // Old sidecars (pre-token-estimate) lack `contentTokens`. Backfill on
-    // the fly using the same chars/4 heuristic — keeps the UI consistent
-    // for events captured before the upgrade.
-    const tokens = typeof r.contentTokens === 'number'
-      ? r.contentTokens
-      : (r.contentBytes ? Math.round(r.contentBytes / 4) : 0);
-    entries.push({
-      id: r.id,
-      timestamp: r.timestamp,
-      type: r.type,
-      event: r.event,
-      matcher: r.matcher || '',
-      handler: r.handler,
-      summary: r.summary,
-      contentBytes: r.contentBytes || 0,
-      contentTokens: tokens,
-      tokenStatus: classifyTokens(tokens, thresholds),
-      activeReminderIds: r.activeReminderIds || null,
-      capturedFromStdout: r.capturedFromStdout === true,
-      stdoutTruncated: r.stdoutTruncated === true,
-      parseError: r.parseError || null,
-      decision: r.decision || null,
-      reason: r.reason || null,
-    });
-  }
-  return { entries, total, thresholds };
-}
-
-function readLogEvent(cwd, id) {
-  if (!isValidLogId(id)) return null;
-  try {
-    return JSON.parse(fs.readFileSync(path.join(logEventsDir(cwd), `${id}.json`), 'utf8'));
-  } catch {
-    return null;
-  }
-}
-
-// Destructive: removes every sidecar in .claude/tmp/log-events/ and truncates
-// .claude/tmp/hooks.log. Returns counts so the UI can confirm the wipe.
-function clearLogs(cwd) {
-  const dir = logEventsDir(cwd);
-  let removed = 0;
-  try {
-    const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
-    for (const f of files) {
-      try { fs.unlinkSync(path.join(dir, f)); removed++; } catch {}
-    }
-  } catch {}
-  // Truncate the human-readable log too so the user sees a fresh tail -f.
-  let logTruncated = false;
-  const logPath = path.join(cwd, '.claude', 'tmp', 'hooks.log');
-  try {
-    if (fs.existsSync(logPath)) {
-      fs.writeFileSync(logPath, '');
-      logTruncated = true;
-    }
-  } catch {}
-  return { removed, logTruncated };
-}
-
-function getLogsInfo(cwd) {
-  const dir = logEventsDir(cwd);
-  const thresholds = tokenThresholds();
-  let total = 0;
-  let mostRecent = null;
-  let latestReminderTokens = null;
-  let latestReminderStatus = null;
-  let recentBlockedCount = 0;
-  try {
-    const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json')).sort();
-    total = files.length;
-    // Walk from newest. Count blocks within the last 50 events for the
-    // sidebar severity. Latest-reminder lookup short-circuits when both
-    // mostRecent + latestReminderTokens are populated AND we've scanned
-    // enough for the block tally.
-    const scanCap = Math.min(50, files.length);
-    for (let i = files.length - 1; i >= files.length - scanCap; i--) {
-      try {
-        const r = JSON.parse(fs.readFileSync(path.join(dir, files[i]), 'utf8'));
-        if (mostRecent === null) mostRecent = r.timestamp;
-        if (latestReminderTokens === null && r.type && r.type.startsWith('reminder')) {
-          const tokens = typeof r.contentTokens === 'number'
-            ? r.contentTokens
-            : (r.contentBytes ? Math.round(r.contentBytes / 4) : 0);
-          latestReminderTokens = tokens;
-          latestReminderStatus = classifyTokens(tokens, thresholds);
-        }
-        if (r.type === 'enforcement-blocked') recentBlockedCount++;
-      } catch {}
-    }
-  } catch {}
-  return {
-    available: true,
-    total,
-    mostRecent,
-    thresholds,
-    latestReminderTokens,
-    latestReminderStatus,
-    recentBlockedCount,
-  };
-}
-
-function getDoctorInfo(cwd) {
-  const checks = [
-    checkCdpPortMismatch(cwd),
-    checkStaleLockfiles(cwd),
-    checkObserverState(cwd),
-  ];
-  const issues = checks.filter((c) => c.severity !== 'ok' && c.severity !== 'info');
-  return {
-    issueCount: issues.length,
-    checks: checks.map((c) => ({ id: c.id, severity: c.severity, message: c.message })),
-  };
-}
-
-function collectStatus(cwd) {
-  return {
-    cwd,
-    timestamp: new Date().toISOString(),
-    version: getVersionInfo(cwd),
-    claudeMd: getClaudeMdInfo(cwd),
-    appendPrompt: getAppendPromptInfo(cwd),
-    hooks: getHooksInfo(cwd),
-    mcp: getMcpInfo(cwd),
-    setupContext: getSetupContextInfo(cwd),
-    activeRun: getActiveRunInfo(cwd),
-    reminders: getRemindersInfo(cwd),
-    enforcement: getEnforcementInfo(cwd),
-    runToCompletion: getRunToCompletionInfo(cwd),
-    cwdLock: getCwdLockInfo(cwd),
-    observer: getObserverInfo(cwd),
-    validators: getValidatorsInfo(cwd),
-    activePlan: getActivePlanInfo(cwd),
-    logs: getLogsInfo(cwd),
-    doctor: getDoctorInfo(cwd),
-  };
-}
-
-// ─── frontend (HTML + CSS + JS embedded) ──────────────────────────
-
-function renderHtml() {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>claudeflow panel</title>
-<style>
-:root {
-  --bg: #0e1117;
-  --panel: #161b22;
-  --panel-2: #1c232c;
-  --border: #2a313c;
-  --fg: #e6edf3;
-  --muted: #8b949e;
-  --accent: #7c3aed;
-  --ok: #3fb950;
-  --warn: #d29922;
-  --err: #f85149;
-  --info: #58a6ff;
-  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-}
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, -apple-system, sans-serif; }
-header { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 10; }
-header .logo { color: var(--accent); font-size: 18px; }
-header .title { font-weight: 600; letter-spacing: 0.5px; }
-header .version { color: var(--muted); font-family: var(--mono); font-size: 12px; }
-header .cwd { color: var(--muted); font-family: var(--mono); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-header .actions { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; }
-header button { background: var(--panel-2); border: 1px solid var(--border); color: var(--fg); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
-header button:hover { border-color: var(--accent); }
-.enforce-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); font-size: 12px; transition: all 0.2s; }
-.enforce-pill .enforce-label { color: var(--muted); font-family: var(--mono); letter-spacing: 0.5px; text-transform: uppercase; font-size: 11px; }
-.enforce-pill .enforce-state { font-family: var(--mono); font-weight: 600; font-size: 12px; min-width: 26px; text-align: left; }
-.enforce-pill[data-state="on"] { border-color: rgba(63, 185, 80, 0.5); background: rgba(63, 185, 80, 0.08); }
-.enforce-pill[data-state="on"] .enforce-state { color: var(--ok); }
-.enforce-pill[data-state="off"] { border-color: rgba(248, 81, 73, 0.6); background: rgba(248, 81, 73, 0.12); box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.3); }
-.enforce-pill[data-state="off"] .enforce-state { color: var(--err); }
-.enforce-switch { position: relative; display: inline-block; width: 32px; height: 18px; }
-.enforce-switch input { opacity: 0; width: 0; height: 0; }
-.enforce-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.2s; }
-.enforce-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: var(--fg); border-radius: 50%; transition: transform 0.2s; }
-.enforce-switch input:checked + .enforce-slider { background: var(--ok); }
-.enforce-switch input:checked + .enforce-slider::before { transform: translateX(14px); }
-main { display: flex; min-height: calc(100vh - 56px); }
-nav { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); padding: 12px 0; }
-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 22px; color: var(--fg); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; font-size: 13px; }
-nav a:hover { background: var(--panel-2); }
-nav a.active { background: var(--panel-2); border-left-color: var(--accent); }
-@media (max-width: 720px) {
-  main { flex-direction: column; }
-  nav {
-    width: 100%; border-right: 0; border-bottom: 1px solid var(--border);
-    padding: 0; display: flex; overflow-x: auto;
-  }
-  nav a {
-    flex-shrink: 0; padding: 12px 16px; border-left: 0;
-    border-bottom: 3px solid transparent; white-space: nowrap;
-  }
-  nav a.active { border-left: 0; border-bottom-color: var(--accent); }
-  section { padding: 16px 18px; max-width: none; }
-  header { padding: 12px 16px; gap: 8px; }
-  header .cwd { font-size: 11px; }
-  header .actions { font-size: 11px; }
-}
-nav .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
-.dot.ok { background: var(--ok); }
-.dot.warn { background: var(--warn); }
-.dot.err { background: var(--err); }
-.dot.info { background: var(--muted); }
-section { flex: 1; min-width: 0; padding: 22px 28px; max-width: 980px; }
-section h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: 0.3px; }
-section .sub { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
-.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
-.card-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: center; gap: 10px; }
-.card-row:last-child { border-bottom: 0; }
-.card-row .k { color: var(--muted); font-size: 13px; }
-.card-row .v { font-family: var(--mono); font-size: 13px; }
-.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: var(--mono); }
-.badge.ok { background: rgba(63, 185, 80, 0.12); color: var(--ok); }
-.badge.warn { background: rgba(210, 153, 34, 0.12); color: var(--warn); }
-.badge.err { background: rgba(248, 81, 73, 0.12); color: var(--err); }
-.badge.info { background: rgba(139, 148, 158, 0.16); color: var(--muted); }
-pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; overflow: auto; max-height: 480px; font: 12px/1.5 var(--mono); margin: 0; }
-details { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
-details summary { cursor: pointer; font-weight: 500; }
-details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
-.handler { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-family: var(--mono); font-size: 12px; padding: 4px 0; align-items: center; }
-.matcher { color: var(--muted); font-size: 11px; }
-.muted { color: var(--muted); }
-.error { color: var(--err); }
-.success { color: var(--ok); }
-.warning { color: var(--warn); }
-.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
-.toggle input { accent-color: var(--accent); }
-.disabled-row { opacity: 0.55; }
-.disabled-row .matcher { font-style: italic; }
-.reminder-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
-.reminder-row:last-child { border-bottom: 0; }
-.reminder-row .reminder-label { font-size: 13px; }
-.reminder-row .reminder-desc { font-size: 12px; margin-left: 22px; margin-top: 2px; }
-.reminder-row .reminder-id { font-size: 11px; margin-left: 22px; margin-top: 2px; }
-.reminder-row code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
-.logs-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
-.logs-controls select, .logs-controls button { background: var(--panel); border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 6px; font: inherit; }
-.logs-controls button:hover { border-color: var(--accent); cursor: pointer; }
-.observer-filter { background: var(--panel); border: 1px solid var(--border); color: var(--fg); padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font: inherit; }
-.observer-filter:hover { border-color: var(--accent, #6cf); }
-.observer-filter.active { background: rgba(108,170,255,0.12); border-color: var(--accent, #6cf); color: var(--accent, #6cf); }
-.btn-warn { background: var(--panel); border: 1px solid rgba(245,194,52,0.5); color: var(--warn, #f5c234); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
-.btn-warn:hover { border-color: var(--warn, #f5c234); background: rgba(245,194,52,0.08); }
-.btn-warn:disabled { opacity: 0.4; cursor: not-allowed; }
-.logs-clear-btn { margin-left: auto; background: var(--panel); color: var(--err); border: 1px solid rgba(248,81,73,0.4); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }
-.logs-clear-btn:hover { border-color: var(--err); background: rgba(248,81,73,0.08); }
-.logs-clear-btn:disabled { opacity: 0.4; cursor: not-allowed; color: var(--muted); border-color: var(--border); }
-.logs-clear-btn:disabled:hover { border-color: var(--border); background: var(--panel); }
-.logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-.logs-table th, .logs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
-.logs-table th { font-weight: 500; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
-.logs-table tr:hover td { background: rgba(124, 58, 237, 0.05); }
-.logs-time { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
-.logs-handler { font-family: var(--mono); font-size: 12px; }
-.logs-size { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
-.logs-view { background: var(--panel-2); border: 1px solid var(--border); color: var(--fg); padding: 4px 12px; border-radius: 5px; font: inherit; font-size: 12px; cursor: pointer; }
-.logs-view:hover { border-color: var(--accent); }
-.logs-table tr.token-light    td:first-child { border-left: 3px solid #3fb950; }
-.logs-table tr.token-normal   td:first-child { border-left: 3px solid var(--border); }
-.logs-table tr.token-heavy    td:first-child { border-left: 3px solid var(--warn); }
-.logs-table tr.token-high     td:first-child { border-left: 3px solid var(--err); }
-.logs-table tr.silenced       { opacity: 0.78; }
-.logs-table tr.silenced .logs-handler { text-decoration: line-through; text-decoration-color: rgba(248,81,73,0.5); }
-.logs-status { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
-.logs-status.injected { color: #58a6ff; }
-.logs-status.silenced { color: var(--err); font-weight: 600; }
-.logs-status.blocked  { color: var(--err); font-weight: 700; }
-.logs-table tr.blocked .logs-handler { color: var(--err); }
-.logs-table tr.blocked td:first-child { border-left: 3px solid var(--err) !important; }
-.logs-reason-preview { font-size: 11px; color: var(--err); margin-top: 2px; max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.token-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-family: var(--mono); margin-left: 6px; vertical-align: middle; }
-.token-badge.heavy { background: rgba(210,153,34,0.18); color: var(--warn); }
-.token-badge.high  { background: rgba(248,81,73,0.20); color: var(--err); }
-.token-badge.light { background: rgba(63,185,80,0.18); color: var(--ok); }
-#log-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 60%; max-width: 920px; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.4); z-index: 100; overflow-y: auto; }
-#log-drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
-#log-drawer .drawer-head .title { font-weight: 600; }
-#log-drawer .drawer-head button { background: none; border: 1px solid var(--border); color: var(--fg); padding: 5px 10px; border-radius: 5px; cursor: pointer; }
-#log-drawer .drawer-body { padding: 18px 22px; }
-#log-drawer h3 { margin: 0 0 12px; font-size: 15px; }
-#log-drawer h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
-#log-drawer pre { max-height: none; }
-.toast { position: fixed; bottom: 18px; right: 18px; background: var(--panel); border: 1px solid var(--border); padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
-.toast.err { border-color: var(--err); }
-.toast.ok { border-color: var(--ok); }
-</style>
-</head>
-<body>
-<header>
-  <span class="logo">◆</span>
-  <span class="title">claudeflow panel</span>
-  <span class="version" id="version">…</span>
-  <span class="cwd" id="cwd">…</span>
-  <span class="actions">
-    <span class="enforce-pill" id="enforce-pill" title="Master switch — toggles every blocking enforcement hook (freeze-step-contract, enforce-task-creation, stack-debt-guard, ecosystem-artifacts, workflow-enforcement). Validators and reminders are unaffected.">
-      <span class="enforce-label">Enforcement</span>
-      <label class="enforce-switch"><input type="checkbox" id="enforce-toggle" /><span class="enforce-slider"></span></label>
-      <span class="enforce-state" id="enforce-state">…</span>
-    </span>
-    <span class="enforce-pill" id="run-to-completion-pill" title="Soft nudge — when the agent stops mid-build with PLACEHOLDER proofs or untouched files, the next user prompt receives a reminder telling the LLM to resume without re-checkpointing. Independent of the master Enforcement switch.">
-      <span class="enforce-label">Run-to-completion reminder</span>
-      <label class="enforce-switch"><input type="checkbox" id="run-to-completion-toggle" /><span class="enforce-slider"></span></label>
-      <span class="enforce-state" id="run-to-completion-state">…</span>
-    </span>
-    <span class="enforce-pill" id="cwd-lock-pill" title="Hard block — fires on Claude Code CwdChanged event. When the agent runs cd Subdir + cmd and the cwd would persist away from the project root, the change is blocked with a guidance message. Use (cd Subdir + cmd) subshells or absolute paths instead.">
-      <span class="enforce-label">Lock cwd</span>
-      <label class="enforce-switch"><input type="checkbox" id="cwd-lock-toggle" /><span class="enforce-slider"></span></label>
-      <span class="enforce-state" id="cwd-lock-state">…</span>
-    </span>
-    <label class="toggle"><input type="checkbox" id="auto" checked /> auto-refresh 5s</label>
-    <button id="refresh">Refresh</button>
-  </span>
-</header>
-<main>
-  <nav id="nav"></nav>
-  <section id="content"><p class="muted">Loading…</p></section>
-</main>
-<aside id="log-drawer">
-  <div class="drawer-head">
-    <span class="title">Log event details</span>
-    <button id="log-drawer-close">Close ✕</button>
-  </div>
-  <div class="drawer-body" id="log-drawer-body"></div>
-</aside>
-<script>
-const SECTIONS = [
-  { id: 'overview',     label: 'Overview' },
-  { id: 'claudeMd',     label: 'CLAUDE.md' },
-  { id: 'hooks',        label: 'Hooks' },
-  { id: 'reminders',    label: 'Reminders' },
-  { id: 'logs',         label: 'Logs' },
-  { id: 'observer',     label: 'Observer' },
-  { id: 'validators',   label: 'Validators' },
-  { id: 'activePlan',   label: 'Active plan' },
-  { id: 'mcp',          label: 'MCP & observer' },
-  { id: 'setupContext', label: 'Setup context' },
-  { id: 'activeRun',    label: 'Active run' },
-  { id: 'doctor',       label: 'Issues' },
-];
-
-let state = null;
-let active = 'overview';
-let observerFilter = 'all';
-let observerShowResolved = false;
-let validatorsFilter = 'all';
-let validatorsStatusFilter = 'all';
-let validatorsScopeFilter = 'all';
-let timer = null;
-
-// Preserve which <details> were open across re-renders (auto-refresh would
-// otherwise collapse them every 5s).
-function captureOpenDetails() {
-  const ids = new Set();
-  document.querySelectorAll('details[open][data-detail-id]').forEach(d => ids.add(d.dataset.detailId));
-  // Also capture anonymous details by event name (hooks accordion).
-  document.querySelectorAll('details[open][data-event]').forEach(d => ids.add('event:' + d.dataset.event));
-  return ids;
-}
-
-function restoreOpenDetails(ids) {
-  if (!ids.size) return;
-  document.querySelectorAll('details[data-detail-id]').forEach(d => {
-    if (ids.has(d.dataset.detailId)) d.open = true;
-  });
-  document.querySelectorAll('details[data-event]').forEach(d => {
-    if (ids.has('event:' + d.dataset.event)) d.open = true;
-  });
-}
-
-// Cache fetched CLAUDE.md content so re-renders during auto-refresh don't
-// drop the preview the user already loaded.
-let claudeMdCache = null;
-
-async function loadClaudeMdPreview() {
-  const target = document.getElementById('claude-md-preview');
-  if (!target) return;
-  if (target.dataset.loaded === '1') return;
-  target.dataset.loaded = '1';
-  target.textContent = 'Loading…';
-  try {
-    if (!claudeMdCache) {
-      const r = await fetch('/api/claude-md');
-      claudeMdCache = await r.text();
-    }
-    const pre = document.createElement('pre');
-    pre.textContent = claudeMdCache;
-    target.innerHTML = '';
-    target.appendChild(pre);
-  } catch (e) {
-    target.textContent = 'Failed to load: ' + e.message;
-    target.dataset.loaded = '';
-  }
-}
-
-async function refresh() {
-  const open = captureOpenDetails();
-  const prevPlanSha = state && state.activePlan && state.activePlan.sha256;
-  try {
-    const r = await fetch('/api/status');
-    state = await r.json();
-  } catch (e) {
-    showToast && showToast('Refresh failed: ' + e.message, 'err');
-    return;
-  }
-  // Invalidate cached active-plan body if the underlying sha256 changed.
-  const newPlanSha = state && state.activePlan && state.activePlan.sha256;
-  if (newPlanSha !== prevPlanSha) activePlanCache = null;
-  renderHeader();
-  renderNav();
-  renderContent();
-  restoreOpenDetails(open);
-  // If preview was visible/open, ensure it stays loaded after re-render.
-  if (open.has('claude-md-preview')) loadClaudeMdPreview();
-  if (open.has('active-plan-full')) loadActivePlanPreview();
-  // Refresh logs entries silently on the Logs tab so new events appear.
-  if (active === 'logs') loadLogsPage();
-}
-
-function renderHeader() {
-  document.getElementById('version').textContent = 'v' + state.version.installed;
-  document.getElementById('cwd').textContent = state.cwd;
-  const ef = state.enforcement;
-  const pill = document.getElementById('enforce-pill');
-  const cb = document.getElementById('enforce-toggle');
-  const lbl = document.getElementById('enforce-state');
-  if (ef && ef.available) {
-    pill.style.display = '';
-    pill.dataset.state = ef.on ? 'on' : 'off';
-    cb.checked = ef.on;
-    lbl.textContent = ef.on ? 'ON' : 'OFF';
-    pill.title = ef.on
-      ? 'Enforcement is ON — ' + ef.count + ' blocking hook(s) active. Click to disable all.'
-      : 'Enforcement is OFF — ' + ef.count + ' blocking hook(s) silenced. Reminders + validators still run.';
-  } else {
-    pill.style.display = 'none';
-  }
-  const rtc = state.runToCompletion;
-  const rtcPill = document.getElementById('run-to-completion-pill');
-  const rtcCb = document.getElementById('run-to-completion-toggle');
-  const rtcLbl = document.getElementById('run-to-completion-state');
-  if (rtc && rtcPill) {
-    rtcPill.dataset.state = rtc.on ? 'on' : 'off';
-    rtcCb.checked = rtc.on;
-    rtcLbl.textContent = rtc.on ? 'ON' : 'OFF';
-    rtcPill.title = rtc.on
-      ? 'Run-to-completion reminder is ON — every user prompt during an in-progress build step receives a "resume work, do not checkpoint" reminder. The agent can still stop when genuinely blocked.'
-      : 'Run-to-completion reminder is OFF — the agent may pause for user confirmation after partial progress. Click to enable the soft nudge.';
-  } else if (rtcPill) {
-    rtcPill.style.display = 'none';
-  }
-  const lock = state.cwdLock;
-  const lockPill = document.getElementById('cwd-lock-pill');
-  const lockCb = document.getElementById('cwd-lock-toggle');
-  const lockLbl = document.getElementById('cwd-lock-state');
-  if (lock && lockPill) {
-    lockPill.dataset.state = lock.on ? 'on' : 'off';
-    lockCb.checked = lock.on;
-    lockLbl.textContent = lock.on ? 'ON' : 'OFF';
-    lockPill.title = lock.on
-      ? 'Lock cwd is ON — any persistent change of working directory away from the project root is blocked via the CwdChanged hook. Use (cd Subdir + cmd) subshells or absolute paths.'
-      : 'Lock cwd is OFF — the agent can cd into subdirectories and the cwd will persist across tool calls. Click to enforce a single project-root cwd.';
-  } else if (lockPill) {
-    lockPill.style.display = 'none';
-  }
-}
-
-function severityFor(id) {
-  const s = state;
-  switch (id) {
-    case 'overview': return s.doctor.issueCount > 0 ? 'warn' : 'ok';
-    case 'claudeMd': return !s.claudeMd.exists ? 'err' : (s.claudeMd.optOut ? 'info' : 'ok');
-    case 'hooks':    return s.hooks.warnings > 0 ? 'warn' : 'ok';
-    case 'reminders': return s.reminders && s.reminders.disabledCount > 0 ? 'info' : 'ok';
-    case 'activePlan': return s.activePlan && s.activePlan.available ? 'info' : 'info';
-    case 'logs': {
-      if (!s.logs) return 'info';
-      if (s.logs.recentBlockedCount > 0) return 'err';
-      if (s.logs.latestReminderStatus === 'high') return 'err';
-      if (s.logs.latestReminderStatus === 'heavy') return 'warn';
-      return s.logs.total > 0 ? 'ok' : 'info';
-    }
-    case 'mcp': {
-      if (!s.mcp.configFound) return 'info';
-      const playwrightOk = s.mcp.playwright.match && s.mcp.staleLockfiles.length === 0;
-      const observerOk = !s.mcp.playwright.match || (s.mcp.observer && s.mcp.observer.running);
-      return playwrightOk && observerOk ? 'ok' : 'warn';
-    }
-    case 'observer': {
-      if (!s.observer) return 'info';
-      // Daemon down → warn (not err, since the observer is supportive infra).
-      if (!s.observer.daemon || !s.observer.daemon.running) return 'warn';
-      // Any unresolved incidents → warn so the user sees the badge.
-      if (s.observer.totals && s.observer.totals.unresolved > 0) return 'warn';
-      // Any supervised server in unhealthy/exited → warn.
-      if (s.observer.servers && s.observer.servers.some((sr) => sr.status === 'unhealthy' || sr.status === 'exited')) return 'warn';
-      return 'ok';
-    }
-    case 'validators': {
-      if (!s.validators) return 'info';
-      // Compute the CURRENT state per (validator, scope) instead of the
-      // all-time tally. Runs are stored newest-first, so the first
-      // encounter of a given key is the latest run for that combo.
-      // Pre-v2.13.85 we used stats.block > 0, which kept the badge amber
-      // forever once anything had ever blocked — even after the LLM fixed
-      // the underlying bug and subsequent runs passed.
-      const seen = new Set();
-      let currentlyFailing = 0;
-      for (const r of s.validators.runs || []) {
-        const key = (r.validator || '') + '|' + (r.scope || '');
-        if (seen.has(key)) continue;
-        seen.add(key);
-        if (r.status === 'block' || r.status === 'error') currentlyFailing += 1;
-      }
-      if (currentlyFailing > 0) return 'warn';
-      // No failing combos — green. Includes "no runs yet" (cleared history
-      // or hooks haven't fired) which is conceptually a passing state, not
-      // a broken-system state. Pre-v2.13.86 this returned info (gray) when
-      // there were 0 runs, which made an empty Validators look "unknown"
-      // when it really meant "nothing to worry about".
-      return 'ok';
-    }
-    case 'setupContext': return !s.setupContext.exists ? 'err' : (s.setupContext.toolingComplete ? 'ok' : 'warn');
-    case 'activeRun': return s.activeRun.active ? 'info' : 'info';
-    case 'doctor':   return s.doctor.issueCount > 0 ? 'warn' : 'ok';
-  }
-  return 'info';
-}
-
-function renderNav() {
-  const nav = document.getElementById('nav');
-  nav.innerHTML = SECTIONS.map(s => {
-    const sev = severityFor(s.id);
-    const cls = active === s.id ? 'active' : '';
-    return \`<a class="\${cls}" data-id="\${s.id}"><span class="dot \${sev}"></span>\${s.label}</a>\`;
-  }).join('');
-  nav.querySelectorAll('a').forEach(a => a.onclick = () => { active = a.dataset.id; renderNav(); renderContent(); });
-}
-
-function row(k, v, badge) {
-  const b = badge ? \`<span class="badge \${badge.kind}">\${escapeHtml(badge.text)}</span>\` : '';
-  return \`<div class="card-row"><span class="k">\${escapeHtml(k)}</span><span class="v">\${b}\${escapeHtml(v)}</span></div>\`;
-}
-
-// Same as row() but the value is rendered as raw HTML (caller is responsible
-// for escaping). Use for values that already contain HTML markup (e.g. <code>).
-function rowHtml(k, vHtml, badge) {
-  const b = badge ? \`<span class="badge \${badge.kind}">\${escapeHtml(badge.text)}</span>\` : '';
-  return \`<div class="card-row"><span class="k">\${escapeHtml(k)}</span><span class="v">\${b}\${vHtml}</span></div>\`;
-}
-
-function escapeHtml(s) {
-  return String(s == null ? '' : s)
-    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
-function fmtBytes(n) {
-  if (n == null) return '—';
-  if (n < 1024) return n + ' B';
-  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
-  return (n / 1024 / 1024).toFixed(2) + ' MB';
-}
-
-function renderContent() {
-  const el = document.getElementById('content');
-  if (!state) { el.innerHTML = '<p class="muted">Loading…</p>'; return; }
-  const fn = {
-    overview: renderOverview,
-    claudeMd: renderClaudeMd,
-    hooks: renderHooks,
-    reminders: renderReminders,
-    logs: renderLogs,
-    observer: renderObserver,
-    validators: renderValidators,
-    activePlan: renderActivePlan,
-    mcp: renderMcp,
-    setupContext: renderSetup,
-    activeRun: renderRun,
-    doctor: renderDoctor,
-  }[active];
-  el.innerHTML = fn ? fn() : '';
-}
-
-function renderOverview() {
-  const s = state;
-  const cm = s.claudeMd;
-  const cmText = cm.exists
-    ? \`\${fmtBytes(cm.bytes)} / \${cm.lines} lines · block: \${cm.block.present ? cm.block.position : 'absent'}\${cm.optOut ? ' · OPT-OUT' : ''}\`
-    : 'missing';
-  const ap = s.appendPrompt.exists ? fmtBytes(s.appendPrompt.bytes) : 'missing';
-  const hk = \`\${s.hooks.events.length} events · \${s.hooks.totalHandlers} handlers\${s.hooks.warnings ? ' · ' + s.hooks.warnings + ' warnings' : ''}\`;
-  const mc = !s.mcp.configFound ? '(no .mcp.json)' :
-    \`Playwright \${s.mcp.playwright.match ? '✓' : '✗'} \${s.mcp.playwright.configured || '?'} \${s.mcp.playwright.match ? '' : '(expected ' + s.mcp.playwright.computed + ')'} · observer \${s.mcp.observer.running ? 'running pid '+s.mcp.observer.pid : 'stopped'}\`;
-  const sc = !s.setupContext.exists ? 'missing' : (s.setupContext.toolingComplete ? 'complete' : 'incomplete (' + s.setupContext.missingTooling.join(', ') + ')');
-  const ar = s.activeRun.active ? s.activeRun.runId : 'none';
-  const dc = s.doctor.issueCount === 0 ? '0 issues' : s.doctor.issueCount + ' issue(s) — run \`claudeflow doctor\`';
-  const rm = s.reminders && s.reminders.available
-    ? \`\${s.reminders.activeCount} active · \${s.reminders.disabledCount} disabled\`
-    : 'unavailable';
-  const ef = s.enforcement && s.enforcement.available
-    ? (s.enforcement.on ? \`ON (\${s.enforcement.count} blocking hooks)\` : \`OFF — \${s.enforcement.count} blocking hooks silenced\`)
-    : 'unavailable';
-  const activePlanRow = s.activePlan && s.activePlan.available
-    ? \`\${s.activePlan.path || '(inline)'} · approved \${s.activePlan.ageSeconds == null ? 'unknown' : (s.activePlan.ageSeconds < 60 ? s.activePlan.ageSeconds + 's' : Math.floor(s.activePlan.ageSeconds / 60) + 'm')} ago · \${fmtBytes(s.activePlan.contentBytes || 0)}\`
-    : 'none';
-  const reminderTokens = s.logs && s.logs.latestReminderTokens;
-  const reminderStatus = s.logs && s.logs.latestReminderStatus;
-  const lg = s.logs && s.logs.available
-    ? \`\${s.logs.total} captured\${s.logs.mostRecent ? ' · last ' + fmtRelativeTime(s.logs.mostRecent) : ''}\${reminderTokens ? ' · latest reminder ≈' + reminderTokens.toLocaleString() + ' tokens' + (reminderStatus === 'heavy' ? ' ⚠ heavy' : reminderStatus === 'high' ? ' ✗ HIGH' : '') : ''}\`
-    : 'no events';
-  const logsKind = (() => {
-    if (!s.logs || !s.logs.available) return 'info';
-    if (reminderStatus === 'high') return 'err';
-    if (reminderStatus === 'heavy') return 'warn';
-    return s.logs.total > 0 ? 'ok' : 'info';
-  })();
-  return \`<h2>Overview</h2>
-    <p class="sub">Snapshot at \${new Date(s.timestamp).toLocaleTimeString()}</p>
-    <div class="card">
-      \${row('CLAUDE.md', cmText, { kind: cm.exists ? (cm.optOut ? 'info' : 'ok') : 'err', text: cm.exists ? '✓' : '✗' })}
-      \${row('append-system-prompt.md', ap, { kind: s.appendPrompt.exists ? 'ok' : 'err', text: s.appendPrompt.exists ? '✓' : '✗' })}
-      \${row('Hooks', hk, { kind: s.hooks.warnings ? 'warn' : 'ok', text: s.hooks.warnings ? '!' : '✓' })}
-      \${row('MCP & observer', mc, { kind: !s.mcp.configFound ? 'info' : (s.mcp.playwright.match ? 'ok' : 'warn'), text: !s.mcp.configFound ? '·' : (s.mcp.playwright.match ? '✓' : '!') })}
-      \${row('Setup context', sc, { kind: s.setupContext.exists ? (s.setupContext.toolingComplete ? 'ok' : 'warn') : 'err', text: s.setupContext.exists ? (s.setupContext.toolingComplete ? '✓' : '!') : '✗' })}
-      \${row('Active run', ar, { kind: 'info', text: s.activeRun.active ? '·' : '·' })}
-      \${row('Reminders', rm, { kind: s.reminders && s.reminders.available ? (s.reminders.disabledCount ? 'info' : 'ok') : 'err', text: s.reminders && s.reminders.disabledCount ? '·' : '✓' })}
-      \${row('Enforcement', ef, { kind: s.enforcement && s.enforcement.available ? (s.enforcement.on ? 'ok' : 'err') : 'err', text: s.enforcement && s.enforcement.available ? (s.enforcement.on ? '✓' : '✗') : '·' })}
-      \${row('Active plan', activePlanRow, { kind: s.activePlan && s.activePlan.available ? 'info' : 'info', text: '·' })}
-      \${row('Logs', lg, { kind: logsKind, text: logsKind === 'err' ? '✗' : logsKind === 'warn' ? '!' : '·' })}
-      \${row('Doctor', dc, { kind: s.doctor.issueCount === 0 ? 'ok' : 'warn', text: s.doctor.issueCount === 0 ? '✓' : '!' })}
-    </div>\`;
-}
-
-function renderClaudeMd() {
-  const c = state.claudeMd;
-  if (!c.exists) return \`<h2>CLAUDE.md</h2><p class="error">File not found at \${escapeHtml(c.path)}</p>\`;
-  const blk = c.block.present
-    ? \`present at \${c.block.position} (lines \${c.block.lineStart}–\${c.block.lineEnd}, \${fmtBytes(c.block.bytes)})\`
-    : 'absent (no claudeflow:default-rules markers)';
-  return \`<h2>CLAUDE.md</h2>
-    <p class="sub">\${escapeHtml(c.path)}</p>
-    <div class="card">
-      \${row('Size', fmtBytes(c.bytes) + ' / ' + c.lines + ' lines')}
-      \${row('Default rules block', blk, { kind: c.block.present ? 'ok' : 'info', text: c.block.present ? '✓' : '·' })}
-      \${row('Opt-out marker', c.optOut ? 'present (block disabled)' : 'absent', { kind: c.optOut ? 'info' : 'ok', text: c.optOut ? '·' : '✓' })}
-    </div>
-    <details data-detail-id="claude-md-preview"><summary>Preview content</summary><div id="claude-md-preview" class="muted">Click to load…</div></details>
-  \`;
-}
-
-function renderHooks() {
-  const h = state.hooks;
-  if (!h.settingsFound) return '<h2>Hooks</h2><p class="error">.claude/settings.json not found</p>';
-  const items = h.events.map(ev => {
-    const handlers = ev.handlers.map(hd => {
-      const mark = hd.empty ? '<span class="warning">⚠ empty command</span>' : '';
-      const cls = hd.disabled ? 'handler disabled-row' : 'handler';
-      const checked = hd.disabled ? '' : 'checked';
-      const dataset = \`data-event="\${escapeHtml(ev.event)}" data-matcher="\${escapeHtml(hd.matcher)}" data-handler="\${escapeHtml(hd.handler)}"\`;
-      const enforcementBadge = hd.enforcement ? '<span class="badge warn" title="Member of the enforcement catalog — affected by the master switch">enforcement</span>' : '';
-      const masterBadge = hd.disabledBy === 'enforcement-master' ? '<span class="badge err" title="Silenced by the master Enforcement OFF switch in the header">master OFF</span>' : '';
-      const manualBadge = hd.disabledBy === 'manual' ? '<span class="badge info">disabled</span>' : '';
-      const lockedByMaster = hd.disabledBy === 'enforcement-master';
-      return \`<div class="\${cls}">
-        <label class="toggle"><input type="checkbox" class="hook-toggle" \${dataset} \${checked} \${hd.empty || lockedByMaster ? 'disabled' : ''} />
-          <span>\${escapeHtml(hd.handler)} \${enforcementBadge} \${masterBadge} \${manualBadge} \${mark}</span></label>
-        <span class="matcher">\${escapeHtml(hd.matcherDisplay)}</span>
-      </div>\`;
-    }).join('');
-    return \`<details data-event="\${escapeHtml(ev.event)}"><summary>\${escapeHtml(ev.event)} <span class="muted">(\${ev.count})</span></summary>\${handlers}</details>\`;
-  }).join('');
-  return \`<h2>Hooks</h2>
-    <p class="sub">\${h.events.length} events · \${h.activeHandlers} active\${h.disabledHandlers ? ' · <span class="muted">' + h.disabledHandlers + ' disabled</span>' : ''}\${h.warnings ? ' · <span class="warning">' + h.warnings + ' warnings</span>' : ''}</p>
-    <p class="sub muted">Uncheck a handler to disable it. Disabled handlers are recorded in <code>.claudeflow/config/user-hook-overrides.json</code> and survive <code>claudeflow update</code>. Toggling rewrites <code>.claude/settings.json</code> immediately; reload Claude Code to pick up the change.</p>
-    \${items}\`;
-}
-
-function renderReminders() {
-  const r = state.reminders;
-  if (!r || !r.available) return '<h2>Reminders</h2><p class="error">Reminder catalog unavailable (template helper not found).</p>';
-  const slotLabel = { reads: 'Reads / anchors', rules: 'Rules', 'claude-md': 'CLAUDE.md content' };
-  const grouped = {};
-  for (const item of r.reminders) {
-    if (!grouped[item.slot]) grouped[item.slot] = [];
-    grouped[item.slot].push(item);
-  }
-  const sections = Object.entries(grouped).map(([slot, items]) => {
-    const rows = items.map(item => {
-      const checked = item.disabled ? '' : 'checked';
-      const dataset = \`data-id="\${escapeHtml(item.id)}"\`;
-      const status = item.disabled ? '<span class="badge info">disabled</span>' : '';
-      const cls = item.disabled ? 'reminder-row disabled-row' : 'reminder-row';
-      return \`<div class="\${cls}">
-        <label class="toggle"><input type="checkbox" class="reminder-toggle" \${dataset} \${checked} />
-          <span class="reminder-label"><strong>\${escapeHtml(item.label)}</strong> \${status}</span></label>
-        <div class="reminder-desc muted">\${escapeHtml(item.description)}</div>
-        <div class="reminder-id muted">id: <code>\${escapeHtml(item.id)}</code></div>
-      </div>\`;
-    }).join('');
-    return \`<details open><summary>\${escapeHtml(slotLabel[slot] || slot)} <span class="muted">(\${items.length})</span></summary>\${rows}</details>\`;
-  }).join('');
-  return \`<h2>Reminders</h2>
-    <p class="sub">\${r.activeCount} active · \${r.disabledCount} disabled. Toggles are read by <code>reload-reminder.js</code> on every hook invocation — disabling takes effect on the next user prompt without reloading Claude Code.</p>
-    \${sections}\`;
-}
-
-// Logs tab — paginated table backed by /api/logs. Lazy-loaded (we don't
-// inline 500 rows into the initial render). The "View" button fetches
-// the full sidecar from /api/logs/:id and renders it in the drawer.
-let logsState = { entries: [], type: 'all', loading: false, allLoaded: false };
-
-async function loadLogsPage({ append = false } = {}) {
-  const params = new URLSearchParams({ limit: '100', type: logsState.type });
-  if (append && logsState.entries.length > 0) {
-    params.set('before', logsState.entries[logsState.entries.length - 1].id);
-  }
-  logsState.loading = true;
-  try {
-    const r = await fetch('/api/logs?' + params.toString());
-    const j = await r.json();
-    if (append) logsState.entries = logsState.entries.concat(j.entries);
-    else logsState.entries = j.entries;
-    logsState.allLoaded = j.entries.length < 100;
-  } catch (e) {
-    showToast('Logs fetch failed: ' + e.message, 'err');
-  } finally {
-    logsState.loading = false;
-    if (active === 'logs') renderContent();
-  }
-}
-
-async function viewLogDetail(id) {
-  const drawer = document.getElementById('log-drawer');
-  const body = document.getElementById('log-drawer-body');
-  drawer.style.display = 'block';
-  body.innerHTML = '<p class="muted">Loading…</p>';
-  try {
-    const r = await fetch('/api/logs/' + encodeURIComponent(id));
-    if (!r.ok) { body.innerHTML = '<p class="error">Event not found.</p>'; return; }
-    const ev = await r.json();
-    const meta = [
-      ['ID', ev.id],
-      ['Timestamp (UTC)', ev.timestamp],
-      ['Local time', new Date(ev.timestamp).toLocaleString()],
-      ['Type', ev.type],
-      ['Event', ev.event],
-      ['Matcher', ev.matcher || '(any)'],
-      ['Handler', ev.handler],
-    ];
-    let html = '<h3>' + escapeHtml(ev.summary || ev.type) + '</h3>';
-    html += '<div class="card">' + meta.map(([k, v]) => row(k, v)).join('') + '</div>';
-    if (Array.isArray(ev.activeReminderIds)) {
-      html += '<h4 style="margin-top:14px">Active reminders at fire time</h4>';
-      html += '<p class="sub">' + ev.activeReminderIds.map(escapeHtml).join(', ') + '</p>';
-    }
-    // Provenance: did we authentically capture the hook's stdout, or is the
-    // record empty / parsed-failed / truncated? Make this visible at the top
-    // of the drawer so the user can trust (or distrust) the content shown.
-    if (typeof ev.capturedFromStdout === 'boolean') {
-      const provBadge = ev.capturedFromStdout
-        ? '<span class="badge ok" title="Bytes captured directly from the hook&#39;s stdout — this is the actual additionalContext that Claude Code received.">✓ stdout-captured</span>'
-        : (ev.parseError
-            ? '<span class="badge err" title="Hook stdout was captured but JSON.parse failed: ' + escapeHtml(ev.parseError) + '">✗ parse failed</span>'
-            : '<span class="badge warn" title="No content was captured — the hook may have crashed before writing or returned null.">⚠ no stdout</span>');
-      html += '<h4 style="margin-top:14px">Provenance ' + provBadge + (ev.stdoutTruncated ? ' <span class="badge warn">⚠ truncated</span>' : '') + '</h4>';
-    }
-    // Enforcement-blocked detail: show decision + full reason verbatim.
-    if (ev.type === 'enforcement-blocked') {
-      html += '<h4 style="margin-top:14px">Decision: <span class="badge err">' + escapeHtml(ev.decision || 'block').toUpperCase() + '</span></h4>';
-      if (ev.reason) {
-        html += '<h4 style="margin-top:14px">Reason</h4>';
-        html += '<pre style="border-color: rgba(248,81,73,0.5)">' + escapeHtml(ev.reason) + '</pre>';
-      }
-      if (ev.capturedStdout) {
-        html += '<details style="margin-top:14px"><summary>Raw stdout (' + fmtBytes(ev.stdoutBytes || 0) + ')</summary><pre>' + escapeHtml(ev.capturedStdout) + '</pre></details>';
-      }
-    }
-    if (typeof ev.contentBytes === 'number' && ev.contentBytes > 0) {
-      const tokens = typeof ev.contentTokens === 'number' ? ev.contentTokens : Math.round(ev.contentBytes / 4);
-      const th = (state.logs && state.logs.thresholds) || { heavy: 8000, high: 20000 };
-      const cls = tokens >= th.high ? 'high' : tokens >= th.heavy ? 'heavy' : tokens < 2000 ? 'light' : 'normal';
-      const statusBadge = cls === 'high'
-        ? '<span class="token-badge high">⚠ HIGH</span>'
-        : cls === 'heavy'
-        ? '<span class="token-badge heavy">⚠ HEAVY</span>'
-        : '';
-      html += '<h4 style="margin-top:14px">Injected content — ≈' + tokens.toLocaleString() + ' tokens ' + statusBadge + ' <span class="muted" style="font-size:11px">(approx · ' + fmtBytes(ev.contentBytes) + ' raw)</span></h4>';
-      if (cls === 'heavy' || cls === 'high') {
-        const advice = cls === 'high'
-          ? 'This reminder exceeds <strong>' + th.high.toLocaleString() + ' tokens</strong> — eats meaningful context budget. Strongly consider:'
-          : 'This reminder exceeds <strong>' + th.heavy.toLocaleString() + ' tokens</strong> — heavy. Consider:';
-        html += '<div class="card" style="border-color:' + (cls === 'high' ? 'rgba(248,81,73,0.4)' : 'rgba(210,153,34,0.4)') + '"><p>' + advice + '</p>';
-        html += '<ul style="margin:6px 0 0 18px; padding:0">';
-        html += '<li>Trim CLAUDE.md (currently the largest contributor) — see the CLAUDE.md tab</li>';
-        html += '<li>Disable individual reminder IDs you don\\\'t need in the Reminders tab</li>';
-        html += '<li>Tune the threshold via <code>CLAUDEFLOW_TOKEN_HEAVY</code> / <code>CLAUDEFLOW_TOKEN_HIGH</code> env vars if your project genuinely needs more</li>';
-        html += '</ul></div>';
-      }
-    }
-    if (typeof ev.content === 'string' && ev.content.length > 0) {
-      html += '<pre>' + escapeHtml(ev.content) + '</pre>';
-    } else if (ev.type === 'enforcement-silenced') {
-      html += '<p class="muted">No content — the hook was silenced before running.</p>';
-    } else {
-      html += '<p class="muted">No captured content.</p>';
-    }
-    body.innerHTML = html;
-  } catch (e) {
-    body.innerHTML = '<p class="error">Error: ' + escapeHtml(e.message) + '</p>';
-  }
-}
-
-function closeLogDrawer() {
-  document.getElementById('log-drawer').style.display = 'none';
-}
-
-function fmtRelativeTime(iso) {
-  const ms = Date.now() - new Date(iso).getTime();
-  if (ms < 1000) return 'just now';
-  if (ms < 60000) return Math.floor(ms / 1000) + 's ago';
-  if (ms < 3600000) return Math.floor(ms / 60000) + 'm ago';
-  if (ms < 86400000) return Math.floor(ms / 3600000) + 'h ago';
-  return Math.floor(ms / 86400000) + 'd ago';
-}
-
-function fmtLocalTime(iso) {
-  const d = new Date(iso);
-  const pad = (n) => String(n).padStart(2, '0');
-  return \`\${d.getFullYear()}-\${pad(d.getMonth() + 1)}-\${pad(d.getDate())} \${pad(d.getHours())}:\${pad(d.getMinutes())}:\${pad(d.getSeconds())}\`;
-}
-
-function renderLogs() {
-  // Trigger initial load (or filter change reload) on first render.
-  if (logsState.entries.length === 0 && !logsState.loading) {
-    loadLogsPage();
-  }
-  const totalLabel = state.logs && state.logs.total != null ? \`\${state.logs.total} total events\` : '';
-  const thresholds = (state.logs && state.logs.thresholds) || { heavy: 8000, high: 20000 };
-  const rows = logsState.entries.map((e) => {
-    const isReminder = e.type.startsWith('reminder');
-    const isSilenced = e.type === 'enforcement-silenced';
-    const isBlocked  = e.type === 'enforcement-blocked';
-    const badge = isReminder
-      ? '<span class="badge info" style="background:rgba(88,166,255,0.18); color:#58a6ff">REMINDER</span>'
-      : '<span class="badge err">ENFORCEMENT</span>';
-    const statusCell = isSilenced
-      ? '<span class="logs-status silenced" title="Master Enforcement OFF silenced this hook — it did NOT run. Claude Code received no output for this event.">✗ SILENCED</span>'
-      : isBlocked
-      ? '<span class="logs-status blocked" title="Hook ran and BLOCKED this action. Claude Code rejected the tool call. Click View for the full reason.">⛔ BLOCKED</span>'
-      : '<span class="logs-status injected" title="Hook ran and emitted additionalContext to Claude Code">✓ injected</span>';
-    const tokenStatus = e.tokenStatus || 'none';
-    const tokenBadge = tokenStatus === 'high'
-      ? '<span class="token-badge high" title="High — exceeds the high-water threshold (' + thresholds.high.toLocaleString() + ' tokens). Consider trimming.">⚠ HIGH</span>'
-      : tokenStatus === 'heavy'
-      ? '<span class="token-badge heavy" title="Heavy — exceeds the heavy threshold (' + thresholds.heavy.toLocaleString() + ' tokens). Consider trimming.">⚠ HEAVY</span>'
-      : '';
-    const tokensStr = e.contentTokens
-      ? \`≈\${e.contentTokens.toLocaleString()}\`
-      : '—';
-    const bytesStr = e.contentBytes ? fmtBytes(e.contentBytes) : '';
-    const tokensTitle = e.contentBytes
-      ? \`≈\${e.contentTokens} tokens (chars/4 heuristic) · \${fmtBytes(e.contentBytes)} raw · status: \${tokenStatus}\`
-      : isBlocked
-        ? 'Hook BLOCKED the action. Click View for full reason.'
-        : 'No content (hook was silenced — never ran)';
-    const rowCls = \`token-\${tokenStatus}\${isSilenced ? ' silenced' : ''}\${isBlocked ? ' blocked' : ''}\`;
-    const reasonPreview = isBlocked && e.reason
-      ? \`<div class="logs-reason-preview" title="\${escapeHtml(e.reason)}">\${escapeHtml(e.reason.split('\\n')[0].slice(0, 120))}</div>\`
-      : '';
-    return \`<tr class="\${rowCls}">
-      <td class="logs-time"><span title="\${escapeHtml(e.timestamp)}">\${escapeHtml(fmtLocalTime(e.timestamp))}</span><br><span class="muted" style="font-size:11px">\${fmtRelativeTime(e.timestamp)}</span></td>
-      <td>\${badge}</td>
-      <td>\${statusCell}</td>
-      <td class="logs-handler"><span class="muted">\${escapeHtml(e.event)}</span><br>\${escapeHtml(e.handler)}\${e.matcher ? \` <span class="muted">(\${escapeHtml(e.matcher)})</span>\` : ''}\${reasonPreview}</td>
-      <td class="logs-size" title="\${escapeHtml(tokensTitle)}">\${tokensStr}\${tokenBadge}\${bytesStr ? \`<br><span class="muted" style="font-size:11px">\${bytesStr}</span>\` : ''}</td>
-      <td><button class="logs-view" data-log-id="\${escapeHtml(e.id)}">View</button></td>
-    </tr>\`;
-  }).join('');
-  const empty = logsState.entries.length === 0
-    ? '<p class="muted" style="padding:24px 0">No events captured yet. Open a Claude Code session, send a prompt — reminders + any silenced enforcement hooks will appear here.</p>'
-    : '';
-  return \`<h2>Logs</h2>
-    <p class="sub">Real-time trace of every reminder injection and enforcement-silenced hook. \${totalLabel} · sidecars in <code>.claude/tmp/log-events/</code> (capped at 2000, oldest evicted).</p>
-    <p class="sub muted" style="font-size:11px">
-      Token-budget thresholds: <strong style="color:var(--warn)">heavy ≥\${thresholds.heavy.toLocaleString()}</strong> · <strong style="color:var(--err)">high ≥\${thresholds.high.toLocaleString()}</strong>.
-      Heuristic — Anthropic doesn't publish official limits for per-turn additionalContext.
-      Override via <code>CLAUDEFLOW_TOKEN_HEAVY</code> / <code>CLAUDEFLOW_TOKEN_HIGH</code> env vars.
-    </p>
-    <div class="logs-controls">
-      <label>Filter:
-        <select id="logs-filter">
-          <option value="all" \${logsState.type === 'all' ? 'selected' : ''}>All</option>
-          <option value="reminder" \${logsState.type === 'reminder' ? 'selected' : ''}>Reminders only</option>
-          <option value="enforcement" \${logsState.type === 'enforcement' ? 'selected' : ''}>Enforcement (silenced + blocked)</option>
-          <option value="blocked" \${logsState.type === 'blocked' ? 'selected' : ''}>Blocked actions only</option>
-        </select>
-      </label>
-      <button id="logs-reload">Reload</button>
-      <button id="logs-clear" class="logs-clear-btn" \${state.logs && state.logs.total ? '' : 'disabled'} title="Delete every sidecar in .claude/tmp/log-events/ and truncate .claude/tmp/hooks.log. Cannot be undone.">Clear all</button>
-    </div>
-    \${empty || \`<table class="logs-table">
-      <thead><tr><th>Time</th><th>Type</th><th title="Did the hook actually run? ✓ injected = hook ran and emitted to Claude Code · ✗ SILENCED = master Enforcement OFF blocked the hook from running.">Status</th><th>Handler</th><th title="Approximate token count (chars/4 heuristic, ±10–15% vs Claude's real tokenizer). Heavy ≥\${thresholds.heavy.toLocaleString()} → yellow border. High ≥\${thresholds.high.toLocaleString()} → red border. Anthropic does not publish official thresholds for per-turn additionalContext.">≈ Tokens</th><th></th></tr></thead>
-      <tbody>\${rows}</tbody>
-    </table>\`}
-    \${logsState.allLoaded || logsState.entries.length === 0 ? '' : '<div style="margin-top:12px"><button id="logs-load-more">Load older</button></div>'}\`;
-}
-
-function renderActivePlan() {
-  const p = state.activePlan;
-  if (!p || !p.available) {
-    return \`<h2>Active plan</h2>
-      <p class="sub">No approved plan on disk. <code>.claudeflow/state/active-plan.json</code> doesn't exist.</p>
-      <p class="muted" style="font-size:12px">When you approve a plan via ExitPlanMode in Claude Code, the
-      <code>capture-approved-plan</code> hook will persist it here. The next time you run
-      <code>claudeflow-build</code>, phase-0 will prompt to use it as the source of truth.</p>\`;
-  }
-  const age = p.ageSeconds == null
-    ? 'unknown age'
-    : p.ageSeconds < 60 ? p.ageSeconds + 's ago'
-    : p.ageSeconds < 3600 ? Math.floor(p.ageSeconds / 60) + 'm ago'
-    : p.ageSeconds < 86400 ? Math.floor(p.ageSeconds / 3600) + 'h ago'
-    : Math.floor(p.ageSeconds / 86400) + 'd ago';
-  const sha = p.sha256 ? p.sha256.slice(0, 12) + '…' : '(none)';
-  const preview = escapeHtml(p.summaryPreview || '(empty)');
-  return \`<h2>Active plan</h2>
-    <p class="sub">Read-only view of the latest approved plan persisted by the <code>ExitPlanMode</code> hook. The terminal prompt in <code>claudeflow-build</code> phase-0 is the only place you can ACT on this — the panel is informational.</p>
-    <div class="card">
-      \${row('Path',         p.path || '(inline plan, no file path)')}
-      \${row('Source',       p.source || 'unknown')}
-      \${row('Approved',     age + ' · ' + (p.capturedAt || 'unknown timestamp'))}
-      \${row('Session id',   p.sessionId || '(unknown)')}
-      \${row('Sha256',       sha)}
-      \${row('Size',         fmtBytes(p.contentBytes || 0))}
-    </div>
-    <p class="sub" style="margin-top:14px">Preview</p>
-    <pre style="max-height:120px">\${preview}</pre>
-    <details data-detail-id="active-plan-full"><summary>Full plan content</summary><div id="active-plan-body" class="muted">Click to load…</div></details>\`;
-}
-
-function renderObserver() {
-  const o = state.observer;
-  if (!o) return '<h2>Observer</h2><p class="muted">No observer info available.</p>';
-  const daemonAlive = o.daemon && o.daemon.running;
-  const statusBadge = daemonAlive
-    ? \`<span class="badge ok">✓ running</span> <span class="muted">pid \${o.daemon.pid} • port \${o.daemon.port} • detected via \${o.daemon.source}</span>\`
-    : \`<span class="badge warn">⚠ stopped</span> <span class="muted">no listener detected</span>\`;
-  const restartBtn = !daemonAlive
-    ? '<button id="restart-observer" class="btn-warn" style="margin-left:14px;">Restart observer</button>'
-    : '';
-  const totals = o.totals || { unresolved: 0, browser: 0, server: 0 };
-  const totalsBadge = totals.unresolved > 0
-    ? \`<span class="badge warn">\${totals.unresolved} unresolved</span> <span class="muted">(browser: \${totals.browser}, server: \${totals.server})</span>\`
-    : '<span class="badge ok">✓ no unresolved incidents</span>';
-  const summaryStatus = o.summary_status ? \`<span class="muted">summary status: <code>\${escapeHtml(o.summary_status)}</code></span>\` : '';
-
-  // Servers table
-  const serversTable = o.servers.length === 0
-    ? '<p class="muted">No servers configured in setup-context.json.servers.</p>'
-    : '<table class="kv-table" style="width:100%;border-collapse:collapse;font-size:13px;">' +
-      '<thead><tr><th style="text-align:left;padding:6px 8px;">Label</th><th style="text-align:left;padding:6px 8px;">Port</th><th style="text-align:left;padding:6px 8px;">Status</th><th style="text-align:left;padding:6px 8px;">Health</th><th style="text-align:left;padding:6px 8px;">Last ready</th><th style="text-align:left;padding:6px 8px;">Last issue</th></tr></thead>' +
-      '<tbody>' +
-      o.servers.map((srv) => {
-        const statusColor = srv.status === 'running' || srv.status === 'external' ? 'ok' : (srv.status === 'unhealthy' || srv.status === 'exited' ? 'err' : 'info');
-        const healthIcon = srv.health_ok ? '<span class="badge ok">✓</span>' : '<span class="badge err">✗</span>';
-        const exitInfo = srv.last_exit_code !== null && srv.last_exit_code !== undefined
-          ? \` <span class="muted">(exit \${srv.last_exit_code}\${srv.last_exit_signal ? '/' + srv.last_exit_signal : ''})</span>\`
-          : '';
-        return \`<tr style="border-top:1px solid var(--border);">
-          <td style="padding:6px 8px;"><strong>\${escapeHtml(srv.label)}</strong></td>
-          <td style="padding:6px 8px;"><code>\${srv.port || '?'}</code></td>
-          <td style="padding:6px 8px;"><span class="badge \${statusColor}">\${escapeHtml(srv.status)}</span>\${exitInfo}</td>
-          <td style="padding:6px 8px;">\${healthIcon}</td>
-          <td style="padding:6px 8px;" class="muted">\${escapeHtml(formatRelativeTime(srv.last_ready_at))}</td>
-          <td style="padding:6px 8px;" class="muted">\${escapeHtml(formatRelativeTime(srv.last_issue_at))}</td>
-        </tr>\`;
-      }).join('') +
-      '</tbody></table>';
-
-  // Browser section
-  const browserBlock = o.browser && o.browser.last_snapshot_at
-    ? \`<div class="card" style="padding:10px 14px;font-size:13px;">
-        \${rowHtml('Latest URL', o.browser.latest_url ? '<code>' + escapeHtml(o.browser.latest_url) + '</code>' : '<span class="muted">none</span>')}
-        \${rowHtml('Latest route', o.browser.latest_route ? '<code>' + escapeHtml(o.browser.latest_route) + '</code>' : '<span class="muted">none</span>')}
-        \${rowHtml('Snapshots received', String(o.browser.snapshots_received))}
-        \${rowHtml('Last snapshot', escapeHtml(formatRelativeTime(o.browser.last_snapshot_at)))}
-      </div>\`
-    : '<p class="muted">No browser snapshots received yet. (The observer collects when the agent navigates with mcp__claude-in-chrome__*.)</p>';
-
-  // Active vs resolved toggle (client-side state observerShowResolved).
-  // After "Clear observer state", all active incidents are marked resolved;
-  // by default the UI shows only active. Toggle the pill to see history.
-  const showResolved = (typeof observerShowResolved !== 'undefined') && observerShowResolved;
-  const sourceList = showResolved ? o.resolved_incidents : o.active_incidents;
-
-  // Build the filter index ON THE CURRENT VIEW (active or resolved).
-  const serverByOrigin = {};
-  o.servers.forEach((srv) => {
-    if (srv.port) serverByOrigin[\`localhost:\${srv.port}\`] = srv.label;
-    if (srv.port) serverByOrigin[\`127.0.0.1:\${srv.port}\`] = srv.label;
-  });
-  function incidentBucket(inc) {
-    if (inc.source === 'server') {
-      return (inc.metadata && inc.metadata.label) || inc.surface || 'server-unknown';
-    }
-    if (inc.source === 'browser') {
-      const url = (inc.metadata && (inc.metadata.url || inc.metadata.origin)) || '';
-      const m = url.match(/^https?:\\/\\/([^/]+)/);
-      if (m && serverByOrigin[m[1]]) return serverByOrigin[m[1]];
-      return 'browser-other';
-    }
-    return inc.source || 'other';
-  }
-  const buckets = {};
-  sourceList.forEach((inc) => {
-    const b = incidentBucket(inc);
-    if (!buckets[b]) buckets[b] = [];
-    buckets[b].push(inc);
-  });
-  const surfacesInUse = Object.keys(buckets).sort();
-  // Apply observerFilter client-side state. Default 'all' (no filter).
-  const filteredIncidents = (typeof observerFilter === 'undefined' || observerFilter === 'all')
-    ? sourceList
-    : (buckets[observerFilter] || []);
-
-  const filterPill = (label, value, count) => {
-    const active = (typeof observerFilter === 'undefined' && value === 'all') || observerFilter === value;
-    const cls = active ? 'observer-filter active' : 'observer-filter';
-    return \`<button class="\${cls}" data-observer-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
-  };
-  // Show resolved toggle pill — separate from surface filters.
-  const showResolvedClass = showResolved ? 'observer-filter active' : 'observer-filter';
-  const showResolvedPill = \`<button class="\${showResolvedClass}" data-observer-show-resolved="toggle" style="margin-left:auto;">\${showResolved ? 'Showing resolved' : 'Show resolved'}<span class="muted" style="margin-left:6px;font-size:11px;">\${o.resolved_incidents.length}</span></button>\`;
-  const filterPills = '<div class="observer-filters" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0;">' +
-    filterPill('All', 'all', sourceList.length) +
-    surfacesInUse.map((surface) => filterPill(surface, surface, buckets[surface].length)).join('') +
-    showResolvedPill +
-    '</div>';
-
-  // Match file:line patterns in stack traces (most common formats):
-  //   http://localhost:3001/src/foo.tsx:51:22
-  //   /Users/abs/path.ts:42
-  //   at SomeFn (path:line:col)
-  function extractFileLineHints(text) {
-    if (typeof text !== 'string') return [];
-    const hints = new Set();
-    // localhost source URLs (Vite/CRA dev server)
-    const localRe = /https?:\\/\\/localhost(?::\\d+)?\\/([^\\s:]+?\\.(?:tsx?|jsx?|vue|svelte)):(\\d+)(?::(\\d+))?/g;
-    let m;
-    while ((m = localRe.exec(text)) !== null) {
-      hints.add(\`\${m[1]}:\${m[2]}\${m[3] ? ':' + m[3] : ''}\`);
-      if (hints.size >= 6) break;
-    }
-    // Bare absolute paths
-    const absRe = /\\b(\\/[A-Za-z0-9_./-]+?\\.(?:tsx?|jsx?|vue|svelte)):(\\d+)(?::(\\d+))?/g;
-    while ((m = absRe.exec(text)) !== null) {
-      hints.add(\`\${m[1]}:\${m[2]}\${m[3] ? ':' + m[3] : ''}\`);
-      if (hints.size >= 6) break;
-    }
-    return [...hints];
-  }
-
-  // Server-side detail (recent_log + exit info) lookup per surface label.
-  const serverByLabel = {};
-  o.servers.forEach((srv) => { serverByLabel[srv.label] = srv; });
-
-  // Incidents feed
-  const incidentsBlock = filteredIncidents.length === 0
-    ? '<p class="muted">No incidents in this filter.</p>'
-    : '<div class="incidents-feed">' +
-      filteredIncidents.map((inc) => {
-        const sevClass = inc.severity === 'error' || inc.severity === 'critical' ? 'err' : (inc.severity === 'warning' ? 'warn' : 'info');
-        const resolvedBadge = inc.resolved_at
-          ? '<span class="badge ok" style="margin-left:6px;">resolved</span>'
-          : '<span class="badge warn" style="margin-left:6px;">active</span>';
-        const surfaceLabel = inc.source === 'server' && inc.metadata && inc.metadata.label
-          ? inc.metadata.label
-          : inc.surface || inc.source;
-        const fullMsg = inc.message || '';
-        const fileLineHints = extractFileLineHints(fullMsg);
-        // Show first 240 chars by default, collapsible to full message.
-        const PREVIEW_CHARS = 240;
-        const isLong = fullMsg.length > PREVIEW_CHARS;
-        const previewMsg = isLong ? fullMsg.slice(0, PREVIEW_CHARS) + '…' : fullMsg;
-        const fullBlock = isLong
-          ? '<details style="margin-top:4px;"><summary style="cursor:pointer;color:var(--muted);font-size:11px;">Show full message + stack (' + fullMsg.length + ' chars)</summary><pre style="font-size:11px;white-space:pre-wrap;background:var(--panel-2);padding:8px;border-radius:4px;margin:4px 0 0 0;overflow:auto;max-height:400px;">' + escapeHtml(fullMsg) + '</pre></details>'
-          : '';
-        const fileLinesHtml = fileLineHints.length > 0
-          ? '<div class="muted" style="font-size:11px;margin-top:4px;">📄 ' + fileLineHints.map((f) => '<code>' + escapeHtml(f) + '</code>').join(' • ') + '</div>'
-          : '';
-        const urlLine = inc.metadata && inc.metadata.url
-          ? '<div class="muted" style="font-size:11px;margin-top:4px;">🌐 <code>' + escapeHtml(inc.metadata.url) + '</code>' + (inc.metadata.route && inc.metadata.route !== inc.metadata.url ? ' (' + escapeHtml(inc.metadata.route) + ')' : '') + '</div>'
-          : '';
-        // For server incidents, attach recent_log + exit info from the matching server record.
-        let serverDetail = '';
-        if (inc.source === 'server') {
-          const srv = serverByLabel[surfaceLabel];
-          if (srv) {
-            const exitInfo = srv.last_exit_code !== null && srv.last_exit_code !== undefined
-              ? \`<div class="muted" style="font-size:11px;margin-top:4px;">🛑 last exit: code \${srv.last_exit_code}\${srv.last_exit_signal ? ' / signal ' + srv.last_exit_signal : ''} at \${escapeHtml(formatRelativeTime(srv.last_exit_at))}</div>\`
-              : '';
-            const logLines = Array.isArray(srv.recent_log) ? srv.recent_log : [];
-            const logBlock = logLines.length > 0
-              ? '<details style="margin-top:4px;"><summary style="cursor:pointer;color:var(--muted);font-size:11px;">📋 recent_log (' + logLines.length + ' lines from daemon-supervised stdout/stderr)</summary><pre style="font-size:11px;white-space:pre-wrap;background:var(--panel-2);padding:8px;border-radius:4px;margin:4px 0 0 0;overflow:auto;max-height:300px;">' + logLines.slice(-50).map((l) => escapeHtml(typeof l === 'string' ? l : (l.line || JSON.stringify(l)))).join('\\n') + '</pre></details>'
-              : '<div class="muted" style="font-size:11px;margin-top:4px;">📋 No recent_log captured (server is observed_external — daemon only port-probes it, doesn\\'t pipe stdout/stderr). Run the server under the daemon supervisor to capture log lines, or check the dev server\\'s own terminal output.</div>';
-            serverDetail = exitInfo + logBlock;
-          }
-        }
-        return \`<div class="incident-row" style="padding:10px 14px;border-top:1px solid var(--border);">
-          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;">
-            <span class="badge \${sevClass}">\${escapeHtml(inc.severity || 'info')}</span>
-            <span class="muted">\${escapeHtml(inc.source || 'unknown')}</span>
-            <span class="muted">→</span>
-            <strong>\${escapeHtml(surfaceLabel)}</strong>
-            <span class="muted">\${escapeHtml(inc.type || '')}</span>
-            \${resolvedBadge}
-            <span class="muted" style="margin-left:auto;font-size:11px;">\${escapeHtml(formatRelativeTime(inc.last_seen_at))}</span>
-          </div>
-          <div style="font-size:12px;white-space:pre-wrap;">\${escapeHtml(previewMsg)}</div>
-          \${fullBlock}
-          \${fileLinesHtml}
-          \${urlLine}
-          \${serverDetail}
-        </div>\`;
-      }).join('') +
-      '</div>';
-
-  // Clear button — only meaningful when the daemon is running AND there's
-  // either at least one unresolved incident or some browser snapshots to wipe.
-  const clearable = daemonAlive && (totals.unresolved > 0 || (o.browser && o.browser.snapshots_received > 0) || o.recent_incidents.length > 0);
-  const clearBtn = clearable
-    ? '<button id="clear-observer" class="logs-clear-btn" style="margin-left:14px;" title="Resolves all active incidents, clears per-server recent_log buffers, and resets browser snapshot counter. The state file keeps incident history (marked resolved). Future events repopulate as usual.">Clear observer state</button>'
-    : '';
-
-  return \`<h2>Observer</h2>
-    <p class="sub">Daemon: \${statusBadge}\${restartBtn}\${clearBtn}</p>
-    <p class="sub">Incidents: \${totalsBadge}  \${summaryStatus}</p>
-    <h3 style="margin-top:18px;font-size:14px;">Servers (\${o.servers.length})</h3>
-    <div class="card" style="padding:0;">\${serversTable}</div>
-    <h3 style="margin-top:18px;font-size:14px;">Browser channel</h3>
-    \${browserBlock}
-    <h3 style="margin-top:18px;font-size:14px;">\${showResolved ? 'Resolved incidents (' + o.resolved_incidents.length + ')' : 'Active incidents (' + o.active_incidents.length + ')'}</h3>
-    \${filterPills}
-    <div class="card" style="padding:0;">\${incidentsBlock}</div>\`;
-}
-
-function renderValidators() {
-  const v = (state && state.validators) || { available: false, runs: [], stats: { total: 0, pass: 0, block: 0, skip: 0, error: 0 } };
-  if (!v.available || v.runs.length === 0) {
-    return \`<h2>Validators</h2><p class="muted">No validator runs recorded yet. The security-scan and validate-file hooks log here on every Stop / SubagentStop / TaskCompleted event.</p>\`;
-  }
-
-  const validators = [...new Set(v.runs.map((r) => r.validator))].sort();
-  const scopes = [...new Set(v.runs.map((r) => r.scope))].sort();
-  // Reuse the observer-filter CSS class so the Validators tab matches
-  // the visual language of the Observer tab. Pre-v2.13.80 the pills used
-  // a non-existent pill class, falling back to default browser button
-  // styling — light buttons on dark background.
-  const validatorPill = (label, value, count) => {
-    const a = (validatorsFilter === value);
-    const cls = a ? 'observer-filter active' : 'observer-filter';
-    return \`<button class="\${cls}" data-validators-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
-  };
-  const statusPill = (label, value, count) => {
-    const a = (validatorsStatusFilter === value);
-    const cls = a ? 'observer-filter active' : 'observer-filter';
-    return \`<button class="\${cls}" data-validators-status-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
-  };
-  const scopePill = (label, value, count) => {
-    const a = (validatorsScopeFilter === value);
-    const cls = a ? 'observer-filter active' : 'observer-filter';
-    return \`<button class="\${cls}" data-validators-scope-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
-  };
-
-  const filteredByValidator = validatorsFilter === 'all'
-    ? v.runs
-    : v.runs.filter((r) => r.validator === validatorsFilter);
-  const filteredByScope = validatorsScopeFilter === 'all'
-    ? filteredByValidator
-    : filteredByValidator.filter((r) => r.scope === validatorsScopeFilter);
-  const filtered = validatorsStatusFilter === 'all'
-    ? filteredByScope
-    : filteredByScope.filter((r) => r.status === validatorsStatusFilter);
-
-  const STATUS_BADGE = {
-    pass:  '<span style="color:#3fb950;font-weight:600;">pass</span>',
-    block: '<span style="color:#f85149;font-weight:600;">block</span>',
-    skip:  '<span class="muted">skip</span>',
-    error: '<span style="color:#d29922;font-weight:600;">error</span>',
-  };
-
-  const runRows = filtered.map((r) => {
-    const when = formatRelativeTime(r.finished_at || r.started_at);
-    const dur = (r.duration_ms && r.duration_ms > 0) ? \` · \${r.duration_ms}ms\` : '';
-    const status = STATUS_BADGE[r.status] || escapeHtml(r.status);
-    const findingsLine = (r.findings && r.findings.length > 0)
-      ? \`<details style="margin-top:6px;"><summary class="muted" style="cursor:pointer;font-size:11px;">\${r.findings_count} finding(s) — show</summary><pre style="margin:6px 0 0 0;font-size:11px;white-space:pre-wrap;">\${escapeHtml(JSON.stringify(r.findings, null, 2))}</pre></details>\`
-      : '';
-    return \`<div style="border-bottom:1px solid var(--border);padding:10px 12px;">
-      <div style="display:flex;justify-content:space-between;gap:12px;">
-        <div><strong>\${escapeHtml(r.validator)}</strong> <span class="muted">→</span> \${escapeHtml(r.scope)} <span class="muted" style="margin-left:8px;font-size:11px;">\${escapeHtml(r.hook_event || '')}</span></div>
-        <div style="font-size:12px;">\${status} <span class="muted">· \${when}\${dur}</span></div>
-      </div>
-      <div class="muted" style="font-size:12px;margin-top:4px;">\${escapeHtml(r.reason || '')}</div>
-      \${findingsLine}
-    </div>\`;
-  }).join('');
-
-  const validatorPills = [validatorPill('all', 'all', v.runs.length), ...validators.map((vname) =>
-    validatorPill(vname, vname, v.runs.filter((r) => r.validator === vname).length)
-  )].join(' ');
-
-  const scopePills = [scopePill('all', 'all', v.runs.length), ...scopes.map((s) =>
-    scopePill(s, s, v.runs.filter((r) => r.scope === s).length)
-  )].join(' ');
-
-  const statusPills = ['all', 'pass', 'block', 'skip', 'error'].map((s) =>
-    statusPill(s, s, s === 'all' ? v.runs.length : v.runs.filter((r) => r.status === s).length)
-  ).join(' ');
-
-  // Clear button label changes when a scope filter is active so the user
-  // sees the action they're about to take. "Clear (Admin-Office)" is
-  // unambiguous; "Clear history" wiped everything pre-v2.13.78.
-  const clearLabel = validatorsScopeFilter === 'all'
-    ? 'Clear all history'
-    : \`Clear "\${escapeHtml(validatorsScopeFilter)}" history\`;
-
-  const filterRow = (label, pillsHtml) => \`<div style="display:flex;align-items:center;gap:10px;margin:6px 0;flex-wrap:wrap;">
-    <span class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:0.5px;min-width:74px;">\${label}</span>
-    <div style="display:flex;gap:6px;flex-wrap:wrap;">\${pillsHtml}</div>
-  </div>\`;
-
-  // Compute "current state" per (validator, scope) — newest run wins, so
-  // the user sees what's failing RIGHT NOW vs what once failed and has
-  // since been fixed. The historical totals remain available below.
-  const currentBy = new Map();
-  for (const r of v.runs) {
-    const key = r.validator + '|' + r.scope;
-    if (!currentBy.has(key)) currentBy.set(key, r);
-  }
-  const currentRuns = [...currentBy.values()];
-  const currentFailing = currentRuns.filter((r) => r.status === 'block' || r.status === 'error');
-  const currentStateLine = currentFailing.length === 0
-    ? \`<span style="color:var(--ok,#3fb950);">✓ All \${currentRuns.length} (validator, scope) combo(s) currently passing</span>\`
-    : \`<span style="color:var(--err,#f85149);">✗ \${currentFailing.length} of \${currentRuns.length} (validator, scope) combo(s) currently failing:</span> \${currentFailing.map((r) => escapeHtml(r.validator + ' @ ' + r.scope)).join(', ')}\`;
-
-  return \`<h2>Validators
-    <button id="clear-validators" class="logs-clear-btn" style="float:right;" data-scope="\${escapeHtml(validatorsScopeFilter)}">\${clearLabel}</button>
-  </h2>
-  <p style="margin-top:0;">\${currentStateLine}</p>
-  <p class="muted" style="margin-top:4px;font-size:12px;">History: last updated \${formatRelativeTime(v.updated_at)} · \${v.stats.total} total run(s): \${v.stats.pass} pass, \${v.stats.block} block, \${v.stats.skip} skip, \${v.stats.error} error.</p>
-  <div class="card" style="padding:10px 14px;margin:12px 0;">
-    \${filterRow('Validator', validatorPills)}
-    \${filterRow('Scope', scopePills)}
-    \${filterRow('Status', statusPills)}
-  </div>
-  <div class="card" style="padding:0;">\${runRows || '<p class="muted" style="padding:12px;">No runs match the current filter.</p>'}</div>\`;
-}
-
-function formatRelativeTime(iso) {
-  if (!iso) return 'never';
-  try {
-    const t = new Date(iso).getTime();
-    if (Number.isNaN(t)) return 'unknown';
-    const diff = Date.now() - t;
-    if (diff < 0) return 'in the future';
-    if (diff < 60_000) return Math.floor(diff / 1000) + 's ago';
-    if (diff < 3_600_000) return Math.floor(diff / 60_000) + 'm ago';
-    if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + 'h ago';
-    return Math.floor(diff / 86_400_000) + 'd ago';
-  } catch { return 'unknown'; }
-}
-
-function renderMcp() {
-  const m = state.mcp;
-  if (!m.configFound) return '<h2>MCP & observer</h2><p class="muted">.mcp.json not found</p>';
-  const lockfiles = m.staleLockfiles.length === 0
-    ? '<p class="muted">No stale lockfiles.</p>'
-    : '<ul>' + m.staleLockfiles.map(l => \`<li>\${escapeHtml(l.file)} (\${escapeHtml(l.reason)}\${l.pid ? ', pid='+l.pid : ''})</li>\`).join('') + '</ul>';
-  return \`<h2>MCP & observer</h2>
-    <p class="sub">Servers: \${m.servers.map(escapeHtml).join(', ') || 'none'}</p>
-    <div class="card">
-      \${row('Playwright --cdp-endpoint port', String(m.playwright.configured || 'n/a'))}
-      \${row('Computed port (from path)', String(m.playwright.computed))}
-      \${row('Match', m.playwright.match ? 'YES' : 'NO', { kind: m.playwright.match ? 'ok' : 'err', text: m.playwright.match ? '✓' : '✗' })}
-      \${m.playwright.fixable ? '<div style="padding:10px 14px;border-top:1px solid var(--border);"><button id="fix-cdp-port" class="btn-warn">Fix CDP port</button> <span class="muted" style="margin-left:10px;font-size:12px;">Rewrites .mcp.json --cdp-endpoint to localhost:'+m.playwright.computed+' (the port this machine derives from the cwd).</span></div>' : ''}
-      \${row('Observer', m.observer.running ? 'running (pid '+m.observer.pid+')' : 'STOPPED — browser errors NOT being collected', { kind: m.observer.running ? 'ok' : (m.playwright.match ? 'warn' : 'info'), text: m.observer.running ? '✓' : (m.playwright.match ? '⚠' : '·') })}
-      \${!m.observer.running && m.playwright.match ? '<div style="padding:10px 14px;border-top:1px solid var(--border);"><button id="restart-observer" class="btn-warn">Restart observer</button> <span class="muted" style="margin-left:10px;font-size:12px;">Re-runs SessionStart/browser-error-daemon.js — spawns Chrome with --cdp-endpoint and registers the daemon pidfile.</span></div>' : ''}
-    </div>
-    <h2 style="margin-top:18px">Stale lockfiles</h2>
-    \${lockfiles}\`;
-}
-
-function renderSetup() {
-  const s = state.setupContext;
-  if (!s.exists) return '<h2>Setup context</h2><p class="error">setup-context.json not found</p>';
-  const sel = s.selections ? '<pre>' + escapeHtml(JSON.stringify(s.selections, null, 2)) + '</pre>' : '<p class="muted">No selections.</p>';
-  const tooling = '<pre>' + escapeHtml(JSON.stringify(s.testTooling, null, 2)) + '</pre>';
-  const missing = s.missingTooling.length ? '<p class="warning">Missing types: ' + s.missingTooling.map(escapeHtml).join(', ') + '</p>' : '<p class="success">All canonical tooling types defined.</p>';
-  return \`<h2>Setup context</h2>
-    <p class="sub">\${escapeHtml(s.path)}</p>
-    <h3>selections</h3>\${sel}
-    <h3>test_tooling</h3>\${missing}\${tooling}\`;
-}
-
-function renderRun() {
-  const r = state.activeRun;
-  if (!r.active) return '<h2>Active run</h2><p class="muted">No active build run.</p>';
-  return \`<h2>Active run</h2>
-    <div class="card">
-      \${row('Run ID', r.runId)}
-      \${row('Kind', r.kind || '—')}
-      \${row('Top-level subject', (r.topLevel && r.topLevel.subject) || '—')}
-      \${row('Tasks tracked', String(r.taskCount))}
-    </div>\`;
-}
-
-function renderDoctor() {
-  const d = state.doctor;
-  return \`<h2>Issues</h2>
-    <p class="sub">\${d.issueCount === 0 ? 'No issues detected.' : d.issueCount + ' issue(s) detected. Run <code>claudeflow doctor --fix</code> to repair.'}</p>
-    <div class="card">
-    \${d.checks.map(c => row(c.id, c.message, { kind: c.severity === 'ok' ? 'ok' : (c.severity === 'info' ? 'info' : 'warn'), text: c.severity })).join('')}
-    </div>\`;
-}
-
-function showToast(msg, kind) {
-  const el = document.createElement('div');
-  el.className = 'toast ' + (kind || 'ok');
-  el.textContent = msg;
-  document.body.appendChild(el);
-  setTimeout(() => el.remove(), 2400);
-}
-
-async function toggleHook(event, matcher, handler, disable) {
-  try {
-    const r = await fetch('/api/hooks/toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ event, matcher, handler, disable }),
-    });
-    const result = await r.json();
-    if (!r.ok || result.state === 'error') {
-      showToast('Toggle failed: ' + (result.reason || result.error || 'unknown'), 'err');
-    } else if (result.state === 'noop') {
-      showToast('Already in target state (' + result.reason + ')', 'ok');
-    } else {
-      showToast(disable ? 'Disabled. Reload Claude Code to apply.' : 'Enabled. Reload Claude Code to apply.', 'ok');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-  await refresh();
-}
-
-async function toggleReminder(id, disable) {
-  try {
-    const r = await fetch('/api/reminders/toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, disable }),
-    });
-    const result = await r.json();
-    if (!r.ok || result.state === 'error') {
-      showToast('Toggle failed: ' + (result.reason || result.error || 'unknown'), 'err');
-    } else if (result.state === 'noop') {
-      showToast('Already in target state', 'ok');
-    } else {
-      showToast(disable ? 'Reminder silenced. Next prompt will skip it.' : 'Reminder restored. Next prompt will include it.', 'ok');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-  await refresh();
-}
-
-document.addEventListener('click', (e) => {
-  const t = e.target;
-  if (!t) return;
-  if (t.id === 'log-drawer-close') return closeLogDrawer();
-  if (t.classList && t.classList.contains('logs-view') && t.dataset.logId) {
-    return viewLogDetail(t.dataset.logId);
-  }
-  if (t.id === 'logs-reload') {
-    logsState.entries = [];
-    logsState.allLoaded = false;
-    return loadLogsPage();
-  }
-  if (t.id === 'logs-load-more') {
-    return loadLogsPage({ append: true });
-  }
-  if (t.id === 'logs-clear') {
-    const total = (state.logs && state.logs.total) || 0;
-    if (!total) return;
-    if (!confirm('Delete ' + total + ' captured log event(s) and truncate .claude/tmp/hooks.log?\\n\\nThis cannot be undone. (Future events will be captured normally.)')) return;
-    return clearLogsAction();
-  }
-  if (t.id === 'restart-observer') {
-    return restartObserverAction(t);
-  }
-  if (t.id === 'fix-cdp-port') {
-    return fixCdpPortAction(t);
-  }
-  if (t.id === 'clear-observer') {
-    return clearObserverAction(t);
-  }
-  if (t.dataset && t.dataset.observerFilter) {
-    observerFilter = t.dataset.observerFilter;
-    renderContent();
-    return;
-  }
-  if (t.dataset && t.dataset.observerShowResolved) {
-    observerShowResolved = !observerShowResolved;
-    // Reset surface filter when toggling, since counts change.
-    observerFilter = 'all';
-    renderContent();
-    return;
-  }
-  if (t.dataset && t.dataset.validatorsFilter) {
-    validatorsFilter = t.dataset.validatorsFilter;
-    renderContent();
-    return;
-  }
-  if (t.dataset && t.dataset.validatorsStatusFilter) {
-    validatorsStatusFilter = t.dataset.validatorsStatusFilter;
-    renderContent();
-    return;
-  }
-  if (t.dataset && t.dataset.validatorsScopeFilter) {
-    validatorsScopeFilter = t.dataset.validatorsScopeFilter;
-    renderContent();
-    return;
-  }
-  if (t.id === 'clear-validators') {
-    return clearValidatorsAction(t);
-  }
-});
-
-async function clearValidatorsAction(btn) {
-  const scope = (btn.dataset && btn.dataset.scope) || 'all';
-  const isScoped = scope !== 'all';
-  const message = isScoped
-    ? \`Clear validator history for scope "\${scope}"? Runs from other scopes are preserved. Validators continue running.\`
-    : 'Clear ALL validator run history? This wipes the entire log. Validators continue running.';
-  if (!confirm(message)) return;
-  const originalLabel = btn.textContent;
-  btn.disabled = true;
-  btn.textContent = 'Clearing…';
-  try {
-    const url = isScoped
-      ? '/api/validators/clear?scope=' + encodeURIComponent(scope)
-      : '/api/validators/clear';
-    const r = await fetch(url, { method: 'POST' });
-    const result = await r.json();
-    if (r.ok && result.ok) {
-      const removed = typeof result.removed === 'number' ? \` (removed \${result.removed})\` : '';
-      showToast(isScoped ? \`Cleared "\${scope}"\${removed}\` : \`Cleared all history\${removed}\`, 'ok');
-    } else {
-      showToast('Clear failed: ' + (result.error || 'unknown'), 'err');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  } finally {
-    btn.disabled = false;
-    btn.textContent = originalLabel;
-    await refresh();
-  }
-}
-
-async function clearObserverAction(btn) {
-  if (!confirm('Resolve all active observer incidents and clear server logs?\\n\\nIncident history is preserved in state.incidents (marked resolved). Future events repopulate normally. This cannot be undone.')) return;
-  const originalLabel = btn.textContent;
-  btn.disabled = true;
-  btn.textContent = 'Clearing…';
-  try {
-    const r = await fetch('/api/observer/clear', { method: 'POST' });
-    const result = await r.json();
-    if (r.ok && result.ok) {
-      showToast('Observer state cleared at ' + (result.reset_at || 'now'), 'ok');
-    } else {
-      showToast('Clear failed: ' + (result.error || 'unknown'), 'err');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  } finally {
-    btn.disabled = false;
-    btn.textContent = originalLabel;
-    await refresh();
-  }
-}
-
-async function fixCdpPortAction(btn) {
-  const originalLabel = btn.textContent;
-  btn.disabled = true;
-  btn.textContent = 'Fixing…';
-  try {
-    const r = await fetch('/api/cdp-port/fix', { method: 'POST' });
-    const result = await r.json();
-    if (r.ok && result.ok) {
-      showToast('CDP port fixed — .mcp.json rewritten. ' + (result.after && result.after.message || ''), 'ok');
-    } else {
-      showToast('Fix failed: ' + (result.error || 'unknown'), 'err');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  } finally {
-    btn.disabled = false;
-    btn.textContent = originalLabel;
-    await refresh();
-  }
-}
-
-async function restartObserverAction(btn) {
-  const originalLabel = btn.textContent;
-  btn.disabled = true;
-  btn.textContent = 'Restarting…';
-  try {
-    const r = await fetch('/api/observer/restart', { method: 'POST' });
-    const result = await r.json();
-    if (r.ok && result.ok) {
-      showToast('Observer restarted — pid ' + (result.observer && result.observer.pid) + '. Refreshing…', 'ok');
-    } else {
-      // The daemon often exits 0 even on failure (it logs the reason to
-      // hooks.log instead of stderr). Surface the richest signal we have.
-      const detail = result.error
-        || (result.recent_log_entry ? result.recent_log_entry.split('\\n').slice(-3).join(' | ') : null)
-        || (result.script_stderr && result.script_stderr.trim())
-        || (result.script_stdout && result.script_stdout.trim())
-        || 'unknown — check .claude/tmp/hooks.log for the most recent SessionStart:browser-error-daemon entry';
-      showToast('Restart failed: ' + detail, 'err');
-      // Also log to browser console for inspection.
-      console.error('[observer-restart] full response:', result);
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  } finally {
-    btn.disabled = false;
-    btn.textContent = originalLabel;
-    await refresh();
-  }
-}
-
-async function clearLogsAction() {
-  try {
-    const r = await fetch('/api/logs', { method: 'DELETE' });
-    const result = await r.json();
-    if (!r.ok) {
-      showToast('Clear failed: ' + (result.error || r.status), 'err');
-      return;
-    }
-    showToast('Cleared ' + result.removed + ' event(s)' + (result.logTruncated ? ' + truncated hooks.log' : ''), 'ok');
-    logsState.entries = [];
-    logsState.allLoaded = false;
-    await refresh();
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-}
-
-document.addEventListener('change', (e) => {
-  const t = e.target;
-  if (!t || !t.classList) return;
-  if (t.id === 'logs-filter') {
-    logsState.type = t.value;
-    logsState.entries = [];
-    logsState.allLoaded = false;
-    loadLogsPage();
-    return;
-  }
-  if (t.classList.contains('hook-toggle')) {
-    const event = t.dataset.event;
-    const matcher = t.dataset.matcher;
-    const handler = t.dataset.handler;
-    const disable = !t.checked;
-    toggleHook(event, matcher, handler, disable);
-  } else if (t.classList.contains('reminder-toggle')) {
-    const id = t.dataset.id;
-    const disable = !t.checked;
-    toggleReminder(id, disable);
-  }
-});
-
-let activePlanCache = null;
-async function loadActivePlanPreview() {
-  const target = document.getElementById('active-plan-body');
-  if (!target) return;
-  if (target.dataset.loaded === '1') return;
-  target.dataset.loaded = '1';
-  target.textContent = 'Loading…';
-  try {
-    if (!activePlanCache) {
-      const r = await fetch('/api/active-plan');
-      activePlanCache = await r.text();
-    }
-    const pre = document.createElement('pre');
-    pre.textContent = activePlanCache;
-    target.innerHTML = '';
-    target.appendChild(pre);
-  } catch (e) {
-    target.textContent = 'Failed to load: ' + e.message;
-    target.dataset.loaded = '';
-  }
-}
-
-// Lazy-load CLAUDE.md preview when the user opens the details element.
-// The "toggle" event does not bubble by default — capture phase keeps delegation working.
-document.addEventListener('toggle', (e) => {
-  const t = e.target;
-  if (!t || t.tagName !== 'DETAILS' || !t.open) return;
-  if (t.dataset.detailId === 'claude-md-preview') loadClaudeMdPreview();
-  else if (t.dataset.detailId === 'active-plan-full') loadActivePlanPreview();
-}, true);
-
-async function toggleEnforcement(disable) {
-  try {
-    const r = await fetch('/api/enforcement/toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ disable }),
-    });
-    const result = await r.json();
-    if (!r.ok || result.state === 'error') {
-      showToast('Toggle failed: ' + (result.reason || result.error || 'unknown'), 'err');
-    } else if (result.state === 'noop') {
-      showToast('Enforcement already in target state', 'ok');
-    } else {
-      showToast(disable
-        ? 'Enforcement OFF — blocking hooks silenced. Validators + reminders still run.'
-        : 'Enforcement ON — full blocking restored.',
-        disable ? 'err' : 'ok');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-  await refresh();
-}
-
-document.getElementById('enforce-toggle').onchange = (e) => {
-  toggleEnforcement(!e.target.checked);
-};
-
-async function toggleRunToCompletion(enable) {
-  try {
-    const r = await fetch('/api/run-to-completion/toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ enable }),
-    });
-    const result = await r.json();
-    if (!r.ok || result.state === 'error') {
-      showToast('Toggle failed: ' + (result.reason || result.error || 'unknown'), 'err');
-    } else if (result.state === 'noop') {
-      showToast('Run-to-completion reminder already in target state', 'ok');
-    } else {
-      showToast(enable
-        ? 'Run-to-completion reminder ON — agent will be nudged to resume mid-build steps.'
-        : 'Run-to-completion reminder OFF — agent may checkpoint after partial progress.',
-        'ok');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-  await refresh();
-}
-
-document.getElementById('run-to-completion-toggle').onchange = (e) => {
-  toggleRunToCompletion(e.target.checked);
-};
-
-async function toggleCwdLockUI(enable) {
-  try {
-    const r = await fetch('/api/cwd-lock/toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ enable }),
-    });
-    const result = await r.json();
-    if (!r.ok || result.state === 'error') {
-      showToast('Toggle failed: ' + (result.reason || result.error || 'unknown'), 'err');
-    } else if (result.state === 'noop') {
-      showToast('Cwd lock already in target state', 'ok');
-    } else {
-      showToast(enable
-        ? 'Cwd lock ON — cd away from project root will be BLOCKED on next CwdChanged.'
-        : 'Cwd lock OFF — agent can freely change directory.',
-        'ok');
-    }
-  } catch (e) {
-    showToast('Network error: ' + e.message, 'err');
-  }
-  await refresh();
-}
-
-document.getElementById('cwd-lock-toggle').onchange = (e) => {
-  toggleCwdLockUI(e.target.checked);
-};
-
-document.getElementById('refresh').onclick = refresh;
-document.getElementById('auto').onchange = (e) => {
-  if (timer) clearInterval(timer);
-  if (e.target.checked) timer = setInterval(refresh, 5000);
-};
-timer = setInterval(refresh, 5000);
-refresh();
-</script>
-</body>
-</html>`;
-}
-
-// ─── HTTP server ─────────────────────────────────────────────────
-
-function readClaudeMdSafe(cwd) {
-  try { return fs.readFileSync(path.join(cwd, 'CLAUDE.md'), 'utf8'); }
-  catch { return ''; }
-}
-
-function readRequestBody(req, limit = 64 * 1024) {
-  return new Promise((resolve, reject) => {
-    const chunks = [];
-    let total = 0;
-    req.on('data', (c) => {
-      total += c.length;
-      if (total > limit) {
-        reject(new Error('Request body too large'));
-        req.destroy();
-        return;
-      }
-      chunks.push(c);
-    });
-    req.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
-    req.on('error', reject);
-  });
-}
-
-function handler(cwd) {
-  return async (req, res) => {
-    try {
-      const url = new URL(req.url, 'http://localhost');
-      const route = url.pathname;
-
-      const send = (status, body, type) => {
-        res.writeHead(status, { 'Content-Type': type, 'Cache-Control': 'no-store' });
-        res.end(body);
-      };
-
-      if (req.method === 'GET') {
-        if (route === '/' || route === '/index.html') return send(200, renderHtml(), 'text/html; charset=utf-8');
-        if (route === '/api/status') return send(200, JSON.stringify(collectStatus(cwd)), 'application/json');
-        if (route === '/api/claude-md') return send(200, readClaudeMdSafe(cwd), 'text/plain; charset=utf-8');
-        if (route === '/api/active-plan') {
-          const p = path.join(cwd, '.claudeflow', 'state', 'active-plan.json');
-          try {
-            const r = JSON.parse(fs.readFileSync(p, 'utf8'));
-            return send(200, r.content || '', 'text/plain; charset=utf-8');
-          } catch {
-            return send(404, '', 'text/plain');
-          }
-        }
-        if (route === '/api/logs') {
-          const limit = Math.min(parseInt(url.searchParams.get('limit'), 10) || 100, 500);
-          const before = url.searchParams.get('before') || null;
-          const type = url.searchParams.get('type') || 'all';
-          return send(200, JSON.stringify(listLogEvents(cwd, { limit, before, type })), 'application/json');
-        }
-        if (route.startsWith('/api/logs/')) {
-          const id = route.slice('/api/logs/'.length);
-          const ev = readLogEvent(cwd, id);
-          if (!ev) return send(404, JSON.stringify({ error: 'not found' }), 'application/json');
-          return send(200, JSON.stringify(ev), 'application/json');
-        }
-        if (route === '/healthz') return send(200, 'ok', 'text/plain');
-      }
-
-      if (req.method === 'POST' && route === '/api/hooks/toggle') {
-        const raw = await readRequestBody(req);
-        let payload;
-        try { payload = JSON.parse(raw); }
-        catch { return send(400, JSON.stringify({ error: 'invalid json' }), 'application/json'); }
-        const { event, matcher, handler: hdlr, disable } = payload;
-        if (typeof event !== 'string' || typeof hdlr !== 'string' || typeof disable !== 'boolean') {
-          return send(400, JSON.stringify({ error: 'event, handler, disable required' }), 'application/json');
-        }
-        const result = toggleHookOverride(cwd, { event, matcher: matcher || '', handler: hdlr, disable });
-        const status = result.state === 'error' ? 500 : 200;
-        return send(status, JSON.stringify(result), 'application/json');
-      }
-
-      if (req.method === 'DELETE' && route === '/api/logs') {
-        const result = clearLogs(cwd);
-        return send(200, JSON.stringify(result), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/enforcement/toggle') {
-        const raw = await readRequestBody(req);
-        let payload;
-        try { payload = JSON.parse(raw); }
-        catch { return send(400, JSON.stringify({ error: 'invalid json' }), 'application/json'); }
-        const { disable } = payload;
-        if (typeof disable !== 'boolean') {
-          return send(400, JSON.stringify({ error: 'disable required' }), 'application/json');
-        }
-        const result = toggleEnforcementMode(cwd, { disable });
-        const status = result.state === 'error' ? 500 : 200;
-        return send(status, JSON.stringify(result), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/cwd-lock/toggle') {
-        const raw = await readRequestBody(req);
-        let payload;
-        try { payload = JSON.parse(raw); }
-        catch { return send(400, JSON.stringify({ error: 'invalid json' }), 'application/json'); }
-        const { enable } = payload;
-        if (typeof enable !== 'boolean') {
-          return send(400, JSON.stringify({ error: 'enable required' }), 'application/json');
-        }
-        const result = toggleCwdLock(cwd, { enable });
-        const status = result.state === 'error' ? 500 : 200;
-        return send(status, JSON.stringify(result), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/run-to-completion/toggle') {
-        const raw = await readRequestBody(req);
-        let payload;
-        try { payload = JSON.parse(raw); }
-        catch { return send(400, JSON.stringify({ error: 'invalid json' }), 'application/json'); }
-        const { enable } = payload;
-        if (typeof enable !== 'boolean') {
-          return send(400, JSON.stringify({ error: 'enable required' }), 'application/json');
-        }
-        const result = toggleRunToCompletionReminder(cwd, { enable });
-        const status = result.state === 'error' ? 500 : 200;
-        return send(status, JSON.stringify(result), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/cdp-port/fix') {
-        // Re-run checkCdpPortMismatch to get fresh state (the file may have
-        // changed since the panel last fetched). Only apply the fix if the
-        // check still reports severity='mismatch' (i.e. the wrong-port case
-        // — other failure modes like invalid JSON cannot be auto-fixed).
-        const check = checkCdpPortMismatch(cwd);
-        if (check.severity !== 'mismatch') {
-          return send(409, JSON.stringify({
-            ok: false,
-            error: `cdp-port check is "${check.severity}" — only "mismatch" is auto-fixable. Current message: ${check.message}`,
-            check_severity: check.severity,
-          }), 'application/json');
-        }
-        try {
-          applyCdpPortFix(check);
-        } catch (e) {
-          return send(500, JSON.stringify({ ok: false, error: `applyCdpPortFix failed: ${e.message}` }), 'application/json');
-        }
-        const after = checkCdpPortMismatch(cwd);
-        return send(200, JSON.stringify({
-          ok: after.severity === 'ok',
-          before: { severity: check.severity, message: check.message },
-          after: { severity: after.severity, message: after.message },
-        }), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/observer/clear') {
-        // Forwards to the observer daemon's /reset-session endpoint, which
-        // resolves all active browser + server incidents, clears the per-server
-        // recent_log buffers, and resets the browser snapshot counter. The
-        // history is preserved in state.incidents (marked resolved), so this
-        // is a soft clear: future polls won't see the old incidents as active.
-        const observer = readObserverState(cwd);
-        if (!observer.running) {
-          return send(409, JSON.stringify({ ok: false, error: 'observer is not running — start it first, then clear.' }), 'application/json');
-        }
-        const { request: httpRequest } = require('node:http');
-        const result = await new Promise((resolve) => {
-          const req2 = httpRequest({
-            hostname: '127.0.0.1',
-            port: observer.port,
-            path: '/reset-session',
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', 'Content-Length': 2 },
-          }, (r) => {
-            let body = '';
-            r.on('data', (c) => { body += c; });
-            r.on('end', () => {
-              try { resolve({ status: r.statusCode, body: JSON.parse(body) }); }
-              catch { resolve({ status: r.statusCode, body: { raw: body } }); }
-            });
-          });
-          req2.on('error', (err) => resolve({ status: 0, body: { error: err.message } }));
-          req2.write('{}');
-          req2.end();
-        });
-        if (result.status === 200 && result.body && result.body.ok) {
-          return send(200, JSON.stringify({ ok: true, reset_at: result.body.reset_at }), 'application/json');
-        }
-        return send(502, JSON.stringify({ ok: false, error: 'observer returned ' + result.status, daemon_response: result.body }), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/validators/clear') {
-        try {
-          const validatorState = require(path.join(cwd, '.claudeflow', 'runtime', 'validator-state.js'));
-          const scope = url.searchParams.get('scope');
-          const removed = scope && scope !== 'all'
-            ? validatorState.clearScope(cwd, scope)
-            : (() => { const s = validatorState.readState(cwd); const n = s ? s.runs.length : 0; validatorState.clearState(cwd); return n; })();
-          return send(200, JSON.stringify({ ok: true, removed, scope: scope || 'all' }), 'application/json');
-        } catch (err) {
-          return send(500, JSON.stringify({ ok: false, error: err.message }), 'application/json');
-        }
-      }
-
-      if (req.method === 'POST' && route === '/api/observer/restart') {
-        // Re-run the SessionStart/browser-error-daemon.js hook script
-        // synchronously. The script calls ensureObserver() which spawns
-        // Chrome with --cdp-endpoint as a detached process. Once the
-        // script exits, the daemon is up (or the script logged the failure
-        // to hooks.log even though it exits 0).
-        const daemonScript = path.join(cwd, '.claude', 'hooks', 'SessionStart', 'browser-error-daemon.js');
-        if (!fs.existsSync(daemonScript)) {
-          return send(404, JSON.stringify({ ok: false, error: 'daemon script not found at .claude/hooks/SessionStart/browser-error-daemon.js' }), 'application/json');
-        }
-        const { spawnSync } = require('child_process');
-        const r = spawnSync(process.execPath, [daemonScript], {
-          cwd,
-          env: { ...process.env, CLAUDE_PROJECT_DIR: cwd },
-          encoding: 'utf8',
-          // Chrome can take 5-10s to spawn cleanly; allow headroom + network probe.
-          timeout: 30000,
-        });
-        const observerState = readObserverState(cwd);
-        // Tail the most recent SessionStart entry from hooks.log — the
-        // daemon writes the failure reason there even when it exits 0.
-        let recentLogEntry = null;
-        try {
-          const logPath = path.join(cwd, '.claude', 'tmp', 'hooks.log');
-          const raw = fs.readFileSync(logPath, 'utf8');
-          const lines = raw.split('\n');
-          // Walk backwards, find the most recent block whose hook_file
-          // mentions browser-error-daemon.js.
-          for (let i = lines.length - 1; i >= 0; i--) {
-            if (/browser-error-daemon\.js/.test(lines[i])) {
-              recentLogEntry = lines.slice(Math.max(0, i - 1), Math.min(lines.length, i + 5)).join('\n');
-              break;
-            }
-          }
-        } catch {}
-        const ok = observerState.running;
-        const reason = !ok
-          ? (r.error ? `spawn error: ${r.error.message}` :
-             r.signal ? `script killed by signal ${r.signal} (timed out?)` :
-             r.status !== 0 ? `script exit ${r.status}` :
-             'script exited 0 but observer pid still not alive — the daemon failed to bind Chrome to the CDP port. See script_stdout + recent_log_entry below.')
-          : null;
-        return send(ok ? 200 : 500, JSON.stringify({
-          ok,
-          observer: observerState,
-          script_exit: r.status,
-          script_signal: r.signal || null,
-          script_stdout: (r.stdout || '').slice(0, 2000),
-          script_stderr: (r.stderr || '').slice(0, 2000),
-          recent_log_entry: recentLogEntry,
-          error: reason,
-        }), 'application/json');
-      }
-
-      if (req.method === 'POST' && route === '/api/reminders/toggle') {
-        const raw = await readRequestBody(req);
-        let payload;
-        try { payload = JSON.parse(raw); }
-        catch { return send(400, JSON.stringify({ error: 'invalid json' }), 'application/json'); }
-        const { id, disable } = payload;
-        if (typeof id !== 'string' || typeof disable !== 'boolean') {
-          return send(400, JSON.stringify({ error: 'id, disable required' }), 'application/json');
-        }
-        const result = toggleReminderOverride(cwd, { id, disable });
-        const status = result.state === 'error' ? 500 : 200;
-        return send(status, JSON.stringify(result), 'application/json');
-      }
-
-      send(404, JSON.stringify({ error: 'not found' }), 'application/json');
-    } catch (err) {
-      res.writeHead(500, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: err.message }));
-    }
-  };
-}
-
-function openInBrowser(url) {
-  const cmd = process.platform === 'darwin' ? 'open'
-    : process.platform === 'win32' ? 'start'
-    : 'xdg-open';
-  try {
-    spawn(cmd, [url], { detached: true, stdio: 'ignore' }).unref();
-  } catch {}
-}
-
-// Derive a stable port from the cwd. Without this, every panel restart picks
-// a different random port and any open browser tab pointing at the OLD port
-// becomes a dead bookmark — confusingly, the bookmark keeps rendering the
-// last-known UI state because /api/status fails silently. Range 9300-9399
-// (above Chrome CDP's 9200-9299).
-function derivePanelPort(projectPath) {
-  const crypto = require('crypto');
-  const hash = crypto.createHash('sha1').update(projectPath).digest();
-  return 9300 + (hash.readUInt16BE(0) % 100);
-}
-
-function start({ cwd = process.cwd(), port = null, openBrowser = true } = {}) {
-  const server = http.createServer(handler(cwd));
-  let lastActivity = Date.now();
-  server.on('request', () => { lastActivity = Date.now(); });
-
-  // Port resolution:
-  //   - explicit port arg (e.g. --port=9999) → use as-is
-  //   - port === 0 → OS-assigned random (legacy behavior, retained for tests)
-  //   - default (null) → derive from cwd; on EADDRINUSE fall back to OS-assigned
-  const explicitPort = typeof port === 'number' && port > 0;
-  const derivedPort = port === null ? derivePanelPort(cwd) : null;
-  const initialPort = explicitPort ? port : (derivedPort !== null ? derivedPort : 0);
-
-  return new Promise((resolve, reject) => {
-    let usingFallback = false;
-    server.on('error', (err) => {
-      if (err.code === 'EADDRINUSE' && !usingFallback && !explicitPort) {
-        // Another process holds the derived port. Fall back to OS-assigned
-        // so the panel can still start, but warn the user — they may have
-        // another panel running for this project, or unrelated process took
-        // the port.
-        usingFallback = true;
-        console.error(`\n  [panel] derived port ${initialPort} is in use — falling back to OS-assigned port.`);
-        console.error(`  [panel] If another \`claudeflow panel\` is running for this project, kill it first to recover URL stability.\n`);
-        server.listen(0, '127.0.0.1');
-        return;
-      }
-      reject(err);
-    });
-    server.on('listening', () => {
-      const addr = server.address();
-      const url = `http://127.0.0.1:${addr.port}`;
-      const idleTimer = setInterval(() => {
-        if (Date.now() - lastActivity > IDLE_SHUTDOWN_MS) {
-          clearInterval(idleTimer);
-          server.close();
-          process.exit(0);
-        }
-      }, 60 * 1000);
-      idleTimer.unref();
-      if (openBrowser) openInBrowser(url);
-      resolve({ url, server, derivedPort, usedFallback: usingFallback });
-    });
-    server.listen(initialPort, '127.0.0.1');
-  });
-}
-
-async function run(argv = []) {
-  const cwd = process.cwd();
-  const noOpen = argv.includes('--no-open');
-  const portArg = argv.find((a) => a.startsWith('--port='));
-  // Default port (null) → derive from cwd so the URL is stable across restarts.
-  // --port=N overrides; --port=0 keeps the legacy OS-assigned behavior.
-  const port = portArg ? parseInt(portArg.split('=')[1], 10) : null;
-
-  ui.banner();
-  console.log(`  Starting panel for ${ui.CYAN}${cwd}${ui.RESET}`);
-  const { url, derivedPort, usedFallback } = await start({ cwd, port, openBrowser: !noOpen });
-  console.log('');
-  console.log(`  ${ui.GREEN}▸${ui.RESET} ${ui.CYAN}${url}${ui.RESET}`);
-  if (derivedPort !== null && !usedFallback) {
-    console.log(`  ${ui.DIM}Port ${derivedPort} is derived from the cwd — same URL across restarts.${ui.RESET}`);
-  }
-  console.log(`  ${ui.DIM}Ctrl+C to stop. Auto-shutdown after 30 min idle.${ui.RESET}`);
-  console.log('');
-  return new Promise(() => {}); // keep alive
-}
-
-module.exports = run;
-module.exports.start = start;
-module.exports.createPanelServer = handler;
-module.exports.derivePanelPort = derivePanelPort;
-module.exports.getObserverInfo = getObserverInfo;
-module.exports.getValidatorsInfo = getValidatorsInfo;
-module.exports.collectStatus = collectStatus;
-module.exports.getClaudeMdInfo = getClaudeMdInfo;
-module.exports.getHooksInfo = getHooksInfo;
-module.exports.getMcpInfo = getMcpInfo;
-module.exports.getSetupContextInfo = getSetupContextInfo;
-module.exports.getActiveRunInfo = getActiveRunInfo;
-module.exports.getDoctorInfo = getDoctorInfo;
-module.exports.renderHtml = renderHtml;