@pasko70/pibo 1.11.2 → 1.11.4

package/dist/debug/web-render-order-analysis.js

@@ -0,0 +1,307 @@
+const MAX_FINDINGS = 200;
+const DOM_STATE_SETTLE_MS = 32;
+export function analyzeStreamingRenderOrderCapture(capture) {
+    if (!capture)
+        return undefined;
+    const findings = [];
+    const pushFinding = (finding) => {
+        if (findings.length < MAX_FINDINGS)
+            findings.push(finding);
+    };
+    const internalStates = orderedInternalStates(capture.traceSnapshots);
+    for (const source of ["baseNodes", "currentNodes", "terminalRows", "visibleRows"]) {
+        analyzePartitionedStateSequences(internalStates.filter((state) => state.source === source), pushFinding);
+    }
+    const stableDomStates = capture.domStates.filter((state) => state.atBottom !== false);
+    analyzePartitionedStateSequences(stableDomStates.map(domState), pushFinding);
+    analyzeVisualOrder(stableDomStates, pushFinding);
+    analyzeStateDomAgreement(stableDomStates, internalStates, pushFinding);
+    const analysis = {
+        domStateCount: capture.domStates.length,
+        traceSnapshotCount: capture.traceSnapshots.length,
+        reorderCount: findings.filter((finding) => finding.kind === "reorder").length,
+        disappearReappearCount: findings.filter((finding) => finding.kind === "disappear-reappear").length,
+        identityReplacementCount: findings.filter((finding) => finding.kind === "identity-replacement").length,
+        stateDomMismatchCount: findings.filter((finding) => finding.kind === "state-dom-mismatch").length,
+        findings,
+        regressions: renderOrderRegressions(findings),
+    };
+    return { ...capture, analysis };
+}
+function orderedInternalStates(snapshots) {
+    const states = [];
+    for (const snapshot of snapshots) {
+        for (const layer of snapshot.layers ?? []) {
+            if (!isOrderedLayer(layer))
+                continue;
+            states.push({
+                source: layer.kind,
+                piboSessionId: snapshot.piboSessionId,
+                timestamp: snapshot.timestamp,
+                sequence: snapshot.sequence,
+                ids: uniqueStrings(layer.ids),
+                meta: Array.isArray(layer.meta) ? layer.meta : [],
+            });
+        }
+    }
+    return states.sort((left, right) => left.timestamp - right.timestamp || (left.sequence ?? 0) - (right.sequence ?? 0));
+}
+function isOrderedLayer(layer) {
+    return layer.kind === "baseNodes" || layer.kind === "currentNodes" || layer.kind === "terminalRows" || layer.kind === "visibleRows";
+}
+function domState(state) {
+    return {
+        source: "dom",
+        piboSessionId: state.piboSessionId,
+        timestamp: state.timestamp,
+        sequence: state.traceSequence,
+        ids: uniqueStrings(state.rowIds),
+        meta: state.rows,
+    };
+}
+function analyzePartitionedStateSequences(states, pushFinding) {
+    const bySession = new Map();
+    for (const state of states) {
+        const sessionStates = bySession.get(state.piboSessionId) ?? [];
+        sessionStates.push(state);
+        bySession.set(state.piboSessionId, sessionStates);
+    }
+    for (const sessionStates of bySession.values())
+        analyzeStateSequence(sessionStates, pushFinding);
+}
+function analyzeStateSequence(states, pushFinding) {
+    if (states.length < 2)
+        return;
+    for (let index = 1; index < states.length; index++) {
+        const before = states[index - 1];
+        const after = states[index];
+        const reordered = reorderedCommonIds(before.ids, after.ids);
+        if (reordered.length > 0) {
+            pushFinding({
+                source: after.source,
+                kind: "reorder",
+                timestamp: after.timestamp,
+                ids: reordered,
+                detail: `${after.source} changed relative order: ${compactOrder(before.ids)} -> ${compactOrder(after.ids)}`,
+            });
+        }
+        for (const replacement of identityReplacements(before, after)) {
+            pushFinding({
+                source: after.source,
+                kind: "identity-replacement",
+                timestamp: after.timestamp,
+                ids: [replacement.beforeId, replacement.afterId],
+                detail: `${after.source} changed id for ${replacement.logicalKey}: ${replacement.beforeId} -> ${replacement.afterId}`,
+            });
+        }
+    }
+    for (const reappearance of disappearReappearances(states)) {
+        pushFinding({
+            source: reappearance.source,
+            kind: "disappear-reappear",
+            timestamp: reappearance.timestamp,
+            ids: [reappearance.id],
+            detail: `${reappearance.source} removed ${reappearance.id} and later rendered it again`,
+        });
+    }
+}
+function analyzeVisualOrder(states, pushFinding) {
+    for (const state of states) {
+        const reordered = reorderedCommonIds(state.rowIds, state.visualRowIds);
+        if (reordered.length === 0)
+            continue;
+        pushFinding({
+            source: "visual",
+            kind: "reorder",
+            timestamp: state.timestamp,
+            ids: reordered,
+            detail: `visual order differs from DOM order: ${compactOrder(state.rowIds)} -> ${compactOrder(state.visualRowIds)}`,
+        });
+    }
+}
+function analyzeStateDomAgreement(domStates, internalStates, pushFinding) {
+    const terminalStates = internalStates.filter((state) => state.source === "terminalRows");
+    const visibleStates = internalStates.filter((state) => state.source === "visibleRows");
+    for (const dom of domStates) {
+        const sourceCandidates = dom.view === "compact-terminal" ? terminalStates : dom.view === "trace-timeline" ? visibleStates : [];
+        const candidates = sourceCandidates.filter((state) => state.piboSessionId === dom.piboSessionId);
+        const internal = nearestState(candidates, dom.timestamp, 500, dom.traceSequence);
+        if (!internal || dom.rowIds.length === 0)
+            continue;
+        if (isSubsequence(dom.rowIds, internal.ids))
+            continue;
+        if (nextSettledMatchingState(candidates, dom))
+            continue;
+        pushFinding({
+            source: "state-dom",
+            kind: "state-dom-mismatch",
+            timestamp: dom.timestamp,
+            ids: dom.rowIds.filter((id) => !internal.ids.includes(id)),
+            detail: `${dom.view} DOM is not an ordered subset of ${internal.source}: DOM ${compactOrder(dom.rowIds)}, state ${compactOrder(internal.ids)}`,
+        });
+    }
+}
+function reorderedCommonIds(before, after) {
+    const beforeSet = new Set(before);
+    const afterSet = new Set(after);
+    const beforeCommon = before.filter((id) => afterSet.has(id));
+    const afterCommon = after.filter((id) => beforeSet.has(id));
+    if (beforeCommon.length < 2 || arraysEqual(beforeCommon, afterCommon))
+        return [];
+    const beforeIndex = new Map(beforeCommon.map((id, index) => [id, index]));
+    return afterCommon.filter((id, index) => beforeIndex.get(id) !== index);
+}
+function identityReplacements(before, after) {
+    const beforeByLogicalKey = logicalIdentityMap(before);
+    const afterByLogicalKey = logicalIdentityMap(after);
+    const replacements = [];
+    const seenPairs = new Set();
+    for (const [logicalKey, beforeId] of beforeByLogicalKey) {
+        const afterId = afterByLogicalKey.get(logicalKey);
+        if (!afterId || afterId === beforeId)
+            continue;
+        const pair = `${beforeId}\u0000${afterId}`;
+        if (seenPairs.has(pair))
+            continue;
+        seenPairs.add(pair);
+        replacements.push({ logicalKey, beforeId, afterId });
+    }
+    return replacements;
+}
+function logicalIdentityMap(state) {
+    const idsByLogicalKey = new Map();
+    for (const raw of state.meta) {
+        const id = stringField(raw, "id");
+        if (!id)
+            continue;
+        const kind = stringField(raw, "kind") ?? stringField(raw, "type") ?? "node";
+        const aliases = [
+            ...identityFieldAliases(raw, kind, "stableKey"),
+            ...identityFieldAliases(raw, kind, "toolCallId"),
+            ...identityFieldAliases(raw, kind, "runId"),
+            ...identityFieldAliases(raw, kind, "entryId"),
+            ...identityFieldAliases(raw, kind, "eventId"),
+            ...stringArrayField(raw, "sourceNodeIds").flatMap((value) => identityAliases(kind, "sourceNodeId", value)),
+        ];
+        for (const logicalKey of aliases) {
+            const ids = idsByLogicalKey.get(logicalKey) ?? new Set();
+            ids.add(id);
+            idsByLogicalKey.set(logicalKey, ids);
+        }
+    }
+    const result = new Map();
+    for (const [logicalKey, ids] of idsByLogicalKey) {
+        if (ids.size === 1)
+            result.set(logicalKey, [...ids][0]);
+    }
+    return result;
+}
+function identityFieldAliases(raw, kind, field) {
+    const value = stringField(raw, field);
+    return value ? identityAliases(kind, field, value) : [];
+}
+function identityAliases(kind, field, value) {
+    return [`${kind}:${field}:${value}`, `${field}:${value}`];
+}
+function disappearReappearances(states) {
+    const seen = new Set();
+    const absentAfterSeen = new Set();
+    const reported = new Set();
+    const results = [];
+    let previous = new Set();
+    for (const state of states) {
+        const current = new Set(state.ids);
+        for (const id of previous) {
+            if (!current.has(id) && seen.has(id))
+                absentAfterSeen.add(id);
+        }
+        for (const id of current) {
+            if (absentAfterSeen.has(id) && !reported.has(id)) {
+                results.push({ source: state.source, id, timestamp: state.timestamp });
+                reported.add(id);
+            }
+            seen.add(id);
+        }
+        previous = current;
+    }
+    return results;
+}
+function nextSettledMatchingState(states, dom) {
+    return states
+        .filter((state) => {
+        if (state.timestamp < dom.timestamp || state.timestamp - dom.timestamp > DOM_STATE_SETTLE_MS)
+            return false;
+        if (dom.traceSequence !== undefined && state.sequence !== undefined && state.sequence <= dom.traceSequence)
+            return false;
+        return isSubsequence(dom.rowIds, state.ids);
+    })
+        .sort((left, right) => left.timestamp - right.timestamp || (left.sequence ?? 0) - (right.sequence ?? 0))[0];
+}
+function nearestState(states, timestamp, maxDistanceMs, traceSequence) {
+    let candidates = states;
+    if (traceSequence !== undefined) {
+        const causal = states.filter((state) => state.sequence !== undefined && state.sequence <= traceSequence);
+        const latestSequence = causal.reduce((latest, state) => Math.max(latest, state.sequence ?? -1), -1);
+        if (latestSequence >= 0)
+            candidates = causal.filter((state) => state.sequence === latestSequence);
+    }
+    let best;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const state of candidates) {
+        const distance = Math.abs(state.timestamp - timestamp);
+        const betterSequence = distance === bestDistance && (state.sequence ?? -1) > (best?.sequence ?? -1);
+        if (distance < bestDistance || betterSequence) {
+            best = state;
+            bestDistance = distance;
+        }
+    }
+    return bestDistance <= maxDistanceMs ? best : undefined;
+}
+function renderOrderRegressions(findings) {
+    const regressions = [];
+    const count = (kind, sources) => findings.filter((finding) => finding.kind === kind && (!sources || sources.includes(finding.source))).length;
+    const internalReorders = count("reorder", ["baseNodes", "currentNodes", "terminalRows", "visibleRows"]);
+    const renderedReorders = count("reorder", ["dom", "visual"]);
+    const reappearances = count("disappear-reappear");
+    const replacements = count("identity-replacement");
+    const mismatches = count("state-dom-mismatch");
+    if (internalReorders > 0)
+        regressions.push(`render order internal state reordered ${internalReorders} time${internalReorders === 1 ? "" : "s"}`);
+    if (renderedReorders > 0)
+        regressions.push(`render order DOM/visual rows reordered ${renderedReorders} time${renderedReorders === 1 ? "" : "s"}`);
+    if (reappearances > 0)
+        regressions.push(`render order rows disappeared and reappeared ${reappearances} time${reappearances === 1 ? "" : "s"}`);
+    if (replacements > 0)
+        regressions.push(`render order logical identities changed ids ${replacements} time${replacements === 1 ? "" : "s"}`);
+    if (mismatches > 0)
+        regressions.push(`render order DOM diverged from client state ${mismatches} time${mismatches === 1 ? "" : "s"}`);
+    return regressions;
+}
+function isSubsequence(candidate, full) {
+    let index = 0;
+    for (const id of full) {
+        if (id === candidate[index])
+            index += 1;
+        if (index === candidate.length)
+            return true;
+    }
+    return candidate.length === 0;
+}
+function uniqueStrings(values) {
+    return [...new Set(values.filter((value) => typeof value === "string" && value.length > 0))];
+}
+function stringField(value, key) {
+    const field = value[key];
+    return typeof field === "string" && field.length > 0 ? field : undefined;
+}
+function stringArrayField(value, key) {
+    const field = value[key];
+    return Array.isArray(field) ? field.filter((item) => typeof item === "string" && item.length > 0) : [];
+}
+function arraysEqual(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function compactOrder(ids) {
+    const shown = ids.slice(0, 8);
+    return `[${shown.join(", ")}${ids.length > shown.length ? `, … +${ids.length - shown.length}` : ""}]`;
+}

package/dist/debug/web-snapshot-browser-scripts.js

@@ -40,7 +40,7 @@ function classSummary(element) {
 }
 function attrMap(element) {
   const attrs = {};
-  const allow = /^(id|role|aria-|data-pibo-|data-testid$|disabled$|checked$|selected$|hidden$|tabindex$|title$)/;
+  const allow = /^(id|role|aria-|data-pibo-|data-testid$|data-row-id$|data-row-kind$|data-row-status$|data-trace-node-id$|data-event-id$|data-run-id$|data-order-source$|data-order-stream-id$|data-order-frame-index$|data-span-type$|data-span-status$|data-stable-key$|disabled$|checked$|selected$|hidden$|tabindex$|title$)/;
   for (const attr of Array.from(element.attributes || [])) {
     if (!allow.test(attr.name)) continue;
     if (/token|cookie|authorization|secret|password/i.test(attr.name)) {
@@ -101,8 +101,17 @@ function identityOf(element) {
   const session = element.getAttribute('data-pibo-session-id');
   const room = element.getAttribute('data-pibo-room-id');
   const view = element.getAttribute('data-pibo-view-id');
+  const row = element.getAttribute('data-row-id');
+  const traceNode = element.getAttribute('data-trace-node-id');
+  const eventId = element.getAttribute('data-event-id');
+  const runId = element.getAttribute('data-run-id');
   const testId = element.getAttribute('data-testid');
   const id = element.id;
+  if (debug === 'terminal-row' && row) return { identity: 'terminal-row:' + row, kind: 'pibo-row' };
+  if (debug === 'trace-span' && traceNode) return { identity: 'trace-span:' + traceNode, kind: 'pibo-trace-node' };
+  if (debug && traceNode) return { identity: debug + ':' + traceNode, kind: 'pibo-trace-node' };
+  if (debug && eventId) return { identity: debug + ':event:' + eventId, kind: 'pibo-event' };
+  if (debug && runId) return { identity: debug + ':run:' + runId, kind: 'pibo-run' };
   if (debug && session) return { identity: debug + ':' + session, kind: 'pibo-session' };
   if (debug && room) return { identity: debug + ':' + room, kind: 'pibo-room' };
   if (debug && view) return { identity: debug + ':' + view, kind: 'pibo-view' };

package/dist/debug/web-streaming-benchmark-analysis.js

@@ -1,5 +1,6 @@
 import { readFile } from "node:fs/promises";
 import { summarizeStreamingSelectedLiveEventSource } from "./web-streaming-report.js";
+import { analyzeStreamingRenderOrderCapture } from "./web-render-order-analysis.js";
 const LIVE_PIPELINE_MIN_PRESERVATION_RATIO = 0.95;
 const LIVE_PIPELINE_MIN_FLUSH_RATIO = 0.75;
 const URL_COMPARISON_MAX_SMOOTHNESS_DROP = 15;
@@ -327,6 +328,12 @@ export function summarizeStreamingBenchmarks(runs) {
         firstVisibleMs: numericStats(runs.map((run) => run.dom.firstPositiveUpdateMs)),
         longTaskMaxMs: numericStats(runs.map((run) => run.longTasks.maxMs)),
         regressionCount: numericStats(runs.map((run) => run.regressions.length)),
+        renderOrderDomStateCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.domStateCount)),
+        renderOrderTraceSnapshotCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.traceSnapshotCount)),
+        renderOrderReorderCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.reorderCount)),
+        renderOrderDisappearReappearCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.disappearReappearCount)),
+        renderOrderIdentityReplacementCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.identityReplacementCount)),
+        renderOrderStateDomMismatchCount: numericStats(runs.map((run) => run.renderOrder?.analysis?.stateDomMismatchCount)),
         debugEnqueueCount: numericStats(runs.map((run) => streamingDebugDeltaNumber(run, "enqueueCount"))),
         debugFlushCount: numericStats(runs.map((run) => streamingDebugDeltaNumber(run, "flushCount"))),
         debugFlushedEventCount: numericStats(runs.map((run) => streamingDebugDeltaNumber(run, "flushedEventCount"))),
