tommy0103
90191e4604
Add @obelisk-apps/cli with the existing build, search, query, and attune contract plus official skill installation. Separate the docs-only skill artifact, bootstrap installer, release layout, cross-platform CI, and package-level regression coverage.
1117 lines
48 KiB
JavaScript
1117 lines
48 KiB
JavaScript
// Production renderer integration test for the dynamic SessionDetail timeline.
|
|
// Run: npm run test:electron:timeline
|
|
import { app, BrowserWindow, ipcMain, nativeImage } from 'electron';
|
|
import { dirname, join } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { setTimeout as delay } from 'node:timers/promises';
|
|
import { createSessionPatch } from '../src/shared/session-patch.mjs';
|
|
import { assembleSessionMessages } from '../src/shared/session-detail-assembly.mjs';
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url));
|
|
const appRoot = join(here, '..');
|
|
const sessionId = 'test-session';
|
|
const messageCount = Number(process.env.OBELISK_TIMELINE_MESSAGE_COUNT || 2000);
|
|
const focusMessageIndex = Math.floor(messageCount * 0.75);
|
|
const focusMessageUuid = `message-${focusMessageIndex}`;
|
|
const stationaryAppendRuns = 3;
|
|
const firstStationaryAppendIndex = messageCount;
|
|
const scrollingAppendIndex = messageCount + stationaryAppendRuns;
|
|
const nearTailEscapeAppendIndex = scrollingAppendIndex + 1;
|
|
const tailAppendIndex = nearTailEscapeAppendIndex + 1;
|
|
const channels = [
|
|
'db:getSessions',
|
|
'db:getSessionMessages',
|
|
'db:getSessionToolCalls',
|
|
'db:getSessionToolResults',
|
|
'db:getSessionPatch',
|
|
'db:getSessionSubagents',
|
|
'db:getSessionWorkflows',
|
|
'db:getSessionSummaries',
|
|
'db:getMessageFullText',
|
|
'db:getMemories',
|
|
'db:getProjects',
|
|
'db:getStats',
|
|
'settings:get',
|
|
];
|
|
|
|
let failures = 0;
|
|
let firstSessionListRead = true;
|
|
let nextPatchDelayMs = 0;
|
|
let stressGlobalCatalogue = false;
|
|
let currentSessionTitle = 'Virtualized timeline integration';
|
|
const ipcReads = {
|
|
messages: 0,
|
|
toolCalls: 0,
|
|
toolResults: 0,
|
|
subagents: 0,
|
|
workflows: 0,
|
|
summaries: 0,
|
|
patches: 0,
|
|
patchMessageRows: [],
|
|
};
|
|
const globalReads = {
|
|
sessions: 0,
|
|
memories: 0,
|
|
projects: 0,
|
|
stats: 0,
|
|
};
|
|
const messages = Array.from({ length: messageCount }, (_, index) => ({
|
|
uuid: `message-${index}`,
|
|
type: index % 2 === 0 ? 'user' : 'assistant',
|
|
timestamp: new Date(Date.UTC(2026, 6, 14, 0, 0, index)).toISOString(),
|
|
text: index === 1
|
|
? ''
|
|
: `Message ${index} ${'dynamic-height content '.repeat((index % 7) + 1)}`,
|
|
content_type: index === 1 ? 'tool_use' : 'text',
|
|
is_meta: 0,
|
|
}));
|
|
messages[focusMessageIndex].type = 'assistant';
|
|
messages[focusMessageIndex].text = `Truncated preview ${'indexed content '.repeat(700)}`;
|
|
const fullTextSentinel = `FULL TEXT SENTINEL ${'complete content '.repeat(80)}`;
|
|
const codexExecSource = 'const result = { ok: true };\nreturn result;';
|
|
const liveBashToolInput = {
|
|
command: "cat > /tmp/q_jul15b.mjs <<'EOF'\nconst codex = sessions({ source: 'codex', project: '%quiet-zero%', limit: 3 });\n\nconst tail = sql(`\n SELECT substr(text, 1, 500) as snippet, timestamp, role\n FROM messages\n WHERE session_id = ?\n AND timestamp > '2026-07-14T18:20:00'\n AND text IS NOT NULL\n AND COALESCE(is_meta, 0) = 0\n AND length(text) > 30\n ORDER BY timestamp DESC\n LIMIT 5\n`, codex[0]?.id);\n\n// Any new codex sessions for quiet-zero\nconst newer = sql(`\n SELECT id, title, started_at, ended_at, message_count\n FROM sessions\n WHERE COALESCE(source,'claude') = 'codex'\n AND project LIKE '%quiet-zero%'\n AND started_at > '2026-07-14T18:00:00'\n ORDER BY started_at DESC\n LIMIT 5\n`);\n\nreturn {\n main: { id: codex[0]?.id, ended: codex[0]?.ended_at, msgs: codex[0]?.message_count },\n afterLastSync: tail,\n newerSessions: newer,\n};\nEOF\nobelisk --query /tmp/q_jul15b.mjs",
|
|
description: 'Query for activity since last sync',
|
|
};
|
|
let codexExecOutput = JSON.stringify([{
|
|
type: 'input_text',
|
|
text: 'Script completed\nWall time 0.1 seconds\nOutput:\n{"ok":true}',
|
|
}]);
|
|
const toolCalls = [{
|
|
id: 'call-1',
|
|
message_uuid: 'message-1',
|
|
name: 'Bash',
|
|
input_json: JSON.stringify({ command: 'printf virtualized' }),
|
|
}, {
|
|
id: 'call-codex-exec',
|
|
message_uuid: focusMessageUuid,
|
|
name: 'exec',
|
|
input_json: JSON.stringify(codexExecSource),
|
|
}];
|
|
const toolResults = [{
|
|
tool_use_id: 'call-1',
|
|
content: `${'virtualized output\n'.repeat(80)}`,
|
|
is_error: 0,
|
|
}, {
|
|
tool_use_id: 'call-codex-exec',
|
|
content: codexExecOutput,
|
|
is_error: 0,
|
|
}];
|
|
|
|
function sessionSummary() {
|
|
return {
|
|
id: sessionId,
|
|
title: currentSessionTitle,
|
|
project: 'quiet-zero',
|
|
project_path: '/tmp/quiet-zero',
|
|
source: 'claude',
|
|
started_at: '2026-07-14T00:00:00.000Z',
|
|
ended_at: '2026-07-14T01:00:00.000Z',
|
|
message_count: messages.length,
|
|
git_branch: 'main',
|
|
};
|
|
}
|
|
|
|
function sessionSummaries() {
|
|
return [sessionSummary(), ...Array.from({ length: 999 }, (_, index) => ({
|
|
...sessionSummary(),
|
|
id: `background-session-${index}`,
|
|
title: `Background session ${index}`,
|
|
project: `project-${index % 250}`,
|
|
project_path: `/tmp/project-${index % 250}`,
|
|
message_count: index % 200,
|
|
}))];
|
|
}
|
|
|
|
function assert(condition, message) {
|
|
if (condition) console.log(`PASS: ${message}`);
|
|
else {
|
|
failures++;
|
|
console.error(`FAIL: ${message}`);
|
|
}
|
|
}
|
|
|
|
async function waitFor(webContents, expression, message, timeoutMs = 8000) {
|
|
const deadline = Date.now() + timeoutMs;
|
|
while (Date.now() < deadline) {
|
|
if (await webContents.executeJavaScript(`Boolean(${expression})`, true)) return;
|
|
await delay(40);
|
|
}
|
|
throw new Error(`Timed out waiting for ${message}`);
|
|
}
|
|
|
|
async function startRendererTrace(win, { captureScreenshots = false } = {}) {
|
|
const traceEvents = [];
|
|
let completeTrace;
|
|
const traceComplete = new Promise(resolve => { completeTrace = resolve; });
|
|
const onMessage = (_event, method, params = {}) => {
|
|
if (method === 'Tracing.dataCollected') traceEvents.push(...(params.value || []));
|
|
if (method === 'Tracing.tracingComplete') completeTrace();
|
|
};
|
|
win.webContents.debugger.attach('1.3');
|
|
win.webContents.debugger.on('message', onMessage);
|
|
await win.webContents.debugger.sendCommand('Tracing.start', {
|
|
categories: [
|
|
'devtools.timeline',
|
|
'disabled-by-default-devtools.timeline',
|
|
'blink.user_timing',
|
|
'toplevel',
|
|
captureScreenshots ? 'disabled-by-default-devtools.screenshot' : '',
|
|
].filter(Boolean).join(','),
|
|
options: 'record-as-much-as-possible',
|
|
transferMode: 'ReportEvents',
|
|
});
|
|
return async () => {
|
|
await win.webContents.debugger.sendCommand('Tracing.end');
|
|
await traceComplete;
|
|
win.webContents.debugger.removeListener('message', onMessage);
|
|
win.webContents.debugger.detach();
|
|
return traceEvents;
|
|
};
|
|
}
|
|
|
|
function screenshotContentDeviation(event) {
|
|
const image = nativeImage.createFromBuffer(Buffer.from(event.args.snapshot, 'base64'));
|
|
const size = image.getSize();
|
|
const crop = image.crop({
|
|
x: Math.floor(size.width * 0.32),
|
|
y: Math.floor(size.height * 0.2),
|
|
width: Math.max(1, Math.floor(size.width * 0.5)),
|
|
height: Math.max(1, Math.floor(size.height * 0.6)),
|
|
});
|
|
const bitmap = crop.toBitmap();
|
|
let sum = 0;
|
|
let sumSquares = 0;
|
|
let samples = 0;
|
|
for (let offset = 0; offset + 3 < bitmap.length; offset += 4) {
|
|
const value = (bitmap[offset] + bitmap[offset + 1] + bitmap[offset + 2]) / 3;
|
|
sum += value;
|
|
sumSquares += value * value;
|
|
samples++;
|
|
}
|
|
const mean = sum / samples;
|
|
return Math.sqrt(Math.max(0, sumSquares / samples - mean * mean)) / 255;
|
|
}
|
|
|
|
let wheelTraceRun = 0;
|
|
async function traceWheelPaintContinuity(win, { updateTool = false } = {}) {
|
|
const runId = wheelTraceRun++;
|
|
const startMark = `obelisk-wheel-${runId}-start`;
|
|
const endMark = `obelisk-wheel-${runId}-end`;
|
|
win.showInactive();
|
|
await delay(180);
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const tool = document.querySelector('[data-view-key="tool:call-1"]');
|
|
if (tool && !tool.classList.contains('open')) tool.querySelector('.toolcall-toggle')?.click();
|
|
})()`, true);
|
|
await delay(120);
|
|
const before = await win.webContents.executeJavaScript(
|
|
`document.querySelector('.detail-wrap')?.scrollTop || 0`,
|
|
true,
|
|
);
|
|
const stopRendererTrace = await startRendererTrace(win, { captureScreenshots: true });
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const tool = document.querySelector('[data-view-key="tool:call-1"]');
|
|
const probe = {
|
|
gaps: [],
|
|
previous: performance.now(),
|
|
stop: false,
|
|
wheels: 0,
|
|
updateVisibleAtWheel: null,
|
|
};
|
|
const recordWheel = () => { probe.wheels++; };
|
|
const observer = new MutationObserver(() => {
|
|
if (
|
|
probe.updateVisibleAtWheel === null
|
|
&& tool?.querySelector('.prompt-cmd')?.textContent.includes('/tmp/q_jul15b.mjs')
|
|
) probe.updateVisibleAtWheel = probe.wheels;
|
|
});
|
|
wrap?.addEventListener('wheel', recordWheel, { passive: true });
|
|
if (tool) observer.observe(tool, { childList: true, characterData: true, subtree: true });
|
|
probe.cleanup = () => {
|
|
wrap?.removeEventListener('wheel', recordWheel);
|
|
observer.disconnect();
|
|
};
|
|
window.__wheelFrameProbe = probe;
|
|
function frame(now) {
|
|
probe.gaps.push(now - probe.previous);
|
|
probe.previous = now;
|
|
if (!probe.stop) requestAnimationFrame(frame);
|
|
}
|
|
requestAnimationFrame(frame);
|
|
})()`, true);
|
|
if (updateTool) {
|
|
nextPatchDelayMs = 80;
|
|
replaceToolInput(win, 'call-1', liveBashToolInput, { notify: false });
|
|
}
|
|
await win.webContents.executeJavaScript(
|
|
`performance.mark(${JSON.stringify(startMark)})`,
|
|
true,
|
|
);
|
|
for (let index = 0; index < 8; index++) {
|
|
win.webContents.sendInputEvent({
|
|
type: 'mouseWheel',
|
|
x: 800,
|
|
y: 400,
|
|
deltaX: 0,
|
|
deltaY: -120,
|
|
canScroll: true,
|
|
});
|
|
if (updateTool && index === 2) {
|
|
// Production sends both notifications for one daemon build. The global
|
|
// catalogue invalidation must not reload 1000 sessions into the renderer
|
|
// while the current conversation owns the scroll gesture.
|
|
win.webContents.send('obelisk:index-updated', { affectedSessionIds: [sessionId] });
|
|
win.webContents.send('obelisk:session-updated', { sessionId });
|
|
}
|
|
await delay(45);
|
|
}
|
|
// Stop inside the scrollend grace window. Any patch preparation or DOM
|
|
// mutation seen here competed with the physical wheel burst.
|
|
await delay(60);
|
|
const after = await win.webContents.executeJavaScript(
|
|
`document.querySelector('.detail-wrap')?.scrollTop || 0`,
|
|
true,
|
|
);
|
|
const frameProbe = await win.webContents.executeJavaScript(`(() => {
|
|
performance.mark(${JSON.stringify(endMark)});
|
|
const probe = window.__wheelFrameProbe;
|
|
probe.stop = true;
|
|
probe.cleanup();
|
|
delete window.__wheelFrameProbe;
|
|
return { gaps: probe.gaps, updateVisibleAtWheel: probe.updateVisibleAtWheel };
|
|
})()`, true);
|
|
const traceEvents = await stopRendererTrace();
|
|
const screenshots = traceEvents
|
|
.filter(event => event.name === 'Screenshot' && event.args?.snapshot);
|
|
const deviations = screenshots.map(screenshotContentDeviation);
|
|
const taskMetrics = rendererTaskMetrics(traceEvents, startMark, endMark);
|
|
return {
|
|
before,
|
|
after,
|
|
screenshots: screenshots.length,
|
|
minDeviation: Math.min(Infinity, ...deviations),
|
|
maxFrameGap: Math.max(0, ...frameProbe.gaps),
|
|
maxTaskMs: taskMetrics.maxTaskMs,
|
|
maxFunctionCallMs: taskMetrics.maxFunctionCallMs,
|
|
updateVisibleAtWheel: frameProbe.updateVisibleAtWheel,
|
|
slowestChildren: taskMetrics.slowestChildren,
|
|
// A blank content crop is almost uniform (< 0.035); rendered fixture rows
|
|
// stay comfortably above 0.06 even while the compositor is scrolling.
|
|
blankFrames: deviations.filter(value => value < 0.035).length,
|
|
};
|
|
}
|
|
|
|
function rendererTaskMetrics(traceEvents, startMark, endMark) {
|
|
const start = traceEvents.find(event => event.name === startMark);
|
|
const end = [...traceEvents].reverse().find(event => event.name === endMark);
|
|
if (!start || !end) throw new Error(`Missing renderer trace marks: ${startMark}, ${endMark}`);
|
|
const tasks = traceEvents
|
|
.filter(event => (
|
|
/RunTask$/.test(event.name || '')
|
|
&& event.ph === 'X'
|
|
&& event.pid === start.pid
|
|
&& event.tid === start.tid
|
|
&& event.ts >= start.ts
|
|
&& event.ts <= end.ts
|
|
));
|
|
const taskDurations = tasks.map(event => event.dur / 1000);
|
|
if (taskDurations.length === 0) throw new Error('Renderer trace contained no RunTask events');
|
|
const slowest = tasks.reduce((best, task) => !best || task.dur > best.dur ? task : best, null);
|
|
const slowestChildren = slowest
|
|
? traceEvents
|
|
.filter(event => (
|
|
event.ph === 'X'
|
|
&& event.pid === slowest.pid
|
|
&& event.tid === slowest.tid
|
|
&& event !== slowest
|
|
&& event.ts >= slowest.ts
|
|
&& event.ts + (event.dur || 0) <= slowest.ts + slowest.dur
|
|
))
|
|
.sort((a, b) => (b.dur || 0) - (a.dur || 0))
|
|
.slice(0, 8)
|
|
.map(event => ({ name: event.name, durationMs: (event.dur || 0) / 1000 }))
|
|
: [];
|
|
return {
|
|
tasks: taskDurations.length,
|
|
maxTaskMs: Math.max(0, ...taskDurations),
|
|
maxFunctionCallMs: Math.max(0, ...traceEvents
|
|
.filter(event => (
|
|
event.name === 'FunctionCall'
|
|
&& event.ph === 'X'
|
|
&& event.pid === start.pid
|
|
&& event.tid === start.tid
|
|
&& event.ts >= start.ts
|
|
&& event.ts <= end.ts
|
|
))
|
|
.map(event => (event.dur || 0) / 1000)),
|
|
slowestChildren,
|
|
};
|
|
}
|
|
|
|
async function traceStationaryAppend(win, index, expectedTotal, runIndex) {
|
|
const startMark = `obelisk-live-commit-${runIndex}-start`;
|
|
const endMark = `obelisk-live-commit-${runIndex}-end`;
|
|
const stopRendererTrace = await startRendererTrace(win);
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const expected = ${JSON.stringify(String(expectedTotal))};
|
|
const counter = document.querySelector('.flap-number');
|
|
performance.mark(${JSON.stringify(startMark)});
|
|
window.__obeliskLiveCommitObserved = new Promise(resolve => {
|
|
const finish = () => requestAnimationFrame(() => {
|
|
performance.mark(${JSON.stringify(endMark)});
|
|
resolve(true);
|
|
});
|
|
if (counter?.getAttribute('aria-label') === expected) {
|
|
finish();
|
|
return;
|
|
}
|
|
const observer = new MutationObserver(() => {
|
|
if (counter?.getAttribute('aria-label') !== expected) return;
|
|
observer.disconnect();
|
|
finish();
|
|
});
|
|
observer.observe(counter, { attributes: true, attributeFilter: ['aria-label'] });
|
|
});
|
|
return true;
|
|
})()`, true);
|
|
appendMessage(win, index);
|
|
await win.webContents.executeJavaScript('window.__obeliskLiveCommitObserved', true);
|
|
await win.webContents.executeJavaScript('delete window.__obeliskLiveCommitObserved', true);
|
|
return rendererTaskMetrics(await stopRendererTrace(), startMark, endMark);
|
|
}
|
|
|
|
function registerHandlers() {
|
|
ipcMain.handle('db:getSessions', async () => {
|
|
globalReads.sessions++;
|
|
if (firstSessionListRead) {
|
|
firstSessionListRead = false;
|
|
await delay(120);
|
|
}
|
|
return stressGlobalCatalogue ? sessionSummaries() : [sessionSummary()];
|
|
});
|
|
ipcMain.handle('db:getSessionMessages', () => { ipcReads.messages++; return messages; });
|
|
ipcMain.handle('db:getSessionToolCalls', () => { ipcReads.toolCalls++; return toolCalls; });
|
|
ipcMain.handle('db:getSessionToolResults', () => { ipcReads.toolResults++; return toolResults; });
|
|
ipcMain.handle('db:getSessionPatch', async (_event, _sessionId, cursor) => {
|
|
ipcReads.patches++;
|
|
const delayMs = nextPatchDelayMs;
|
|
nextPatchDelayMs = 0;
|
|
if (delayMs > 0) await delay(delayMs);
|
|
const patch = createSessionPatch({
|
|
messages: assembleSessionMessages({ messages, toolCalls, toolResults, subagents: [], workflows: [] }),
|
|
workflows: [],
|
|
}, cursor);
|
|
ipcReads.patchMessageRows.push(patch.changes.messages.length);
|
|
return { ...patch, session: sessionSummary() };
|
|
});
|
|
ipcMain.handle('db:getSessionSubagents', () => { ipcReads.subagents++; return []; });
|
|
ipcMain.handle('db:getSessionWorkflows', () => { ipcReads.workflows++; return []; });
|
|
ipcMain.handle('db:getSessionSummaries', () => { ipcReads.summaries++; return []; });
|
|
ipcMain.handle('db:getMessageFullText', (_event, uuid) => uuid === focusMessageUuid ? fullTextSentinel : null);
|
|
ipcMain.handle('db:getMemories', () => { globalReads.memories++; return []; });
|
|
ipcMain.handle('db:getProjects', () => {
|
|
globalReads.projects++;
|
|
return [{ project: 'quiet-zero', count: 1 }];
|
|
});
|
|
ipcMain.handle('db:getStats', () => { globalReads.stats++; return {}; });
|
|
ipcMain.handle('settings:get', () => ({}));
|
|
}
|
|
|
|
function appendMessage(win, index) {
|
|
messages.push({
|
|
uuid: `message-${index}`,
|
|
type: index % 2 === 0 ? 'user' : 'assistant',
|
|
timestamp: new Date().toISOString(),
|
|
text: `Live message ${index}`,
|
|
content_type: 'text',
|
|
is_meta: 0,
|
|
});
|
|
win.webContents.send('obelisk:session-updated', { sessionId });
|
|
}
|
|
|
|
function replaceMessageText(win, uuid, text) {
|
|
const index = messages.findIndex(message => message.uuid === uuid);
|
|
if (index < 0) throw new Error(`Cannot update missing message ${uuid}`);
|
|
messages[index] = { ...messages[index], text };
|
|
win.webContents.send('obelisk:session-updated', { sessionId });
|
|
}
|
|
|
|
function replaceToolResult(win, toolUseId, content) {
|
|
const index = toolResults.findIndex(result => result.tool_use_id === toolUseId);
|
|
if (index < 0) throw new Error(`Cannot update missing tool result ${toolUseId}`);
|
|
toolResults[index] = { ...toolResults[index], content };
|
|
win.webContents.send('obelisk:session-updated', { sessionId });
|
|
}
|
|
|
|
function replaceToolInput(win, toolUseId, input, { notify = true } = {}) {
|
|
const index = toolCalls.findIndex(toolCall => toolCall.id === toolUseId);
|
|
if (index < 0) throw new Error(`Cannot update missing tool call ${toolUseId}`);
|
|
toolCalls[index] = { ...toolCalls[index], input_json: JSON.stringify(input) };
|
|
if (notify) win.webContents.send('obelisk:session-updated', { sessionId });
|
|
}
|
|
|
|
async function run() {
|
|
registerHandlers();
|
|
const win = new BrowserWindow({
|
|
show: false,
|
|
width: 1200,
|
|
height: 800,
|
|
webPreferences: {
|
|
preload: join(appRoot, 'out', 'preload', 'index.js'),
|
|
contextIsolation: true,
|
|
nodeIntegration: false,
|
|
},
|
|
});
|
|
|
|
await win.loadFile(join(appRoot, 'out', 'renderer', 'index.html'), {
|
|
hash: '/sessions',
|
|
});
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.body.textContent.includes('Virtualized timeline integration')`,
|
|
'the session list before cold open',
|
|
);
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const probe = {
|
|
maxOverlaps: 0,
|
|
framesWithOverlap: 0,
|
|
samples: 0,
|
|
examples: [],
|
|
stop: false,
|
|
};
|
|
window.__coldOpenOverlapProbe = probe;
|
|
function sample() {
|
|
if (probe.stop) return;
|
|
const timeline = document.querySelector('.virtual-timeline');
|
|
const rows = timeline && getComputedStyle(timeline).visibility !== 'hidden'
|
|
? [...timeline.querySelectorAll('.virtual-timeline-row')]
|
|
.map(row => row.getBoundingClientRect())
|
|
.filter(rect => rect.height > 0)
|
|
: [];
|
|
let overlaps = 0;
|
|
for (let index = 1; index < rows.length; index++) {
|
|
if (rows[index].top < rows[index - 1].bottom - 1) overlaps++;
|
|
}
|
|
probe.maxOverlaps = Math.max(probe.maxOverlaps, overlaps);
|
|
if (overlaps > 0) {
|
|
probe.framesWithOverlap++;
|
|
if (probe.examples.length < 2) {
|
|
probe.examples.push({
|
|
overlaps,
|
|
totalSize: document.querySelector('.virtual-timeline')?.style.height,
|
|
rows: [...document.querySelectorAll('.virtual-timeline-row')].slice(0, 4).map(row => ({
|
|
index: row.dataset.index,
|
|
transform: row.style.transform,
|
|
top: row.getBoundingClientRect().top,
|
|
height: row.getBoundingClientRect().height,
|
|
})),
|
|
});
|
|
}
|
|
}
|
|
probe.samples++;
|
|
requestAnimationFrame(sample);
|
|
}
|
|
requestAnimationFrame(sample);
|
|
window.location.hash = ${JSON.stringify(`/sessions/${sessionId}`)};
|
|
})()`, true);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-number')?.getAttribute('aria-label') === '${messageCount}'`,
|
|
'the cold-start session snapshot',
|
|
);
|
|
await delay(100);
|
|
const coldOpenOverlap = await win.webContents.executeJavaScript(`(() => {
|
|
const probe = window.__coldOpenOverlapProbe;
|
|
probe.stop = true;
|
|
delete window.__coldOpenOverlapProbe;
|
|
return probe;
|
|
})()`, true);
|
|
assert(
|
|
coldOpenOverlap.maxOverlaps === 0,
|
|
`cold-open timeline never paints intersecting message rows (${JSON.stringify(coldOpenOverlap)})`,
|
|
);
|
|
|
|
const initial = await win.webContents.executeJavaScript(`(() => ({
|
|
current: Number(document.querySelector('.msg-nav-current')?.textContent),
|
|
total: Number(document.querySelector('.flap-number')?.getAttribute('aria-label')),
|
|
rows: document.querySelectorAll('.virtual-timeline-row').length,
|
|
roots: document.querySelectorAll('.msg[data-uuid], .wf-card[data-uuid], .skill-card[data-uuid]').length,
|
|
scrollTop: document.querySelector('.detail-wrap')?.scrollTop,
|
|
scrollHeight: document.querySelector('.detail-wrap')?.scrollHeight,
|
|
}))()`, true);
|
|
assert(initial.scrollTop < 2 && initial.current < 100, `cold start stays at the beginning (scrollTop ${initial.scrollTop}, item ${initial.current})`);
|
|
assert(initial.total === messageCount, `timeline exposes all ${messageCount} items (got ${initial.total})`);
|
|
assert(initial.rows < 60 && initial.roots === initial.rows, `only ${initial.rows} virtual rows are mounted`);
|
|
|
|
const disclosure = await win.webContents.executeJavaScript(`(async () => {
|
|
const toggle = document.querySelector('.toolcall-toggle');
|
|
const row = toggle?.closest('.virtual-timeline-row');
|
|
const before = row?.getBoundingClientRect().height || 0;
|
|
toggle?.click();
|
|
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
|
const after = row?.getBoundingClientRect().height || 0;
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
wrap.scrollTop = wrap.scrollHeight * 0.55;
|
|
await new Promise(resolve => setTimeout(resolve, 250));
|
|
const unmounted = !document.querySelector('[data-view-key="tool:call-1"]');
|
|
document.querySelector('button[title="First"]')?.click();
|
|
await new Promise(resolve => setTimeout(resolve, 350));
|
|
return {
|
|
before,
|
|
after,
|
|
unmounted,
|
|
restored: Boolean(document.querySelector('[data-view-key="tool:call-1"].open')),
|
|
};
|
|
})()`, true);
|
|
assert(disclosure.after > disclosure.before, `expanded tool row remeasures from ${disclosure.before}px to ${disclosure.after}px`);
|
|
assert(disclosure.unmounted, 'the expanded tool row unmounts outside overscan');
|
|
assert(disclosure.restored, 'disclosure state survives unmount and remount');
|
|
|
|
const passiveScrollSettlement = await win.webContents.executeJavaScript(`new Promise(resolve => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const originalScrollTo = wrap.scrollTo.bind(wrap);
|
|
const blockAutomaticScrollEnd = event => event.stopImmediatePropagation();
|
|
let phase = 'scrolling';
|
|
let postScrollEndWrites = 0;
|
|
wrap.addEventListener('scrollend', blockAutomaticScrollEnd, true);
|
|
wrap.scrollTo = (...args) => {
|
|
if (phase === 'settled') postScrollEndWrites++;
|
|
return originalScrollTo(...args);
|
|
};
|
|
wrap.dispatchEvent(new WheelEvent('wheel', { deltaY: 70, bubbles: true }));
|
|
const startedAt = performance.now();
|
|
function frame(now) {
|
|
wrap.scrollTop += 55;
|
|
if (now - startedAt < 600) {
|
|
requestAnimationFrame(frame);
|
|
return;
|
|
}
|
|
const beforeScrollEnd = wrap.scrollTop;
|
|
phase = 'settled';
|
|
wrap.removeEventListener('scrollend', blockAutomaticScrollEnd, true);
|
|
wrap.dispatchEvent(new Event('scrollend'));
|
|
setTimeout(() => {
|
|
const afterScrollEnd = wrap.scrollTop;
|
|
wrap.scrollTo = originalScrollTo;
|
|
resolve({ beforeScrollEnd, afterScrollEnd, postScrollEndWrites });
|
|
}, 120);
|
|
}
|
|
requestAnimationFrame(frame);
|
|
})`, true);
|
|
assert(
|
|
passiveScrollSettlement.postScrollEndWrites === 0
|
|
&& Math.abs(passiveScrollSettlement.afterScrollEnd - passiveScrollSettlement.beforeScrollEnd) < 1,
|
|
`ordinary scrolling settles without rollback (${JSON.stringify(passiveScrollSettlement)})`,
|
|
);
|
|
await win.webContents.executeJavaScript(`document.querySelector('button[title="First"]')?.click()`, true);
|
|
await delay(350);
|
|
|
|
const wheelBaseline = await traceWheelPaintContinuity(win);
|
|
await win.webContents.executeJavaScript(`document.querySelector('button[title="First"]')?.click()`, true);
|
|
await delay(350);
|
|
const globalReadsBeforeWheelUpdate = { ...globalReads };
|
|
stressGlobalCatalogue = true;
|
|
const wheelPaint = await traceWheelPaintContinuity(win, { updateTool: true });
|
|
stressGlobalCatalogue = false;
|
|
assert(
|
|
Math.abs(wheelPaint.after - wheelPaint.before) > 500 && wheelPaint.screenshots >= 4,
|
|
`wheel trace exercises compositor scrolling (${JSON.stringify(wheelPaint)})`,
|
|
);
|
|
assert(
|
|
wheelPaint.blankFrames === 0,
|
|
`fast wheel scrolling never presents a blank timeline frame (${JSON.stringify(wheelPaint)})`,
|
|
);
|
|
assert(
|
|
wheelPaint.maxFrameGap < 50,
|
|
`Bash tool update avoids a multi-frame renderer stall while scrolling (${JSON.stringify(wheelPaint)})`,
|
|
);
|
|
assert(
|
|
wheelPaint.maxFunctionCallMs <= wheelBaseline.maxFunctionCallMs + 2,
|
|
`Bash patch preparation stays off the scrolling renderer task budget (baseline ${wheelBaseline.maxFunctionCallMs.toFixed(2)}ms, update ${wheelPaint.maxFunctionCallMs.toFixed(2)}ms)`,
|
|
);
|
|
assert(
|
|
wheelPaint.updateVisibleAtWheel === null,
|
|
`Bash tool update stays out of the timeline DOM for the complete wheel burst (became visible after wheel ${wheelPaint.updateVisibleAtWheel})`,
|
|
);
|
|
assert(
|
|
JSON.stringify(globalReads) === JSON.stringify(globalReadsBeforeWheelUpdate),
|
|
`conversation updates do not reload global catalogues while scrolling (${JSON.stringify(globalReads)})`,
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`Boolean(document.querySelector('[data-view-key="tool:call-1"] .prompt-cmd')?.textContent.includes('/tmp/q_jul15b.mjs'))`,
|
|
'post-scroll Bash tool update',
|
|
);
|
|
|
|
await win.webContents.executeJavaScript(`window.location.hash = '#/sessions'`, true);
|
|
await waitFor(win.webContents, `!document.querySelector('.virtual-timeline')`, 'session detail deactivation');
|
|
for (let attempt = 0; attempt < 100 && globalReads.sessions === globalReadsBeforeWheelUpdate.sessions; attempt++) {
|
|
await delay(20);
|
|
}
|
|
const expectedGlobalReadsAfterLeaving = Object.fromEntries(
|
|
Object.entries(globalReadsBeforeWheelUpdate).map(([key, value]) => [key, value + 1]),
|
|
);
|
|
assert(
|
|
JSON.stringify(globalReads) === JSON.stringify(expectedGlobalReadsAfterLeaving),
|
|
`leaving conversation detail flushes one coalesced global refresh (${JSON.stringify(globalReads)})`,
|
|
);
|
|
await win.webContents.executeJavaScript(`(async () => {
|
|
const search = document.querySelector('#search');
|
|
search.value = 'SENTINEL';
|
|
search.dispatchEvent(new Event('input', { bubbles: true }));
|
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|
})()`, true);
|
|
await win.webContents.executeJavaScript(
|
|
`window.location.hash = '#/sessions/${sessionId}?focus=${focusMessageUuid}'`,
|
|
true,
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('[data-uuid="${focusMessageUuid}"].is-focused')`,
|
|
'offscreen UUID focus',
|
|
);
|
|
const focusState = await win.webContents.executeJavaScript(`(() => {
|
|
const target = document.querySelector('[data-uuid="${focusMessageUuid}"].is-focused');
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const targetRect = target.getBoundingClientRect();
|
|
const wrapRect = wrap.getBoundingClientRect();
|
|
return {
|
|
current: Number(document.querySelector('.msg-nav-current')?.textContent),
|
|
visible: targetRect.bottom > wrapRect.top && targetRect.top < wrapRect.bottom,
|
|
};
|
|
})()`, true);
|
|
assert(focusState.visible, `UUID navigation mounts and reveals ${focusMessageUuid} (viewport ends at item ${focusState.current})`);
|
|
const codexDisplayState = await win.webContents.executeJavaScript(`(async () => {
|
|
const tool = document.querySelector('[data-view-key="tool:call-codex-exec"]');
|
|
tool?.querySelector('.toolcall-toggle')?.click();
|
|
tool?.querySelector('.raw-toggle')?.click();
|
|
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
|
return {
|
|
open: tool?.classList.contains('open'),
|
|
raw: tool?.querySelector('.raw-toggle')?.classList.contains('active'),
|
|
};
|
|
})()`, true);
|
|
assert(codexDisplayState.open && codexDisplayState.raw, 'Codex exec disclosure and Raw state update without rebuilding its presentation');
|
|
codexExecOutput = JSON.stringify([{
|
|
type: 'input_text',
|
|
text: 'Script completed\nWall time 0.1 seconds\nOutput:\n{"ok":true,"revision":2}',
|
|
}]);
|
|
replaceToolResult(win, 'call-codex-exec', codexExecOutput);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('[data-view-key="tool:call-codex-exec"] .toolcall-raw')?.textContent.includes('revision')`,
|
|
'updated Codex exec result',
|
|
);
|
|
const updatedCodexDisplayState = await win.webContents.executeJavaScript(`(() => {
|
|
const tool = document.querySelector('[data-view-key="tool:call-codex-exec"]');
|
|
return {
|
|
open: tool?.classList.contains('open'),
|
|
raw: tool?.querySelector('.raw-toggle')?.classList.contains('active'),
|
|
};
|
|
})()`, true);
|
|
assert(updatedCodexDisplayState.open && updatedCodexDisplayState.raw, 'Codex exec disclosure and Raw state survive a result update');
|
|
|
|
await win.webContents.executeJavaScript(
|
|
`document.querySelector('[data-uuid="${focusMessageUuid}"] .truncated-btn')?.click()`,
|
|
true,
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('[data-uuid="${focusMessageUuid}"]')?.textContent.includes('FULL TEXT SENTINEL')`,
|
|
'expanded full message text',
|
|
);
|
|
const fullTextSearchState = await win.webContents.executeJavaScript(`(() => {
|
|
const target = document.querySelector('[data-uuid="${focusMessageUuid}"]');
|
|
return {
|
|
highlighted: [...target.querySelectorAll('mark')].some(mark => mark.textContent === 'SENTINEL'),
|
|
truncatedButtonRemoved: !target.querySelector('.truncated-btn'),
|
|
};
|
|
})()`, true);
|
|
assert(
|
|
fullTextSearchState.highlighted && fullTextSearchState.truncatedButtonRemoved,
|
|
'full-text expansion re-renders the row and preserves search highlighting',
|
|
);
|
|
await delay(250);
|
|
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const original = window.marked.parse;
|
|
const originalJsonParse = JSON.parse;
|
|
const codexExecOutput = ${JSON.stringify(codexExecOutput)};
|
|
const trackedPrefixes = [...document.querySelectorAll('.virtual-timeline-row [data-uuid]')]
|
|
.map(element => element.getAttribute('data-uuid'))
|
|
.filter(uuid => /^message-\d+$/.test(uuid))
|
|
.map(uuid => 'Message ' + uuid.slice('message-'.length) + ' ');
|
|
let calls = 0;
|
|
let codexExecCalls = 0;
|
|
window.marked.parse = function timelineMarkdownProbe(...args) {
|
|
const text = String(args[0] || '');
|
|
if (trackedPrefixes.some(prefix => text.startsWith(prefix))) calls++;
|
|
return original.apply(this, args);
|
|
};
|
|
JSON.parse = function timelineJsonProbe(value, ...args) {
|
|
if (value === codexExecOutput) codexExecCalls++;
|
|
return originalJsonParse.call(this, value, ...args);
|
|
};
|
|
window.__timelineMarkdownProbe = {
|
|
calls: () => calls,
|
|
codexExecCalls: () => codexExecCalls,
|
|
restore: () => {
|
|
window.marked.parse = original;
|
|
JSON.parse = originalJsonParse;
|
|
},
|
|
};
|
|
})()`, true);
|
|
const stationaryAnchorBefore = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const wrapRect = wrap.getBoundingClientRect();
|
|
const anchorRow = [...document.querySelectorAll('.virtual-timeline-row')]
|
|
.find(row => {
|
|
const rect = row.getBoundingClientRect();
|
|
return rect.bottom > wrapRect.top && rect.top < wrapRect.bottom;
|
|
});
|
|
const anchorElement = anchorRow?.querySelector('[data-uuid]');
|
|
return anchorElement && {
|
|
uuid: anchorElement.getAttribute('data-uuid'),
|
|
offset: anchorRow.getBoundingClientRect().top - wrapRect.top,
|
|
};
|
|
})()`, true);
|
|
const stationaryTraces = [];
|
|
for (let runIndex = 0; runIndex < stationaryAppendRuns; runIndex++) {
|
|
stationaryTraces.push(await traceStationaryAppend(
|
|
win,
|
|
firstStationaryAppendIndex + runIndex,
|
|
messageCount + runIndex + 1,
|
|
runIndex,
|
|
));
|
|
await delay(250);
|
|
}
|
|
const liveHeaderMetadata = await win.webContents.executeJavaScript(`(() => ({
|
|
text: document.querySelector('.session-meta-inline')?.textContent || '',
|
|
}))()`, true);
|
|
assert(
|
|
liveHeaderMetadata.text.includes(`${messageCount + stationaryAppendRuns} messages`),
|
|
`session header metadata follows incremental patches without a global refresh (${liveHeaderMetadata.text.trim()})`,
|
|
);
|
|
const stationaryAnchorSelector = `[data-uuid="${stationaryAnchorBefore?.uuid}"]`;
|
|
const stationaryAnchorAfter = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const target = document.querySelector(${JSON.stringify(stationaryAnchorSelector)});
|
|
const row = target?.closest('.virtual-timeline-row');
|
|
return target && {
|
|
uuid: target.getAttribute('data-uuid'),
|
|
offset: row.getBoundingClientRect().top - wrap.getBoundingClientRect().top,
|
|
};
|
|
})()`, true);
|
|
const unchangedRowRenderCalls = await win.webContents.executeJavaScript(`(() => {
|
|
const calls = {
|
|
markdown: window.__timelineMarkdownProbe.calls(),
|
|
codexExec: window.__timelineMarkdownProbe.codexExecCalls(),
|
|
};
|
|
window.__timelineMarkdownProbe.restore();
|
|
delete window.__timelineMarkdownProbe;
|
|
return calls;
|
|
})()`, true);
|
|
assert(unchangedRowRenderCalls.markdown === 0, `three tail appends perform zero Markdown formatting calls for unchanged mounted rows (got ${unchangedRowRenderCalls.markdown})`);
|
|
assert(unchangedRowRenderCalls.codexExec === 0, `three tail appends perform zero Codex exec JSON decodes for an unchanged mounted row (got ${unchangedRowRenderCalls.codexExec})`);
|
|
assert(
|
|
stationaryAnchorBefore?.uuid === stationaryAnchorAfter?.uuid
|
|
&& Math.abs(stationaryAnchorBefore.offset - stationaryAnchorAfter.offset) < 2,
|
|
`stationary live commits preserve reader anchor ${stationaryAnchorBefore?.uuid}`,
|
|
);
|
|
for (const [runIndex, trace] of stationaryTraces.entries()) {
|
|
if (trace.maxTaskMs >= 8.33) console.log(`SLOWEST RENDERER TASK ${runIndex + 1}: ${JSON.stringify(trace.slowestChildren)}`);
|
|
assert(trace.maxTaskMs < 8.33, `stationary live commit ${runIndex + 1} stays inside a 120Hz renderer task budget (${trace.maxTaskMs.toFixed(2)}ms across ${trace.tasks} tasks)`);
|
|
}
|
|
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const probe = { minRows: Infinity, zeroFrames: 0, samples: 0, stop: false };
|
|
window.__liveTimelineRowProbe = probe;
|
|
function sample() {
|
|
if (probe.stop) return;
|
|
const rows = document.querySelectorAll('.virtual-timeline-row').length;
|
|
probe.minRows = Math.min(probe.minRows, rows);
|
|
if (rows === 0) probe.zeroFrames++;
|
|
probe.samples++;
|
|
requestAnimationFrame(sample);
|
|
}
|
|
requestAnimationFrame(sample);
|
|
})()`, true);
|
|
currentSessionTitle = 'Live metadata title';
|
|
setTimeout(() => appendMessage(win, scrollingAppendIndex), 250);
|
|
const scrollProbe = await win.webContents.executeJavaScript(`new Promise(resolve => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const totalBeforeGesture = Number(document.querySelector('.flap-number')?.getAttribute('aria-label'));
|
|
const originalScrollTo = wrap.scrollTo.bind(wrap);
|
|
let programmaticScrolls = 0;
|
|
const blockAutomaticScrollEnd = event => event.stopImmediatePropagation();
|
|
wrap.addEventListener('scrollend', blockAutomaticScrollEnd, true);
|
|
wrap.scrollTo = (...args) => {
|
|
programmaticScrolls++;
|
|
return originalScrollTo(...args);
|
|
};
|
|
const gaps = [];
|
|
const startedAt = performance.now();
|
|
let previous = startedAt;
|
|
wrap.dispatchEvent(new WheelEvent('wheel', { deltaY: 70, bubbles: true }));
|
|
function frame(now) {
|
|
gaps.push(now - previous);
|
|
previous = now;
|
|
if (now - startedAt >= 400) wrap.scrollTop += 70;
|
|
if (now - startedAt < 1200) requestAnimationFrame(frame);
|
|
else {
|
|
const wrapRect = wrap.getBoundingClientRect();
|
|
const anchorRow = [...document.querySelectorAll('.virtual-timeline-row')]
|
|
.find(row => {
|
|
const rect = row.getBoundingClientRect();
|
|
return rect.bottom > wrapRect.top && rect.top < wrapRect.bottom;
|
|
});
|
|
const anchorElement = anchorRow?.querySelector('[data-uuid]');
|
|
const totalBeforeScrollEnd = Number(document.querySelector('.flap-number')?.getAttribute('aria-label'));
|
|
const flapBeforeScrollEnd = Boolean(document.querySelector('.flap-slot.flipping'));
|
|
wrap.scrollTo = originalScrollTo;
|
|
wrap.removeEventListener('scrollend', blockAutomaticScrollEnd, true);
|
|
wrap.dispatchEvent(new Event('scrollend'));
|
|
resolve({
|
|
totalBeforeGesture,
|
|
totalBeforeScrollEnd,
|
|
flapBeforeScrollEnd,
|
|
programmaticScrolls,
|
|
maxFrameGap: Math.max(...gaps),
|
|
frames: gaps.length,
|
|
rows: document.querySelectorAll('.virtual-timeline-row').length,
|
|
distanceFromTail: wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop,
|
|
anchor: anchorElement && {
|
|
uuid: anchorElement.getAttribute('data-uuid'),
|
|
offset: anchorRow.getBoundingClientRect().top - wrapRect.top,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
requestAnimationFrame(frame);
|
|
})`, true);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-number')?.getAttribute('aria-label') === '${messageCount + stationaryAppendRuns + 1}'`,
|
|
'reader-position live update',
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-slot.flipping')`,
|
|
'post-scrollend flap animation',
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.title.includes('Live metadata title') && document.querySelector('.breadcrumb')?.textContent.includes('Live metadata title')`,
|
|
'shared route metadata update',
|
|
);
|
|
const sharedMetadataState = await win.webContents.executeJavaScript(`(() => ({
|
|
windowTitle: document.title.includes('Live metadata title'),
|
|
breadcrumb: document.querySelector('.breadcrumb')?.textContent.includes('Live metadata title'),
|
|
}))()`, true);
|
|
assert(
|
|
sharedMetadataState.windowTitle && sharedMetadataState.breadcrumb,
|
|
'session title patch updates the breadcrumb and window title without a catalogue reload',
|
|
);
|
|
const liveTimelineContinuity = await win.webContents.executeJavaScript(`(() => {
|
|
const probe = window.__liveTimelineRowProbe;
|
|
probe.stop = true;
|
|
delete window.__liveTimelineRowProbe;
|
|
return { minRows: probe.minRows, zeroFrames: probe.zeroFrames, samples: probe.samples };
|
|
})()`, true);
|
|
const readerState = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
const anchorElement = document.querySelector(
|
|
${JSON.stringify(`[data-uuid="${scrollProbe.anchor?.uuid}"]`)},
|
|
);
|
|
const anchorRow = anchorElement?.closest('.virtual-timeline-row');
|
|
return {
|
|
current: Number(document.querySelector('.msg-nav-current')?.textContent),
|
|
anchor: anchorElement && {
|
|
uuid: anchorElement.getAttribute('data-uuid'),
|
|
offset: anchorRow.getBoundingClientRect().top - wrap.getBoundingClientRect().top,
|
|
},
|
|
};
|
|
})()`, true);
|
|
assert(scrollProbe.rows < 80, `live scrolling keeps mounted rows bounded (${scrollProbe.rows})`);
|
|
assert(
|
|
liveTimelineContinuity.minRows > 0 && liveTimelineContinuity.zeroFrames === 0,
|
|
`live update never clears the mounted timeline (${JSON.stringify(liveTimelineContinuity)})`,
|
|
);
|
|
assert(
|
|
scrollProbe.totalBeforeScrollEnd === scrollProbe.totalBeforeGesture,
|
|
`wheel-to-scrollend freezes the visible timeline (${scrollProbe.totalBeforeGesture} -> ${scrollProbe.totalBeforeScrollEnd})`,
|
|
);
|
|
assert(
|
|
scrollProbe.programmaticScrolls === 0,
|
|
`wheel-to-scrollend performs zero programmatic scrollTo calls (got ${scrollProbe.programmaticScrolls})`,
|
|
);
|
|
assert(!scrollProbe.flapBeforeScrollEnd, 'wheel-to-scrollend does not start the flap animation');
|
|
assert(scrollProbe.anchor, 'reader anchor is captured before the deferred live commit');
|
|
assert(
|
|
scrollProbe.distanceFromTail > 1000
|
|
&& readerState.current < messageCount + stationaryAppendRuns + 1
|
|
&& readerState.anchor?.uuid === scrollProbe.anchor?.uuid
|
|
&& Math.abs(readerState.anchor.offset - scrollProbe.anchor.offset) < 2,
|
|
`live append preserves reader anchor ${scrollProbe.anchor?.uuid} (${scrollProbe.anchor?.offset}px -> ${readerState.anchor?.offset}px)`,
|
|
);
|
|
assert(scrollProbe.maxFrameGap < 250, `live scroll has no catastrophic long frame (${scrollProbe.maxFrameGap.toFixed(1)}ms)`);
|
|
|
|
const updatedReaderText = `Updated ${scrollProbe.anchor.uuid} ${'content identity '.repeat(20)}`;
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const original = window.marked.parse;
|
|
const targetUuid = ${JSON.stringify(scrollProbe.anchor.uuid)};
|
|
const targetText = ${JSON.stringify(updatedReaderText)};
|
|
const unchangedPrefixes = [...document.querySelectorAll('.virtual-timeline-row [data-uuid]')]
|
|
.map(element => element.getAttribute('data-uuid'))
|
|
.filter(uuid => uuid !== targetUuid && /^message-\d+$/.test(uuid))
|
|
.map(uuid => 'Message ' + uuid.slice('message-'.length) + ' ');
|
|
let targetCalls = 0;
|
|
let unchangedCalls = 0;
|
|
window.marked.parse = function timelineContentIdentityProbe(value, ...args) {
|
|
const text = String(value || '');
|
|
if (text === targetText) targetCalls++;
|
|
if (unchangedPrefixes.some(prefix => text.startsWith(prefix))) unchangedCalls++;
|
|
return original.call(this, value, ...args);
|
|
};
|
|
window.__timelineContentIdentityProbe = {
|
|
calls: () => ({ target: targetCalls, unchanged: unchangedCalls }),
|
|
restore: () => { window.marked.parse = original; },
|
|
};
|
|
})()`, true);
|
|
replaceMessageText(win, scrollProbe.anchor.uuid, updatedReaderText);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('[data-uuid=${JSON.stringify(scrollProbe.anchor.uuid)}]')?.textContent.includes(${JSON.stringify(updatedReaderText.slice(0, 40))})`,
|
|
'visible message content update',
|
|
);
|
|
const contentIdentityCalls = await win.webContents.executeJavaScript(`(() => {
|
|
const calls = window.__timelineContentIdentityProbe.calls();
|
|
window.__timelineContentIdentityProbe.restore();
|
|
delete window.__timelineContentIdentityProbe;
|
|
return calls;
|
|
})()`, true);
|
|
assert(contentIdentityCalls.target === 1, `updated mounted row recomputes its Markdown once (got ${contentIdentityCalls.target})`);
|
|
assert(contentIdentityCalls.unchanged === 0, `updated mounted row leaves other mounted Markdown cached (got ${contentIdentityCalls.unchanged})`);
|
|
assert(
|
|
ipcReads.messages === 1
|
|
&& ipcReads.toolCalls === 1
|
|
&& ipcReads.toolResults === 1
|
|
&& ipcReads.subagents === 1
|
|
&& ipcReads.workflows === 1
|
|
&& ipcReads.summaries === 1
|
|
&& ipcReads.patches === 7
|
|
&& ipcReads.patchMessageRows.every(count => count === 1),
|
|
`live updates use seven single-message patches after one full snapshot (${JSON.stringify(ipcReads)})`,
|
|
);
|
|
|
|
await win.webContents.executeJavaScript(`document.querySelector('button[title="Last"]')?.click()`, true);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.msg-nav-current')?.textContent === '${messageCount + stationaryAppendRuns + 1}'`,
|
|
'last-item navigation',
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`(() => { const wrap = document.querySelector('.detail-wrap'); return wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop < 2; })()`,
|
|
'last-item scroll settlement',
|
|
);
|
|
|
|
await win.webContents.executeJavaScript(`new Promise(resolve => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
wrap.scrollTop = Math.max(0, wrap.scrollHeight - wrap.clientHeight - 20);
|
|
requestAnimationFrame(() => requestAnimationFrame(resolve));
|
|
})`, true);
|
|
await delay(200);
|
|
await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
wrap.dispatchEvent(new WheelEvent('wheel', { deltaY: -24, bubbles: true }));
|
|
})()`, true);
|
|
await delay(200);
|
|
appendMessage(win, nearTailEscapeAppendIndex);
|
|
await delay(150);
|
|
const nearTailPending = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
return {
|
|
total: Number(document.querySelector('.flap-number')?.getAttribute('aria-label')),
|
|
distanceFromTail: wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop,
|
|
};
|
|
})()`, true);
|
|
assert(
|
|
nearTailPending.total === messageCount + stationaryAppendRuns + 1,
|
|
'near-tail upward intent keeps the append pending until scrollend',
|
|
);
|
|
await win.webContents.executeJavaScript(
|
|
`document.querySelector('.detail-wrap')?.dispatchEvent(new Event('scrollend'))`,
|
|
true,
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-number')?.getAttribute('aria-label') === '${messageCount + stationaryAppendRuns + 2}'`,
|
|
'near-tail upward append settlement',
|
|
);
|
|
await delay(500);
|
|
const nearTailSettled = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
return {
|
|
current: Number(document.querySelector('.msg-nav-current')?.textContent),
|
|
total: Number(document.querySelector('.flap-number')?.getAttribute('aria-label')),
|
|
distanceFromTail: wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop,
|
|
};
|
|
})()`, true);
|
|
assert(
|
|
nearTailSettled.current < nearTailSettled.total && nearTailSettled.distanceFromTail > 20,
|
|
`near-tail upward intent is not pulled back to the tail (${JSON.stringify(nearTailSettled)})`,
|
|
);
|
|
|
|
await win.webContents.executeJavaScript(`document.querySelector('button[title="Last"]')?.click()`, true);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.msg-nav-current')?.textContent === '${messageCount + stationaryAppendRuns + 2}'`,
|
|
'last-item navigation after upward escape',
|
|
);
|
|
await waitFor(
|
|
win.webContents,
|
|
`(() => { const wrap = document.querySelector('.detail-wrap'); return wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop < 2; })()`,
|
|
'tail re-entry settlement',
|
|
);
|
|
appendMessage(win, tailAppendIndex);
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-number')?.getAttribute('aria-label') === '${messageCount + stationaryAppendRuns + 3}'`,
|
|
'tail-follow total update',
|
|
);
|
|
await delay(1000);
|
|
const tailState = await win.webContents.executeJavaScript(`(() => {
|
|
const wrap = document.querySelector('.detail-wrap');
|
|
return {
|
|
current: Number(document.querySelector('.msg-nav-current')?.textContent),
|
|
total: Number(document.querySelector('.flap-number')?.getAttribute('aria-label')),
|
|
scrollTop: wrap.scrollTop,
|
|
maxScrollTop: wrap.scrollHeight - wrap.clientHeight,
|
|
distanceFromTail: wrap.scrollHeight - wrap.clientHeight - wrap.scrollTop,
|
|
};
|
|
})()`, true);
|
|
assert(
|
|
tailState.current === messageCount + stationaryAppendRuns + 3 && tailState.distanceFromTail < 2,
|
|
`tail follow reaches item ${messageCount + stationaryAppendRuns + 3} (${JSON.stringify(tailState)})`,
|
|
);
|
|
|
|
const reduction = (1 - initial.rows / initial.total) * 100;
|
|
console.log(`PERF: ${initial.total} timeline items -> ${initial.rows} mounted rows (${reduction.toFixed(2)}% fewer roots)`);
|
|
console.log(`PERF: ${scrollProbe.frames} frames, max frame gap ${scrollProbe.maxFrameGap.toFixed(1)}ms during live scroll`);
|
|
win.destroy();
|
|
}
|
|
|
|
app.whenReady()
|
|
.then(run)
|
|
.catch(error => {
|
|
failures++;
|
|
console.error(error.stack || error);
|
|
})
|
|
.finally(() => {
|
|
for (const channel of channels) ipcMain.removeHandler(channel);
|
|
app.exit(failures ? 1 : 0);
|
|
});
|