@toolr/ui-design 0.1.0

package/components/sections/prompt-editor/use-prompt-editor.ts

@@ -0,0 +1,131 @@
+/**
+ * usePromptEditor — Hook managing prompt editor state
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * Handles:
+ * - Local content state (separate from saved content for dirty detection)
+ * - Dirty state detection
+ * - Save with Ctrl/Cmd+S keyboard shortcut
+ * - Variable search/filter
+ * - Active tab state
+ */
+
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import type { ToolTab, PromptPlaceholder } from './types.ts'
+
+export interface UsePromptEditorOptions {
+  /** Prompt content keyed by tool id */
+  prompts: Record<string, string>
+  /** Called when saving (all modified prompts at once) */
+  onPromptChange: (tool: string, value: string) => void
+  /** Available tool tabs */
+  tools: ToolTab[]
+  /** Available template variables */
+  variables?: PromptPlaceholder[]
+}
+
+export interface UsePromptEditorReturn {
+  /** Currently active tool tab id */
+  activeTab: string
+  setActiveTab: (tab: string) => void
+  /** Local editor content (may differ from saved prompts) */
+  localContent: Record<string, string>
+  /** Current prompt for the active tab */
+  currentPrompt: string
+  /** Whether any tab has unsaved changes */
+  isDirty: boolean
+  /** Handle editor content change */
+  handleEditorChange: (value: string | undefined) => void
+  /** Save all modified prompts */
+  handleSave: () => void
+  /** Variable search state */
+  variableSearch: string
+  setVariableSearch: (search: string) => void
+  /** Filtered variables based on search */
+  filteredVariables: PromptPlaceholder[]
+}
+
+export function usePromptEditor({
+  prompts,
+  onPromptChange,
+  tools,
+  variables,
+}: UsePromptEditorOptions): UsePromptEditorReturn {
+  const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
+  const [localContent, setLocalContent] = useState<Record<string, string>>(prompts)
+  const [isDirty, setIsDirty] = useState(false)
+  const [variableSearch, setVariableSearch] = useState('')
+
+  // Sync local content when prompts change externally
+  useEffect(() => {
+    setLocalContent(prompts)
+    setIsDirty(false)
+  }, [prompts])
+
+  const handleEditorChange = useCallback(
+    (value: string | undefined) => {
+      const newValue = value ?? ''
+      setLocalContent((prev) => {
+        const updated = { ...prev, [activeTab]: newValue }
+        const hasDiff = Object.keys(prompts).some(
+          (tool) => updated[tool] !== prompts[tool],
+        )
+        setIsDirty(hasDiff)
+        return updated
+      })
+    },
+    [activeTab, prompts],
+  )
+
+  const handleSave = useCallback(() => {
+    for (const tool of Object.keys(prompts)) {
+      if (localContent[tool] !== prompts[tool]) {
+        onPromptChange(tool, localContent[tool])
+      }
+    }
+    setIsDirty(false)
+  }, [localContent, prompts, onPromptChange])
+
+  // Keyboard shortcut: Cmd/Ctrl + S
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        if (isDirty) {
+          handleSave()
+        }
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isDirty, handleSave])
+
+  const currentPrompt = localContent[activeTab] ?? ''
+
+  // Filter variables based on search
+  const filteredVariables = useMemo(() => {
+    if (!variables) return []
+    if (!variableSearch.trim()) return variables
+    const search = variableSearch.toLowerCase()
+    return variables.filter(
+      (v) =>
+        v.name.toLowerCase().includes(search) ||
+        v.description.toLowerCase().includes(search) ||
+        (v.example && v.example.toLowerCase().includes(search)),
+    )
+  }, [variables, variableSearch])
+
+  return {
+    activeTab,
+    setActiveTab,
+    localContent,
+    currentPrompt,
+    isDirty,
+    handleEditorChange,
+    handleSave,
+    variableSearch,
+    setVariableSearch,
+    filteredVariables,
+  }
+}

package/components/sections/report-bug/error-logger.ts

