aipeek 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aipeek",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "description": "Gives AI a peek into your running browser app — UI tree, console, network, errors, state",
     "license": "MIT",
     "repository": {
@@ -19,9 +19,7 @@
     },
     "files": [
         "dist",
-        "src/client",
-        "src/core/action.ts",
-        "src/core/types.ts"
+        "src"
     ],
     "scripts": {
         "build": "tsup",

package/src/core/check.ts

@@ -0,0 +1,34 @@
+import type { CheckResult, RawState } from './types'
+
+export function check(raw: RawState): CheckResult {
+    const consoleErrors = raw.console.filter(l => l.level === 'error')
+    const failedRequests = raw.network.filter(r => r.status >= 400 || r.failed)
+
+    const assertions = [
+        {
+            name: 'no-console-errors',
+            pass: consoleErrors.length === 0,
+            ...consoleErrors.length && { detail: consoleErrors[0].text },
+        },
+        {
+            name: 'no-uncaught-errors',
+            pass: raw.errors.length === 0,
+            ...raw.errors.length && { detail: raw.errors[0].message },
+        },
+        {
+            name: 'no-failed-requests',
+            pass: failedRequests.length === 0,
+            ...failedRequests.length && { detail: `${failedRequests[0].method} ${failedRequests[0].url} ${failedRequests[0].status}` },
+        },
+        {
+            name: 'ui-not-empty',
+            pass: raw.ui.trim().length > 0,
+            ...!raw.ui.trim().length && { detail: 'UI tree is empty' },
+        },
+    ]
+
+    return {
+        pass: assertions.every(a => a.pass),
+        assertions,
+    }
+}

package/src/core/compact.ts

@@ -0,0 +1,338 @@
+import type { CompactState, ErrorEntry, LogEntry, NetworkRequest, RawState } from './types'
+import { compactUrl, truncate } from './util'
+
+const SLOW_THRESHOLD = 1000
+
+// --- UI (merged component tree + DOM semantics) ---
+
+const MAX_UI_DEPTH = 6
+const UI_PRIMITIVES = new Set([
+    'Button',
+    'Input',
+    'Label',
+    'Badge',
+    'Checkbox',
+    'Skeleton',
+    'Spinner',
+    'Switch',
+    'Tabs',
+    'Tooltip',
+    'Popover',
+    'Dialog',
+    'Select',
+    'Card',
+    'Table',
+    'Slider',
+    'Progress',
+    'RadioGroup',
+    'HoverCard',
+    'DropdownMenu',
+    'ContextMenu',
+    'Command',
+    'Form',
+    'Alert',
+    'Pagination',
+    'Textarea',
+    'TooltipProvider',
+    'DialogPortal',
+    'Router',
+    'RenderErrorBoundary',
+    'RouterProvider',
+    'RouterProvider2',
+    'PanelGroup',
+    'Panel',
+])
+
+// component name = leading run before the first space, '[', or '—' separator
+export function nameOf(line: string): string {
+    let end = 0
+    while (end < line.length) {
+        const c = line[end]
+        if (c === ' ' || c === '\t' || c === '[' || c === '—')
+            break
+        end++
+    }
+    return line.slice(0, end)
+}
+
+export function compactUI(tree: string): string {
+    if (!tree)
+        return ''
+
+    const lines = tree.split('\n')
+    const result: string[] = []
+    const repeatTracker = new Map<string, { count: number, lastIndex: number }>()
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i]
+        const trimmed = line.trimStart()
+        if (!trimmed)
+            continue
+
+        const indent = line.length - trimmed.length
+        const depth = Math.floor(indent / 2)
+        if (depth > MAX_UI_DEPTH)
+            continue
+
+        const componentName = nameOf(trimmed)
+        if (UI_PRIMITIVES.has(componentName))
+            continue
+
+        // fold repeated siblings
+        const key = `${depth}:${componentName}`
+        const tracker = repeatTracker.get(key)
+        if (tracker && i - tracker.lastIndex <= 2) {
+            tracker.count++
+            tracker.lastIndex = i
+            continue
+        }
+
+        // flush previous repeat groups
+        for (const [k, t] of repeatTracker) {
+            if (t.count > 1) {
+                const d = Number.parseInt(k.split(':')[0])
+                const name = k.split(':').slice(1).join(':')
+                result.push(`${'  '.repeat(d)}${name} ×${t.count}`)
+            }
+            if (t.count > 1 || i - t.lastIndex > 2) {
+                repeatTracker.delete(k)
+            }
+        }
+
+        repeatTracker.set(key, { count: 1, lastIndex: i })
+        result.push(line)
+    }
+
+    // flush remaining
+    for (const [k, t] of repeatTracker) {
+        if (t.count > 1) {
+            const d = Number.parseInt(k.split(':')[0])
+            const name = k.split(':').slice(1).join(':')
+            result.push(`${'  '.repeat(d)}${name} ×${t.count}`)
+        }
+    }
+
+    return result.join('\n')
+}
+
+// --- Console ---
+
+// case-insensitive substrings that mark a log line as dev-tooling noise
+const NOISE_SUBSTRINGS = [
+    '[hmr]',
+    '[vite]',
+    'hot module',
+    'react-devtools',
+    'download the react devtools',
+    'warning: react does not recognize',
+    'source map',
+    'favicon.ico',
+    'webpack',
+]
+
+export function compactConsole(logs: LogEntry[]): string {
+    if (!logs.length)
+        return ''
+
+    // filter noise
+    const filtered = logs.filter((l) => {
+        const lower = l.text.toLowerCase()
+        return !NOISE_SUBSTRINGS.some(s => lower.includes(s))
+    })
+    if (!filtered.length)
+        return ''
+
+    // dedup consecutive same messages
+    const deduped: { entry: LogEntry, count: number }[] = []
+    for (const log of filtered) {
+        const last = deduped[deduped.length - 1]
+        if (last && last.entry.text === log.text && last.entry.level === log.level) {
+            last.count++
+        }
+        else {
+            deduped.push({ entry: log, count: 1 })
+        }
+    }
+
+    // prioritize: errors first, then warns, then recent info/debug
+    const errors = deduped.filter(d => d.entry.level === 'error')
+    const warns = deduped.filter(d => d.entry.level === 'warn')
+    const rest = deduped.filter(d => d.entry.level !== 'error' && d.entry.level !== 'warn')
+
+    // keep last N info/debug entries
+    const recentRest = rest.slice(-10)
+
+    const lines: string[] = []
+    for (const group of [...errors, ...warns, ...recentRest]) {
+        const prefix = `[${group.entry.level}]`
+        const count = group.count > 1 ? ` ×${group.count}` : ''
+        const source = group.entry.source ? ` (${group.entry.source})` : ''
+        const text = truncate(group.entry.text, 200)
+        lines.push(`${prefix}${count} ${text}${source}`)
+    }
+
+    return lines.join('\n')
+}
+
+// --- Network ---
+
+export function compactNetwork(requests: NetworkRequest[]): string {
+    if (!requests.length)
+        return ''
+
+    // only fetch/XHR
+    const relevant = requests.filter(r =>
+        r.resourceType === 'fetch' || r.resourceType === 'xhr' || r.resourceType === 'websocket'
+        || r.resourceType === 'eventsource' || isApiUrl(r.url),
+    )
+    if (!relevant.length)
+        return ''
+
+    const lines: string[] = []
+    for (const req of relevant) {
+        const duration = req.duration > 0 ? ` ${formatDuration(req.duration)}` : ''
+        const slow = req.duration >= SLOW_THRESHOLD ? ' [SLOW]' : ''
+        const url = compactUrl(req.url, 50)
+        const headers = diagnosticHeaders(req)
+
+        if (req.failed || req.status >= 400) {
+            // failed: show more detail
+            const body = req.responseBody ? ` "${truncate(req.responseBody, 100)}"` : ''
+            const failure = req.failureText ? ` (${req.failureText})` : ''
+            lines.push(`${req.method} ${url} ${req.status}${failure}${body}${headers}${duration}${slow}`)
+        }
+        else {
+            lines.push(`${req.method} ${url} ${req.status}${headers}${duration}${slow}`)
+        }
+    }
+
+    return lines.join('\n')
+}
+
+function isApiUrl(url: string): boolean {
+    try {
+        const u = new URL(url)
+        return u.pathname.startsWith('/api') || u.pathname.includes('/graphql')
+    }
+    catch {
+        return false
+    }
+}
+
+const DIAGNOSTIC_HEADERS = ['content-type', 'x-error', 'www-authenticate', 'access-control-allow-origin']
+
+function diagnosticHeaders(req: NetworkRequest): string {
+    const h = req.responseHeaders
+    if (!h)
+        return ''
+    const parts: string[] = []
+    for (const key of DIAGNOSTIC_HEADERS) {
+        const val = h[key]
+        if (!val)
+            continue
+        // skip common json content-type on success — not diagnostic
+        if (key === 'content-type' && req.status < 400 && val.includes('application/json'))
+            continue
+        parts.push(`${key}: ${truncate(val, 60)}`)
+    }
+    if (!parts.length)
+        return ''
+    return ` [${parts.join(', ')}]`
+}
+
+function formatDuration(ms: number): string {
+    return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`
+}
+
+// --- Errors ---
+
+export function compactErrors(errors: ErrorEntry[]): string {
+    if (!errors.length)
+        return ''
+
+    // dedup by message
+    const seen = new Map<string, ErrorEntry>()
+    for (const err of errors) {
+        if (!seen.has(err.message)) {
+            seen.set(err.message, err)
+        }
+    }
+
+    const lines: 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}`)
+            }
+        }
+    }
+
+    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 {
+    if (!state || !Object.keys(state).length)
+        return ''
+
+    const lines: string[] = []
+    for (const [name, value] of Object.entries(state)) {
+        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)}`)
+            }
+        }
+        else {
+            lines.push(`  ${String(value)}`)
+        }
+    }
+    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 {
+    return {
+        url: raw.url,
+        ui: compactUI(raw.ui),
+        console: compactConsole(raw.console),
+        network: compactNetwork(raw.network),
+        errors: compactErrors(raw.errors),
+        state: compactState(raw.state),
+        timestamp: raw.timestamp,
+        counts: {
+            console: raw.console.length,
+            network: raw.network.length,
+            errors: raw.errors.length,
+            state: Object.keys(raw.state).length,
+        },
+    }
+}

package/src/core/detail.ts

@@ -0,0 +1,252 @@
+import type { ErrorEntry, LogEntry, NetworkRequest, RawState } from './types'
+import { compactUI } from './compact'
+import { truncate } from './util'
+
+export function detail(raw: RawState, section: string, index: string | undefined, full: boolean): string | null {
+    switch (section) {
+        case 'ui': return full ? (raw.ui || null) : (compactUI(raw.ui) || null)
+        case 'console': return detailConsole(raw.console, index, full)
+        case 'network': return detailNetwork(raw.network, index, full)
+        case 'errors': return detailError(raw.errors, index, full)
+        case 'state': return detailState(raw.state, index, full)
+        default: return null
+    }
+}
+
+// --- Console ---
+
+function detailConsole(logs: LogEntry[], index: string | undefined, full: boolean): string | null {
+    if (index === undefined) {
+        if (!logs.length)
+            return '(empty)'
+        return logs.map((log, i) => `[${i}] [${log.level}] ${truncate(log.text, 120)}`).join('\n')
+    }
+    const i = Number.parseInt(index)
+    if (Number.isNaN(i) || i < 0 || i >= logs.length)
+        return null
+    const log = logs[i]
+
+    if (full) {
+        const parts = [`[${log.level}] ${log.text}`]
+        if (log.timestamp)
+            parts.push(`timestamp: ${new Date(log.timestamp).toISOString()}`)
+        if (log.source)
+            parts.push(`source: ${log.source}`)
+        return parts.join('\n')
+    }
+
+    return `[${log.level}] ${truncate(log.text, 200)}`
+}
+
+// --- Network ---
+
+function detailNetwork(requests: NetworkRequest[], index: string | undefined, full: boolean): string | null {
+    if (index === undefined) {
+        if (!requests.length)
+            return '(empty)'
+        return requests.map((req, i) => `[${i}] ${req.method} ${req.status} ${truncate(req.url, 80)} ${req.duration}ms${req.failed ? ' FAILED' : ''}`).join('\n')
+    }
+    const i = Number.parseInt(index)
+    if (Number.isNaN(i) || i < 0 || i >= requests.length)
+        return null
+    const req = requests[i]
+
+    const lines = [
+        `${req.method} ${req.url}`,
+        `status: ${req.status}`,
+        `duration: ${req.duration}ms`,
+        `type: ${req.resourceType}`,
+    ]
+    if (req.failed)
+        lines.push(`failed: ${req.failureText || 'true'}`)
+
+    if (full) {
+        if (req.requestHeaders && Object.keys(req.requestHeaders).length) {
+            lines.push('request-headers:')
+            for (const [k, v] of Object.entries(req.requestHeaders)) lines.push(`  ${k}: ${v}`)
+        }
+        if (req.requestBody)
+            lines.push(`request-body:\n${req.requestBody}`)
+        if (req.responseHeaders && Object.keys(req.responseHeaders).length) {
+            lines.push('response-headers:')
+            for (const [k, v] of Object.entries(req.responseHeaders)) lines.push(`  ${k}: ${v}`)
+        }
+        if (req.responseBody)
+            lines.push(`response-body:\n${req.responseBody}`)
+    }
+    else {
+        if (req.requestBody) {
+            lines.push(`request-body: ${byteSize(req.requestBody)}`)
+            if (req.requestSample) {
+                const schema = jsonSchema(req.requestSample)
+                if (schema)
+                    lines.push(schema)
+            }
+        }
+        if (req.responseBody) {
+            if (req.status >= 400) {
+                lines.push(`response-body: ${byteSize(req.responseBody)} "${truncate(req.responseBody, 100)}"`)
+            }
+            else {
+                if (req.responseSample) {
+                    lines.push(`response-body: ${byteSize(req.responseBody)}`)
+                    const schema = jsonSchema(req.responseSample)
+                    if (schema)
+                        lines.push(schema)
+                }
+                else {
+                    lines.push(`response-body: ${byteSize(req.responseBody)} ${truncate(req.responseBody, 100)}`)
+                }
+            }
+        }
+    }
+
+    return lines.join('\n')
+}
+
+// --- Errors ---
+
+function detailError(errors: ErrorEntry[], index: string | undefined, full: boolean): string | null {
+    if (index === undefined) {
+        if (!errors.length)
+            return '(empty)'
+        return errors.map((err, i) => `[${i}] ${truncate(err.message, 120)}`).join('\n')
+    }
+    const i = Number.parseInt(index)
+    if (Number.isNaN(i) || i < 0 || i >= errors.length)
+        return null
+    const err = errors[i]
+
+    if (full) {
+        const lines = [err.message]
+        if (err.stack)
+            lines.push(err.stack)
+        if (err.source)
+            lines.push(`source: ${err.source}`)
+        if (err.line != null)
+            lines.push(`location: ${err.source || ''}:${err.line}:${err.column ?? 0}`)
+        return lines.join('\n')
+    }
+
+    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`)
+    }
+    if (err.line != null)
+        lines.push(`location: ${err.source || ''}:${err.line}:${err.column ?? 0}`)
+    return lines.join('\n')
+}
+
+// --- State ---
+
+function detailState(state: Record<string, unknown>, name: string | undefined, full: boolean): string | null {
+    if (!name) {
+        const keys = Object.keys(state)
+        if (!keys.length)
+            return '(empty)'
+        return keys.map(k => `${k}: ${formatSummaryValue(state[k])}`).join('\n')
+    }
+    if (!(name in state))
+        return null
+    const value = state[name]
+    if (full) {
+        try {
+            return JSON.stringify(value, null, 2)
+        }
+        catch {
+            return String(value)
+        }
+    }
+    if (typeof value !== 'object' || value === null)
+        return `${name}: ${typeof value}`
+    const lines: string[] = []
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+        lines.push(`${k}: ${formatSummaryValue(v)}`)
+    }
+    return lines.join('\n')
+}
+
+function isArraySentinel(v: string): boolean {
+    if (!v.startsWith('Array(') || !v.endsWith(')'))
+        return false
+    const digits = v.slice(6, -1)
+    return digits.length > 0 && [...digits].every(c => c >= '0' && c <= '9')
+}
+
+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)
+}
+
+// --- JSON schema fallback ---
+
+function jsonSchema(sample: string): string | null {
+    try {
+        return schemaOf(JSON.parse(sample), 0)
+    }
+    catch {
+        return null
+    }
+}
+
+function schemaOf(v: unknown, d: number): string {
+    if (v === null)
+        return 'null'
+    if (typeof v === 'string')
+        return 'string'
+    if (typeof v === 'number')
+        return 'number'
+    if (typeof v === 'boolean')
+        return 'boolean'
+    if (Array.isArray(v)) {
+        if (!v.length)
+            return '[]'
+        if (d >= 3)
+            return '[…]'
+        return `${schemaOf(v[0], d + 1)}[]`
+    }
+    if (typeof v === 'object') {
+        if (d >= 3)
+            return '{…}'
+        const entries = Object.entries(v as Record<string, unknown>)
+        if (!entries.length)
+            return '{}'
+        const max = d === 0 ? 12 : 6
+        const fields = entries.slice(0, max).map(([k, val]) => `${k}: ${schemaOf(val, d + 1)}`)
+        if (entries.length > max)
+            fields.push(`… ${entries.length - max} more`)
+        return `{ ${fields.join(', ')} }`
+    }
+    return typeof v
+}
+
+// --- Utils ---
+
+function byteSize(s: string): string {
+    const bytes = new TextEncoder().encode(s).length
+    if (bytes < 1024)
+        return `${bytes}B`
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)}KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+}

