script.js

/* ============================================================
   oops.map — The Unauthorized Field Guide to Claude Code
   Complete Interactive JavaScript
   ============================================================ */

(function () {
  'use strict';

  /* ----------------------------------------------------------
     1. LOADING SCREEN
  ---------------------------------------------------------- */
  var loader = document.getElementById('loader');
  var progressBar = document.getElementById('loaderProgress');

  if (loader) {
    var progress = 0;
    var loadInterval = setInterval(function () {
      progress += Math.random() * 8 + 2;
      if (progress >= 100) {
        progress = 100;
        clearInterval(loadInterval);
        setTimeout(function () {
          loader.style.transition = 'opacity 0.6s ease';
          loader.style.opacity = '0';
          setTimeout(function () {
            loader.style.display = 'none';
            document.body.style.overflow = 'visible';
          }, 600);
        }, 300);
      }
      if (progressBar) {
        progressBar.style.width = progress + '%';
      }
    }, 40);
  } else {
    document.body.style.overflow = 'visible';
  }

  /* ----------------------------------------------------------
     2. PARTICLE SYSTEM (Canvas)
  ---------------------------------------------------------- */
  var canvas = document.getElementById('particleCanvas');
  if (canvas) {
    var ctx = canvas.getContext('2d');
    var particles = [];
    var PARTICLE_COUNT = 60;
    var CONNECTION_DISTANCE = 150;

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    var particleColors = [
      'rgba(45, 212, 191, ',
      'rgba(129, 140, 248, ',
      'rgba(255, 255, 255, ',
    ];

    function createParticle() {
      var colorBase = particleColors[Math.floor(Math.random() * particleColors.length)];
      return {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.4,
        vy: (Math.random() - 0.5) * 0.4,
        radius: Math.random() * 2 + 0.5,
        colorBase: colorBase,
        opacity: Math.random() * 0.3 + 0.1,
      };
    }

    for (var pi = 0; pi < PARTICLE_COUNT; pi++) {
      particles.push(createParticle());
    }

    function animateParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        p.x += p.vx;
        p.y += p.vy;

        if (p.x < 0) p.x = canvas.width;
        if (p.x > canvas.width) p.x = 0;
        if (p.y < 0) p.y = canvas.height;
        if (p.y > canvas.height) p.y = 0;

        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = p.colorBase + p.opacity + ')';
        ctx.fill();

        for (var j = i + 1; j < particles.length; j++) {
          var q = particles[j];
          var dx = p.x - q.x;
          var dy = p.y - q.y;
          var dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < CONNECTION_DISTANCE) {
            var lineOpacity = (1 - dist / CONNECTION_DISTANCE) * 0.12;
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(q.x, q.y);
            ctx.strokeStyle = 'rgba(45, 212, 191, ' + lineOpacity + ')';
            ctx.lineWidth = 0.5;
            ctx.stroke();
          }
        }
      }

      requestAnimationFrame(animateParticles);
    }

    animateParticles();
  }

  /* ----------------------------------------------------------
     3. MATRIX RAIN BACKGROUND
  ---------------------------------------------------------- */
  var matrixBg = document.getElementById('matrixBg');
  if (matrixBg) {
    var chars = 'アイウエオカキクケコ01サシスセソタチツテトナニヌネノ{}[]();=>const let var async await import export function class return if else for while';
    var cols = Math.floor(window.innerWidth / 28);
    for (var mi = 0; mi < cols; mi++) {
      var col = document.createElement('div');
      col.className = 'matrix-col';
      col.style.left = (mi * 28 + Math.random() * 14) + 'px';
      col.style.animationDuration = (8 + Math.random() * 12) + 's';
      col.style.animationDelay = (-Math.random() * 10) + 's';
      var text = '';
      for (var mj = 0; mj < 30; mj++) {
        text += chars[Math.floor(Math.random() * chars.length)] + '\n';
      }
      col.textContent = text;
      matrixBg.appendChild(col);
    }
  }

  /* ----------------------------------------------------------
     4. SCROLL PROGRESS BAR
  ---------------------------------------------------------- */
  var scrollProgress = document.getElementById('scrollProgress');

  function updateScrollProgress() {
    if (!scrollProgress) return;
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
    scrollProgress.style.width = scrollPercent + '%';
  }

  window.addEventListener('scroll', updateScrollProgress, { passive: true });
  updateScrollProgress();

  /* ----------------------------------------------------------
     5. SCROLL REVEAL (Intersection Observer)
  ---------------------------------------------------------- */
  var revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');

  if (revealElements.length > 0) {
    var revealObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          revealObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

    revealElements.forEach(function (el) {
      revealObserver.observe(el);
    });
  }

  /* ----------------------------------------------------------
     6. NAV SCROLL EFFECT + SMOOTH SCROLL
  ---------------------------------------------------------- */
  var nav = document.getElementById('navbar');

  function handleNavScroll() {
    if (!nav) return;
    if (window.scrollY > 50) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  }

  window.addEventListener('scroll', handleNavScroll, { passive: true });
  handleNavScroll();

  document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
      var targetId = this.getAttribute('href');
      if (targetId === '#') return;
      var target = document.querySelector(targetId);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth' });
      }
    });
  });

  /* ----------------------------------------------------------
     7. TERMINAL TYPING ANIMATION
  ---------------------------------------------------------- */
  var terminalBody = document.getElementById('terminalBody');

  if (terminalBody) {
    var terminalLines = [
      { delay: 0, html: '<span class="t-prompt">$ </span><span class="t-cmd">npm pack @anthropic-ai/claude-code</span>' },
      { delay: 600, html: '<span class="t-comment"># Extracting package contents...</span>' },
      { delay: 1200, html: '<span class="t-prompt">$ </span><span class="t-cmd">ls -la *.map</span>' },
      { delay: 1800, html: '<span class="t-file">-rw-r--r--  1 user  staff  14.2M  cli.js.map</span>' },
      { delay: 2400, html: '<span class="t-prompt">$ </span><span class="t-cmd">cat cli.js.map | jq \'.sources[:5]\'</span>' },
      { delay: 3000, html: '<span class="t-file">  "src/main.tsx",</span>' },
      { delay: 3200, html: '<span class="t-file">  "src/QueryEngine.ts",</span>' },
      { delay: 3400, html: '<span class="t-file">  "src/tools.ts",</span>' },
      { delay: 3600, html: '<span class="t-file">  "src/Tool.ts",</span>' },
      { delay: 3800, html: '<span class="t-warning">  ... 1,895 more files</span>' },
      { delay: 4800, html: '<span class="t-prompt">$ </span><span class="t-cmd">wc -l src/**/*.ts src/**/*.tsx</span>' },
      { delay: 5400, html: '<span class="t-error">  512,847 total</span>' },
      { delay: 6200, html: '<span class="t-comment"># oh no.</span>' },
      { delay: 7000, html: '<span class="t-success">$ echo "well, time to build oops.map"</span>' },
    ];

    terminalLines.forEach(function (item) {
      setTimeout(function () {
        var line = document.createElement('div');
        line.className = 'terminal-line';
        line.style.animationDelay = '0s';
        line.innerHTML = item.html;
        terminalBody.appendChild(line);
        terminalBody.scrollTop = terminalBody.scrollHeight;
      }, item.delay);
    });
  }

  /* ----------------------------------------------------------
     8. COUNTER ANIMATION
  ---------------------------------------------------------- */
  function easeOutQuart(t) {
    return 1 - Math.pow(1 - t, 4);
  }

  function animateCounter(el) {
    if (el.dataset.counted) return;
    el.dataset.counted = 'true';
    var target = parseInt(el.dataset.target, 10);
    var suffix = el.dataset.suffix || '';
    var duration = 2000;
    var start = performance.now();

    function update(now) {
      var elapsed = now - start;
      var progress = Math.min(elapsed / duration, 1);
      var eased = easeOutQuart(progress);
      var current = Math.floor(eased * target);
      el.textContent = current.toLocaleString() + (progress >= 1 ? suffix : '');
      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  var statNumbers = document.querySelectorAll('.stat-number[data-target]');
  if (statNumbers.length > 0) {
    var counterObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          animateCounter(entry.target);
          counterObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.3 });

    statNumbers.forEach(function (el) {
      counterObserver.observe(el);
    });
  }

  /* ----------------------------------------------------------
     9. STAT BAR ANIMATION
  ---------------------------------------------------------- */
  var statBars = document.querySelectorAll('.stat-bar-fill');
  if (statBars.length > 0) {
    var barObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.style.width = entry.target.dataset.width + '%';
          barObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });

    statBars.forEach(function (bar) {
      barObserver.observe(bar);
    });
  }

  /* ----------------------------------------------------------
     10. TOOLS DATA AND RENDERING
  ---------------------------------------------------------- */
  var toolsData = [
    { name: 'BashTool', cat: 'core', badge: 'core', desc: 'Execute shell commands with streaming output, sandbox support, and git operation tracking.', readOnly: false, concurrent: true },
    { name: 'FileReadTool', cat: 'file', badge: 'file', desc: 'Read file contents with line range support, image rendering, and PDF parsing.', readOnly: true, concurrent: true },
    { name: 'FileWriteTool', cat: 'file', badge: 'file', desc: 'Create or overwrite files with full content, creating directories as needed.', readOnly: false, concurrent: false },
    { name: 'FileEditTool', cat: 'file', badge: 'file', desc: 'Surgical find-and-replace edits within existing files.', readOnly: false, concurrent: false },
    { name: 'GlobTool', cat: 'search', badge: 'search', desc: 'Fast file pattern matching across the entire codebase.', readOnly: true, concurrent: true },
    { name: 'GrepTool', cat: 'search', badge: 'search', desc: 'Regex-powered content search built on ripgrep.', readOnly: true, concurrent: true },
    { name: 'AgentTool', cat: 'agent', badge: 'agent', desc: 'Spawn a sub-agent for complex multi-step research tasks.', readOnly: false, concurrent: true },
    { name: 'SendMessageTool', cat: 'agent', badge: 'agent', desc: 'Send messages between agents in multi-agent workflows.', readOnly: false, concurrent: false },
    { name: 'TeamCreateTool', cat: 'agent', badge: 'agent', desc: 'Create a team of specialized agents for parallel work.', readOnly: false, concurrent: false },
    { name: 'TeamDeleteTool', cat: 'agent', badge: 'agent', desc: 'Tear down an agent team and collect results.', readOnly: false, concurrent: false },
    { name: 'WebFetchTool', cat: 'web', badge: 'web', desc: 'Fetch and parse web page content with Markdown conversion.', readOnly: true, concurrent: true },
    { name: 'WebSearchTool', cat: 'web', badge: 'web', desc: 'Search the web using a search engine API.', readOnly: true, concurrent: true },
    { name: 'TaskCreateTool', cat: 'task', badge: 'task', desc: 'Create background tasks that run independently.', readOnly: false, concurrent: true },
    { name: 'TaskGetTool', cat: 'task', badge: 'task', desc: 'Check status and output of a background task.', readOnly: true, concurrent: true },
    { name: 'TaskListTool', cat: 'task', badge: 'task', desc: 'List all active and completed background tasks.', readOnly: true, concurrent: true },
    { name: 'TaskOutputTool', cat: 'task', badge: 'task', desc: 'Stream or retrieve full output from a background task.', readOnly: true, concurrent: true },
    { name: 'TaskStopTool', cat: 'task', badge: 'task', desc: 'Cancel a running background task.', readOnly: false, concurrent: false },
    { name: 'TaskUpdateTool', cat: 'task', badge: 'task', desc: 'Send new instructions to a running background task.', readOnly: false, concurrent: false },
    { name: 'MCPTool', cat: 'mcp', badge: 'mcp', desc: 'Execute tools from connected MCP servers.', readOnly: false, concurrent: true },
    { name: 'ListMcpResourcesTool', cat: 'mcp', badge: 'mcp', desc: 'List available resources from MCP servers.', readOnly: true, concurrent: true },
    { name: 'ReadMcpResourceTool', cat: 'mcp', badge: 'mcp', desc: 'Read a specific resource from an MCP server.', readOnly: true, concurrent: true },
    { name: 'McpAuthTool', cat: 'mcp', badge: 'mcp', desc: 'Authenticate with an MCP server requiring credentials.', readOnly: false, concurrent: false },
    { name: 'LSPTool', cat: 'search', badge: 'search', desc: 'Language Server Protocol queries for code intelligence.', readOnly: true, concurrent: true },
    { name: 'SkillTool', cat: 'core', badge: 'core', desc: 'Execute predefined skills like /commit, /review, /pr.', readOnly: false, concurrent: false },
    { name: 'ToolSearchTool', cat: 'core', badge: 'core', desc: 'Search for and load deferred tool schemas on demand.', readOnly: true, concurrent: true },
    { name: 'EnterPlanModeTool', cat: 'plan', badge: 'plan', desc: 'Switch to planning mode — think before acting.', readOnly: false, concurrent: false },
    { name: 'ExitPlanModeTool', cat: 'plan', badge: 'plan', desc: 'Leave planning mode and begin execution.', readOnly: false, concurrent: false },
    { name: 'EnterWorktreeTool', cat: 'core', badge: 'core', desc: 'Create a git worktree for isolated parallel work.', readOnly: false, concurrent: false },
    { name: 'ExitWorktreeTool', cat: 'core', badge: 'core', desc: 'Leave the worktree and return to the main repo.', readOnly: false, concurrent: false },
    { name: 'NotebookEditTool', cat: 'file', badge: 'file', desc: 'Edit Jupyter notebook cells — add, replace, or delete.', readOnly: false, concurrent: false },
    { name: 'AskUserQuestionTool', cat: 'core', badge: 'core', desc: 'Pause and ask the user a clarifying question.', readOnly: true, concurrent: false },
    { name: 'SleepTool', cat: 'core', badge: 'internal', desc: 'Wait for a specified duration before continuing.', readOnly: true, concurrent: false },
    { name: 'SyntheticOutputTool', cat: 'core', badge: 'internal', desc: 'Inject synthetic assistant messages into the conversation.', readOnly: false, concurrent: false },
    { name: 'RemoteTriggerTool', cat: 'core', badge: 'core', desc: 'Trigger actions in the remote session host.', readOnly: false, concurrent: false },
    { name: 'TodoWriteTool', cat: 'task', badge: 'internal', desc: 'Legacy session checklist. Replaced by TaskCreateTool.', readOnly: false, concurrent: false },
    { name: 'PowerShellTool', cat: 'core', badge: 'core', desc: 'Execute PowerShell commands on Windows systems.', readOnly: false, concurrent: true },
  ];

  var toolsGrid = document.getElementById('toolsGrid');

  function renderTools(filter) {
    if (!toolsGrid) return;

    var filtered = filter === 'all'
      ? toolsData
      : toolsData.filter(function (t) { return t.cat === filter; });

    var html = '';
    filtered.forEach(function (tool) {
      html +=
        '<div class="tool-card" onclick="this.classList.toggle(\'expanded\')">' +
          '<div class="tool-card-header">' +
            '<span class="tool-name">' + tool.name + '</span>' +
            '<span class="tool-badge badge-' + tool.badge + '">' + tool.badge + '</span>' +
          '</div>' +
          '<div class="tool-desc">' + tool.desc + '</div>' +
          '<div class="tool-extra">' +
            '<div class="tool-detail-row">' +
              '<span class="tool-detail-label">Category:</span>' +
              '<span class="tool-detail-val">' + tool.cat + '</span>' +
            '</div>' +
            '<div class="tool-detail-row">' +
              '<span class="tool-detail-label">Concurrent:</span>' +
              '<span class="tool-detail-val">' + (tool.concurrent ? '✅ Safe' : '❌ Sequential') + '</span>' +
            '</div>' +
            '<div class="tool-detail-row">' +
              '<span class="tool-detail-label">Read-only:</span>' +
              '<span class="tool-detail-val">' + (tool.readOnly ? '✅ Yes' : '❌ No') + '</span>' +
            '</div>' +
          '</div>' +
        '</div>';
    });

    toolsGrid.innerHTML = html;
  }

  renderTools('all');

  document.querySelectorAll('.filter-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('.filter-btn').forEach(function (b) {
        b.classList.remove('active');
      });
      btn.classList.add('active');
      renderTools(btn.dataset.filter || 'all');
    });
  });

  /* ----------------------------------------------------------
     11. COMMANDS DATA AND RENDERING
  ---------------------------------------------------------- */
  var commandsData = {
    'Session Management': [
      { name: '/help', type: 'jsx', desc: 'Show help and available commands' },
      { name: '/exit', type: 'local', desc: 'Quit the CLI' },
      { name: '/clear', type: 'jsx', desc: 'Wipe transcript, start fresh', aliases: '/reset, /new' },
      { name: '/status', type: 'jsx', desc: 'Version, model, account info' },
      { name: '/cost', type: 'prompt', desc: 'Show session cost tracking' },
      { name: '/resume', type: 'jsx', desc: 'Restore previous session' },
      { name: '/compact', type: 'local', desc: 'Shrink context window' },
      { name: '/share', type: 'jsx', desc: 'Share session' },
      { name: '/export', type: 'jsx', desc: 'Export conversation' },
    ],
    'Code & Git': [
      { name: '/commit', type: 'prompt', desc: 'AI-assisted git commit' },
      { name: '/diff', type: 'jsx', desc: 'View uncommitted changes' },
      { name: '/branch', type: 'jsx', desc: 'Manage git branches' },
      { name: '/rewind', type: 'local', desc: 'Restore to checkpoint', aliases: '/checkpoint' },
      { name: '/review', type: 'prompt', desc: 'AI code review of PRs' },
      { name: '/ultrareview', type: 'jsx', desc: '10-20 min deep bug finder' },
      { name: '/security-review', type: 'prompt', desc: 'Security audit' },
      { name: '/doctor', type: 'prompt', desc: 'Diagnose project issues', aliases: '/bug' },
    ],
    'Configuration': [
      { name: '/config', type: 'jsx', desc: 'Open config panel', aliases: '/settings' },
      { name: '/theme', type: 'prompt', desc: 'Change terminal theme' },
      { name: '/color', type: 'jsx', desc: 'Change agent output color' },
      { name: '/vim', type: 'jsx', desc: 'Toggle vim mode' },
      { name: '/effort', type: 'jsx', desc: 'Set effort level' },
      { name: '/model', type: 'jsx', desc: 'Change AI model' },
      { name: '/fast', type: 'jsx', desc: 'Toggle fast mode' },
      { name: '/keybindings', type: 'jsx', desc: 'Manage keyboard shortcuts' },
      { name: '/permissions', type: 'jsx', desc: 'Manage tool permissions' },
      { name: '/advisor', type: 'local', desc: 'Configure advisor model' },
      { name: '/output-style', type: 'jsx', desc: 'Configure output format' },
      { name: '/sandbox', type: 'jsx', desc: 'Toggle sandboxing' },
    ],
    'Context & Memory': [
      { name: '/context', type: 'prompt', desc: 'Manage conversation context' },
      { name: '/memory', type: 'jsx', desc: 'Manage persistent memory' },
      { name: '/add-dir', type: 'jsx', desc: 'Add directory to context' },
      { name: '/files', type: 'local', desc: 'List tracked files' },
      { name: '/plan', type: 'jsx', desc: 'Enable plan mode' },
      { name: '/tasks', type: 'jsx', desc: 'Manage background tasks', aliases: '/bashes' },
      { name: '/copy', type: 'jsx', desc: 'Copy last response' },
      { name: '/summary', type: 'local', desc: 'Summarize conversation' },
    ],
    'Integrations': [
      { name: '/plugin', type: 'jsx', desc: 'Manage plugins', aliases: '/marketplace' },
      { name: '/skills', type: 'jsx', desc: 'List available skills' },
      { name: '/mcp', type: 'jsx', desc: 'Manage MCP servers' },
      { name: '/ide', type: 'jsx', desc: 'IDE extension setup', aliases: '/app' },
      { name: '/login', type: 'jsx', desc: 'Authenticate' },
      { name: '/logout', type: 'jsx', desc: 'Sign out' },
      { name: '/install-github-app', type: 'jsx', desc: 'GitHub integration' },
      { name: '/mobile', type: 'jsx', desc: 'Mobile app QR code', aliases: '/ios, /android' },
      { name: '/desktop', type: 'jsx', desc: 'Desktop features' },
      { name: '/chrome', type: 'jsx', desc: 'Chrome integration' },
    ],
    'Hidden & Advanced': [
      { name: '/session', type: 'jsx', desc: 'Remote session URL', aliases: '/remote' },
      { name: '/thinkback', type: 'jsx', desc: '2025 year-in-review' },
      { name: '/release-notes', type: 'prompt', desc: 'Show changelog' },
      { name: '/feedback', type: 'jsx', desc: 'Send feedback' },
      { name: '/btw', type: 'jsx', desc: 'Quick note to self' },
      { name: '/rename', type: 'jsx', desc: 'Bulk rename operations' },
      { name: '/usage', type: 'prompt', desc: 'Show usage info' },
      { name: '/version', type: 'local', desc: 'Print version (ANT-only)' },
      { name: '/env', type: 'local', desc: 'Show env vars (ANT-only)' },
      { name: '/stats', type: 'jsx', desc: 'Session statistics' },
      { name: '/privacy-settings', type: 'jsx', desc: 'Privacy controls' },
    ],
  };

  var cmdList = document.getElementById('cmdList');

  function renderCommands(query) {
    if (!cmdList) return;
    var q = (query || '').toLowerCase().trim();
    var html = '';

    var categoryNames = Object.keys(commandsData);
    categoryNames.forEach(function (category) {
      var commands = commandsData[category];
      var filtered = commands.filter(function (cmd) {
        if (!q) return true;
        var haystack = (cmd.name + ' ' + cmd.desc + ' ' + (cmd.aliases || '')).toLowerCase();
        return haystack.indexOf(q) !== -1;
      });

      if (filtered.length === 0) return;

      html += '<div>';
      html += '<div class="cmd-cat-title">' + category + ' <span class="count">(' + filtered.length + ')</span></div>';
      html += '<div class="cmd-list">';

      filtered.forEach(function (cmd) {
        var dotClass = cmd.type === 'prompt' ? 'dot-prompt' : cmd.type === 'local' ? 'dot-local' : 'dot-jsx';
        html += '<div class="cmd-item">';
        html += '<span class="cmd-type-dot ' + dotClass + '"></span>';
        html += '<span class="cmd-name">' + cmd.name + '</span>';
        html += '<span class="cmd-desc">' + cmd.desc + '</span>';
        if (cmd.aliases) {
          html += '<span style="font-family:var(--mono);font-size:0.65rem;color:var(--text-dim);opacity:0.6;margin-left:auto;white-space:nowrap;">' + cmd.aliases + '</span>';
        }
        html += '</div>';
      });

      html += '</div></div>';
    });

    cmdList.innerHTML = html || '<p style="color:var(--text-dim);text-align:center;padding:40px;">No commands match your search.</p>';
  }

  renderCommands('');

  var cmdSearch = document.getElementById('cmdSearch');
  if (cmdSearch) {
    cmdSearch.addEventListener('input', function () {
      renderCommands(this.value);
    });
  }

  /* ----------------------------------------------------------
     12. DEEP DIVE TABS
  ---------------------------------------------------------- */
  var diveTabs = document.querySelectorAll('.dive-tab');
  diveTabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      diveTabs.forEach(function (t) {
        t.classList.remove('active');
      });
      tab.classList.add('active');

      document.querySelectorAll('.dive-panel').forEach(function (panel) {
        panel.classList.remove('active');
      });

      var panelId = tab.dataset.panel;
      var targetPanel = document.getElementById('panel-' + panelId);
      if (targetPanel) {
        targetPanel.classList.add('active');
      }
    });
  });

  /* ----------------------------------------------------------
     13. BUDDY SPRITE ANIMATION
  ---------------------------------------------------------- */
  var buddySprite = document.getElementById('buddySprite');

  if (buddySprite) {
    var duckFrames = [
      '   __\n<(o )___\n ( ._> /\n  `---\'',
      '   __\n<(o )___\n ( ._> /\n  `--~\'',
      '   __\n<(- )___\n ( ._> /\n  `---\'',
    ];

    var frameSequence = [0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 1, 0, 0, 0];
    var frameIndex = 0;

    function animateBuddy() {
      buddySprite.textContent = duckFrames[frameSequence[frameIndex]];
      frameIndex = (frameIndex + 1) % frameSequence.length;
    }

    animateBuddy();
    setInterval(animateBuddy, 500);
  }

  /* ----------------------------------------------------------
     14. BACK TO TOP BUTTON
  ---------------------------------------------------------- */
  var backToTop = document.getElementById('backToTop');

  function handleBackToTopVisibility() {
    if (!backToTop) return;
    if (window.scrollY > 500) {
      backToTop.classList.add('visible');
    } else {
      backToTop.classList.remove('visible');
    }
  }

  window.addEventListener('scroll', handleBackToTopVisibility, { passive: true });
  handleBackToTopVisibility();

  if (backToTop) {
    backToTop.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  /* ----------------------------------------------------------
     15. MOBILE TOGGLE
  ---------------------------------------------------------- */
  var mobileToggle = document.getElementById('mobileToggle');
  var navLinks = document.getElementById('navLinks');

  if (mobileToggle && navLinks) {
    mobileToggle.addEventListener('click', function () {
      var isOpen = navLinks.style.display === 'flex';
      if (isOpen) {
        navLinks.style.display = 'none';
      } else {
        navLinks.style.display = 'flex';
        navLinks.style.flexDirection = 'column';
        navLinks.style.position = 'absolute';
        navLinks.style.top = '100%';
        navLinks.style.left = '0';
        navLinks.style.right = '0';
        navLinks.style.background = 'rgba(10, 10, 15, 0.95)';
        navLinks.style.padding = '16px 24px';
        navLinks.style.borderBottom = '1px solid var(--border)';
        navLinks.style.gap = '4px';
      }
    });

    // Close mobile menu when clicking a nav link
    navLinks.querySelectorAll('a').forEach(function (link) {
      link.addEventListener('click', function () {
        if (window.innerWidth <= 768) {
          navLinks.style.display = 'none';
        }
      });
    });
  }

  /* ----------------------------------------------------------
     16. DOWNLOAD BUTTONS
  ---------------------------------------------------------- */
  var downloadSiteBtn = document.getElementById('downloadSite');
  var downloadJSONBtn = document.getElementById('downloadJSON');

  if (downloadSiteBtn) {
    downloadSiteBtn.addEventListener('click', function () {
      var htmlContent = '<!DOCTYPE html>\n' + document.documentElement.outerHTML;
      var blob = new Blob([htmlContent], { type: 'text/html' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = 'oops-map.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    });
  }

  if (downloadJSONBtn) {
    downloadJSONBtn.addEventListener('click', function () {
      var exportData = {
        meta: {
          title: 'oops.map — Claude Code Source Archive Data',
          exportedAt: new Date().toISOString(),
          description: 'Tool registry, slash commands, and architecture data extracted from the Claude Code source leak.',
        },
        tools: toolsData,
        commands: commandsData,
        stats: {
          totalFiles: 1900,
          linesOfCode: 512000,
          builtInTools: 36,
          slashCommands: 79,
          uiComponents: 146,
          companionSpecies: 18,
        },
        architecture: [
          { name: 'QueryEngine', path: 'src/QueryEngine.ts', lines: '~46K', role: 'Stateful conversation controller, LLM streaming, tool-call loops' },
          { name: 'Tool System', path: 'src/tools/', count: 36, lines: '~41K', role: 'Self-contained tool modules with schema validation and permissions' },
          { name: 'Permission Engine', path: 'src/hooks/toolPermission/', role: 'Three-layer security with 5 permission modes and 8 rule sources' },
          { name: 'Command System', path: 'src/commands/', count: 79, role: 'Three execution types: prompt, local, local-jsx' },
          { name: 'Bridge System', path: 'src/bridge/', role: 'Bidirectional IDE-CLI communication via WebSocket + HTTP' },
          { name: 'State Management', path: 'src/state/', role: '35-line custom store with DeepImmutable types' },
        ],
        techStack: ['Bun', 'TypeScript', 'React', 'Ink', 'Commander.js', 'Zod v4', 'ripgrep', 'MCP SDK', 'Anthropic SDK', 'OpenTelemetry', 'GrowthBook', 'OAuth 2.0'],
      };
      var blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = 'oops-map-data.json';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    });
  }

  // Copy-to-clipboard for download code blocks
  document.querySelectorAll('.download-code').forEach(function (block) {
    block.addEventListener('click', function () {
      var text = block.textContent.replace('click to copy', '').trim();
      navigator.clipboard.writeText(text).then(function () {
        var origBorder = block.style.borderColor;
        block.style.borderColor = 'var(--green)';
        var feedback = document.createElement('span');
        feedback.style.cssText = 'position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:0.65rem;color:var(--green);';
        feedback.textContent = 'Copied!';
        block.appendChild(feedback);
        setTimeout(function () {
          block.style.borderColor = origBorder;
          if (feedback.parentNode) feedback.remove();
        }, 2000);
      });
    });
  });

  /* ----------------------------------------------------------
     17. NAV ACTIVE STATE (Scroll-based)
  ---------------------------------------------------------- */
  var allNavLinks = document.querySelectorAll('nav a[href^="#"]');
  var sections = [];

  allNavLinks.forEach(function (link) {
    var href = link.getAttribute('href');
    if (href && href !== '#') {
      var section = document.querySelector(href);
      if (section) {
        sections.push({ el: section, link: link });
      }
    }
  });

  if (sections.length > 0) {
    var activeNavObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          allNavLinks.forEach(function (l) {
            l.classList.remove('active');
          });
          sections.forEach(function (s) {
            if (s.el === entry.target) {
              s.link.classList.add('active');
            }
          });
        }
      });
    }, {
      threshold: 0.2,
      rootMargin: '-80px 0px -60% 0px',
    });

    sections.forEach(function (s) {
      activeNavObserver.observe(s.el);
    });
  }

})();