('pre[data-code]');
+ els.forEach((el) => {
+ if (el.dataset.highlighted === 'true') return;
+ const code = decodeURIComponent(el.dataset.code || '');
+ const lang = el.dataset.highlight || undefined;
+ el.dataset.highlighted = 'true';
+ queueHighlight(el, code, lang);
+ });
+}
+
+function processHighlightBatch(deadline?: IdleDeadline): void {
+ const batchSize = 5;
+ let processed = 0;
+ while (pendingHighlights.length > 0 && processed < batchSize && (!deadline || deadline.timeRemaining() > 2)) {
+ const item = pendingHighlights.shift()!;
+ getHighlighter().then((h) => {
+ const l = item.lang && h.getLoadedLanguages().includes(item.lang) ? item.lang : undefined;
+ try {
+ const html = h.codeToHtml(item.code, { lang: l || 'text', theme: 'vitesse-dark' });
+ // Extract inner content from shiki's wrapper
+ const match = html.match(/]*>([\s\S]*)<\/code>/);
+ if (match && item.el.isConnected) {
+ item.el.innerHTML = `${match[1]}`;
+ }
+ } catch {}
+ });
+ processed++;
+ }
+ if (pendingHighlights.length > 0) {
+ requestIdleCallback(processHighlightBatch, { timeout: 100 });
+ } else {
+ highlightBatchScheduled = false;
+ }
+}
+
function guessLang(filePath: string): string | undefined {
const ext = filePath.split('.').pop()?.toLowerCase();
const map: Record = {
@@ -235,7 +281,8 @@ function renderToolResultBody(name: string, content: string, metadata: string |
case 'bash': {
const output = (meta?.output as string) || content;
if (!output || output === 'no output') return 'no output
';
- return `${highlightCode(output.slice(0, 3000), 'bash')}
`;
+ const code = output.slice(0, 3000);
+ return `${escapeHTML(code)}
`;
}
case 'edit':
case 'multiedit': {
@@ -246,20 +293,24 @@ function renderToolResultBody(name: string, content: string, metadata: string |
if (oldContent && newContent) {
return `${renderColoredDiff(oldContent, newContent, lang)}
`;
}
- if (content) return `${highlightCode(content.slice(0, 1500), lang)}
`;
+ if (content) {
+ const code = content.slice(0, 1500);
+ return `${escapeHTML(code)}
`;
+ }
return '';
}
case 'write': {
- // Try to get file path from the matching tool_call to guess language
if (content && content !== 'File successfully written.') {
- return `${highlightCode(content.slice(0, 2000))}
`;
+ const code = content.slice(0, 2000);
+ return `${escapeHTML(code)}
`;
}
return '';
}
case 'view': {
const viewContent = (meta?.content as string) || content;
if (viewContent) {
- return `${highlightCode(viewContent.slice(0, 3000))}
`;
+ const code = viewContent.slice(0, 3000);
+ return `${escapeHTML(code)}
`;
}
return '';
}
@@ -281,7 +332,7 @@ function renderToolResultBody(name: string, content: string, metadata: string |
if (!content) return '';
const maxLen = 2000;
const truncated = content.length > maxLen ? content.slice(0, maxLen) + '\n…' : content;
- return `${highlightCode(truncated)}
`;
+ return `${escapeHTML(truncated)}
`;
}
}
}
@@ -290,80 +341,70 @@ function renderColoredDiff(oldStr: string, newStr: string, lang?: string): strin
const oldLines = oldStr.split('\n');
const newLines = newStr.split('\n');
- const hlOld = oldLines.map(l => highlightCode(l, lang));
- const hlNew = newLines.map(l => highlightCode(l, lang));
-
+ // Render plain text diff first — highlighting deferred via data attrs
const lcs = computeLCS(oldLines, newLines);
- const raw: Array<{ type: 'ctx' | 'add' | 'del'; html: string }> = [];
+ const result: string[] = [];
let oi = 0, ni = 0, li = 0;
while (oi < oldLines.length || ni < newLines.length) {
if (li < lcs.length && oi < oldLines.length && oldLines[oi] === lcs[li] && ni < newLines.length && newLines[ni] === lcs[li]) {
- raw.push({ type: 'ctx', html: ` ${hlOld[oi]}` });
+ result.push(` ${escapeHTML(lcs[li])}`);
oi++; ni++; li++;
} else if (li < lcs.length && ni < newLines.length && newLines[ni] === lcs[li]) {
- raw.push({ type: 'del', html: `- ${hlOld[oi]}` });
+ result.push(`- ${escapeHTML(oldLines[oi])}`);
oi++;
} else if (li < lcs.length && oi < oldLines.length && oldLines[oi] === lcs[li]) {
- raw.push({ type: 'add', html: `+ ${hlNew[ni]}` });
+ result.push(`+ ${escapeHTML(newLines[ni])}`);
ni++;
} else {
if (oi < oldLines.length && (ni >= newLines.length || li >= lcs.length)) {
- raw.push({ type: 'del', html: `- ${hlOld[oi]}` });
+ result.push(`- ${escapeHTML(oldLines[oi])}`);
oi++;
} else if (ni < newLines.length) {
- raw.push({ type: 'add', html: `+ ${hlNew[ni]}` });
+ result.push(`+ ${escapeHTML(newLines[ni])}`);
ni++;
}
}
}
- // Collapse consecutive context lines, keeping 3 lines of context around changes
+ // Collapse context
const CONTEXT = 3;
- const result: string[] = [];
+ const raw = result.map(html => {
+ if (html.includes('diff-ctx')) return { type: 'ctx' as const, html };
+ if (html.includes('diff-add')) return { type: 'add' as const, html };
+ return { type: 'del' as const, html };
+ });
+
+ const collapsed: string[] = [];
let i = 0;
while (i < raw.length) {
if (raw[i].type === 'ctx') {
- // Find the extent of this context run
let end = i;
while (end < raw.length && raw[end].type === 'ctx') end++;
const ctxLen = end - i;
-
- // Is there a change after this context block?
const hasChangeAfter = end < raw.length;
- // Was there a change before this context block?
const hasChangeBefore = i > 0;
if (!hasChangeAfter && !hasChangeBefore) {
- // Entire diff is context — show all
- for (let j = i; j < end; j++) result.push(raw[j].html);
+ for (let j = i; j < end; j++) collapsed.push(raw[j].html);
} else if (ctxLen <= CONTEXT * 2 + 1) {
- // Small enough to show entirely
- for (let j = i; j < end; j++) result.push(raw[j].html);
+ for (let j = i; j < end; j++) collapsed.push(raw[j].html);
} else {
- // Show head + fold + tail
const headEnd = hasChangeBefore ? i + CONTEXT : i;
const tailStart = hasChangeAfter ? end - CONTEXT : end;
-
- if (hasChangeBefore) {
- for (let j = i; j < headEnd; j++) result.push(raw[j].html);
- }
+ if (hasChangeBefore) for (let j = i; j < headEnd; j++) collapsed.push(raw[j].html);
const hidden = tailStart - headEnd;
- if (hidden > 0) {
- result.push(`${hidden} unchanged lines`);
- }
- if (hasChangeAfter) {
- for (let j = tailStart; j < end; j++) result.push(raw[j].html);
- }
+ if (hidden > 0) collapsed.push(`${hidden} unchanged lines`);
+ if (hasChangeAfter) for (let j = tailStart; j < end; j++) collapsed.push(raw[j].html);
}
i = end;
} else {
- result.push(raw[i].html);
+ collapsed.push(raw[i].html);
i++;
}
}
- return `${result.join('\n')}
`;
+ return `${collapsed.join('\n')}
`;
}
function computeLCS(a: string[], b: string[]): string[] {
diff --git a/pwa/src/styles.css b/pwa/src/styles.css
index e438ff9..37f4345 100644
--- a/pwa/src/styles.css
+++ b/pwa/src/styles.css
@@ -111,6 +111,12 @@ html, body {
.msg.user { border-left: 2px solid var(--accent); padding-left: 0.75rem; margin-top: 0.5rem; }
.msg .role { font-size: 0.65rem; color: var(--fg-faint); margin-bottom: 0.1rem; text-transform: uppercase; letter-spacing: 0.06em; }
+.load-more-sentinel {
+ text-align: center; padding: 0.5rem; font-size: 0.72rem;
+ color: var(--fg-most); cursor: pointer;
+}
+.load-more-sentinel:hover { color: var(--fg-dim); }
+
.msg code {
background: var(--surface); padding: 0.1em 0.3em; border-radius: 2px;
font-size: 0.85em;
@@ -160,33 +166,9 @@ html, body {
.diff-ctx { color: var(--fg-dim); }
.diff-fold { color: var(--fg-most); font-style: italic; display: block; padding: 0.15rem 0; }
-/* highlight.js dark theme overrides */
-.hljs { background: transparent; color: var(--fg); }
-.hljs-keyword { color: #FF60FF; }
-.hljs-string { color: #BF976F; }
-.hljs-number { color: #68FFD6; }
-.hljs-comment { color: var(--fg-most); font-style: italic; }
-.hljs-function { color: #6B50FF; }
-.hljs-title { color: #8B75FF; }
-.hljs-built_in { color: #FF79D0; }
-.hljs-attr { color: #D46EFF; }
-.hljs-tag { color: #D46EFF; }
-.hljs-name { color: #D46EFF; }
-.hljs-type { color: #7272FF; }
-.hljs-variable { color: #ECEBF0; }
-.hljs-literal { color: #68FFD6; }
-.hljs-operator { color: #FF7F90; }
-.hljs-punctuation { color: var(--fg-dim); }
-.hljs-property { color: #8B75FF; }
-.hljs-regexp { color: #FF7F90; }
-.hljs-symbol { color: #E8FF27; }
-.hljs-meta { color: var(--fg-most); }
-.hljs-section { color: #FF60FF; font-weight: bold; }
-.hljs-selector-class { color: #D46EFF; }
-.hljs-selector-id { color: #6B50FF; }
-.hljs-doctag { color: var(--fg-most); }
-.hljs-template-tag { color: #E8FF27; }
-.hljs-template-variable { color: #68FFD6; }
+/* Shiki overrides — make it blend with our theme */
+.shiki { background: transparent !important; padding: 0 !important; margin: 0 !important; }
+.shiki code { font-family: var(--mono); }
/* Todos */
.todo-list { padding: 0.3rem 0.5rem; }