yo-bug 0.1.0

package/src/mcp/tools/test-history.ts

@@ -0,0 +1,97 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+const HISTORY_DIR = path.join(
+  process.env.HOME || process.env.USERPROFILE || '.',
+  '.yo-bug',
+  'test-history'
+);
+
+interface TestRecord {
+  module: string;
+  title: string;
+  items: any[];
+  results: { passed: number; failed: number; total: number };
+  failedItems: string[];
+  timestamp: string;
+}
+
+export async function saveTestRecord(args: {
+  module: string;
+  title: string;
+  items: any[];
+  results: { passed: number; failed: number; total: number };
+  failedItems: string[];
+}): Promise<{ text: string }> {
+  await fs.mkdir(HISTORY_DIR, { recursive: true });
+
+  const record: TestRecord = {
+    ...args,
+    timestamp: new Date().toISOString(),
+  };
+
+  // Load existing records for this module
+  const filePath = path.join(HISTORY_DIR, `${sanitize(args.module)}.json`);
+  let records: TestRecord[] = [];
+  try {
+    const data = await fs.readFile(filePath, 'utf-8');
+    records = JSON.parse(data);
+  } catch {}
+
+  records.push(record);
+  // Keep last 20 records per module
+  if (records.length > 20) records = records.slice(-20);
+
+  await fs.writeFile(filePath, JSON.stringify(records, null, 2), 'utf-8');
+
+  return {
+    text: `测试记录已保存。模块「${args.module}」累计 ${records.length} 次测试记录。`,
+  };
+}
+
+export async function getTestHistory(args: {
+  module: string;
+}): Promise<{ text: string; records: TestRecord[] }> {
+  const filePath = path.join(HISTORY_DIR, `${sanitize(args.module)}.json`);
+  let records: TestRecord[] = [];
+  try {
+    const data = await fs.readFile(filePath, 'utf-8');
+    records = JSON.parse(data);
+  } catch {
+    return { text: `模块「${args.module}」没有历史测试记录。`, records: [] };
+  }
+
+  const lines = [`模块「${args.module}」历史测试记录（${records.length} 次）:\n`];
+
+  for (const r of records.slice(-5)) { // Show last 5
+    lines.push(`[${r.timestamp.slice(0, 10)}] ${r.title}`);
+    lines.push(`  结果: ${r.results.passed}/${r.results.total} 通过`);
+    if (r.failedItems.length > 0) {
+      lines.push(`  失败项: ${r.failedItems.join('; ')}`);
+    }
+  }
+
+  // Aggregate: which test scenarios fail most often?
+  const failCounts: Record<string, number> = {};
+  for (const r of records) {
+    for (const f of r.failedItems) {
+      failCounts[f] = (failCounts[f] || 0) + 1;
+    }
+  }
+  const frequentFails = Object.entries(failCounts)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 5);
+
+  if (frequentFails.length > 0) {
+    lines.push('\n高频失败场景（生成清单时请重点覆盖）:');
+    for (const [scenario, count] of frequentFails) {
+      lines.push(`  ${count}x 失败: ${scenario}`);
+    }
+  }
+
+  return { text: lines.join('\n'), records };
+}
+
+function sanitize(name: string): string {
+  return name.replace(/[^a-zA-Z0-9\u4e00-\u9fff_-]/g, '_').slice(0, 50);
+}

package/src/server/feedback-api.ts

