aipeek 0.2.6 → 0.2.8

package/src/client/client-patch.ts

@@ -2,14 +2,35 @@
 // Injected as inline <script> at head-prepend to patch console/fetch/XHR/errors
 // BEFORE any application modules execute.
 
-import type { ErrorEntry, LogEntry, NetworkRequest } from '../core/types'
+import type { ActionEntry, ErrorEntry, LogEntry, NetworkRequest } from '../core/types'
 
 type NetworkEntry = NetworkRequest
 
+// --- Perf buffer (runtime accumulation; client.ts projects it into PerformanceData) ---
+// Internal shape differs from core/types PerformanceData: buckets is a name→bucket map (not
+// array), carries startedAt + active (the live view key). client.ts does the array/windowMs
+// projection on collect.
+interface PerfStatBuf { total: number, n: number, max: number, samples: number[] }
+interface PerfBucketBuf {
+    components: Record<string, PerfStatBuf>
+    frames: { total: number, long: number, max: number, samples: number[] }
+    lines: Record<string, PerfStatBuf>  // line-level: "File.tsx:42:varName" → stat
+}
+interface PerfBuffer {
+    startedAt: number
+    hiddenFrames: number
+    mobxPatched: boolean
+    buckets: Record<string, PerfBucketBuf>
+    active: string
+    longtasks: { count: number, max: number }
+}
+
 interface AipeekBuffers {
     consoleLogs: LogEntry[]
     networkRequests: NetworkEntry[]
     errorEntries: ErrorEntry[]
+    actionEntries: ActionEntry[]
+    perf: PerfBuffer
 }
 
 // --- Ring buffers (persist across HMR) ---
