aipeek 0.2.2 → 0.2.3

package/src/client/client.ts

@@ -0,0 +1,689 @@
+/// <reference types="vite/client" />
+// aipeek client — collectors + HMR channel (module)
+// The patch code (console/fetch/XHR/errors) is in client-patch.ts,
+// injected as a synchronous inline script before any modules execute.
+
+import type { ActionArgs, ActionType } from '../core/action'
+import type { ErrorEntry, LogEntry, NetworkRequest } from '../core/types'
+import { INTERACTIVE, performAction } from '../core/action'
+
+declare global {
+    interface Window { __AIPEEK_STORES__?: Record<string, unknown> }
+}
+
+interface AipeekBuffers {
+    consoleLogs: LogEntry[]
+    networkRequests: NetworkRequest[]
+    errorEntries: ErrorEntry[]
+}
+
+// Read buffers from the synchronous patch script
+const buffers = (window as any).__AIPEEK_BUFFERS__ as AipeekBuffers | undefined
+const consoleLogs: LogEntry[] = buffers?.consoleLogs ?? []
+const networkRequests: NetworkRequest[] = buffers?.networkRequests ?? []
+const errorEntries: ErrorEntry[] = buffers?.errorEntries ?? []
+
+// --- On-demand collectors ---
+
+const SKIP_TAGS = new Set(['script', 'style', 'noscript', 'link', 'meta', 'head'])
+
+const IMPLICIT_ROLES: Record<string, string> = {
+    a: 'link',
+    button: 'button',
+    input: 'textbox',
+    textarea: 'textbox',
+    select: 'combobox',
+    img: 'img',
+    nav: 'navigation',
+    main: 'main',
+    header: 'banner',
+    footer: 'contentinfo',
+    aside: 'complementary',
+    form: 'form',
+    dialog: 'dialog',
+    ul: 'list',
+    ol: 'list',
+    li: 'listitem',
+    table: 'table',
+    h1: 'heading',
+    h2: 'heading',
+    h3: 'heading',
+    h4: 'heading',
+    h5: 'heading',
+    h6: 'heading',
+}
+
+function collectUI(): string {
+    const root = document.getElementById('root')
+    if (!root)
+        return collectDomFallback()
+
+    const fiberKey = Object.keys(root).find(k =>
+        k.startsWith('__reactContainer$') || k.startsWith('__reactFiber$'),
+    )
+    if (!fiberKey)
+        return collectDomFallback()
+
+    const rootFiber = (root as any)[fiberKey]
+    if (!rootFiber)
+        return collectDomFallback()
+
+    const COMPONENT_TAGS = new Set([0, 1, 14, 15])
+    const SKIP_EXACT = new Set([
+        'Fragment',
+        'Suspense',
+        'StrictMode',
+        'Context',
+        'Outlet',
+        'Routes',
+        'RenderedRoute',
+        'DataRoutes',
+        'RemoveScrollBar',
+        'Sheet',
+        'Router',
+        'RenderErrorBoundary',
+        'Tooltip',
+        'Popover',
+        'Dialog',
+        'DropdownMenu',
+        'ContextMenu',
+        'HoverCard',
+        'Select',
+        'Command',
+        'Tabs',
+        'RadioGroup',
+        'Markdown',
+        'Sonner',
+    ])
+    // wrapper components carry no UI semantics — skip by name shape
+    const SKIP_CONTAINS = ['Provider', 'Consumer', 'Portal', 'Popper', 'Presence', 'SideCar']
+    const SKIP_ENDS = ['Warning', 'Header', 'Footer', 'Menu', 'Root']
+    const isSkipped = (name: string) =>
+        SKIP_CONTAINS.some(s => name.includes(s)) || SKIP_ENDS.some(s => name.endsWith(s))
+    const lines: string[] = []
+
+    // strip a trailing run of digits (React dedup suffix: Foo2 → Foo)
+    function cleanName(name: string): string {
+        let end = name.length
+        while (end > 0 && name[end - 1] >= '0' && name[end - 1] <= '9') end--
+        return name.slice(0, end)
+    }
+
+    function getDomDesc(fiber: any): string {
+        const el = fiber.stateNode
+        if (!(el instanceof Element))
+            return ''
+
+        const parts: string[] = []
+        const tag = el.tagName.toLowerCase()
+        const role = el.getAttribute('role') || IMPLICIT_ROLES[tag] || ''
+        if (role)
+            parts.push(role)
+
+        const ariaLabel = el.getAttribute('aria-label') || ''
+        const text = ariaLabel || getDirectText(el)
+        if (text)
+            parts.push(`"${text.slice(0, 80)}"`)
+
+        for (const s of baseState(el)) parts.push(`[${s}]`)
+
+        return parts.join(' ')
+    }
+
+    function getComponentDomDesc(fiber: any): string {
+        let node = fiber.child
+        while (node) {
+            if (node.tag === 5)
+                return getDomDesc(node)
+            if (node.tag === 6) {
+                const text = node.memoizedProps
+                if (typeof text === 'string' && text.trim())
+                    return `"${text.trim().slice(0, 80)}"`
+            }
+            node = node.child
+        }
+        return ''
+    }
+
+    function walkFiber(fiber: any, depth: number) {
+        if (!fiber || depth > 40)
+            return
+
+        const isComponent = COMPONENT_TAGS.has(fiber.tag)
+        const rawName = fiber.type?.displayName || fiber.type?.name
+
+        if (isComponent && rawName && rawName.length > 1 && rawName[0] !== '_'
+            && !SKIP_EXACT.has(rawName) && !isSkipped(rawName)) {
+            const name = cleanName(rawName)
+            const indent = '  '.repeat(depth)
+            let desc = name
+
+            const domDesc = getComponentDomDesc(fiber)
+            if (domDesc)
+                desc += ` — ${domDesc}`
+
+            const props = fiber.memoizedProps
+            if (props?.generating)
+                desc += ' [generating]'
+            if (props?.loading)
+                desc += ' [loading]'
+
+            lines.push(`${indent}${desc}`)
+            walkChildren(fiber, depth + 1)
+        }
+        else {
+            walkChildren(fiber, depth)
+        }
+    }
+
+    function walkChildren(fiber: any, depth: number) {
+        let child = fiber.child
+        while (child) {
+            walkFiber(child, depth)
+            child = child.sibling
+        }
+    }
+
+    walkFiber(rootFiber, 0)
+    if (!lines.length)
+        return collectDomFallback()
+
+    const minIndent = Math.min(...lines.map(l => l.length - l.trimStart().length))
+    if (minIndent > 0)
+        return lines.map(l => l.slice(minIndent)).join('\n')
+    return lines.join('\n')
+}
+
+function collectDomFallback(): string {
+    const lines: string[] = []
+
+    function walk(el: Element, depth: number) {
+        if (depth > 12)
+            return
+        const tag = el.tagName.toLowerCase()
+        if (SKIP_TAGS.has(tag))
+            return
+        if (tag === 'svg') {
+            lines.push(`${'  '.repeat(depth)}img: [svg]`)
+            return
+        }
+
+        const role = el.getAttribute('role') || IMPLICIT_ROLES[tag] || ''
+        const ariaLabel = el.getAttribute('aria-label') || ''
+        const directText = getDirectText(el)
+
+        let desc = role || tag
+        if (ariaLabel)
+            desc += `: ${ariaLabel}`
+        else if (directText)
+            desc += `: ${directText.slice(0, 80)}`
+
+        for (const s of baseState(el)) desc += ` [${s}]`
+
+        lines.push('  '.repeat(depth) + desc)
+        for (const child of el.children) walk(child, depth + 1)
+    }
+
+    walk(document.body, 0)
+    return lines.join('\n')
+}
+
+function getDirectText(el: Element): string {
+    let text = ''
+    for (const node of el.childNodes) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const t = node.textContent?.trim()
+            if (t)
+                text += (text ? ' ' : '') + t
+        }
+    }
+    return text
+}
+
+// --- Semantic DOM collector ---
+// UI-as-text: strip Tailwind atomic classes, keep only what carries meaning —
+// tag, role, semantic classes, data-*/aria, text, interactive state, a usable selector.
+
+// Tailwind atomic-class prefixes. A class is "noise" if it starts with one of
+// these (with - or end), or contains a variant separator (hover:, md:, dark:).
+const TW_PREFIXES = new Set([
+    'flex',
+    'grid',
+    'block',
+    'inline',
+    'hidden',
+    'table',
+    'contents',
+    'p',
+    'px',
+    'py',
+    'pt',
+    'pb',
+    'pl',
+    'pr',
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mb',
+    'ml',
+    'mr',
+    'w',
+    'h',
+    'min',
+    'max',
+    'size',
+    'gap',
+    'space',
+    'text',
+    'font',
+    'leading',
+    'tracking',
+    'whitespace',
+    'truncate',
+    'break',
+    'bg',
+    'border',
+    'rounded',
+    'ring',
+    'shadow',
+    'outline',
+    'divide',
+    'opacity',
+    'items',
+    'justify',
+    'self',
+    'place',
+    'content',
+    'order',
+    'col',
+    'row',
+    'absolute',
+    'relative',
+    'fixed',
+    'sticky',
+    'static',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'z',
+    'inset',
+    'overflow',
+    'overscroll',
+    'cursor',
+    'select',
+    'pointer',
+    'resize',
+    'scroll',
+    'transition',
+    'duration',
+    'ease',
+    'delay',
+    'animate',
+    'transform',
+    'translate',
+    'rotate',
+    'scale',
+    'skew',
+    'origin',
+    'fill',
+    'stroke',
+    'object',
+    'aspect',
+    'basis',
+    'shrink',
+    'grow',
+    'flex',
+    'antialiased',
+    'uppercase',
+    'lowercase',
+    'capitalize',
+    'italic',
+    'underline',
+    'line',
+    'list',
+    'align',
+    'backdrop',
+    'blur',
+    'brightness',
+    'contrast',
+    'saturate',
+    'invert',
+    'sepia',
+    'grayscale',
+])
+
+function isNoiseClass(cls: string): boolean {
+    if (cls.includes(':')) // variant: hover:, md:, dark:, group-hover:
+        return true
+    if (cls[0] === '[') // arbitrary value: [mask-type:luminance]
+        return true
+    const head = cls.split('-')[0]
+    return TW_PREFIXES.has(head)
+}
+
+export function semanticClasses(el: Element): string {
+    const cls = el.getAttribute('class')
+    if (!cls)
+        return ''
+    return cls.split(' ').map(c => c.trim()).filter(c => c && !isNoiseClass(c)).slice(0, 6).join('.')
+}
+
+// code-inspector data-insp-path looks like "src/features/Sidebar/index.tsx:78:17:App"
+// → compact to "Sidebar/index.tsx:78" (last dir + file + line)
+export function inspPath(el: Element): string {
+    const raw = el.getAttribute('data-insp-path')
+    if (!raw)
+        return ''
+    const segs = raw.split(':')
+    const file = segs[0]
+    const line = segs[1]
+    const fileParts = file.split('/')
+    const tail = fileParts.slice(-2).join('/')
+    return line ? `${tail}:${line}` : tail
+}
+
+// focused/disabled/expanded — the three states shared by every DOM describer
+function baseState(el: Element): string[] {
+    const parts: string[] = []
+    if (document.activeElement === el)
+        parts.push('focused')
+    if ((el as HTMLButtonElement).disabled)
+        parts.push('disabled')
+    if (el.getAttribute('aria-expanded') === 'true')
+        parts.push('expanded')
+    return parts
+}
+
+function domState(el: Element): string {
+    const parts = baseState(el)
+    if (el.getAttribute('aria-selected') === 'true' || el.getAttribute('aria-checked') === 'true')
+        parts.push('selected')
+    if ((el as HTMLInputElement).value)
+        parts.push(`value="${(el as HTMLInputElement).value.slice(0, 40)}"`)
+    if (el.hasAttribute('contenteditable'))
+        parts.push('editable')
+    return parts.length ? ` {${parts.join(' ')}}` : ''
+}
+
+// Find the scope root: a CSS selector, or a component name matched against the
+// code-inspector data-insp-path. Returns body when no scope given, null on miss.
+function scopeRoot(scope?: string, sel?: string): Element | null {
+    if (sel)
+        return document.querySelector(sel)
+    if (scope) {
+        const all = document.querySelectorAll('[data-insp-path]')
+        const lower = scope.toLowerCase()
+        for (const el of all) {
+            if ((el.getAttribute('data-insp-path') || '').toLowerCase().includes(lower))
+                return el
+        }
+        return null
+    }
+    return document.body
+}
+
+export function collectDom(scope?: string, sel?: string): string {
+    const root = scopeRoot(scope, sel)
+    if (!root)
+        return `(no element for scope="${scope || sel}")`
+    const lines: string[] = []
+
+    function walk(el: Element, depth: number) {
+        if (depth > 20)
+            return
+        const tag = el.tagName.toLowerCase()
+        if (SKIP_TAGS.has(tag))
+            return
+        if (tag === 'svg') {
+            if (el.getBoundingClientRect().width > 0)
+                lines.push(`${'  '.repeat(depth)}svg [icon]`)
+            return
+        }
+
+        const role = el.getAttribute('role') || IMPLICIT_ROLES[tag] || ''
+        const sem = semanticClasses(el)
+        // data-* minus framework noise. data-insp-path (code-inspector) is the source
+        // location — keep it, but compacted to its file:line tail, shown only when the
+        // node is itself meaningful (carries role/text/state), not on bare wrappers.
+        const dataAttrs = Array.from(el.attributes)
+            .filter(a => a.name.startsWith('data-') && a.name !== 'data-testid' && a.name !== 'data-insp-path')
+            .map(a => a.value ? `${a.name}="${a.value.slice(0, 30)}"` : a.name)
+            .slice(0, 3)
+        const aria = el.getAttribute('aria-label') || ''
+        const text = aria || getDirectText(el)
+        const state = domState(el)
+
+        // collapse an element whose only child is an icon → one line
+        const onlyIcon = el.children.length === 1 && el.children[0].tagName.toLowerCase() === 'svg'
+
+        // a node is meaningful if it carries semantics a layout div doesn't
+        const meaningful = !!(role || sem || dataAttrs.length || text || el.id || state || el.hasAttribute('contenteditable'))
+
+        if (meaningful) {
+            const parts = [role ? `${tag}[${role}]` : tag]
+            if (sem)
+                parts.push(`.${sem}`)
+            if (el.id)
+                parts.push(`#${el.id}`)
+            for (const d of dataAttrs)
+                parts.push(`[${d}]`)
+            if (text)
+                parts.push(`"${text.slice(0, 60)}"`)
+            if (onlyIcon)
+                parts.push('[icon]')
+            const src = inspPath(el)
+            lines.push('  '.repeat(depth) + parts.join(' ') + state + (src ? ` @${src}` : ''))
+            depth += 1
+        }
+
+        if (!onlyIcon) {
+            for (const child of el.children) walk(child, depth)
+        }
+    }
+
+    walk(root, 0)
+    return lines.join('\n')
+}
+
+function collectState(): Record<string, unknown> {
+    const stores = window.__AIPEEK_STORES__
+    if (!stores)
+        return {}
+
+    const result: Record<string, unknown> = {}
+    for (const [name, store] of Object.entries(stores)) {
+        try {
+            result[name] = boundedSnapshot(store)
+        }
+        catch {
+            result[name] = '[error]'
+        }
+    }
+    return result
+}
+
+// State-machine projection: collapse the whole UI to {view, modal, focus, knobs}
+// — the few variables a human reads off a washing-machine panel to act in O(1).
+// knobs are clipped to what's reachable *now*: when a modal is open, only its
+// subtree counts (the layer beneath is unclickable).
+export function collectScreen(): string {
+    const stores = window.__AIPEEK_STORES__ as Record<string, any> | undefined
+    const view = stores?.appUIStore?.mode ?? '(unknown)'
+
+    const modalEl = document.querySelector('[role="dialog"][data-state="open"]')
+    const modalTitle = modalEl
+        ? (modalEl.querySelector('h1, h2, [id^="radix"]')?.textContent || '').trim().slice(0, 40)
+        : ''
+    const modal = modalEl ? `${modalTitle || 'untitled'} @${inspPath(modalEl) || 'dialog'}` : 'none'
+
+    // Icon buttons carry no direct text — fall back to title, then any nested text.
+    const labelOf = (el: Element) => (el.getAttribute('aria-label') || getDirectText(el) || el.getAttribute('title') || (el.textContent || '').trim()).trim()
+    const visible = (el: Element) => el.getBoundingClientRect().width > 0
+
+    const active = document.activeElement
+    const focus = active && active !== document.body
+        ? `${labelOf(active).slice(0, 30) || active.tagName.toLowerCase()} [${active.tagName.toLowerCase()}]${domState(active)}`
+        : 'none'
+
+    // Group by source location. A source rendered many times is a *list* (content),
+    // not a control — collapse it to one "source ×N" line. The washing-machine
+    // panel shows "the laundry", not every garment.
+    const root = modalEl ?? document.body
+    const bySource = new Map<string, Element[]>()
+    for (const el of root.querySelectorAll(INTERACTIVE)) {
+        if (!visible(el))
+            continue
+        const loc = inspPath(el) || '?'
+        if (!bySource.has(loc))
+            bySource.set(loc, [])
+        bySource.get(loc)!.push(el)
+    }
+    const knobs: string[] = []
+    for (const [loc, els] of bySource) {
+        if (els.length > 2) {
+            knobs.push(`  ${loc} ×${els.length} (list)`)
+            continue
+        }
+        for (const el of els) {
+            const label = labelOf(el).slice(0, 40)
+            knobs.push(`  ${label || `<${el.tagName.toLowerCase()}>`} [${el.tagName.toLowerCase()}]${loc !== '?' ? ` ${loc}` : ''}${domState(el)}`)
+        }
+        if (knobs.length >= 40)
+            break
+    }
+
+    return [
+        `view: ${view}`,
+        `modal: ${modal}`,
+        `focus: ${focus}`,
+        `knobs (${knobs.length}):`,
+        ...knobs,
+    ].join('\n')
+}
+
+function boundedSnapshot(obj: unknown, depth = 0): unknown {
+    if (depth > 3)
+        return '[…]'
+    if (obj === null || obj === undefined)
+        return obj
+    if (typeof obj === 'function')
+        return undefined
+    if (typeof obj === 'string')
+        return obj.length > 100 ? `${obj.slice(0, 100)}…` : obj
+    if (typeof obj !== 'object')
+        return obj
+    if (Array.isArray(obj))
+        return `Array(${obj.length})`
+
+    const result: Record<string, unknown> = {}
+    for (const [k, v] of Object.entries(obj as Record<string, unknown>).slice(0, 20)) {
+        if (typeof v === 'function')
+            continue
+        result[k] = boundedSnapshot(v, depth + 1)
+    }
+    return result
+}
+
+// --- HMR channel ---
+
+// Resolve once the DOM goes quiet (no mutations for `quiet`ms) or `timeout` hits,
+// then return the fresh UI tree. Lets a click/fill report its own outcome.
+function waitForStable(quiet = 150, timeout = 2000): Promise<string> {
+    return new Promise((resolve) => {
+        const start = performance.now()
+        let timer = 0
+        let observer: MutationObserver
+        const done = () => {
+            observer.disconnect()
+            clearTimeout(timer)
+            resolve(collectUI())
+        }
+        observer = new MutationObserver(() => {
+            clearTimeout(timer)
+            if (performance.now() - start > timeout)
+                done()
+            else
+                timer = window.setTimeout(done, quiet)
+        })
+        observer.observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true })
+        timer = window.setTimeout(done, quiet)
+    })
+}
+
+// Multi-tab: the HMR channel broadcasts to every open tab. Only the tab the user
+// is actually looking at should answer — otherwise server races N responses and
+// keeps a random one, while click/fill fire in *all* tabs. visibilityState is
+// 'visible' for exactly the focused tab (or single tab), 'hidden' for the rest.
+//
+// But when the user is reading the terminal, EVERY dev tab is hidden — then no one
+// would answer. So the server sends requireVisible=true first; if it times out with
+// no answer it retries requireVisible=false, and every tab answers (the original
+// race). `skip` collapses that into one guard: hidden tab skips only round one.
+function skip(msg?: { requireVisible?: boolean }) {
+    return msg?.requireVisible !== false && document.visibilityState !== 'visible'
+}
+
+if (import.meta.hot) {
+    import.meta.hot.on('aipeek:collect', (msg: { requireVisible?: boolean }) => {
+        if (skip(msg))
+            return
+        import.meta.hot!.send('aipeek:state', {
+            url: location.href,
+            ui: collectUI(),
+            console: [...consoleLogs],
+            network: [...networkRequests],
+            errors: [...errorEntries],
+            state: collectState(),
+            timestamp: Date.now(),
+        })
+    })
+
+    import.meta.hot.on('aipeek:action', async (msg: { id: number, type: ActionType, args: ActionArgs, requireVisible?: boolean }) => {
+        if (skip(msg))
+            return
+        const result = await performAction(msg.type, msg.args)
+        // For mutating actions, settle the DOM then ship both the full UI tree and
+        // the compact screen projection — the caller skips a round-trip to /ui, and
+        // /chain uses the per-step screen so an interaction's every transition shows.
+        if (result.ok && (msg.type === 'click' || msg.type === 'fill' || msg.type === 'press')) {
+            result.ui = await waitForStable()
+            result.screen = collectScreen()
+        }
+        import.meta.hot!.send('aipeek:result', { id: msg.id, ...result })
+    })
+
+    // eval: run server-supplied code in the page. Wrapped in an async IIFE so the
+    // code can `await` and use `return`; non-string results are JSON-stringified.
+    import.meta.hot.on('aipeek:eval', async (msg: { id: number, code: string, requireVisible?: boolean }) => {
+        if (skip(msg))
+            return
+        let ok = true
+        let value: string | undefined
+        let error: string | undefined
+        try {
+            // eslint-disable-next-line no-new-func
+            const fn = new Function(`return (async () => { ${msg.code} })()`)
+            const result = await fn()
+            value = typeof result === 'string' ? result : JSON.stringify(result, null, 2)
+        }
+        catch (e) {
+            ok = false
+            error = e instanceof Error ? `${e.message}\n${e.stack ?? ''}` : String(e)
+        }
+        import.meta.hot!.send('aipeek:eval-result', { id: msg.id, ok, value, error })
+    })
+
+    import.meta.hot.on('aipeek:collect-dom', (msg: { scope?: string, sel?: string, requireVisible?: boolean }) => {
+        if (skip(msg))
+            return
+        import.meta.hot!.send('aipeek:dom', { dom: collectDom(msg?.scope, msg?.sel) })
+    })
+
+    import.meta.hot.on('aipeek:collect-screen', (msg: { requireVisible?: boolean }) => {
+        if (skip(msg))
+            return
+        import.meta.hot!.send('aipeek:screen', { screen: collectScreen() })
+    })
+}