aipeek 0.2.2 → 0.2.4

package/src/core/action.ts

@@ -0,0 +1,272 @@
+/// <reference lib="dom" />
+// aipeek actions — write capability over the existing HMR channel.
+//
+// Two layers, intentionally split:
+//   - resolveAction(): pure param validation. Runs plugin-side, unit-tested.
+//   - performAction(): real DOM mutation. Runs browser-side (client.ts imports it).
+//     References window/document — never imported plugin-side.
+
+export type ActionType = 'click' | 'fill' | 'press' | 'wait' | 'screenshot'
+
+export interface ActionArgs {
+    sel?: string
+    text?: string
+    value?: string
+    key?: string
+    timeout?: number
+    gone?: boolean
+}
+
+export interface ActionResult {
+    ok: boolean
+    detail?: string
+    error?: string
+    dataUrl?: string
+    ui?: string
+    screen?: string
+}
+
+const TYPES: ActionType[] = ['click', 'fill', 'press', 'wait', 'screenshot']
+
+// --- Pure validation (plugin-side) ---
+
+export function resolveAction(type: string, args: ActionArgs): { valid: boolean, error?: string } {
+    if (!TYPES.includes(type as ActionType))
+        return { valid: false, error: `unknown action: ${type}` }
+
+    const hasTarget = !!(args.sel || args.text)
+    switch (type) {
+        case 'click':
+            return hasTarget ? { valid: true } : { valid: false, error: 'click needs sel= or text=' }
+        case 'fill':
+            if (!hasTarget)
+                return { valid: false, error: 'fill needs sel= or text=' }
+            if (args.value === undefined)
+                return { valid: false, error: 'fill needs value=' }
+            return { valid: true }
+        case 'press':
+            return args.key ? { valid: true } : { valid: false, error: 'press needs key=' }
+        case 'wait':
+            return hasTarget ? { valid: true } : { valid: false, error: 'wait needs sel= or text=' }
+        case 'screenshot':
+            return { valid: true }
+        default:
+            return { valid: false, error: `unknown action: ${type}` }
+    }
+}
+
+// --- Browser-side execution (client.ts only) ---
+
+export const INTERACTIVE = 'a, button, input, textarea, select, [role], [onclick], [tabindex], [contenteditable]'
+
+function visibleText(el: Element): string {
+    const aria = el.getAttribute('aria-label')
+    if (aria)
+        return aria
+    return (el.textContent || '').trim()
+}
+
+function isVisible(el: Element): boolean {
+    const r = el.getBoundingClientRect()
+    return r.width > 0 && r.height > 0
+}
+
+export function findElement(sel?: string, text?: string): Element | null {
+    if (sel) {
+        try {
+            return document.querySelector(sel)
+        }
+        catch {
+            throw new Error(`invalid selector: ${sel} — URL-encode it (curl -G --data-urlencode 'sel=...')`)
+        }
+    }
+    if (text) {
+        const lower = text.toLowerCase()
+        const candidates = Array.from(document.querySelectorAll(INTERACTIVE))
+        return candidates.find(el => isVisible(el) && visibleText(el).toLowerCase().includes(lower)) || null
+    }
+    return null
+}
+
+function clickableList(): string {
+    // Clip to the open modal's subtree when present — the layer beneath is
+    // unreachable, so listing it (e.g. 90 chat items) is pure noise.
+    const root = document.querySelector('[role="dialog"][data-state="open"]') ?? document
+    const els = Array.from(root.querySelectorAll(INTERACTIVE))
+        .filter(isVisible)
+        .map(el => visibleText(el).slice(0, 40))
+        .filter(Boolean)
+    return [...new Set(els)].slice(0, 30).join(' | ')
+}
+
+export async function performAction(type: ActionType, args: ActionArgs): Promise<ActionResult> {
+    try {
+        switch (type) {
+            case 'click': return doClick(args)
+            case 'fill': return doFill(args)
+            case 'press': return doPress(args)
+            case 'wait': return await doWait(args)
+            case 'screenshot': return await doScreenshot(args)
+        }
+    }
+    catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : String(e) }
+    }
+}
+
+// Click like a human, not like el.click(). A real click is a *position* the browser
+// hit-tests, then a full event sequence at that point — hover, pointerdown/mousedown,
+// browser-decided focus, pointerup/mouseup, click. Two things matter that el.click()
+// skips entirely:
+//   1. The target is whatever sits at (x,y) per elementFromPoint — so overlays,
+//      portals, and pointer-events:none are honored exactly as a mouse would.
+//   2. mousedown is cancelable and moves focus; if a handler preventDefault()s it,
+//      focus does NOT move (radix triggers rely on this). We replicate that contract.
+// This is what makes aipeek catch focus/dismiss bugs that synthetic clicks hide.
+const MOUSE_SEQUENCE = ['pointerover', 'pointerenter', 'mouseover', 'pointermove'] as const
+
+function focusableAncestor(el: Element | null): HTMLElement | null {
+    return el?.closest<HTMLElement>('button, a[href], input, textarea, select, [tabindex], [contenteditable=""], [contenteditable="true"]') ?? null
+}
+
+function realClickAt(x: number, y: number): Element | null {
+    // The element a real mouse would hit at this point — not necessarily the one we
+    // searched for (it may be covered, or be a portal target).
+    const target = (document.elementFromPoint(x, y) as HTMLElement | null) ?? document.body
+    const base = { bubbles: true, cancelable: true, composed: true, clientX: x, clientY: y, view: window, button: 0, detail: 1 }
+    const ptr = { ...base, pointerId: 1, pointerType: 'mouse', isPrimary: true, width: 1, height: 1 }
+
+    for (const type of MOUSE_SEQUENCE)
+        target.dispatchEvent(type.startsWith('pointer') ? new PointerEvent(type, ptr) : new MouseEvent(type, base))
+
+    target.dispatchEvent(new PointerEvent('pointerdown', { ...ptr, buttons: 1 }))
+    const mousedownLive = target.dispatchEvent(new MouseEvent('mousedown', { ...base, buttons: 1 }))
+
+    // Browser focus rule: mousedown moves focus to the nearest focusable ancestor,
+    // UNLESS a handler called preventDefault() on mousedown. Match that exactly —
+    // this is the contract radix's PopoverTrigger depends on.
+    if (mousedownLive) {
+        const focusable = focusableAncestor(target)
+        if (focusable && document.activeElement !== focusable)
+            focusable.focus()
+    }
+
+    target.dispatchEvent(new PointerEvent('pointerup', { ...ptr, buttons: 0 }))
+    target.dispatchEvent(new MouseEvent('mouseup', { ...base, buttons: 0 }))
+    target.dispatchEvent(new MouseEvent('click', base))
+    return target
+}
+
+function realClick(el: HTMLElement): Element | null {
+    const r = el.getBoundingClientRect()
+    return realClickAt(r.left + r.width / 2, r.top + r.height / 2)
+}
+
+function doClick(args: ActionArgs): ActionResult {
+    const el = findElement(args.sel, args.text)
+    if (!el)
+        return { ok: false, error: `no element for ${args.sel || args.text}`, detail: clickableList() }
+    const hit = realClick(el as HTMLElement)
+    // Report when the mouse actually landed on something else (overlay/portal) — a
+    // common cause of "I clicked X but nothing happened".
+    const note = hit && hit !== el && !el.contains(hit) && !hit.contains(el) ? ` (hit <${hit.tagName.toLowerCase()}> on top)` : ''
+    return { ok: true, detail: `clicked ${visibleText(el).slice(0, 40) || el.tagName.toLowerCase()}${note}` }
+}
+
+function doFill(args: ActionArgs): ActionResult {
+    const el = findElement(args.sel, args.text)
+    if (!el)
+        return { ok: false, error: `no element for ${args.sel || args.text}`, detail: clickableList() }
+    const value = args.value ?? ''
+    const html = el as HTMLElement
+    html.focus()
+
+    if (html.isContentEditable) {
+        // ProseMirror/tiptap listen on beforeinput — select-all then insertText
+        const sel = window.getSelection()
+        const range = document.createRange()
+        range.selectNodeContents(html)
+        sel?.removeAllRanges()
+        sel?.addRange(range)
+        document.execCommand('insertText', false, value)
+        if (html.textContent !== value && !value.includes(html.textContent ?? '\0')) {
+            // execCommand may be a no-op under some setups — fall back to direct text + input event
+            html.textContent = value
+            html.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: value }))
+        }
+        return { ok: true, detail: `filled contenteditable, ${value.length} chars` }
+    }
+
+    const input = el as HTMLInputElement
+    input.value = value
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+    return { ok: true, detail: `filled ${value.length} chars` }
+}
+
+function doPress(args: ActionArgs): ActionResult {
+    const parts = (args.key ?? '').split('+')
+    const key = parts[parts.length - 1]
+    const mods = parts.slice(0, -1).map(m => m.toLowerCase())
+    const init: KeyboardEventInit = {
+        key,
+        bubbles: true,
+        cancelable: true,
+        ctrlKey: mods.includes('control') || mods.includes('ctrl'),
+        shiftKey: mods.includes('shift'),
+        altKey: mods.includes('alt'),
+        metaKey: mods.includes('meta') || mods.includes('cmd'),
+    }
+    const target = (document.activeElement as HTMLElement) || document.body
+    target.dispatchEvent(new KeyboardEvent('keydown', init))
+    target.dispatchEvent(new KeyboardEvent('keyup', init))
+    return { ok: true, detail: `pressed ${args.key} on ${target.tagName.toLowerCase()}` }
+}
+
+function doWait(args: ActionArgs): Promise<ActionResult> {
+    const timeout = args.timeout ?? 5000
+    const start = performance.now()
+    const verb = args.gone ? 'disappeared' : 'appeared'
+    return new Promise((resolve) => {
+        const tick = () => {
+            const present = !!findElement(args.sel, args.text)
+            if (present !== !!args.gone) {
+                resolve({ ok: true, detail: `${verb} after ${Math.round(performance.now() - start)}ms` })
+                return
+            }
+            if (performance.now() - start > timeout) {
+                resolve({ ok: false, error: `timeout ${timeout}ms waiting for ${args.sel || args.text} to ${args.gone ? 'disappear' : 'appear'}` })
+                return
+            }
+            setTimeout(tick, 100)
+        }
+        tick()
+    })
+}
+
+async function doScreenshot(args: ActionArgs): Promise<ActionResult> {
+    const target = args.sel ? document.querySelector(args.sel) : document.body
+    if (!target)
+        return { ok: false, error: `no element for ${args.sel}` }
+    const { toPng } = await import('html-to-image')
+    // html-to-image re-fetches every <img> to inline it; one cross-origin or
+    // rate-limited (429) image rejects the whole render. Drop external/broken
+    // images from the capture — a screenshot minus a few avatars beats no screenshot.
+    const sameOrigin = (src: string) => {
+        try {
+            return new URL(src, location.href).origin === location.origin
+        }
+        catch {
+            return false
+        }
+    }
+    const filter = (n: HTMLElement) => !(n instanceof HTMLImageElement && (!n.complete || n.naturalWidth === 0 || !sameOrigin(n.src)))
+    try {
+        const dataUrl = await toPng(target as HTMLElement, { filter, imagePlaceholder: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' })
+        return { ok: true, dataUrl, detail: `${target.tagName.toLowerCase()} captured` }
+    }
+    catch (e) {
+        const msg = e instanceof Event ? `image load failed (${(e.target as HTMLImageElement)?.src?.slice(0, 80) || 'unknown'})` : e instanceof Error ? e.message : String(e)
+        return { ok: false, error: `screenshot failed: ${msg}` }
+    }
+}

package/src/core/check.ts

@@ -0,0 +1,34 @@
+import type { CheckResult, RawState } from './types'
+
+export function check(raw: RawState): CheckResult {
+    const consoleErrors = raw.console.filter(l => l.level === 'error')
+    const failedRequests = raw.network.filter(r => r.status >= 400 || r.failed)
+
+    const assertions = [
+        {
+            name: 'no-console-errors',
+            pass: consoleErrors.length === 0,
+            ...consoleErrors.length && { detail: consoleErrors[0].text },
+        },
+        {
+            name: 'no-uncaught-errors',
+            pass: raw.errors.length === 0,
+            ...raw.errors.length && { detail: raw.errors[0].message },
+        },
+        {
+            name: 'no-failed-requests',
+            pass: failedRequests.length === 0,
+            ...failedRequests.length && { detail: `${failedRequests[0].method} ${failedRequests[0].url} ${failedRequests[0].status}` },
+        },
+        {
+            name: 'ui-not-empty',
+            pass: raw.ui.trim().length > 0,
+            ...!raw.ui.trim().length && { detail: 'UI tree is empty' },
+        },
+    ]
+
+    return {
+        pass: assertions.every(a => a.pass),
+        assertions,
+    }
+}

package/src/core/compact.ts

@@ -0,0 +1,338 @@
+import type { CompactState, ErrorEntry, LogEntry, NetworkRequest, RawState } from './types'
+import { compactUrl, truncate } from './util'
+
+const SLOW_THRESHOLD = 1000
+
+// --- UI (merged component tree + DOM semantics) ---
+
+const MAX_UI_DEPTH = 6
+const UI_PRIMITIVES = new Set([
+    'Button',
+    'Input',
+    'Label',
+    'Badge',
+    'Checkbox',
+    'Skeleton',
+    'Spinner',
+    'Switch',
+    'Tabs',
+    'Tooltip',
+    'Popover',
+    'Dialog',
+    'Select',
+    'Card',
+    'Table',
+    'Slider',
+    'Progress',
+    'RadioGroup',
+    'HoverCard',
+    'DropdownMenu',
+    'ContextMenu',
+    'Command',
+    'Form',
+    'Alert',
+    'Pagination',
+    'Textarea',
+    'TooltipProvider',
+    'DialogPortal',
+    'Router',
+    'RenderErrorBoundary',
+    'RouterProvider',
+    'RouterProvider2',
+    'PanelGroup',
+    'Panel',
+])
+
+// component name = leading run before the first space, '[', or '—' separator
+export function nameOf(line: string): string {
+    let end = 0
+    while (end < line.length) {
+        const c = line[end]
+        if (c === ' ' || c === '\t' || c === '[' || c === '—')
+            break
+        end++
+    }
+    return line.slice(0, end)
+}
+
+export function compactUI(tree: string): string {
+    if (!tree)
+        return ''
+
+    const lines = tree.split('\n')
+    const result: string[] = []
+    const repeatTracker = new Map<string, { count: number, lastIndex: number }>()
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i]
+        const trimmed = line.trimStart()
+        if (!trimmed)
+            continue
+
+        const indent = line.length - trimmed.length
+        const depth = Math.floor(indent / 2)
+        if (depth > MAX_UI_DEPTH)
+            continue
+
+        const componentName = nameOf(trimmed)
+        if (UI_PRIMITIVES.has(componentName))
+            continue
+
+        // fold repeated siblings
+        const key = `${depth}:${componentName}`
+        const tracker = repeatTracker.get(key)
+        if (tracker && i - tracker.lastIndex <= 2) {
+            tracker.count++
+            tracker.lastIndex = i
+            continue
+        }
+
+        // flush previous repeat groups
+        for (const [k, t] of repeatTracker) {
+            if (t.count > 1) {
+                const d = Number.parseInt(k.split(':')[0])
+                const name = k.split(':').slice(1).join(':')
+                result.push(`${'  '.repeat(d)}${name} ×${t.count}`)
+            }
+            if (t.count > 1 || i - t.lastIndex > 2) {
+                repeatTracker.delete(k)
+            }
+        }
+
+        repeatTracker.set(key, { count: 1, lastIndex: i })
+        result.push(line)
+    }
+
+    // flush remaining
+    for (const [k, t] of repeatTracker) {
+        if (t.count > 1) {
+            const d = Number.parseInt(k.split(':')[0])
+            const name = k.split(':').slice(1).join(':')
+            result.push(`${'  '.repeat(d)}${name} ×${t.count}`)
+        }
+    }
+
+    return result.join('\n')
+}
+
+// --- Console ---
+
+// case-insensitive substrings that mark a log line as dev-tooling noise
+const NOISE_SUBSTRINGS = [
+    '[hmr]',
+    '[vite]',
+    'hot module',
+    'react-devtools',
+    'download the react devtools',
+    'warning: react does not recognize',
+    'source map',
+    'favicon.ico',
+    'webpack',
+]
+
+export function compactConsole(logs: LogEntry[]): string {
+    if (!logs.length)
+        return ''
+
+    // filter noise
+    const filtered = logs.filter((l) => {
+        const lower = l.text.toLowerCase()
+        return !NOISE_SUBSTRINGS.some(s => lower.includes(s))
+    })
+    if (!filtered.length)
+        return ''
+
+    // dedup consecutive same messages
+    const deduped: { entry: LogEntry, count: number }[] = []
+    for (const log of filtered) {
+        const last = deduped[deduped.length - 1]
+        if (last && last.entry.text === log.text && last.entry.level === log.level) {
+            last.count++
+        }
+        else {
+            deduped.push({ entry: log, count: 1 })
+        }
+    }
+
+    // prioritize: errors first, then warns, then recent info/debug
+    const errors = deduped.filter(d => d.entry.level === 'error')
+    const warns = deduped.filter(d => d.entry.level === 'warn')
+    const rest = deduped.filter(d => d.entry.level !== 'error' && d.entry.level !== 'warn')
+
+    // keep last N info/debug entries
+    const recentRest = rest.slice(-10)
+
+    const lines: string[] = []
+    for (const group of [...errors, ...warns, ...recentRest]) {
+        const prefix = `[${group.entry.level}]`
+        const count = group.count > 1 ? ` ×${group.count}` : ''
+        const source = group.entry.source ? ` (${group.entry.source})` : ''
+        const text = truncate(group.entry.text, 200)
+        lines.push(`${prefix}${count} ${text}${source}`)
+    }
+
+    return lines.join('\n')
+}
+
+// --- Network ---
+
+export function compactNetwork(requests: NetworkRequest[]): string {
+    if (!requests.length)
+        return ''
+
+    // only fetch/XHR
+    const relevant = requests.filter(r =>
+        r.resourceType === 'fetch' || r.resourceType === 'xhr' || r.resourceType === 'websocket'
+        || r.resourceType === 'eventsource' || isApiUrl(r.url),
+    )
+    if (!relevant.length)
+        return ''
+
+    const lines: string[] = []
+    for (const req of relevant) {
+        const duration = req.duration > 0 ? ` ${formatDuration(req.duration)}` : ''
+        const slow = req.duration >= SLOW_THRESHOLD ? ' [SLOW]' : ''
+        const url = compactUrl(req.url, 50)
+        const headers = diagnosticHeaders(req)
+
+        if (req.failed || req.status >= 400) {
+            // failed: show more detail
+            const body = req.responseBody ? ` "${truncate(req.responseBody, 100)}"` : ''
+            const failure = req.failureText ? ` (${req.failureText})` : ''
+            lines.push(`${req.method} ${url} ${req.status}${failure}${body}${headers}${duration}${slow}`)
+        }
+        else {
+            lines.push(`${req.method} ${url} ${req.status}${headers}${duration}${slow}`)
+        }
+    }
+
+    return lines.join('\n')
+}
+
+function isApiUrl(url: string): boolean {
+    try {
+        const u = new URL(url)
+        return u.pathname.startsWith('/api') || u.pathname.includes('/graphql')
+    }
+    catch {
+        return false
+    }
+}
+
+const DIAGNOSTIC_HEADERS = ['content-type', 'x-error', 'www-authenticate', 'access-control-allow-origin']
+
+function diagnosticHeaders(req: NetworkRequest): string {
+    const h = req.responseHeaders
+    if (!h)
+        return ''
+    const parts: string[] = []
+    for (const key of DIAGNOSTIC_HEADERS) {
+        const val = h[key]
+        if (!val)
+            continue
+        // skip common json content-type on success — not diagnostic
+        if (key === 'content-type' && req.status < 400 && val.includes('application/json'))
+            continue
+        parts.push(`${key}: ${truncate(val, 60)}`)
+    }
+    if (!parts.length)
+        return ''
+    return ` [${parts.join(', ')}]`
+}
+
+function formatDuration(ms: number): string {
+    return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`
+}
+
+// --- Errors ---
+
+export function compactErrors(errors: ErrorEntry[]): string {
+    if (!errors.length)
+        return ''
+
+    // dedup by message
+    const seen = new Map<string, ErrorEntry>()
+    for (const err of errors) {
+        if (!seen.has(err.message)) {
+            seen.set(err.message, err)
+        }
+    }
+
+    const lines: string[] = []
+    for (const err of seen.values()) {
+        lines.push(err.message)
+        if (err.stack) {
+            const frames = filterStack(err.stack)
+            for (const frame of frames) {
+                lines.push(`  at ${frame}`)
+            }
+        }
+    }
+
+    return lines.join('\n')
+}
+
+function filterStack(stack: string): string[] {
+    return stack
+        .split('\n')
+        .map(l => l.trim())
+        .filter(l => l.startsWith('at '))
+        .map(l => l.slice(3))
+        .filter(l => !l.includes('node_modules') && !l.includes('<anonymous>'))
+        .slice(0, 5)
+}
+
+// --- State ---
+
+export function compactState(state: Record<string, unknown>): string {
+    if (!state || !Object.keys(state).length)
+        return ''
+
+    const lines: string[] = []
+    for (const [name, value] of Object.entries(state)) {
+        lines.push(`${name}:`)
+        if (typeof value === 'object' && value !== null) {
+            for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+                lines.push(`  ${k}: ${formatValue(v)}`)
+            }
+        }
+        else {
+            lines.push(`  ${String(value)}`)
+        }
+    }
+    return lines.join('\n')
+}
+
+function formatValue(v: unknown): string {
+    if (v === null || v === undefined)
+        return String(v)
+    if (typeof v === 'string')
+        return v
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v)
+    if (typeof v === 'object') {
+        const s = JSON.stringify(v)
+        return s.length > 120 ? `${s.slice(0, 120)}…` : s
+    }
+    return String(v)
+}
+
+// --- Main ---
+
+export function compact(raw: RawState): CompactState {
+    return {
+        url: raw.url,
+        ui: compactUI(raw.ui),
+        console: compactConsole(raw.console),
+        network: compactNetwork(raw.network),
+        errors: compactErrors(raw.errors),
+        state: compactState(raw.state),
+        timestamp: raw.timestamp,
+        counts: {
+            console: raw.console.length,
+            network: raw.network.length,
+            errors: raw.errors.length,
+            state: Object.keys(raw.state).length,
+        },
+    }
+}