clew-code 0.2.1

package/docs/js/main.js

@@ -0,0 +1,272 @@
+// Clew Docs — Mobile Nav, TOC, Code Copy, Heading Tracking
+(function () {
+  'use strict';
+
+  var menuBtn = document.getElementById('menuToggle');
+  var sidebar = document.getElementById('sidebar');
+  var overlay = document.getElementById('sidebarOverlay');
+
+  // ── Root Prefix ──────────────────────────────────────────────────────────
+  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;
+    }
+  }
+
+  // ── Sidebar Injection ────────────────────────────────────────────────────
+  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 + '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>' +
+      '  </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 + 'taste.html" class="sidebar-link"><span class="link-icon"></span>Taste</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>';
+  }
+
+  // ── Mobile Nav ───────────────────────────────────────────────────────────
+  function openSidebar() {
+    if (sidebar) sidebar.classList.add('open');
+    if (menuBtn) menuBtn.setAttribute('aria-expanded', 'true');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeSidebar() {
+    if (sidebar) sidebar.classList.remove('open');
+    if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');
+    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 Link Highlighting ─────────────────────────────────────────────
+  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');
+  });
+
+  document.querySelectorAll('.header-nav a').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) {
+      // Skip if already wrapped
+      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');
+      // Detect language from class or content
+      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 || '';
+
+      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 || '';
+        // Strip leading/trailing newlines
+        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) {
+      // Ensure heading has an id
+      if (!h.id) {
+        var text = (h.textContent || '')
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/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);
+
+    // IntersectionObserver for active heading
+    if (typeof IntersectionObserver !== 'undefined' && items.length > 0) {
+      var observeTargets = [];
+      headings.forEach(function (h) { observeTargets.push(h); });
+
+      var observer = new IntersectionObserver(function (entries) {
+        var visible = [];
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            visible.push(entry.target.id);
+          }
+        });
+        if (visible.length > 0) {
+          // Use the last visible heading (closest to top of viewport)
+          var active = visible[0];
+          items.forEach(function (item) {
+            if (item.id === active) {
+              item.el.classList.add('active');
+            } else {
+              item.el.classList.remove('active');
+            }
+          });
+        }
+      }, {
+        rootMargin: '-64px 0px -60% 0px',
+        threshold: 0
+      });
+
+      observeTargets.forEach(function (h) { observer.observe(h); });
+    }
+  }
+
+  buildTOC();
+})();

