crewswarm 0.9.1 → 0.9.3

package/apps/vibe/capture-vibe-assets.mjs

@@ -1,71 +0,0 @@
-#!/usr/bin/env node
-import { chromium } from 'playwright';
-import { mkdirSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-import { spawn } from 'child_process';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const OUT = join(__dirname, '..', 'website', 'vibe-assets');
-mkdirSync(OUT, { recursive: true });
-
-const VIBE_PORT = 3333;
-const SITE_PORT = 8000;
-
-async function startVibe() {
-    console.log('🐝 Starting Vibe server...');
-    const vibe = spawn('npm', ['start'], { cwd: __dirname });
-    return new Promise((resolve) => {
-        vibe.stdout.on('data', (data) => {
-            if (data.toString().includes('running at')) resolve(vibe);
-        });
-    });
-}
-
-async function startSite() {
-    console.log('🌐 Starting Marketing Site server...');
-    const site = spawn('python3', ['-m', 'http.server', SITE_PORT.toString()], { cwd: join(__dirname, '..', 'website') });
-    return new Promise((resolve) => {
-        setTimeout(() => resolve(site), 2000); // Give it a moment to start
-    });
-}
-
-async function capture() {
-    const browser = await chromium.launch({ headless: true });
-    const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
-
-    try {
-        // 1. Capture Vibe IDE
-        console.log('📸 Capturing Vibe IDE...');
-        await page.goto(`http://127.0.0.1:${VIBE_PORT}`, { waitUntil: 'networkidle' });
-        await page.waitForTimeout(3000); // Wait for Monaco and File Tree
-        
-        // Take a full shot
-        await page.screenshot({ path: join(OUT, 'vibe-full.png') });
-        
-        // 2. Capture the new Vibe Marketing page
-        console.log('📸 Capturing Vibe Marketing page...');
-        await page.goto(`http://127.0.0.1:${SITE_PORT}/vibe.html`, { waitUntil: 'networkidle' });
-        await page.waitForTimeout(1000);
-        await page.screenshot({ path: join(OUT, 'vibe-marketing-hero.png'), fullPage: false });
-
-        console.log('✨ Screenshots saved to website/vibe-assets/');
-    } catch (err) {
-        console.error('❌ Error during capture:', err);
-    } finally {
-        await browser.close();
-    }
-}
-
-async function main() {
-    const vibe = await startVibe();
-    const site = await startSite();
-    
-    await capture();
-    
-    console.log('🛑 Shutting down servers...');
-    vibe.kill();
-    site.kill();
-}
-
-main().catch(console.error);

package/apps/vibe/capture-vibe-video.mjs

@@ -1,260 +0,0 @@
-#!/usr/bin/env node
-import { chromium } from "playwright";
-import { mkdirSync, rmSync } from "node:fs";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-import http from "node:http";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const OUT = join(__dirname, "..", "..", "website", "vibe-assets");
-const VIDEO_NAME = "vibe-demo.webm";
-const OUTPUT_PATH = join(OUT, VIDEO_NAME);
-
-const DASHBOARD_URL = process.env.CREWSWARM_DASHBOARD_URL || "http://127.0.0.1:4319";
-const VIBE_URL = process.env.CREWSWARM_VIBE_URL || "http://127.0.0.1:3333";
-
-const VIEWPORT = { width: 1440, height: 900 };
-const SPLIT_SCENE_MS = 18_000;
-const VIBE_SCENE_MS = 38_000;
-const DASHBOARD_SCENE_MS = 34_000;
-
-mkdirSync(OUT, { recursive: true });
-
-function isUrlUp(url) {
-  return new Promise((resolve) => {
-    const req = http.get(url, (res) => {
-      res.resume();
-      resolve(Boolean(res.statusCode) && res.statusCode < 500);
-    });
-    req.on("error", () => resolve(false));
-    req.setTimeout(1500, () => {
-      req.destroy();
-      resolve(false);
-    });
-  });
-}
-
-async function waitForUrl(url, label, timeoutMs = 15_000) {
-  const start = Date.now();
-  while (Date.now() - start < timeoutMs) {
-    if (await isUrlUp(url)) return true;
-    await new Promise((resolve) => setTimeout(resolve, 500));
-  }
-  throw new Error(`${label} did not become ready at ${url}`);
-}
-
-function buildSplitSceneHtml() {
-  return `<!doctype html>
-  <html>
-    <head>
-      <meta charset="utf-8" />
-      <title>CrewSwarm Demo Scene</title>
-      <style>
-        :root {
-          color-scheme: dark;
-          --bg: #060a10;
-          --panel: #0c121b;
-          --text: #f4f7fb;
-          --muted: #9cb0c7;
-          --accent: #35d6c2;
-          --border: rgba(255, 255, 255, 0.08);
-        }
-        * { box-sizing: border-box; }
-        body {
-          margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-          background:
-            radial-gradient(circle at 20% 0%, rgba(53, 214, 194, 0.14), transparent 32%),
-            radial-gradient(circle at 80% 10%, rgba(73, 124, 255, 0.14), transparent 28%),
-            var(--bg);
-          color: var(--text);
-        }
-        .wrap {
-          display: grid;
-          grid-template-rows: auto 1fr;
-          height: 100vh;
-          padding: 18px 18px 14px;
-          gap: 14px;
-        }
-        .header {
-          display: grid;
-          grid-template-columns: 1.15fr 1fr;
-          gap: 16px;
-          align-items: stretch;
-        }
-        .hero {
-          background: rgba(10, 16, 24, 0.82);
-          border: 1px solid var(--border);
-          border-radius: 18px;
-          padding: 20px 22px;
-          backdrop-filter: blur(10px);
-        }
-        .hero h1 {
-          margin: 0 0 8px;
-          font-size: 28px;
-          line-height: 1.1;
-        }
-        .hero p {
-          margin: 0;
-          color: var(--muted);
-          font-size: 15px;
-          line-height: 1.45;
-        }
-        .command {
-          background: rgba(7, 12, 18, 0.95);
-          border: 1px solid var(--border);
-          border-radius: 18px;
-          padding: 18px 20px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          gap: 10px;
-        }
-        .command .eyebrow {
-          color: var(--accent);
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.16em;
-          text-transform: uppercase;
-        }
-        .command code {
-          display: block;
-          font-family: "SF Mono", "Fira Code", monospace;
-          font-size: 16px;
-          line-height: 1.4;
-          color: #ecfeff;
-          white-space: pre-wrap;
-        }
-        .panes {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 14px;
-          min-height: 0;
-        }
-        .pane {
-          min-height: 0;
-          background: var(--panel);
-          border: 1px solid var(--border);
-          border-radius: 18px;
-          overflow: hidden;
-          display: grid;
-          grid-template-rows: auto 1fr;
-        }
-        .pane-bar {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 10px 14px;
-          font-size: 12px;
-          color: var(--muted);
-          background: rgba(255, 255, 255, 0.02);
-          border-bottom: 1px solid var(--border);
-        }
-        .pane-bar strong {
-          color: var(--text);
-          font-size: 13px;
-        }
-        iframe {
-          width: 100%;
-          height: 100%;
-          border: 0;
-          background: #0b1016;
-        }
-      </style>
-    </head>
-    <body>
-      <div class="wrap">
-        <div class="header">
-          <section class="hero">
-            <h1>CrewSwarm in one fast pass</h1>
-            <p>
-              Launch the stack, code in Vibe, and keep the runtime visible in the dashboard.
-              This cut is recorded from the live local surfaces, not mocked marketing panels.
-            </p>
-          </section>
-          <section class="command">
-            <div class="eyebrow">Install</div>
-            <code>bash &lt;(curl -fsSL https://raw.githubusercontent.com/crewswarm/crewswarm/main/install.sh)</code>
-          </section>
-        </div>
-        <section class="panes">
-          <div class="pane">
-            <div class="pane-bar"><strong>Dashboard</strong><span>${DASHBOARD_URL}</span></div>
-            <iframe id="dash-frame" src="${DASHBOARD_URL}"></iframe>
-          </div>
-          <div class="pane">
-            <div class="pane-bar"><strong>Vibe</strong><span>${VIBE_URL}</span></div>
-            <iframe id="vibe-frame" src="${VIBE_URL}"></iframe>
-          </div>
-        </section>
-      </div>
-    </body>
-  </html>`;
-}
-
-async function record() {
-  await waitForUrl(DASHBOARD_URL, "dashboard");
-  await waitForUrl(VIBE_URL, "vibe");
-
-  rmSync(OUTPUT_PATH, { force: true });
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext({
-    recordVideo: {
-      dir: OUT,
-      size: VIEWPORT,
-    },
-    viewport: VIEWPORT,
-    colorScheme: "dark",
-  });
-
-  const page = await context.newPage();
-
-  try {
-    console.log("🎬 Scene 1/3: split dashboard + vibe");
-    await page.setContent(buildSplitSceneHtml(), { waitUntil: "domcontentloaded" });
-    await page.waitForTimeout(SPLIT_SCENE_MS);
-
-    console.log("🎬 Scene 2/3: Vibe");
-    await page.goto(VIBE_URL, { waitUntil: "networkidle", timeout: 30_000 });
-    await page.waitForTimeout(2_000);
-    await page.selectOption("#chat-mode-selector", "cli:codex").catch(() => {});
-    await page.waitForTimeout(1_000);
-    await page.click("#toggle-bottom-terminal").catch(() => {});
-    await page.waitForTimeout(3_000);
-    await page.click("#preview-diff-trigger").catch(() => {});
-    await page.waitForTimeout(5_000);
-    await page.click(".diff-preview-close").catch(() => {});
-    await page.waitForTimeout(1_000);
-    await page.fill("#chat-input", "Explain what this workspace is for in one short paragraph.").catch(() => {});
-    await page.keyboard.press("Enter").catch(() => {});
-    await page.waitForTimeout(VIBE_SCENE_MS - 12_000);
-
-    console.log("🎬 Scene 3/3: dashboard");
-    await page.goto(DASHBOARD_URL, { waitUntil: "networkidle", timeout: 30_000 });
-    await page.waitForTimeout(2_000);
-    await page.click("#navServices").catch(() => {});
-    await page.waitForTimeout(10_000);
-    await page.click("#navAgents").catch(() => {});
-    await page.waitForTimeout(10_000);
-    await page.click("#navBuild").catch(() => {});
-    await page.waitForTimeout(DASHBOARD_SCENE_MS - 22_000);
-  } finally {
-    const video = page.video();
-    if (video) {
-      await video.saveAs(OUTPUT_PATH);
-    }
-    await page.close();
-    await context.close();
-    await browser.close();
-  }
-}
-
-record()
-  .then(() => {
-    console.log(`✨ Saved 90-second demo to ${OUTPUT_PATH}`);
-  })
-  .catch((error) => {
-    console.error("❌ Demo capture failed:", error.message);
-    process.exit(1);
-  });

package/apps/vibe/check-buttons.js

@@ -1,41 +0,0 @@
-/**
- * Paste this in console RIGHT NOW (while file is open)
- */
-
-console.log('=== BUTTON STATE DEBUG ===\n');
-
-// Check editor state
-console.log('1. Editor state:');
-console.log('   window.editor:', window.editor ? 'EXISTS' : 'NULL');
-console.log('   activeTab:', window.activeTab || 'NULL');
-console.log('   monaco:', typeof window.monaco !== 'undefined' ? 'LOADED' : 'NOT LOADED');
-
-// Check each button
-console.log('\n2. Button states:');
-const buttons = document.querySelectorAll('.editor-toolbar-btn');
-buttons.forEach(btn => {
-  console.log(`   ${btn.id}:`);
-  console.log(`      - disabled: ${btn.disabled}`);
-  console.log(`      - title: "${btn.title}"`);
-  console.log(`      - visible: ${btn.offsetWidth > 0}`);
-  console.log(`      - computed opacity: ${window.getComputedStyle(btn).opacity}`);
-  console.log(`      - computed cursor: ${window.getComputedStyle(btn).cursor}`);
-});
-
-// Check if updateEditorToolbarState exists
-console.log('\n3. Functions available:');
-console.log('   updateEditorToolbarState:', typeof window.updateEditorToolbarState);
-
-// FORCE UPDATE
-console.log('\n4. Forcing button state update...');
-if (window.editor && window.activeTab) {
-  // Manually enable buttons (this is what updateEditorToolbarState should do)
-  buttons.forEach(btn => {
-    btn.disabled = false;
-    btn.title = 'Enabled manually';
-  });
-  console.log('   ✅ All buttons force-enabled');
-  console.log('   🎯 Now try hovering - should see blue glow');
-} else {
-  console.log('   ❌ Cannot enable - editor or activeTab missing');
-}

package/apps/vibe/diagnose.html

@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Vibe Diagnostic</title>
-  <style>
-    body {
-      font-family: monospace;
-      padding: 20px;
-      background: #0a0e14;
-      color: #f0f6ff;
-    }
-    .test { margin: 10px 0; padding: 10px; border-left: 3px solid #38bdf8; }
-    .pass { border-color: #34d399; }
-    .fail { border-color: #f87171; }
-    pre { background: #0d1420; padding: 10px; overflow: auto; }
-  </style>
-</head>
-<body>
-  <h1>🔍 Vibe Diagnostic</h1>
-  <div id="results"></div>
-
-  <script>
-    const results = document.getElementById('results');
-
-    function test(name, fn) {
-      const div = document.createElement('div');
-      div.className = 'test';
-      try {
-        const result = fn();
-        div.classList.add('pass');
-        div.innerHTML = `<strong>✅ ${name}</strong><pre>${JSON.stringify(result, null, 2)}</pre>`;
-      } catch (err) {
-        div.classList.add('fail');
-        div.innerHTML = `<strong>❌ ${name}</strong><pre>${err.message}</pre>`;
-      }
-      results.appendChild(div);
-    }
-
-    // Wait for Vibe to load
-    setTimeout(() => {
-      test('Vibe URL is accessible', () => {
-        return { url: window.location.href };
-      });
-
-      test('Monaco loaded', () => {
-        if (typeof window.monaco === 'undefined') {
-          throw new Error('window.monaco is undefined - Monaco did not load');
-        }
-        return { monaco: 'loaded' };
-      });
-
-      test('Editor instance', () => {
-        if (typeof window.editor === 'undefined') {
-          return { editor: 'undefined (normal - not initialized until file opened)' };
-        }
-        return { editor: window.editor ? 'initialized' : 'null' };
-      });
-
-      test('Fetch projects API', async () => {
-        const res = await fetch(`${window.location.origin}/api/studio/projects`);
-        const data = await res.json();
-        return { status: res.status, projects: data.projects?.length };
-      });
-
-      test('Fetch files API', async () => {
-        const rootDir =
-          typeof window.__studioGetCurrentProjectDir === 'function'
-            ? window.__studioGetCurrentProjectDir()
-            : 'apps/vibe';
-        const res = await fetch(
-          `${window.location.origin}/api/studio/files?dir=${encodeURIComponent(rootDir)}`
-        );
-        const data = await res.json();
-        return { status: res.status, files: data.files?.length };
-      });
-
-      test('Terminal content element', () => {
-        const el = document.getElementById('terminal-content');
-        if (!el) throw new Error('terminal-content element not found');
-        return { 
-          exists: true, 
-          children: el.children.length,
-          innerHTML: el.innerHTML.slice(0, 200)
-        };
-      });
-
-      test('Editor toolbar buttons', () => {
-        const buttons = document.querySelectorAll('.editor-toolbar-btn');
-        if (!buttons.length) throw new Error('No toolbar buttons found');
-        const states = Array.from(buttons).map(btn => ({
-          id: btn.id,
-          disabled: btn.disabled,
-          title: btn.title
-        }));
-        return { count: buttons.length, states };
-      });
-
-      test('Console errors', () => {
-        // Can't capture past errors, but can show if any are visible
-        return { note: 'Check browser DevTools console for red errors' };
-      });
-
-    }, 2000);
-  </script>
-</body>
-</html>

package/apps/vibe/fix-buttons.js

@@ -1,103 +0,0 @@
-/**
- * Studio Button Fix Script
- * 
- * Run this in the browser console (F12) when Studio is open:
- * 1. Copy this entire file
- * 2. Paste into console
- * 3. Press Enter
- * 
- * This will diagnose and fix common issues.
- */
-
-console.log('🔧 Studio Diagnostic & Fix Script Starting...\n');
-
-// Check 1: Files in Explorer
-const fileTree = document.getElementById('file-tree');
-if (!fileTree) {
-  console.error('❌ file-tree element not found!');
-} else {
-  const files = fileTree.querySelectorAll('li');
-  console.log(`✅ File tree found: ${files.length} files visible`);
-  
-  if (files.length === 0) {
-    console.warn('⚠️ No files in Explorer - trying to refresh...');
-    if (typeof window.loadFileTree === 'function') {
-      window.loadFileTree();
-    }
-  }
-}
-
-// Check 2: Editor instance
-if (typeof window.editor === 'undefined') {
-  console.log('ℹ️ Editor not yet initialized (normal until you open a file)');
-} else if (window.editor === null) {
-  console.log('ℹ️ Editor is null (will initialize when you open a file)');
-} else {
-  console.log('✅ Editor is initialized!');
-}
-
-// Check 3: Monaco loaded
-if (typeof window.monaco === 'undefined') {
-  console.error('❌ Monaco not loaded - this is the problem!');
-  console.log('   Try refreshing the page (Cmd+R)');
-} else {
-  console.log('✅ Monaco loaded successfully');
-}
-
-// Check 4: Button states
-const buttons = document.querySelectorAll('.editor-toolbar-btn');
-if (buttons.length === 0) {
-  console.error('❌ No toolbar buttons found');
-} else {
-  console.log(`✅ Found ${buttons.length} toolbar buttons`);
-  const disabledCount = Array.from(buttons).filter(b => b.disabled).length;
-  console.log(`   ${disabledCount} disabled, ${buttons.length - disabledCount} enabled`);
-  
-  if (disabledCount === buttons.length) {
-    console.log('   ℹ️ All buttons disabled (normal - no file is open yet)');
-  }
-}
-
-// Check 5: Activity Trace
-const terminal = document.getElementById('terminal-content');
-if (!terminal) {
-  console.error('❌ terminal-content element not found');
-} else {
-  const lines = terminal.children.length;
-  console.log(`✅ Activity Trace found: ${lines} entries`);
-  if (lines === 0) {
-    console.log('   ℹ️ Terminal empty (will populate when activity happens)');
-  } else {
-    console.log(`   Last entry: ${terminal.lastElementChild?.textContent?.slice(0, 60)}...`);
-  }
-}
-
-// FIX: Auto-open first file to enable buttons
-console.log('\n🔧 Attempting auto-fix: opening first file...');
-const firstFile = fileTree?.querySelector('li[data-path]');
-if (firstFile) {
-  const filePath = firstFile.dataset.path;
-  console.log(`   Opening: ${filePath}`);
-  
-  // Click the file to trigger opening
-  firstFile.click();
-  
-  setTimeout(() => {
-    const enabledCount = Array.from(buttons).filter(b => !b.disabled).length;
-    if (enabledCount > 0) {
-      console.log(`✅ FIX SUCCESSFUL: ${enabledCount} buttons now enabled!`);
-      console.log('   Try hovering over the Find or Replace buttons now.');
-    } else {
-      console.warn('⚠️ Buttons still disabled - check console for errors');
-    }
-  }, 1000);
-} else {
-  console.warn('⚠️ No files found to open');
-  console.log('   Try clicking a file in the Explorer manually');
-}
-
-console.log('\n📋 Summary:');
-console.log('   1. If buttons are still disabled → click any file in Explorer');
-console.log('   2. If Explorer is empty → check that files are loading');
-console.log('   3. If Monaco failed → refresh the page');
-console.log('   4. Hover over enabled buttons to see the blue glow');