clew-code 0.3.2 → 0.3.4

package/docs/js/main.js

@@ -1,438 +0,0 @@
-// Clew Docs — Mobile Nav, Header, Sidebar, TOC, Code Copy
-(function () {
-  'use strict';
-
-  // ── Root Prefix (for script location detection) ──
-  var rootPrefix = '';
-  var scripts = document.getElementsByTagName('script');
-  for (var i = 0; i < scripts.length; i++) {
-    var src = scripts[i].getAttribute('src');
-    if (src && src.indexOf('js/main.js') !== -1) {
-      rootPrefix = src.replace('js/main.js', '');
-      break;
-    }
-  }
-
-  // ── Header Injection ──
-  function injectHeader() {
-    var header = document.querySelector('.header');
-    if (!header) return;
-
-    var path = window.location.pathname;
-    var isThai = /\.th\.html$/.test(path);
-    var isIndex = /\/index(\.th)?\.html$/.test(path) || path === '/' || path.endsWith('/docs/');
-    var currentPage = path.split('/').pop() || 'index.html';
-
-    var logoHref = isThai ? 'index.th.html' : 'index.html';
-    var docsHref = isThai ? 'quick-start.th.html' : 'quick-start.html';
-    var ariaLabel = isThai ? '\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39' : 'Toggle navigation';
-
-    // Language toggle
-    var langTarget = isThai
-      ? currentPage.replace(/\.th\.html$/, '.html')
-      : currentPage.replace(/\.html$/, '.th.html');
-    var langLabel = isThai ? 'EN' : '\u0E44\u0E17\u0E22';
-    // If no .html page exists for the target, just use README
-    if (isIndex) langTarget = isThai ? 'index.html' : 'index.th.html';
-
-    // Build breadcrumbs from path
-    var crumbs = [];
-    var parts = path.replace(/\/$/, '').split('/').filter(Boolean);
-    if (parts[0] === 'docs') parts.shift(); // remove leading "docs"
-    if (parts.length > 0) {
-      var crumbPath = '';
-      for (var i = 0; i < parts.length; i++) {
-        crumbPath += (i === 0 ? '' : '/') + parts[i];
-        var isLast = i === parts.length - 1;
-        var label = parts[i].replace(/\.th\.html$/, '').replace(/\.html$/, '').replace(/-/g, ' ');
-        if (isLast) {
-          crumbs.push('<span class="current">' + label + '</span>');
-        } else {
-          crumbs.push('<a href="' + crumbPath + '">' + label + '</a>');
-          crumbs.push('<span class="sep">/</span>');
-        }
-      }
-    }
-    var breadcrumbsHtml = crumbs.length > 0
-      ? '<nav class="header-breadcrumbs">' + crumbs.join('') + '</nav>'
-      : '';
-
-    header.innerHTML =
-      '<div class="header-inner">' +
-      '  <a href="' + logoHref + '" class="logo">Clew</a>' +
-      breadcrumbsHtml +
-      '  <div class="header-search">' +
-      '    <input type="text" id="headerSearchInput" placeholder="' + (isThai ? '\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23...' : 'Search docs...') + '" autocomplete="off">' +
-      '    <span class="search-icon">\u2315</span>' +
-      '    <div class="search-results" id="headerSearchResults"></div>' +
-      '  </div>' +
-      '  <nav class="header-nav">' +
-      '    <a href="' + logoHref + '">' + (isThai ? '\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E23\u0E01' : 'Home') + '</a>' +
-      '    <a href="' + docsHref + '">' + (isThai ? '\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23' : 'Docs') + '</a>' +
-      '    <a href="https://github.com/JonusNattapong/ClewCode" target="_blank">GitHub</a>' +
-      '  </nav>' +
-      '  <button class="lang-toggle" id="langToggle" aria-label="Switch language">' + langLabel + '</button>' +
-      '  <button class="menu-btn" id="menuToggle" aria-label="' + ariaLabel + '"><span></span><span></span><span></span></button>' +
-      '</div>';
-
-    // Language toggle
-    var langToggle = document.getElementById('langToggle');
-    if (langToggle) {
-      langToggle.addEventListener('click', function () {
-        window.location.href = langTarget;
-      });
-    }
-
-    // Active nav link
-    var navLinks = header.querySelectorAll('.header-nav a');
-    navLinks.forEach(function (link) {
-      var href = link.getAttribute('href');
-      if (!href) return;
-      var hrefPage = href.split('/').pop().split('#')[0] || 'index.html';
-      if (hrefPage === currentPage) link.classList.add('active');
-    });
-    if (!isIndex) {
-      var docsLink = header.querySelector('.header-nav a[href*="quick-start"]');
-      if (docsLink) docsLink.classList.add('active');
-    }
-
-    // Search functionality
-    initHeaderSearch();
-  }
-
-  function initHeaderSearch() {
-    var input = document.getElementById('headerSearchInput');
-    var results = document.getElementById('headerSearchResults');
-    if (!input || !results) return;
-
-    // Build search index from sidebar links + TOC headings
-    var searchIndex = [];
-    document.querySelectorAll('.sidebar-link').forEach(function (link) {
-      searchIndex.push({ text: link.textContent.trim(), href: link.getAttribute('href'), type: 'page' });
-    });
-    document.querySelectorAll('.content h2, .content h3').forEach(function (h) {
-      searchIndex.push({ text: h.textContent.trim(), href: '#' + h.id, type: 'section' });
-    });
-
-    input.addEventListener('input', function () {
-      var query = this.value.trim().toLowerCase();
-      results.innerHTML = '';
-      results.classList.remove('open');
-      if (query.length < 1) return;
-
-      var matches = [];
-      for (var i = 0; i < searchIndex.length; i++) {
-        var item = searchIndex[i];
-        if (item.text.toLowerCase().indexOf(query) !== -1) {
-          matches.push(item);
-        }
-      }
-
-      if (matches.length === 0) {
-        results.innerHTML = '<div class="search-empty">No results found</div>';
-        results.classList.add('open');
-        return;
-      }
-
-      for (var j = 0; j < Math.min(matches.length, 8); j++) {
-        var m = matches[j];
-        var highlighted = m.text.replace(
-          new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi'),
-          '<mark>$1</mark>'
-        );
-        results.innerHTML +=
-          '<a href="' + m.href + '" class="search-result">' +
-          '<span class="search-type">' + (m.type === 'page' ? '\u{1F4C4}' : '#') + '</span> ' +
-          highlighted +
-          '</a>';
-      }
-      results.classList.add('open');
-    });
-
-    // Close on click outside
-    document.addEventListener('click', function (e) {
-      if (!input.contains(e.target) && !results.contains(e.target)) {
-        results.classList.remove('open');
-      }
-    });
-
-    // Close on Escape
-    input.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        results.classList.remove('open');
-        input.blur();
-      }
-    });
-  }
-
-  injectHeader();
-
-  // ── Sidebar Injection ──
-  var sidebar = document.getElementById('sidebar');
-  if (sidebar) {
-    sidebar.innerHTML =
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Getting Started</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'index.html" class="sidebar-link"><span class="link-icon"></span>Overview</a>' +
-      '    <a href="' + rootPrefix + 'quick-start.html" class="sidebar-link"><span class="link-icon"></span>Quick Start</a>' +
-      '    <a href="' + rootPrefix + 'installation.html" class="sidebar-link"><span class="link-icon"></span>Installation</a>' +
-      '    <a href="' + rootPrefix + 'configuration.html" class="sidebar-link"><span class="link-icon"></span>Configuration</a>' +
-      '    <a href="' + rootPrefix + 'cli-reference.html" class="sidebar-link"><span class="link-icon"></span>CLI Reference</a>' +
-      '    <a href="' + rootPrefix + 'troubleshooting.html" class="sidebar-link"><span class="link-icon"></span>Troubleshooting</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Core Concepts</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'providers.html" class="sidebar-link"><span class="link-icon"></span>Providers</a>' +
-      '    <a href="' + rootPrefix + 'models.html" class="sidebar-link"><span class="link-icon"></span>Models</a>' +
-      '    <a href="' + rootPrefix + 'commands.html" class="sidebar-link"><span class="link-icon"></span>Commands</a>' +
-      '    <a href="' + rootPrefix + 'tools.html" class="sidebar-link"><span class="link-icon"></span>Tools</a>' +
-      '    <a href="' + rootPrefix + 'permission-model.html" class="sidebar-link"><span class="link-icon"></span>Permission Model</a>' +
-      '    <a href="' + rootPrefix + 'personal-profile.html" class="sidebar-link"><span class="link-icon"></span>Personal Profile</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Extending</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'plugins.html" class="sidebar-link"><span class="link-icon"></span>Plugins</a>' +
-      '    <a href="' + rootPrefix + 'skills.html" class="sidebar-link"><span class="link-icon"></span>Skills</a>' +
-      '    <a href="' + rootPrefix + 'architecture.html" class="sidebar-link"><span class="link-icon"></span>Architecture</a>' +
-      '    <a href="' + rootPrefix + 'mcp.html" class="sidebar-link"><span class="link-icon"></span>MCP</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Autonomous</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'daemon.html" class="sidebar-link"><span class="link-icon"></span>Daemon Mode</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Features</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'research-memory.html" class="sidebar-link"><span class="link-icon"></span>Research & Memory</a>' +
-      '    <a href="' + rootPrefix + 'features/searxng-search.html" class="sidebar-link"><span class="link-icon"></span>SearXNG Search</a>' +
-      '    <a href="' + rootPrefix + 'features/bridge-mode.html" class="sidebar-link"><span class="link-icon"></span>Bridge Mode</a>' +
-      '    <a href="' + rootPrefix + 'features/evals.html" class="sidebar-link"><span class="link-icon"></span>Evaluation Harness</a>' +
-      '    <a href="' + rootPrefix + 'features/sentry-setup.html" class="sidebar-link"><span class="link-icon"></span>Sentry Setup</a>' +
-      '    <a href="' + rootPrefix + 'voice-mode.html" class="sidebar-link"><span class="link-icon"></span>Voice Mode</a>' +
-      '    <a href="' + rootPrefix + 'swarm.html" class="sidebar-link"><span class="link-icon"></span>Swarm System</a>' +
-      '    <a href="' + rootPrefix + 'loop.html" class="sidebar-link"><span class="link-icon"></span>Agent Loop</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Internals</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'internals/hidden-features.html" class="sidebar-link"><span class="link-icon"></span>Hidden Features</a>' +
-      '    <a href="' + rootPrefix + 'internals/growthbook-ab-testing.html" class="sidebar-link"><span class="link-icon"></span>A/B Testing</a>' +
-      '  </nav>' +
-      '</div>' +
-      '<div class="sidebar-section">' +
-      '  <div class="sidebar-label">Community</div>' +
-      '  <nav>' +
-      '    <a href="' + rootPrefix + 'changelog.html" class="sidebar-link"><span class="link-icon"></span>Changelog</a>' +
-      '    <a href="' + rootPrefix + 'security.html" class="sidebar-link"><span class="link-icon"></span>Security</a>' +
-      '    <a href="' + rootPrefix + 'contributing.html" class="sidebar-link"><span class="link-icon"></span>Contributing</a>' +
-      '  </nav>' +
-      '</div>';
-  }
-
-  // ── Mobile Nav ──
-  var menuBtn = document.getElementById('menuToggle');
-  var overlay = document.getElementById('sidebarOverlay');
-
-  function openSidebar() {
-    sidebar && sidebar.classList.add('open');
-    menuBtn && menuBtn.setAttribute('aria-expanded', 'true');
-    overlay && overlay.classList.add('open');
-    document.body.style.overflow = 'hidden';
-  }
-
-  function closeSidebar() {
-    sidebar && sidebar.classList.remove('open');
-    menuBtn && menuBtn.setAttribute('aria-expanded', 'false');
-    overlay && overlay.classList.remove('open');
-    document.body.style.overflow = '';
-  }
-
-  if (menuBtn) menuBtn.addEventListener('click', function (e) {
-    e.stopPropagation();
-    sidebar && sidebar.classList.contains('open') ? closeSidebar() : openSidebar();
-  });
-
-  if (overlay) overlay.addEventListener('click', closeSidebar);
-
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && sidebar && sidebar.classList.contains('open')) closeSidebar();
-  });
-
-  if (sidebar) {
-    sidebar.querySelectorAll('.sidebar-link').forEach(function (link) {
-      link.addEventListener('click', closeSidebar);
-    });
-  }
-
-  // ── Active Sidebar Link ──
-  var currentPath = window.location.pathname;
-  var currentPage = currentPath.split('/').pop() || 'index.html';
-  if (currentPage === '') currentPage = 'index.html';
-
-  document.querySelectorAll('.sidebar-link').forEach(function (link) {
-    var href = link.getAttribute('href');
-    if (!href) return;
-    var hrefPage = href.split('/').pop().split('#')[0];
-    if (hrefPage === currentPage) link.classList.add('active');
-  });
-
-  // ── Code Copy Buttons ──
-  function addCopyButtons() {
-    document.querySelectorAll('.content pre').forEach(function (pre) {
-      if (pre.parentElement && pre.parentElement.classList.contains('code-block-wrap')) return;
-
-      var wrap = document.createElement('div');
-      wrap.className = 'code-block-wrap';
-
-      var header = document.createElement('div');
-      header.className = 'code-block-header';
-
-      var lang = document.createElement('span');
-      var code = pre.querySelector('code');
-      var langName = '';
-      if (code) {
-        var cls = code.className || '';
-        var match = cls.match(/language-(\w+)/);
-        if (match) langName = match[1];
-      }
-      lang.textContent = langName || '';
-      lang.style.textTransform = 'lowercase';
-
-      var btn = document.createElement('button');
-      btn.className = 'copy-btn';
-      btn.textContent = 'Copy';
-      btn.setAttribute('aria-label', 'Copy code to clipboard');
-
-      btn.addEventListener('click', function () {
-        var text = pre.textContent || '';
-        text = text.replace(/^\n+|\n+$/g, '');
-        navigator.clipboard.writeText(text).then(function () {
-          btn.textContent = 'Copied!';
-          btn.classList.add('copied');
-          setTimeout(function () {
-            btn.textContent = 'Copy';
-            btn.classList.remove('copied');
-          }, 2000);
-        }).catch(function () {
-          btn.textContent = 'Failed';
-          setTimeout(function () {
-            btn.textContent = 'Copy';
-          }, 2000);
-        });
-      });
-
-      header.appendChild(lang);
-      header.appendChild(btn);
-
-      pre.parentNode.insertBefore(wrap, pre);
-      wrap.appendChild(header);
-      wrap.appendChild(pre);
-    });
-  }
-
-  addCopyButtons();
-
-  // ── Table Wrapping ──
-  document.querySelectorAll('.content table').forEach(function (table) {
-    if (table.parentElement && table.parentElement.classList.contains('table-wrap')) return;
-    var wrapper = document.createElement('div');
-    wrapper.className = 'table-wrap';
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
-  });
-
-  // ── TOC Generation ──
-  function buildTOC() {
-    var toc = document.querySelector('.toc-sidebar');
-    if (!toc) return;
-
-    var content = document.querySelector('.content');
-    if (!content) return;
-
-    var headings = content.querySelectorAll('h2, h3');
-    if (headings.length < 2) {
-      toc.style.display = 'none';
-      return;
-    }
-
-    var label = document.createElement('div');
-    label.className = 'toc-label';
-    label.textContent = 'On this page';
-    toc.appendChild(label);
-
-    var list = document.createElement('nav');
-    list.className = 'toc-list';
-
-    var items = [];
-    headings.forEach(function (h) {
-      if (!h.id) {
-        var text = (h.textContent || '')
-          .toLowerCase()
-          .replace(/[^a-z0-9\u0E00-\u0E7F]+/g, '-')
-          .replace(/^-|-$/g, '');
-        h.id = text || 'section-' + Math.random().toString(36).slice(2, 6);
-      }
-
-      var link = document.createElement('a');
-      link.href = '#' + h.id;
-      link.className = 'toc-link';
-      if (h.tagName === 'H3') link.classList.add('toc-h3');
-      link.textContent = h.textContent;
-
-      list.appendChild(link);
-      items.push({ el: link, id: h.id });
-    });
-
-    toc.appendChild(list);
-
-    if (typeof IntersectionObserver !== 'undefined' && items.length > 0) {
-      var observeTargets = [];
-      headings.forEach(function (h) { observeTargets.push(h); });
-
-      var observer = new IntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            items.forEach(function (item) {
-              item.el.classList.toggle('active', item.id === entry.target.id);
-            });
-          }
-        });
-      }, {
-        rootMargin: '-64px 0px -60% 0px',
-        threshold: 0
-      });
-
-      observeTargets.forEach(function (h) { observer.observe(h); });
-    }
-  }
-
-  buildTOC();
-
-  // ── Footer Injection ──
-  function injectFooter() {
-    var content = document.querySelector('.content');
-    if (!content || content.querySelector('.footer')) return;
-
-    var footer = document.createElement('div');
-    footer.className = 'footer';
-    footer.innerHTML =
-      '<span>Clew Code \u2014 GPL-3.0</span>' +
-      '<div class="footer-links">' +
-      '  <a href="https://github.com/ClewCode/ClewCode">GitHub</a>' +
-      '  <a href="https://github.com/ClewCode/ClewCode/issues">Issues</a>' +
-      '  <a href="https://www.npmjs.com/package/clew-code">npm</a>' +
-      '</div>';
-    content.appendChild(footer);
-  }
-
-  injectFooter();
-})();