package/docs/mcp.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCP — Clew</title>
+  <meta name="description" content="Model Context Protocol (MCP) server management — connect external tools, resources, and services to Clew.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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">
+  <div class="header-inner">
+    <a href="index.html" class="logo"><span>Clew</span></a>
+    <nav class="header-nav">
+      <a href="index.html">Home</a>
+      <a href="index.html#features">Features</a>
+      <a href="index.html#commands">Commands</a>
+      <a href="quick-start.html" class="active">Docs</a>
+      <a href="https://github.com/JonusNattapong/ClewCode" target="_blank">GitHub</a>
+    </nav>
+    <button class="menu-btn" id="menuToggle" aria-label="Toggle navigation"><span></span><span></span><span></span></button>
+  </div>
+</header>
+<div class="app">
+  <aside class="sidebar" id="sidebar"></aside>
+  <div class="sidebar-overlay" id="sidebarOverlay"></div>
+  <div class="content-wrap">
+    <main class="content">
+      <div class="breadcrumbs"><a href="index.html">Home</a><span class="sep">/</span><span>MCP</span></div>
+      <h1>Model Context Protocol (MCP)</h1>
+      <p class="section-subtitle">Connect Clew to external tools, data sources, and services via the Model Context Protocol — an open standard for AI-application integration.</p>
+
+      <p>MCP support is implemented in <code>src/services/mcp/</code>. Servers are discovered at startup and their tools, resources, and prompts are merged into Clew's runtime.</p>
+
+      <h2>How It Works</h2>
+      <pre><code>  MCP Server Config (JSON or inline)
+       |
+       v
+  + MCP Manager (src/services/mcp/)
+  |    Server connection lifecycle
+  |    Tool discovery via tools/list
+  |    Resource access via resources/read
+  |    Paginated responses
+  |
+  + Tool Pool (assembleToolPool)
+  |    MCP tools merged with built-in tools
+  |    Availability toggled by permission rules
+  |
+  + Query Loop
+       Model sees MCP tools alongside built-ins
+       Tool calls routed to the appropriate MCP server</code></pre>
+
+      <h2>MCP Commands</h2>
+      <table>
+        <tr><th>Command</th><th>Description</th></tr>
+        <tr><td><code>/mcp</code></td><td>Manage MCP servers — list, add, remove, view status</td></tr>
+      </table>
+
+      <h2>CLI Configuration</h2>
+      <p>MCP servers are configured at startup via CLI flags:</p>
+      <pre><code># Load servers from a JSON config file
+clew --mcp-config ./mcp-servers.json
+
+# Load multiple configs
+clew --mcp-config ./servers.json ./extra.json
+
+# Pass inline JSON
+clew --mcp-config '{"servers":{...}}'
+
+# Strict mode (only use MCP servers, no built-ins)
+clew --strict-mcp-config</code></pre>
+
+      <h2>MCP Server Config Format</h2>
+      <p>Each MCP server is defined with a command, arguments, and environment variables:</p>
+      <pre><code>{
+    "servers": {
+      "filesystem": {
+        "command": "npx",
+        "args": ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"],
+        "env": {}
+      },
+      "database": {
+        "command": "node",
+        "args": ["./mcp/db-server.js"],
+        "env": { "DB_URL": "postgresql://..." }
+      }
+    }
+  }</code></pre>
+
+      <h2>Tool Discovery</h2>
+      <p>When an MCP server connects, Clew:</p>
+      <ol>
+        <li>Sends <code>tools/list</code> to discover available tools</li>
+        <li>Merges discovered tools into the global tool pool via <code>assembleToolPool()</code></li>
+        <li>Handles paginated responses for servers with many tools</li>
+        <li>Makes tools available to the model alongside built-in tools</li>
+      </ol>
+
+      <p>MCP-provided tools inherit their schemas from the server and go through the same permission gating and hook system as built-in tools.</p>
+
+      <h2>Resources</h2>
+      <p>MCP servers can also expose resources — structured data that Clew can read:</p>
+      <ul>
+        <li><strong>ListMcpResources</strong> — List available resources from all connected servers</li>
+        <li><strong>ReadMcpResource</strong> — Read a specific resource by URI</li>
+      </ul>
+
+      <p>Resources are useful for accessing database schemas, API documentation, configuration files, and other structured data through MCP servers.</p>
+
+      <h2>Plugin-Bundled MCP Servers</h2>
+      <p>Plugins can declare MCP servers in their manifest. These are automatically started when the plugin is loaded and stopped when the plugin is unloaded. See <a href="plugins.html">Plugins</a> for details.</p>
+
+      <h2>Architecture Files</h2>
+      <table>
+        <tr><th>Path</th><th>Role</th></tr>
+        <tr><td><code>src/services/mcp/</code></td><td>MCP server connection management, tool discovery, resource access</td></tr>
+        <tr><td><code>src/tools.ts</code></td><td>Tool registry — MCP tools merged via assembleToolPool()</td></tr>
+      </table>
+
+      <footer class="footer">
+        <span>Clew v0.1.2 — Open Source</span>
+        <div class="footer-links">
+          <a href="https://github.com/JonusNattapong/ClewCode">GitHub</a>
+          <a href="https://github.com/JonusNattapong/ClewCode/issues">Issues</a>
+        </div>
+      </footer>
+    </main>
+    <nav class="toc-sidebar"></nav>
+  </div>
+</div>
+<script src="js/main.js"></script>
+</body>
+</html>

