aipeek 0.2.2 → 0.2.4

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,
+    }
+}

package/src/core/emit.ts

@@ -0,0 +1,186 @@
+import type { CheckResult, CompactState, DiffResult, RawState } from './types'
+import pc from 'picocolors'
+import { nameOf } from './compact'
+import { compactUrl, truncate } from './util'
+
+// --- Full emit (for ?full) ---
+
+const SECTIONS = ['ui', 'console', 'network', 'errors', 'state'] as const
+const COUNTED_SECTIONS: Record<string, keyof CompactState['counts']> = {
+    console: 'console',
+    network: 'network',
+    errors: 'errors',
+    state: 'state',
+}
+
+export function emit(state: CompactState): string {
+    const sections: string[] = []
+
+    for (const key of SECTIONS) {
+        if (state[key]) {
+            const countKey = COUNTED_SECTIONS[key]
+            const count = countKey ? state.counts?.[countKey] ?? 0 : 0
+            const attr = count ? ` count="${count}"` : ''
+            sections.push(`<${key}${attr}>\n${state[key]}\n</${key}>`)
+        }
+    }
+
+    if (!sections.length) {
+        sections.push('<empty/>')
+    }
+
+    return `<aipeek url="${state.url}">\n\n${sections.join('\n\n')}\n\n</aipeek>\n\ndetail: GET /__aipeek/{section}/{index}?full`
+}
+
+// --- Summary emit (default, high-density) ---
+
+export function emitSummary(raw: RawState): string {
+    const consoleErrors = raw.console.filter(l => l.level === 'error')
+    const consoleWarns = raw.console.filter(l => l.level === 'warn')
+    const failedReqs = raw.network.filter(r => r.status >= 400 || r.failed)
+    const hasIssues = consoleErrors.length > 0 || raw.errors.length > 0 || failedReqs.length > 0
+
+    const lines: string[] = []
+
+    // ui — always 1-line summary
+    if (raw.ui.trim()) {
+        lines.push(`ui: ${summarizeUI(raw.ui)}`)
+    }
+
+    // console — 1-line if clean, expand errors/warns if dirty
+    if (raw.console.length) {
+        if (consoleErrors.length || consoleWarns.length) {
+            const parts: string[] = []
+            for (const e of consoleErrors) parts.push(`  [error] ${truncate(e.text, 150)}`)
+            for (const w of consoleWarns) parts.push(`  [warn] ${truncate(w.text, 150)}`)
+            const rest = raw.console.length - consoleErrors.length - consoleWarns.length
+            if (rest > 0)
+                parts.push(`  … ${rest} more`)
+            lines.push(`console (${raw.console.length}):`)
+            lines.push(...parts)
+        }
+        else {
+            lines.push(`console: ${raw.console.length} logs`)
+        }
+    }
+
+    // network — 1-line if clean, expand failures if dirty
+    if (raw.network.length) {
+        if (failedReqs.length) {
+            lines.push(`network (${raw.network.length}):`)
+            for (const r of failedReqs) {
+                const body = r.responseBody ? ` "${truncate(r.responseBody, 80)}"` : ''
+                lines.push(`  ${r.method} ${compactUrl(r.url)} ${r.status}${body}`)
+            }
+            const ok = raw.network.length - failedReqs.length
+            if (ok > 0)
+                lines.push(`  … ${ok} ok`)
+        }
+        else {
+            lines.push(`network: ${raw.network.length} ok`)
+        }
+    }
+
+    // errors — always expand (these are uncaught exceptions)
+    if (raw.errors.length) {
+        lines.push(`errors (${raw.errors.length}):`)
+        for (const e of raw.errors) lines.push(`  ${truncate(e.message, 150)}`)
+    }
+
+    // state — 1-line: store names + key counts
+    const storeNames = Object.keys(raw.state)
+    if (storeNames.length) {
+        const parts = storeNames.map((n) => {
+            const v = raw.state[n]
+            const keys = typeof v === 'object' && v !== null ? Object.keys(v).length : 0
+            return keys > 0 ? `${n}(${keys})` : n
+        })
+        lines.push(`state: ${parts.join(', ')}`)
+    }
+
+    if (!lines.length)
+        return '<aipeek>empty</aipeek>'
+
+    const status = hasIssues
+        ? `${consoleErrors.length + raw.errors.length + failedReqs.length} issues`
+        : 'ok'
+
+    return `<aipeek url="${raw.url}" status="${status}">\n${lines.join('\n')}\n</aipeek>${hasIssues ? '\n\ndetail: GET /__aipeek/{section}/{index}' : ''}`
+}
+
+function summarizeUI(tree: string): string {
+    // extract top-level component names (depth 0-1)
+    const components: string[] = []
+    const counts = new Map<string, number>()
+
+    for (const line of tree.split('\n')) {
+        const trimmed = line.trimStart()
+        if (!trimmed)
+            continue
+        const indent = line.length - trimmed.length
+        if (indent > 2)
+            continue // only depth 0-1
+
+        const name = nameOf(trimmed)
+        if (!name)
+            continue
+
+        // extract state markers
+        const focused = trimmed.includes('[focused]')
+        const generating = trimmed.includes('[generating]')
+        const loading = trimmed.includes('[loading]')
+
+        const existing = counts.get(name) || 0
+        if (existing > 0) {
+            counts.set(name, existing + 1)
+            continue
+        }
+        counts.set(name, 1)
+
+        let label = name
+        if (focused)
+            label += '[focused]'
+        if (generating)
+            label += '[generating]'
+        if (loading)
+            label += '[loading]'
+        components.push(label)
+    }
+
+    // apply counts
+    const result = components.map((c) => {
+        const name = c.split('[')[0]
+        const count = counts.get(name) || 1
+        return count > 1 ? `${c}(×${count})` : c
+    })
+
+    return result.join(', ') || 'empty'
+}
+
+// --- Check emit ---
+
+export function emitCheck(result: CheckResult): string {
+    const lines = result.assertions.map(a =>
+        a.pass
+            ? `✓ ${a.name}`
+            : `✗ ${a.name}${a.detail ? `: ${a.detail}` : ''}`,
+    )
+    return `<aipeek-check pass="${result.pass}">\n${lines.join('\n')}\n</aipeek-check>`
+}
+
+// --- Diff emit (terminal, colored) ---
+
+export function emitDiff(diff: DiffResult): string {
+    const issues: string[] = []
+    for (const e of diff.newErrors) issues.push(pc.red(`  [error] ${e.text}`))
+    for (const e of diff.newExceptions) issues.push(pc.red(`  [exception] ${e.message}`))
+    for (const r of diff.newFailedRequests) issues.push(pc.yellow(`  [network] ${r.method} ${r.url} ${r.status}`))
+    if (diff.uiGone)
+        issues.push(pc.magenta('  [ui] component tree disappeared'))
+
+    if (!issues.length)
+        return ''
+
+    const count = issues.length
+    return `${pc.bold('[aipeek]')} ${pc.red(`✗ ${count} issue${count > 1 ? 's' : ''} after HMR`)}\n${issues.join('\n')}`
+}

