yo-bug 0.1.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "yo-bug",
+  "version": "0.1.0",
+  "description": "MCP Server for visual test feedback in vibe coding — QA capability as a protocol",
+  "type": "module",
+  "bin": {
+    "yo-bug": "./dist/bin/cli.js"
+  },
+  "main": "./dist/src/mcp/index.js",
+  "files": [
+    "dist/",
+    "bin/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build:client": "vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "build": "npm run build:client && npm run build:server",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vibe-coding",
+    "mcp",
+    "model-context-protocol",
+    "feedback",
+    "testing",
+    "qa",
+    "ai-agent",
+    "claude-code",
+    "cursor",
+    "windsurf",
+    "visual-testing",
+    "bug-report"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "cors": "^2.8.5",
+    "express": "^4.21.2",
+    "html2canvas": "^1.4.1",
+    "http-proxy": "^1.18.1",
+    "multer": "^1.4.5-lts.1",
+    "open": "^10.1.0",
+    "uuid": "^11.1.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
+    "@types/http-proxy": "^1.17.16",
+    "@types/multer": "^1.4.12",
+    "@types/node": "^22.14.0",
+    "@types/uuid": "^10.0.0",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.1"
+  }
+}

package/src/client/annotation-mode/canvas-editor.ts

@@ -0,0 +1,178 @@
+import { History } from './history.js';
+import { Toolbar, type ToolType } from './toolbar.js';
+import { BaseTool } from './tools/base-tool.js';
+import { ArrowTool } from './tools/arrow.js';
+import { RectTool } from './tools/rect.js';
+import { CircleTool } from './tools/circle.js';
+import { FreehandTool } from './tools/freehand.js';
+import { TextTool } from './tools/text.js';
+
+export class CanvasEditor {
+  private container: HTMLDivElement;
+  private wrapper: HTMLDivElement;
+  private bgCanvas: HTMLCanvasElement;
+  private drawCanvas: HTMLCanvasElement;
+  private drawCtx: CanvasRenderingContext2D;
+  private toolbar: Toolbar;
+  private history: History;
+  private currentTool: BaseTool;
+  private tools: Record<ToolType, BaseTool>;
+  private color = '#ef4444';
+  private lineWidth = 3;
+
+  constructor(
+    /** The cropped region image */
+    regionCanvas: HTMLCanvasElement,
+    private onDone: (dataUrl: string) => void,
+    private onCancel: () => void
+  ) {
+    const w = regionCanvas.width;
+    const h = regionCanvas.height;
+
+    // Overlay container — dark background, region image centered
+    this.container = document.createElement('div');
+    this.container.style.cssText = `
+      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+      z-index: 2147483646; background: rgba(0,0,0,0.75);
+      display: flex; align-items: center; justify-content: center;
+    `;
+
+    // Canvas wrapper — sized to the region, not the full screen
+    this.wrapper = document.createElement('div');
+    this.wrapper.style.cssText = `
+      position: relative;
+      max-width: 90vw;
+      max-height: 80vh;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+      border-radius: 8px;
+      overflow: hidden;
+    `;
+
+    // Background canvas (cropped region screenshot)
+    this.bgCanvas = document.createElement('canvas');
+    this.bgCanvas.width = w;
+    this.bgCanvas.height = h;
+    this.bgCanvas.style.cssText = `display: block; max-width: 90vw; max-height: 80vh; object-fit: contain;`;
+    // Scale canvas display size to fit viewport
+    const maxW = window.innerWidth * 0.9;
+    const maxH = window.innerHeight * 0.8;
+    const scale = Math.min(1, maxW / w, maxH / h);
+    const displayW = w * scale;
+    const displayH = h * scale;
+    this.bgCanvas.style.width = `${displayW}px`;
+    this.bgCanvas.style.height = `${displayH}px`;
+
+    const bgCtx = this.bgCanvas.getContext('2d')!;
+    bgCtx.drawImage(regionCanvas, 0, 0);
+
+    // Drawing canvas (on top, same size)
+    this.drawCanvas = document.createElement('canvas');
+    this.drawCanvas.width = w;
+    this.drawCanvas.height = h;
+    this.drawCanvas.style.cssText = `
+      position: absolute; top: 0; left: 0;
+      width: ${displayW}px; height: ${displayH}px;
+      cursor: crosshair;
+    `;
+    this.drawCtx = this.drawCanvas.getContext('2d')!;
+
+    this.wrapper.style.width = `${displayW}px`;
+    this.wrapper.style.height = `${displayH}px`;
+    this.wrapper.appendChild(this.bgCanvas);
+    this.wrapper.appendChild(this.drawCanvas);
+    this.container.appendChild(this.wrapper);
+
+    // History
+    this.history = new History(this.drawCtx);
+
+    // Tools
+    this.tools = {
+      arrow: new ArrowTool(this.drawCtx, this.color, this.lineWidth),
+      rect: new RectTool(this.drawCtx, this.color, this.lineWidth),
+      circle: new CircleTool(this.drawCtx, this.color, this.lineWidth),
+      freehand: new FreehandTool(this.drawCtx, this.color, this.lineWidth),
+      text: new TextTool(this.drawCtx, this.color, this.lineWidth, this.wrapper),
+    };
+    this.currentTool = this.tools.arrow;
+
+    // Toolbar
+    this.toolbar = new Toolbar(this.container, {
+      onToolSelect: (type) => {
+        this.currentTool = this.tools[type];
+      },
+      onColorChange: (color) => {
+        this.color = color;
+        Object.values(this.tools).forEach((t) => t.setColor(color));
+      },
+      onUndo: () => this.history.undo(),
+      onDone: () => this.finish(),
+      onCancel: () => this.cancel(),
+    });
+
+    // Mouse events
+    this.drawCanvas.addEventListener('mousedown', (e) => this.handleMouse(e, 'down'));
+    this.drawCanvas.addEventListener('mousemove', (e) => this.handleMouse(e, 'move'));
+    this.drawCanvas.addEventListener('mouseup', (e) => this.handleMouse(e, 'up'));
+
+    // Keyboard
+    this.keyHandler = this.keyHandler.bind(this);
+    document.addEventListener('keydown', this.keyHandler);
+  }
+
+  show(): void {
+    document.body.appendChild(this.container);
+  }
+
+  private handleMouse(e: MouseEvent, phase: 'down' | 'move' | 'up'): void {
+    const rect = this.drawCanvas.getBoundingClientRect();
+    const scaleX = this.drawCanvas.width / rect.width;
+    const scaleY = this.drawCanvas.height / rect.height;
+    // Canvas coordinates (for drawing)
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+    // CSS coordinates relative to wrapper (for DOM positioning, e.g. text input)
+    const cssX = e.clientX - rect.left;
+    const cssY = e.clientY - rect.top;
+
+    if (phase === 'down') {
+      this.history.push();
+      this.currentTool.onMouseDown(x, y, cssX, cssY);
+    } else if (phase === 'move') {
+      this.currentTool.onMouseMove(x, y, cssX, cssY);
+    } else {
+      this.currentTool.onMouseUp(x, y, cssX, cssY);
+    }
+  }
+
+  private keyHandler(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      this.cancel();
+    } else if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+      e.preventDefault();
+      this.history.undo();
+    }
+  }
+
+  private finish(): void {
+    const merged = document.createElement('canvas');
+    merged.width = this.bgCanvas.width;
+    merged.height = this.bgCanvas.height;
+    const ctx = merged.getContext('2d')!;
+    ctx.drawImage(this.bgCanvas, 0, 0);
+    ctx.drawImage(this.drawCanvas, 0, 0);
+    const dataUrl = merged.toDataURL('image/png');
+    this.destroy();
+    this.onDone(dataUrl);
+  }
+
+  private cancel(): void {
+    this.destroy();
+    this.onCancel();
+  }
+
+  private destroy(): void {
+    document.removeEventListener('keydown', this.keyHandler);
+    this.toolbar.destroy();
+    this.container.remove();
+  }
+}