@@ -17,13 +38,186 @@ interface AipeekBuffers {
 const MAX_CONSOLE = 100
 const MAX_NETWORK = 50
 const MAX_ERRORS = 20
+const MAX_ACTIONS = 30
 
 const BUFFERS_KEY = '__AIPEEK_BUFFERS__'
 const existing = (window as any)[BUFFERS_KEY] as AipeekBuffers | undefined
 const consoleLogs: LogEntry[] = existing?.consoleLogs ?? []
 const networkRequests: NetworkEntry[] = existing?.networkRequests ?? []
 const errorEntries: ErrorEntry[] = existing?.errorEntries ?? []
-;(window as any)[BUFFERS_KEY] = { consoleLogs, networkRequests, errorEntries }
+const actionEntries: ActionEntry[] = existing?.actionEntries ?? []
+const perf: PerfBuffer = existing?.perf ?? {
+    startedAt: Date.now(),
+    hiddenFrames: 0,
+    mobxPatched: false,
+    buckets: {},
+    active: '__all__',
+    longtasks: { count: 0, max: 0 },
+}
+;(window as any)[BUFFERS_KEY] = { consoleLogs, networkRequests, errorEntries, actionEntries, perf }
+
+const PERF_SAMPLE_CAP = 5000
+
+function perfBucket(name: string): PerfBucketBuf {
+    let b = perf.buckets[name]
+    if (!b) {
+        b = { components: {}, frames: { total: 0, long: 0, max: 0, samples: [] }, lines: {} }
+        perf.buckets[name] = b
+    }
+    return b
+}
+
+// The view bucket + the __all__ aggregate. When active IS __all__, return it once —
+// else every hit double-counts into __all__ (n, total, frames all 2×).
+function targetBuckets(): string[] {
+    return perf.active === '__all__' ? ['__all__'] : [perf.active, '__all__']
+}
+
+// One timed hit (component render / line exec) → a stat map, accumulating total/n/max + capped
+// samples. samples capped so a long session doesn't grow unbounded (p95 still representative).
+function recordStat(map: Record<string, PerfStatBuf>, key: string, ms: number) {
+    let s = map[key]
+    if (!s) {
+        s = { total: 0, n: 0, max: 0, samples: [] }
+        map[key] = s
+    }
+    s.total += ms
+    s.n += 1
+    if (ms > s.max)
+        s.max = ms
+    s.samples.push(ms)
+    if (s.samples.length > PERF_SAMPLE_CAP)
+        s.samples.shift()
+}
+
+// One component render's self-time → both its live view bucket and the __all__ aggregate.
+function hitComponent(name: string, ms: number) {
+    for (const bucketName of targetBuckets())
+        recordStat(perfBucket(bucketName).components, name, ms)
+}
+
+// One line's execution time → both its live view bucket and the __all__ aggregate.
+// Called by babel-inserted __line(label, fn) wrapper.
+function hitLine(label: string, ms: number) {
+    for (const bucketName of targetBuckets())
+        recordStat(perfBucket(bucketName).lines, label, ms)
+}
+
+// Runtime for babel plugin: wraps one statement, times it, records to perf.lines.
+// Exposed globally so babel-transformed code can call it (client-patch can't be imported).
+;(window as any).__line = function __line<T>(label: string, fn: () => T): T {
+    const start = performance.now()
+    try {
+        return fn()
+    }
+    finally {
+        hitLine(label, performance.now() - start)
+    }
+}
+
+// One frame's dt → both live view bucket and __all__. long = dropped (>16.7ms ≈ missed 60fps).
+function hitFrame(dt: number) {
+    for (const bucketName of targetBuckets()) {
+        const f = perfBucket(bucketName).frames
+        f.total += 1
+        if (dt > 16.7)
+            f.long += 1
+        if (dt > f.max)
+            f.max = dt
+        f.samples.push(dt)
+        if (f.samples.length > PERF_SAMPLE_CAP)
+            f.samples.shift()
+    }
+}
+
+// (b) Frame loop — zero-coupling, holds for any app. document.hidden guard: backgrounded rAF
+// throttles to ~1fps, so each hidden frame looks like a 1000ms "dropped" frame and lies.
+// Don't count dt while hidden; tally hiddenFrames so the report can flag it.
+const WARN_THRESHOLD = 20 // dropped% — push warning when ≥20% frames jank
+const WARN_COOLDOWN = 5000 // ms — don't spam, at most one warn per 5s
+let lastFrame = performance.now()
+let lastWarn = 0
+function frameLoop() {
+    const now = performance.now()
+    if (document.hidden) {
+        perf.hiddenFrames += 1
+        lastFrame = now
+        requestAnimationFrame(frameLoop)
+        return
+    }
+    const dt = now - lastFrame
+    hitFrame(dt)
+    lastFrame = now
+
+    // Push mode: auto-warn on jank (≥20% dropped), once per 5s
+    const bucket = perf.buckets[perf.active]
+    if (bucket && bucket.frames.total > 20) { // need ≥20 frames for stable %
+        const droppedPct = (bucket.frames.long / bucket.frames.total) * 100
+        if (droppedPct >= WARN_THRESHOLD && now - lastWarn > WARN_COOLDOWN) {
+            const top3 = Object.entries(bucket.components)
+                .sort(([, a], [, b]) => b.total - a.total)
+                .slice(0, 3)
+                .map(([name, s]) => `${name} ${s.total.toFixed(0)}ms`)
+                .join(', ')
+            const hot = top3 ? ` · hot: ${top3}` : ''
+            console.warn(`[aipeek] 🐌 ${droppedPct.toFixed(0)}% frames dropped${hot}`)
+            lastWarn = now
+        }
+    }
+
+    requestAnimationFrame(frameLoop)
+}
+requestAnimationFrame(frameLoop)
+
+// (b) Longtask observer — main-thread blocks >50ms, app-agnostic.
+try {
+    new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+            perf.longtasks.count += 1
+            if (entry.duration > perf.longtasks.max)
+                perf.longtasks.max = entry.duration
+        }
+    }).observe({ entryTypes: ['longtask'] })
+}
+catch { /* longtask not supported — frames + components still work */ }
+
+// (a) Component self-time via MobX Reaction.track. client-patch can't import mobx, so the app
+// exposes the live singleton at window.__AIPEEK_MOBX__={Reaction} (dev-only seam in src/lib/mobx.ts).
+// mobx-react-lite names every component's Reaction "observer"+name, so name_.slice(8) is the
+// component name. Patch is idempotent (track.__aipeek flag) and survives HMR via the shared buffer.
+function patchMobx() {
+    const mobx = (window as any).__AIPEEK_MOBX__
+    const Reaction = mobx?.Reaction
+    const track = Reaction?.prototype?.track
+    if (!track || (track as any).__aipeek)
+        return
+    const patched = function (this: any, fn: () => void) {
+        const name: string = this.name_ ?? ''
+        if (name.indexOf('observer') !== 0)
+            return track.call(this, fn)
+        const start = performance.now()
+        try {
+            return track.call(this, fn)
+        }
+        finally {
+            hitComponent(name.slice(8) || '(anon)', performance.now() - start)
+        }
+    }
+    ;(patched as any).__aipeek = true
+    Reaction.prototype.track = patched
+    perf.mobxPatched = true
+}
+patchMobx()
+// The seam may run after this patch (module order). Retry briefly so attribution turns on
+// once src/lib/mobx.ts executes; stops as soon as it succeeds.
+if (!perf.mobxPatched) {
+    let tries = 0
+    const retry = setInterval(() => {
+        patchMobx()
+        if (perf.mobxPatched || ++tries > 20)
+            clearInterval(retry)
+    }, 100)
+}
 
 function pushBounded<T>(arr: T[], item: T, max: number) {
     arr.push(item)
@@ -50,6 +244,40 @@ for (const level of ['log', 'info', 'warn', 'error', 'debug'] as const) {
 // --- Patch fetch — 透明摄像头：tee body，主流原样返回，副流后台 capture ---
 
 const originalFetch = window.fetch
+
+// --- Self-heal handshake: reconnect after a dev-server restart without a human reload ---
+// The whole aipeek action chain rides the Vite HMR WebSocket. A full server restart kills
+// that socket and Vite's reconnect often gives up — stranding the page on "connection lost".
+// So we poll an HTTP heartbeat (independent of the WS) carrying the server's BOOT_ID; when it
+// changes (server is a new process), the page reloads itself and re-handshakes the new server.
+// Uses originalFetch so the poll never lands in the network ring.
+;(function keepAlive() {
+    const SEEN_KEY = '__aipeek_boot__'
+    const RELOADING_KEY = '__aipeek_reloading__'
+    setInterval(async () => {
+        let id: string
+        try {
+            id = await (await originalFetch('/__aipeek/ping', { cache: 'no-store' })).text()
+        }
+        catch {
+            return // server not back yet — keep polling, don't reload on mere failure
+        }
+        sessionStorage.removeItem(RELOADING_KEY) // ping succeeded — clear the reload debounce
+        const seen = sessionStorage.getItem(SEEN_KEY)
+        if (!seen) {
+            sessionStorage.setItem(SEEN_KEY, id) // first sighting — remember this server
+            return
+        }
+        if (seen !== id) { // BOOT_ID changed → server restarted → re-handshake
+            sessionStorage.setItem(SEEN_KEY, id)
+            if (!sessionStorage.getItem(RELOADING_KEY)) {
+                sessionStorage.setItem(RELOADING_KEY, '1')
+                location.reload()
+            }
+        }
+    }, 2000)
+})()
+
 window.fetch = async (input, init) => {
     const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url
     const method = init?.method || 'GET'
@@ -266,6 +494,102 @@ if (OrigEventSource) {
     })
 }
 
+// --- User action timeline ---
+//
+// One document capture listener catches every semantic action — both the user's real
+// events (isTrusted=true) and aipeek's synthetic performAction events (isTrusted=false),
+// since both bubble through document. Each entry stamps its post-settle UI projection
+// (view/modal/focus) so a later diff against the prior entry reveals "dialog opened".
+
+const KEYS = new Set(['Enter', 'Escape', 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'])
+let lastInputTarget: EventTarget | null = null
+
+// inline mirror of client.ts visibleText/inspPath — client-patch can't import (see formatValue note)
+function describe(el: Element): string {
+    const label = (el.getAttribute('aria-label') || directText(el) || '').trim().slice(0, 40)
+    const tag = el.tagName.toLowerCase()
+    const name = label || `<${tag}>`
+    const raw = el.getAttribute('data-insp-path')
+    let loc = ''
+    if (raw) {
+        const [file, line] = raw.split(':')
+        const tail = file.split('/').slice(-2).join('/')
+        loc = line ? ` @${tail}:${line}` : ` @${tail}`
+    }
+    return `${name} [${tag}]${loc}`
+}
+
+function directText(el: Element): string {
+    let t = ''
+    for (const node of el.childNodes) {
+        if (node.nodeType === 3)
+            t += node.textContent
+    }
+    return t.trim()
+}
+
+// Light projection — just the variables that move when UI changes. NOT the full
+// collectScreen (knobs etc.) which lives in client.ts; this only needs the deltas.
+function stampScreen(entry: ActionEntry) {
+    const stores = (window as any).__AIPEEK_STORES__
+    const view = stores?.appUIStore?.mode ?? '(unknown)'
+    entry.view = view
+    perf.active = view === '(unknown)' ? '__all__' : view
+    const modalEl = document.querySelector('[role="dialog"][data-state="open"]')
+    entry.modal = modalEl
+        ? (modalEl.querySelector('h1, h2, [id^="radix"]')?.textContent || 'untitled').trim().slice(0, 40)
+        : 'none'
+    const active = document.activeElement
+    entry.focus = active && active !== document.body ? describe(active) : 'none'
+}
+
+// Enqueue + stamp in one place — every listener funnels here so the trusted/pushBounded/
+// settle-then-stamp triple isn't repeated five times.
+function record(e: Event, type: string, target: Element, value?: string) {
+    const entry: ActionEntry = {
+        type,
+        target: describe(target),
+        value: value === undefined ? undefined : value.slice(0, 60),
+        trusted: e.isTrusted,
+        ts: Date.now(),
+    }
+    pushBounded(actionEntries, entry, MAX_ACTIONS)
+    setTimeout(() => stampScreen(entry), 180)
+}
+
+document.addEventListener('click', e => e.target && record(e, 'click', e.target as Element), true)
+document.addEventListener('submit', e => e.target && record(e, 'submit', e.target as Element), true)
+document.addEventListener('change', (e) => {
+    if (!e.target)
+        return
+    lastInputTarget = null
+    record(e, 'change', e.target as Element, (e.target as HTMLInputElement).value)
+}, true)
+
+document.addEventListener('keydown', (e) => {
+    if (KEYS.has(e.key))
+        record(e, `key:${e.key}`, (e.target as Element | null) ?? document.body)
+}, true)
+
+document.addEventListener('input', (e) => {
+    const el = e.target as HTMLInputElement | null
+    if (!el)
+        return
+    const value = el.value ?? (el.isContentEditable ? (el.textContent ?? '') : '')
+    // Debounce same-target keystrokes: rewrite the last entry instead of appending one
+    // per character (the timeline wants "input value=hello", not h/he/hel/…).
+    const last = actionEntries[actionEntries.length - 1]
+    if (lastInputTarget === el && last?.type === 'input') {
+        last.value = value.slice(0, 60)
+        last.trusted = e.isTrusted
+        last.ts = Date.now()
+        setTimeout(() => stampScreen(last), 180)
+        return
+    }
+    lastInputTarget = el
+    record(e, 'input', el, value)
+}, true)
+
 // --- Utils ---
 
 function jsonSample(text: string): string | undefined {