package/src/core/types.ts

@@ -0,0 +1,75 @@
+export interface LogEntry {
+    level: 'error' | 'warn' | 'info' | 'debug' | 'log'
+    text: string
+    timestamp?: number
+    source?: string
+}
+
+export interface NetworkRequest {
+    method: string
+    url: string
+    status: number
+    duration: number
+    resourceType: string
+    requestHeaders?: Record<string, string>
+    responseHeaders?: Record<string, string>
+    requestBody?: string
+    requestSample?: string
+    responseBody?: string
+    responseSample?: string
+    failed?: boolean
+    failureText?: string
+}
+
+export interface ErrorEntry {
+    message: string
+    stack?: string
+    source?: string
+    line?: number
+    column?: number
+}
+
+export interface RawState {
+    url: string
+    ui: string
+    console: LogEntry[]
+    network: NetworkRequest[]
+    errors: ErrorEntry[]
+    state: Record<string, unknown>
+    timestamp: number
+}
+
+export interface CompactState {
+    url: string
+    ui: string
+    console: string
+    network: string
+    errors: string
+    state: string
+    timestamp: number
+    counts: {
+        console: number
+        network: number
+        errors: number
+        state: number
+    }
+}
+
+export interface Assertion {
+    name: string
+    pass: boolean
+    detail?: string
+}
+
+export interface CheckResult {
+    pass: boolean
+    assertions: Assertion[]
+}
+
+export interface DiffResult {
+    newErrors: LogEntry[]
+    newExceptions: ErrorEntry[]
+    newFailedRequests: NetworkRequest[]
+    uiGone: boolean
+    clean: boolean
+}

