yo-bug 0.1.4 → 0.2.0

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

@@ -1,7 +1,7 @@
 export class ChecklistPanel {
   private container: HTMLDivElement;
-  private listEl: HTMLDivElement;
   private headerEl: HTMLDivElement | null = null;
+  private itemsWrap: HTMLDivElement | null = null;
   private pollTimer: ReturnType<typeof setInterval> | null = null;
   private visible = false;
   private collapsed = false;
@@ -15,20 +15,8 @@ export class ChecklistPanel {
     this.onItemFail = onItemFail || null;
     this.baseUrl = window.location.origin;
     this.container = document.createElement('div');
-    this.container.style.cssText = `
-      position: fixed; top: 16px; right: 80px; width: 300px;
-      max-height: 70vh; overflow: hidden;
-      background: #1e293b; border-radius: 10px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.35);
-      pointer-events: auto; display: none;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      font-size: 13px; color: #e2e8f0; z-index: 2147483647;
-      transition: height 0.2s;
-    `;
-
-    this.listEl = document.createElement('div');
-    this.listEl.style.cssText = `max-height: calc(70vh - 44px); overflow-y: auto;`;
-    this.container.appendChild(this.listEl);
+    this.container.className = 'vf-checklist';
+    this.container.style.display = 'none';
     shadowRoot.appendChild(this.container);
   }
 
@@ -51,7 +39,7 @@ export class ChecklistPanel {
       if (data.items && data.items.length > 0) {
         this.render(data);
         if (!this.visible) {
-          this.container.style.display = 'block';
+          this.container.style.display = '';
           this.visible = true;
         }
       } else if (this.visible) {
@@ -66,29 +54,25 @@ export class ChecklistPanel {
     const failed = data.items.filter((i) => i.status === 'failed').length;
     const total = data.items.length;
 
-    this.listEl.innerHTML = '';
+    this.container.innerHTML = '';
 
     // Header — draggable + collapsible
     const header = document.createElement('div');
-    header.style.cssText = `
-      padding: 10px 14px; border-bottom: 1px solid #334155;
-      display: flex; justify-content: space-between; align-items: center;
-      cursor: move; user-select: none;
-    `;
+    header.className = 'vf-checklist-header';
 
     const titleWrap = document.createElement('div');
-    titleWrap.style.cssText = `display:flex;align-items:center;gap:8px;`;
+    titleWrap.className = 'vf-checklist-title-wrap';
 
     const title = document.createElement('span');
-    title.style.cssText = `font-weight:600;color:white;font-size:13px;`;
+    title.className = 'vf-checklist-title';
     title.textContent = data.title;
 
     const badge = document.createElement('span');
-    badge.style.cssText = `font-size:11px;color:#94a3b8;`;
+    badge.className = 'vf-checklist-badge';
     badge.textContent = `${passed}/${total}`;
     if (failed > 0) {
       const failBadge = document.createElement('span');
-      failBadge.style.cssText = `color:#ef4444;margin-left:4px;`;
+      failBadge.className = 'vf-checklist-badge-fail';
       failBadge.textContent = `${failed} fail`;
       badge.appendChild(failBadge);
     }
@@ -99,15 +83,12 @@ export class ChecklistPanel {
 
     // Collapse toggle
     const toggleBtn = document.createElement('button');
-    toggleBtn.style.cssText = `
-      background:none; border:none; color:#94a3b8; cursor:pointer;
-      font-size:16px; padding:0 4px; line-height:1;
-    `;
+    toggleBtn.className = 'vf-checklist-toggle';
     toggleBtn.textContent = this.collapsed ? '\u25BC' : '\u25B2';
     toggleBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       this.collapsed = !this.collapsed;
-      this.listEl.querySelector('.vf-checklist-items')?.toggleAttribute('hidden', this.collapsed);
+      if (this.itemsWrap) this.itemsWrap.hidden = this.collapsed;
       toggleBtn.textContent = this.collapsed ? '\u25BC' : '\u25B2';
     });
     header.appendChild(toggleBtn);
@@ -133,66 +114,58 @@ export class ChecklistPanel {
       document.addEventListener('mouseup', onUp);
     });
 
-    this.listEl.appendChild(header);
+    this.container.appendChild(header);
     this.headerEl = header;
 
     // Progress bar
     const progressWrap = document.createElement('div');
-    progressWrap.style.cssText = `height:2px;background:#334155;`;
+    progressWrap.className = 'vf-checklist-progress';
     const pct = total > 0 ? (passed / total) * 100 : 0;
     const progressBar = document.createElement('div');
-    progressBar.style.cssText = `height:100%;width:${pct}%;background:#22c55e;transition:width 0.3s;`;
+    progressBar.className = 'vf-checklist-progress-bar';
+    progressBar.style.width = `${pct}%`;
     progressWrap.appendChild(progressBar);
-    this.listEl.appendChild(progressWrap);
+    this.container.appendChild(progressWrap);
 
     // Items container (collapsible)
-    const itemsWrap = document.createElement('div');
-    itemsWrap.className = 'vf-checklist-items';
-    if (this.collapsed) itemsWrap.hidden = true;
+    this.itemsWrap = document.createElement('div');
+    this.itemsWrap.className = 'vf-checklist-items';
+    if (this.collapsed) this.itemsWrap.hidden = true;
 
     for (const item of data.items) {
       const row = document.createElement('div');
-      row.style.cssText = `
-        padding: 8px 14px; border-bottom: 1px solid #0f172a;
-        display: flex; align-items: flex-start; gap: 8px;
-      `;
+      row.className = 'vf-checklist-row';
 
       // Status buttons
       const controls = document.createElement('div');
-      controls.style.cssText = `display:flex;gap:3px;flex-shrink:0;margin-top:2px;`;
+      controls.className = 'vf-checklist-controls';
 
-      controls.appendChild(this.createStatusBtn('\u2713', '#22c55e', item.status === 'passed', () => {
+      controls.appendChild(this.createStatusBtn('\u2713', 'pass', item.status === 'passed', () => {
         this.updateItem(item.id, 'passed');
       }));
-      controls.appendChild(this.createStatusBtn('\u2717', '#ef4444', item.status === 'failed', () => {
+      controls.appendChild(this.createStatusBtn('\u2717', 'fail', item.status === 'failed', () => {
         this.promptFeedback(item.id);
       }));
       row.appendChild(controls);
 
       // Content
       const text = document.createElement('div');
-      text.style.cssText = `flex:1;line-height:1.4;font-size:12px;`;
+      text.className = 'vf-checklist-text';
 
       // Badges row
       const badges = document.createElement('div');
-      badges.style.cssText = `display:flex;gap:4px;margin-bottom:2px;flex-wrap:wrap;`;
+      badges.className = 'vf-checklist-badges';
 
       if (item.priority === 'critical') {
         const badge = document.createElement('span');
-        badge.style.cssText = `
-          display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;
-          background:rgba(239,68,68,0.15);color:#ef4444;font-weight:600;
-        `;
+        badge.className = 'vf-badge vf-badge-critical';
         badge.textContent = 'CRITICAL';
         badges.appendChild(badge);
       }
 
       if (item.dimension) {
         const dimBadge = document.createElement('span');
-        dimBadge.style.cssText = `
-          display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;
-          background:rgba(59,130,246,0.12);color:#60a5fa;
-        `;
+        dimBadge.className = 'vf-badge vf-badge-dim';
         dimBadge.textContent = item.dimension;
         badges.appendChild(dimBadge);
       }
@@ -203,59 +176,44 @@ export class ChecklistPanel {
 
       // Step (what to do)
       const stepText = document.createElement('span');
+      stepText.className = `vf-checklist-step${item.status === 'passed' ? ' passed' : item.status === 'failed' ? ' failed' : ''}`;
       stepText.textContent = item.step || item.text || '';
       text.appendChild(stepText);
 
       // Expected result
       if (item.expect) {
         const expectEl = document.createElement('div');
-        expectEl.style.cssText = `font-size:11px;color:#94a3b8;margin-top:2px;`;
+        expectEl.className = 'vf-checklist-expect';
         expectEl.textContent = `\u2192 ${item.expect}`;
         text.appendChild(expectEl);
       }
 
-      if (item.status === 'passed') {
-        stepText.style.color = '#22c55e';
-        stepText.style.textDecoration = 'line-through';
-        stepText.style.opacity = '0.6';
-      } else if (item.status === 'failed') {
-        stepText.style.color = '#ef4444';
-      }
-
       if (item.feedback) {
         const fb = document.createElement('div');
-        fb.style.cssText = `font-size:11px;color:#f59e0b;margin-top:3px;`;
+        fb.className = 'vf-checklist-feedback';
         fb.textContent = item.feedback;
         text.appendChild(fb);
       }
 
       row.appendChild(text);
-      itemsWrap.appendChild(row);
+      this.itemsWrap.appendChild(row);
     }
 
-    this.listEl.appendChild(itemsWrap);
+    this.container.appendChild(this.itemsWrap);
   }
 
-  private createStatusBtn(icon: string, color: string, active: boolean, onClick: () => void): HTMLButtonElement {
+  private createStatusBtn(icon: string, type: 'pass' | 'fail', active: boolean, onClick: () => void): HTMLButtonElement {
     const btn = document.createElement('button');
     btn.textContent = icon;
-    btn.style.cssText = `
-      width: 22px; height: 22px; border-radius: 4px; border: 1px solid ${color};
-      background: ${active ? color : 'transparent'};
-      color: ${active ? 'white' : color};
-      font-size: 12px; cursor: pointer; display: flex;
-      align-items: center; justify-content: center; padding: 0;
-    `;
+    btn.className = `vf-check-btn vf-check-btn-${type}${active ? ' active' : ''}`;
     btn.addEventListener('click', onClick);
     return btn;
   }
 
   private promptFeedback(itemId: number): void {
     if (this.onItemFail) {
-      // Enter feedback mode — SDK will handle element selection/annotation
       this.onItemFail(itemId);
     } else {
-      // Fallback: simple prompt
       const feedback = prompt('Describe the issue (optional):') || '';
       this.updateItem(itemId, 'failed', feedback);
     }

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

@@ -1,5 +1,6 @@
 import type { ElementInfo } from '../element-mode/inspector.js';
 import { t } from '../core/i18n.js';
+import { ICON_FLAG, ICON_SCREENSHOT } from '../styles/icons.js';
 
 const PROBLEM_TYPES = [
   { value: 'bug', labelKey: 'type.bug' },
@@ -52,7 +53,12 @@ export class FeedbackPanel {
     // Title
     const title = document.createElement('div');
     title.className = 'vf-panel-title';
-    title.textContent = mode === 'element' ? t('panel.element.title') : t('panel.annotation.title');
+    const titleIcon = document.createElement('span');
+    titleIcon.innerHTML = mode === 'element' ? ICON_FLAG : ICON_SCREENSHOT;
+    title.appendChild(titleIcon);
+    const titleText = document.createElement('span');
+    titleText.textContent = mode === 'element' ? t('panel.element.title') : t('panel.annotation.title');
+    title.appendChild(titleText);
     this.container.appendChild(title);
 
     // Element info

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

@@ -1,4 +1,5 @@
 import { t } from '../core/i18n.js';
+import { ICON_BUG, ICON_CLOSE } from '../styles/icons.js';
 
 const SEEN_KEY = 'yo-bug-hint-seen';
 
@@ -10,7 +11,7 @@ export class FloatingButton {
   constructor(shadowRoot: ShadowRoot, private onClick: () => void) {
     this.el = document.createElement('button');
     this.el.className = 'vf-fab';
-    this.el.innerHTML = '👁'; // eye
+    this.el.innerHTML = ICON_BUG;
     this.el.title = 'yo-bug';
     this.el.addEventListener('click', () => {
       this.dismissHint();
@@ -19,23 +20,8 @@ export class FloatingButton {
 
     // 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.recDot.className = 'vf-rec-dot';
+
     this.el.appendChild(this.recDot);
     shadowRoot.appendChild(this.el);
 
@@ -46,7 +32,7 @@ export class FloatingButton {
   setActive(active: boolean): void {
     this.active = active;
     this.el.classList.toggle('active', active);
-    this.el.innerHTML = active ? '✕' : '👁';
+    this.el.innerHTML = active ? ICON_CLOSE : ICON_BUG;
     this.el.appendChild(this.recDot);
   }
 
@@ -66,25 +52,11 @@ export class FloatingButton {
     } 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.className = 'vf-hint';
     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);
-    `;
+    arrow.className = 'vf-hint-arrow';
     this.hint.appendChild(arrow);
 
     shadowRoot.appendChild(this.hint);

package/src/client/ui/toast.ts

@@ -6,7 +6,18 @@ export function showToast(
 ): void {
   const el = document.createElement('div');
   el.className = `vf-toast${isError ? ' error' : ''}`;
-  el.textContent = message;
+
+  // Icon
+  const icon = document.createElement('span');
+  icon.style.cssText = 'font-size: 14px; flex-shrink: 0;';
+  icon.textContent = isError ? '\u26A0' : '\u2713';
+  el.appendChild(icon);
+
+  // Text
+  const text = document.createElement('span');
+  text.textContent = message;
+  el.appendChild(text);
+
   shadowRoot.appendChild(el);
 
   setTimeout(() => {

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

@@ -9,12 +9,7 @@ export class VerifyPanel {
   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;
-    `;
+    this.container.className = 'vf-verify-stack';
     shadowRoot.appendChild(this.container);
   }
 
@@ -44,47 +39,40 @@ export class VerifyPanel {
 
   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;
-    `;
+    card.className = 'vf-verify-card';
 
     const title = document.createElement('div');
-    title.style.cssText = `font-weight:600;color:#f59e0b;margin-bottom:6px;font-size:12px;`;
+    title.className = 'vf-verify-title';
     title.textContent = t('verify.title');
     card.appendChild(title);
 
     const desc = document.createElement('div');
-    desc.style.cssText = `margin-bottom:10px;line-height:1.4;`;
+    desc.className = 'vf-verify-desc';
     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;`;
+    btnRow.className = 'vf-verify-btns';
 
     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.className = 'vf-verify-btn vf-verify-btn-pass';
     passBtn.textContent = '\u2713 ' + t('verify.fixed');
     passBtn.addEventListener('click', () => {
       this.respond(item.feedbackId, true);
-      card.remove();
+      card.style.opacity = '0';
+      card.style.transition = 'opacity 0.2s, transform 0.2s';
+      card.style.transform = 'translateX(-20px)';
+      setTimeout(() => card.remove(), 200);
     });
 
     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.className = 'vf-verify-btn vf-verify-btn-fail';
     failBtn.textContent = '\u2717 ' + t('verify.broken');
     failBtn.addEventListener('click', () => {
       this.respond(item.feedbackId, false);
-      card.remove();
+      card.style.opacity = '0';
+      card.style.transition = 'opacity 0.2s';
+      setTimeout(() => card.remove(), 200);
     });
 
     btnRow.appendChild(passBtn);

package/src/server/proxy-server.ts

@@ -7,7 +7,7 @@ import { createFeedbackRouter } from './feedback-api.js';
 import { createSdkRouter } from './sdk-serve.js';
 
 const PROXY_PORT = 3695;
-const INJECT_SCRIPT = `<script src="/vibe-feedback.js"></script>`;
+const INJECT_SCRIPT = `<script defer src="/vibe-feedback.js"></script>`;
 
 let server: Server | null = null;
 let proxy: httpProxy | null = null;
@@ -38,6 +38,11 @@ export async function startProxyServer(
     changeOrigin: true,
   });
 
+  // Prevent upstream from sending compressed responses — we need raw HTML to inject SDK
+  proxy.on('proxyReq', (proxyReq) => {
+    proxyReq.setHeader('Accept-Encoding', 'identity');
+  });
+
   proxy.on('error', (_err, _req, res) => {
     if (res && 'writeHead' in res) {
       try {

package/src/server/sdk-serve.ts

@@ -7,15 +7,24 @@ 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');
+    // Try multiple possible locations:
+    // 1. Running from dist/src/server/ → ../../vibe-feedback.js (compiled, npm global)
+    // 2. Running from src/server/ via tsx → ../../dist/vibe-feedback.js (dev mode)
+    const candidates = [
+      path.resolve(__dirname, '../../vibe-feedback.js'),      // dist/vibe-feedback.js from dist/src/server/
+      path.resolve(__dirname, '../../dist/vibe-feedback.js'),  // from src/server/ (tsx dev)
+      path.resolve(__dirname, '../../../dist/vibe-feedback.js'), // fallback
+    ];
+
+    const sdkPath = candidates.find((p) => fs.existsSync(p));
+
+    if (!sdkPath) {
+      return res.status(404).send(`// SDK not found. Searched: ${candidates.join(', ')}`);
     }
 
-    res.setHeader('Content-Type', 'application/javascript');
+    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
     res.setHeader('Cache-Control', 'no-cache');
     fs.createReadStream(sdkPath).pipe(res);
   });