aipeek 0.2.5 → 0.2.7

package/src/server/plugin.ts

@@ -21,6 +21,12 @@ function readBody(req: { on: (e: string, cb: (c: unknown) => void) => void }): P
     })
 }
 
+// 所有端点都回文本响应——writeHead(Content-Type) + end 二连写了 15 遍（且有 2 处漏 charset）。收敛成一处。
+function send(res: { writeHead: (s: number, h: Record<string, string>) => void, end: (b: string) => void }, status: number, body: string) {
+    res.writeHead(status, { 'Content-Type': 'text/plain; charset=utf-8' })
+    res.end(body)
+}
+
 const __dirname = dirname(fileURLToPath(import.meta.url))
 // client/core sources are read at runtime (client.ts served via Vite transform,
 // client-patch.ts compiled by esbuild). Two layouts: source consumption
@@ -63,8 +69,12 @@ curl ${base}/console  # console logs (errors, warnings, info)
 curl ${base}/network  # fetch/XHR requests with status and timing
 curl ${base}/errors   # uncaught errors and unhandled rejections
 curl ${base}/state    # registered store snapshots
+curl '${base}/query?sel=[role=menuitem]' # this selector right now: count + each element's text/visible/attrs
 \`\`\`
 
+\`/query\` is the read-side twin of click/fill's \`sel=\` — assert on a specific element
+(how many match, its text, \`data-state\`, \`aria-*\`/\`data-*\`, value, disabled) without \`/eval\`.
+
 \`/screen\` projects the whole UI to a few state variables — start there, not \`/ui\`. Append
 \`?full\` for untruncated output. Append \`/{index}\` for a specific item's detail.
 
@@ -101,7 +111,8 @@ curl -X POST ${base}/chain -d '[
 \`\`\`
 
 **Escape hatch.** \`curl '${base}/eval?code=...'\` (or POST the code as the body) runs arbitrary
-JS in the page and returns the result — for anything the typed endpoints can't do.
+JS in the page and returns the result — for what the typed endpoints can't do (install listeners,
+read closures, probe event flow). For count/text/state/attr assertions reach for \`/query\` first.
 
 aipeek auto-detects errors after HMR and prints them to the terminal — watch for \`[aipeek]\` messages.
 `
@@ -110,27 +121,26 @@ aipeek auto-detects errors after HMR and prints them to the terminal — watch f
 export const START_TAG = '<!-- AIPEEK:START -->'
 export const END_TAG = '<!-- AIPEEK:END -->'
 
-// Marker-based injection — the block lives between START_TAG and END_TAG, so
-// re-injection is a deterministic splice (find markers, replace between) rather
-// than fuzzy line matching. New file → write markers + snippet. Existing markers
-// → replace their contents. No markers yet → append a fresh marked block.
+// Marker-based injection 的纯核心：existing（文件现内容，缺文件传 null）+ port → 新内容。
+// 块夹在 START_TAG..END_TAG 间，再注入是确定性 splice（找标记替换中间）而非模糊行匹配。
+// 缺文件 → 仅块；有标记 → 替换其内容；无标记 → 末尾追加新块。fs 读写是 injectClaudeMd 的边界，
+// 这里 0 副作用——四条分支（新建/替换/追加/补换行）全可被快照锁死。
+export function renderClaudeMd(existing: string | null, port: number): string {
+    const block = `${START_TAG}\n${aipeekSnippet(port).trim()}\n${END_TAG}\n`
+    if (existing === null)
+        return block
+    const si = existing.indexOf(START_TAG)
+    const ei = existing.indexOf(END_TAG)
+    if (si !== -1 && ei !== -1)
+        return existing.slice(0, si) + block.trimEnd() + existing.slice(ei + END_TAG.length)
+    const sep = existing.endsWith('\n') ? '' : '\n'
+    return `${existing}${sep}\n${block}`
+}
+
 export function injectClaudeMd(root: string, port: number) {
     const path = resolve(root, 'CLAUDE.md')
-    const block = `${START_TAG}\n${aipeekSnippet(port).trim()}\n${END_TAG}\n`
     try {
-        if (!existsSync(path)) {
-            writeFileSync(path, block)
-            return
-        }
-        const content = readFileSync(path, 'utf-8')
-        const si = content.indexOf(START_TAG)
-        const ei = content.indexOf(END_TAG)
-        if (si !== -1 && ei !== -1) {
-            writeFileSync(path, content.slice(0, si) + block.trimEnd() + content.slice(ei + END_TAG.length))
-            return
-        }
-        const sep = content.endsWith('\n') ? '' : '\n'
-        writeFileSync(path, `${content}${sep}\n${block}`)
+        writeFileSync(path, renderClaudeMd(existsSync(path) ? readFileSync(path, 'utf-8') : null, port))
     }
     catch {}
 }
