Build a personal knowledge-base wiki as a static app in this directory: index.html, sty…

antigravitygemini · 36 steps · 55s · 6 filessession bebe5767-873@agentsage-runs

Build a personal knowledge-base wiki as a static app in this directory: index.html, style.css, app.js, parser.js. Markdown editing with live preview using your own small parser (headings, bold, italic, links, inline code, code blocks, lists), multiple pages with [[wikilink]] syntax that creates/links pages, full-text search, localStorage persistence, JSON export/import, dark theme, keyboard shortcuts. Also create tests.html + tests.js exercising the parser and the wikilink graph. Run the tests headless with node and fix what fails.

same matchclaude-code · 72 steps codex · 50 steps pi · 26 steps antigravity · 36 steps opencode · 30 steps

compare in arena

step 24 / 36

tests.htmlchange 1/1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wiki Parser & Graph Tests</title>
  <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0f172a;
      --card-bg: #1e293b;
      --border: #334155;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --accent: #6366f1;
      --success: #10b981;
      --success-bg: rgba(16, 185, 129, 0.15);
      --error: #ef4444;
      --error-bg: rgba(239, 68, 68, 0.15);
      --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }
 
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      padding: 2rem;
      line-height: 1.5;
    }
 
    .container {
      max-width: 900px;
      margin: 0 auto;
    }
 
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 1rem;
    }
 
    h1 {
      font-size: 1.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
 
    .badge {
      background: var(--accent);
      color: #fff;
      padding: 0.25rem 0.6rem;
      border-radius: 9999px;
      font-size: 0.8rem;
      font-weight: 600;
    }
 
    .summary-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
 
    .stat-box {
      display: flex;
      flex-direction: column;
    }
    .stat-label {
      color: var(--text-muted);
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .stat-value {
      font-size: 2rem;
      font-weight: 700;
      margin-top: 0.25rem;
    }
    .stat-value.pass { color: var(--success); }
    .stat-value.fail { color: var(--error); }
 
    .test-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
 
    .test-item {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.2s ease;
    }
 
    .test-item.pass { border-left: 4px solid var(--success); }
    .test-item.fail { border-left: 4px solid var(--error); }
 
    .test-title {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text);
    }
 
    .test-status {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
      font-weight: 600;
      padding: 0.25rem 0.6rem;
      border-radius: 6px;
    }
 
    .test-status.pass {
      background: var(--success-bg);
      color: var(--success);
    }
 
    .test-status.fail {
      background: var(--error-bg);
      color: var(--error);
    }
 
    .nav-btn {
      display: inline-block;
      margin-top: 1.5rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }
    .nav-btn:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>🧪 Wiki Test Suite <span class="badge">Node &amp; Browser</span></h1>
      <a href="index.html" class="nav-btn">← Back to Wiki App</a>
    </header>
 
    <div class="summary-card">
      <div class="stat-box">
        <span class="stat-label">Total Tests</span>
        <span class="stat-value" id="stat-total">0</span>
      </div>
      <div class="stat-box">
        <span class="stat-label">Passed</span>
        <span class="stat-value pass" id="stat-passed">0</span>
      </div>
      <div class="stat-box">
        <span class="stat-label">Failed</span>
        <span class="stat-value fail" id="stat-failed">0</span>
      </div>
      <div class="stat-box">
        <span class="stat-label">Status</span>
        <span class="stat-value" id="stat-status">-</span>
      </div>
    </div>
 
    <div class="test-list" id="test-results-list">
      <!-- Dynamically filled -->
    </div>
  </div>
 
  <script src="parser.js"></script>
  <script src="tests.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      if (window.runWikiTests) {
        const startTime = performance.now();
        const results = window.runWikiTests();
        const endTime = performance.now();
        const duration = (endTime - startTime).toFixed(1);
 
        const total = results.length;
        const passed = results.filter(r => r.passed).length;
        const failed = total - passed;
 
        document.getElementById('stat-total').textContent = total;
        document.getElementById('stat-passed').textContent = passed;
        document.getElementById('stat-failed').textContent = failed;
 
        const statusEl = document.getElementById('stat-status');
        if (failed === 0) {
          statusEl.textContent = 'PASSED ✅';
          statusEl.className = 'stat-value pass';
        } else {
          statusEl.textContent = 'FAILED ❌';
          statusEl.className = 'stat-value fail';
        }
 
        const listContainer = document.getElementById('test-results-list');
        results.forEach((res, i) => {
          const item = document.createElement('div');
          item.className = `test-item ${res.passed ? 'pass' : 'fail'}`;
          
          item.innerHTML = `
            <span class="test-title">${i + 1}. ${escapeHtml(res.message)}</span>
            <span class="test-status ${res.passed ? 'pass' : 'fail'}">
              ${res.passed ? '✓ PASS' : '✗ FAIL'}
            </span>
          `;
          listContainer.appendChild(item);
        });
      }
 
      function escapeHtml(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
      }
    });
  </script>
</body>
</html>
 

231 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.

#antigravity #css #gemini #graphics #html #javascript #quick #testing

b5-agy

← all sessions