package/src/client/annotation-mode/history.ts

@@ -0,0 +1,32 @@
+export class History {
+  private stack: ImageData[] = [];
+  private ctx: CanvasRenderingContext2D;
+  private maxSize = 30;
+
+  constructor(ctx: CanvasRenderingContext2D) {
+    this.ctx = ctx;
+  }
+
+  push(): void {
+    const data = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    this.stack.push(data);
+    if (this.stack.length > this.maxSize) this.stack.shift();
+  }
+
+  undo(): boolean {
+    const prev = this.stack.pop();
+    if (prev) {
+      this.ctx.putImageData(prev, 0, 0);
+      return true;
+    }
+    return false;
+  }
+
+  get canUndo(): boolean {
+    return this.stack.length > 0;
+  }
+
+  clear(): void {
+    this.stack = [];
+  }
+}

package/src/client/annotation-mode/region-selector.ts

@@ -0,0 +1,123 @@
+import { t } from '../core/i18n.js';
+
+/**
+ * Region selector — WeChat-style screenshot selection
+ */
+export class RegionSelector {
+  private overlay: HTMLDivElement;
+  private selectionBox: HTMLDivElement;
+  private startX = 0;
+  private startY = 0;
+  private selecting = false;
+  private hint: HTMLDivElement;
+
+  constructor(
+    private onSelect: (rect: { x: number; y: number; w: number; h: number }) => void,
+    private onCancel: () => void
+  ) {
+    // Dark overlay covering entire screen
+    this.overlay = document.createElement('div');
+    this.overlay.style.cssText = `
+      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+      z-index: 2147483646; cursor: crosshair;
+      background: rgba(0,0,0,0.35);
+    `;
+
+    // Hint text
+    this.hint = document.createElement('div');
+    this.hint.style.cssText = `
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      color: white; font-size: 16px; font-weight: 500;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
+      pointer-events: none;
+      opacity: 0.9;
+    `;
+    this.hint.textContent = t('region.hint');
+    this.overlay.appendChild(this.hint);
+
+    // Selection rectangle
+    this.selectionBox = document.createElement('div');
+    this.selectionBox.style.cssText = `
+      position: fixed;
+      border: 2px solid #3b82f6;
+      background: rgba(59,130,246,0.08);
+      box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
+      display: none;
+      z-index: 2147483647;
+    `;
+
+    this.overlay.addEventListener('mousedown', (e) => this.onMouseDown(e));
+    this.overlay.addEventListener('mousemove', (e) => this.onMouseMove(e));
+    this.overlay.addEventListener('mouseup', (e) => this.onMouseUp(e));
+    this.keyHandler = this.keyHandler.bind(this);
+    document.addEventListener('keydown', this.keyHandler);
+  }
+
+  show(): void {
+    document.body.appendChild(this.overlay);
+    document.body.appendChild(this.selectionBox);
+  }
+
+  private onMouseDown(e: MouseEvent): void {
+    this.selecting = true;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.hint.style.display = 'none';
+    this.overlay.style.background = 'transparent'; // Remove overlay bg, use box-shadow instead
+    this.selectionBox.style.display = 'block';
+    this.updateBox(e.clientX, e.clientY);
+  }
+
+  private onMouseMove(e: MouseEvent): void {
+    if (!this.selecting) return;
+    this.updateBox(e.clientX, e.clientY);
+  }
+
+  private onMouseUp(e: MouseEvent): void {
+    if (!this.selecting) return;
+    this.selecting = false;
+
+    const rect = this.getRect(e.clientX, e.clientY);
+
+    // Minimum size check — ignore accidental clicks
+    if (rect.w < 20 || rect.h < 20) {
+      this.selectionBox.style.display = 'none';
+      this.overlay.style.background = 'rgba(0,0,0,0.35)';
+      this.hint.style.display = '';
+      return;
+    }
+
+    this.destroy();
+    this.onSelect(rect);
+  }
+
+  private updateBox(currentX: number, currentY: number): void {
+    const rect = this.getRect(currentX, currentY);
+    this.selectionBox.style.left = `${rect.x}px`;
+    this.selectionBox.style.top = `${rect.y}px`;
+    this.selectionBox.style.width = `${rect.w}px`;
+    this.selectionBox.style.height = `${rect.h}px`;
+  }
+
+  private getRect(currentX: number, currentY: number) {
+    const x = Math.min(this.startX, currentX);
+    const y = Math.min(this.startY, currentY);
+    const w = Math.abs(currentX - this.startX);
+    const h = Math.abs(currentY - this.startY);
+    return { x, y, w, h };
+  }
+
+  private keyHandler(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      this.destroy();
+      this.onCancel();
+    }
+  }
+
+  private destroy(): void {
+    document.removeEventListener('keydown', this.keyHandler);
+    this.overlay.remove();
+    this.selectionBox.remove();
+  }
+}

