Memory

/**
 * graph-utils.mjs - Shared utilities for OrchestKit graph visualization scripts
 *
 * Pure library module: no main(), no side effects on import.
 * Used by render-graph.mjs and render-playground.mjs.
 */

import { readFileSync, existsSync } from 'node:fs';
import { execFileSync } from 'node:child_process';

// ---------------------------------------------------------------------------
// Entity type configuration (single source of truth)
// ---------------------------------------------------------------------------

export const ENTITY_TYPES = {
  Decision:   { prefix: 'd_',    className: 'decision',   color: '#3B82F6' },
  Preference: { prefix: 'pref_', className: 'preference', color: '#10B981' },
  Problem:    { prefix: 'prob_', className: 'problem',    color: '#EF4444' },
  Solution:   { prefix: 'sol_',  className: 'solution',   color: '#22C55E' },
  Technology: { prefix: 't_',    className: 'tech',       color: '#F59E0B' },
  Pattern:    { prefix: 'p_',    className: 'pattern',    color: '#8B5CF6' },
  Tool:       { prefix: 'tool_', className: 'tool',       color: '#06B6D4' },
  Workflow:   { prefix: 'w_',    className: 'workflow',   color: '#EC4899' },
};

// ---------------------------------------------------------------------------
// Relation classification sets
// ---------------------------------------------------------------------------

export const STRONG_RELATIONS = new Set([
  'CHOSE', 'SOLVED_BY', 'PREFERS', 'CONSTRAINT', 'USES', 'USED_FOR',
]);

export const REJECTED_RELATIONS = new Set([
  'CHOSE_OVER', 'TRADEOFF',
]);

// ---------------------------------------------------------------------------
// Keyword lists for entity type inference
// ---------------------------------------------------------------------------

export const TECH_KEYWORDS = [
  'postgresql', 'postgres', 'redis', 'mongodb', 'mysql', 'fastapi', 'react',
  'vue', 'angular', 'next', 'node', 'python', 'typescript', 'javascript',
  'kafka', 'rabbitmq', 'graphql', 'rest', 'grpc', 'esm', 'babel', 'esbuild',
  'rollup', 'webpack', 'vite', 'vitest', 'jest', 'pgvector',
];

export const TOOL_KEYWORDS = [
  'eslint', 'prettier', 'docker', 'k6', 'git', 'github', 'ci', 'cd', 'npm',
  'biome', 'playwright', 'cypress',
];

// ---------------------------------------------------------------------------
// Pure functions
// ---------------------------------------------------------------------------

/**
 * Sanitize a name into a safe lowercase identifier.
 * @param {string} name
 * @returns {string}
 */
export function sanitizeId(name) {
  return name.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
}

/**
 * Build a node ID from entity type and name.
 * Falls back to Pattern prefix for unknown types.
 * @param {string} entityType
 * @param {string} name
 * @returns {string}
 */
export function makeNodeId(entityType, name) {
  const cfg = ENTITY_TYPES[entityType] || ENTITY_TYPES.Pattern;
  return cfg.prefix + sanitizeId(name);
}

/**
 * Infer entity type from a name string using keyword matching.
 * @param {string} name
 * @returns {string}
 */
export function inferEntityType(name) {
  const lower = name.toLowerCase();
  if (TECH_KEYWORDS.some(k => lower.includes(k))) return 'Technology';
  if (TOOL_KEYWORDS.some(k => lower.includes(k))) return 'Tool';
  return 'Pattern';
}

/**
 * Normalize a raw entity (string or object) into a standard shape.
 * @param {string|object} raw
 * @returns {{ name: string, entityType: string, observations: string[] }}
 */
export function normalizeEntity(raw) {
  if (typeof raw === 'string') {
    return { name: raw, entityType: inferEntityType(raw), observations: [] };
  }
  return {
    name: raw.name || String(raw),
    entityType: raw.entityType || 'Pattern',
    observations: raw.observations || [],
  };
}

/**
 * Normalize a raw relation into a standard shape.
 * @param {object} rel
 * @returns {{ from: string, to: string, relationType: string }}
 */
export function normalizeRelation(rel) {
  return {
    from: rel.from,
    to: rel.to,
    relationType: rel.relationType || rel.type || 'RELATES_TO',
  };
}

/**
 * Classify an edge by its relation type.
 * @param {string} relationType
 * @returns {'strong'|'rejected'|'weak'}
 */
export function classifyEdge(relationType) {
  if (REJECTED_RELATIONS.has(relationType)) return 'rejected';
  if (STRONG_RELATIONS.has(relationType)) return 'strong';
  return 'weak';
}

/**
 * Build a lookup map from entity name to pre-computed node ID.
 * @param {Map<string, object>} entityMap - Map of name -> { entityType, ... }
 * @returns {Object<string, string>} - { name: nodeId }
 */
export function buildEntityNodeIdMap(entityMap) {
  const result = {};
  for (const [name, ent] of entityMap) {
    const entityType = ent.entityType || 'Pattern';
    result[name] = makeNodeId(entityType, name);
  }
  return result;
}

// ---------------------------------------------------------------------------
// I/O helpers
// ---------------------------------------------------------------------------

/**
 * Get the project directory from env or cwd.
 * @returns {string}
 */
export function getProjectDir() {
  return process.env.CLAUDE_PROJECT_DIR || process.cwd();
}

/**
 * Read a JSONL file, skipping corrupt lines.
 * @param {string} filePath
 * @returns {object[]}
 */
export function readJsonl(filePath) {
  if (!existsSync(filePath)) return [];
  const lines = readFileSync(filePath, 'utf-8').split('\n').filter(Boolean);
  const records = [];
  let skipped = 0;
  for (const line of lines) {
    try {
      records.push(JSON.parse(line));
    } catch {
      skipped++;
    }
  }
  if (skipped > 0) console.warn(`Skipped ${skipped} corrupt record(s)`);
  return records;
}

/**
 * Open a file in the platform's default browser.
 * @param {string} filePath
 */
