feat: add See Example sample outputs to all tools

app/tools/changelog_ai/templates/changelog_ai/index.html

@@ -156,6 +156,7 @@ refactor: clean up legacy charting utility"></textarea>
         <span class="material-symbols-outlined text-5xl text-outline mb-4">auto_awesome</span>
         <p class="text-sm font-medium">Paste your commits and click Generate</p>
         <p class="text-xs text-outline mt-1">Set version, audience, and language, then generate</p>
+        <button onclick="window._showChangelogExample()" class="mt-4" style="background:none;border:1px solid #00d97e;color:#00d97e;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;">See example &#x2197;</button>
       </div>
 
       <div id="loading-state" class="hidden flex-1 flex flex-col items-center justify-center gap-4">
@@ -715,6 +716,63 @@ refactor: clean up legacy charting utility"></textarea>
   window.loadDemo = loadDemo;
 
   document.getElementById('btn-try-demo').addEventListener('click', loadDemo);
+
+  // ── Example feature ──────────────────────────────────────────────────────
+  window._showChangelogExample = function() {
+    const exampleData = {
+      sections: [
+        {
+          type: 'features',
+          items: [
+            { title: 'AI-powered auto-complete for search', description: 'Search bar now suggests results in real-time using a fine-tuned language model, reducing average search time by 60%.' },
+            { title: 'Bulk export to CSV and Excel', description: 'Users can now export filtered datasets in both CSV and XLSX formats directly from any table view.' },
+            { title: 'Dark mode toggle in user settings', description: 'A system-aware dark mode is now available under Settings > Appearance, with automatic switching based on OS preference.' }
+          ]
+        },
+        {
+          type: 'fixes',
+          items: [
+            { title: 'Dashboard charts not loading on Safari', description: 'Resolved a WebKit rendering issue that caused chart canvases to remain blank on Safari 17+.' },
+            { title: 'Email notifications sent twice on password reset', description: 'Fixed a duplicate event trigger in the notification queue that caused two emails per reset request.' }
+          ]
+        },
+        {
+          type: 'improvements',
+          items: [
+            { title: 'Page load time reduced by 40%', description: 'Implemented route-level code splitting and lazy loading for all dashboard modules, bringing initial load under 1.2 seconds.' }
+          ]
+        }
+      ]
+    };
+
+    // Set version and date for the example
+    versionInput.value = 'v2.4.0';
+    dateInput.value = '2026-04-10';
+    lastResult = exampleData;
+
+    renderChangelog(exampleData);
+    showState('results');
+    btnDownloadPdf.classList.remove('hidden');
+
+    // Add clear example button
+    if (!document.getElementById('clear-example-btn')) {
+      const clearBtn = document.createElement('button');
+      clearBtn.id = 'clear-example-btn';
+      clearBtn.textContent = 'Clear example';
+      clearBtn.style.cssText = 'background:none;border:1px solid #94a3b8;color:#94a3b8;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;margin-top:8px;align-self:center;';
+      clearBtn.onclick = function() {
+        lastResult = null;
+        versionInput.value = '';
+        dateInput.valueAsDate = new Date();
+        showState('empty');
+        btnDownloadPdf.classList.add('hidden');
+        this.remove();
+      };
+      resultsState.appendChild(clearBtn);
+    }
+  };
+
+  document.getElementById('btn-try-demo').addEventListener('click', loadDemo);
 })();
 </script>
 {% endblock %}

app/tools/doc_forge/templates/doc_forge/index.html

@@ -55,6 +55,10 @@
       <div class="flex items-center gap-2"><span class="material-symbols-outlined text-sm">check_circle</span> Instant Results</div>
       <div class="flex items-center gap-2"><span class="material-symbols-outlined text-sm">check_circle</span> Free &amp; Open Source</div>
     </div>