package/src/client/annotation-mode/screenshot.ts

@@ -0,0 +1,17 @@
+import html2canvas from 'html2canvas';
+
+export async function captureScreenshot(): Promise<HTMLCanvasElement> {
+  const host = document.getElementById('vibe-feedback-host');
+  if (host) host.style.display = 'none';
+
+  try {
+    return await html2canvas(document.body, {
+      useCORS: true,
+      allowTaint: false,
+      scale: Math.min(window.devicePixelRatio, 2),
+      logging: false,
+    });
+  } finally {
+    if (host) host.style.display = '';
+  }
+}

package/src/client/annotation-mode/toolbar.ts

@@ -0,0 +1,139 @@
+export type ToolType = 'arrow' | 'rect' | 'circle' | 'freehand' | 'text';
+
+const TOOLS: { type: ToolType; icon: string; label: string }[] = [
+  { type: 'arrow', icon: '\u2197', label: 'Arrow' },
+  { type: 'rect', icon: '\u25a1', label: 'Rect' },
+  { type: 'circle', icon: '\u25cb', label: 'Circle' },
+  { type: 'freehand', icon: '\u270e', label: 'Draw' },
+  { type: 'text', icon: 'T', label: 'Text' },
+];
+
+const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#000000', '#ffffff'];
+
+export class Toolbar {
+  private container: HTMLDivElement;
+  private toolBtns: HTMLButtonElement[] = [];
+
+  constructor(
+    parent: HTMLElement,
+    private callbacks: {
+      onToolSelect: (tool: ToolType) => void;
+      onColorChange: (color: string) => void;
+      onUndo: () => void;
+      onDone: () => void;
+      onCancel: () => void;
+    }
+  ) {
+    this.container = document.createElement('div');
+    this.container.style.cssText = `
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: #1e293b;
+      padding: 8px 12px;
+      border-radius: 10px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+      z-index: 10;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    `;
+
+    // Tool buttons
+    for (const tool of TOOLS) {
+      const btn = this.createBtn(tool.icon, tool.label, () => {
+        this.selectTool(tool.type);
+        callbacks.onToolSelect(tool.type);
+      });
+      this.toolBtns.push(btn);
+      this.container.appendChild(btn);
+    }
+
+    this.addSeparator();
+
+    // Color buttons
+    for (const color of COLORS) {
+      const btn = document.createElement('button');
+      btn.style.cssText = `
+        width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
+        background: ${color}; cursor: pointer; padding: 0;
+        ${color === '#ffffff' ? 'border-color: #475569;' : ''}
+      `;
+      btn.addEventListener('click', () => {
+        // Deselect all colors, select this one
+        this.container.querySelectorAll<HTMLElement>('[data-color]').forEach(
+          (el) => (el.style.borderColor = el.dataset.color === '#ffffff' ? '#475569' : 'transparent')
+        );
+        btn.style.borderColor = '#60a5fa';
+        callbacks.onColorChange(color);
+      });
+      btn.dataset.color = color;
+      this.container.appendChild(btn);
+    }
+
+    this.addSeparator();
+
+    // Undo
+    this.container.appendChild(
+      this.createBtn('\u21a9', 'Undo', callbacks.onUndo)
+    );
+
+    this.addSeparator();
+
+    // Done & Cancel
+    const doneBtn = this.createBtn('\u2713', 'Done', callbacks.onDone);
+    doneBtn.style.background = '#22c55e';
+    doneBtn.style.color = 'white';
+    this.container.appendChild(doneBtn);
+
+    const cancelBtn = this.createBtn('\u2715', 'Cancel', callbacks.onCancel);
+    cancelBtn.style.background = '#ef4444';
+    cancelBtn.style.color = 'white';
+    this.container.appendChild(cancelBtn);
+
+    parent.appendChild(this.container);
+
+    // Default selection
+    this.selectTool('arrow');
+  }
+
+  private createBtn(icon: string, title: string, onClick: () => void): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.textContent = icon;
+    btn.title = title;
+    btn.style.cssText = `
+      width: 34px; height: 34px; border: none; border-radius: 6px;
+      background: transparent; color: #94a3b8; font-size: 16px;
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+    `;
+    btn.addEventListener('mouseenter', () => {
+      if (!btn.classList.contains('tool-active')) btn.style.background = '#334155';
+    });
+    btn.addEventListener('mouseleave', () => {
+      if (!btn.classList.contains('tool-active')) btn.style.background = 'transparent';
+    });
+    btn.addEventListener('click', onClick);
+    return btn;
+  }
+
+  private addSeparator(): void {
+    const sep = document.createElement('div');
+    sep.style.cssText = 'width:1px; height:24px; background:#334155; margin:0 4px;';
+    this.container.appendChild(sep);
+  }
+
+  private selectTool(type: ToolType): void {
+    this.toolBtns.forEach((btn, i) => {
+      const isActive = TOOLS[i].type === type;
+      btn.classList.toggle('tool-active', isActive);
+      btn.style.background = isActive ? '#3b82f6' : 'transparent';
+      btn.style.color = isActive ? 'white' : '#94a3b8';
+    });
+  }
+
+  destroy(): void {
+    this.container.remove();
+  }
+}

