makethisbetter 1.0.0

package/src/context/frustration.test.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { FrustrationDetector, FrustrationEvent } from './frustration'
+
+describe('FrustrationDetector', () => {
+  let detector: FrustrationDetector
+  let events: FrustrationEvent[]
+
+  afterEach(() => {
+    detector?.stop()
+  })
+
+  function makeDetector(): FrustrationDetector {
+    events = []
+    detector = new FrustrationDetector((e) => events.push(e))
+    detector.start()
+    return detector
+  }
+
+  it('detects rage clicks (3+ clicks on same element within 1s)', () => {
+    makeDetector()
+    const div = document.createElement('div')
+    div.textContent = 'static text'
+    document.body.appendChild(div)
+
+    for (let i = 0; i < 3; i++) {
+      div.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    }
+
+    const rageEvents = events.filter(e => e.signal === 'rage_click')
+    expect(rageEvents.length).toBe(1)
+    expect(rageEvents[0].target).toContain('div')
+
+    document.body.removeChild(div)
+  })
+
+  it('does not trigger dead click from a single click (requires 3+ dead clicks AND console errors)', () => {
+    makeDetector()
+    const p = document.createElement('p')
+    p.textContent = 'just a paragraph'
+    document.body.appendChild(p)
+
+    p.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    const deadClicks = events.filter(e => e.signal === 'dead_click')
+    expect(deadClicks.length).toBe(0)
+
+    document.body.removeChild(p)
+  })
+
+  it('does not fire dead click for interactive elements', () => {
+    makeDetector()
+    const btn = document.createElement('button')
+    btn.textContent = 'Click me'
+    document.body.appendChild(btn)
+
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    const deadClicks = events.filter(e => e.signal === 'dead_click')
+    expect(deadClicks.length).toBe(0)
+
+    document.body.removeChild(btn)
+  })
+
+  it('does not fire dead click for links', () => {
+    makeDetector()
+    const link = document.createElement('a')
+    link.href = '#'
+    link.textContent = 'Link'
+    document.body.appendChild(link)
+
+    link.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    const deadClicks = events.filter(e => e.signal === 'dead_click')
+    expect(deadClicks.length).toBe(0)
+
+    document.body.removeChild(link)
+  })
+
+  it('rage clicks always trigger (high priority, ignores cooldown)', () => {
+    makeDetector()
+    const div = document.createElement('div')
+    div.textContent = 'static'
+    document.body.appendChild(div)
+
+    for (let i = 0; i < 3; i++) div.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(events.length).toBe(1)
+
+    for (let i = 0; i < 3; i++) div.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(events.length).toBe(2)
+
+    document.body.removeChild(div)
+  })
+
+  it('ignores clicks on widget host element', () => {
+    makeDetector()
+    const host = document.createElement('div')
+    host.id = 'mtb-widget-host'
+    const inner = document.createElement('span')
+    inner.textContent = 'widget element'
+    host.appendChild(inner)
+    document.body.appendChild(host)
+
+    inner.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(events.length).toBe(0)
+
+    document.body.removeChild(host)
+  })
+
+  it('does not directly emit console errors (only counts them as signal)', () => {
+    makeDetector()
+
+    if (window.onerror) {
+      ;(window.onerror as Function)('Test error', 'test.js', 1, 1, new Error('Test error'))
+    }
+
+    const errorEvents = events.filter(e => e.signal === 'console_error')
+    expect(errorEvents.length).toBe(0)
+  })
+
+  it('stops listening after stop()', () => {
+    makeDetector()
+    detector.stop()
+
+    const p = document.createElement('p')
+    p.textContent = 'text'
+    document.body.appendChild(p)
+    p.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(events.length).toBe(0)
+
+    document.body.removeChild(p)
+  })
+})

package/src/context/frustration.ts