+    <a href="https://github.com/expressjs/express" target="_blank"
+       class="mt-4 inline-flex items-center gap-1" style="color:#00d97e;font-size:12px;text-decoration:none;border:1px solid #00d97e;padding:3px 10px;border-radius:6px;">
+      See example: expressjs/express &#x2197;
+    </a>
 
     {# ── Repo Preview Card (hidden until analyze) ──────────────────────────────── #}
     <div id="repo-card" class="hidden w-full max-w-2xl mt-8 bg-surface-container-lowest rounded-xl p-6 text-left shadow-sm">

app/tools/git_narrator/templates/git_narrator/index.html

@@ -120,6 +120,7 @@
       <p class="text-xs text-gd-text-2 max-w-xs leading-relaxed">
         Paste a GitHub URL or git log on the left. The AI writes your commit history as an editorial engineering report.
       </p>
+      <button onclick="showNarratorExample()" class="mt-4" style="background:none;border:1px solid #00d97e;color:#00d97e;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;">See example &#x2197;</button>
       <div class="mt-5 flex flex-wrap justify-center gap-1.5">
         {% for tag in ['Highlights', 'Tech Debt', 'Milestones', 'Contributors', 'Impact'] %}
         <span class="pill" style="background:#1C2128; color:#484F58; border:1px solid rgba(240,246,252,0.06); font-size:9px;">{{ tag }}</span>
@@ -505,5 +506,94 @@ function buildCopyText(data) {
 document.addEventListener('keydown', e => {
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') doNarrate();
 });
+
+function showNarratorExample() {
+  const exampleData = {
+    period_label: 'Mar 18 -- Apr 12, 2026',
+    summary_stats: {
+      total_commits: 47,
+      contributors: 4,
+      features: 8,
+      fixes: 12
+    },
+    commits: [
+      { hash: 'a3f1b2c', message: 'feat: migrate payment gateway to Stripe V3 API', time: '2 days ago', author: 'sarah' },
+      { hash: 'd4e5f6a', message: 'fix: resolve race condition in concurrent checkout', time: '3 days ago', author: 'david' },
+      { hash: '7b8c9d0', message: 'refactor: extract payment validation into middleware', time: '4 days ago', author: 'sarah' },
+      { hash: 'e1f2a3b', message: 'feat: add webhook handlers for payment events', time: '5 days ago', author: 'carlos' },
+      { hash: 'c5d6e7f', message: 'fix: handle expired card tokens gracefully', time: '6 days ago', author: 'david' },
+      { hash: 'f8a9b0c', message: 'test: add integration tests for refund flow', time: '1 week ago', author: 'mei' },
+      { hash: '2d3e4f5', message: 'feat: implement partial refund support', time: '1 week ago', author: 'carlos' },
+      { hash: '6a7b8c9', message: 'fix: correct currency conversion rounding errors', time: '2 weeks ago', author: 'mei' }
+    ],
+    highlights: [
+      {
+        title: 'Payment Gateway Migration to Stripe V3',
+        narrative: 'The team executed a complete migration from the legacy payment processor to Stripe V3 API. This was the highest-risk change of the quarter, touching 23 files across the checkout, billing, and webhook subsystems. Sarah led the architecture while David handled the concurrency edge cases that surfaced during load testing.',
+        impact: 'Payment processing latency reduced by 340ms (avg), failure rate dropped from 2.1% to 0.3%',
+        key_commit: 'a3f1b2c feat: migrate payment gateway to Stripe V3 API\nd4e5f6a fix: resolve race condition in concurrent checkout\n7b8c9d0 refactor: extract payment validation into middleware'
+      },
+      {
+        title: 'Partial Refund Support',
+        narrative: 'A long-requested feature by the support team -- customers can now receive partial refunds without cancelling the entire order. Carlos implemented the core logic while Mei built out the integration test suite covering 15 edge cases including multi-currency scenarios.',
+        impact: 'Support ticket volume for refund issues projected to decrease by 40%'
+      }
+    ],
+    tech_debt: [
+      {
+        icon: 'cleaning_services',
+        title: 'Legacy Payment Module Removed',
+        description: 'The old PaymentProcessorV1 class and its 1,200 lines of adapter code were safely removed after the Stripe V3 migration was verified in production for 2 weeks.'
+      },
+      {
+        icon: 'build',
+        title: 'Validation Middleware Extracted',
+        description: 'Payment validation logic that was duplicated across 4 route handlers has been consolidated into a single middleware, reducing code duplication by 60%.'
+      }
+    ],
+    milestones: [
+      {
+        status: 'shipped',
+        title: 'Stripe V3 Payment Integration',
+        narrative: 'Full migration from legacy processor to Stripe V3, including webhook event handling, idempotent retries, and automatic currency conversion. Deployed to production on April 5.',
+        contributors: ['sarah', 'david']
+      },
+      {
+        status: 'shipped',
+        title: 'Partial Refund System',
+        narrative: 'End-to-end partial refund capability with audit trail, multi-currency support, and automated accounting entries.',
+        contributors: ['carlos', 'mei']
+      },
+      {
+        status: 'in-progress',
+        title: 'PCI DSS Compliance Audit Prep',
+        narrative: 'Preparing documentation and code artifacts for the upcoming annual PCI compliance review. Tokenization patterns have been validated, logging has been scrubbed of sensitive data.',
+        contributors: ['sarah', 'mei']
+      }
+    ]
+  };
+
+  renderNarrative(exampleData);
+  setStatus('Example loaded');
+
+  // Add clear example button
+  if (!document.getElementById('clear-example-btn')) {
+    const clearBtn = document.createElement('button');
+    clearBtn.id = 'clear-example-btn';
+    clearBtn.textContent = 'Clear example';
+    clearBtn.style.cssText = 'background:none;border:1px solid #484F58;color:#484F58;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;margin-top:12px;align-self:center;display:flex;';
+    clearBtn.onclick = function() {
+      document.getElementById('narrative-output').classList.add('hidden');
+      document.getElementById('stats-area').classList.add('hidden');
+      document.getElementById('commits-area').classList.add('hidden');
+      document.getElementById('copy-btn').classList.add('hidden');
+      document.getElementById('period-chip').classList.add('hidden');
+      document.getElementById('empty-state').classList.remove('hidden');
+      setStatus('Ready');
+      this.remove();
+    };
+    document.getElementById('narrative-output').appendChild(clearBtn);
+  }
+}
 </script>
 {% endblock %}

app/tools/schema_detective/templates/schema_detective/index.html

@@ -105,6 +105,7 @@
         <span class="material-symbols-outlined text-5xl text-outline mb-4">policy</span>
         <p class="text-sm font-medium">Paste your schema and click Run Audit</p>
         <p class="text-xs text-outline mt-1">Detects missing PKs, bad indexes, naming issues, and more</p>
+        <button onclick="window._showExample()" class="mt-4" style="background:none;border:1px solid #00d97e;color:#00d97e;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;">See example &#x2197;</button>
       </div>
 
       <!-- Loading state -->
@@ -490,6 +491,57 @@ CREATE TABLE prescriptions (
     }
   }
 
+  // ── Example feature ──────────────────────────────────────────────────────
+  window._showExample = function() {
+    const exampleData = {
+      health_score: 72,
+      summary: 'Your e-commerce database has a solid foundation but contains 3 findings that should be addressed. The orders table is missing an index on user_id which will cause slow lookups as data grows. A nullable foreign key in the reviews table risks orphaned records. Several columns use VARCHAR(255) when shorter limits would improve storage and validation.',
+      findings: [
+        {
+          severity: 'critical',
+          title: 'Missing index on orders.user_id',
+          description: 'The orders table references users via user_id but has no index on this column. Queries joining users to their orders will perform full table scans, degrading rapidly beyond 100K rows.',
+          suggestion: 'CREATE INDEX idx_orders_user_id ON orders(user_id);',
+          location: 'Table: orders, Column: user_id'
+        },
+        {
+          severity: 'warning',
+          title: 'Nullable foreign key in reviews table',
+          description: 'The reviews.product_id column allows NULL values despite being a foreign key to products. This can result in orphaned review records that reference no product.',
+          suggestion: 'ALTER TABLE reviews MODIFY product_id INT NOT NULL;',
+          location: 'Table: reviews, Column: product_id'
+        },
+        {
+          severity: 'advice',
+          title: 'Overuse of VARCHAR(255) in multiple tables',
+          description: 'Columns users.username, products.sku, and orders.status all use VARCHAR(255). Real-world data in these columns rarely exceeds 50 characters. Tighter limits improve storage efficiency and catch data entry errors.',
+          suggestion: 'ALTER TABLE users MODIFY username VARCHAR(64);\nALTER TABLE products MODIFY sku VARCHAR(32);\nALTER TABLE orders MODIFY status VARCHAR(30);',
+          location: 'Tables: users, products, orders'
+        }
+      ]
+    };
+    _lastFindings = exampleData.findings;
+    renderResults(exampleData);
+    showState('results');
+    sbSummary.classList.remove('hidden');
+
+    // Add clear example button
+    if (!document.getElementById('clear-example-btn')) {
+      const clearBtn = document.createElement('button');
+      clearBtn.id = 'clear-example-btn';
+      clearBtn.textContent = 'Clear example';
+      clearBtn.style.cssText = 'background:none;border:1px solid #94a3b8;color:#94a3b8;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;margin:8px auto;display:block;';
+      clearBtn.onclick = function() {
+        showState('empty');
+        sbSummary.classList.add('hidden');
+        btnDownloadPdf.classList.add('hidden');
+        btnDownloadPdf.classList.remove('flex');
+        this.remove();
+      };
+      resultsState.appendChild(clearBtn);
+    }
+  };
+
   btnFix.addEventListener('click', async () => {
     const schema = schemaInput.value.trim();
     if (!schema) return;

app/tools/sql_whisperer/templates/sql_whisperer/index.html

@@ -104,6 +104,7 @@ CREATE TABLE orders (
       </div>
       <p class="font-semibold text-sys-label text-sm mb-1.5" style="letter-spacing:-0.01em;">Output will appear here</p>
       <p class="text-sys-label-3 text-xs max-w-[240px] leading-relaxed">Describe what you need in plain English, paste your schema, then hit Generate.</p>
+      <button onclick="showSqlExample()" class="mt-4" style="background:none;border:1px solid #00d97e;color:#00d97e;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;">See example &#x2197;</button>
       <div class="mt-6 flex flex-wrap justify-center gap-1.5">
         {% for tag in ['SELECT', 'JOIN', 'GROUP BY', 'CTE', 'Window Fn', 'Subquery'] %}
         <span class="pill" style="background:rgba(116,116,128,0.08); color:#8E8E93; font-family:'SF Mono',monospace; font-size:10px;">{{ tag }}</span>
@@ -366,5 +367,47 @@ function clearAll() {
 document.addEventListener('keydown', e => {
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') generateSQL();
 });
+
+function showSqlExample() {
+  const exampleData = {
+    sql: `SELECT\n    c.customer_name,\n    c.region,\n    SUM(o.total_amount)  AS revenue,\n    COUNT(o.id)          AS order_count\nFROM customers c\nJOIN orders o\n  ON o.customer_id = c.id\nWHERE o.order_date >= DATE_TRUNC('quarter', CURRENT_DATE) - INTERVAL '3 months'\n  AND o.order_date <  DATE_TRUNC('quarter', CURRENT_DATE)\n  AND o.status = 'completed'\nGROUP BY c.customer_name, c.region\nORDER BY revenue DESC\nLIMIT 10;`,
+    explanation: 'This query joins customers with their completed orders from last quarter, aggregates total revenue and order count per customer, then returns the top 10 sorted by revenue descending. DATE_TRUNC ensures quarter boundaries are calculated dynamically.',
+    warnings: [
+      'Ensure an index exists on orders(customer_id, order_date) for optimal join and filter performance.',
+      'If the orders table exceeds 10M rows, consider partitioning by order_date to reduce scan time.'
+    ],
+    sample_result_shape: 'customer_name (VARCHAR), region (VARCHAR), revenue (DECIMAL), order_count (INTEGER)',
+    alternatives: [
+      {
+        label: 'CTE approach with window function',
+        trade_off: 'More readable for complex pipelines but slightly more overhead on small datasets.',
+        sql: `WITH quarterly_orders AS (\n    SELECT\n        customer_id,\n        SUM(total_amount) AS revenue,\n        COUNT(*)          AS order_count,\n        RANK() OVER (ORDER BY SUM(total_amount) DESC) AS rnk\n    FROM orders\n    WHERE order_date >= DATE_TRUNC('quarter', CURRENT_DATE) - INTERVAL '3 months'\n      AND order_date <  DATE_TRUNC('quarter', CURRENT_DATE)\n      AND status = 'completed'\n    GROUP BY customer_id\n)\nSELECT c.customer_name, c.region, q.revenue, q.order_count\nFROM quarterly_orders q\nJOIN customers c ON c.id = q.customer_id\nWHERE q.rnk <= 10\nORDER BY q.revenue DESC;`
+      },
+      {
+        label: 'Subquery with HAVING filter',
+        trade_off: 'Avoids window functions for databases that do not support them, but less flexible for tie-breaking.',
+        sql: `SELECT c.customer_name, c.region, sub.revenue\nFROM (\n    SELECT customer_id, SUM(total_amount) AS revenue\n    FROM orders\n    WHERE status = 'completed'\n      AND order_date >= DATE_TRUNC('quarter', CURRENT_DATE) - INTERVAL '3 months'\n    GROUP BY customer_id\n    ORDER BY revenue DESC\n    LIMIT 10\n) sub\nJOIN customers c ON c.id = sub.customer_id\nORDER BY sub.revenue DESC;`
+      }
+    ]
+  };
+
+  renderResults(exampleData, 'PostgreSQL');
+  setStatus('Example loaded');
+
+  // Add clear example button
+  if (!document.getElementById('clear-example-btn')) {
+    const clearBtn = document.createElement('button');
+    clearBtn.id = 'clear-example-btn';
+    clearBtn.textContent = 'Clear example';
+    clearBtn.style.cssText = 'background:none;border:1px solid #AEAEB2;color:#AEAEB2;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;margin-top:8px;align-self:center;';
+    clearBtn.onclick = function() {
+      document.getElementById('results-container').classList.add('hidden');
+      document.getElementById('empty-state').classList.remove('hidden');
+      setStatus('Ready');
+      this.remove();
+    };
+    document.getElementById('results-container').appendChild(clearBtn);
+  }
+}
 </script>
 {% endblock %}

app/tools/test_forge/templates/test_forge/index.html

@@ -153,6 +153,7 @@
           <span class="material-symbols-outlined text-4xl mb-3 text-outline">science</span>
           <p class="text-sm font-medium">Paste your code and click Generate Tests</p>
           <p class="text-xs text-outline mt-1">Ctrl+Enter to generate · 8 frameworks supported</p>
+          <button onclick="window._showTestForgeExample()" class="mt-4" style="background:none;border:1px solid #00d97e;color:#00d97e;font-size:12px;padding:3px 10px;border-radius:6px;cursor:pointer;">See example &#x2197;</button>
         </div>
 
         <!-- Loading state -->
@@ -459,6 +460,131 @@
     statPanel.classList.add('hidden');
   }
   window.loadDemo = loadDemo;
+
+  // ── Example feature ──────────────────────────────────────────────────────
+  window._showTestForgeExample = function() {
+    const exampleCode = `import pytest
+from unittest.mock import patch, MagicMock
+from auth import AuthService, InvalidCredentialsError, AccountLockedError
+
+
+class TestAuthServiceLogin:
+    """Tests for the user authentication login flow."""
+
+    def test_login_valid_credentials(self):
+        svc = AuthService()
+        token = svc.login("alice@example.com", "Str0ng!Pass")
+        assert token is not None
+        assert len(token) == 64
+
+    def test_login_invalid_email_format(self):
+        svc = AuthService()
+        with pytest.raises(ValueError, match="Invalid email"):
+            svc.login("not-an-email", "password123")
+
+    def test_login_wrong_password(self):
+        svc = AuthService()
+        with pytest.raises(InvalidCredentialsError):
+            svc.login("alice@example.com", "wrongpass")
+
+    def test_login_account_locked_after_5_failures(self):
+        svc = AuthService()
+        for _ in range(5):
+            with pytest.raises(InvalidCredentialsError):
+                svc.login("alice@example.com", "wrongpass")
+        with pytest.raises(AccountLockedError):
+            svc.login("alice@example.com", "Str0ng!Pass")
+
+    def test_login_empty_password_rejected(self):
+        svc = AuthService()
+        with pytest.raises(ValueError, match="Password required"):
+            svc.login("alice@example.com", "")
+
+    def test_login_returns_unique_tokens(self):
+        svc = AuthService()
+        t1 = svc.login("alice@example.com", "Str0ng!Pass")
+        t2 = svc.login("alice@example.com", "Str0ng!Pass")
+        assert t1 != t2
+
+
+class TestAuthServiceLogout:
+    """Tests for session invalidation."""
+
+    def test_logout_invalidates_token(self):
+        svc = AuthService()
+        token = svc.login("alice@example.com", "Str0ng!Pass")
+        svc.logout(token)
+        assert svc.validate_token(token) is False
+
+    def test_logout_nonexistent_token_is_noop(self):
+        svc = AuthService()
+        svc.logout("nonexistent-token")  # should not raise
+
+
+class TestAuthServiceTokenValidation:
+    """Tests for token validation."""
+
+    def test_valid_token_returns_user(self):
+        svc = AuthService()
+        token = svc.login("alice@example.com", "Str0ng!Pass")
+        assert svc.validate_token(token) is True
+
+    def test_expired_token_returns_false(self):
+        svc = AuthService()
+        token = svc.login("alice@example.com", "Str0ng!Pass")
+        svc._expire_token(token)
+        assert svc.validate_token(token) is False
+
+    def test_malformed_token_returns_false(self):
+        svc = AuthService()
+        assert svc.validate_token("") is False
+        assert svc.validate_token(None) is False
+
+
+class TestPasswordReset:
+    """Tests for password reset flow."""
+
+    @patch("auth.EmailService.send")
+    def test_reset_sends_email(self, mock_send):
+        svc = AuthService()
+        svc.request_password_reset("alice@example.com")
+        mock_send.assert_called_once()`;
+
+    generatedCode = exampleCode;
+    testOutput.textContent = exampleCode;
+
+    bentoTests.textContent    = '12';
+    bentoCoverage.textContent = '85%';
+    bentoCoverageBar.style.width = '85%';
+    bentoEdge.textContent     = '4';
+
+    statTestCount.textContent   = '12';
+    statCoverage.textContent    = '85%';
+    statCoverageBar.style.width = '85%';
+    statEdgeCases.textContent   = '4';
+    statPanel.classList.remove('hidden');
+
+    notesText.textContent = 'Tests cover login, logout, token validation, and password reset. Edge cases include account lockout after 5 failures, empty passwords, expired tokens, and malformed inputs.';
+    notesRow.classList.remove('hidden');
+
+    showState('results');
+
+    // Add clear example button
+    if (!document.getElementById('clear-example-btn')) {
+      const clearBtn = document.createElement('button');
+      clearBtn.id = 'clear-example-btn';
+      clearBtn.textContent = 'Clear example';
+      clearBtn.style.cssText = 'background:none;border:1px solid #94a3b8;color:#94a3b8;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer;position:absolute;top:8px;right:8px;z-index:10;';
+      clearBtn.onclick = function() {
+        generatedCode = '';
+        statPanel.classList.add('hidden');
+        showState('empty');
+        this.remove();
+      };
+      resultsState.style.position = 'relative';
+      resultsState.appendChild(clearBtn);
+    }
+  };
 })();
 </script>
 {% endblock %}