npm - cyclecad - Versions diffs - 3.2.1 → 3.5.0 - Mend

cyclecad 3.2.1 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/CLAUDE.md +155 -1
package/DOCKER-SETUP-VERIFICATION.md +399 -0
package/DOCKER-TESTING.md +463 -0
package/FUSION360_MODULES.md +478 -0
package/FUSION_MODULES_README.md +352 -0
package/INTEGRATION_SNIPPETS.md +608 -0
package/KILLER-FEATURES-DELIVERY.md +469 -0
package/MODULES_SUMMARY.txt +337 -0
package/QUICK_REFERENCE.txt +298 -0
package/README-DOCKER-TESTING.txt +438 -0
package/app/index.html +23 -10
package/app/js/fusion-help.json +1808 -0
package/app/js/help-module-v3.js +1096 -0
package/app/js/killer-features-help.json +395 -0
package/app/js/killer-features.js +1508 -0
package/app/js/modules/fusion-assembly.js +842 -0
package/app/js/modules/fusion-cam.js +785 -0
package/app/js/modules/fusion-data.js +814 -0
package/app/js/modules/fusion-drawing.js +844 -0
package/app/js/modules/fusion-inspection.js +756 -0
package/app/js/modules/fusion-render.js +774 -0
package/app/js/modules/fusion-simulation.js +986 -0
package/app/js/modules/fusion-sketch.js +1044 -0
package/app/js/modules/fusion-solid.js +1095 -0
package/app/js/modules/fusion-surface.js +949 -0
package/app/tests/FUSION_TEST_SUITE.md +266 -0
package/app/tests/README.md +77 -0
package/app/tests/TESTING-CHECKLIST.md +177 -0
package/app/tests/TEST_SUITE_SUMMARY.txt +236 -0
package/app/tests/brep-live-test.html +848 -0
package/app/tests/docker-integration-test.html +811 -0
package/app/tests/fusion-all-tests.html +670 -0
package/app/tests/fusion-assembly-tests.html +461 -0
package/app/tests/fusion-cam-tests.html +421 -0
package/app/tests/fusion-simulation-tests.html +421 -0
package/app/tests/fusion-sketch-tests.html +613 -0
package/app/tests/fusion-solid-tests.html +529 -0
package/app/tests/index.html +453 -0
package/app/tests/killer-features-test.html +509 -0
package/app/tests/run-tests.html +874 -0
package/app/tests/step-import-live-test.html +1115 -0
package/app/tests/test-agent-v3.html +93 -696
package/architecture-dashboard.html +1970 -0
package/docs/API-REFERENCE.md +1423 -0
package/docs/BREP-LIVE-TEST-GUIDE.md +453 -0
package/docs/DEVELOPER-GUIDE-v3.md +795 -0
package/docs/DOCKER-QUICK-TEST.md +376 -0
package/docs/FUSION-FEATURES-GUIDE.md +2513 -0
package/docs/FUSION-TUTORIAL.md +1203 -0
package/docs/INFRASTRUCTURE-GUIDE-INDEX.md +327 -0
package/docs/KEYBOARD-SHORTCUTS.md +402 -0
package/docs/KILLER-FEATURES-INTEGRATION.md +412 -0
package/docs/KILLER-FEATURES-SUMMARY.md +424 -0
package/docs/KILLER-FEATURES-TUTORIAL.md +784 -0
package/docs/KILLER-FEATURES.md +562 -0
package/docs/QUICK-REFERENCE.md +282 -0
package/docs/README-v3-DOCS.md +274 -0
package/docs/TUTORIAL-v3.md +1190 -0
package/docs/architecture-dashboard.html +1970 -0
package/docs/architecture-v3.html +1038 -0
package/linkedin-post-v3.md +58 -0
package/package.json +1 -1
package/scripts/dev-setup.sh +338 -0
package/scripts/docker-health-check.sh +159 -0
package/scripts/integration-test.sh +311 -0
package/scripts/test-docker.sh +515 -0

package/app/tests/run-tests.html ADDED Viewed

