yo-bug 0.1.0

package/src/client/styles/sdk.css.ts

@@ -0,0 +1,222 @@
+export const SDK_CSS = `
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.vf-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  background: #3b82f6;
+  color: white;
+  font-size: 22px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  transition: background 0.2s, transform 0.2s;
+  z-index: 2147483647;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+.vf-fab:hover {
+  transform: scale(1.08);
+}
+.vf-fab.active {
+  background: #f59e0b;
+}
+
+.vf-mode-bar {
+  position: fixed;
+  bottom: 84px;
+  right: 16px;
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 6px;
+  display: flex;
+  gap: 4px;
+  pointer-events: auto;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+.vf-mode-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.vf-mode-btn.active {
+  background: #3b82f6;
+  color: white;
+}
+.vf-mode-btn:hover:not(.active) {
+  color: white;
+}
+
+.vf-panel {
+  position: fixed;
+  bottom: 84px;
+  right: 16px;
+  width: 340px;
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 20px;
+  pointer-events: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  color: #e2e8f0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+}
+.vf-panel-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: white;
+}
+.vf-panel-element {
+  background: #0f172a;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 12px;
+  color: #93c5fd;
+  word-break: break-all;
+}
+.vf-panel-component {
+  color: #a78bfa;
+  margin-top: 4px;
+  font-size: 11px;
+}
+.vf-panel-label {
+  font-size: 12px;
+  color: #94a3b8;
+  margin-bottom: 6px;
+}
+.vf-type-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+.vf-type-btn {
+  padding: 6px 12px;
+  border: 1px solid #334155;
+  border-radius: 6px;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.vf-type-btn.selected {
+  border-color: #3b82f6;
+  background: rgba(59,130,246,0.15);
+  color: #60a5fa;
+}
+.vf-textarea {
+  width: 100%;
+  height: 72px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #e2e8f0;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  margin-bottom: 14px;
+}
+.vf-textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+.vf-btn-row {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.vf-btn {
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+.vf-btn-cancel {
+  background: #334155;
+  color: #94a3b8;
+}
+.vf-btn-cancel:hover {
+  background: #475569;
+}
+.vf-btn-submit {
+  background: #3b82f6;
+  color: white;
+}
+.vf-btn-submit:hover {
+  background: #2563eb;
+}
+.vf-btn-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.vf-screenshot-btn {
+  width: 100%;
+  padding: 32px 16px;
+  border: 2px dashed #334155;
+  border-radius: 8px;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 14px;
+  cursor: pointer;
+  margin-bottom: 14px;
+  transition: all 0.15s;
+}
+.vf-screenshot-btn:hover {
+  border-color: #3b82f6;
+  color: #60a5fa;
+}
+.vf-thumbnail {
+  width: 100%;
+  border-radius: 8px;
+  margin-bottom: 14px;
+  border: 1px solid #334155;
+}
+
+.vf-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  pointer-events: auto;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  animation: vf-slide-in 0.3s ease-out;
+  border-left: 3px solid #22c55e;
+}
+.vf-toast.error {
+  border-left-color: #ef4444;
+}
+@keyframes vf-slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+`;

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

