yo-bug 0.1.0

package/src/client/ui/floating-button.ts

@@ -0,0 +1,103 @@
+import { t } from '../core/i18n.js';
+
+const SEEN_KEY = 'yo-bug-hint-seen';
+
+export class FloatingButton {
+  private el: HTMLButtonElement;
+  private recDot: HTMLDivElement;
+  private active = false;
+
+  constructor(shadowRoot: ShadowRoot, private onClick: () => void) {
+    this.el = document.createElement('button');
+    this.el.className = 'vf-fab';
+    this.el.innerHTML = '👁'; // eye
+    this.el.title = 'yo-bug';
+    this.el.addEventListener('click', () => {
+      this.dismissHint();
+      this.onClick();
+    });
+
+    // Recording indicator dot
+    this.recDot = document.createElement('div');
+    this.recDot.style.cssText = `
+      position: absolute; top: 2px; right: 2px;
+      width: 10px; height: 10px; border-radius: 50%;
+      background: #ef4444; border: 2px solid #1e293b;
+      animation: vf-pulse 1.5s infinite;
+    `;
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes vf-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+    `;
+    shadowRoot.appendChild(style);
+
+    this.el.style.position = 'relative';
+    this.el.appendChild(this.recDot);
+    shadowRoot.appendChild(this.el);
+
+    // First-time hint bubble
+    this.showHintIfNeeded(shadowRoot);
+  }
+
+  setActive(active: boolean): void {
+    this.active = active;
+    this.el.classList.toggle('active', active);
+    this.el.innerHTML = active ? '✕' : '👁';
+    this.el.appendChild(this.recDot);
+  }
+
+  isActive(): boolean {
+    return this.active;
+  }
+
+  destroy(): void {
+    this.el.remove();
+  }
+
+  private hint: HTMLDivElement | null = null;
+
+  private showHintIfNeeded(shadowRoot: ShadowRoot): void {
+    try {
+      if (localStorage.getItem(SEEN_KEY)) return;
+    } catch {}
+
+    this.hint = document.createElement('div');
+    this.hint.style.cssText = `
+      position: fixed; bottom: 82px; right: 20px;
+      background: #1e293b; color: #e2e8f0;
+      padding: 10px 16px; border-radius: 10px;
+      font-size: 13px; pointer-events: auto;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.35);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      animation: vf-slide-in 0.3s ease-out;
+      max-width: 200px; line-height: 1.5;
+    `;
+    this.hint.textContent = t('hint.firstTime');
+
+    // Arrow pointing down to the button
+    const arrow = document.createElement('div');
+    arrow.style.cssText = `
+      position: absolute; bottom: -6px; right: 22px;
+      width: 12px; height: 12px; background: #1e293b;
+      transform: rotate(45deg);
+    `;
+    this.hint.appendChild(arrow);
+
+    shadowRoot.appendChild(this.hint);
+
+    // Auto-dismiss after 5s
+    setTimeout(() => this.dismissHint(), 5000);
+  }
+
+  private dismissHint(): void {
+    if (this.hint) {
+      this.hint.remove();
+      this.hint = null;
+      try { localStorage.setItem(SEEN_KEY, '1'); } catch {}
+    }
+  }
+}

package/src/client/ui/toast.ts

@@ -0,0 +1,17 @@
+export function showToast(
+  shadowRoot: ShadowRoot,
+  message: string,
+  isError = false,
+  duration = 3000
+): void {
+  const el = document.createElement('div');
+  el.className = `vf-toast${isError ? ' error' : ''}`;
+  el.textContent = message;
+  shadowRoot.appendChild(el);
+
+  setTimeout(() => {
+    el.style.opacity = '0';
+    el.style.transition = 'opacity 0.3s';
+    setTimeout(() => el.remove(), 300);
+  }, duration);
+}

package/src/client/ui/verify-panel.ts

@@ -0,0 +1,111 @@
+import { t } from '../core/i18n.js';
+
+export class VerifyPanel {
+  private container: HTMLDivElement;
+  private pollTimer: ReturnType<typeof setInterval> | null = null;
+  private baseUrl: string;
+  private shownIds = new Set<string>();
+
+  constructor(private shadowRoot: ShadowRoot) {
+    this.baseUrl = window.location.origin;
+    this.container = document.createElement('div');
+    this.container.style.cssText = `
+      position: fixed; bottom: 84px; left: 16px; width: 300px;
+      display: flex; flex-direction: column; gap: 8px;
+      pointer-events: none; z-index: 2147483647;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    `;
+    shadowRoot.appendChild(this.container);
+  }
+
+  startPolling(): void {
+    this.pollTimer = setInterval(() => this.poll(), 3000);
+  }
+
+  stopPolling(): void {
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    }
+  }
+
+  private async poll(): Promise<void> {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/verify`);
+      const data = await res.json();
+      for (const item of data.items || []) {
+        if (!this.shownIds.has(item.feedbackId)) {
+          this.shownIds.add(item.feedbackId);
+          this.showVerifyCard(item);
+        }
+      }
+    } catch {}
+  }
+
+  private showVerifyCard(item: any): void {
+    const card = document.createElement('div');
+    card.style.cssText = `
+      background: #1e293b; border-radius: 10px; padding: 14px 16px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.35); pointer-events: auto;
+      color: #e2e8f0; font-size: 13px;
+      border-left: 3px solid #f59e0b;
+      animation: vf-slide-in 0.3s ease-out;
+    `;
+
+    const title = document.createElement('div');
+    title.style.cssText = `font-weight:600;color:#f59e0b;margin-bottom:6px;font-size:12px;`;
+    title.textContent = t('verify.title');
+    card.appendChild(title);
+
+    const desc = document.createElement('div');
+    desc.style.cssText = `margin-bottom:10px;line-height:1.4;`;
+    desc.textContent = item.description || `${item.problemType} on ${item.element || 'page'}`;
+    card.appendChild(desc);
+
+    const btnRow = document.createElement('div');
+    btnRow.style.cssText = `display:flex;gap:8px;`;
+
+    const passBtn = document.createElement('button');
+    passBtn.style.cssText = `
+      flex:1; padding:6px; border:none; border-radius:6px;
+      background:#22c55e; color:white; font-size:12px; cursor:pointer; font-weight:500;
+    `;
+    passBtn.textContent = '\u2713 ' + t('verify.fixed');
+    passBtn.addEventListener('click', () => {
+      this.respond(item.feedbackId, true);
+      card.remove();
+    });
+
+    const failBtn = document.createElement('button');
+    failBtn.style.cssText = `
+      flex:1; padding:6px; border:none; border-radius:6px;
+      background:#ef4444; color:white; font-size:12px; cursor:pointer; font-weight:500;
+    `;
+    failBtn.textContent = '\u2717 ' + t('verify.broken');
+    failBtn.addEventListener('click', () => {
+      this.respond(item.feedbackId, false);
+      card.remove();
+    });
+
+    btnRow.appendChild(passBtn);
+    btnRow.appendChild(failBtn);
+    card.appendChild(btnRow);
+
+    this.container.appendChild(card);
+  }
+
+  private async respond(feedbackId: string, confirmed: boolean): Promise<void> {
+    try {
+      await fetch(`${this.baseUrl}/api/verify/${feedbackId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ confirmed }),
+      });
+    } catch {}
+  }
+
+  destroy(): void {
+    this.stopPolling();
+    this.container.remove();
+  }
+}

package/src/detect/dev-server.ts

@@ -0,0 +1,110 @@
+import fs from 'fs/promises';
+import net from 'net';
+import path from 'path';
+
+interface DevServerInfo {
+  framework: string;
+  port: number;
+  command: string;
+  isRunning: boolean;
+}
+
+const FRAMEWORK_PORTS: Record<string, { port: number; keywords: string[] }> = {
+  vite: { port: 5173, keywords: ['vite'] },
+  next: { port: 3000, keywords: ['next'] },
+  'create-react-app': { port: 3000, keywords: ['react-scripts'] },
+  webpack: { port: 8080, keywords: ['webpack serve', 'webpack-dev-server'] },
+  nuxt: { port: 3000, keywords: ['nuxt'] },
+  angular: { port: 4200, keywords: ['ng serve'] },
+  svelte: { port: 5173, keywords: ['svelte-kit', 'vite'] },
+  astro: { port: 4321, keywords: ['astro'] },
+};
+
+export async function detectDevServer(
+  cwd: string,
+  manualPort?: number
+): Promise<DevServerInfo> {
+  // Read package.json
+  let devCommand = '';
+  let framework = 'unknown';
+  let port = manualPort || 0;
+
+  try {
+    const pkgPath = path.join(cwd, 'package.json');
+    const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf-8'));
+    const scripts = pkg.scripts || {};
+
+    // Check "dev" or "start" scripts
+    devCommand = scripts.dev || scripts.start || '';
+
+    // Match framework
+    for (const [name, info] of Object.entries(FRAMEWORK_PORTS)) {
+      if (info.keywords.some((kw) => devCommand.includes(kw))) {
+        framework = name;
+        if (!manualPort) port = info.port;
+        break;
+      }
+    }
+
+    // Also check dependencies for framework detection
+    if (framework === 'unknown') {
+      const allDeps = {
+        ...pkg.dependencies,
+        ...pkg.devDependencies,
+      };
+      for (const [name, info] of Object.entries(FRAMEWORK_PORTS)) {
+        if (info.keywords.some((kw) => kw in allDeps)) {
+          framework = name;
+          if (!manualPort) port = info.port;
+          break;
+        }
+      }
+    }
+  } catch {
+    // No package.json found
+  }
+
+  // Default port
+  if (!port) port = 3000;
+
+  // Check if port is already in use
+  const isRunning = await isPortInUse(port);
+
+  return {
+    framework,
+    port,
+    command: devCommand,
+    isRunning,
+  };
+}
+
+export function isPortInUse(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const socket = new net.Socket();
+    socket.setTimeout(1000);
+    socket.on('connect', () => {
+      socket.destroy();
+      resolve(true);
+    });
+    socket.on('timeout', () => {
+      socket.destroy();
+      resolve(false);
+    });
+    socket.on('error', () => {
+      resolve(false);
+    });
+    socket.connect(port, '127.0.0.1');
+  });
+}
+
+export async function waitForPort(
+  port: number,
+  timeout = 30000
+): Promise<boolean> {
+  const start = Date.now();
+  while (Date.now() - start < timeout) {
+    if (await isPortInUse(port)) return true;
+    await new Promise((r) => setTimeout(r, 500));
+  }
+  return false;
+}

package/src/detect/spawn-dev.ts

@@ -0,0 +1,50 @@
+import { spawn, ChildProcess } from 'child_process';
+import { waitForPort } from './dev-server.js';
+
+let devProcess: ChildProcess | null = null;
+
+export async function spawnDevServer(
+  cwd: string,
+  command: string,
+  port: number
+): Promise<boolean> {
+  const isWindows = process.platform === 'win32';
+  const npmCmd = isWindows ? 'npm.cmd' : 'npm';
+
+  // Use the detected script name (e.g., "dev" or "start")
+  const scriptName = command.includes('start') ? 'start' : 'dev';
+
+  devProcess = spawn(npmCmd, ['run', scriptName], {
+    cwd,
+    shell: isWindows,
+    stdio: 'pipe', // Don't inherit — we're an MCP server using stdio
+    env: { ...process.env },
+  });
+
+  devProcess.stdout?.on('data', () => {
+    // Silently consume output — MCP server uses stdio
+  });
+
+  devProcess.stderr?.on('data', () => {
+    // Silently consume stderr
+  });
+
+  devProcess.on('error', () => {
+    // Silently handle — MCP server uses stdio, can't write to stderr
+  });
+
+  // Wait for the port to become available
+  const ready = await waitForPort(port, 30000);
+  return ready;
+}
+
+export function killDevServer(): void {
+  if (devProcess) {
+    devProcess.kill();
+    devProcess = null;
+  }
+}
+
+export function isDevServerSpawned(): boolean {
+  return devProcess !== null && !devProcess.killed;
+}

package/src/install/detect-ai-tool.ts

@@ -0,0 +1,49 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+export interface AITool {
+  name: string;
+  configPath: string;
+  detected: boolean;
+}
+
+const HOME = process.env.HOME || process.env.USERPROFILE || '';
+
+export async function detectAITools(): Promise<AITool[]> {
+  const tools: AITool[] = [];
+
+  // Claude Code
+  const claudeDir = path.join(HOME, '.claude');
+  tools.push({
+    name: 'Claude Code',
+    configPath: path.join(claudeDir, 'settings.json'),
+    detected: await dirExists(claudeDir),
+  });
+
+  // Cursor
+  const cursorDir = path.join(HOME, '.cursor');
+  tools.push({
+    name: 'Cursor',
+    configPath: path.join(cursorDir, 'mcp.json'),
+    detected: await dirExists(cursorDir),
+  });
+
+  // Windsurf
+  const windsurfDir = path.join(HOME, '.windsurf');
+  tools.push({
+    name: 'Windsurf',
+    configPath: path.join(windsurfDir, 'mcp.json'),
+    detected: await dirExists(windsurfDir),
+  });
+
+  return tools;
+}
+
+async function dirExists(dir: string): Promise<boolean> {
+  try {
+    const stat = await fs.stat(dir);
+    return stat.isDirectory();
+  } catch {
+    return false;
+  }
+}

package/src/install/write-mcp-config.ts

@@ -0,0 +1,49 @@
+import fs from 'fs/promises';
+import path from 'path';
+import type { AITool } from './detect-ai-tool.js';
+
+const MCP_SERVER_CONFIG = {
+  command: 'npx',
+  args: ['yo-bug', 'mcp'],
+};
+
+export async function writeMcpConfig(tool: AITool): Promise<{ success: boolean; message: string }> {
+  try {
+    // Ensure directory exists
+    await fs.mkdir(path.dirname(tool.configPath), { recursive: true });
+
+    // Read existing config
+    let config: any = {};
+    try {
+      const content = await fs.readFile(tool.configPath, 'utf-8');
+      config = JSON.parse(content);
+    } catch {
+      // File doesn't exist or invalid JSON — start fresh
+    }
+
+    // Check if already configured
+    if (tool.name === 'Claude Code') {
+      config.mcpServers = config.mcpServers || {};
+      if (config.mcpServers['yo-bug']) {
+        return { success: true, message: `${tool.name}: 已配置，跳过。` };
+      }
+      config.mcpServers['yo-bug'] = {
+        type: 'stdio',
+        ...MCP_SERVER_CONFIG,
+      };
+    } else {
+      // Cursor / Windsurf format
+      config.mcpServers = config.mcpServers || {};
+      if (config.mcpServers['yo-bug']) {
+        return { success: true, message: `${tool.name}: 已配置，跳过。` };
+      }
+      config.mcpServers['yo-bug'] = MCP_SERVER_CONFIG;
+    }
+
+    // Write config
+    await fs.writeFile(tool.configPath, JSON.stringify(config, null, 2), 'utf-8');
+    return { success: true, message: `${tool.name}: MCP 配置已写入 ${tool.configPath}` };
+  } catch (err: any) {
+    return { success: false, message: `${tool.name}: 写入失败 — ${err.message}` };
+  }
+}