fix(chat): stable code-block geometry, hydration reveal, deduped file stats
Three first-render polish issues: Code blocks jumped at end-of-stream: streaming defers the per-line line-number markup, so the finished decorate pass inserted the gutter column and shifted every code line right. The gutter's horizontal footprint is now reserved with CSS while the markup is deferred, so the final pass only fills in numbers and colors. File references were verified twice per render and re-verified with the wrong directory: the annotation pass's own DOM writes re-triggered its MutationObserver, and the pass also ran before the effective directory resolved — issuing stat probes under an empty directory and a second time under the real one. The observer now ignores the pass's own mutations and annotation waits for a resolved directory. Content replacing the hydration skeleton popped in: it now plays a one-shot 180ms fade (reduced-motion aware); cached session switches never carry the class and stay instant. Also removed the dead disableStaging prop and its unused pendingRevealWork threading. Verified on a production build over CDP: a streamed code block's text keeps its exact x-position across end-of-stream, and stat probes for a message with file mentions are unique per path with the directory header always present. The hydration fade path could not be exercised in the harness (the live event stream pre-populates parts in a single-project environment) and needs an eyeball check on a cold multi-project open.
This commit is contained in:
@@ -131,6 +131,9 @@ const layoutCodeLines = (pre: HTMLPreElement): void => {
|
||||
const code = pre.querySelector<HTMLElement>(':scope > code');
|
||||
if (!code || code.hasAttribute('data-md-code-lines')) return;
|
||||
|
||||
// The real gutter takes over the reserved footprint.
|
||||
pre.removeAttribute('data-md-gutter-reserved');
|
||||
|
||||
const text = code.textContent ?? '';
|
||||
const hasTrailingNewline = text.endsWith('\n');
|
||||
const lines = hasTrailingNewline ? text.slice(0, -1).split('\n') : text.split('\n');
|
||||
@@ -263,7 +266,15 @@ const decorateCodeBlocks = (root: HTMLElement, ctx: DecorateContext): void => {
|
||||
pre.style.margin = '0';
|
||||
pre.style.background = 'transparent';
|
||||
pre.classList.add('min-w-0', 'w-full', 'flex-1');
|
||||
if (!ctx.deferCodeLineNumberSync) layoutCodeLines(pre);
|
||||
if (!ctx.deferCodeLineNumberSync) {
|
||||
layoutCodeLines(pre);
|
||||
} else {
|
||||
// Streaming defers the per-line gutter markup, but the gutter's
|
||||
// horizontal footprint is reserved immediately — otherwise the
|
||||
// end-of-stream decorate pass shifts every code line right by the
|
||||
// gutter column and the finished message visibly jumps.
|
||||
pre.setAttribute('data-md-gutter-reserved', '');
|
||||
}
|
||||
body.appendChild(pre);
|
||||
wrapper.appendChild(header);
|
||||
wrapper.appendChild(body);
|
||||
|
||||
Reference in New Issue
Block a user