yo-bug 0.1.0

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

@@ -0,0 +1,23 @@
+import { BaseTool } from './base-tool.js';
+
+export class FreehandTool extends BaseTool {
+  onMouseDown(x: number, y: number): void {
+    this.drawing = true;
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y);
+    this.ctx.strokeStyle = this.color;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.lineCap = 'round';
+    this.ctx.lineJoin = 'round';
+  }
+
+  onMouseMove(x: number, y: number): void {
+    if (!this.drawing) return;
+    this.ctx.lineTo(x, y);
+    this.ctx.stroke();
+  }
+
+  onMouseUp(_x: number, _y: number): void {
+    this.drawing = false;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { BaseTool } from './base-tool.js';
+
+export class RectTool 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.ctx.strokeStyle = this.color;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.strokeRect(
+      this.startX, this.startY,
+      x - this.startX, y - this.startY
+    );
+  }
+
+  onMouseUp(x: number, y: number): void {
+    if (!this.drawing) return;
+    this.onMouseMove(x, y);
+    this.drawing = false;
+    this.snapshot = null;
+  }
+}

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

@@ -0,0 +1,93 @@
+import { BaseTool } from './base-tool.js';
+
+export class TextTool extends BaseTool {
+  private input: HTMLInputElement | null = null;
+  private container: HTMLElement;
+
+  constructor(
+    ctx: CanvasRenderingContext2D,
+    color: string,
+    lineWidth: number,
+    container: HTMLElement
+  ) {
+    super(ctx, color, lineWidth);
+    this.container = container;
+  }
+
+  onMouseDown(x: number, y: number, cssX?: number, cssY?: number): void {
+    this.removeInput();
+
+    // Use CSS coordinates for input positioning, canvas coordinates for drawing
+    const posX = cssX ?? x;
+    const posY = cssY ?? y;
+
+    this.input = document.createElement('input');
+    this.input.type = 'text';
+    this.input.placeholder = 'Type here...';
+    this.input.style.cssText = `
+      position: absolute;
+      left: ${posX}px;
+      top: ${posY - 12}px;
+      min-width: 120px;
+      background: rgba(0,0,0,0.8);
+      border: 2px solid ${this.color};
+      color: ${this.color};
+      font-size: 16px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      outline: none;
+      z-index: 10;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    `;
+
+    // Prevent canvas editor from receiving keyboard events
+    this.input.addEventListener('keydown', (e) => {
+      e.stopPropagation();
+      if (e.key === 'Enter') {
+        this.commitText(x, y);
+      } else if (e.key === 'Escape') {
+        this.removeInput();
+      }
+    });
+
+    this.input.addEventListener('blur', () => {
+      this.commitText(x, y);
+    });
+
+    this.container.appendChild(this.input);
+    // Focus after a tick to ensure it's in the DOM
+    requestAnimationFrame(() => this.input?.focus());
+  }
+
+  onMouseMove(): void {}
+  onMouseUp(): void {}
+
+  private commitText(canvasX: number, canvasY: number): void {
+    if (!this.input) return;
+    const text = this.input.value.trim();
+    if (text) {
+      const fontSize = Math.max(18, this.lineWidth * 6);
+      this.ctx.font = `bold ${fontSize}px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
+      this.ctx.fillStyle = this.color;
+      // Draw shadow for readability
+      this.ctx.shadowColor = 'rgba(0,0,0,0.5)';
+      this.ctx.shadowBlur = 3;
+      this.ctx.shadowOffsetX = 1;
+      this.ctx.shadowOffsetY = 1;
+      this.ctx.fillText(text, canvasX, canvasY);
+      // Reset shadow
+      this.ctx.shadowColor = 'transparent';
+      this.ctx.shadowBlur = 0;
+      this.ctx.shadowOffsetX = 0;
+      this.ctx.shadowOffsetY = 0;
+    }
+    this.removeInput();
+  }
+
+  private removeInput(): void {
+    if (this.input) {
+      this.input.remove();
+      this.input = null;
+    }
+  }
+}

package/src/client/api/client.ts

@@ -0,0 +1,48 @@
+export interface FeedbackPayload {
+  mode: 'element' | 'annotation';
+  problemType: string;
+  description: string;
+  element?: any;
+  pageUrl: string;
+  pageTitle: string;
+  viewport: { width: number; height: number };
+  userAgent: string;
+  timestamp: number;
+  consoleErrors: any[];
+  networkErrors: any[];
+  unhandledErrors: any[];
+  actionSteps?: any[];
+}
+
+export class ApiClient {
+  private baseUrl: string;
+
+  constructor() {
+    // SDK is served from the proxy, so use same origin
+    this.baseUrl = window.location.origin;
+  }
+
+  async submitFeedback(
+    payload: FeedbackPayload,
+    screenshotDataUrl?: string
+  ): Promise<{ id: string }> {
+    const formData = new FormData();
+    formData.append('feedback', JSON.stringify(payload));
+
+    if (screenshotDataUrl) {
+      const blob = await (await fetch(screenshotDataUrl)).blob();
+      formData.append('screenshot', blob, 'annotation.png');
+    }
+
+    const res = await fetch(`${this.baseUrl}/api/feedback`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!res.ok) {
+      throw new Error(`Submit failed: ${res.status}`);
+    }
+    return res.json();
+  }
+
+}

package/src/client/capture/action-recorder.ts

@@ -0,0 +1,157 @@
+export interface ActionStep {
+  type: 'click' | 'input' | 'navigate' | 'scroll' | 'keypress';
+  timestamp: number;
+  target?: string;       // CSS selector
+  tagName?: string;
+  text?: string;         // button text / input value / key
+  url?: string;          // for navigate
+  position?: { x: number; y: number };
+  elapsed?: number;      // ms since last step
+}
+
+export class ActionRecorder {
+  private steps: ActionStep[] = [];
+  private recording = false;
+  private lastTimestamp = 0;
+  private maxSteps = 100;
+
+  // Bound handlers
+  private clickHandler: (e: MouseEvent) => void;
+  private inputHandler: (e: Event) => void;
+  private keyHandler: (e: KeyboardEvent) => void;
+  private navHandler: () => void;
+
+  constructor() {
+    this.clickHandler = (e) => this.onClick(e);
+    this.inputHandler = (e) => this.onInput(e);
+    this.keyHandler = (e) => this.onKeypress(e);
+    this.navHandler = () => this.onNavigate();
+  }
+
+  start(): void {
+    if (this.recording) return;
+    this.recording = true;
+    this.steps = [];
+    this.lastTimestamp = Date.now();
+
+    document.addEventListener('click', this.clickHandler, true);
+    document.addEventListener('change', this.inputHandler, true);
+    document.addEventListener('keydown', this.keyHandler, true);
+    window.addEventListener('popstate', this.navHandler);
+    window.addEventListener('hashchange', this.navHandler);
+  }
+
+  stop(): ActionStep[] {
+    this.recording = false;
+    document.removeEventListener('click', this.clickHandler, true);
+    document.removeEventListener('change', this.inputHandler, true);
+    document.removeEventListener('keydown', this.keyHandler, true);
+    window.removeEventListener('popstate', this.navHandler);
+    window.removeEventListener('hashchange', this.navHandler);
+    return this.getSteps();
+  }
+
+  getSteps(): ActionStep[] {
+    return [...this.steps];
+  }
+
+  isRecording(): boolean {
+    return this.recording;
+  }
+
+  private addStep(step: ActionStep): void {
+    const now = Date.now();
+    step.elapsed = now - this.lastTimestamp;
+    this.lastTimestamp = now;
+    this.steps.push(step);
+    if (this.steps.length > this.maxSteps) this.steps.shift();
+  }
+
+  private onClick(e: MouseEvent): void {
+    const el = e.target as HTMLElement;
+    if (!el || this.isSDKElement(el)) return;
+
+    this.addStep({
+      type: 'click',
+      timestamp: Date.now(),
+      target: briefSelector(el),
+      tagName: el.tagName.toLowerCase(),
+      text: getElementText(el),
+      position: { x: Math.round(e.clientX), y: Math.round(e.clientY) },
+    });
+  }
+
+  private onInput(e: Event): void {
+    const el = e.target as HTMLInputElement;
+    if (!el || this.isSDKElement(el)) return;
+
+    const value = el.type === 'password' ? '••••' : (el.value || '').slice(0, 50);
+    this.addStep({
+      type: 'input',
+      timestamp: Date.now(),
+      target: briefSelector(el),
+      tagName: el.tagName.toLowerCase(),
+      text: value,
+    });
+  }
+
+  private onKeypress(e: KeyboardEvent): void {
+    // Only record special keys, not every character
+    if (!['Enter', 'Escape', 'Tab', 'Backspace', 'Delete'].includes(e.key) &&
+        !e.ctrlKey && !e.metaKey && !e.altKey) return;
+
+    const el = e.target as HTMLElement;
+    if (this.isSDKElement(el)) return;
+
+    const combo = [
+      e.ctrlKey ? 'Ctrl' : '',
+      e.metaKey ? 'Cmd' : '',
+      e.altKey ? 'Alt' : '',
+      e.shiftKey ? 'Shift' : '',
+      e.key,
+    ].filter(Boolean).join('+');
+
+    this.addStep({
+      type: 'keypress',
+      timestamp: Date.now(),
+      target: briefSelector(el),
+      text: combo,
+    });
+  }
+
+  private onNavigate(): void {
+    this.addStep({
+      type: 'navigate',
+      timestamp: Date.now(),
+      url: window.location.href,
+    });
+  }
+
+  private isSDKElement(el: Element): boolean {
+    let current: Element | null = el;
+    while (current) {
+      if (current.id === 'vibe-feedback-host') return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+}
+
+function briefSelector(el: Element): string {
+  if (el.id) return `#${el.id}`;
+  const testId = el.getAttribute('data-testid');
+  if (testId) return `[data-testid="${testId}"]`;
+  const cls = el.className && typeof el.className === 'string'
+    ? '.' + el.className.trim().split(/\s+/).slice(0, 2).join('.')
+    : '';
+  return `${el.tagName.toLowerCase()}${cls}`;
+}
+
+function getElementText(el: HTMLElement): string {
+  // Get meaningful text: button label, link text, placeholder, etc.
+  const text = el.textContent?.trim() ||
+    el.getAttribute('aria-label') ||
+    el.getAttribute('placeholder') ||
+    el.getAttribute('title') || '';
+  return text.slice(0, 60);
+}

package/src/client/capture/console-interceptor.ts

@@ -0,0 +1,65 @@
+import { ContextBuffer } from './context-buffer.js';
+
+export interface ConsoleEntry {
+  type: 'error' | 'warn';
+  message: string;
+  stack?: string;
+  timestamp: number;
+}
+
+export class ConsoleInterceptor {
+  private origError!: typeof console.error;
+  private origWarn!: typeof console.warn;
+  private buffer: ContextBuffer<ConsoleEntry>;
+  private installed = false;
+
+  constructor(buffer: ContextBuffer<ConsoleEntry>) {
+    this.buffer = buffer;
+  }
+
+  install(): void {
+    if (this.installed) return;
+    this.installed = true;
+
+    this.origError = console.error;
+    this.origWarn = console.warn;
+
+    console.error = (...args: any[]) => {
+      this.buffer.push({
+        type: 'error',
+        message: args.map(serialize).join(' '),
+        stack: new Error().stack,
+        timestamp: Date.now(),
+      });
+      this.origError.apply(console, args);
+    };
+
+    console.warn = (...args: any[]) => {
+      this.buffer.push({
+        type: 'warn',
+        message: args.map(serialize).join(' '),
+        timestamp: Date.now(),
+      });
+      this.origWarn.apply(console, args);
+    };
+  }
+
+  uninstall(): void {
+    if (!this.installed) return;
+    console.error = this.origError;
+    console.warn = this.origWarn;
+    this.installed = false;
+  }
+}
+
+function serialize(arg: any): string {
+  if (arg instanceof Error) return `${arg.name}: ${arg.message}\n${arg.stack}`;
+  if (typeof arg === 'object') {
+    try {
+      return JSON.stringify(arg, null, 0).slice(0, 500);
+    } catch {
+      return String(arg);
+    }
+  }
+  return String(arg);
+}

package/src/client/capture/context-buffer.ts

@@ -0,0 +1,23 @@
+export class ContextBuffer<T> {
+  private items: T[] = [];
+  private maxSize: number;
+
+  constructor(maxSize = 50) {
+    this.maxSize = maxSize;
+  }
+
+  push(item: T): void {
+    this.items.push(item);
+    if (this.items.length > this.maxSize) {
+      this.items.shift();
+    }
+  }
+
+  getAll(): T[] {
+    return [...this.items];
+  }
+
+  clear(): void {
+    this.items = [];
+  }
+}

package/src/client/capture/error-interceptor.ts

@@ -0,0 +1,52 @@
+import { ContextBuffer } from './context-buffer.js';
+
+export interface ErrorEntry {
+  type: 'unhandled-error' | 'unhandled-rejection';
+  message: string;
+  stack?: string;
+  timestamp: number;
+}
+
+export class ErrorInterceptor {
+  private buffer: ContextBuffer<ErrorEntry>;
+  private errorHandler!: (e: ErrorEvent) => void;
+  private rejectionHandler!: (e: PromiseRejectionEvent) => void;
+  private installed = false;
+
+  constructor(buffer: ContextBuffer<ErrorEntry>) {
+    this.buffer = buffer;
+  }
+
+  install(): void {
+    if (this.installed) return;
+    this.installed = true;
+
+    this.errorHandler = (e: ErrorEvent) => {
+      this.buffer.push({
+        type: 'unhandled-error',
+        message: e.message,
+        stack: e.error?.stack,
+        timestamp: Date.now(),
+      });
+    };
+
+    this.rejectionHandler = (e: PromiseRejectionEvent) => {
+      this.buffer.push({
+        type: 'unhandled-rejection',
+        message: String(e.reason),
+        stack: e.reason?.stack,
+        timestamp: Date.now(),
+      });
+    };
+
+    window.addEventListener('error', this.errorHandler);
+    window.addEventListener('unhandledrejection', this.rejectionHandler);
+  }
+
+  uninstall(): void {
+    if (!this.installed) return;
+    window.removeEventListener('error', this.errorHandler);
+    window.removeEventListener('unhandledrejection', this.rejectionHandler);
+    this.installed = false;
+  }
+}

package/src/client/capture/network-interceptor.ts

@@ -0,0 +1,143 @@
+import { ContextBuffer } from './context-buffer.js';
+
+export interface NetworkEntry {
+  type: 'fetch' | 'xhr';
+  method: string;
+  url: string;
+  status: number;
+  statusText: string;
+  duration: number;
+  timestamp: number;
+  error?: string;
+}
+
+/** Check if a URL belongs to the vibe-feedback SDK itself */
+function isVibeFeedbackUrl(url: string): boolean {
+  try {
+    const u = new URL(url, window.location.origin);
+    return u.pathname === '/api/feedback' ||
+           u.pathname.startsWith('/api/feedback/') ||
+           u.pathname === '/api/checklist' ||
+           u.pathname.startsWith('/api/checklist/') ||
+           u.pathname === '/api/inspection' ||
+           u.pathname === '/vibe-feedback.js';
+  } catch {
+    return false;
+  }
+}
+
+export class NetworkInterceptor {
+  private origFetch!: typeof window.fetch;
+  private origXHROpen!: typeof XMLHttpRequest.prototype.open;
+  private origXHRSend!: typeof XMLHttpRequest.prototype.send;
+  private buffer: ContextBuffer<NetworkEntry>;
+  private installed = false;
+
+  constructor(buffer: ContextBuffer<NetworkEntry>) {
+    this.buffer = buffer;
+  }
+
+  install(): void {
+    if (this.installed) return;
+    this.installed = true;
+    this.patchFetch();
+    this.patchXHR();
+  }
+
+  uninstall(): void {
+    if (!this.installed) return;
+    window.fetch = this.origFetch;
+    XMLHttpRequest.prototype.open = this.origXHROpen;
+    XMLHttpRequest.prototype.send = this.origXHRSend;
+    this.installed = false;
+  }
+
+  private patchFetch(): void {
+    this.origFetch = window.fetch;
+    const buffer = this.buffer;
+    const origFetch = this.origFetch;
+
+    window.fetch = async function (input, init?) {
+      const url =
+        typeof input === 'string'
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input instanceof Request
+              ? input.url
+              : String(input);
+      const method = init?.method || 'GET';
+
+      // Skip our own requests
+      if (isVibeFeedbackUrl(url)) {
+        return origFetch.call(window, input, init);
+      }
+
+      const start = Date.now();
+      try {
+        const response = await origFetch.call(window, input, init);
+        if (!response.ok) {
+          buffer.push({
+            type: 'fetch',
+            method,
+            url: url.slice(0, 200),
+            status: response.status,
+            statusText: response.statusText,
+            duration: Date.now() - start,
+            timestamp: Date.now(),
+          });
+        }
+        return response;
+      } catch (err) {
+        buffer.push({
+          type: 'fetch',
+          method,
+          url: url.slice(0, 200),
+          status: 0,
+          statusText: 'Network Error',
+          duration: Date.now() - start,
+          timestamp: Date.now(),
+          error: String(err),
+        });
+        throw err;
+      }
+    };
+  }
+
+  private patchXHR(): void {
+    this.origXHROpen = XMLHttpRequest.prototype.open;
+    this.origXHRSend = XMLHttpRequest.prototype.send;
+    const buffer = this.buffer;
+    const origOpen = this.origXHROpen;
+    const origSend = this.origXHRSend;
+
+    XMLHttpRequest.prototype.open = function (method: string, url: string | URL, ...rest: any[]) {
+      (this as any).__vf_method = method;
+      (this as any).__vf_url = typeof url === 'string' ? url : url.href;
+      return origOpen.apply(this, [method, url, ...rest] as any);
+    };
+
+    XMLHttpRequest.prototype.send = function (body?: any) {
+      const url = (this as any).__vf_url || '';
+      if (isVibeFeedbackUrl(url)) {
+        return origSend.call(this, body);
+      }
+
+      const start = Date.now();
+      this.addEventListener('loadend', () => {
+        if (this.status >= 400 || this.status === 0) {
+          buffer.push({
+            type: 'xhr',
+            method: (this as any).__vf_method || 'GET',
+            url: url.slice(0, 200),
+            status: this.status,
+            statusText: this.statusText,
+            duration: Date.now() - start,
+            timestamp: Date.now(),
+          });
+        }
+      });
+      return origSend.call(this, body);
+    };
+  }
+}

package/src/client/core/event-bus.ts

@@ -0,0 +1,20 @@
+type Handler = (...args: any[]) => void;
+
+export class EventBus {
+  private handlers = new Map<string, Set<Handler>>();
+
+  on(event: string, handler: Handler): void {
+    if (!this.handlers.has(event)) {
+      this.handlers.set(event, new Set());
+    }
+    this.handlers.get(event)!.add(handler);
+  }
+
+  off(event: string, handler: Handler): void {
+    this.handlers.get(event)?.delete(handler);
+  }
+
+  emit(event: string, ...args: any[]): void {
+    this.handlers.get(event)?.forEach((h) => h(...args));
+  }
+}