yo-bug 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yo-bug",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "MCP Server for visual test feedback in vibe coding — QA capability as a protocol",
   "type": "module",
   "bin": {

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

@@ -1,11 +1,16 @@
+import {
+  ICON_ARROW, ICON_RECT, ICON_CIRCLE, ICON_FREEHAND, ICON_TEXT,
+  ICON_UNDO, ICON_CHECK, ICON_X
+} from '../styles/icons.js';
+
 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' },
+  { type: 'arrow', icon: ICON_ARROW, label: 'Arrow' },
+  { type: 'rect', icon: ICON_RECT, label: 'Rect' },
+  { type: 'circle', icon: ICON_CIRCLE, label: 'Circle' },
+  { type: 'freehand', icon: ICON_FREEHAND, label: 'Draw' },
+  { type: 'text', icon: ICON_TEXT, label: 'Text' },
 ];
 
 const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#000000', '#ffffff'];
@@ -13,6 +18,8 @@ const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899'
 export class Toolbar {
   private container: HTMLDivElement;
   private toolBtns: HTMLButtonElement[] = [];
+  private colorBtns: HTMLButtonElement[] = [];
+  private activeColor = '#ef4444';
 
   constructor(
     parent: HTMLElement,
@@ -25,25 +32,15 @@ export class Toolbar {
     }
   ) {
     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;
-    `;
+    this.container.className = 'vf-toolbar';
 
     // Tool buttons
     for (const tool of TOOLS) {
-      const btn = this.createBtn(tool.icon, tool.label, () => {
+      const btn = document.createElement('button');
+      btn.className = 'vf-tool-btn';
+      btn.innerHTML = tool.icon;
+      btn.title = tool.label;
+      btn.addEventListener('click', () => {
         this.selectTool(tool.type);
         callbacks.onToolSelect(tool.type);
       });
@@ -56,41 +53,56 @@ export class Toolbar {
     // 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.className = `vf-color-btn${color === this.activeColor ? ' active' : ''}`;
+      btn.style.background = color;
+      if (color === '#ffffff') {
+        btn.style.borderColor = '#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';
+        this.activeColor = color;
+        this.colorBtns.forEach((b) => {
+          b.classList.remove('active');
+          // Restore white's visible border
+          if (b.style.background === 'rgb(255, 255, 255)' || b.dataset.color === '#ffffff') {
+            b.style.borderColor = '#475569';
+          }
+        });
+        btn.classList.add('active');
         callbacks.onColorChange(color);
       });
       btn.dataset.color = color;
+      this.colorBtns.push(btn);
       this.container.appendChild(btn);
     }
 
     this.addSeparator();
 
     // Undo
-    this.container.appendChild(
-      this.createBtn('\u21a9', 'Undo', callbacks.onUndo)
-    );
+    const undoBtn = document.createElement('button');
+    undoBtn.className = 'vf-tool-btn';
+    undoBtn.innerHTML = ICON_UNDO;
+    undoBtn.title = 'Undo (Ctrl+Z)';
+    undoBtn.addEventListener('click', callbacks.onUndo);
+    this.container.appendChild(undoBtn);
 
     this.addSeparator();
 
-    // Done & Cancel
-    const doneBtn = this.createBtn('\u2713', 'Done', callbacks.onDone);
+    // Done
+    const doneBtn = document.createElement('button');
+    doneBtn.className = 'vf-tool-action';
     doneBtn.style.background = '#22c55e';
-    doneBtn.style.color = 'white';
+    doneBtn.innerHTML = ICON_CHECK;
+    doneBtn.title = 'Done';
+    doneBtn.addEventListener('click', callbacks.onDone);
     this.container.appendChild(doneBtn);
 
-    const cancelBtn = this.createBtn('\u2715', 'Cancel', callbacks.onCancel);
+    // Cancel
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'vf-tool-action';
     cancelBtn.style.background = '#ef4444';
-    cancelBtn.style.color = 'white';
+    cancelBtn.innerHTML = ICON_X;
+    cancelBtn.title = 'Cancel';
+    cancelBtn.addEventListener('click', callbacks.onCancel);
     this.container.appendChild(cancelBtn);
 
     parent.appendChild(this.container);
@@ -99,37 +111,15 @@ export class Toolbar {
     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;';
+    sep.className = 'vf-toolbar-sep';
     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';
+      btn.classList.toggle('active', TOOLS[i].type === type);
     });
   }
 

package/src/client/core/i18n.ts

@@ -1,33 +1,30 @@
 const zhCN: Record<string, string> = {
   // Floating button
-  'hint.firstTime': '\u53D1\u73B0\u95EE\u9898\uFF1F\u70B9\u6211\u6216\u6309 Alt+Q \u5FEB\u901F\u6807\u8BB0',
+  'hint.firstTime': '发现问题？点我或按 Alt+E 报告',
   // Mode bar
-  'mode.quick': '\u5FEB\u901F\u6807\u8BB0',
-  'mode.quick.hint': '\u70B9\u51FB\u95EE\u9898\u5143\u7D20',
-  'mode.detail': '\u8BE6\u7EC6\u63CF\u8FF0',
-  'mode.detail.hint': '\u70B9\u51FB + \u586B\u5199',
-  'mode.screenshot': '\u622A\u56FE\u6807\u6CE8',
-  'mode.screenshot.hint': '\u6846\u9009\u533A\u57DF + \u753B',
+  'mode.element': '元素报告',
+  'mode.element.hint': '点击问题元素',
+  'mode.screenshot': '截图标注',
+  'mode.screenshot.hint': '框选区域 + 画',
   // Feedback panel
-  'panel.element.title': '\u5143\u7D20\u53CD\u9988',
-  'panel.annotation.title': '\u622A\u56FE\u53CD\u9988',
-  'panel.type': '\u95EE\u9898\u7C7B\u578B',
-  'panel.description': '\u95EE\u9898\u63CF\u8FF0',
-  'panel.description.placeholder': '\u63CF\u8FF0\u4F60\u53D1\u73B0\u7684\u95EE\u9898...',
-  'panel.cancel': '\u53D6\u6D88',
-  'panel.submit': '\u63D0\u4EA4',
+  'panel.element.title': '元素反馈',
+  'panel.annotation.title': '截图反馈',
+  'panel.type': '问题类型',
+  'panel.description': '问题描述',
+  'panel.description.placeholder': '描述你发现的问题...',
+  'panel.cancel': '取消',
+  'panel.submit': '提交',
   // Toast
-  'toast.flagged': '\u5DF2\u6807\u8BB0',
-  'toast.submitted': '\u53CD\u9988\u5DF2\u63D0\u4EA4',
-  'toast.failed': '\u63D0\u4EA4\u5931\u8D25',
-  'toast.screenshotFailed': '\u622A\u56FE\u5931\u8D25',
-  'toast.clickToFlag': '\u70B9\u51FB\u95EE\u9898\u5143\u7D20\u6765\u6807\u8BB0',
+  'toast.submitted': '反馈已提交',
+  'toast.failed': '提交失败',
+  'toast.screenshotFailed': '截图失败',
+  'toast.clickToFlag': '点击问题元素来标记',
   // Region selector
-  'region.hint': '\u62D6\u62FD\u9009\u62E9\u533A\u57DF \xB7 ESC \u53D6\u6D88',
+  'region.hint': '拖拽选择区域 · ESC 取消',
   // Verify
-  'verify.title': '\u9A8C\u8BC1\u4FEE\u590D',
-  'verify.fixed': '\u5DF2\u4FEE\u590D',
-  'verify.broken': '\u672A\u4FEE\u590D',
+  'verify.title': '验证修复',
+  'verify.fixed': '已修复',
+  'verify.broken': '未修复',
   // Problem types
   'type.bug': 'Bug',
   'type.ui-issue': 'UI',
@@ -37,11 +34,9 @@ const zhCN: Record<string, string> = {
 };
 
 const en: Record<string, string> = {
-  'hint.firstTime': 'Found a problem? Click me or press Alt+Q to flag it.',
-  'mode.quick': 'Quick',
-  'mode.quick.hint': 'Tap problem',
-  'mode.detail': 'Describe',
-  'mode.detail.hint': 'Tap + fill form',
+  'hint.firstTime': 'Found a problem? Click me or press Alt+E to report.',
+  'mode.element': 'Element',
+  'mode.element.hint': 'Tap problem element',
   'mode.screenshot': 'Screenshot',
   'mode.screenshot.hint': 'Select area + draw',
   'panel.element.title': 'Element Feedback',
@@ -51,7 +46,6 @@ const en: Record<string, string> = {
   'panel.description.placeholder': 'Describe the issue...',
   'panel.cancel': 'Cancel',
   'panel.submit': 'Submit',
-  'toast.flagged': 'Flagged!',
   'toast.submitted': 'Feedback submitted',
   'toast.failed': 'Submit failed',
   'toast.screenshotFailed': 'Screenshot failed',

package/src/client/core/sdk.ts

@@ -17,8 +17,9 @@ import { ErrorInterceptor, type ErrorEntry } from '../capture/error-interceptor.
 import { ApiClient, type FeedbackPayload } from '../api/client.js';
 import { ActionRecorder } from '../capture/action-recorder.js';
 import { t } from './i18n.js';
+import { ICON_FLAG, ICON_SCREENSHOT } from '../styles/icons.js';
 
-type Mode = 'flag' | 'detail' | 'annotate';
+type Mode = 'element' | 'annotate';
 
 export class VibeFeedback {
   private shadowHost: ShadowHost;
@@ -91,22 +92,18 @@ export class VibeFeedback {
     // Don't intercept inside our SDK panels
     if (this.isSDKElement(e.target as Element)) return;
 
-    // All shortcuts use Alt+key (or Option+key on Mac) to avoid conflicts
+    // Use e.code (physical key) — reliable across IME/keyboard layouts
     if (e.altKey) {
-      switch (e.key) {
-        case 'q': case 'Q':
+      switch (e.code) {
+        case 'KeyE':
           e.preventDefault();
-          this.enterMode('flag');
+          this.enterMode('element');
           return;
-        case 'd': case 'D':
-          e.preventDefault();
-          this.enterMode('detail');
-          return;
-        case 's': case 'S':
+        case 'KeyS':
           e.preventDefault();
           this.enterMode('annotate');
           return;
-        case 'x': case 'X':
+        case 'KeyX':
           e.preventDefault();
           if (this.active) this.exitTestMode();
           else this.toggleModeBar();
@@ -140,7 +137,7 @@ export class VibeFeedback {
     this.hideModeBar();
     this.showModeBar();
     // Highlight active button
-    const idx = mode === 'flag' ? 0 : mode === 'detail' ? 1 : 2;
+    const idx = mode === 'element' ? 0 : 1;
     this.modeBar?.querySelectorAll('.vf-mode-btn').forEach((btn, i) => {
       btn.classList.toggle('active', i === idx);
     });
@@ -171,21 +168,19 @@ export class VibeFeedback {
     this.modeBar = document.createElement('div');
     this.modeBar.className = 'vf-mode-bar';
 
-    const modes: { mode: Mode; label: string; hint: string; key: string }[] = [
-      { mode: 'flag', label: t('mode.quick'), hint: t('mode.quick.hint'), key: 'Alt+Q' },
-      { mode: 'detail', label: t('mode.detail'), hint: t('mode.detail.hint'), key: 'Alt+D' },
-      { mode: 'annotate', label: t('mode.screenshot'), hint: t('mode.screenshot.hint'), key: 'Alt+S' },
+    const modes: { mode: Mode; label: string; hint: string; key: string; icon: string }[] = [
+      { mode: 'element', label: t('mode.element'), hint: t('mode.element.hint'), key: 'E', icon: ICON_FLAG },
+      { mode: 'annotate', label: t('mode.screenshot'), hint: t('mode.screenshot.hint'), key: 'S', icon: ICON_SCREENSHOT },
     ];
 
     for (const m of modes) {
       const btn = document.createElement('button');
       btn.className = `vf-mode-btn${this.mode === m.mode ? ' active' : ''}`;
       btn.innerHTML = `
-        <div style="display:flex;align-items:center;gap:6px;font-size:13px">
-          ${m.label}
-          <span style="font-size:10px;opacity:0.4;background:rgba(255,255,255,0.1);padding:1px 5px;border-radius:3px;">${m.key}</span>
-        </div>
-        <div style="font-size:10px;opacity:0.5;margin-top:1px">${m.hint}</div>
+        ${m.icon}
+        <span class="vf-mode-label">${m.label}</span>
+        <span class="vf-mode-hint">${m.hint}</span>
+        <span class="vf-mode-key">${m.key}</span>
       `;
       btn.addEventListener('click', () => {
         this.mode = m.mode;
@@ -208,7 +203,7 @@ export class VibeFeedback {
     this.highlighter.deactivate();
     if (!this.mode) return;
 
-    if (this.mode === 'flag' || this.mode === 'detail') {
+    if (this.mode === 'element') {
       this.highlighter.activate();
     } else {
       this.startAnnotation();
@@ -227,37 +222,15 @@ export class VibeFeedback {
   // ──────── Element selected ────────
   private onElementSelected(el: Element): void {
     this.selectedElement = inspectElement(el);
-
-    if (this.mode === 'flag') {
-      this.quickFlag();
-    } else {
-      this.highlighter.deactivate();
-      this.hideModeBar();
-      this.panel.showForElement(this.selectedElement);
-    }
-  }
-
-  // ──────── Quick flag ────────
-  private async quickFlag(): Promise<void> {
-    const payload = this.buildPayload('bug', '');
-    try {
-      const { id } = await this.apiClient.submitFeedback(payload);
-      showToast(this.shadowHost.shadow, `${t('toast.flagged')} (${id})`);
-
-      if (this.activeChecklistItemId !== null) {
-        await this.linkFeedbackToChecklist(id, this.activeChecklistItemId);
-        this.activeChecklistItemId = null;
-      }
-    } catch {
-      showToast(this.shadowHost.shadow, t('toast.failed'), true);
-    }
-    this.selectedElement = null;
+    this.highlighter.deactivate();
+    this.hideModeBar();
+    this.panel.showForElement(this.selectedElement);
   }
 
   // ──────── Checklist integration ────────
   private onChecklistFail(itemId: number): void {
     this.activeChecklistItemId = itemId;
-    this.enterMode('flag');
+    this.enterMode('element');
     showToast(this.shadowHost.shadow, t('toast.clickToFlag'));
   }
 

package/src/client/styles/icons.ts

@@ -0,0 +1,85 @@
+/** Inline SVG icons — crisp at any size, no external dependencies */
+
+// yo-bug brand icon — cute beetle
+export const ICON_BUG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <ellipse cx="12" cy="15" rx="5.5" ry="6.5"/>
+  <circle cx="12" cy="6" r="2.5"/>
+  <line x1="12" y1="8.5" x2="12" y2="21.5"/>
+  <path d="M6.5 12L3 10"/>
+  <path d="M17.5 12L21 10"/>
+  <path d="M6.5 16L3 18"/>
+  <path d="M17.5 16L21 18"/>
+  <path d="M10 4L8 1.5"/>
+  <path d="M14 4L16 1.5"/>
+</svg>`;
+
+export const ICON_CLOSE = `<svg class="vf-close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+  <line x1="6" y1="6" x2="18" y2="18"/>
+  <line x1="18" y1="6" x2="6" y2="18"/>
+</svg>`;
+
+// Mode icons
+export const ICON_FLAG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/>
+  <line x1="4" y1="22" x2="4" y2="15"/>
+</svg>`;
+
+export const ICON_DETAIL = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+  <polyline points="14 2 14 8 20 8"/>
+  <line x1="16" y1="13" x2="8" y2="13"/>
+  <line x1="16" y1="17" x2="8" y2="17"/>
+  <polyline points="10 9 9 9 8 9"/>
+</svg>`;
+
+export const ICON_SCREENSHOT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+  <circle cx="12" cy="13" r="4"/>
+</svg>`;
+
+// Toolbar icons
+export const ICON_ARROW = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="5" y1="19" x2="19" y2="5"/>
+  <polyline points="12 5 19 5 19 12"/>
+</svg>`;
+
+export const ICON_RECT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+</svg>`;
+
+export const ICON_CIRCLE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+</svg>`;
+
+export const ICON_FREEHAND = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 19l7-7 3 3-7 7-3-3z"/>
+  <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
+  <path d="M2 2l7.586 7.586"/>
+  <circle cx="11" cy="11" r="2"/>
+</svg>`;
+
+export const ICON_TEXT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="4 7 4 4 20 4 20 7"/>
+  <line x1="9" y1="20" x2="15" y2="20"/>
+  <line x1="12" y1="4" x2="12" y2="20"/>
+</svg>`;
+
+export const ICON_UNDO = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="1 4 1 10 7 10"/>
+  <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+</svg>`;
+
+export const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="4 12 10 18 20 6"/>
+</svg>`;
+
+export const ICON_X = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+  <line x1="6" y1="6" x2="18" y2="18"/>
+  <line x1="18" y1="6" x2="6" y2="18"/>
+</svg>`;
+
+// Verify icon
+export const ICON_VERIFY = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+  <polyline points="22 4 12 14.01 9 11.01"/>
+</svg>`;