aipeek 0.2.2 → 0.2.3

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/types.ts

@@ -0,0 +1,75 @@
+export interface LogEntry {
+    level: 'error' | 'warn' | 'info' | 'debug' | 'log'
+    text: string
+    timestamp?: number
+    source?: string
+}
+
+export interface NetworkRequest {
+    method: string
+    url: string
+    status: number
+    duration: number
+    resourceType: string
+    requestHeaders?: Record<string, string>
+    responseHeaders?: Record<string, string>
+    requestBody?: string
+    requestSample?: string
+    responseBody?: string
+    responseSample?: string
+    failed?: boolean
+    failureText?: string
+}
+
+export interface ErrorEntry {
+    message: string
+    stack?: string
+    source?: string
+    line?: number
+    column?: number
+}
+
+export interface RawState {
+    url: string
+    ui: string
+    console: LogEntry[]
+    network: NetworkRequest[]
+    errors: ErrorEntry[]
+    state: Record<string, unknown>
+    timestamp: number
+}
+
+export interface CompactState {
+    url: string
+    ui: string
+    console: string
+    network: string
+    errors: string
+    state: string
+    timestamp: number
+    counts: {
+        console: number
+        network: number
+        errors: number
+        state: number
+    }
+}
+
+export interface Assertion {
+    name: string
+    pass: boolean
+    detail?: string
+}
+
+export interface CheckResult {
+    pass: boolean
+    assertions: Assertion[]
+}
+
+export interface DiffResult {
+    newErrors: LogEntry[]
+    newExceptions: ErrorEntry[]
+    newFailedRequests: NetworkRequest[]
+    uiGone: boolean
+    clean: boolean
+}