package/docs/models.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Models — Clew</title>
+  <meta name="description" content="Model selection guide for Clew — how to pick, switch, and manage models across 27 providers.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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"><div class="header-inner"><a href="index.html" class="logo"><span>Clew</span></a><nav class="header-nav"><a href="index.html">Home</a><a href="index.html#features">Features</a><a href="index.html#commands">Commands</a><a href="quick-start.html" class="active">Docs</a><a href="https://github.com/JonusNattapong/ClewCode" target="_blank">GitHub</a></nav><button class="menu-btn" id="menuToggle" aria-label="Toggle navigation"><span></span><span></span><span></span></button></div></header>
+<div class="app"><aside class="sidebar" id="sidebar"></aside><div class="sidebar-overlay" id="sidebarOverlay"></div>
+<div class="content-wrap"><main class="content">
+  <div class="breadcrumbs"><a href="index.html">Home</a><span class="sep">/</span><span>Models</span></div>
+  <h1>Models</h1>
+  <p class="section-subtitle">Clew supports 100+ models across 27 providers. Pick the right model for each task — from frontier reasoning to fast local inference.</p>
+
+  <h2>Model Selection Guide</h2>
+  <table>
+    <tr><th>Workload</th><th>Recommended Models</th><th>Context</th><th>Notes</th></tr>
+    <tr><td>Complex architecture &amp; large edits</td><td>claude-opus-4-7, claude-sonnet-4-6, gpt-5.5, deepseek-v4-pro</td><td>1M tokens</td><td>Best tool calling, strong reasoning, largest context</td></tr>
+    <tr><td>Code review &amp; debugging</td><td>claude-sonnet-4-6, gpt-5.5, gemini-3.1-pro</td><td>1M-2M tokens</td><td>Good instruction following, reliable output</td></tr>
+    <tr><td>Quick search &amp; summarization</td><td>claude-haiku-4-5, deepseek-v4-flash, mistral-small-4, groq/llama-3.3-70b</td><td>128K-200K</td><td>Fast, cost-effective, lower latency</td></tr>
+    <tr><td>Offline / air-gapped</td><td>ollama/llama4:70b, ollama/llama3.3</td><td>131K tokens</td><td>Fully local, no network needed</td></tr>
+    <tr><td>Cost-sensitive bulk</td><td>kilocode/kilo-auto/free, opencode-go/minimax-m2.7, groq/llama-3.1-8b</td><td>Varies</td><td>Free or minimal cost tiers available</td></tr>
+    <tr><td>Research &amp; reasoning</td><td>claude-opus-4-7, deepseek-v4-pro, gemini-3.1-pro</td><td>1M-2M tokens</td><td>Deep reasoning, chain-of-thought</td></tr>
+    <tr><td>Vision / multimodal</td><td>claude-sonnet-4-6, gpt-5.5, gemini-3.1-pro, deepseek-v4-flash</td><td>1M tokens</td><td>Image understanding, document analysis</td></tr>
+  </table>
+
+  <h2>Notable Models by Provider</h2>
+  <table>
+    <tr><th>Provider</th><th>Models Available</th></tr>
+    <tr><td>Anthropic</td><td>claude-opus-4-7 (1M ctx), claude-sonnet-4-6 (1M ctx, recommended), claude-haiku-4-5 (200K ctx, fast)</td></tr>
+    <tr><td>OpenAI</td><td>gpt-5.5 (1M ctx), gpt-5.4 (1M ctx), gpt-5.4-mini (fast)</td></tr>
+    <tr><td>Google</td><td>gemini-3.1-pro (2M ctx), gemini-3.1-flash-lite (1M ctx, fast)</td></tr>
+    <tr><td>DeepSeek</td><td>deepseek-v4-pro (1M ctx, MoE), deepseek-v4-flash (1M ctx, fast MoE)</td></tr>
+    <tr><td>xAI</td><td>grok-4.3 (128K ctx)</td></tr>
+    <tr><td>Mistral</td><td>mistral-medium-3.5, mistral-small-4, mistral-large-3</td></tr>
+    <tr><td>Groq</td><td>llama-3.3-70b, llama-3.1-8b-instant (fast)</td></tr>
+    <tr><td>Ollama</td><td>llama4:70b (local), llama3.3 (local), qwen3.6-plus (local)</td></tr>
+    <tr><td>GitHub Copilot</td><td>claude-opus-4.7, claude-sonnet-4.6, claude-haiku-4.5, gpt-5.5</td></tr>
+    <tr><td>OpenCode</td><td>claude-opus-4-7, claude-sonnet-4-6, gpt-5.5, gemini-3.1-pro, kimi-k2.6</td></tr>
+    <tr><td>KiloCode</td><td>kilo-auto/free, kilo-auto/balanced, kilo-auto/frontier</td></tr>
+    <tr><td>Cohere</td><td>command-a-plus (128K ctx)</td></tr>
+    <tr><td>Perplexity</td><td>sonar-pro, sonar, sonar-reasoning-pro</td></tr>
+    <tr><td>Together AI</td><td>deepseek-v4, Qwen3.6, Llama-4</td></tr>
+    <tr><td>NVIDIA NIM</td><td>deepseek-v4-pro, glm-5.1, nemotron-3</td></tr>
+    <tr><td>Cerebras</td><td>qwen-3-235b (extremely fast)</td></tr>
+    <tr><td>Moonshot (Kimi)</td><td>kimi-k2.6 (128K ctx)</td></tr>
+    <tr><td>Zhipu (GLM)</td><td>glm-4.7 (128K ctx)</td></tr>
+    <tr><td>Hugging Face</td><td>llama-3.3-70b-instruct</td></tr>
+    <tr><td>Poe</td><td>claude-3-7-sonnet</td></tr>
+  </table>
+
+  <h2>Model Switching</h2>
+  <pre><code>/model                          # Interactive picker (recent models at top, grouped by provider)
+/model list                     # List all available models
+/model claude-sonnet-4-7        # Switch by full ID
+/model sonnet                   # Alias-based switching
+--model opus                    # CLI flag at startup</code></pre>
+  <p>The picker shows <strong>all models from every provider</strong> in named sections — not just the active provider's models. Recent models appear at top with the active provider's default. Select any model from any provider directly.</p>
+  <p>Model switching is instant — the next conversation turn uses the new model. Previous context is preserved.</p>
+
+  <h2>Model Aliases</h2>
+  <p>Short aliases are resolved to full model IDs: <code>sonnet</code>, <code>opus</code>, <code>haiku</code>, <code>gpt5</code>, <code>flash</code>, etc.</p>
+
+  <h2>CLI Flags for Models</h2>
+  <table>
+    <tr><th>Flag</th><th>Description</th></tr>
+    <tr><td><code>--model &lt;name&gt;</code></td><td>Set model at startup (e.g., <code>--model sonnet</code> or <code>--model claude-opus-4-7</code>)</td></tr>
+    <tr><td><code>--effort &lt;level&gt;</code></td><td>Set reasoning effort: <code>low</code>, <code>medium</code>, <code>high</code>, <code>max</code></td></tr>
+    <tr><td><code>--max-turns &lt;N&gt;</code></td><td>Limit agentic turns in non-interactive mode</td></tr>
+    <tr><td><code>--thinking &lt;mode&gt;</code></td><td>Thinking mode: <code>enabled</code>, <code>adaptive</code>, <code>disabled</code></td></tr>
+    <tr><td><code>--fallback-model &lt;model&gt;</code></td><td>Fallback when primary model is overloaded (print mode only)</td></tr>
+    <tr><td><code>--task-budget &lt;tokens&gt;</code></td><td>API-side task budget in tokens</td></tr>
+    <tr><td><code>--max-budget-usd &lt;amount&gt;</code></td><td>Maximum spend on API calls (print mode only)</td></tr>
+  </table>
+
+  <h2>Model Capabilities</h2>
+  <p>Each model declaration in <code>providers.json</code> includes:</p>
+  <ul>
+    <li>Model ID and display label</li>
+    <li>Context window (<code>maxContext</code>) and max output tokens (<code>maxOutput</code>)</li>
+    <li>Tool calling type (<code>native</code>, <code>none</code>)</li>
+    <li>Vision support</li>
+    <li>Streaming mode (<code>full</code>, <code>partial</code>)</li>
+    <li>Reasoning support</li>
+    <li>System prompt support</li>
+    <li>Tags (for filtering): <code>fast</code>, <code>verified</code>, <code>recommended</code>, <code>latest</code>, <code>free</code>, <code>vision</code>, <code>tools</code>, <code>native</code>, <code>moe</code>, <code>local</code></li>
+  </ul>
+
+  <footer class="footer">
+    <span>Clew v0.2.1 — Open Source</span>
+    <div class="footer-links">
+      <a href="https://github.com/JonusNattapong/ClewCode">GitHub</a>
+      <a href="https://github.com/JonusNattapong/ClewCode/issues">Issues</a>
+    </div>
+  </footer>
+</main>
+<nav class="toc-sidebar"></nav>
+</div>
+</div>
+<script src="js/main.js"></script>
+</body>
+</html>