@@ -529,7 +536,11 @@ function normalizeStreamingBenchmarkGroupArtifact(value, runs) {
     };
 }
 function normalizeStreamingBenchmarkRun(run) {
-    const scored = { ...run, regressions: Array.isArray(run.regressions) ? run.regressions : [], warnings: Array.isArray(run.warnings) ? run.warnings : [], score: run.score ?? scoreStreamingBenchmark(run) };
+    const renderOrder = analyzeStreamingRenderOrderCapture(run.renderOrder);
+    const baseRegressions = Array.isArray(run.regressions) ? run.regressions.filter((regression) => !regression.startsWith("render order ")) : [];
+    const regressions = [...new Set([...baseRegressions, ...(renderOrder?.analysis?.regressions ?? [])])];
+    const withRenderOrder = { ...run, renderOrder, regressions, warnings: Array.isArray(run.warnings) ? run.warnings : [] };
+    const scored = { ...withRenderOrder, score: run.score ?? scoreStreamingBenchmark(withRenderOrder) };
     const withProviderPreservation = { ...scored, providerPreservation: run.providerPreservation ?? summarizeStreamingProviderPreservation(scored) };
     const withLivePipeline = { ...withProviderPreservation, livePipeline: run.livePipeline ?? summarizeStreamingLivePipeline(withProviderPreservation) };
     return { ...withLivePipeline, cadence: run.cadence ?? summarizeStreamingCadence(withLivePipeline) };