@@ -0,0 +1,392 @@
+/**
+ * Error Logger — Automatic console error capture for issue reporting
+ *
+ * Part of: Sections > Report a Bug
+ *
+ * Provides a factory function to create app-specific error loggers.
+ * Each logger instance has its own localStorage namespace and in-memory state.
+ *
+ * Usage:
+ *   const logger = createErrorLogger('myapp')
+ *   logger.init()  // Call early in app startup to begin capturing
+ *   // Later, pass captured data to ReportBugForm:
+ *   <ReportBugForm
+ *     errorReport={logger.getFormattedReport()}
+ *     errorCount={logger.getErrorCount()}
+ *     warnCount={logger.getWarnCount()}
+ *     onErrorsSubmitted={() => { logger.markAsSubmitted(); logger.clearLogs() }}
+ *   />
+ *
+ * AI agent notes:
+ * - createErrorLogger returns an isolated instance with its own storage prefix
+ * - Three-list architecture: Current (active) -> Submitted (reported) | Dismissed (ignored)
+ * - Errors are deduplicated by fingerprint (djb2 hash of first error line)
+ * - init() intercepts console.error, console.warn, and window error events
+ * - subscribe/getSnapshot are for React's useSyncExternalStore
+ * - The form component (ReportBugForm) does NOT depend on this directly;
+ *   it accepts errorReport/errorCount as props, keeping the two decoupled
+ */
+
+export interface TrackedError {
+  fingerprint: string
+  firstMessage: string
+  count: number
+  firstSeen: string
+  lastSeen: string
+  stack?: string
+}
+
+export interface ErrorLogger {
+  /** Start capturing console.error, console.warn, and unhandled errors */
+  init(): void
+  /** Number of unique current (unreported) errors */
+  getErrorCount(): number
+  /** Number of warnings in the log buffer */
+  getWarnCount(): number
+  /** Current errors not yet submitted or dismissed */
+  getCurrentErrors(): TrackedError[]
+  /** Previously submitted errors */
+  getSubmittedErrors(): TrackedError[]
+  /** Markdown-formatted error report for Linear issue submission */
+  getFormattedReport(): string
+  /** Combined fingerprint of all current errors (for duplicate detection) */
+  getErrorFingerprint(): string
+  /** Raw log output as a string */
+  getLogs(): string
+  /** Move all current errors to the submitted list */
+  markAsSubmitted(): void
+  /** Move all current errors to the dismissed list */
+  markAsDismissed(): void
+  /** Clear the in-memory log buffer (does not affect tracked errors) */
+  clearLogs(): void
+  /** For React useSyncExternalStore */
+  subscribe(listener: () => void): () => void
+  /** For React useSyncExternalStore */
+  getSnapshot(): number
+}
+
+interface LogEntry {
+  timestamp: string
+  level: 'error' | 'warn' | 'info'
+  message: string
+  stack?: string
+}
+
+function generateFingerprint(message: string): string {
+  const normalized = message.split('\n')[0].trim()
+  let hash = 5381
+  for (let i = 0; i < normalized.length; i++) {
+    hash = ((hash << 5) + hash) ^ normalized.charCodeAt(i)
+  }
+  return (hash >>> 0).toString(16).padStart(8, '0')
+}
+
+function cleanStackTrace(stack: string): string {
+  return stack
+    .replace(/https?:\/\/localhost:\d+\//g, '')
+    .replace(/https?:\/\/127\.0\.0\.1:\d+\//g, '')
+    .replace(/node_modules\/\.vite\/deps\//g, '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+    .join('\n')
+}
+
+function formatTimestamp(isoString: string): string {
+  try {
+    return new Date(isoString).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    })
+  } catch {
+    return isoString
+  }
+}
+
+const MAX_LOGS = 100
+const MAX_TRACKED = 100
+
+export function createErrorLogger(storagePrefix: string): ErrorLogger {
+  const CURRENT_KEY = `${storagePrefix}_current_errors`
+  const SUBMITTED_KEY = `${storagePrefix}_submitted_errors`
+  const DISMISSED_KEY = `${storagePrefix}_dismissed_errors`
+
+  const logs: LogEntry[] = []
+  let currentErrors: Map<string, TrackedError> = new Map()
+  const listeners = new Set<() => void>()
+  let snapshotVersion = 0
+
+  function notifyListeners() {
+    snapshotVersion++
+    listeners.forEach((l) => l())
+  }
+
+  function getTrackedErrors(key: string): Map<string, TrackedError> {
+    try {
+      if (typeof window === 'undefined') return new Map()
+      const stored = localStorage.getItem(key)
+      if (!stored) return new Map()
+      const arr: TrackedError[] = JSON.parse(stored)
+      return new Map(arr.map((e) => [e.fingerprint, e]))
+    } catch {
+      return new Map()
+    }
+  }
+
+  function saveTrackedErrors(key: string, errors: Map<string, TrackedError>): void {
+    try {
+      if (typeof window === 'undefined') return
+      const arr = Array.from(errors.values()).slice(-MAX_TRACKED)
+      localStorage.setItem(key, JSON.stringify(arr))
+    } catch {
+      // Ignore storage errors
+    }
+  }
+
+  function loadCurrentErrors(): void {
+    currentErrors = getTrackedErrors(CURRENT_KEY)
+  }
+
+  function saveCurrentErrors(): void {
+    saveTrackedErrors(CURRENT_KEY, currentErrors)
+  }
+
+  function tryUpdateTrackedError(storageKey: string, fingerprint: string, now: string, entry: LogEntry): boolean {
+    const errors = getTrackedErrors(storageKey)
+    if (!errors.has(fingerprint)) return false
+    const existing = errors.get(fingerprint)!
+    existing.count++
+    existing.lastSeen = now
+    saveTrackedErrors(storageKey, errors)
+    logs.push(entry)
+    if (logs.length > MAX_LOGS) logs.shift()
+    return true
+  }
+
+  function addLog(level: LogEntry['level'], args: unknown[]): void {
+    const message = args
+      .map((arg) => {
+        if (arg instanceof Error) return `${arg.message}\n${arg.stack || ''}`
+        if (typeof arg === 'object') {
+          try {
+            return JSON.stringify(arg, null, 2)
+          } catch {
+            return String(arg)
+          }
+        }
+        return String(arg)
+      })
+      .join(' ')
+
+    const entry: LogEntry = { timestamp: new Date().toISOString(), level, message }
+
+    const errorArg = args.find((arg) => arg instanceof Error) as Error | undefined
+    if (errorArg?.stack) entry.stack = errorArg.stack
+
+    if (level !== 'error') {
+      logs.push(entry)
+      if (logs.length > MAX_LOGS) logs.shift()
+      if (level === 'warn') notifyListeners()
+      return
+    }
+
+    const fingerprint = generateFingerprint(message)
+    const now = new Date().toISOString()
+    const firstLine = message.split('\n')[0]
+    const truncatedMessage = firstLine.length > 300 ? firstLine.slice(0, 300) + '...' : firstLine
+
+    if (tryUpdateTrackedError(DISMISSED_KEY, fingerprint, now, entry)) return
+    if (tryUpdateTrackedError(SUBMITTED_KEY, fingerprint, now, entry)) return
+
+    if (currentErrors.has(fingerprint)) {
+      const existing = currentErrors.get(fingerprint)!
+      existing.count++
+      existing.lastSeen = now
+      saveCurrentErrors()
+      logs.push(entry)
+      if (logs.length > MAX_LOGS) logs.shift()
+      return
+    }
+
+    currentErrors.set(fingerprint, {
+      fingerprint,
+      firstMessage: truncatedMessage,
+      count: 1,
+      firstSeen: now,
+      lastSeen: now,
+      stack: entry.stack,
+    })
+    saveCurrentErrors()
+    notifyListeners()
+
+    logs.push(entry)
+    if (logs.length > MAX_LOGS) logs.shift()
+  }
+
+  return {
+    init() {
+      loadCurrentErrors()
+
+      const originalError = console.error
+      const originalWarn = console.warn
+
+      console.error = (...args: unknown[]) => {
+        addLog('error', args)
+        originalError.apply(console, args)
+      }
+
+      console.warn = (...args: unknown[]) => {
+        addLog('warn', args)
+        originalWarn.apply(console, args)
+      }
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('error', (event) => {
+          addLog('error', [
+            `Unhandled error: ${event.message}`,
+            event.error || { filename: event.filename, lineno: event.lineno, colno: event.colno },
+          ])
+        })
+
+        window.addEventListener('unhandledrejection', (event) => {
+          addLog('error', [`Unhandled promise rejection: ${event.reason}`])
+        })
+      }
+    },
+
+    getErrorCount() {
+      return currentErrors.size
+    },
+
+    getWarnCount() {
+      return logs.filter((e) => e.level === 'warn').length
+    },
+
+    getCurrentErrors() {
+      return Array.from(currentErrors.values())
+    },
+
+    getSubmittedErrors() {
+      return Array.from(getTrackedErrors(SUBMITTED_KEY).values())
+    },
+
+    getFormattedReport() {
+      const errors = Array.from(currentErrors.values())
+      if (errors.length === 0) return 'No errors captured.'
+
+      const parts: string[] = []
+      parts.push('## Error Report')
+      parts.push('')
+      parts.push(`**${errors.length} unique error${errors.length > 1 ? 's' : ''} captured**`)
+      parts.push('')
+
+      for (let i = 0; i < errors.length; i++) {
+        const error = errors[i]
+        const countInfo = error.count > 1 ? ` (x${error.count})` : ''
+        parts.push(`### ${i + 1}. ${error.firstMessage}${countInfo}`)
+        parts.push('')
+        parts.push('| Field | Value |')
+        parts.push('|-------|-------|')
+        parts.push(`| Fingerprint | \`${error.fingerprint}\` |`)
+        parts.push(`| First seen | ${formatTimestamp(error.firstSeen)} |`)
+        if (error.count > 1) {
+          parts.push(`| Last seen | ${formatTimestamp(error.lastSeen)} |`)
+          parts.push(`| Occurrences | ${error.count} |`)
+        }
+        parts.push('')
+
+        if (error.stack) {
+          parts.push('**Stack trace:**')
+          parts.push('```')
+          parts.push(cleanStackTrace(error.stack))
+          parts.push('```')
+          parts.push('')
+        }
+
+        if (i < errors.length - 1) {
+          parts.push('---')
+          parts.push('')
+        }
+      }
+
+      return parts.join('\n')
+    },
+
+    getErrorFingerprint() {
+      if (currentErrors.size === 0) return ''
+      const fingerprints = Array.from(currentErrors.keys()).sort().join('|')
+      let hash = 5381
+      for (let i = 0; i < fingerprints.length; i++) {
+        hash = ((hash << 5) + hash) ^ fingerprints.charCodeAt(i)
+      }
+      return (hash >>> 0).toString(16).padStart(8, '0')
+    },
+
+    getLogs() {
+      if (logs.length === 0) return 'No console logs captured.'
+      return logs
+        .map((log) => {
+          const parts = [`[${log.timestamp}] [${log.level.toUpperCase()}] ${log.message}`]
+          if (log.stack) parts.push(`Stack: ${log.stack}`)
+          return parts.join('\n')
+        })
+        .join('\n\n')
+    },
+
+    markAsSubmitted() {
+      if (currentErrors.size === 0) return
+      const submittedErrors = getTrackedErrors(SUBMITTED_KEY)
+      const now = new Date().toISOString()
+      for (const [fp, error] of currentErrors) {
+        const existing = submittedErrors.get(fp)
+        if (existing) {
+          existing.count += error.count
+          existing.lastSeen = now
+        } else {
+          submittedErrors.set(fp, { ...error, lastSeen: now })
+        }
+      }
+      saveTrackedErrors(SUBMITTED_KEY, submittedErrors)
+      currentErrors.clear()
+      saveCurrentErrors()
+      notifyListeners()
+    },
+
+    markAsDismissed() {
+      if (currentErrors.size === 0) return
+      const dismissedErrors = getTrackedErrors(DISMISSED_KEY)
+      const now = new Date().toISOString()
+      for (const [fp, error] of currentErrors) {
+        const existing = dismissedErrors.get(fp)
+        if (existing) {
+          existing.count += error.count
+          existing.lastSeen = now
+        } else {
+          dismissedErrors.set(fp, { ...error, lastSeen: now })
+        }
+      }
+      saveTrackedErrors(DISMISSED_KEY, dismissedErrors)
+      currentErrors.clear()
+      saveCurrentErrors()
+      notifyListeners()
+    },
+
+    clearLogs() {
+      logs.length = 0
+    },
+
+    subscribe(listener: () => void) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+
+    getSnapshot() {
+      return snapshotVersion
+    },
+  }
+}