@@ -0,0 +1,874 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>cycleCAD Test Runner</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #1e1e1e;
+      color: #e0e0e0;
+      line-height: 1.6;
+    }
+    .header {
+      background: #2d2d30;
+      border-bottom: 1px solid #3e3e42;
+      padding: 20px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+    .header h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+    .header-subtitle {
+      font-size: 13px;
+      color: #999;
+    }
+    .container {
+      display: grid;
+      grid-template-columns: 250px 1fr 350px;
+      gap: 0;
+      height: calc(100vh - 140px);
+      overflow: hidden;
+    }
+    .sidebar {
+      background: #252526;
+      border-right: 1px solid #3e3e42;
+      overflow-y: auto;
+      padding: 12px;
+    }
+    .test-group {
+      margin-bottom: 20px;
+    }
+    .test-group-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #999;
+      margin-bottom: 8px;
+      font-weight: 600;
+      padding: 8px 12px;
+    }
+    .test-item {
+      padding: 10px 12px;
+      margin-bottom: 4px;
+      background: #2d2d30;
+      border: 1px solid #3e3e42;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 12px;
+      border-left: 3px solid transparent;
+    }
+    .test-item:hover {
+      background: #323236;
+      border-color: #007acc;
+      border-left-color: #007acc;
+    }
+    .test-item.active {
+      background: #1e3a5f;
+      border-color: #007acc;
+      border-left-color: #0e639c;
+      color: #fff;
+      font-weight: 600;
+    }
+    .test-item.success {
+      border-left-color: #89d185;
+    }
+    .test-item.error {
+      border-left-color: #d13438;
+    }
+    .test-item.pending {
+      border-left-color: #dcdcaa;
+    }
+    .test-item-icon {
+      margin-right: 6px;
+      font-size: 10px;
+    }
+    .main-area {
+      display: flex;
+      flex-direction: column;
+      background: #1e1e1e;
+      overflow: hidden;
+    }
+    .toolbar {
+      background: #252526;
+      border-bottom: 1px solid #3e3e42;
+      padding: 12px 16px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+      flex-shrink: 0;
+    }
+    button {
+      padding: 8px 12px;
+      background: #0e639c;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: background 0.2s;
+    }
+    button:hover:not(:disabled) {
+      background: #1177bb;
+    }
+    button:disabled {
+      background: #3e3e42;
+      color: #999;
+      cursor: not-allowed;
+    }
+    .btn-danger {
+      background: #d13438;
+    }
+    .btn-danger:hover:not(:disabled) {
+      background: #e81123;
+    }
+    .btn-success {
+      background: #107c10;
+    }
+    .btn-success:hover:not(:disabled) {
+      background: #13a538;
+    }
+    .content {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .iframe-container {
+      flex: 1;
+      overflow: hidden;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: white;
+    }
+    .status-panel {
+      background: #252526;
+      border-left: 1px solid #3e3e42;
+      padding: 16px;
+      width: 350px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .status-card {
+      background: #2d2d30;
+      padding: 12px;
+      border-radius: 4px;
+      border-left: 3px solid #007acc;
+    }
+    .status-card h3 {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #999;
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+    .status-value {
+      font-size: 20px;
+      font-weight: bold;
+      color: #e0e0e0;
+      font-family: 'Courier New', monospace;
+      margin-bottom: 4px;
+    }
+    .status-subtext {
+      font-size: 11px;
+      color: #999;
+    }
+    .status-card.success {
+      border-left-color: #89d185;
+    }
+    .status-card.error {
+      border-left-color: #d13438;
+    }
+    .status-card.warning {
+      border-left-color: #dcdcaa;
+    }
+    .status-card.info {
+      border-left-color: #4fc1ff;
+    }
+    .progress-bar {
+      width: 100%;
+      height: 6px;
+      background: #3e3e42;
+      border-radius: 3px;
+      overflow: hidden;
+      margin-top: 8px;
+    }
+    .progress-fill {
+      height: 100%;
+      background: #007acc;
+      width: 0%;
+      transition: width 0.3s;
+    }
+    .summary-table {
+      width: 100%;
+      font-size: 11px;
+      margin-top: 8px;
+    }
+    .summary-table tr {
+      border-bottom: 1px solid #3e3e42;
+    }
+    .summary-table td {
+      padding: 4px;
+      text-align: right;
+    }
+    .summary-table td:first-child {
+      text-align: left;
+      color: #999;
+    }
+    .badge {
+      display: inline-block;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .badge-success {
+      background: #89d185;
+      color: #000;
+    }
+    .badge-error {
+      background: #d13438;
+      color: white;
+    }
+    .badge-pending {
+      background: #3e3e42;
+      color: #999;
+    }
+    .dashboard {
+      padding: 16px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      overflow-y: auto;
+    }
+    .dashboard-card {
+      background: #2d2d30;
+      padding: 16px;
+      border-radius: 6px;
+      border: 1px solid #3e3e42;
+    }
+    .dashboard-card h3 {
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: #e0e0e0;
+    }
+    .dashboard-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 12px;
+      border-bottom: 1px solid #3e3e42;
+    }
+    .dashboard-item:last-child {
+      border-bottom: none;
+    }
+    .dashboard-label {
+      color: #999;
+    }
+    .dashboard-value {
+      color: #e0e0e0;
+      font-weight: 600;
+    }
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #1e1e1e;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #3e3e42;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #4e4e54;
+    }
+    .hidden {
+      display: none !important;
+    }
+    .no-test-selected {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+      color: #999;
+    }
+    .no-test-selected-icon {
+      font-size: 48px;
+      opacity: 0.5;
+    }
+    .footer {
+      background: #2d2d30;
+      border-top: 1px solid #3e3e42;
+      padding: 12px 16px;
+      font-size: 11px;
+      color: #999;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>🧪 cycleCAD Test Runner</h1>
+    <div class="header-subtitle">Run individual test suites or all tests at once</div>
+  </div>
+  <div class="container">
+    <div class="sidebar" id="sidebar"></div>
+    <div class="main-area">
+      <div class="toolbar">
+        <button id="runAllBtn" onclick="runAllTests()">▶ Run All Tests</button>
+        <button id="runSelectedBtn" onclick="runSelected()" disabled>▶ Run Selected</button>
+        <button id="stopBtn" onclick="stopTests()" disabled class="btn-danger">⏹ Stop</button>
+        <button id="exportBtn" onclick="exportResults()" disabled class="btn-success">↓ Export Report</button>
+        <span id="runStatus" style="margin-left: auto; font-size: 12px; color: #999;">Ready</span>
+      </div>
+      <div class="content">
+        <div class="iframe-container" id="iframeContainer">
+          <div class="no-test-selected">
+            <div class="no-test-selected-icon">📋</div>
+            <div>Select a test suite from the left panel to begin</div>
+            <div style="font-size: 11px;">Or click "Run All Tests" to execute all suites automatically</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="status-panel">
+      <div class="status-card info">
+        <h3>Overall Progress</h3>
+        <div class="progress-bar">
+          <div class="progress-fill" id="overallProgressFill"></div>
+        </div>
+        <table class="summary-table">
+          <tr>
+            <td>Running:</td>
+            <td id="countRunning">0</td>
+          </tr>
+          <tr>
+            <td>Passed:</td>
+            <td><span class="badge badge-success" id="countPassed">0</span></td>
+          </tr>
+          <tr>
+            <td>Failed:</td>
+            <td><span class="badge badge-error" id="countFailed">0</span></td>
+          </tr>
+          <tr>
+            <td>Pending:</td>
+            <td><span class="badge badge-pending" id="countPending">8</span></td>
+          </tr>
+        </table>
+      </div>
+      <div class="status-card info">
+        <h3>Current Test</h3>
+        <div id="currentTest" style="font-size: 12px; color: #999;">None</div>
+      </div>
+      <div class="status-card info">
+        <h3>Execution Time</h3>
+        <div class="status-value" id="executionTime">0s</div>
+        <div class="status-subtext" id="executionDetails">Waiting...</div>
+      </div>
+      <div class="status-card info">
+        <h3>Quick Actions</h3>
+        <div style="display: flex; gap: 4px; flex-direction: column;">
+          <button onclick="downloadResults()" style="width: 100%; padding: 6px;">Download JSON</button>
+          <button onclick="downloadHTML()" style="width: 100%; padding: 6px;">Download HTML</button>
+          <button onclick="clearResults()" style="width: 100%; padding: 6px;">Clear Results</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    cycleCAD Test Runner v1.0 — Testing infrastructure for all modules and features
+  </div>
+  <script>
+    // ========== TEST SUITE DEFINITIONS ==========
+    const testSuites = [
+      {
+        id: 'step-import',
+        name: 'STEP Import Live Test',
+        file: 'step-import-live-test.html',
+        category: 'Import/Export',
+        description: 'Test STEP file parsing with 3 strategies',
+        icon: '📥'
+      },
+      {
+        id: 'brep',
+        name: 'B-Rep Operations',
+        file: 'brep-tests.html',
+        category: 'Geometry Engine',
+        description: 'Boolean operations and solid geometry',
+        icon: '🔷'
+      },
+      {
+        id: 'brep-live',
+        name: 'B-Rep Live Tests',
+        file: 'brep-live-test.html',
+        category: 'Geometry Engine',
+        description: 'Interactive B-Rep testing',
+        icon: '🔷'
+      },
+      {
+        id: 'collab',
+        name: 'Collaboration Tests',
+        file: 'collab-tests.html',
+        category: 'Features',
+        description: 'Multi-user editing and sync',
+        icon: '🤝'
+      },
+      {
+        id: 'billing',
+        name: 'Billing & Token Tests',
+        file: 'billing-tests.html',
+        category: 'Features',
+        description: '$CYCLE token engine and billing',
+        icon: '💰'
+      },
+      {
+        id: 'pwa',
+        name: 'PWA Tests',
+        file: 'pwa-tests.html',
+        category: 'Infrastructure',
+        description: 'Progressive Web App functionality',
+        icon: '📱'
+      },
+      {
+        id: 'mobile',
+        name: 'Mobile Tests',
+        file: 'mobile-tests.html',
+        category: 'Mobile',
+        description: 'Mobile viewer and touch controls',
+        icon: '📲'
+      },
+      {
+        id: 'ui-agent',
+        name: 'UI Test Agent v3',
+        file: 'test-agent-v3.html',
+        category: 'UI Automation',
+        description: 'Automated UI testing with live visualization',
+        icon: '🤖'
+      }
+    ];
+    // ========== STATE ==========
+    let currentTest = null;
+    let isRunning = false;
+    let runStartTime = 0;
+    let results = {};
+    let completedTests = [];
+    // ========== INITIALIZATION ==========
+    function initUI() {
+      const sidebar = document.getElementById('sidebar');
+      const categories = {};
+      // Group tests by category
+      testSuites.forEach(test => {
+        if (!categories[test.category]) {
+          categories[test.category] = [];
+        }
+        categories[test.category].push(test);
+      });
+      // Render categories and tests
+      Object.entries(categories).forEach(([cat, tests]) => {
+        const group = document.createElement('div');
+        group.className = 'test-group';
+        const title = document.createElement('div');
+        title.className = 'test-group-title';
+        title.textContent = cat;
+        group.appendChild(title);
+        tests.forEach(test => {
+          const item = document.createElement('div');
+          item.className = 'test-item pending';
+          item.id = 'test-' + test.id;
+          item.innerHTML = `<span class="test-item-icon">${test.icon}</span>${test.name}`;
+          item.title = test.description;
+          item.addEventListener('click', () => selectTest(test));
+          group.appendChild(item);
+        });
+        sidebar.appendChild(group);
+      });
+    }
+    // ========== TEST SELECTION ==========
+    function selectTest(test) {
+      // Deselect previous
+      if (currentTest) {
+        document.getElementById('test-' + currentTest.id).classList.remove('active');
+      }
+      currentTest = test;
+      document.getElementById('test-' + test.id).classList.add('active');
+      loadTest(test);
+      document.getElementById('runSelectedBtn').disabled = false;
+      document.getElementById('currentTest').textContent = test.name;
+    }
+    function loadTest(test) {
+      const container = document.getElementById('iframeContainer');
+      container.innerHTML = `<iframe src="${test.file}"></iframe>`;
+    }
+    // ========== TEST EXECUTION ==========
+    async function runAllTests() {
+      isRunning = true;
+      runStartTime = Date.now();
+      completedTests = [];
+      results = {};
+      document.getElementById('runAllBtn').disabled = true;
+      document.getElementById('stopBtn').disabled = false;
+      document.getElementById('runSelectedBtn').disabled = true;
+      document.getElementById('runStatus').textContent = 'Running all tests...';
+      for (const test of testSuites) {
+        if (!isRunning) break;
+        await runTest(test);
+        await new Promise(resolve => setTimeout(resolve, 500));
+      }
+      finishRun();
+    }
+    async function runSelected() {
+      if (!currentTest) return;
+      isRunning = true;
+      runStartTime = Date.now();
+      completedTests = [];
+      results = {};
+      document.getElementById('runAllBtn').disabled = true;
+      document.getElementById('stopBtn').disabled = false;
+      document.getElementById('runSelectedBtn').disabled = true;
+      document.getElementById('runStatus').textContent = `Running: ${currentTest.name}`;
+      await runTest(currentTest);
+      finishRun();
+    }
+    async function runTest(test) {
+      selectTest(test);
+      document.getElementById('countRunning').textContent = completedTests.length + 1;
+      // Wait for iframe to load
+      await new Promise(resolve => {
+        const iframe = document.querySelector('iframe');
+        if (iframe.contentWindow.runTests) {
+          iframe.contentWindow.runTests().then(result => {
+            results[test.id] = result;
+            completedTests.push(test.id);
+            // Update test item status
+            const item = document.getElementById('test-' + test.id);
+            if (result.success) {
+              item.classList.remove('pending', 'error');
+              item.classList.add('success');
+            } else {
+              item.classList.remove('pending', 'success');
+              item.classList.add('error');
+            }
+            resolve();
+          }).catch(err => {
+            results[test.id] = { success: false, error: err.message };
+            completedTests.push(test.id);
+            const item = document.getElementById('test-' + test.id);
+            item.classList.remove('pending', 'success');
+            item.classList.add('error');
+            resolve();
+          });
+        } else {
+          setTimeout(() => {
+            results[test.id] = { success: false, error: 'Test runner not available' };
+            completedTests.push(test.id);
+            resolve();
+          }, 2000);
+        }
+      });
+      updateProgress();
+    }
+    function stopTests() {
+      isRunning = false;
+      document.getElementById('stopBtn').disabled = true;
+      document.getElementById('runStatus').textContent = 'Stopped';
+      finishRun();
+    }
+    function finishRun() {
+      isRunning = false;
+      const elapsed = Math.round((Date.now() - runStartTime) / 1000);
+      document.getElementById('runAllBtn').disabled = false;
+      document.getElementById('stopBtn').disabled = true;
+      document.getElementById('runSelectedBtn').disabled = currentTest ? false : true;
+      document.getElementById('exportBtn').disabled = false;
+      document.getElementById('executionTime').textContent = elapsed + 's';
+      document.getElementById('executionDetails').textContent = `${completedTests.length} of ${testSuites.length} completed`;
+      document.getElementById('runStatus').textContent = 'Complete';
+      updateProgress();
+    }
+    function updateProgress() {
+      const total = testSuites.length;
+      const passed = Object.values(results).filter(r => r.success).length;
+      const failed = Object.values(results).filter(r => !r.success).length;
+      const pending = total - completedTests.length;
+      const percent = total > 0 ? Math.round((completedTests.length / total) * 100) : 0;
+      document.getElementById('overallProgressFill').style.width = percent + '%';
+      document.getElementById('countPassed').textContent = passed;
+      document.getElementById('countFailed').textContent = failed;
+      document.getElementById('countPending').textContent = pending;
+    }
+    // ========== EXPORT ==========
+    function exportResults() {
+      const json = JSON.stringify(results, null, 2);
+      const html = generateHTMLReport();
+      // Show both in a new window
+      const win = window.open('', '', 'width=800,height=600');
+      win.document.write(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Test Results Report</title>
+          <style>
+            body { font-family: monospace; background: #1e1e1e; color: #e0e0e0; padding: 20px; }
+            h1 { margin-bottom: 20px; }
+            .json { background: #252526; padding: 16px; border-radius: 4px; overflow-x: auto; }
+            .json code { color: #4fc1ff; }
+            .summary { background: #252526; padding: 16px; margin-top: 20px; border-radius: 4px; }
+            .passed { color: #89d185; }
+            .failed { color: #d13438; }
+          </style>
+        </head>
+        <body>
+          <h1>Test Results Report</h1>
+          <div class="summary">
+            <div>Total Tests: ${testSuites.length}</div>
+            <div class="passed">Passed: ${Object.values(results).filter(r => r.success).length}</div>
+            <div class="failed">Failed: ${Object.values(results).filter(r => !r.success).length}</div>
+            <div>Completed At: ${new Date().toISOString()}</div>
+          </div>
+          <h2 style="margin-top: 30px;">JSON Results</h2>
+          <pre class="json"><code>${json}</code></pre>
+        </body>
+        </html>
+      `);
+      win.document.close();
+    }
+    function generateHTMLReport() {
+      const passed = Object.values(results).filter(r => r.success).length;
+      const failed = Object.values(results).filter(r => !r.success).length;
+      return `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>cycleCAD Test Report</title>
+          <style>
+            body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; padding: 40px; }
+            .header { background: white; padding: 20px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+            .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
+            .summary-card { background: white; padding: 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
+            .summary-card .value { font-size: 32px; font-weight: bold; }
+            .summary-card .label { font-size: 12px; color: #666; text-transform: uppercase; margin-top: 8px; }
+            .passed { color: #107c10; }
+            .failed { color: #e81123; }
+            .results { background: white; padding: 20px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+            .result-item { padding: 12px; border-bottom: 1px solid #eee; }
+            .result-item:last-child { border-bottom: none; }
+            .result-status { display: inline-block; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: bold; margin-right: 8px; }
+            .result-pass { background: #d4edda; color: #155724; }
+            .result-fail { background: #f8d7da; color: #721c24; }
+          </style>
+        </head>
+        <body>
+          <div class="header">
+            <h1>cycleCAD Test Results Report</h1>
+            <p>Generated: ${new Date().toLocaleString()}</p>
+          </div>
+          <div class="summary">
+            <div class="summary-card">
+              <div class="value">${testSuites.length}</div>
+              <div class="label">Total Tests</div>
+            </div>
+            <div class="summary-card">
+              <div class="value passed">${passed}</div>
+              <div class="label">Passed</div>
+            </div>
+            <div class="summary-card">
+              <div class="value failed">${failed}</div>
+              <div class="label">Failed</div>
+            </div>
+          </div>
+          <div class="results">
+            <h2 style="margin-bottom: 16px;">Test Results</h2>
+            ${testSuites.map(test => {
+              const result = results[test.id];
+              const passed = result && result.success;
+              return `
+                <div class="result-item">
+                  <span class="result-status ${passed ? 'result-pass' : 'result-fail'}">
+                    ${passed ? '✓ PASS' : '✗ FAIL'}
+                  </span>
+                  <strong>${test.name}</strong>
+                  ${result && result.message ? `<br><small style="color: #666;">${result.message}</small>` : ''}
+                </div>
+              `;
+            }).join('')}
+          </div>
+        </body>
+        </html>
+      `;
+    }
+    function downloadResults() {
+      const json = JSON.stringify(results, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `test-results-${Date.now()}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    function downloadHTML() {
+      const html = generateHTMLReport();
+      const blob = new Blob([html], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `test-report-${Date.now()}.html`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    function clearResults() {
+      results = {};
+      completedTests = [];
+      testSuites.forEach(test => {
+        const item = document.getElementById('test-' + test.id);
+        item.classList.remove('success', 'error');
+        item.classList.add('pending');
+      });
+      updateProgress();
+      document.getElementById('currentTest').textContent = 'None';
+      document.getElementById('executionTime').textContent = '0s';
+      document.getElementById('executionDetails').textContent = 'Waiting...';
+    }
+    // ========== STARTUP ==========
+    window.addEventListener('load', () => {
+      initUI();
+      updateProgress();
+    });
+  </script>
+</body>
+</html>