@@ -143,6 +153,38 @@ export function aipeekPlugin(): Plugin {
     const pendingActions = new Map<number, (r: ActionResult) => void>()
     let actionId = 0
 
+    // Chrome real-input channel: synthetic events can't open a Radix ContextMenu, and the
+    // in-page script can't reach chrome.debugger. So for a plain browser tab, realclick is a
+    // two-step handshake — the page resolves the element to (x,y), then the server enqueues a
+    // CDP command here for the extension to execute with trusted input. The extension long-polls
+    // /cdp/poll for the next command and POSTs the verdict to /cdp/result. Electron never touches
+    // this (it fires sendInputEvent in-process from the page — see client.ts).
+    interface CdpCommand { id: number, x: number, y: number, button: 'left' | 'right' }
+    const cdpQueue: CdpCommand[] = []
+    let cdpWaiter: ((cmd: CdpCommand | null) => void) | null = null
+    const cdpResults = new Map<number, (r: { ok: boolean, error?: string }) => void>()
+    let cdpId = 0
+
+    function runCdpClick(x: number, y: number, button: 'left' | 'right'): Promise<{ ok: boolean, error?: string }> {
+        const id = ++cdpId
+        const cmd: CdpCommand = { id, x, y, button }
+        return new Promise((resolve, reject) => {
+            cdpResults.set(id, resolve)
+            // hand the command to a parked poller, else queue it for the next poll
+            if (cdpWaiter) {
+                cdpWaiter(cmd)
+                cdpWaiter = null
+            }
+            else {
+                cdpQueue.push(cmd)
+            }
+            setTimeout(() => {
+                if (cdpResults.delete(id))
+                    reject(new Error('cdp timeout: no extension result within 10s (is the aipeek extension loaded and the debugger attached?)'))
+            }, 10000)
+        })
+    }
+
     let pendingDom: ((dom: string) => void) | null = null
     let pendingScreen: ((screen: string) => void) | null = null
     const pendingEvals = new Map<number, (r: { ok: boolean, value?: string, error?: string }) => void>()
@@ -220,6 +262,24 @@ export function aipeekPlugin(): Plugin {
         }, fullMs)
     }
 