package/docs/permission-model.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Permission Model — Clew</title>
+  <meta name="description" content="Tool execution permissions in Clew — modes, rules, and security.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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"><div class="header-inner"><a href="index.html" class="logo"><span>Clew</span></a><nav class="header-nav"><a href="index.html">Home</a><a href="index.html#features">Features</a><a href="index.html#commands">Commands</a><a href="quick-start.html" class="active">Docs</a><a href="https://github.com/JonusNattapong/ClewCode" target="_blank">GitHub</a></nav><button class="menu-btn" id="menuToggle" aria-label="Toggle navigation"><span></span><span></span><span></span></button></div></header>
+<div class="app"><aside class="sidebar" id="sidebar"></aside><div class="sidebar-overlay" id="sidebarOverlay"></div>
+<div class="content-wrap"><main class="content">
+  <div class="breadcrumbs"><a href="index.html">Home</a><span class="sep">/</span><span>Permission Model</span></div>
+  <h1>Permission Model</h1>
+  <p class="section-subtitle">Clew gates tool execution through a tiered permission system with multiple modes, allow/deny rules, and tool-specific checks.</p>
+
+  <h2>Permission Modes</h2>
+  <p>Defined in <code>src/types/permissions.ts</code>. Seven user-addressable modes:</p>
+  <table>
+    <tr><th>Mode</th><th>Behavior</th></tr>
+    <tr><td><code>default</code></td><td>Ask before sensitive tool actions (read/write/bash/network). Safe default.</td></tr>
+    <tr><td><code>ask</code></td><td>Always ask before any tool execution.</td></tr>
+    <tr><td><code>plan</code></td><td>Prefer planning mode — AI must present a plan before executing tools.</td></tr>
+    <tr><td><code>auto</code></td><td>Auto-approve low-risk actions using transcript classifier (requires <code>TRANSCRIPT_CLASSIFIER</code> feature). Prompt for risky operations.</td></tr>
+    <tr><td><code>acceptEdits</code></td><td>Auto-approve file edit operations. Useful for rapid iteration.</td></tr>
+    <tr><td><code>bypassPermissions</code></td><td>Skip all permission prompts. Use only in trusted sandboxes.</td></tr>
+    <tr><td><code>dontAsk</code></td><td>Never ask — auto-deny anything that would require permission.</td></tr>
+  </table>
+
+  <h2>Permission Rules</h2>
+  <p>Granular allow/deny rules control specific tools and their arguments:</p>
+  <pre><code>/permissions     # Open interactive permission rule manager</code></pre>
+  <p>Rules can target specific tools with pattern matching:</p>
+  <ul>
+    <li><code>Bash(git *)</code> — Allow/deny git commands specifically</li>
+    <li><code>Edit</code> — Allow/deny all file edits</li>
+    <li><code>Bash(rm *)</code> — Warn/block destructive shell commands</li>
+  </ul>
+
+  <h2>Rule Sources</h2>
+  <p>Permission rules come from multiple sources (evaluated in order, with later sources overriding earlier ones):</p>
+  <ul>
+    <li><code>userSettings</code> — From user config file</li>
+    <li><code>projectSettings</code> — From project-level settings</li>
+    <li><code>localSettings</code> — Local overrides</li>
+    <li><code>flagSettings</code> — From CLI flags (<code>--allowedTools</code>, <code>--disallowedTools</code>)</li>
+    <li><code>policySettings</code> — Managed/organization policy</li>
+  </ul>
+
+  <h2>Tool Permission Flow</h2>
+  <pre><code>1. Tool input validation (validateInput)
+2. Tool-specific checkPermissions()
+3. Deny rule check (permissions.ts getDenyRuleForTool)
+4. Permission mode evaluation (mode-based auto decision)
+5. Plugin hooks (PreToolUse PostToolUse)
+6. Classifier-based auto-approval (auto mode)
+7. User permission dialog (if needed)</code></pre>
+
+  <h2>CLI Flags for Permissions</h2>
+  <table>
+    <tr><th>Flag</th><th>Description</th></tr>
+    <tr><td><code>--permission-mode &lt;mode&gt;</code></td><td>Set session permission mode</td></tr>
+    <tr><td><code>--dangerously-skip-permissions</code></td><td>Bypass all checks (sandbox only)</td></tr>
+    <tr><td><code>--allow-dangerously-skip-permissions</code></td><td>Enable bypass as optional mode</td></tr>
+    <tr><td><code>--allowedTools, --allowed-tools &lt;tools...&gt;</code></td><td>Allowlist specific tools with patterns</td></tr>
+    <tr><td><code>--disallowedTools, --disallowed-tools &lt;tools...&gt;</td><td>Denylist specific tools with patterns</td></tr>
+  </table>
+
+  <h2>Security Best Practices</h2>
+  <ul>
+    <li><strong>Default mode</strong> for day-to-day development</li>
+    <li><strong>Plan mode</strong> for production infrastructure or unfamiliar code</li>
+    <li><strong>Bypass modes</strong> only in disposable worktrees or Docker sandboxes</li>
+    <li>Use allow/deny rules to permit safe patterns (e.g., <code>Bash(git *)</code>) while blocking dangerous ones</li>
+    <li>Run <code>/doctor</code> to audit current permission settings</li>
+  </ul>
+
+  <div class="callout callout-warn">
+    <strong>Use Caution</strong>
+    <code>bypassPermissions</code> mode executes all tool actions without prompting. Restrict to trusted, sandboxed environments.
+  </div>
+
+  <footer class="footer">
+    <span>Clew v0.1.2 — Open Source</span>
+    <div class="footer-links">
+      <a href="https://github.com/JonusNattapong/ClewCode">GitHub</a>
+      <a href="https://github.com/JonusNattapong/ClewCode/issues">Issues</a>
+    </div>
+  </footer>
+</main>
+<nav class="toc-sidebar"></nav>
+</div>
+</div>
+<script src="js/main.js"></script>
+</body>
+</html>