package/components/sections/report-bug/index.ts

@@ -0,0 +1,59 @@
+/**
+ * Report a Bug — Section barrel export
+ *
+ * This section provides a complete, reusable bug reporting feature that
+ * submits issues to Linear via a Cloudflare Worker.
+ *
+ * File structure:
+ * - report-bug-form.tsx     — Main form component (drop-in usage)
+ * - screenshot-uploader.tsx — Drag & drop image upload (used by form, also standalone)
+ * - use-report-bug.ts       — Form state & submission hook (used by form, also standalone)
+ * - issue-reporter-api.ts   — Types and HTTP client for the worker endpoint
+ * - error-logger.ts         — Optional error capture utility (decoupled from form)
+ *
+ * Quick start for consuming apps:
+ *   import { ReportBugForm } from '@toolr/ui-design'
+ *
+ *   <ReportBugForm
+ *     workerUrl="https://your-issue-reporter.workers.dev"
+ *     getSystemInfo={yourGetSystemInfoFn}
+ *     linearTeamId="your-linear-team-uuid"
+ *     onSuccess={(r) => toast(`Created ${r.issueId}`)}
+ *   />
+ *
+ * For error log integration:
+ *   import { createErrorLogger, ReportBugForm } from '@toolr/ui-design'
+ *
+ *   const logger = createErrorLogger('yourapp')
+ *   logger.init()
+ *
+ *   <ReportBugForm
+ *     {...config}
+ *     errorReport={logger.getFormattedReport()}
+ *     errorCount={logger.getErrorCount()}
+ *     onErrorsSubmitted={() => { logger.markAsSubmitted(); logger.clearLogs() }}
+ *   />
+ */
+
+// Main form component
+export { ReportBugForm, type ReportBugFormProps } from './report-bug-form.tsx'
+
+// Screenshot uploader (standalone usage)
+export { ScreenshotUploader, type ScreenshotUploaderProps, type Screenshot } from './screenshot-uploader.tsx'
+
+// Hook for custom form UIs
+export { useReportBug, type UseReportBugOptions, type UseReportBugReturn } from './use-report-bug.ts'
+
+// API types and client
+export {
+  submitIssueReport,
+  ISSUE_TYPES,
+  type IssueType,
+  type IssueReport,
+  type IssueReportResult,
+  type SystemInfo,
+  type ScreenshotAttachment,
+} from './issue-reporter-api.ts'
+
+// Error logger utility
+export { createErrorLogger, type ErrorLogger, type TrackedError } from './error-logger.ts'