package/docs/loop.html

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Agent Loop — Clew Code</title>
-<meta name="description" content="24/7 autonomous agent loop for background task execution.">
-<link rel="icon" type="image/svg+xml" href="assets/clew.svg">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-<header class="header"></header>
-<div id="sidebarOverlay" class="sidebar-overlay"></div>
-<aside id="sidebar" class="sidebar"></aside>
-
-<div class="content-wrap">
-<div class="content">
-
-<div class="breadcrumbs"><a href="index.html">Home</a><span class="sep">/</span><span class="current">Agent Loop</span></div>
-
-<h1>Agent Loop</h1>
-<p class="sub">Run Clew Code autonomously with a 24/7 background agent loop.</p>
-
-<h2 id="overview">Overview</h2>
-<p>The autonomous agent loop runs Clew Code continuously in the background, processing tasks from a persistent queue. It's ideal for monitoring, scheduled maintenance, automated code review, and recurring development workflows.</p>
-
-<h2 id="commands">Loop Commands</h2>
-<pre><code class="language-bash">❯ /loop start          # start the autonomous loop
-❯ /loop stop           # stop the loop
-❯ /loop status         # check loop status and queue depth
-</code></pre>
-
-<h2 id="loop-skill">Loop Skill</h2>
-<p>Use the built-in loop skill to run recurring requests:</p>
-<pre><code class="language-bash">❯ /loop 5m /check-status   # run /check-status every 5 minutes
-❯ /loop 1h "summarize recent changes"
-</code></pre>
-<p>Default interval is 10 minutes if not specified.</p>
-
-<h2 id="task-queue">Task Queue</h2>
-<p>The loop integrates with the daemon's persistent task queue:</p>
-<ul>
-  <li><strong>Lease-based concurrency</strong> — up to 3 workers run simultaneously</li>
-  <li><strong>Exponential backoff</strong> — retries with increasing delays on failure</li>
-  <li><strong>Dead-letter queue</strong> — failed tasks are stored for later analysis</li>
-</ul>
-
-<h2 id="scheduling">Cron Scheduling</h2>
-<p>Schedule recurring tasks with cron expressions:</p>
-<pre><code class="language-bash">❯ /task add "0 9 * * 1-5" "weekday morning review"
-❯ /task add "0 0 * * 0" "weekly cleanup"
-</code></pre>
-
-<h2 id="use-cases">Use Cases</h2>
-<ul>
-  <li>Automated code review on schedule</li>
-  <li>Dependency update checks</li>
-  <li>Performance monitoring and alerting</li>
-  <li>Scheduled documentation generation</li>
-  <li>Automated testing and regression checks</li>
-</ul>
-</div>
-</div>
-
-<script src="js/main.js"></script>
-</body>
-</html>