@@ -0,0 +1,279 @@
+export class ChecklistPanel {
+  private container: HTMLDivElement;
+  private listEl: HTMLDivElement;
+  private headerEl: HTMLDivElement | null = null;
+  private pollTimer: ReturnType<typeof setInterval> | null = null;
+  private visible = false;
+  private collapsed = false;
+  private baseUrl: string;
+  private dragOffsetX = 0;
+  private dragOffsetY = 0;
+
+  private onItemFail: ((itemId: number) => void) | null;
+
+  constructor(private shadowRoot: ShadowRoot, onItemFail?: (itemId: number) => void) {
+    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);
+    shadowRoot.appendChild(this.container);
+  }
+
+  startPolling(): void {
+    this.poll();
+    this.pollTimer = setInterval(() => this.poll(), 3000);
+  }
+
+  stopPolling(): void {
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    }
+  }
+
+  private async poll(): Promise<void> {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/checklist`);
+      const data = await res.json();
+      if (data.items && data.items.length > 0) {
+        this.render(data);
+        if (!this.visible) {
+          this.container.style.display = 'block';
+          this.visible = true;
+        }
+      } else if (this.visible) {
+        this.container.style.display = 'none';
+        this.visible = false;
+      }
+    } catch {}
+  }
+
+  private render(data: { title: string; items: any[] }): void {
+    const passed = data.items.filter((i) => i.status === 'passed').length;
+    const failed = data.items.filter((i) => i.status === 'failed').length;
+    const total = data.items.length;
+
+    this.listEl.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;
+    `;
+
+    const titleWrap = document.createElement('div');
+    titleWrap.style.cssText = `display:flex;align-items:center;gap:8px;`;
+
+    const title = document.createElement('span');
+    title.style.cssText = `font-weight:600;color:white;font-size:13px;`;
+    title.textContent = data.title;
+
+    const badge = document.createElement('span');
+    badge.style.cssText = `font-size:11px;color:#94a3b8;`;
+    badge.textContent = `${passed}/${total}`;
+    if (failed > 0) {
+      const failBadge = document.createElement('span');
+      failBadge.style.cssText = `color:#ef4444;margin-left:4px;`;
+      failBadge.textContent = `${failed} fail`;
+      badge.appendChild(failBadge);
+    }
+
+    titleWrap.appendChild(title);
+    titleWrap.appendChild(badge);
+    header.appendChild(titleWrap);
+
+    // 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.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);
+      toggleBtn.textContent = this.collapsed ? '\u25BC' : '\u25B2';
+    });
+    header.appendChild(toggleBtn);
+
+    // Drag support
+    header.addEventListener('mousedown', (e) => {
+      if ((e.target as HTMLElement).tagName === 'BUTTON') return;
+      e.preventDefault();
+      const rect = this.container.getBoundingClientRect();
+      this.dragOffsetX = e.clientX - rect.left;
+      this.dragOffsetY = e.clientY - rect.top;
+
+      const onMove = (ev: MouseEvent) => {
+        this.container.style.left = `${ev.clientX - this.dragOffsetX}px`;
+        this.container.style.top = `${ev.clientY - this.dragOffsetY}px`;
+        this.container.style.right = 'auto';
+      };
+      const onUp = () => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    });
+
+    this.listEl.appendChild(header);
+    this.headerEl = header;
+
+    // Progress bar
+    const progressWrap = document.createElement('div');
+    progressWrap.style.cssText = `height:2px;background:#334155;`;
+    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;`;
+    progressWrap.appendChild(progressBar);
+    this.listEl.appendChild(progressWrap);
+
+    // Items container (collapsible)
+    const itemsWrap = document.createElement('div');
+    itemsWrap.className = 'vf-checklist-items';
+    if (this.collapsed) 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;
+      `;
+
+      // Status buttons
+      const controls = document.createElement('div');
+      controls.style.cssText = `display:flex;gap:3px;flex-shrink:0;margin-top:2px;`;
+
+      controls.appendChild(this.createStatusBtn('\u2713', '#22c55e', item.status === 'passed', () => {
+        this.updateItem(item.id, 'passed');
+      }));
+      controls.appendChild(this.createStatusBtn('\u2717', '#ef4444', 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;`;
+
+      // Badges row
+      const badges = document.createElement('div');
+      badges.style.cssText = `display:flex;gap:4px;margin-bottom:2px;flex-wrap:wrap;`;
+
+      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.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.textContent = item.dimension;
+        badges.appendChild(dimBadge);
+      }
+
+      if (badges.childNodes.length > 0) {
+        text.appendChild(badges);
+      }
+
+      // Step (what to do)
+      const stepText = document.createElement('span');
+      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.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.textContent = item.feedback;
+        text.appendChild(fb);
+      }
+
+      row.appendChild(text);
+      itemsWrap.appendChild(row);
+    }
+
+    this.listEl.appendChild(itemsWrap);
+  }
+
+  private createStatusBtn(icon: string, color: string, 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.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);
+    }
+  }
+
+  private async updateItem(itemId: number, status: string, feedback?: string): Promise<void> {
+    try {
+      await fetch(`${this.baseUrl}/api/checklist/${itemId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status, feedback }),
+      });
+      this.poll();
+    } catch {}
+  }
+
+  destroy(): void {
+    this.stopPolling();
+    this.container.remove();
+  }
+}

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