@@ -0,0 +1,145 @@
+import { errorSource } from './error-source'
+
+export type FrustrationSignal = 'rage_click' | 'dead_click' | 'console_error'
+
+export interface FrustrationEvent {
+  signal: FrustrationSignal
+  target?: string
+  detail?: string
+  timestamp: number
+}
+
+interface ClickRecord {
+  target: EventTarget | null
+  time: number
+}
+
+const RAGE_CLICK_THRESHOLD = 3
+const RAGE_CLICK_WINDOW_MS = 1000
+
+const INTERACTIVE_TAGS = new Set([
+  'A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL', 'SUMMARY', 'DETAILS',
+])
+
+const INTERACTIVE_ROLES = new Set([
+  'button', 'link', 'checkbox', 'radio', 'tab', 'menuitem', 'option',
+  'switch', 'textbox', 'combobox', 'listbox', 'slider', 'spinbutton',
+])
+
+export class FrustrationDetector {
+  private clickHistory: ClickRecord[] = []
+  private onFrustration: (event: FrustrationEvent) => void
+  private boundClickHandler: (e: MouseEvent) => void
+  private unsubscribeErrors: (() => void) | null = null
+  private active = false
+  private errorCount = 0
+  private deadClickCount = 0
+  private cooldownUntil = 0
+  private static readonly COOLDOWN_MS = 60_000
+
+  constructor(onFrustration: (event: FrustrationEvent) => void) {
+    this.onFrustration = onFrustration
+    this.boundClickHandler = (e: MouseEvent) => this.handleClick(e)
+  }
+
+  start(): void {
+    if (this.active) return
+    this.active = true
+    document.addEventListener('click', this.boundClickHandler, true)
+    this.unsubscribeErrors = errorSource.subscribe((_e) => {
+      this.errorCount++
+    })
+  }
+
+  stop(): void {
+    if (!this.active) return
+    this.active = false
+    document.removeEventListener('click', this.boundClickHandler, true)
+    this.unsubscribeErrors?.()
+    this.unsubscribeErrors = null
+    this.clickHistory = []
+  }
+
+  private handleClick(e: MouseEvent): void {
+    const target = e.target as Element | null
+    if (!target) return
+
+    if (this.isWidgetElement(target)) return
+
+    const now = Date.now()
+    this.clickHistory.push({ target, time: now })
+
+    const cutoff = now - RAGE_CLICK_WINDOW_MS
+    this.clickHistory = this.clickHistory.filter(r => r.time > cutoff)
+
+    const sameTargetClicks = this.clickHistory.filter(r => r.target === target)
+    if (sameTargetClicks.length >= RAGE_CLICK_THRESHOLD) {
+      this.clickHistory = []
+      this.emitHighPriority({
+        signal: 'rage_click',
+        target: describeElement(target),
+        timestamp: now,
+      })
+      return
+    }
+
+    if (!this.isInteractive(target)) {
+      this.deadClickCount++
+      if (this.deadClickCount >= 3 && this.errorCount > 0) {
+        this.deadClickCount = 0
+        this.errorCount = 0
+        this.emitIfReady({
+          signal: 'dead_click',
+          target: describeElement(target),
+          timestamp: now,
+        })
+      }
+    }
+  }
+
+  private isInteractive(el: Element): boolean {
+    if (INTERACTIVE_TAGS.has(el.tagName)) return true
+
+    const role = el.getAttribute('role')
+    if (role && INTERACTIVE_ROLES.has(role)) return true
+
+    if (el.hasAttribute('onclick') || el.hasAttribute('tabindex')) return true
+    if ((el as HTMLElement).contentEditable === 'true') return true
+
+    const style = window.getComputedStyle(el)
+    if (style.cursor === 'pointer') return true
+
+    const parent = el.closest('a, button, [role="button"], [role="link"], label')
+    if (parent) return true
+
+    return false
+  }
+
+  private isWidgetElement(el: Element): boolean {
+    const host = document.getElementById('mtb-widget-host')
+    if (!host) return false
+    return host === el || host.contains(el)
+  }
+
+  private emitIfReady(event: FrustrationEvent): void {
+    const now = Date.now()
+    if (now < this.cooldownUntil) return
+    this.cooldownUntil = now + FrustrationDetector.COOLDOWN_MS
+    this.onFrustration(event)
+  }
+
+  private emitHighPriority(event: FrustrationEvent): void {
+    this.cooldownUntil = Date.now() + FrustrationDetector.COOLDOWN_MS
+    this.onFrustration(event)
+  }
+}
+
+function describeElement(el: Element): string {
+  const tag = el.tagName.toLowerCase()
+  const id = el.id ? `#${el.id}` : ''
+  const cls = el.className && typeof el.className === 'string'
+    ? '.' + el.className.trim().split(/\s+/).slice(0, 2).join('.')
+    : ''
+  const text = el.textContent?.trim().slice(0, 30) ?? ''
+  return `<${tag}${id}${cls}>${text ? ` "${text}"` : ''}`
+}