package/components/sections/report-bug/issue-reporter-api.ts

@@ -0,0 +1,83 @@
+/**
+ * Issue Reporter API — Types and submission client
+ *
+ * Part of: Sections > Report a Bug
+ *
+ * This module defines the shared types for issue reporting and provides
+ * the HTTP client that submits reports to a Cloudflare Worker endpoint.
+ * The worker creates Linear issues with optional screenshot uploads and
+ * duplicate detection.
+ *
+ * AI agent notes:
+ * - workerUrl is passed per-call so different apps can use different endpoints
+ * - linearTeamId/linearProjectId are sent in the request body, allowing one
+ *   worker to serve multiple apps (the worker must read these from the body)
+ * - The worker source lives at /reviewr/workers/issue-reporter/
+ * - ScreenshotAttachment.data is base64-encoded (no data URL prefix)
+ * - SystemInfo must be provided by the consuming app (e.g. via Tauri invoke,
+ *   navigator.userAgent, or a custom endpoint)
+ */
+
+export type IssueType = 'bug' | 'feature' | 'question' | 'improvement' | 'documentation'
+
+export const ISSUE_TYPES: { value: IssueType; label: string }[] = [
+  { value: 'bug', label: 'Bug' },
+  { value: 'feature', label: 'Feature' },
+  { value: 'question', label: 'Question' },
+  { value: 'improvement', label: 'Improvement' },
+  { value: 'documentation', label: 'Documentation' },
+]
+
+export interface SystemInfo {
+  os: string
+  osVersion: string
+  appVersion: string
+  arch: string
+}
+
+export interface ScreenshotAttachment {
+  filename: string
+  data: string
+  contentType: string
+}
+
+export interface IssueReport {
+  title: string
+  description: string
+  type: IssueType
+  stackTrace?: string
+  errorFingerprint?: string
+  systemInfo: SystemInfo
+  userEmail?: string
+  screenshots?: ScreenshotAttachment[]
+  /** Target Linear team — allows one worker to serve multiple apps */
+  linearTeamId?: string
+  /** Target Linear project (optional) */
+  linearProjectId?: string
+}
+
+export interface IssueReportResult {
+  success: boolean
+  issueId?: string
+  message: string
+  isDuplicate?: boolean
+  url?: string
+}
+
+export async function submitIssueReport(
+  workerUrl: string,
+  report: IssueReport,
+): Promise<IssueReportResult> {
+  const response = await fetch(workerUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(report),
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+    return { success: false, message: error.error || 'Failed to submit issue' }
+  }
+
+  return await response.json()
+}