aipeek 0.2.5 → 0.2.7

package/src/client/client.ts

@@ -5,7 +5,7 @@
 
 import type { ActionArgs, ActionType } from '../core/action'
 import type { ErrorEntry, LogEntry, NetworkRequest } from '../core/types'
-import { INTERACTIVE, performAction } from '../core/action'
+import { INTERACTIVE, performAction, runEval, withDialogGuard } from '../core/action'
 
 declare global {
     interface Window { __AIPEEK_STORES__?: Record<string, unknown> }
@@ -643,35 +643,36 @@ if (import.meta.hot) {
     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)
+        // Guard against native alert/confirm/prompt freezing the probe (see withDialogGuard).
+        const { result, dialogs } = await withDialogGuard(() => performAction(msg.type, msg.args))
+        if (dialogs.length)
+            result.detail = `${result.detail ?? ''} [auto-dismissed ${dialogs.join('; ')}]`.trim()
+        // realclick resolved to (x,y) but didn't click — synthetic events can't open a Radix
+        // ContextMenu. Fire a trusted click through whatever channel can: in Electron the page
+        // can reach the main process via electronAPI.invoke('aipeek:input') → sendInputEvent;
+        // in a plain Chrome tab it can't (no chrome.debugger from page JS), so leave ui
+        // undefined and let the server drive its extension queue.
+        const electronAPI = (window as { electronAPI?: { invoke: (channel: string, ...args: unknown[]) => Promise<unknown> } }).electronAPI
+        if (msg.type === 'realclick' && result.ok && electronAPI) {
+            await electronAPI.invoke('aipeek:input', { type: 'click', button: msg.args.button ?? 'left', x: result.x, y: result.y })
+            result.ui = await waitForStable()
+            result.screen = collectScreen()
+        }
         // 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')) {
+        else 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.
+    // eval: run server-supplied code in the page with auto-return (see runEval).
     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)
-        }
+        const { ok, value, error } = await runEval(msg.code)
         import.meta.hot!.send('aipeek:eval-result', { id: msg.id, ok, value, error })
     })
 

package/src/core/action.ts

