npm - agentgui - Versions diffs - 1.0.690 → 1.0.692 - Mend

agentgui 1.0.690 → 1.0.692

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 (1019) hide show

package/static/tools-ui-test.html DELETED Viewed

@@ -1,551 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tools UI Redesign Test - Compact Grid Layout</title>
-  <style>
-    * { box-sizing: border-box; }
-    :root {
-      --color-primary: #3b82f6;
-      --color-primary-dark: #1e40af;
-      --color-bg-primary: #ffffff;
-      --color-bg-secondary: #f9fafb;
-      --color-bg-tertiary: #f3f4f6;
-      --color-text-primary: #111827;
-      --color-text-secondary: #6b7280;
-      --color-border: #e5e7eb;
-      --color-success: #10b981;
-    }
-    html.dark {
-      --color-bg-primary: #111827;
-      --color-bg-secondary: #1f2937;
-      --color-bg-tertiary: #374151;
-      --color-text-primary: #f9fafb;
-      --color-text-secondary: #d1d5db;
-      --color-border: #374151;
-    }
-    body {
-      margin: 0;
-      padding: 20px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-    }
-    .test-container {
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-    h1 {
-      font-size: 2rem;
-      margin-bottom: 10px;
-    }
-    .description {
-      color: var(--color-text-secondary);
-      margin-bottom: 30px;
-      font-size: 0.95rem;
-      line-height: 1.5;
-    }
-    .demo-section {
-      margin-bottom: 40px;
-    }
-    .section-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 15px;
-      border-bottom: 2px solid var(--color-primary);
-      padding-bottom: 8px;
-    }
-    /* Tools popup styles */
-    .tools-popup-content {
-      background: var(--color-bg-secondary);
-      border-radius: 1rem;
-      width: 100%;
-      max-width: 600px;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
-      color: var(--color-text-primary);
-      font-family: system-ui, -apple-system, sans-serif;
-      overflow: hidden;
-    }
-    .tools-popup-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0.875rem 1.25rem;
-      flex-shrink: 0;
-      border-bottom: 1px solid var(--color-border);
-      gap: 0.75rem;
-    }
-    .tools-popup-header h2 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 700;
-      flex: 1;
-    }
-    .tools-popup-header-controls {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      flex-shrink: 0;
-    }
-    .tools-voice-toggle {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      cursor: pointer;
-      user-select: none;
-    }
-    .tools-voice-toggle input {
-      width: 0.875rem;
-      height: 0.875rem;
-      cursor: pointer;
-    }
-    .tools-voice-selector {
-      padding: 0.35rem 0.5rem;
-      font-size: 0.75rem;
-      border-radius: 0.3rem;
-      border: 1px solid var(--color-border);
-      background: var(--color-bg-primary);
-      color: var(--color-text-primary);
-      cursor: pointer;
-    }
-    .tools-popup-scroll {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-    }
-    @media (max-width: 768px) {
-      .tools-popup-scroll {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      }
-    }
-    @media (max-width: 480px) {
-      .tools-popup-scroll {
-        grid-template-columns: 1fr;
-      }
-      .tools-popup-header {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      .tools-popup-header-controls {
-        width: 100%;
-        flex-wrap: wrap;
-      }
-    }
-    .tool-item {
-      padding: 0.75rem;
-      border: 1px solid var(--color-border);
-      border-radius: 0.5rem;
-      background: var(--color-bg-primary);
-      display: flex;
-      flex-direction: column;
-      gap: 0.375rem;
-      transition: border-color 0.2s, background-color 0.2s;
-      min-height: 120px;
-      justify-content: space-between;
-    }
-    .tool-item:hover {
-      border-color: var(--color-primary);
-      background: var(--color-bg-secondary);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-    .tool-header {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-    .tool-name {
-      font-weight: 600;
-      font-size: 0.9rem;
-      flex: 1;
-      word-break: break-word;
-    }
-    .tool-status-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      font-size: 0.7rem;
-      padding: 0.2rem 0.4rem;
-      border-radius: 0.25rem;
-      background: var(--color-bg-tertiary);
-      color: var(--color-text-secondary);
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    .tool-status-indicator.installed {
-      background: rgba(16, 185, 129, 0.15);
-      color: #10b981;
-    }
-    .tool-status-indicator.needs_update {
-      background: rgba(245, 158, 11, 0.15);
-      color: #f59e0b;
-    }
-    .tool-status-indicator.not_installed {
-      background: rgba(107, 114, 128, 0.15);
-      color: #9ca3af;
-    }
-    .tool-status-dot {
-      width: 0.375rem;
-      height: 0.375rem;
-      border-radius: 50%;
-      background: currentColor;
-      display: inline-block;
-    }
-    .tool-versions {
-      display: flex;
-      flex-direction: column;
-      gap: 0.15rem;
-      font-size: 0.65rem;
-      color: var(--color-text-secondary);
-      line-height: 1.3;
-    }
-    .tool-version-item {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .tool-actions {
-      display: flex;
-      gap: 0.4rem;
-      flex-wrap: wrap;
-      margin-top: 0.25rem;
-    }
-    .tool-btn {
-      padding: 0.35rem 0.65rem;
-      border: none;
-      border-radius: 0.3rem;
-      cursor: pointer;
-      font-size: 0.7rem;
-      font-weight: 600;
-      transition: all 0.2s;
-      flex: 1;
-      min-width: 60px;
-      white-space: nowrap;
-    }
-    .tool-btn-primary {
-      background: var(--color-primary);
-      color: white;
-    }
-    .tool-btn-primary:hover {
-      background: var(--color-primary-dark);
-    }
-    .tool-progress-bar {
-      width: 100%;
-      height: 0.25rem;
-      background: var(--color-bg-tertiary);
-      border-radius: 0.125rem;
-      overflow: hidden;
-      margin-top: 0.25rem;
-    }
-    .tool-progress-fill {
-      height: 100%;
-      background: linear-gradient(90deg, #3b82f6, #2563eb);
-      width: 60%;
-      border-radius: 0.125rem;
-    }
-    .feature-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 15px;
-      margin: 20px 0;
-    }
-    .feature-item {
-      padding: 12px;
-      background: var(--color-bg-primary);
-      border-radius: 0.5rem;
-      border-left: 3px solid var(--color-primary);
-    }
-    .feature-item strong {
-      color: var(--color-primary);
-    }
-    .size-demo {
-      display: flex;
-      gap: 10px;
-      margin: 20px 0;
-      flex-wrap: wrap;
-    }
-    .size-demo-item {
-      text-align: center;
-      padding: 10px;
-      background: var(--color-bg-primary);
-      border-radius: 0.5rem;
-      border: 1px solid var(--color-border);
-    }
-    .size-label {
-      font-size: 0.8rem;
-      color: var(--color-text-secondary);
-      margin-bottom: 5px;
-    }
-    .toggle-dark {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      padding: 0.5rem 1rem;
-      background: var(--color-primary);
-      color: white;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      font-weight: 600;
-    }
-  </style>
-</head>
-<body>
-  <button class="toggle-dark" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark</button>
-  <div class="test-container">
-    <h1>Tools UI Redesign - Compact Grid Layout</h1>
-    <div class="description">
-      This test page demonstrates the new compact single-card tools UI with integrated voice controls.
-      The tools are arranged in a responsive 2x2 grid that adapts to smaller screens.
-    </div>
-    <div class="demo-section">
-      <div class="section-title">New Features</div>
-      <div class="feature-list">
-        <div class="feature-item">
-          <strong>Compact Grid</strong><br>
-          All 4 tools fit in a 2x2 grid that's responsive
-        </div>
-        <div class="feature-item">
-          <strong>Integrated Voice</strong><br>
-          Auto-speak toggle and voice selector in header
-        </div>
-        <div class="feature-item">
-          <strong>Efficient Sizing</strong><br>
-          Tool cards ~120px height, optimized buttons
-        </div>
-        <div class="feature-item">
-          <strong>Responsive Design</strong><br>
-          Adapts from 2 columns to 1 on mobile
-        </div>
-      </div>
-    </div>
-    <div class="demo-section">
-      <div class="section-title">Live Preview</div>
-      <div style="display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap;">
-        <div>
-          <div class="size-label">Desktop (600px)</div>
-          <div class="tools-popup-content">
-            <div class="tools-popup-header">
-              <div style="display: flex; align-items: center; gap: 0.75rem; flex: 1;">
-                <h2 style="margin: 0; font-size: 1rem;">Tools & Extensions</h2>
-              </div>
-              <div class="tools-popup-header-controls">
-                <label class="tools-voice-toggle">
-                  <input type="checkbox" checked>
-                  <span>Auto-speak</span>
-                </label>
-                <select class="tools-voice-selector">
-                  <option>Voice</option>
-                  <option>en-US</option>
-                </select>
-                <button style="background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;">×</button>
-              </div>
-            </div>
-            <div class="tools-popup-scroll">
-              <div class="tool-item">
-                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
-                  <div class="tool-header">
-                    <span class="tool-name">gm-cc</span>
-                  </div>
-                  <div class="tool-status-indicator installed">
-                    <span class="tool-status-dot"></span>
-                    <span>Up-to-date</span>
-                  </div>
-                  <div class="tool-versions">
-                    <span class="tool-version-item">v1.2.5</span>
-                  </div>
-                </div>
-                <div class="tool-actions">
-                  <button class="tool-btn tool-btn-primary">✓</button>
-                </div>
-              </div>
-              <div class="tool-item">
-                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
-                  <div class="tool-header">
-                    <span class="tool-name">gm-oc</span>
-                  </div>
-                  <div class="tool-status-indicator needs_update">
-                    <span class="tool-status-dot"></span>
-                    <span>Update avail</span>
-                  </div>
-                  <div class="tool-versions">
-                    <span class="tool-version-item">v1.0.2</span>
-                    <span class="tool-version-item">(v1.0.3 available)</span>
-                  </div>
-                </div>
-                <div class="tool-actions">
-                  <button class="tool-btn tool-btn-primary">Update</button>
-                </div>
-              </div>
-              <div class="tool-item">
-                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
-                  <div class="tool-header">
-                    <span class="tool-name">gm-gc</span>
-                  </div>
-                  <div class="tool-status-indicator installed">
-                    <span class="tool-status-dot"></span>
-                    <span>Up-to-date</span>
-                  </div>
-                  <div class="tool-versions">
-                    <span class="tool-version-item">v2.1.0</span>
-                  </div>
-                </div>
-                <div class="tool-actions">
-                  <button class="tool-btn tool-btn-primary">✓</button>
-                </div>
-              </div>
-              <div class="tool-item">
-                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
-                  <div class="tool-header">
-                    <span class="tool-name">gm-kilo</span>
-                  </div>
-                  <div class="tool-status-indicator not_installed">
-                    <span class="tool-status-dot"></span>
-                    <span>Not instal</span>
-                  </div>
-                  <div class="tool-versions">
-                  </div>
-                </div>
-                <div class="tool-actions">
-                  <button class="tool-btn tool-btn-primary">Install</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div class="size-label">Installing State</div>
-          <div class="tools-popup-content" style="max-width: 300px;">
-            <div class="tools-popup-header">
-              <h2 style="margin: 0; font-size: 1rem;">Tools & Extensions</h2>
-              <button style="background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;">×</button>
-            </div>
-            <div class="tools-popup-scroll">
-              <div class="tool-item">
-                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
-                  <div class="tool-header">
-                    <span class="tool-name">gm-kilo</span>
-                  </div>
-                  <div class="tool-status-indicator" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
-                    <span class="tool-status-dot"></span>
-                    <span>Installing</span>
-                  </div>
-                </div>
-                <div class="tool-actions">
-                  <button class="tool-btn tool-btn-primary" disabled>Installing</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="demo-section">
-      <div class="section-title">Size Comparison</div>
-      <div class="size-demo">
-        <div class="size-demo-item">
-          <div class="size-label">Tool Card Height</div>
-          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">120px min</div>
-        </div>
-        <div class="size-demo-item">
-          <div class="size-label">Tool Item Padding</div>
-          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">0.75rem</div>
-        </div>
-        <div class="size-demo-item">
-          <div class="size-label">Button Height</div>
-          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">28px</div>
-        </div>
-        <div class="size-demo-item">
-          <div class="size-label">Grid Gap</div>
-          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">1rem</div>
-        </div>
-      </div>
-    </div>
-    <div class="demo-section">
-      <div class="section-title">Responsive Behavior</div>
-      <div class="feature-list">
-        <div class="feature-item">
-          <strong>Desktop (&gt;768px)</strong><br>
-          2x2 grid with 200px min-width per column
-        </div>
-        <div class="feature-item">
-          <strong>Tablet (481-768px)</strong><br>
-          Auto-fit with 150px min-width columns
-        </div>
-        <div class="feature-item">
-          <strong>Mobile (&lt;480px)</strong><br>
-          Single column layout, full width
-        </div>
-        <div class="feature-item">
-          <strong>Header on Mobile</strong><br>
-          Flex-direction column for better spacing
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>

package/test-http-tools.js DELETED Viewed

@@ -1,101 +0,0 @@
-import http from 'http';
-const BASE_URL = 'http://localhost:3000/gm';
-async function httpGet(path) {
-  return new Promise((resolve, reject) => {
-    const url = new URL(path, BASE_URL);
-    http.get(url, (res) => {
-      let data = '';
-      res.on('data', chunk => data += chunk);
-      res.on('end', () => {
-        try {
-          resolve({ status: res.statusCode, data: JSON.parse(data) });
-        } catch {
-          resolve({ status: res.statusCode, data });
-        }
-      });
-    }).on('error', reject);
-  });
-}
-async function httpPost(path, body) {
-  return new Promise((resolve, reject) => {
-    const url = new URL(path, BASE_URL);
-    const bodyStr = JSON.stringify(body);
-    const options = {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Content-Length': bodyStr.length }
-    };
-    const req = http.request(url, options, (res) => {
-      let data = '';
-      res.on('data', chunk => data += chunk);
-      res.on('end', () => {
-        try {
-          resolve({ status: res.statusCode, data: JSON.parse(data) });
-        } catch {
-          resolve({ status: res.statusCode, data });
-        }
-      });
-    }).on('error', reject);
-    req.write(bodyStr);
-    req.end();
-  });
-}
-async function runTests() {
-  console.log('=== HTTP API TESTS ===\n');
-  try {
-    console.log('TEST 1: GET /api/tools');
-    const tools = await httpGet('/api/tools');
-    console.log('Status:', tools.status);
-    console.log('Tools:', tools.data?.tools?.length || 0);
-    if (tools.data?.tools) {
-      tools.data.tools.forEach(t => {
-        console.log(`  ${t.id}: status=${t.status}, installed=${t.installed}, hasUpdate=${t.hasUpdate}`);
-        console.log(`    versions: installed=${t.installedVersion}, published=${t.publishedVersion}`);
-      });
-    }
-    console.log('');
-    if (tools.data?.tools?.length > 0) {
-      const firstTool = tools.data.tools[0];
-      console.log(`TEST 2: GET /api/tools/${firstTool.id}/status`);
-      const status = await httpGet(`/api/tools/${firstTool.id}/status`);
-      console.log('Status code:', status.status);
-      console.log('Status data:', JSON.stringify(status.data, null, 2));
-      console.log('');
-      if (firstTool.installed && firstTool.hasUpdate) {
-        console.log(`TEST 3: POST /api/tools/${firstTool.id}/update (DRY RUN - not actually posting)`);
-        console.log(`Would update: ${firstTool.id}`);
-        console.log(`Current version: ${firstTool.installedVersion}`);
-        console.log(`Available version: ${firstTool.publishedVersion}`);
-        console.log('');
-        console.log('FLOW WOULD BE:');
-        console.log('  1. Frontend sends POST /api/tools/{id}/update');
-        console.log('  2. Backend sets status to "updating" in DB');
-        console.log('  3. Backend sends immediate 200 response');
-        console.log('  4. Backend spawns bun x process async');
-        console.log('  5. Backend broadcasts WebSocket "tool_update_progress" events');
-        console.log('  6. When bun x completes:');
-        console.log('     - Clears caches');
-        console.log('     - Calls checkToolStatusAsync() for fresh status');
-        console.log('     - Broadcasts "tool_update_complete" with new status');
-        console.log('     - Updates DB with new version');
-        console.log('  7. Frontend receives event and updates UI');
-      }
-    }
-    console.log('\n=== TESTS COMPLETED ===');
-    process.exit(0);
-  } catch (err) {
-    console.error('ERROR:', err.message);
-    process.exit(1);
-  }
-}
-runTests();