package/src/client/annotation-mode/tools/arrow.ts

@@ -0,0 +1,57 @@
+import { BaseTool } from './base-tool.js';
+
+export class ArrowTool extends BaseTool {
+  private startX = 0;
+  private startY = 0;
+  private snapshot: ImageData | null = null;
+
+  onMouseDown(x: number, y: number): void {
+    this.drawing = true;
+    this.startX = x;
+    this.startY = y;
+    this.snapshot = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+  }
+
+  onMouseMove(x: number, y: number): void {
+    if (!this.drawing || !this.snapshot) return;
+    this.ctx.putImageData(this.snapshot, 0, 0);
+    this.drawArrow(this.startX, this.startY, x, y);
+  }
+
+  onMouseUp(x: number, y: number): void {
+    if (!this.drawing) return;
+    this.onMouseMove(x, y);
+    this.drawing = false;
+    this.snapshot = null;
+  }
+
+  private drawArrow(x1: number, y1: number, x2: number, y2: number): void {
+    const headLen = Math.max(15, this.lineWidth * 5);
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+
+    this.ctx.strokeStyle = this.color;
+    this.ctx.fillStyle = this.color;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.lineCap = 'round';
+
+    // Line
+    this.ctx.beginPath();
+    this.ctx.moveTo(x1, y1);
+    this.ctx.lineTo(x2, y2);
+    this.ctx.stroke();
+
+    // Arrowhead
+    this.ctx.beginPath();
+    this.ctx.moveTo(x2, y2);
+    this.ctx.lineTo(
+      x2 - headLen * Math.cos(angle - Math.PI / 6),
+      y2 - headLen * Math.sin(angle - Math.PI / 6)
+    );
+    this.ctx.lineTo(
+      x2 - headLen * Math.cos(angle + Math.PI / 6),
+      y2 - headLen * Math.sin(angle + Math.PI / 6)
+    );
+    this.ctx.closePath();
+    this.ctx.fill();
+  }
+}