@@ -0,0 +1,164 @@
+import { Router } from 'express';
+import multer from 'multer';
+import { FeedbackStore } from '../storage/store.js';
+
+const upload = multer({ storage: multer.memoryStorage() });
+
+export function createFeedbackRouter(store: FeedbackStore): Router {
+  const router = Router();
+
+  // Submit feedback
+  router.post('/api/feedback', upload.single('screenshot'), async (req, res) => {
+    try {
+      let feedbackData: any;
+
+      if (req.body.feedback) {
+        // multipart form: feedback JSON string + screenshot file
+        feedbackData = JSON.parse(req.body.feedback);
+      } else {
+        // plain JSON body
+        feedbackData = req.body;
+      }
+
+      // Sanitize: only allow known fields, strip anything dangerous
+      const sanitized = {
+        mode: feedbackData.mode,
+        problemType: feedbackData.problemType,
+        description: String(feedbackData.description || '').slice(0, 2000),
+        element: feedbackData.element,
+        pageUrl: String(feedbackData.pageUrl || '').slice(0, 500),
+        pageTitle: String(feedbackData.pageTitle || '').slice(0, 200),
+        viewport: feedbackData.viewport,
+        userAgent: String(feedbackData.userAgent || '').slice(0, 300),
+        timestamp: feedbackData.timestamp,
+        consoleErrors: Array.isArray(feedbackData.consoleErrors) ? feedbackData.consoleErrors.slice(0, 50) : [],
+        networkErrors: Array.isArray(feedbackData.networkErrors) ? feedbackData.networkErrors.slice(0, 50) : [],
+        unhandledErrors: Array.isArray(feedbackData.unhandledErrors) ? feedbackData.unhandledErrors.slice(0, 50) : [],
+        actionSteps: Array.isArray(feedbackData.actionSteps) ? feedbackData.actionSteps.slice(0, 100) : [],
+        hasScreenshot: false,
+      };
+
+      const screenshot = req.file?.buffer;
+      const item = await store.create(sanitized, screenshot);
+
+      res.json({ id: item.id, createdAt: item.createdAt });
+    } catch (err: any) {
+      res.status(400).json({ error: err.message });
+    }
+  });
+
+  // List feedbacks
+  router.get('/api/feedback', async (req, res) => {
+    try {
+      const result = await store.list({
+        limit: Number(req.query.limit) || 20,
+        status: (req.query.status as string) || 'open',
+        type: req.query.type as string,
+      });
+      res.json(result);
+    } catch (err: any) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // Get single feedback
+  router.get('/api/feedback/:id', async (req, res) => {
+    try {
+      const item = await store.getById(req.params.id);
+      if (!item) {
+        return res.status(404).json({ error: 'Not found' });
+      }
+      res.json(item);
+    } catch (err: any) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // Get screenshot
+  router.get('/api/feedback/:id/screenshot', async (req, res) => {
+    try {
+      const screenshot = await store.getScreenshot(req.params.id);
+      if (!screenshot) {
+        return res.status(404).json({ error: 'No screenshot' });
+      }
+      res.setHeader('Content-Type', 'image/png');
+      res.end(screenshot);
+    } catch (err: any) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // --- Checklist API (AI → Browser → AI) ---
+  let checklist: { items: any[]; title: string; createdAt: string } = {
+    items: [],
+    title: '',
+    createdAt: '',
+  };
+
+  // AI pushes checklist (supports both string[] and structured items)
+  router.post('/api/checklist', (req, res) => {
+    const { title, items } = req.body;
+    checklist = {
+      title: title || 'Test Checklist',
+      items: (items || []).map((item: any, i: number) => ({
+        id: i,
+        step: typeof item === 'string' ? item : (item.step || item.text || ''),
+        expect: typeof item === 'string' ? '' : (item.expect || ''),
+        priority: (typeof item === 'object' && item.priority) || 'normal',
+        dimension: (typeof item === 'object' && item.dimension) || '',
+        status: 'pending',
+        feedback: '',
+      })),
+      createdAt: new Date().toISOString(),
+    };
+    res.json({ ok: true, count: checklist.items.length });
+  });
+
+  // Browser polls checklist
+  router.get('/api/checklist', (_req, res) => {
+    res.json(checklist);
+  });
+
+  // Browser updates a checklist item
+  router.patch('/api/checklist/:itemId', (req, res) => {
+    const id = parseInt(req.params.itemId);
+    const item = checklist.items.find((i: any) => i.id === id);
+    if (!item) return res.status(404).json({ error: 'Not found' });
+    if (req.body.status) item.status = req.body.status;
+    if (req.body.feedback !== undefined) item.feedback = req.body.feedback;
+    res.json(item);
+  });
+
+  // --- Verification API (AI → Browser → AI) ---
+  let pendingVerifications: any[] = [];
+
+  // AI pushes verification request
+  router.post('/api/verify', (req, res) => {
+    pendingVerifications.push(req.body);
+    res.json({ ok: true });
+  });
+
+  // Browser polls for pending verifications
+  router.get('/api/verify', (_req, res) => {
+    res.json({ items: pendingVerifications });
+  });
+
+  // Browser confirms/rejects verification
+  router.patch('/api/verify/:feedbackId', async (req, res) => {
+    const { feedbackId } = req.params;
+    const { confirmed } = req.body; // true = fix works, false = still broken
+    const newStatus = confirmed ? 'resolved' : 'open';
+    await store.updateStatus(feedbackId, newStatus);
+    pendingVerifications = pendingVerifications.filter(v => v.feedbackId !== feedbackId);
+    res.json({ ok: true, status: newStatus });
+  });
+
+  // Reset in-memory state
+  router.post('/api/reset', (_req, res) => {
+    checklist = { items: [], title: '', createdAt: '' };
+    pendingVerifications = [];
+    res.json({ ok: true });
+  });
+
+  return router;
+}

package/src/server/html-injector.ts

@@ -0,0 +1,41 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+
+const INJECT_SCRIPT = `<script src="/vibe-feedback.js"></script>`;
+
+/**
+ * Middleware that intercepts HTML responses from the proxy
+ * and injects the vibe-feedback SDK script before </body>.
+ */
+export function createHtmlInjector(proxyRes: IncomingMessage, res: ServerResponse) {
+  const contentType = proxyRes.headers['content-type'] || '';
+  if (!contentType.includes('text/html')) {
+    return null; // Not HTML, don't intercept
+  }
+
+  // Copy all response headers except content-length (we'll modify the body)
+  res.writeHead(proxyRes.statusCode || 200, Object.fromEntries(
+    Object.entries(proxyRes.headers).filter(([key]) => key !== 'content-length')
+  ));
+
+  const chunks: Buffer[] = [];
+
+  return {
+    onData(chunk: Buffer) {
+      chunks.push(chunk);
+    },
+    onEnd() {
+      let html = Buffer.concat(chunks).toString('utf-8');
+
+      // Inject before </body> or at end if no </body>
+      if (html.includes('</body>')) {
+        html = html.replace('</body>', `${INJECT_SCRIPT}\n</body>`);
+      } else if (html.includes('</html>')) {
+        html = html.replace('</html>', `${INJECT_SCRIPT}\n</html>`);
+      } else {
+        html += `\n${INJECT_SCRIPT}`;
+      }
+
+      res.end(html);
+    },
+  };
+}

package/src/server/proxy-server.ts

@@ -0,0 +1,107 @@
+import express from 'express';
+import cors from 'cors';
+import httpProxy from 'http-proxy';
+import type { Server } from 'http';
+import { FeedbackStore } from '../storage/store.js';
+import { createFeedbackRouter } from './feedback-api.js';
+import { createSdkRouter } from './sdk-serve.js';
+import { createHtmlInjector } from './html-injector.js';
+
+const PROXY_PORT = 3695;
+
+let server: Server | null = null;
+let proxy: httpProxy | null = null;
+
+export async function startProxyServer(
+  targetPort: number,
+  store: FeedbackStore
+): Promise<{ proxyUrl: string; targetUrl: string }> {
+  if (server) {
+    throw new Error('Proxy server is already running');
+  }
+
+  const targetUrl = `http://localhost:${targetPort}`;
+  const proxyUrl = `http://localhost:${PROXY_PORT}`;
+
+  const app = express();
+
+  // CORS for SDK to submit feedback
+  app.use(cors());
+
+  // Parse JSON for feedback API
+  app.use(express.json({ limit: '10mb' }));
+
+  // Serve SDK JS file
+  app.use(createSdkRouter());
+
+  // Feedback API routes
+  app.use(createFeedbackRouter(store));
+
+  // Create proxy
+  proxy = httpProxy.createProxyServer({
+    target: targetUrl,
+    ws: true, // WebSocket support for HMR
+    changeOrigin: true,
+  });
+
+  proxy.on('error', (_err, _req, res) => {
+    if (res && 'writeHead' in res) {
+      (res as any).writeHead?.(502, { 'Content-Type': 'text/plain' });
+      (res as any).end?.('Dev server not responding');
+    }
+  });
+
+  // Intercept proxy responses to inject SDK into HTML
+  proxy.on('proxyRes', (proxyRes, _req, res) => {
+    const injector = createHtmlInjector(proxyRes, res as any);
+    if (injector) {
+      // HTML response — buffer and inject
+      proxyRes.on('data', (chunk) => injector.onData(chunk));
+      proxyRes.on('end', () => injector.onEnd());
+    } else {
+      // Non-HTML — pipe through directly
+      proxyRes.pipe(res as any);
+    }
+  });
+
+  // All other requests → proxy to dev server
+  app.all('*', (req, res) => {
+    proxy!.web(req, res, {
+      selfHandleResponse: true, // We handle response in proxyRes event
+    });
+  });
+
+  // Start server
+  await new Promise<void>((resolve, reject) => {
+    server = app.listen(PROXY_PORT, () => resolve());
+    server!.on('error', (err: NodeJS.ErrnoException) => {
+      if (err.code === 'EADDRINUSE') {
+        reject(new Error(`Port ${PROXY_PORT} is already in use. Stop the other process or restart.`));
+      } else {
+        reject(err);
+      }
+    });
+  });
+
+  // Handle WebSocket upgrade for HMR
+  server!.on('upgrade', (req: any, socket: any, head: any) => {
+    proxy!.ws(req, socket, head);
+  });
+
+  return { proxyUrl, targetUrl };
+}
+
+export function stopProxyServer(): void {
+  if (proxy) {
+    proxy.close();
+    proxy = null;
+  }
+  if (server) {
+    server.close();
+    server = null;
+  }
+}
+
+export function isProxyRunning(): boolean {
+  return server !== null;
+}

package/src/server/sdk-serve.ts

@@ -0,0 +1,24 @@
+import { Router } from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+export function createSdkRouter(): Router {
+  const router = Router();
+
+  router.get('/vibe-feedback.js', (_req, res) => {
+    // Resolve SDK path relative to this file's location
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const sdkPath = path.resolve(__dirname, '../../dist/vibe-feedback.js');
+
+    if (!fs.existsSync(sdkPath)) {
+      return res.status(404).send('// SDK not built yet');
+    }
+
+    res.setHeader('Content-Type', 'application/javascript');
+    res.setHeader('Cache-Control', 'no-cache');
+    fs.createReadStream(sdkPath).pipe(res);
+  });
+
+  return router;
+}

package/src/storage/store.ts

@@ -0,0 +1,172 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { v4 as uuidv4 } from 'uuid';
+import type { FeedbackItem } from './types.js';
+
+const ID_PATTERN = /^[a-f0-9\-]{8,36}$/;
+
+function validateId(id: string): boolean {
+  return ID_PATTERN.test(id) && !id.includes('.') && !id.includes('/') && !id.includes('\\');
+}
+
+const STORAGE_DIR = path.join(
+  process.env.HOME || process.env.USERPROFILE || '.',
+  '.yo-bug',
+  'feedback'
+);
+
+export class FeedbackStore {
+  private indexPath: string;
+
+  constructor() {
+    this.indexPath = path.join(STORAGE_DIR, 'index.json');
+  }
+
+  async init(): Promise<void> {
+    await fs.mkdir(STORAGE_DIR, { recursive: true });
+    try {
+      await fs.access(this.indexPath);
+    } catch {
+      await fs.writeFile(this.indexPath, '[]', 'utf-8');
+    }
+  }
+
+  async create(
+    data: Omit<FeedbackItem, 'id' | 'createdAt' | 'status'>,
+    screenshot?: Buffer
+  ): Promise<FeedbackItem> {
+    const id = uuidv4().slice(0, 12);
+    const item: FeedbackItem = {
+      ...data,
+      id,
+      createdAt: new Date().toISOString(),
+      status: 'open',
+      hasScreenshot: !!screenshot,
+    };
+
+    // Write feedback JSON
+    await fs.writeFile(
+      path.join(STORAGE_DIR, `${id}.json`),
+      JSON.stringify(item, null, 2),
+      'utf-8'
+    );
+
+    // Write screenshot if provided
+    if (screenshot) {
+      await fs.writeFile(path.join(STORAGE_DIR, `${id}.png`), screenshot);
+    }
+
+    // Update index (append-only line to avoid race conditions)
+    const indexEntry = JSON.stringify({
+      id: item.id,
+      mode: item.mode,
+      problemType: item.problemType,
+      description: item.description,
+      pageUrl: item.pageUrl,
+      status: item.status,
+      createdAt: item.createdAt,
+      hasScreenshot: item.hasScreenshot,
+    });
+    await fs.appendFile(
+      path.join(STORAGE_DIR, 'index.ndjson'),
+      indexEntry + '\n',
+      'utf-8'
+    );
+    // Also update the JSON index for backward compat
+    const index = await this.readIndex();
+    index.push(JSON.parse(indexEntry));
+    await fs.writeFile(this.indexPath, JSON.stringify(index, null, 2), 'utf-8');
+
+    return item;
+  }
+
+  async list(options?: {
+    limit?: number;
+    status?: string;
+    type?: string;
+  }): Promise<{ items: FeedbackItem[]; total: number }> {
+    const index = await this.readIndex();
+    let filtered = index;
+
+    if (options?.status && options.status !== 'all') {
+      filtered = filtered.filter((i: any) => i.status === options.status);
+    }
+    if (options?.type) {
+      filtered = filtered.filter((i: any) => i.problemType === options.type);
+    }
+
+    const total = filtered.length;
+    const limit = options?.limit || 20;
+    const items = filtered.slice(-limit).reverse(); // Most recent first
+
+    // Load full items
+    const fullItems: FeedbackItem[] = [];
+    for (const entry of items) {
+      const item = await this.getById(entry.id);
+      if (item) fullItems.push(item);
+    }
+
+    return { items: fullItems, total };
+  }
+
+  async getById(id: string): Promise<FeedbackItem | null> {
+    if (!validateId(id)) return null;
+    try {
+      const data = await fs.readFile(
+        path.join(STORAGE_DIR, `${id}.json`),
+        'utf-8'
+      );
+      return JSON.parse(data);
+    } catch {
+      return null;
+    }
+  }
+
+  async getScreenshot(id: string): Promise<Buffer | null> {
+    if (!validateId(id)) return null;
+    try {
+      return await fs.readFile(path.join(STORAGE_DIR, `${id}.png`));
+    } catch {
+      return null;
+    }
+  }
+
+  async updateStatus(id: string, status: 'open' | 'verify' | 'resolved'): Promise<void> {
+    if (!validateId(id)) return;
+    const item = await this.getById(id);
+    if (!item) return;
+
+    item.status = status;
+    await fs.writeFile(
+      path.join(STORAGE_DIR, `${id}.json`),
+      JSON.stringify(item, null, 2),
+      'utf-8'
+    );
+
+    // Update index
+    const index = await this.readIndex();
+    const entry = index.find((i: any) => i.id === id);
+    if (entry) {
+      entry.status = status;
+      await fs.writeFile(this.indexPath, JSON.stringify(index, null, 2), 'utf-8');
+    }
+  }
+
+  async clear(): Promise<void> {
+    const index = await this.readIndex();
+    for (const entry of index) {
+      try { await fs.unlink(path.join(STORAGE_DIR, `${entry.id}.json`)); } catch {}
+      try { await fs.unlink(path.join(STORAGE_DIR, `${entry.id}.png`)); } catch {}
+    }
+    await fs.writeFile(this.indexPath, '[]', 'utf-8');
+  }
+
+  private async readIndex(): Promise<any[]> {
+    try {
+      const data = await fs.readFile(this.indexPath, 'utf-8');
+      return JSON.parse(data);
+    } catch {
+      return [];
+    }
+  }
+}

package/src/storage/types.ts

@@ -0,0 +1,68 @@
+export interface ElementInfo {
+  selector: string;
+  tagName: string;
+  textContent: string;
+  rect: { x: number; y: number; width: number; height: number };
+  computedStyles: Record<string, string>;
+  attributes: Record<string, string>;
+  componentName: string | null;
+  componentFile: string | null;
+}
+
+export interface ConsoleEntry {
+  type: 'error' | 'warn';
+  message: string;
+  stack?: string;
+  timestamp: number;
+}
+
+export interface NetworkEntry {
+  type: 'fetch' | 'xhr';
+  method: string;
+  url: string;
+  status: number;
+  statusText: string;
+  duration: number;
+  timestamp: number;
+  error?: string;
+}
+
+export interface ErrorEntry {
+  type: 'unhandled-error' | 'unhandled-rejection';
+  message: string;
+  stack?: string;
+  timestamp: number;
+}
+
+export interface ActionStep {
+  type: 'click' | 'input' | 'navigate' | 'scroll' | 'keypress';
+  timestamp: number;
+  target?: string;
+  tagName?: string;
+  text?: string;
+  url?: string;
+  position?: { x: number; y: number };
+  elapsed?: number;
+}
+
+export type ProblemType = 'bug' | 'ui-issue' | 'performance' | 'feature-request' | 'other';
+
+export interface FeedbackItem {
+  id: string;
+  mode: 'element' | 'annotation';
+  problemType: ProblemType;
+  description: string;
+  element?: ElementInfo;
+  hasScreenshot: boolean;
+  pageUrl: string;
+  pageTitle: string;
+  viewport: { width: number; height: number };
+  userAgent: string;
+  timestamp: number;
+  createdAt: string;
+  consoleErrors: ConsoleEntry[];
+  networkErrors: NetworkEntry[];
+  unhandledErrors: ErrorEntry[];
+  actionSteps: ActionStep[];
+  status: 'open' | 'verify' | 'resolved';
+}