package/src/global.ts

@@ -0,0 +1,3 @@
+import { MakeThisBetter } from './index'
+
+export default MakeThisBetter

package/src/i18n/en.ts

@@ -0,0 +1,47 @@
+export default {
+  tab: 'Feedback',
+  toolbar: {
+    markup: 'Mark up',
+    record: 'Record',
+    hint: 'Click any element to annotate · drag to draw',
+    hintRecord: 'Recording your screen',
+    exit: 'Exit',
+  },
+  popup: {
+    about: 'About',
+    placeholder: 'Describe the issue or suggestion...',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    quickOptions: [
+      { emoji: '🐛', label: 'Something is broken' },
+      { emoji: '💡', label: 'I wish this worked differently' },
+      { emoji: '🤔', label: "I don't understand this" },
+      { emoji: '✨', label: 'I have an idea' },
+    ],
+  },
+  success: {
+    title: 'Thanks!',
+    message: 'Your feedback has been received.',
+    close: 'Close',
+  },
+  error: {
+    submit: 'Failed to submit. Please try again.',
+  },
+  pet: {
+    bubble: 'Need help?',
+  },
+  frustration: {
+    prompt: 'Something not working? Tell us.',
+    action: 'Annotate',
+    dismiss: 'Dismiss',
+  },
+  annotation: {
+    drawing: 'Drawing',
+    element: 'element',
+  },
+  record: {
+    stop: 'Stop',
+    timer_label: 'Recording',
+    max_reached: 'Maximum recording time reached',
+  },
+}

package/src/i18n/index.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { getMessages } from './index'
+
+describe('getMessages', () => {
+  it('returns English for "en"', () => {
+    const m = getMessages('en')
+    expect(m.tab).toBe('Feedback')
+  })
+
+  it('returns Chinese for "zh-CN"', () => {
+    const m = getMessages('zh-CN')
+    expect(m.tab).toBe('反馈')
+  })
+
+  it('falls back to English for unknown locale', () => {
+    const m = getMessages('fr')
+    expect(m.tab).toBe('Feedback')
+  })
+
+  it('returns English for "en-US" by prefix match fallback', () => {
+    const m = getMessages('en-US')
+    expect(m.tab).toBe('Feedback')
+  })
+})

package/src/i18n/index.ts

@@ -0,0 +1,16 @@
+import en from './en'
+import zhCN from './zh-CN'
+
+export type I18nMessages = typeof en
+
+const locales: Record<string, I18nMessages> = {
+  en,
+  'zh-CN': zhCN,
+}
+
+export function getMessages(locale: string): I18nMessages {
+  if (locales[locale]) return locales[locale]
+  const lang = locale.split('-')[0]
+  if (locales[lang]) return locales[lang]
+  return locales['en']
+}

package/src/i18n/zh-CN.ts