package/src/core/diff.ts

@@ -0,0 +1,38 @@
+import type { DiffResult, RawState } from './types'
+
+export function diffState(prev: RawState | null, curr: RawState): DiffResult {
+    if (!prev) {
+        return {
+            newErrors: curr.console.filter(l => l.level === 'error'),
+            newExceptions: [...curr.errors],
+            newFailedRequests: curr.network.filter(r => r.status >= 400 || r.failed),
+            uiGone: false,
+            clean: curr.console.filter(l => l.level === 'error').length === 0
+                && curr.errors.length === 0
+                && curr.network.filter(r => r.status >= 400 || r.failed).length === 0,
+        }
+    }
+
+    const prevErrorTexts = new Set(prev.console.filter(l => l.level === 'error').map(l => l.text))
+    const newErrors = curr.console.filter(l => l.level === 'error' && !prevErrorTexts.has(l.text))
+
+    const prevExceptionMsgs = new Set(prev.errors.map(e => e.message))
+    const newExceptions = curr.errors.filter(e => !prevExceptionMsgs.has(e.message))
+
+    const prevFailedKeys = new Set(
+        prev.network.filter(r => r.status >= 400 || r.failed).map(r => `${r.method}|${r.url}|${r.status}`),
+    )
+    const newFailedRequests = curr.network
+        .filter(r => r.status >= 400 || r.failed)
+        .filter(r => !prevFailedKeys.has(`${r.method}|${r.url}|${r.status}`))
+
+    const uiGone = prev.ui.trim().length > 0 && curr.ui.trim().length === 0
+
+    return {
+        newErrors,
+        newExceptions,
+        newFailedRequests,
+        uiGone,
+        clean: newErrors.length === 0 && newExceptions.length === 0 && newFailedRequests.length === 0 && !uiGone,
+    }
+}