@@ -6,7 +6,7 @@
 //   - 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 type ActionType = 'click' | 'fill' | 'press' | 'wait' | 'screenshot' | 'realclick' | 'query'
 
 export interface ActionArgs {
     sel?: string
@@ -15,6 +15,9 @@ export interface ActionArgs {
     key?: string
     timeout?: number
     gone?: boolean
+    button?: 'left' | 'right'
+    x?: number
+    y?: number
 }
 
 export interface ActionResult {
@@ -24,9 +27,11 @@ export interface ActionResult {
     dataUrl?: string
     ui?: string
     screen?: string
+    x?: number
+    y?: number
 }
 
-const TYPES: ActionType[] = ['click', 'fill', 'press', 'wait', 'screenshot']
+const TYPES: ActionType[] = ['click', 'fill', 'press', 'wait', 'screenshot', 'realclick', 'query']
 
 // --- Pure validation (plugin-side) ---
 
@@ -38,6 +43,8 @@ export function resolveAction(type: string, args: ActionArgs): { valid: boolean,
     switch (type) {
         case 'click':
             return hasTarget ? { valid: true } : { valid: false, error: 'click needs sel= or text=' }
+        case 'realclick':
+            return hasTarget || (args.x !== undefined && args.y !== undefined) ? { valid: true } : { valid: false, error: 'realclick needs sel=, text=, or x= & y=' }
         case 'fill':
             if (!hasTarget)
                 return { valid: false, error: 'fill needs sel= or text=' }
@@ -50,6 +57,8 @@ export function resolveAction(type: string, args: ActionArgs): { valid: boolean,
             return hasTarget ? { valid: true } : { valid: false, error: 'wait needs sel= or text=' }
         case 'screenshot':
             return { valid: true }
+        case 'query':
+            return args.sel ? { valid: true } : { valid: false, error: 'query needs sel=' }
         default:
             return { valid: false, error: `unknown action: ${type}` }
     }
@@ -57,7 +66,7 @@ export function resolveAction(type: string, args: ActionArgs): { valid: boolean,
 
 // --- Browser-side execution (client.ts only) ---
 
-export const INTERACTIVE = 'a, button, input, textarea, select, [role], [onclick], [tabindex], [contenteditable]'
+export const INTERACTIVE = 'a, button, input, textarea, select, [role], [onclick], [tabindex], [contenteditable], [aria-label]'
 
 function visibleText(el: Element): string {
     const aria = el.getAttribute('aria-label')
@@ -103,10 +112,12 @@ export async function performAction(type: ActionType, args: ActionArgs): Promise
     try {
         switch (type) {
             case 'click': return doClick(args)
+            case 'realclick': return doResolveRealClick(args)
             case 'fill': return doFill(args)
             case 'press': return doPress(args)
             case 'wait': return await doWait(args)
             case 'screenshot': return await doScreenshot(args)
+            case 'query': return doQuery(args)
         }
     }
     catch (e) {
@@ -114,6 +125,59 @@ export async function performAction(type: ActionType, args: ActionArgs): Promise
     }
 }
 
+export interface EvalResult { ok: boolean, value?: string, error?: string }
+
+// Run server-supplied JS in the page with auto-return (Chrome-console / Node-REPL
+// ergonomics): try the whole code as a single expression first so `qsa(...).length`
+// or `1+1` yield a value without an explicit `return`. If that fails to *compile*
+// (multi-statement, contains `return`, etc.) fall back to a plain statement block.
+// A compile error only swaps the wrapper; a runtime throw surfaces as the error.
+// undefined results are dropped (no value); objects are JSON-stringified.
+export async function runEval(code: string): Promise<EvalResult> {
+    try {
+        let fn: () => Promise<unknown>
+        try {
+            // eslint-disable-next-line no-new-func
+            fn = new Function(`return (async () => (${code}))()`) as () => Promise<unknown>
+        }
+        catch {
+            // eslint-disable-next-line no-new-func
+            fn = new Function(`return (async () => { ${code} })()`) as () => Promise<unknown>
+        }
+        const result = await fn()
+        const value = result === undefined ? undefined : typeof result === 'string' ? result : JSON.stringify(result, null, 2)
+        return { ok: true, value }
+    }
+    catch (e) {
+        return { ok: false, error: e instanceof Error ? `${e.message}\n${e.stack ?? ''}` : String(e) }
+    }
+}
+
+// Native alert/confirm/prompt are *synchronous* and freeze the whole JS thread until
+// a human dismisses them — which deadlocks the probe (it runs on that same thread, so
+// the HMR channel can never answer and every curl times out). A click that hits a
+// `copy-to-clipboard` fallback or a `confirm("delete?")` would hang aipeek forever.
+// So we stub them for the duration of `fn`: auto-answer (confirm→true, prompt→default,
+// alert→noop) and return what was suppressed so the caller can report it. Always
+// restored in finally — the page's own dialogs work again after the action settles.
+export async function withDialogGuard<T>(fn: () => Promise<T>): Promise<{ result: T, dialogs: string[] }> {
+    const realAlert = window.alert
+    const realConfirm = window.confirm
+    const realPrompt = window.prompt
+    const dialogs: string[] = []
+    window.alert = (m?: unknown) => { dialogs.push(`alert: ${String(m ?? '')}`.slice(0, 80)) }
+    window.confirm = (m?: unknown) => { dialogs.push(`confirm→true: ${String(m ?? '')}`.slice(0, 80)); return true }
+    window.prompt = (m?: unknown, d?: string) => { dialogs.push(`prompt→default: ${String(m ?? '')}`.slice(0, 80)); return d ?? '' }
+    try {
+        return { result: await fn(), dialogs }
+    }
+    finally {
+        window.alert = realAlert
+        window.confirm = realConfirm
+        window.prompt = realPrompt
+    }
+}
+
 // 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()
@@ -173,6 +237,24 @@ function doClick(args: ActionArgs): ActionResult {
     return { ok: true, detail: `clicked ${visibleText(el).slice(0, 40) || el.tagName.toLowerCase()}${note}` }
 }
 
+// realclick resolves an element to a viewport-center (x,y) but does NOT synthetic-click.
+// The trusted click is fired by whichever channel can produce isTrusted=true input:
+// Electron's webContents.sendInputEvent (via electronAPI.invoke, in client.ts) or a Chrome
+// extension's chrome.debugger (via the server's CDP queue). Synthetic events can't open a
+// Radix ContextMenu — that's the whole reason this path exists. When x= & y= are given
+// directly we pass them through unchanged.
+function doResolveRealClick(args: ActionArgs): ActionResult {
+    if (args.x !== undefined && args.y !== undefined)
+        return { ok: true, x: args.x, y: args.y, detail: `resolved (${args.x}, ${args.y})` }
+    const el = findElement(args.sel, args.text)
+    if (!el)
+        return { ok: false, error: `no element for ${args.sel || args.text}`, detail: clickableList() }
+    const r = el.getBoundingClientRect()
+    const x = Math.round(r.left + r.width / 2)
+    const y = Math.round(r.top + r.height / 2)
+    return { ok: true, x, y, detail: `resolved ${visibleText(el).slice(0, 40) || el.tagName.toLowerCase()} at (${x}, ${y})` }
+}
+
 function doFill(args: ActionArgs): ActionResult {
     const el = findElement(args.sel, args.text)
     if (!el)
@@ -197,8 +279,15 @@ function doFill(args: ActionArgs): ActionResult {
         return { ok: true, detail: `filled contenteditable, ${value.length} chars` }
     }
 
+    // React overrides the value setter on the element *instance* to track changes; a plain
+    // `input.value = x` writes through it so React's tracker never sees a diff and onChange
+    // never fires (controlled inputs stay empty). Call the *prototype* setter instead — the
+    // tracker observes the change and the synthetic onChange fires.
     const input = el as HTMLInputElement
-    input.value = value
+    const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype
+    const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set
+    if (setter) setter.call(input, value)
+    else 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` }
@@ -270,3 +359,46 @@ async function doScreenshot(args: ActionArgs): Promise<ActionResult> {
         return { ok: false, error: `screenshot failed: ${msg}` }
     }
 }
+
+// The read-side twin of click/fill's `sel=`: instead of acting on the matched
+// element, report the facts you'd otherwise reach for via /eval — count of
+// matches, and per-element text / visible / assertion-relevant attrs. /wait
+// answers "appears over time"; query answers "what is it now". Attrs are a
+// whitelist (role, data-state, data-*, aria-*, value, disabled, checked, href,
+// title) — a node's full class/style set is noise. Capped at 20 matches.
+const QUERY_ATTRS = ['role', 'data-state', 'value', 'href', 'title']
+const QUERY_PREFIXES = ['data-', 'aria-']
+
+function elAttrs(el: Element): Record<string, string> {
+    const out: Record<string, string> = {}
+    for (const attr of Array.from(el.attributes)) {
+        if (QUERY_ATTRS.includes(attr.name) || QUERY_PREFIXES.some(p => attr.name.startsWith(p)))
+            out[attr.name] = attr.value
+    }
+    const input = el as HTMLInputElement
+    if (typeof input.value === 'string' && out.value === undefined && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT'))
+        out.value = input.value
+    if (input.disabled)
+        out.disabled = 'true'
+    if (input.checked)
+        out.checked = 'true'
+    return out
+}
+
+function doQuery(args: ActionArgs): ActionResult {
+    let els: Element[]
+    try {
+        els = Array.from(document.querySelectorAll(args.sel!))
+    }
+    catch {
+        return { ok: false, error: `invalid selector: ${args.sel} — URL-encode it (curl -G --data-urlencode 'sel=...')` }
+    }
+    const count = els.length
+    const matches = els.slice(0, 20).map(el => ({
+        text: visibleText(el).slice(0, 80),
+        visible: isVisible(el),
+        attrs: elAttrs(el),
+    }))
+    const head = count > 20 ? `(showing 20 of ${count})\n` : ''
+    return { ok: true, detail: head + JSON.stringify({ count, matches }, null, 2) }
+}

package/src/core/compact.ts

@@ -1,5 +1,5 @@
 import type { CompactState, ErrorEntry, LogEntry, NetworkRequest, RawState } from './types'
-import { compactUrl, truncate } from './util'
+import { appStackFrames, compactUrl, formatValue, truncate } from './util'
 
 const SLOW_THRESHOLD = 1000
 
@@ -262,26 +262,14 @@ export function compactErrors(errors: ErrorEntry[]): 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}`)
-            }
+            for (const frame of appStackFrames(err.stack, 5))
+                lines.push(`  ${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 {
@@ -293,7 +281,7 @@ export function compactState(state: Record<string, unknown>): string {
         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)}`)
+                lines.push(`  ${k}: ${truncate(formatValue(v), 120)}`)
             }
         }
         else {
@@ -303,20 +291,6 @@ export function compactState(state: Record<string, unknown>): string {
     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 {

package/src/core/detail.ts

@@ -1,6 +1,6 @@
 import type { ErrorEntry, LogEntry, NetworkRequest, RawState } from './types'
 import { compactUI } from './compact'
-import { truncate } from './util'
+import { appStackFrames, formatValue, truncate } from './util'
 
 export function detail(raw: RawState, section: string, index: string | undefined, full: boolean): string | null {
     switch (section) {
@@ -130,15 +130,10 @@ function detailError(errors: ErrorEntry[], index: string | undefined, full: bool
 
     const lines = [err.message]
     if (err.stack) {
-        const appFrames = err.stack.split('\n')
-            .map(l => l.trim())
-            .filter(l => l.startsWith('at ') && !l.includes('node_modules'))
-            .slice(0, 3)
-        if (appFrames.length)
-            lines.push(...appFrames)
-        const totalApp = err.stack.split('\n').filter(l => l.trim().startsWith('at ') && !l.includes('node_modules')).length
-        if (totalApp > 3)
-            lines.push(`  ... ${totalApp - 3} more app frames`)
+        const all = appStackFrames(err.stack, Infinity)
+        lines.push(...all.slice(0, 3))
+        if (all.length > 3)
+            lines.push(`  ... ${all.length - 3} more app frames`)
     }
     if (err.line != null)
         lines.push(`location: ${err.source || ''}:${err.line}:${err.column ?? 0}`)
@@ -159,10 +154,10 @@ function detailState(state: Record<string, unknown>, name: string | undefined, f
     const value = state[name]
     if (full) {
         try {
-            return JSON.stringify(value, null, 2)
+            return JSON.stringify(value, null, 2) ?? formatValue(value)
         }
         catch {
-            return String(value)
+            return formatValue(value) // 循环引用 / Error / Map → 不再 {}
         }
     }
     if (typeof value !== 'object' || value === null)
@@ -182,20 +177,9 @@ function isArraySentinel(v: string): boolean {
 }
 
 function formatSummaryValue(v: unknown): string {
-    if (v === null || v === undefined)
-        return String(v)
-    if (typeof v === 'string') {
-        if (isArraySentinel(v)) // "Array(N)" from boundedSnapshot — leave untruncated
-            return v
-        return v.length > 80 ? `${v.slice(0, 80)}…` : v
-    }
-    if (typeof v === 'number' || typeof v === 'boolean')
-        return String(v)
-    if (typeof v === 'object') {
-        const s = JSON.stringify(v)
-        return s.length > 80 ? `${s.slice(0, 80)}…` : s
-    }
-    return String(v)
+    if (typeof v === 'string' && isArraySentinel(v)) // "Array(N)" from boundedSnapshot — leave untruncated
+        return v
+    return truncate(formatValue(v), 80)
 }
 
 // --- JSON schema fallback ---

package/src/core/util.ts

@@ -2,6 +2,59 @@ export function truncate(s: string, max: number): string {
     return s.length > max ? `${s.slice(0, max)}…` : s
 }
 
+// unknown → 人类可读字符串。穷举 JS 类型，让 JSON.stringify 的「漏网类型 → {}」失败模式不可能出现。
+// 返回未截断字符串——截断由调用方按各自 max 处理。
+export function formatValue(v: unknown, seen: Set<object> = new Set()): string {
+    if (v === null || v === undefined)
+        return String(v)
+    const t = typeof v
+    if (t === 'string')
+        return v as string
+    if (t === 'number' || t === 'boolean' || t === 'bigint')
+        return String(v)
+    if (t === 'symbol')
+        return (v as symbol).toString()
+    if (t === 'function')
+        return `[Function: ${(v as { name?: string }).name || 'anonymous'}]`
+    // 此后 v 是 object
+    const obj = v as object
+    if (seen.has(obj))
+        return '[Circular]'
+    if (v instanceof Error)
+        return v.stack || `${v.name}: ${v.message}`
+    seen.add(obj)
+    if (v instanceof Map) {
+        const items = [...v.entries()].slice(0, 15).map(([k, val]) => `${formatValue(k, seen)} => ${formatValue(val, seen)}`)
+        return `Map(${v.size}) {${items.join(', ')}${v.size > 15 ? ', …' : ''}}`
+    }
+    if (v instanceof Set) {
+        const items = [...v.values()].slice(0, 15).map(val => formatValue(val, seen))
+        return `Set(${v.size}) {${items.join(', ')}${v.size > 15 ? ', …' : ''}}`
+    }
+    if (Array.isArray(v)) {
+        const items = v.slice(0, 30).map(val => formatValue(val, seen))
+        return `[${items.join(', ')}${v.length > 30 ? ', …' : ''}]`
+    }
+    try {
+        return JSON.stringify(v)
+    }
+    catch {
+        // 循环引用 / getter 抛错 → 手动遍历可枚举键，循环处标 [Circular]
+        const entries = Object.entries(v as Record<string, unknown>).slice(0, 15)
+        const parts = entries.map(([k, val]) => `${k}: ${formatValue(val, seen)}`)
+        return `{${parts.join(', ')}}`
+    }
+}
+
+// stack → 应用栈帧（去 node_modules / <anonymous>），保留 `at ` 前缀。max 与溢出提示由调用方决定。
+export function appStackFrames(stack: string, max: number): string[] {
+    return stack
+        .split('\n')
+        .map(l => l.trim())
+        .filter(l => l.startsWith('at ') && !l.includes('node_modules') && !l.includes('<anonymous>'))
+        .slice(0, max)
+}
+
 // pathname only; pass `search` to append a truncated query string
 export function compactUrl(url: string, search?: number): string {
     try {