export function openInBrowser(filePath) {
  try {
    const platform = process.platform;
    const cmd = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open';
    execFileSync(cmd, [filePath], { stdio: 'ignore' });
    console.log('Opened in browser.');
  } catch {
    console.log(`Open manually: ${filePath}`);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline'; img-src data:; connect-src 'none'">
  <title>OrchestKit Knowledge Graph Playground</title>
  <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
  <style>
    /* ===== CSS Custom Properties ===== */
    :root {
      --color-bg-base: #0f172a;
      --color-bg-surface: #1e293b;
      --color-bg-elevated: #162032;
      --color-border-default: #334155;
      --color-border-subtle: #1e293b;
      --color-border-input: #475569;
      --color-text-primary: #f8fafc;
      --color-text-secondary: #e2e8f0;
      --color-text-body: #cbd5e1;
      --color-text-muted: #94a3b8;
      --color-text-dim: #64748b;
      --color-interactive: #3B82F6;
      --color-interactive-hover: #2563EB;
      --color-scrollbar-track: #0f172a;
      --color-scrollbar-thumb: #334155;
      --color-scrollbar-hover: #475569;
    }

    /* ===== Reset & Base ===== */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      height: 100%;
    }

    body {
      background: var(--color-bg-base);
      color: var(--color-text-secondary);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
    }

    /* ===== Focus Styles (Accessibility) ===== */
    :focus-visible {
      outline: 2px solid var(--color-interactive);
      outline-offset: 2px;
    }

    /* ===== Skip Link ===== */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--color-interactive);
      color: #fff;
      padding: 0.5rem 1rem;
      z-index: 200;
      font-size: 0.875rem;
      border-radius: 0 0 0.25rem 0;
    }
    .skip-link:focus { top: 0; }

    /* Screen reader only */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ===== Top Bar ===== */
    .top-bar {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 1.25rem;
      background: var(--color-bg-surface);
      border-bottom: 1px solid var(--color-border-default);
      flex-wrap: wrap;
    }

    .top-bar h1 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text-primary);
      white-space: nowrap;
    }

    .top-bar select,
    .top-bar input[type="text"] {
      background: var(--color-bg-base);
      color: var(--color-text-secondary);
      border: 1px solid var(--color-border-input);
      border-radius: 0.375rem;
      padding: 0.375rem 0.625rem;
      font-size: 0.8125rem;
      font-family: inherit;
      outline: none;
    }

    .top-bar select:focus,
    .top-bar input:focus {
      border-color: var(--color-interactive);
    }

    .top-bar input[type="text"] {
      width: 180px;
    }

    /* ===== Tabs ===== */
    .tab-bar {
      display: flex;
      background: var(--color-bg-surface);
      border-bottom: 1px solid var(--color-border-default);
      padding: 0 1.25rem;
      gap: 0;
    }

    .tab-btn {
      padding: 0.625rem 1.25rem;
      background: none;
      border: none;
      color: var(--color-text-muted);
      font-size: 0.8125rem;
      font-family: inherit;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }

    .tab-btn:hover { color: var(--color-text-secondary); }

    .tab-btn.active {
      color: var(--color-interactive);
      border-bottom-color: var(--color-interactive);
    }

    /* ===== Tab Content ===== */
    .tab-content {
      display: none;
      flex: 1;
      overflow: auto;
    }

    .tab-content.active {
      display: flex;
      flex-direction: column;
    }

    /* ===== Graph Tab ===== */
    .graph-toolbar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 1.25rem;
      background: var(--color-bg-elevated);
      border-bottom: 1px solid var(--color-border-subtle);
      flex-wrap: wrap;
    }

    .entity-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.75rem;
      cursor: pointer;
      user-select: none;
    }

    /* Visually hidden but accessible (not display:none) */
    .entity-toggle input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .entity-toggle .dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      opacity: 0.4;
      transition: opacity 0.15s;
    }

    .entity-toggle input:checked + .dot {
      opacity: 1;
    }

    #graph-canvas {
      flex: 1;
      min-height: 0;
      height: calc(100vh - 200px);
      background: var(--color-bg-base);
    }

    .graph-statusbar {
      display: flex;
      gap: 1.5rem;
      padding: 0.375rem 1.25rem;
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-default);
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }

    /* ===== Detail Panel (slide-in) ===== */
    .detail-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: min(400px, 100vw);
      max-width: 100vw;
      height: 100vh;
      background: var(--color-bg-surface);
      border-left: 1px solid var(--color-border-default);
      z-index: 100;
      transition: right 0.25s ease;
      overflow-y: auto;
      padding: 1.25rem;
    }

    .detail-panel.open { right: 0; }

    .detail-panel .close-btn {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      background: none;
      border: none;
      color: var(--color-text-muted);
      font-size: 1.25rem;
      cursor: pointer;
    }

    .detail-panel h2 {
      font-size: 1.125rem;
      color: var(--color-text-primary);
      margin-bottom: 0.5rem;
      padding-right: 2rem;
    }

    .detail-panel .type-badge {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.6875rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.75rem;
    }

    .detail-section {
      margin-bottom: 1rem;
    }

    .detail-section h3 {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-muted);
      margin-bottom: 0.375rem;
    }

    .detail-section ul {
      list-style: none;
      font-size: 0.8125rem;
    }

    .detail-section li {
      padding: 0.25rem 0;
      border-bottom: 1px solid var(--color-bg-base);
      color: var(--color-text-body);
    }

    .detail-section li:last-child { border-bottom: none; }

    /* ===== Decisions Tab ===== */
    .decisions-toolbar {
      display: flex;
      gap: 0.75rem;
      padding: 0.75rem 1.25rem;
      background: var(--color-bg-elevated);
      border-bottom: 1px solid var(--color-border-subtle);
      flex-wrap: wrap;
    }

    .decision-list {
      padding: 1rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      overflow-y: auto;
    }

    .decision-card {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-default);
      border-radius: 0.5rem;
      padding: 1rem;
    }

    .decision-card .card-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .decision-card .card-header .type-badge {
      padding: 0.125rem 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.6875rem;
      font-weight: 600;
      color: #fff;
    }

    .decision-card .card-header .what {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-text-primary);
      flex: 1;
    }

    .decision-card .card-header .timestamp {
      font-size: 0.6875rem;
      color: var(--color-text-muted);
    }

    .confidence-bar {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.6875rem;
      color: var(--color-text-muted);
    }

    .confidence-bar .bar {
      width: 40px;
      height: 4px;
      background: var(--color-border-default);
      border-radius: 2px;
      overflow: hidden;
    }

    .confidence-bar .bar .fill {
      height: 100%;
      border-radius: 2px;
      background: var(--color-interactive);
    }

    .decision-card .why {
      font-size: 0.8125rem;
      color: var(--color-text-body);
      margin-bottom: 0.5rem;
      line-height: 1.5;
    }

    .decision-card .alternatives {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      margin-bottom: 0.5rem;
    }

    .entity-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      margin-bottom: 0.375rem;
    }

    .entity-chip {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.6875rem;
      color: #fff;
      cursor: pointer;
    }

    .entity-chip:hover { opacity: 0.8; }

    .relation-list {
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }

    .relation-list span { color: var(--color-text-secondary); }

    .decision-card .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--color-bg-base);
    }

    .session-id {
      font-size: 0.6875rem;
      color: var(--color-text-muted);
      font-family: monospace;
    }

    .show-in-graph-btn {
      background: var(--color-interactive);
      color: #fff;
      border: none;
      border-radius: 0.25rem;
      padding: 0.25rem 0.625rem;
      font-size: 0.6875rem;
      font-family: inherit;
      cursor: pointer;
    }

    .show-in-graph-btn:hover { background: var(--color-interactive-hover); }

    /* ===== Entities Tab ===== */
    .entities-toolbar {
      display: flex;
      gap: 0.75rem;
      padding: 0.75rem 1.25rem;
      background: var(--color-bg-elevated);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .entities-container {
      padding: 1rem 1.25rem;
      overflow-y: auto;
    }

    .entity-group {
      margin-bottom: 1rem;
    }

    .entity-group-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: var(--color-bg-elevated);
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      user-select: none;
      margin-bottom: 0.5rem;
      width: 100%;
      font-family: inherit;
      font-size: inherit;
      color: inherit;
      text-align: left;
    }

    .entity-group-header .dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }

    .entity-group-header .label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--color-text-primary);
    }

    .entity-group-header .count {
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }

    .entity-group-header .chevron {
      margin-left: auto;
      color: var(--color-text-muted);
      transition: transform 0.15s;
    }

    .entity-group-header.collapsed .chevron {
      transform: rotate(-90deg);
    }

    .entity-group-items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 0.5rem;
    }

    .entity-group-items.hidden { display: none; }

    .entity-card {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-default);
      border-radius: 0.375rem;
      padding: 0.75rem;
    }

    .entity-card .ent-header {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      margin-bottom: 0.375rem;
    }

    .entity-card .ent-name {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--color-text-primary);
    }

    .entity-card .conn-count {
      font-size: 0.6875rem;
      color: var(--color-text-muted);
      margin-left: auto;
    }

    .entity-card .obs-list {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      list-style: none;
      margin-bottom: 0.375rem;
    }

    .entity-card .obs-list li {
      padding: 0.125rem 0;
    }

    .entity-card .highlight-btn {
      background: none;
      border: 1px solid var(--color-border-input);
      color: var(--color-text-muted);
      border-radius: 0.25rem;
      padding: 0.125rem 0.5rem;
      font-size: 0.6875rem;
      font-family: inherit;
      cursor: pointer;
    }

    .entity-card .highlight-btn:hover {
      border-color: var(--color-interactive);
      color: var(--color-interactive);
    }

    /* ===== Stats Tab ===== */
    .stats-container {
      padding: 1.25rem;
      overflow-y: auto;
    }

    .stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .stat-card {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-default);
      border-radius: 0.5rem;
      padding: 1rem;
    }

    .stat-card h3 {
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-muted);
      margin-bottom: 0.5rem;
    }

    .stat-card .value {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--color-text-primary);
    }

    .stat-card .breakdown {
      margin-top: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    .stat-card .breakdown .seg {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.6875rem;
      color: var(--color-text-muted);
    }

    .stat-card .breakdown .seg .dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    .timeline-section {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-default);
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1.25rem;
    }

    .timeline-section h3 {
      font-size: 0.8125rem;
      color: var(--color-text-primary);
      margin-bottom: 0.75rem;
    }

    .timeline-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 80px;
      overflow-x: auto;
    }

    .timeline-bar {
      min-width: 8px;
      border-radius: 2px 2px 0 0;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .timeline-bar:hover { opacity: 0.7; }

    .sessions-table-section {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-default);
      border-radius: 0.5rem;
      padding: 1rem;
    }

    .sessions-table-section h3 {
      font-size: 0.8125rem;
      color: var(--color-text-primary);
      margin-bottom: 0.75rem;
    }

    .sessions-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }

    .sessions-table th {
      text-align: left;
      padding: 0.5rem;
      color: var(--color-text-muted);
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--color-border-default);
    }

    .sessions-table td {
      padding: 0.5rem;
      border-bottom: 1px solid var(--color-bg-base);
      color: var(--color-text-body);
    }

    .sessions-table tr {
      cursor: pointer;
    }

    .sessions-table tr:hover td {
      background: var(--color-bg-elevated);
    }

    .sessions-table .mono {
      font-family: monospace;
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }

    /* ===== Utilities ===== */
    .sort-btn {
      background: none;
      border: 1px solid var(--color-border-input);
      color: var(--color-text-muted);
      border-radius: 0.25rem;
      padding: 0.25rem 0.5rem;
      font-size: 0.6875rem;
      font-family: inherit;
      cursor: pointer;
    }

    .sort-btn:hover,
    .sort-btn.active {
      border-color: var(--color-interactive);
      color: var(--color-interactive);
    }

    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 99;
    }

    .overlay.open { display: block; }

    /* scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
    ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    }

    /* ===== Empty States ===== */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 1rem;
      color: var(--color-text-muted);
      text-align: center;
    }
    .empty-state .icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.5; }
    .empty-state h3 { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 0.5rem; }
    .empty-state p { font-size: 0.875rem; margin-bottom: 1rem; }
    .empty-state button {
      background: var(--color-interactive);
      color: #fff;
      border: none;
      border-radius: 0.25rem;
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
      cursor: pointer;
    }
    .empty-state button:hover { background: var(--color-interactive-hover); }

    /* ===== Legend ===== */
    .graph-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 0.5rem 1.25rem;
      background: var(--color-bg-elevated);
      border-top: 1px solid var(--color-border-subtle);
      font-size: 0.6875rem;
      color: var(--color-text-muted);
    }
    .legend-section { display: flex; align-items: center; gap: 0.5rem; }
    .legend-section strong { color: var(--color-text-secondary); margin-right: 0.25rem; }
    .legend-item { display: inline-flex; align-items: center; gap: 0.25rem; }
    .legend-line { width: 20px; height: 2px; }
    .legend-line.solid { background: var(--color-border-input); }
    .legend-line.dashed { background: repeating-linear-gradient(90deg, var(--color-border-input) 0, var(--color-border-input) 6px, transparent 6px, transparent 10px); }
    .legend-line.dotted { background: repeating-linear-gradient(90deg, var(--color-border-input) 0, var(--color-border-input) 2px, transparent 2px, transparent 5px); }

    /* ===== Responsive ===== */
    @media (max-width: 640px) {
      .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
      }
      .top-bar input[type="text"] { width: 100%; }
      .tab-bar { overflow-x: auto; }
      .graph-toolbar { gap: 0.5rem; }
      .entity-toggle { font-size: 0.6875rem; }
      .decisions-toolbar { flex-direction: column; gap: 0.5rem; }
      .decision-card .card-footer { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
      .entity-group-items { grid-template-columns: 1fr; }
      .stats-row { grid-template-columns: 1fr; }
      .sessions-table-wrapper { overflow-x: auto; }
    }
  </style>
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Top bar with session filter -->
  <header class="top-bar">
    <h1>Knowledge Graph Playground</h1>
    <label for="session-filter" class="sr-only">Filter by session</label>
    <select id="session-filter" aria-label="Filter by session">
      <option value="all">All Sessions</option>
    </select>
    <label for="search-global" class="sr-only">Search entities</label>
    <input type="text" id="search-global" placeholder="Search entities..." aria-label="Search entities in graph">
  </header>

  <!-- Tab bar -->
  <nav class="tab-bar" role="tablist" aria-label="Content sections">
    <button class="tab-btn active" data-tab="graph" role="tab" aria-selected="true" aria-controls="tab-graph" id="tab-btn-graph" tabindex="0">Graph</button>
    <button class="tab-btn" data-tab="decisions" role="tab" aria-selected="false" aria-controls="tab-decisions" id="tab-btn-decisions" tabindex="-1">Decisions</button>
    <button class="tab-btn" data-tab="entities" role="tab" aria-selected="false" aria-controls="tab-entities" id="tab-btn-entities" tabindex="-1">Entities</button>
    <button class="tab-btn" data-tab="stats" role="tab" aria-selected="false" aria-controls="tab-stats" id="tab-btn-stats" tabindex="-1">Stats</button>
  </nav>

  <main id="main-content">
    <!-- Graph Tab -->
    <div class="tab-content active" id="tab-graph" role="tabpanel" aria-labelledby="tab-btn-graph">
      <div class="graph-toolbar" id="entity-toggles" role="group" aria-label="Entity type filters"></div>
      <div id="graph-canvas" role="application" aria-label="Interactive knowledge graph visualization" aria-roledescription="force-directed graph"></div>
      <div class="graph-legend" id="graph-legend" aria-label="Graph legend">
        <div class="legend-section">
          <strong>Edges:</strong>
          <span class="legend-item"><span class="legend-line solid"></span> Strong (CHOSE, SOLVED_BY)</span>
          <span class="legend-item"><span class="legend-line dashed"></span> Rejected (CHOSE_OVER)</span>
          <span class="legend-item"><span class="legend-line dotted"></span> Weak (MENTIONS)</span>
        </div>
        <div class="legend-section">
          <strong>Tip:</strong> Double-click node to focus neighborhood, click edge for details
        </div>
      </div>
      <div class="graph-statusbar" role="status" aria-live="polite">
        <span id="status-nodes">0 nodes</span>
        <span id="status-edges">0 edges</span>
        <span id="status-sessions">0 sessions</span>
      </div>
    </div>

    <!-- Decisions Tab -->
    <div class="tab-content" id="tab-decisions" role="tabpanel" aria-labelledby="tab-btn-decisions">
      <div class="decisions-toolbar">
        <label for="decisions-category-filter" class="sr-only">Filter by category</label>
        <select id="decisions-category-filter" aria-label="Filter by category">
          <option value="all">All Categories</option>
        </select>
        <label for="decisions-search" class="sr-only">Search decisions</label>
        <input type="text" id="decisions-search" placeholder="Search decisions..." aria-label="Search decisions">
        <div role="group" aria-label="Sort options">
          <button class="sort-btn active" data-sort="newest" aria-pressed="true">Newest</button>
          <button class="sort-btn" data-sort="type" aria-pressed="false">Type</button>
          <button class="sort-btn" data-sort="confidence" aria-pressed="false">Confidence</button>
        </div>
      </div>
      <div class="decision-list" id="decision-list" aria-live="polite"></div>
    </div>

    <!-- Entities Tab -->
    <div class="tab-content" id="tab-entities" role="tabpanel" aria-labelledby="tab-btn-entities">
      <div class="entities-toolbar">
        <label for="entities-search" class="sr-only">Search entities</label>
        <input type="text" id="entities-search" placeholder="Search entities..." aria-label="Search entities">
      </div>
      <div class="entities-container" id="entities-container" aria-live="polite"></div>
    </div>

    <!-- Stats Tab -->
    <div class="tab-content" id="tab-stats" role="tabpanel" aria-labelledby="tab-btn-stats">
      <div class="stats-container" id="stats-container"></div>
    </div>
  </main>

  <!-- Detail panel (slide-in) -->
  <div class="overlay" id="detail-overlay" aria-hidden="true"></div>
  <div class="detail-panel" id="detail-panel" role="dialog" aria-modal="true" aria-labelledby="detail-title" aria-hidden="true">
    <button class="close-btn" id="detail-close" aria-label="Close detail panel">&times;</button>
    <div id="detail-content"></div>
  </div>

  <script>
    // ===== Embedded Data =====
    const DATA = {{PLAYGROUND_DATA}};

    // ===== Color map =====
    const TYPE_COLORS = {
      Decision: '#3B82F6', Preference: '#10B981', Problem: '#EF4444',
      Solution: '#22C55E', Technology: '#F59E0B', Pattern: '#8B5CF6',
      Tool: '#06B6D4', Workflow: '#EC4899'
    };

    // ===== Named Constants =====
    const DEBOUNCE_MS = 300;
    const PHYSICS_ITERATIONS = 150;
    const SESSION_ID_LENGTH = 8;
    const GRAVITATIONAL_CONSTANT = -3000;
    const SPRING_LENGTH = 250;
    const SPRING_CONSTANT = 0.02;
    const NODE_BASE_SIZE = 10;
    const NODE_SIZE_PER_CONNECTION = 3;
    const MAX_OBSERVATIONS = 5;
    const MAX_CONNECTED_NAMES = 5;
    const FOCUS_DELAY_MS = 100;
    const HIGHLIGHT_DURATION_MS = 500;
    const DETAIL_DELAY_MS = 300;
    const TOOLTIP_DELAY_MS = 200;
    const KEYBOARD_SPEED = { x: 10, y: 10, zoom: 0.02 };

    // ===== Node ID Helper =====
    // Uses pre-computed map from server, with inline fallback for edge cases
    function getNodeIdForEntity(entityType, name) {
      if (DATA.entityNodeIds?.[name]) return DATA.entityNodeIds[name];
      const prefixes = {Decision:'d_',Preference:'pref_',Problem:'prob_',Solution:'sol_',
        Technology:'t_',Pattern:'p_',Tool:'tool_',Workflow:'w_'};
      return (prefixes[entityType] || 'p_') + name.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
    }

    // ===== Lookup Maps for O(1) access =====
    const nodeById = new Map(DATA.nodes.map(n => [n.id, n]));
    const edgesByNodeId = new Map();
    DATA.nodes.forEach(n => edgesByNodeId.set(n.id, []));
    DATA.edges.forEach((e, i) => {
      if (edgesByNodeId.has(e.from)) edgesByNodeId.get(e.from).push({ ...e, _idx: i });
      if (edgesByNodeId.has(e.to)) edgesByNodeId.get(e.to).push({ ...e, _idx: i });
    });

    // ===== State =====
    let currentSession = 'all';
    let network = null;
    let allNodes = null;
    let allEdges = null;
    let visibleTypes = new Set(Object.keys(TYPE_COLORS));
    let lastFocusedElement = null; // For focus restoration

    // ===== Debounce utility =====
    function debounce(fn, ms) {
      let timeout;
      return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn(...args), ms);
      };
    }

    // ===== Init =====
    document.addEventListener('DOMContentLoaded', () => {
      populateSessionFilter();
      initTabs();
      initEntityToggles();
      initGraph();
      renderDecisions();
      renderEntities();
      renderStats();
      initDetailPanel();
    });

    // ===== Session Filter =====
    function populateSessionFilter() {
      const sel = document.getElementById('session-filter');
      for (const s of DATA.sessions) {
        const opt = document.createElement('option');
        opt.value = s.id;
        opt.textContent = s.label;
        sel.appendChild(opt);
      }
      sel.addEventListener('change', () => {
        currentSession = sel.value;
        applySessionFilter();
      });
    }

    function applySessionFilter() {
      filterGraph();
      renderDecisions();
      renderEntities();
      renderStats();
    }

    function getFilteredNodes() {
      if (currentSession === 'all') return DATA.nodes;
      return DATA.nodes.filter(n => n.sessionIds.includes(currentSession));
    }

    function getFilteredEdges() {
      if (currentSession === 'all') return DATA.edges;
      return DATA.edges.filter(e => e.sessionId === currentSession);
    }

    function getFilteredDecisions() {
      if (currentSession === 'all') return DATA.decisions;
      return DATA.decisions.filter(d => d.metadata?.session_id === currentSession);
    }

    // ===== Tabs =====
    function initTabs() {
      const tabBtns = document.querySelectorAll('.tab-btn');
      tabBtns.forEach(btn => {
        btn.addEventListener('click', () => switchTab(btn.dataset.tab));
        // Roving tabindex: arrow keys move focus AND activate tab
        btn.addEventListener('keydown', (e) => {
          const tabs = [...tabBtns];
          const idx = tabs.indexOf(btn);
          let nextIdx = -1;
          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
            e.preventDefault();
            nextIdx = (idx + 1) % tabs.length;
          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
            e.preventDefault();
            nextIdx = (idx - 1 + tabs.length) % tabs.length;
          } else if (e.key === 'Home') {
            e.preventDefault();
            nextIdx = 0;
          } else if (e.key === 'End') {
            e.preventDefault();
            nextIdx = tabs.length - 1;
          }
          if (nextIdx >= 0) {
            switchTab(tabs[nextIdx].dataset.tab);
            tabs[nextIdx].focus();
          }
        });
      });
    }

    function switchTab(tabName) {
      document.querySelectorAll('.tab-btn').forEach(b => {
        b.classList.remove('active');
        b.setAttribute('aria-selected', 'false');
        b.setAttribute('tabindex', '-1');
      });
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
      const btn = document.querySelector(`[data-tab="${tabName}"]`);
      btn.classList.add('active');
      btn.setAttribute('aria-selected', 'true');
      btn.setAttribute('tabindex', '0');
      document.getElementById('tab-' + tabName).classList.add('active');
      if (tabName === 'graph' && network) {
        setTimeout(() => network.fit(), 100);
      }
    }

    function switchToGraphTab(nodeIds, openDetailForFirst = false) {
      switchTab('graph');
      if (network && nodeIds && nodeIds.length > 0) {
        const existing = nodeIds.filter(id => {
          try { return allNodes.get(id) !== null; } catch { return false; }
        });
        if (existing.length > 0) {
          network.selectNodes(existing);
          network.focus(existing[0], { scale: 1.2, animation: true });
          // Highlight animation
          existing.forEach(id => {
            const origColor = allNodes.get(id)?.color;
            allNodes.update({ id, color: { background: '#fff', border: '#fff' } });
            setTimeout(() => {
              if (origColor) allNodes.update({ id, color: origColor });
            }, HIGHLIGHT_DURATION_MS);
          });
          // Auto-open detail panel for first node
          if (openDetailForFirst) {
            setTimeout(() => showNodeDetail(existing[0]), DETAIL_DELAY_MS);
          }
        }
      }
    }

    // ===== Entity type toggles =====
    function initEntityToggles() {
      const container = document.getElementById('entity-toggles');
      for (const [type, color] of Object.entries(TYPE_COLORS)) {
        const label = document.createElement('label');
        label.className = 'entity-toggle';
        label.innerHTML = `<input type="checkbox" checked data-type="${type}"><span class="dot" style="background:${color}"></span>${type}`;
        container.appendChild(label);
      }
      container.addEventListener('change', (e) => {
        if (e.target.type === 'checkbox') {
          const t = e.target.dataset.type;
          if (e.target.checked) visibleTypes.add(t);
          else visibleTypes.delete(t);
          filterGraph();
        }
      });
    }

    // ===== Graph =====
    function initGraph() {
      const container = document.getElementById('graph-canvas');

      const nodes = DATA.nodes.map(n => ({
        id: n.id,
        label: n.name,
        color: { background: n.color, border: n.color, highlight: { background: n.color, border: '#fff' } },
        size: NODE_BASE_SIZE + n.connectionCount * NODE_SIZE_PER_CONNECTION,
        shape: 'dot',
        font: { color: '#e2e8f0', size: 11 },
        title: `${n.name}\nType: ${n.entityType}\nObservations: ${n.observations.length}\nConnections: ${n.connectionCount}`,
        _entityType: n.entityType,
        _sessionIds: n.sessionIds,
      }));

      const edges = DATA.edges.map((e, i) => {
        const dashes = e.edgeCategory === 'rejected' ? [10, 5]
          : e.edgeCategory === 'weak' ? [3, 3]
          : false;
        return {
          id: 'e' + i,
          from: e.from,
          to: e.to,
          label: e.relationType,
          dashes,
          arrows: { to: { enabled: true, scaleFactor: 0.6 } },
          color: { color: '#475569', highlight: '#3B82F6' },
          font: { color: '#64748b', size: 9, strokeWidth: 0 },
          _sessionId: e.sessionId,
          _relationType: e.relationType,
          _edgeCategory: e.edgeCategory,
        };
      });

      allNodes = new vis.DataSet(nodes);
      allEdges = new vis.DataSet(edges);

      network = new vis.Network(container, { nodes: allNodes, edges: allEdges }, {
        physics: {
          barnesHut: {
            gravitationalConstant: GRAVITATIONAL_CONSTANT,
            springLength: SPRING_LENGTH,
            springConstant: SPRING_CONSTANT,
          },
          stabilization: { iterations: PHYSICS_ITERATIONS },
        },
        interaction: {
          hover: true,
          tooltipDelay: TOOLTIP_DELAY_MS,
          navigationButtons: true, // Enable for better accessibility
          keyboard: {
            enabled: true,
            speed: KEYBOARD_SPEED,
            bindToWindow: false,
          },
        },
        layout: { improvedLayout: true },
      });

      network.on('click', (params) => {
        if (params.nodes.length > 0) {
          showNodeDetail(params.nodes[0]);
        } else if (params.edges.length > 0) {
          showEdgeDetail(params.edges[0]);
        } else {
          closeDetail();
        }
      });

      network.on('doubleClick', (params) => {
        if (params.nodes.length > 0) {
          const nodeId = params.nodes[0];
          const connectedNodes = network.getConnectedNodes(nodeId);
          const focusNodes = [nodeId, ...connectedNodes];
          network.fit({ nodes: focusNodes, animation: true });
        }
      });

      // Search with debouncing and batch updates
      const handleGlobalSearch = debounce((q) => {
        const updates = [];
        allNodes.forEach(n => {
          if (!q) {
            updates.push({ id: n.id, opacity: 1, font: { color: '#e2e8f0', size: 11 } });
          } else {
            const match = n.label.toLowerCase().includes(q);
            updates.push({
              id: n.id,
              opacity: match ? 1 : 0.15,
              font: { color: match ? '#fff' : '#334155', size: match ? 13 : 9 },
            });
          }
        });
        allNodes.update(updates); // Batch update
      }, DEBOUNCE_MS);

      document.getElementById('search-global').addEventListener('input', (e) => {
        handleGlobalSearch(e.target.value.toLowerCase());
      });

      updateGraphStatus();
    }

    function filterGraph() {
      if (!allNodes) return;
      const filteredNodeIds = new Set();
      const nodeUpdates = [];
      const edgeUpdates = [];

      DATA.nodes.forEach(n => {
        const typeVisible = visibleTypes.has(n.entityType);
        const sessionMatch = currentSession === 'all' || n.sessionIds.includes(currentSession);
        const visible = typeVisible && sessionMatch;
        if (visible) filteredNodeIds.add(n.id);
        const existing = allNodes.get(n.id);
        if (existing) {
          nodeUpdates.push({ id: n.id, hidden: !visible });
        }
      });

      DATA.edges.forEach((e, i) => {
        const id = 'e' + i;
        const sessionMatch = currentSession === 'all' || e.sessionId === currentSession;
        const bothVisible = filteredNodeIds.has(e.from) && filteredNodeIds.has(e.to);
        const existing = allEdges.get(id);
        if (existing) {
          edgeUpdates.push({ id, hidden: !(sessionMatch && bothVisible) });
        }
      });

      // Batch updates for better performance
      allNodes.update(nodeUpdates);
      allEdges.update(edgeUpdates);

      updateGraphStatus();
    }

    function updateGraphStatus() {
      let visNodes = 0, visEdges = 0;
      allNodes.forEach(n => { if (!n.hidden) visNodes++; });
      allEdges.forEach(e => { if (!e.hidden) visEdges++; });
      document.getElementById('status-nodes').textContent = visNodes + ' nodes';
      document.getElementById('status-edges').textContent = visEdges + ' edges';
      document.getElementById('status-sessions').textContent = DATA.sessions.length + ' sessions';
    }

    // ===== Detail Panel =====
    function initDetailPanel() {
      const closeBtn = document.getElementById('detail-close');
      const overlay = document.getElementById('detail-overlay');
      const panel = document.getElementById('detail-panel');

      closeBtn.addEventListener('click', closeDetail);
      overlay.addEventListener('click', closeDetail);

      // Escape key to close
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && panel.classList.contains('open')) {
          closeDetail();
        }
      });

      // Focus trap within dialog
      panel.addEventListener('keydown', (e) => {
        if (e.key !== 'Tab') return;
        const focusable = panel.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        const first = focusable[0];
        const last = focusable[focusable.length - 1];
        if (e.shiftKey && document.activeElement === first) {
          e.preventDefault();
          last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
          e.preventDefault();
          first.focus();
        }
      });
    }

    function openDetail(html, titleText = 'Details') {
      const panel = document.getElementById('detail-panel');
      const overlay = document.getElementById('detail-overlay');
      const content = document.getElementById('detail-content');

      // Store last focused element for restoration
      lastFocusedElement = document.activeElement;

      content.innerHTML = html;
      panel.classList.add('open');
      overlay.classList.add('open');
      panel.setAttribute('aria-hidden', 'false');
      overlay.setAttribute('aria-hidden', 'false');

      // Move focus to close button
      setTimeout(() => {
        document.getElementById('detail-close').focus();
      }, FOCUS_DELAY_MS);
    }

    function closeDetail() {
      const panel = document.getElementById('detail-panel');
      const overlay = document.getElementById('detail-overlay');

      panel.classList.remove('open');
      overlay.classList.remove('open');
      panel.setAttribute('aria-hidden', 'true');
      overlay.setAttribute('aria-hidden', 'true');

      // Restore focus
      if (lastFocusedElement) {
        lastFocusedElement.focus();
        lastFocusedElement = null;
      }
    }

    function showNodeDetail(nodeId) {
      const node = nodeById.get(nodeId);
      if (!node) return;

      // Use lookup map for O(1) edge access
      const connectedEdges = edgesByNodeId.get(nodeId) || [];
      const connectedNodeIds = new Set();
      connectedEdges.forEach(e => {
        connectedNodeIds.add(e.from === nodeId ? e.to : e.from);
      });
      const connectedNodes = [...connectedNodeIds].map(id => nodeById.get(id)).filter(Boolean);

      // Find source decisions
      const sourceRecordSet = new Set(node.sourceRecordIds || []);
      const sourceDecisions = DATA.decisions.filter(d => sourceRecordSet.has(d.id));

      let html = `
        <h2 id="detail-title">${esc(node.name)}</h2>
        <div class="type-badge" style="background:${node.color}">${esc(node.entityType)}</div>
        <div class="detail-section">
          <h3>Observations (${node.observations.length})</h3>
          <ul>${node.observations.map(o => `<li>${esc(o)}</li>`).join('') || '<li>None</li>'}</ul>
        </div>
        <div class="detail-section">
          <h3>Connected Entities (${connectedNodes.length})</h3>
          <ul>${connectedNodes.map(cn => `<li><span style="color:${cn.color}">\u25CF</span> ${esc(cn.name)}</li>`).join('') || '<li>None</li>'}</ul>
        </div>
        <div class="detail-section">
          <h3>Relations</h3>
          <ul>${connectedEdges.map(e => {
            const fromNode = nodeById.get(e.from);
            const toNode = nodeById.get(e.to);
            return `<li>${esc(fromNode?.name || e.from)} → <span style="color:#3B82F6">${esc(e.relationType)}</span> → ${esc(toNode?.name || e.to)}</li>`;
          }).join('') || '<li>None</li>'}</ul>
        </div>
        <div class="detail-section">
          <h3>Source Decisions (${sourceDecisions.length})</h3>
          <ul>${sourceDecisions.map(d => `<li>${esc(d.content?.what || d.id)}</li>`).join('') || '<li>None</li>'}</ul>
        </div>
        <div class="detail-section">
          <h3>Sessions</h3>
          <ul>${node.sessionIds.map(s => `<li class="mono" style="font-family:monospace;font-size:0.75rem;color:#94a3b8">${esc(s.slice(0,SESSION_ID_LENGTH))}</li>`).join('')}</ul>
        </div>`;
      openDetail(html, node.name);
    }

    function showEdgeDetail(edgeId) {
      const idx = parseInt(edgeId.replace('e', ''), 10);
      const edge = DATA.edges[idx];
      if (!edge) return;
      const fromNode = nodeById.get(edge.from);
      const toNode = nodeById.get(edge.to);
      let html = `
        <h2 id="detail-title">Relation</h2>
        <div class="detail-section">
          <h3>Type</h3>
          <p style="font-size:0.875rem;color:#3B82F6;font-weight:600">${esc(edge.relationType)}</p>
        </div>
        <div class="detail-section">
          <h3>Category</h3>
          <p style="font-size:0.8125rem;color:#94a3b8">${esc(edge.edgeCategory)}</p>
        </div>
        <div class="detail-section">
          <h3>From</h3>
          <p style="font-size:0.8125rem"><span style="color:${fromNode?.color || '#fff'}">\u25CF</span> ${esc(fromNode?.name || edge.from)}</p>
        </div>
        <div class="detail-section">
          <h3>To</h3>
          <p style="font-size:0.8125rem"><span style="color:${toNode?.color || '#fff'}">\u25CF</span> ${esc(toNode?.name || edge.to)}</p>
        </div>
        <div class="detail-section">
          <h3>Session</h3>
          <p style="font-family:monospace;font-size:0.75rem;color:#94a3b8">${esc(edge.sessionId?.slice(0,SESSION_ID_LENGTH) || 'unknown')}</p>
        </div>`;
      openDetail(html, 'Relation');
    }

    // ===== Decisions Tab =====
    const debouncedRenderDecisions = debounce(() => renderDecisions(), DEBOUNCE_MS);

    function renderDecisions() {
      const container = document.getElementById('decision-list');
      let decisions = getFilteredDecisions();

      // Populate category dropdown
      const catSelect = document.getElementById('decisions-category-filter');
      const cats = new Set(DATA.decisions.map(d => d.metadata?.category || 'general'));
      // Only rebuild options if needed
      if (catSelect.options.length <= 1) {
        for (const c of [...cats].sort()) {
          const opt = document.createElement('option');
          opt.value = c;
          opt.textContent = c;
          catSelect.appendChild(opt);
        }
        catSelect.addEventListener('change', () => renderDecisions());
      }

      // Apply category filter
      const catFilter = catSelect.value;
      if (catFilter !== 'all') {
        decisions = decisions.filter(d => (d.metadata?.category || 'general') === catFilter);
      }

      // Apply search
      const searchQ = document.getElementById('decisions-search').value.toLowerCase();
      if (searchQ) {
        decisions = decisions.filter(d =>
          (d.content?.what || '').toLowerCase().includes(searchQ) ||
          (d.content?.why || '').toLowerCase().includes(searchQ)
        );
      }

      // Apply sort
      const activeSort = document.querySelector('.sort-btn.active')?.dataset.sort || 'newest';
      if (activeSort === 'newest') {
        decisions.sort((a, b) => (b.metadata?.timestamp || '').localeCompare(a.metadata?.timestamp || ''));
      } else if (activeSort === 'type') {
        decisions.sort((a, b) => (a.type || '').localeCompare(b.type || ''));
      } else if (activeSort === 'confidence') {
        decisions.sort((a, b) => (b.metadata?.confidence || 0) - (a.metadata?.confidence || 0));
      }

      // Empty state
      if (decisions.length === 0) {
        container.innerHTML = `
          <div class="empty-state">
            <div class="icon">📋</div>
            <h3>No decisions found</h3>
            <p>${searchQ ? `No results for "${esc(searchQ)}"` : catFilter !== 'all' ? `No decisions in category "${esc(catFilter)}"` : 'No decisions recorded yet.'}</p>
            ${searchQ || catFilter !== 'all' ? '<button onclick="document.getElementById(\'decisions-search\').value=\'\';document.getElementById(\'decisions-category-filter\').value=\'all\';renderDecisions()">Clear Filters</button>' : ''}
          </div>`;
        return;
      }

      container.innerHTML = decisions.map(d => {
        const typeColor = TYPE_COLORS[capitalize(d.type)] || '#94a3b8';
        const conf = d.metadata?.confidence || 0;
        const ts = d.metadata?.timestamp ? new Date(d.metadata.timestamp).toLocaleDateString() : '';

        const entitiesHtml = (d.entities || []).map(e => {
          const ent = typeof e === 'string' ? { name: e, entityType: 'Pattern' } : e;
          const c = TYPE_COLORS[ent.entityType] || '#8B5CF6';
          const nodeId = getNodeIdForEntity(ent.entityType, ent.name);
          // Use dark text for light badges (amber, green, cyan)
          const textColor = ['Technology', 'Solution', 'Tool'].includes(ent.entityType) ? '#0f172a' : '#fff';
          return `<span class="entity-chip" style="background:${c};color:${textColor}" data-entity="${esc(ent.name)}" data-node-id="${nodeId}" role="button" tabindex="0" onclick="switchToGraphTab(['${nodeId}'], true)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();switchToGraphTab(['${nodeId}'], true)}">${esc(ent.name)}</span>`;
        }).join('');

        const relationsHtml = (d.relations || []).map(r =>
          `<span>${esc(r.from)}</span> → ${esc(r.relationType)} → <span>${esc(r.to)}</span>`
        ).join('<br>');

        const alternativesHtml = d.content?.alternatives?.length
          ? `<div class="alternatives">Alternatives: ${d.content.alternatives.map(a => esc(a)).join(', ')}</div>`
          : '';

        // Collect node IDs for "Show in Graph"
        const nodeIds = (d.entities || []).map(e => {
          const ent = typeof e === 'string' ? { name: e, entityType: 'Pattern' } : e;
          return getNodeIdForEntity(ent.entityType || 'Pattern', ent.name);
        });

        return `<div class="decision-card">
          <div class="card-header">
            <span class="type-badge" style="background:${typeColor}">${esc(d.type || 'unknown')}</span>
            <span class="what">${esc(d.content?.what || d.id)}</span>
            <span class="timestamp">${ts}</span>
            <span class="confidence-bar" role="progressbar" aria-valuenow="${Math.round(conf * 100)}" aria-valuemin="0" aria-valuemax="100"><span class="bar" aria-hidden="true"><span class="fill" style="width:${conf * 100}%"></span></span>${(conf * 100).toFixed(0)}%</span>
          </div>
          ${d.content?.why ? `<div class="why">${esc(d.content.why)}</div>` : ''}
          ${alternativesHtml}
          <div class="entity-chips">${entitiesHtml}</div>
          ${relationsHtml ? `<div class="relation-list">${relationsHtml}</div>` : ''}
          <div class="card-footer">
            <span class="session-id">${esc((d.metadata?.session_id || '').slice(0, SESSION_ID_LENGTH))}</span>
            <button class="show-in-graph-btn" onclick='switchToGraphTab(${JSON.stringify(nodeIds)}, true)'>Show in Graph</button>
          </div>
        </div>`;
      }).join('');

      // Search listener (only attach once) with debounce
      const searchInput = document.getElementById('decisions-search');
      if (!searchInput._attached) {
        searchInput._attached = true;
        searchInput.addEventListener('input', debouncedRenderDecisions);
      }

      // Sort buttons
      document.querySelectorAll('.sort-btn').forEach(btn => {
        if (!btn._attached) {
          btn._attached = true;
          btn.addEventListener('click', () => {
            document.querySelectorAll('.sort-btn').forEach(b => {
              b.classList.remove('active');
              b.setAttribute('aria-pressed', 'false');
            });
            btn.classList.add('active');
            btn.setAttribute('aria-pressed', 'true');
            renderDecisions();
          });
        }
      });
    }

    // ===== Entities Tab =====
    const debouncedRenderEntities = debounce(() => renderEntities(), DEBOUNCE_MS);

    function toggleEntityGroup(header) {
      const isCollapsed = header.classList.toggle('collapsed');
      header.setAttribute('aria-expanded', !isCollapsed);
      header.nextElementSibling.classList.toggle('hidden');
    }

    function renderEntities() {
      const container = document.getElementById('entities-container');
      const filteredNodes = getFilteredNodes();
      const searchQ = document.getElementById('entities-search').value.toLowerCase();

      const filtered = searchQ
        ? filteredNodes.filter(n => n.name.toLowerCase().includes(searchQ) || n.entityType.toLowerCase().includes(searchQ))
        : filteredNodes;

      // Group by type
      const groups = {};
      for (const n of filtered) {
        if (!groups[n.entityType]) groups[n.entityType] = [];
        groups[n.entityType].push(n);
      }

      // Empty state
      if (filtered.length === 0) {
        container.innerHTML = `
          <div class="empty-state">
            <div class="icon">🔍</div>
            <h3>No entities found</h3>
            <p>${searchQ ? `No results for "${esc(searchQ)}"` : 'No entities in the current session.'}</p>
            ${searchQ ? '<button onclick="document.getElementById(\'entities-search\').value=\'\';renderEntities()">Clear Search</button>' : ''}
          </div>`;
        return;
      }

      container.innerHTML = Object.entries(TYPE_COLORS).map(([type, color]) => {
        const items = groups[type] || [];
        if (items.length === 0) return '';
        // Use dark text for light badges
        const textColor = ['Technology', 'Solution', 'Tool'].includes(type) ? '#0f172a' : '#fff';
        return `<div class="entity-group">
          <button class="entity-group-header" type="button" aria-expanded="true" onclick="toggleEntityGroup(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleEntityGroup(this)}">
            <span class="dot" style="background:${color}" aria-hidden="true"></span>
            <span class="label">${esc(type)}</span>
            <span class="count">(${items.length})</span>
            <span class="chevron" aria-hidden="true">\u25BC</span>
          </button>
          <div class="entity-group-items" role="region" aria-label="${type} entities">
            ${items.map(n => {
              // Use lookup maps for O(1) access
              const connEdges = edgesByNodeId.get(n.id) || [];
              const connNodes = new Set();
              connEdges.forEach(e => connNodes.add(e.from === n.id ? e.to : e.from));
              const connNames = [...connNodes].map(cid => {
                const cn = nodeById.get(cid);
                return cn ? cn.name : cid;
              });
              return `<div class="entity-card">
                <div class="ent-header">
                  <span class="type-badge" style="background:${color};color:${textColor}">${esc(type)}</span>
                  <span class="ent-name">${esc(n.name)}</span>
                  <span class="conn-count">${n.connectionCount} connections</span>
                </div>
                ${n.observations.length > 0 ? `<ul class="obs-list">${n.observations.slice(0, MAX_OBSERVATIONS).map(o => `<li>- ${esc(o)}</li>`).join('')}${n.observations.length > MAX_OBSERVATIONS ? `<li style="color:var(--color-text-muted)">...and ${n.observations.length - MAX_OBSERVATIONS} more</li>` : ''}</ul>` : ''}
                ${connNames.length > 0 ? `<div style="font-size:0.75rem;color:var(--color-text-muted);margin-bottom:0.375rem">Connected: ${connNames.slice(0, MAX_CONNECTED_NAMES).map(c => esc(c)).join(', ')}${connNames.length > MAX_CONNECTED_NAMES ? ` +${connNames.length - MAX_CONNECTED_NAMES}` : ''}</div>` : ''}
                <button class="highlight-btn" onclick="switchToGraphTab(['${n.id}'], true)">Show in Graph</button>
              </div>`;
            }).join('')}
          </div>
        </div>`;
      }).join('');

      // Search listener with debounce
      const searchInput = document.getElementById('entities-search');
      if (!searchInput._attached) {
        searchInput._attached = true;
        searchInput.addEventListener('input', debouncedRenderEntities);
      }
    }

    // ===== Stats Tab =====
    function renderStats() {
      const container = document.getElementById('stats-container');
      const filteredDecisions = getFilteredDecisions();
      const filteredNodes = getFilteredNodes();
      const filteredEdges = getFilteredEdges();

      // Recalculate stats for filtered data
      const entityCountsByType = {};
      filteredNodes.forEach(n => { entityCountsByType[n.entityType] = (entityCountsByType[n.entityType] || 0) + 1; });

      const relationCountsByType = {};
      filteredEdges.forEach(e => { relationCountsByType[e.relationType] = (relationCountsByType[e.relationType] || 0) + 1; });

      const decisionCountsByCategory = {};
      filteredDecisions.forEach(d => {
        const cat = d.metadata?.category || 'general';
        decisionCountsByCategory[cat] = (decisionCountsByCategory[cat] || 0) + 1;
      });

      // Summary cards
      const summaryHtml = `<div class="stats-row">
        <div class="stat-card">
          <h3>Total Entities</h3>
          <div class="value">${filteredNodes.length}</div>
          <div class="breakdown">${Object.entries(entityCountsByType).map(([t, c]) =>
            `<span class="seg"><span class="dot" style="background:${TYPE_COLORS[t] || '#64748b'}"></span>${esc(t)}: ${c}</span>`
          ).join('')}</div>
        </div>
        <div class="stat-card">
          <h3>Total Relations</h3>
          <div class="value">${filteredEdges.length}</div>
          <div class="breakdown">${Object.entries(relationCountsByType).map(([t, c]) =>
            `<span class="seg"><span class="dot" style="background:#475569"></span>${esc(t)}: ${c}</span>`
          ).join('')}</div>
        </div>
        <div class="stat-card">
          <h3>Total Decisions</h3>
          <div class="value">${filteredDecisions.length}</div>
          <div class="breakdown">${Object.entries(decisionCountsByCategory).map(([t, c]) =>
            `<span class="seg"><span class="dot" style="background:#3B82F6"></span>${esc(t)}: ${c}</span>`
          ).join('')}</div>
        </div>
        <div class="stat-card">
          <h3>Queue Depth</h3>
          <div class="value">${DATA.stats.queueDepth}</div>
          <div class="breakdown"><span class="seg">Pending graph operations</span></div>
        </div>
      </div>`;

      // Timeline
      const sortedDecisions = [...filteredDecisions]
        .filter(d => d.metadata?.timestamp)
        .sort((a, b) => (a.metadata.timestamp).localeCompare(b.metadata.timestamp));

      const maxEntities = Math.max(1, ...sortedDecisions.map(d => (d.entities || []).length));

      const timelineHtml = sortedDecisions.length > 0 ? `<div class="timeline-section">
        <h3>Decision Timeline</h3>
        <div class="timeline-bars">
          ${sortedDecisions.map(d => {
            const entCount = (d.entities || []).length;
            const height = Math.max(8, (entCount / maxEntities) * 80);
            const typeColor = TYPE_COLORS[capitalize(d.type)] || '#64748b';
            const tooltip = esc(d.content?.what || d.id);
            return `<div class="timeline-bar" style="height:${height}px;background:${typeColor};flex:1" title="${tooltip}"></div>`;
          }).join('')}
        </div>
      </div>` : '';

      // Sessions table with keyboard accessibility
      const sessionsHtml = DATA.sessions.length > 0 ? `<div class="sessions-table-section">
        <h3>Sessions</h3>
        <div class="sessions-table-wrapper" style="overflow-x:auto">
          <table class="sessions-table">
            <thead>
              <tr><th scope="col">Session ID</th><th scope="col">Date</th><th scope="col">Decisions</th><th scope="col">Entities</th></tr>
            </thead>
            <tbody>
              ${DATA.sessions.map(s => {
                const date = s.startedAt ? new Date(s.startedAt).toLocaleDateString() : 'Unknown';
                return `<tr tabindex="0" role="button" onclick="selectSession('${esc(s.id)}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSession('${esc(s.id)}')}">
                  <td class="mono">${esc(s.id.slice(0, SESSION_ID_LENGTH))}</td>
                  <td>${esc(date)}</td>
                  <td>${s.decisionCount}</td>
                  <td>${s.entityCount}</td>
                </tr>`;
              }).join('')}
            </tbody>
          </table>
        </div>
      </div>` : `<div class="empty-state">
        <div class="icon">📊</div>
        <h3>No sessions</h3>
        <p>Session data will appear here once you start using the knowledge graph.</p>
      </div>`;

      container.innerHTML = summaryHtml + timelineHtml + sessionsHtml;
    }

    // Make selectSession globally available
    window.selectSession = function(sessionId) {
      document.getElementById('session-filter').value = sessionId;
      currentSession = sessionId;
      applySessionFilter();
    };

    // ===== Helpers =====
    function esc(str) {
      if (!str) return '';
      const div = document.createElement('div');
      div.textContent = str;
      return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function capitalize(s) {
      if (!s) return '';
      // Map decision types to entity type names
      const map = { decision: 'Decision', preference: 'Preference', 'problem-solution': 'Problem', pattern: 'Pattern', workflow: 'Workflow' };
      return map[s] || s.charAt(0).toUpperCase() + s.slice(1);
    }

    // Node ID helpers replaced by getNodeIdForEntity() defined above
  </script>
</body>
</html>