package/src/core/util.ts

@@ -0,0 +1,16 @@
+export function truncate(s: string, max: number): string {
+    return s.length > max ? `${s.slice(0, max)}…` : s
+}
+
+// pathname only; pass `search` to append a truncated query string
+export function compactUrl(url: string, search?: number): string {
+    try {
+        const u = new URL(url)
+        if (search && u.search)
+            return `${u.pathname}?${truncate(u.search.slice(1), search)}`
+        return u.pathname
+    }
+    catch {
+        return truncate(url, 80)
+    }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { check } from './core/check'
+export { diffState } from './core/diff'
+export { emitCheck, emitDiff, emitSummary } from './core/emit'
+export type { CheckResult, CompactState, DiffResult, RawState } from './core/types'
+export { aipeekPlugin } from './server/plugin'

package/src/server/cli.ts

@@ -0,0 +1,70 @@
+/* eslint-disable no-console -- this is a CLI; stdout is its output channel */
+import process from 'node:process'
+import pc from 'picocolors'
+
+const args = process.argv.slice(2)
+const flags = Object.fromEntries(
+    args.filter(a => a.startsWith('--')).map((a) => {
+        const [k, v] = a.slice(2).split('=')
+        return [k, v ?? 'true']
+    }),
+)
+const positional = args.filter(a => !a.startsWith('--'))
+
+async function main() {
+    if (flags.help) {
+        console.log(`
+${pc.bold('aipeek')} — runtime snapshot from Vite dev server
+
+${pc.dim('Usage:')}
+  aipeek                    Full summary
+  aipeek check              Health check (pass/fail)
+  aipeek console            Console logs
+  aipeek network/0          Network request detail
+  aipeek errors/1?full      Error detail (untruncated)
+
+${pc.dim('Options:')}
+  --port=<port>    Dev server port (default: 5173)
+  --full           Untruncated output
+  --help           Show this help
+
+${pc.dim('Setup:')}
+  Add aipeekPlugin() to your vite.config.ts plugins array.
+`)
+        process.exit(0)
+    }
+
+    const port = flags.port || '5173'
+    const sub = positional[0] || ''
+    const full = flags.full ? '?full' : ''
+    const path = sub ? `/${sub}` : ''
+    const endpoint = `http://localhost:${port}/__aipeek${path}${full}`
+
+    const resp = await fetch(endpoint)
+    if (!resp.ok && resp.status !== 417) {
+        const text = await resp.text()
+        console.error(pc.red(`Error ${resp.status}: ${text}`))
+        process.exit(1)
+    }
+
+    const text = await resp.text()
+    // color check results — assertions are one per line: "✓ name" / "✗ name: detail"
+    if (sub === 'check') {
+        const colored = text.split('\n').map((line) => {
+            if (line.startsWith('✓'))
+                return pc.green(line)
+            if (line.startsWith('✗'))
+                return pc.red(line)
+            return line
+        }).join('\n')
+        console.log(colored)
+        process.exit(resp.status === 417 ? 1 : 0)
+    }
+
+    console.log(text)
+}
+
+main().catch((err) => {
+    console.error(pc.red(`Error: ${err.message}`))
+    process.exit(1)
+})