@@ -0,0 +1,47 @@
+export default {
+  tab: '反馈',
+  toolbar: {
+    markup: '标注',
+    record: '录屏',
+    hint: '点击任意元素进行标注 · 拖拽可自由绘制',
+    hintRecord: '正在录制屏幕',
+    exit: '退出',
+  },
+  popup: {
+    about: '关于',
+    placeholder: '描述问题或建议...',
+    submit: '提交',
+    cancel: '取消',
+    quickOptions: [
+      { emoji: '🐛', label: '这里有问题' },
+      { emoji: '💡', label: '我希望它能更好用' },
+      { emoji: '🤔', label: '我看不懂这里' },
+      { emoji: '✨', label: '我有个想法' },
+    ],
+  },
+  success: {
+    title: '感谢！',
+    message: '您的反馈已收到。',
+    close: '关闭',
+  },
+  error: {
+    submit: '提交失败，请重试。',
+  },
+  pet: {
+    bubble: '需要帮助吗？',
+  },
+  frustration: {
+    prompt: '遇到问题了？告诉我们。',
+    action: '标注',
+    dismiss: '关闭',
+  },
+  annotation: {
+    drawing: '绘制',
+    element: '元素',
+  },
+  record: {
+    stop: '停止',
+    timer_label: '录制中',
+    max_reached: '已达到最大录制时长',
+  },
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import { WidgetController } from './widget/controller'
+import type { MakeThisBetterConfig } from './types'
+
+let instance: WidgetController | null = null
+
+const MakeThisBetter = {
+  init(config: MakeThisBetterConfig): void {
+    if (instance) {
+      instance.destroy()
+      instance = null
+    }
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        instance = new WidgetController(config)
+      })
+    } else {
+      instance = new WidgetController(config)
+    }
+  },
+
+  destroy(): void {
+    instance?.destroy()
+    instance = null
+  },
+}
+
+export { MakeThisBetter }
+export type { MakeThisBetterConfig }
+
+if (typeof window !== 'undefined') {
+  (window as Window & { MakeThisBetter?: typeof MakeThisBetter }).MakeThisBetter = MakeThisBetter
+}

package/src/popup/comment.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest'
+import { CommentPopup } from './comment'
+import { ShadowContainer } from '../widget/shadow'
+import { getMessages } from '../i18n'
+
+function setupPopup() {
+  const shadow = new ShadowContainer()
+  const onSubmit = vi.fn()
+  const onClose = vi.fn()
+  const popup = new CommentPopup(shadow, {
+    targetName: 'Export PDF',
+    x: 100,
+    y: 120,
+    messages: getMessages('en'),
+    onSubmit,
+    onClose,
+  })
+
+  return { shadow, popup, onSubmit, onClose }
+}
+
+describe('CommentPopup', () => {
+  it('renders visible submit and cancel actions', () => {
+    const { shadow, popup } = setupPopup()
+
+    expect(shadow.root.querySelector('.mtb-submit-btn')?.textContent).toBe('Submit')
+    expect(shadow.root.querySelector('.mtb-cancel-btn')?.textContent).toBe('Cancel')
+
+    popup.destroy()
+    shadow.destroy()
+  })
+
+  it('enables submit after entering a description', () => {
+    const { shadow, popup } = setupPopup()
+    const textarea = shadow.root.querySelector<HTMLTextAreaElement>('.mtb-textarea')!
+    const submit = shadow.root.querySelector<HTMLButtonElement>('.mtb-submit-btn')!
+
+    textarea.value = 'Export does not work'
+    textarea.dispatchEvent(new Event('input'))
+
+    expect(submit.disabled).toBe(false)
+    expect(submit.classList.contains('ready')).toBe(true)
+
+    popup.destroy()
+    shadow.destroy()
+  })
+
+  it('submits trimmed description', () => {
+    const { shadow, popup, onSubmit } = setupPopup()
+    const textarea = shadow.root.querySelector<HTMLTextAreaElement>('.mtb-textarea')!
+    const submit = shadow.root.querySelector<HTMLButtonElement>('.mtb-submit-btn')!
+
+    textarea.value = '  Export does not work  '
+    textarea.dispatchEvent(new Event('input'))
+    submit.click()
+
+    expect(onSubmit).toHaveBeenCalledWith('Export does not work')
+
+    popup.destroy()
+    shadow.destroy()
+  })
+
+  it('calls close from cancel', () => {
+    const { shadow, popup, onClose } = setupPopup()
+
+    shadow.root.querySelector<HTMLButtonElement>('.mtb-cancel-btn')!.click()
+
+    expect(onClose).toHaveBeenCalled()
+
+    popup.destroy()
+    shadow.destroy()
+  })
+})