package/docs/mcp.html

@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>MCP — Clew Code</title>
-<meta name="description" href="Model Context Protocol (MCP) integration in Clew Code.">
-<link rel="icon" type="image/svg+xml" href="assets/clew.svg">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-<header class="header"></header>
-<div id="sidebarOverlay" class="sidebar-overlay"></div>
-<aside id="sidebar" class="sidebar"></aside>
-
-<div class="content-wrap">
-<div class="content">
-
-<div class="breadcrumbs"><a href="index.html">Home</a><span class="sep">/</span><span class="current">MCP</span></div>
-
-<h1>MCP — Model Context Protocol</h1>
-<p class="sub">Connect external tools and data sources via the Model Context Protocol. Clew Code supports stdio, SSE, and DirectConnect transports.</p>
-
-<h2 id="overview">Overview</h2>
-<p>MCP (Model Context Protocol) is an open standard for connecting AI agents with external tools and data sources. Clew Code implements the full MCP specification as both a client and server.</p>
-
-<h2 id="transports">Transport Types</h2>
-<table>
-  <thead>
-    <tr><th>Transport</th><th>Description</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>stdio</td><td>Local subprocess — spawns an MCP server as a child process and communicates via stdin/stdout</td></tr>
-    <tr><td>SSE</td><td>Remote servers with optional OAuth authentication via Server-Sent Events</td></tr>
-    <tr><td>DirectConnect</td><td>In-process plugin servers — runs MCP servers as plugins within the same process</td></tr>
-  </tbody>
-</table>
-
-<h2 id="configuration">Configuration</h2>
-<p>MCP servers are configured in <code>.mcp.json</code> at the project root:</p>
-<pre><code class="language-json">{
-  "mcpServers": {
-    "filesystem": {
-      "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
-    },
-    "github": {
-      "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-github"],
-      "env": {
-        "GITHUB_TOKEN": "ghp_..."
-      }
-    },
-    "remote-api": {
-      "url": "https://my-mcp-server.example.com/sse",
-      "auth": {
-        "type": "oauth2"
-      }
-    }
-  }
-}
-</code></pre>
-
-<h2 id="commands">MCP Commands</h2>
-<pre><code class="language-bash">❯ /mcp list         # list connected MCP servers and their tools
-❯ /mcp add          # add a new MCP server configuration
-❯ /mcp remove &lt;id&gt;  # remove an MCP server
-</code></pre>
-
-<h2 id="cli-tools">CLI MCP Tools</h2>
-<p>The built-in MCP tools allow the AI to interact with connected servers:</p>
-<table>
-  <thead>
-    <tr><th>Tool</th><th>Description</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>ListMcpResourcesTool</td><td>List available resources from connected MCP servers</td></tr>
-    <tr><td>ReadMcpResourceTool</td><td>Read a specific resource from an MCP server</td></tr>
-  </tbody>
-</table>
-
-<h2 id="mcp-servers">Example MCP Servers</h2>
-<ul>
-  <li><strong>Filesystem</strong> — safe file access with path restrictions</li>
-  <li><strong>GitHub</strong> — repository management, PRs, issues</li>
-  <li><strong>Playwright</strong> — browser automation</li>
-  <li><strong>Slack</strong> — workspace integration</li>
-  <li><strong>PostgreSQL</strong> — database schema exploration and queries</li>
-  <li><strong>Sentry</strong> — error tracking and issue management</li>
-</ul>
-<p>Browse the <a href="https://github.com/modelcontextprotocol/servers">official MCP server repository</a> for more.</p>
-</div>
-</div>
-
-<script src="js/main.js"></script>
-</body>
-</html>