+    // sendAction + the Chrome realclick handshake, in one place so the single endpoint and
+    // /chain both get it. The page resolves realclick to (x,y): if it set result.ui, Electron
+    // already fired the trusted click in-process — done. If ui is undefined (plain Chrome tab),
+    // the page couldn't click, so drive the extension's CDP queue with the coords, then collect
+    // the settled screen as the ui. A CDP failure comes back as a normal ok:false result.
+    async function runAction(type: string, args: ActionArgs): Promise<ActionResult> {
+        const result = await sendAction(type, args)
+        lastRaw = null // page mutated; force fresh collect next read
+        if (type === 'realclick' && result.ok && result.ui === undefined) {
+            const cdp = await runCdpClick(result.x!, result.y!, args.button ?? 'left')
+            if (!cdp.ok)
+                return { ok: false, error: `cdp click failed: ${cdp.error ?? 'unknown'}` }
+            result.detail = `${result.detail} → clicked via extension`
+            result.ui = await collectScreenFromClient()
+        }
+        return result
+    }
+
     function evalInClient(code: string): Promise<{ ok: boolean, value?: string, error?: string }> {
         const id = ++evalId
         return twoPhase('aipeek:eval', { id, code }, (resolve) => {
@@ -331,13 +391,11 @@ export function aipeekPlugin(): Plugin {
                         if (!code && req.method === 'POST')
                             code = await readBody(req)
                         if (!code) {
-                            res.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' })
-                            res.end('eval needs ?code= or a POST body')
+                            send(res, 400, 'eval needs ?code= or a POST body')
                             return
                         }
                         const r = await evalInClient(code)
-                        res.writeHead(r.ok ? 200 : 422, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(r.ok ? (r.value ?? 'undefined') : `error: ${r.error}`)
+                        send(res, r.ok ? 200 : 422, r.ok ? (r.value ?? 'undefined') : `error: ${r.error}`)
                         return
                     }
 
@@ -347,16 +405,59 @@ export function aipeekPlugin(): Plugin {
                             url.searchParams.get('scope') || undefined,
                             url.searchParams.get('sel') || undefined,
                         )
-                        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(dom || '(empty)')
+                        send(res, 200, dom || '(empty)')
                         return
                     }
 
                     // /__aipeek/screen — state-machine projection {view, modal, focus, knobs}
                     if (parts[0] === 'screen') {
                         const screen = await collectScreenFromClient()
-                        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(screen || '(empty)')
+                        send(res, 200, screen || '(empty)')
+                        return
+                    }
+
+                    // /__aipeek/cdp/poll — the Chrome extension long-polls here for the next
+                    // trusted-input command. Returns the command as JSON, or 204 on timeout
+                    // (the extension simply re-polls). Only one poller is parked at a time.
+                    if (parts[0] === 'cdp' && parts[1] === 'poll') {
+                        const queued = cdpQueue.shift()
+                        if (queued) {
+                            send(res, 200, JSON.stringify(queued))
+                            return
+                        }
+                        const cmd = await new Promise<CdpCommand | null>((resolve) => {
+                            cdpWaiter = resolve
+                            setTimeout(() => {
+                                if (cdpWaiter === resolve) {
+                                    cdpWaiter = null
+                                    resolve(null)
+                                }
+                            }, 25000)
+                        })
+                        if (cmd)
+                            send(res, 200, JSON.stringify(cmd))
+                        else
+                            send(res, 204, '')
+                        return
+                    }
+
+                    // /__aipeek/cdp/result — POST {id, ok, error?}; resolves the awaiting realclick.
+                    if (parts[0] === 'cdp' && parts[1] === 'result') {
+                        const body = await readBody(req)
+                        let data: { id: number, ok: boolean, error?: string }
+                        try {
+                            data = JSON.parse(body)
+                        }
+                        catch {
+                            send(res, 400, 'cdp/result needs a JSON body {id, ok, error?}')
+                            return
+                        }
+                        const resolveCdp = cdpResults.get(data.id)
+                        if (resolveCdp) {
+                            cdpResults.delete(data.id)
+                            resolveCdp({ ok: data.ok, error: data.error })
+                        }
+                        send(res, 200, 'ok')
                         return
                     }
 
@@ -372,8 +473,7 @@ export function aipeekPlugin(): Plugin {
                                 throw new Error('body must be a JSON array')
                         }
                         catch (e) {
-                            res.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' })
-                            res.end(`invalid chain body: ${e instanceof Error ? e.message : String(e)}`)
+                            send(res, 400, `invalid chain body: ${e instanceof Error ? e.message : String(e)}`)
                             return
                         }
                         lastRaw = null
@@ -388,7 +488,7 @@ export function aipeekPlugin(): Plugin {
                                 allOk = false
                                 break
                             }
-                            const r = await sendAction(type, args)
+                            const r = await runAction(type, args)
                             lines.push(`[${i}] ${r.ok ? '✓' : '✗'} ${type}: ${r.ok ? (r.detail || 'ok') : r.error}`)
                             // Per-step screen projection — captures the transition each
                             // mutating step caused, so a view change mid-chain is visible
@@ -402,13 +502,12 @@ export function aipeekPlugin(): Plugin {
                                 break
                             }
                         }
-                        res.writeHead(allOk ? 200 : 422, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(lastUi ? `${lines.join('\n')}\n\n--- ui after ---\n${lastUi}` : lines.join('\n'))
+                        send(res, allOk ? 200 : 422, lastUi ? `${lines.join('\n')}\n\n--- ui after ---\n${lastUi}` : lines.join('\n'))
                         return
                     }
 
-                    // action endpoints: /__aipeek/{click|fill|press|wait|screenshot}?...
-                    if (['click', 'fill', 'press', 'wait', 'screenshot'].includes(parts[0])) {
+                    // action endpoints: /__aipeek/{click|fill|press|wait|screenshot|realclick}?...
+                    if (['click', 'fill', 'press', 'wait', 'screenshot', 'realclick', 'query'].includes(parts[0])) {
                         const q = url.searchParams
                         const args: ActionArgs = {
                             sel: q.get('sel') || undefined,
@@ -417,28 +516,27 @@ export function aipeekPlugin(): Plugin {
                             key: q.get('key') || undefined,
                             timeout: q.has('timeout') ? Number(q.get('timeout')) : undefined,
                             gone: q.has('gone') ? q.get('gone') !== 'false' : undefined,
+                            button: q.get('button') === 'right' ? 'right' : q.get('button') === 'left' ? 'left' : undefined,
+                            x: q.has('x') ? Number(q.get('x')) : undefined,
+                            y: q.has('y') ? Number(q.get('y')) : undefined,
                         }
                         const check = resolveAction(parts[0], args)
                         if (!check.valid) {
-                            res.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' })
-                            res.end(check.error)
+                            send(res, 400, check.error ?? 'invalid action')
                             return
                         }
-                        const result = await sendAction(parts[0], args)
-                        lastRaw = null // page mutated; force fresh collect next read
+                        const result = await runAction(parts[0], args)
                         if (parts[0] === 'screenshot' && result.dataUrl) {
                             const dir = resolve(server.config.root, '.aipeek')
                             mkdirSync(dir, { recursive: true })
                             const name = q.get('out') || `shot-${result.dataUrl.length}.png`
                             const file = resolve(dir, name)
                             writeFileSync(file, Buffer.from(result.dataUrl.split(',')[1], 'base64'))
-                            res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                            res.end(`saved: ${file}`)
+                            send(res, 200, `saved: ${file}`)
                             return
                         }
-                        res.writeHead(result.ok ? 200 : 422, { 'Content-Type': 'text/plain; charset=utf-8' })
                         const head = result.ok ? (result.detail || 'ok') : `${result.error}${result.detail ? `\n\nclickable: ${result.detail}` : ''}`
-                        res.end(result.ui ? `${head}\n\n--- ui after ---\n${result.ui}` : head)
+                        send(res, result.ok ? 200 : 422, result.ui ? `${head}\n\n--- ui after ---\n${result.ui}` : head)
                         return
                     }
 
@@ -448,8 +546,7 @@ export function aipeekPlugin(): Plugin {
                         lastRaw = raw
                         const result = check(raw)
                         const output = emitCheck(result)
-                        res.writeHead(result.pass ? 200 : 417, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(output)
+                        send(res, result.pass ? 200 : 417, output)
                         return
                     }
 
@@ -459,12 +556,10 @@ export function aipeekPlugin(): Plugin {
                             lastRaw = await collectFromClient()
                         const result = detail(lastRaw, parts[0], parts[1], full)
                         if (result !== null) {
-                            res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                            res.end(result)
+                            send(res, 200, result)
                             return
                         }
-                        res.writeHead(404, { 'Content-Type': 'text/plain' })
-                        res.end(`not found: ${parts.join('/')}`)
+                        send(res, 404, `not found: ${parts.join('/')}`)
                         return
                     }
 
@@ -473,19 +568,14 @@ export function aipeekPlugin(): Plugin {
                     lastRaw = raw
                     if (full) {
                         const compacted = compact(raw)
-                        const output = emit(compacted)
-                        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(output)
+                        send(res, 200, emit(compacted))
                     }
                     else {
-                        const output = emitSummary(raw)
-                        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
-                        res.end(output)
+                        send(res, 200, emitSummary(raw))
                     }
                 }
                 catch (err) {
-                    res.writeHead(504, { 'Content-Type': 'text/plain' })
-                    res.end(err instanceof Error ? err.message : 'unknown error')
+                    send(res, 504, err instanceof Error ? err.message : 'unknown error')
                 }
             })
         },