tommy0103
82d9fbf657
Track real user scrolling through scrollend with a quiet watchdog, defer timeline commits and virtualizer corrections until settlement, and make SessionDetail the sole tail-follow owner. Add unit and Electron regressions for scroll writes, reader anchoring, near-tail escape, explicit navigation, and flap timing.
741 lines
32 KiB
JavaScript
741 lines
32 KiB
JavaScript
// Production renderer integration test for the dynamic SessionDetail timeline.
|
|
// Run: npm run test:electron:timeline
|
|
import { app, BrowserWindow, ipcMain } 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;
|
|
const ipcReads = {
|
|
messages: 0,
|
|
toolCalls: 0,
|
|
toolResults: 0,
|
|
subagents: 0,
|
|
workflows: 0,
|
|
summaries: 0,
|
|
patches: 0,
|
|
patchMessageRows: [],
|
|
};
|
|
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;';
|
|
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: 'Virtualized timeline integration',
|
|
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 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) {
|
|
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',
|
|
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 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),
|
|
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 () => {
|
|
if (firstSessionListRead) {
|
|
firstSessionListRead = false;
|
|
await delay(120);
|
|
}
|
|
return [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', (_event, _sessionId, cursor) => {
|
|
ipcReads.patches++;
|
|
const patch = createSessionPatch({
|
|
messages: assembleSessionMessages({ messages, toolCalls, toolResults, subagents: [], workflows: [] }),
|
|
workflows: [],
|
|
}, cursor);
|
|
ipcReads.patchMessageRows.push(patch.changes.messages.length);
|
|
return patch;
|
|
});
|
|
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', () => []);
|
|
ipcMain.handle('db:getProjects', () => [{ project: 'quiet-zero', count: 1 }]);
|
|
ipcMain.handle('db:getStats', () => ({}));
|
|
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 });
|
|
}
|
|
|
|
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/${sessionId}`,
|
|
});
|
|
await waitFor(
|
|
win.webContents,
|
|
`document.querySelector('.flap-number')?.getAttribute('aria-label') === '${messageCount}'`,
|
|
'the cold-start session snapshot',
|
|
);
|
|
|
|
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');
|
|
|
|
await win.webContents.executeJavaScript(`window.location.hash = '#/sessions'`, true);
|
|
await waitFor(win.webContents, `!document.querySelector('.virtual-timeline')`, 'session detail deactivation');
|
|
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 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)`);
|
|
}
|
|
|
|
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',
|
|
);
|
|
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 < 60, `live scrolling keeps mounted rows bounded (${scrollProbe.rows})`);
|
|
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 === 6
|
|
&& ipcReads.patchMessageRows.every(count => count === 1),
|
|
`live updates use six 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);
|
|
});
|