package/src/client/annotation-mode/tools/base-tool.ts

@@ -0,0 +1,25 @@
+export abstract class BaseTool {
+  protected ctx: CanvasRenderingContext2D;
+  protected color: string;
+  protected lineWidth: number;
+  protected drawing = false;
+
+  constructor(ctx: CanvasRenderingContext2D, color: string, lineWidth: number) {
+    this.ctx = ctx;
+    this.color = color;
+    this.lineWidth = lineWidth;
+  }
+
+  /** x,y = canvas coords; cssX,cssY = CSS coords relative to wrapper */
+  abstract onMouseDown(x: number, y: number, cssX?: number, cssY?: number): void;
+  abstract onMouseMove(x: number, y: number, cssX?: number, cssY?: number): void;
+  abstract onMouseUp(x: number, y: number, cssX?: number, cssY?: number): void;
+
+  setColor(color: string): void {
+    this.color = color;
+  }
+
+  setLineWidth(width: number): void {
+    this.lineWidth = width;
+  }
+}

package/src/client/annotation-mode/tools/circle.ts

@@ -0,0 +1,37 @@
+import { BaseTool } from './base-tool.js';
+
+export class CircleTool extends BaseTool {
+  private startX = 0;
+  private startY = 0;
+  private snapshot: ImageData | null = null;
+
+  onMouseDown(x: number, y: number): void {
+    this.drawing = true;
+    this.startX = x;
+    this.startY = y;
+    this.snapshot = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+  }
+
+  onMouseMove(x: number, y: number): void {
+    if (!this.drawing || !this.snapshot) return;
+    this.ctx.putImageData(this.snapshot, 0, 0);
+
+    const rx = Math.abs(x - this.startX) / 2;
+    const ry = Math.abs(y - this.startY) / 2;
+    const cx = (this.startX + x) / 2;
+    const cy = (this.startY + y) / 2;
+
+    this.ctx.beginPath();
+    this.ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+    this.ctx.strokeStyle = this.color;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.stroke();
+  }
+
+  onMouseUp(x: number, y: number): void {
+    if (!this.drawing) return;
+    this.onMouseMove(x, y);
+    this.drawing = false;
+    this.snapshot = null;
+  }
+}