@@ -0,0 +1,149 @@
+import type { ElementInfo } from '../element-mode/inspector.js';
+import { t } from '../core/i18n.js';
+
+const PROBLEM_TYPES = [
+  { value: 'bug', labelKey: 'type.bug' },
+  { value: 'ui-issue', labelKey: 'type.ui-issue' },
+  { value: 'performance', labelKey: 'type.performance' },
+  { value: 'feature-request', labelKey: 'type.feature-request' },
+  { value: 'other', labelKey: 'type.other' },
+];
+
+export interface PanelResult {
+  problemType: string;
+  description: string;
+}
+
+export class FeedbackPanel {
+  private container: HTMLDivElement;
+  private typeButtons: HTMLButtonElement[] = [];
+  private textarea!: HTMLTextAreaElement;
+  private submitBtn!: HTMLButtonElement;
+  private selectedType = '';
+  private thumbnailImg: HTMLImageElement | null = null;
+
+  constructor(
+    private shadowRoot: ShadowRoot,
+    private onSubmit: (result: PanelResult) => void,
+    private onCancel: () => void
+  ) {
+    this.container = document.createElement('div');
+    this.container.className = 'vf-panel';
+    this.container.style.display = 'none';
+  }
+
+  showForElement(elementInfo: ElementInfo): void {
+    this.render('element', elementInfo);
+  }
+
+  showForAnnotation(thumbnailDataUrl: string): void {
+    this.render('annotation', undefined, thumbnailDataUrl);
+  }
+
+  hide(): void {
+    this.container.style.display = 'none';
+    this.container.remove();
+    this.selectedType = '';
+  }
+
+  private render(mode: string, elementInfo?: ElementInfo, thumbnailDataUrl?: string): void {
+    this.container.innerHTML = '';
+
+    // Title
+    const title = document.createElement('div');
+    title.className = 'vf-panel-title';
+    title.textContent = mode === 'element' ? t('panel.element.title') : t('panel.annotation.title');
+    this.container.appendChild(title);
+
+    // Element info
+    if (elementInfo) {
+      const elDiv = document.createElement('div');
+      elDiv.className = 'vf-panel-element';
+      elDiv.textContent = `<${elementInfo.tagName}> ${elementInfo.selector}`;
+      if (elementInfo.componentName) {
+        const comp = document.createElement('div');
+        comp.className = 'vf-panel-component';
+        comp.textContent = `Component: ${elementInfo.componentName}`;
+        elDiv.appendChild(comp);
+      }
+      this.container.appendChild(elDiv);
+    }
+
+    // Annotation thumbnail
+    if (thumbnailDataUrl) {
+      this.thumbnailImg = document.createElement('img');
+      this.thumbnailImg.className = 'vf-thumbnail';
+      this.thumbnailImg.src = thumbnailDataUrl;
+      this.container.appendChild(this.thumbnailImg);
+    }
+
+    // Problem type
+    const typeLabel = document.createElement('div');
+    typeLabel.className = 'vf-panel-label';
+    typeLabel.textContent = t('panel.type');
+    this.container.appendChild(typeLabel);
+
+    const typeGroup = document.createElement('div');
+    typeGroup.className = 'vf-type-group';
+    this.typeButtons = [];
+    for (const pt of PROBLEM_TYPES) {
+      const btn = document.createElement('button');
+      btn.className = 'vf-type-btn';
+      btn.textContent = t(pt.labelKey);
+      btn.addEventListener('click', () => {
+        this.selectedType = pt.value;
+        this.typeButtons.forEach((b) => b.classList.remove('selected'));
+        btn.classList.add('selected');
+        this.updateSubmitState();
+      });
+      typeGroup.appendChild(btn);
+      this.typeButtons.push(btn);
+    }
+    this.container.appendChild(typeGroup);
+
+    // Description
+    const descLabel = document.createElement('div');
+    descLabel.className = 'vf-panel-label';
+    descLabel.textContent = t('panel.description');
+    this.container.appendChild(descLabel);
+
+    this.textarea = document.createElement('textarea');
+    this.textarea.className = 'vf-textarea';
+    this.textarea.placeholder = t('panel.description.placeholder');
+    this.textarea.addEventListener('input', () => this.updateSubmitState());
+    this.container.appendChild(this.textarea);
+
+    // Buttons
+    const btnRow = document.createElement('div');
+    btnRow.className = 'vf-btn-row';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'vf-btn vf-btn-cancel';
+    cancelBtn.textContent = t('panel.cancel');
+    cancelBtn.addEventListener('click', () => this.onCancel());
+    btnRow.appendChild(cancelBtn);
+
+    this.submitBtn = document.createElement('button');
+    this.submitBtn.className = 'vf-btn vf-btn-submit';
+    this.submitBtn.textContent = t('panel.submit');
+    this.submitBtn.disabled = true;
+    this.submitBtn.addEventListener('click', () => {
+      this.onSubmit({
+        problemType: this.selectedType,
+        description: this.textarea.value.trim(),
+      });
+    });
+    btnRow.appendChild(this.submitBtn);
+
+    this.container.appendChild(btnRow);
+
+    // Show
+    this.shadowRoot.appendChild(this.container);
+    this.container.style.display = 'block';
+    this.textarea.focus();
+  }
+
+  private updateSubmitState(): void {
+    this.submitBtn.disabled = !this.selectedType;
+  }
+}