@rezi-ui/core 0.1.0-alpha.7 → 0.1.0-alpha.71

package/dist/renderer/renderToDrawlist/widgets/editors.js

@@ -1,22 +1,106 @@
 import { measureTextCells } from "../../../layout/textMeasure.js";
+import { tokenizeCodeEditorLineWithCustom } from "../../../widgets/codeEditorSyntax.js";
 import { formatCost, formatDuration, formatTimestamp, formatTokenCount, } from "../../../widgets/logsConsole.js";
+import { SCROLLBAR_CONFIGS, renderVerticalScrollbar } from "../../scrollbar.js";
+import { asTextStyle } from "../../styles.js";
+import { renderBoxBorder } from "../boxBorder.js";
 import { isVisibleRect } from "../indices.js";
 import { clampNonNegative } from "../spacing.js";
 import { mergeTextStyle } from "../textStyle.js";
+import { getColorTokens, resolveWidgetFocusStyle } from "../themeTokens.js";
+import { focusIndicatorEnabled, readFocusConfig, resolveFocusIndicatorStyle, resolveFocusedContentStyle, } from "./focusConfig.js";
 const EMPTY_STRING_ARRAY = Object.freeze([]);
+function rectIntersects(a, b) {
+    if (a.w <= 0 || a.h <= 0 || b.w <= 0 || b.h <= 0)
+        return false;
+    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
 function logLevelToThemeColor(theme, level) {
     switch (level) {
+        case "debug":
+            return theme.colors["widget.logs.debug"] ?? theme.colors.info;
         case "warn":
-            return theme.colors.warning;
+            return theme.colors["widget.logs.warn"] ?? theme.colors.warning;
         case "error":
-            return theme.colors.danger;
+            return theme.colors["widget.logs.error"] ?? theme.colors.danger;
         case "info":
-            return theme.colors.fg;
+            return theme.colors["widget.logs.info"] ?? theme.colors.fg;
         default:
-            return theme.colors.muted;
+            return theme.colors["widget.logs.trace"] ?? theme.colors.muted;
+    }
+}
+function resolveSyntaxThemeColor(theme, key, fallback) {
+    return theme.colors[key] ?? fallback;
+}
+function resolveDiffThemeColor(theme, key, fallback) {
+    return theme.colors[key] ?? fallback;
+}
+function createCodeEditorSyntaxStyleMap(parentStyle, theme) {
+    return Object.freeze({
+        plain: parentStyle,
+        keyword: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.keyword", theme.colors.info),
+            bold: true,
+        }),
+        type: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.type", theme.colors.warning),
+            bold: true,
+        }),
+        string: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.string", theme.colors.success),
+        }),
+        number: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.number", theme.colors.warning),
+        }),
+        comment: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.comment", theme.colors.muted),
+            italic: true,
+        }),
+        operator: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.operator", theme.colors.primary),
+        }),
+        punctuation: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.punctuation", theme.colors.fg),
+        }),
+        function: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.function", theme.colors.primary),
+            bold: true,
+        }),
+        variable: mergeTextStyle(parentStyle, {
+            fg: resolveSyntaxThemeColor(theme, "widget.syntax.variable", theme.colors.secondary),
+            bold: true,
+        }),
+    });
+}
+function drawCodeEditorSyntaxLine(builder, x, y, width, scrollLeft, line, styles, language, lineNumber, customTokenizer) {
+    if (width <= 0)
+        return;
+    const viewStart = Math.max(0, scrollLeft);
+    const viewEnd = viewStart + width;
+    const tokens = tokenizeCodeEditorLineWithCustom(line, Object.freeze({ language, lineNumber }), customTokenizer);
+    let sourceOffset = 0;
+    let drawX = x;
+    for (const token of tokens) {
+        const tokenStart = sourceOffset;
+        const tokenText = token.text;
+        const tokenEnd = tokenStart + tokenText.length;
+        sourceOffset = tokenEnd;
+        if (tokenEnd <= viewStart || tokenStart >= viewEnd)
+            continue;
+        const sliceStart = Math.max(0, viewStart - tokenStart);
+        const sliceEnd = Math.min(tokenText.length, viewEnd - tokenStart);
+        if (sliceEnd <= sliceStart)
+            continue;
+        const fragment = tokenText.slice(sliceStart, sliceEnd);
+        if (fragment.length === 0)
+            continue;
+        builder.drawText(drawX, y, fragment, styles[token.kind] ?? styles.plain);
+        drawX += measureTextCells(fragment);
+        if (drawX >= x + width)
+            return;
     }
 }
-export function renderEditorWidget(builder, focusState, rect, theme, parentStyle, node, nodeStack, styleStack, cursorInfo, diffViewerFocusedHunkById, diffViewerExpandedHunksById, logsConsoleRenderCacheById, diffRenderCacheById, codeEditorRenderCacheById) {
+export function renderEditorWidget(builder, focusState, rect, theme, parentStyle, node, nodeStack, styleStack, damageRect, cursorInfo, diffViewerFocusedHunkById, diffViewerExpandedHunksById, logsConsoleRenderCacheById, diffRenderCacheById, codeEditorRenderCacheById) {
     const vnode = node.vnode;
     let resolvedCursor = null;
     switch (vnode.kind) {
@@ -24,6 +108,9 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
             if (!isVisibleRect(rect))
                 break;
             const props = vnode.props;
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const showFocusIndicator = focusIndicatorEnabled(focusConfig);
+            const colorTokens = getColorTokens(theme);
             const { lines, scrollTop, scrollLeft, cursor } = props;
             const lineNumbers = props.lineNumbers !== false;
             const editorCache = codeEditorRenderCacheById?.get(props.id);
@@ -31,9 +118,16 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
             const lineNums = editorCache?.lineNums;
             const textX = rect.x + lineNumWidth;
             const textW = clampNonNegative(rect.w - lineNumWidth);
+            const syntaxLanguage = props.syntaxLanguage ?? "plain";
+            const syntaxStyles = createCodeEditorSyntaxStyleMap(parentStyle, theme);
+            const customTokenizer = typeof props.tokenizeLine === "function" ? props.tokenizeLine : null;
             const selection = props.selection;
             const selectionBg = theme.colors.secondary;
             const lineNumberStyle = mergeTextStyle(parentStyle, { fg: theme.colors.muted });
+            const diagnostics = Array.isArray(props.diagnostics)
+                ? props
+                    .diagnostics
+                : [];
             const normalizedSelection = (() => {
                 if (!selection)
                     return null;
@@ -71,12 +165,49 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
                             builder.fillRect(textX + visStart, y, w, 1, { bg: selectionBg });
                     }
                 }
-                // Line content
-                const displayLine = line.slice(scrollLeft, scrollLeft + textW);
-                builder.drawText(textX, y, displayLine, parentStyle);
+                // Line content (syntax-highlighted).
+                drawCodeEditorSyntaxLine(builder, textX, y, textW, scrollLeft, line, syntaxStyles, syntaxLanguage, i, customTokenizer);
+                // Diagnostics underlines (curly + semantic color)
+                if (diagnostics.length > 0 && textW > 0) {
+                    for (const diagnostic of diagnostics) {
+                        const lineIndex = typeof diagnostic.line === "number" && Number.isFinite(diagnostic.line)
+                            ? Math.trunc(diagnostic.line)
+                            : -1;
+                        if (lineIndex !== i)
+                            continue;
+                        const startRaw = typeof diagnostic.startColumn === "number" && Number.isFinite(diagnostic.startColumn)
+                            ? Math.trunc(diagnostic.startColumn)
+                            : 0;
+                        const endRaw = typeof diagnostic.endColumn === "number" && Number.isFinite(diagnostic.endColumn)
+                            ? Math.trunc(diagnostic.endColumn)
+                            : startRaw + 1;
+                        const startCol = Math.max(0, Math.min(line.length, startRaw));
+                        const endCol = Math.max(startCol + 1, Math.min(line.length, endRaw));
+                        const visStart = Math.max(0, startCol - scrollLeft);
+                        const visEnd = Math.max(visStart, Math.min(textW, endCol - scrollLeft));
+                        if (visEnd <= visStart)
+                            continue;
+                        const segment = line.slice(scrollLeft + visStart, scrollLeft + visEnd);
+                        if (segment.length === 0)
+                            continue;
+                        const severity = diagnostic.severity;
+                        const underlineColor = severity === "warning"
+                            ? (theme.colors["diagnostic.warning"] ?? theme.colors.warning)
+                            : severity === "info"
+                                ? (theme.colors["diagnostic.info"] ?? theme.colors.info)
+                                : severity === "hint"
+                                    ? (theme.colors["diagnostic.hint"] ?? theme.colors.success)
+                                    : (theme.colors["diagnostic.error"] ?? theme.colors.danger);
+                        builder.drawText(textX + visStart, y, segment, {
+                            underline: true,
+                            underlineStyle: "curly",
+                            underlineColor,
+                        });
+                    }
+                }
             }
             builder.popClip();
-            // v2 cursor: resolve cursor position for focused code editor
+            // Cursor protocol: resolve cursor position for focused code editor
             const focused = focusState.focusedId === props.id;
             if (focused && cursorInfo) {
                 const cy = cursor.line - scrollTop;
@@ -93,22 +224,62 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
                     }
                 }
             }
+            if (focused && showFocusIndicator && props.highlightActiveCursorCell !== false && textW > 0) {
+                const localY = cursor.line - scrollTop;
+                const localX = cursor.column - scrollLeft;
+                if (localY >= 0 && localY < rect.h && localX >= 0 && localX < textW) {
+                    const cursorLine = lines[cursor.line] ?? "";
+                    const cursorGlyph = cursorLine.slice(cursor.column, cursor.column + 1) || " ";
+                    const cursorCellStyle = resolveFocusedContentStyle(mergeTextStyle(parentStyle, {
+                        fg: resolveSyntaxThemeColor(theme, "widget.syntax.cursorFg", theme.colors.bg),
+                        bg: resolveSyntaxThemeColor(theme, "widget.syntax.cursorBg", theme.colors.primary),
+                        bold: true,
+                    }), theme, focusConfig);
+                    builder.pushClip(textX, rect.y, textW, rect.h);
+                    builder.drawText(textX + localX, rect.y + localY, cursorGlyph, cursorCellStyle);
+                    builder.popClip();
+                }
+            }
+            // Vertical scrollbar
+            if (rect.h > 0 && lines.length > rect.h) {
+                const scrollbarVariant = props.scrollbarVariant ?? "minimal";
+                const scrollbarOwnStyle = asTextStyle(props.scrollbarStyle, theme);
+                const scrollbarBaseStyle = mergeTextStyle(parentStyle, { fg: theme.colors.border });
+                const scrollbarStyle = scrollbarOwnStyle
+                    ? mergeTextStyle(scrollbarBaseStyle, scrollbarOwnStyle)
+                    : scrollbarBaseStyle;
+                const maxScrollTop = Math.max(0, lines.length - rect.h);
+                const position = maxScrollTop > 0 ? scrollTop / maxScrollTop : 0;
+                const viewportRatio = lines.length > 0 ? Math.min(1, rect.h / lines.length) : 1;
+                const variantConfig = SCROLLBAR_CONFIGS[scrollbarVariant];
+                const glyphs = renderVerticalScrollbar(rect.h, { position, viewportRatio }, variantConfig);
+                const scrollbarX = rect.x + rect.w - 1;
+                for (let dy = 0; dy < glyphs.length; dy++) {
+                    const glyph = glyphs[dy];
+                    if (!glyph)
+                        continue;
+                    builder.drawText(scrollbarX, rect.y + dy, glyph, scrollbarStyle);
+                }
+            }
             break;
         }
         case "diffViewer": {
             if (!isVisibleRect(rect))
                 break;
             const props = vnode.props;
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const showFocusIndicator = focusIndicatorEnabled(focusConfig);
+            const focusedHunkStyle = asTextStyle(props.focusedHunkStyle, theme);
             const { diff } = props;
             const diffCache = diffRenderCacheById?.get(props.id);
-            const addBg = theme.colors.success;
-            const deleteBg = theme.colors.danger;
-            const addFg = theme.colors.bg;
-            const deleteFg = theme.colors.bg;
-            const hunkHeaderFg = theme.colors.info;
-            const lineNumberFg = theme.colors.muted;
-            const borderFg = theme.colors.border;
-            const collapsedStyle = mergeTextStyle(parentStyle, { fg: theme.colors.muted });
+            const addBg = resolveDiffThemeColor(theme, "widget.diff.addBg", theme.colors.success);
+            const deleteBg = resolveDiffThemeColor(theme, "widget.diff.deleteBg", theme.colors.danger);
+            const addFg = resolveDiffThemeColor(theme, "widget.diff.addFg", theme.colors.bg);
+            const deleteFg = resolveDiffThemeColor(theme, "widget.diff.deleteFg", theme.colors.bg);
+            const hunkHeaderFg = resolveDiffThemeColor(theme, "widget.diff.hunkHeader", theme.colors.info);
+            const lineNumberFg = resolveDiffThemeColor(theme, "widget.diff.lineNumber", theme.colors.muted);
+            const borderFg = resolveDiffThemeColor(theme, "widget.diff.border", theme.colors.border);
+            const collapsedStyle = mergeTextStyle(parentStyle, { fg: lineNumberFg });
             if (diff.isBinary === true) {
                 builder.drawText(rect.x, rect.y, "Binary file differs", mergeTextStyle(parentStyle, { fg: hunkHeaderFg }));
                 break;
@@ -117,6 +288,13 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
             const scrollTop = props.scrollTop;
             const showLineNumbers = props.lineNumbers !== false;
             const focusedHunk = diffViewerFocusedHunkById?.get(props.id) ?? props.focusedHunk ?? 0;
+            const focusedHeaderBaseStyle = mergeTextStyle(parentStyle, { fg: hunkHeaderFg });
+            const focusedHeaderStyle = (() => {
+                let out = resolveFocusedContentStyle(resolveFocusIndicatorStyle(focusedHeaderBaseStyle, theme, focusConfig, mergeTextStyle(focusedHeaderBaseStyle, { inverse: true })), theme, focusConfig);
+                if (focusedHunkStyle)
+                    out = mergeTextStyle(out, focusedHunkStyle);
+                return out;
+            })();
             const internalExpanded = diffViewerExpandedHunksById?.get(props.id);
             const expandedSet = !internalExpanded && props.expandedHunks ? new Set(props.expandedHunks) : null;
             const isExpandedHunk = (hunkIndex) => {
@@ -251,10 +429,8 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
                         const y = rect.y + (lineIndex - scrollTop);
                         const header = diffCache?.headerByHunk[hunkIndex] ??
                             `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.header ? ` ${hunk.header}` : ""}`;
-                        const focused = hunkIndex === focusedHunk;
-                        builder.drawText(rect.x, y, header.slice(0, rect.w), focused
-                            ? mergeTextStyle(parentStyle, { fg: hunkHeaderFg, inverse: true })
-                            : mergeTextStyle(parentStyle, { fg: hunkHeaderFg }));
+                        const focused = showFocusIndicator && hunkIndex === focusedHunk;
+                        builder.drawText(rect.x, y, header.slice(0, rect.w), focused ? focusedHeaderStyle : focusedHeaderBaseStyle);
                         if (dividerX >= rect.x && dividerX < rect.x + rect.w) {
                             builder.drawText(dividerX, y, "│", mergeTextStyle(parentStyle, { fg: borderFg }));
                         }
@@ -331,61 +507,89 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
                         lineIndex++;
                     }
                 }
-                break;
             }
-            // Unified mode (or fallback if too narrow)
-            let lineIndex = 0;
-            for (let hunkIndex = 0; hunkIndex < diff.hunks.length; hunkIndex++) {
-                const hunk = diff.hunks[hunkIndex];
-                if (!hunk)
-                    continue;
-                if (lineIndex >= scrollTop && lineIndex < scrollTop + rect.h) {
-                    const y = rect.y + (lineIndex - scrollTop);
-                    const header = diffCache?.headerByHunk[hunkIndex] ??
-                        `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.header ? ` ${hunk.header}` : ""}`;
-                    const focused = hunkIndex === focusedHunk;
-                    builder.drawText(rect.x, y, header.slice(0, rect.w), focused
-                        ? mergeTextStyle(parentStyle, { fg: hunkHeaderFg, inverse: true })
-                        : mergeTextStyle(parentStyle, { fg: hunkHeaderFg }));
-                }
-                lineIndex++;
-                if (!isExpandedHunk(hunkIndex)) {
+            else {
+                // Unified mode (or fallback if too narrow)
+                let lineIndex = 0;
+                for (let hunkIndex = 0; hunkIndex < diff.hunks.length; hunkIndex++) {
+                    const hunk = diff.hunks[hunkIndex];
+                    if (!hunk)
+                        continue;
                     if (lineIndex >= scrollTop && lineIndex < scrollTop + rect.h) {
                         const y = rect.y + (lineIndex - scrollTop);
-                        const msg = diffCache?.collapsedByHunk[hunkIndex] ?? `… ${String(hunk.lines.length)} lines …`;
-                        builder.drawText(rect.x, y, msg.slice(0, rect.w), collapsedStyle);
+                        const header = diffCache?.headerByHunk[hunkIndex] ??
+                            `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.header ? ` ${hunk.header}` : ""}`;
+                        const focused = showFocusIndicator && hunkIndex === focusedHunk;
+                        builder.drawText(rect.x, y, header.slice(0, rect.w), focused ? focusedHeaderStyle : focusedHeaderBaseStyle);
                     }
                     lineIndex++;
-                    continue;
-                }
-                let oldLine = hunk.oldStart;
-                let newLine = hunk.newStart;
-                for (const line of hunk.lines) {
-                    if (!line)
+                    if (!isExpandedHunk(hunkIndex)) {
+                        if (lineIndex >= scrollTop && lineIndex < scrollTop + rect.h) {
+                            const y = rect.y + (lineIndex - scrollTop);
+                            const msg = diffCache?.collapsedByHunk[hunkIndex] ?? `… ${String(hunk.lines.length)} lines …`;
+                            builder.drawText(rect.x, y, msg.slice(0, rect.w), collapsedStyle);
+                        }
+                        lineIndex++;
                         continue;
-                    if (lineIndex >= scrollTop && lineIndex < scrollTop + rect.h) {
-                        const y = rect.y + (lineIndex - scrollTop);
+                    }
+                    let oldLine = hunk.oldStart;
+                    let newLine = hunk.newStart;
+                    for (const line of hunk.lines) {
+                        if (!line)
+                            continue;
+                        if (lineIndex >= scrollTop && lineIndex < scrollTop + rect.h) {
+                            const y = rect.y + (lineIndex - scrollTop);
+                            if (line.type === "context") {
+                                drawUnifiedLine(y, oldLine, newLine, "context", line.content, line.highlights);
+                            }
+                            else if (line.type === "delete") {
+                                drawUnifiedLine(y, oldLine, null, "delete", line.content, line.highlights);
+                            }
+                            else {
+                                drawUnifiedLine(y, null, newLine, "add", line.content, line.highlights);
+                            }
+                        }
                         if (line.type === "context") {
-                            drawUnifiedLine(y, oldLine, newLine, "context", line.content, line.highlights);
+                            oldLine++;
+                            newLine++;
                         }
                         else if (line.type === "delete") {
-                            drawUnifiedLine(y, oldLine, null, "delete", line.content, line.highlights);
+                            oldLine++;
                         }
                         else {
-                            drawUnifiedLine(y, null, newLine, "add", line.content, line.highlights);
+                            newLine++;
                         }
+                        lineIndex++;
                     }
-                    if (line.type === "context") {
-                        oldLine++;
-                        newLine++;
-                    }
-                    else if (line.type === "delete") {
-                        oldLine++;
-                    }
-                    else {
-                        newLine++;
+                }
+            }
+            // Vertical scrollbar
+            {
+                let totalLines = 0;
+                for (const h of diff.hunks) {
+                    if (!h)
+                        continue;
+                    totalLines += 1 + h.lines.length;
+                }
+                if (rect.h > 0 && totalLines > rect.h) {
+                    const scrollbarVariant = props.scrollbarVariant ?? "minimal";
+                    const scrollbarOwnStyle = asTextStyle(props.scrollbarStyle, theme);
+                    const scrollbarBaseStyle = mergeTextStyle(parentStyle, { fg: theme.colors.border });
+                    const scrollbarStyle = scrollbarOwnStyle
+                        ? mergeTextStyle(scrollbarBaseStyle, scrollbarOwnStyle)
+                        : scrollbarBaseStyle;
+                    const maxScroll = Math.max(0, totalLines - rect.h);
+                    const position = maxScroll > 0 ? scrollTop / maxScroll : 0;
+                    const viewportRatio = totalLines > 0 ? Math.min(1, rect.h / totalLines) : 1;
+                    const variantConfig = SCROLLBAR_CONFIGS[scrollbarVariant];
+                    const glyphs = renderVerticalScrollbar(rect.h, { position, viewportRatio }, variantConfig);
+                    const scrollbarX = rect.x + rect.w - 1;
+                    for (let dy = 0; dy < glyphs.length; dy++) {
+                        const glyph = glyphs[dy];
+                        if (!glyph)
+                            continue;
+                        builder.drawText(scrollbarX, rect.y + dy, glyph, scrollbarStyle);
                     }
-                    lineIndex++;
                 }
             }
             break;
@@ -394,8 +598,31 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
             if (!isVisibleRect(rect))
                 break;
             const props = vnode.props;
-            const timestampStyle = mergeTextStyle(parentStyle, { fg: theme.colors.muted });
-            const sourceStyle = mergeTextStyle(parentStyle, { fg: theme.colors.info });
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const focusedStyleOverride = asTextStyle(props.focusedStyle, theme);
+            const colorTokens = getColorTokens(theme);
+            const widgetFocused = focusState.focusedId === props.id;
+            const showFocusRing = widgetFocused && focusIndicatorEnabled(focusConfig);
+            const contentRect = showFocusRing
+                ? {
+                    x: rect.x + 1,
+                    y: rect.y + 1,
+                    w: clampNonNegative(rect.w - 2),
+                    h: clampNonNegative(rect.h - 2),
+                }
+                : rect;
+            if (showFocusRing) {
+                let ringStyle = resolveFocusIndicatorStyle(parentStyle, theme, focusConfig, mergeTextStyle(parentStyle, resolveWidgetFocusStyle(colorTokens, true, false, theme.focusIndicator)));
+                if (focusedStyleOverride) {
+                    ringStyle = mergeTextStyle(ringStyle, focusedStyleOverride);
+                }
+                renderBoxBorder(builder, rect, "single", undefined, "left", ringStyle);
+            }
+            const contentStyle = showFocusRing
+                ? resolveFocusedContentStyle(parentStyle, theme, focusConfig)
+                : parentStyle;
+            const timestampStyle = mergeTextStyle(contentStyle, { fg: theme.colors.muted });
+            const sourceStyle = mergeTextStyle(contentStyle, { fg: theme.colors.info });
             const showTimestamps = props.showTimestamps !== false;
             const showSource = props.showSource !== false;
             const expandedEntries = (props.expandedEntries ?? EMPTY_STRING_ARRAY);
@@ -438,55 +665,121 @@ export function renderEditorWidget(builder, focusState, rect, theme, parentStyle
                 }
                 filtered = tmp;
             }
-            builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+            builder.pushClip(contentRect.x, contentRect.y, contentRect.w, contentRect.h);
             const startIndex = Math.max(0, props.scrollTop);
-            const endIndex = Math.min(filtered.length, startIndex + rect.h);
-            let y = rect.y;
-            for (let i = startIndex; i < endIndex; i++) {
-                const entry = filtered[i];
-                if (!entry)
-                    continue;
-                const levelColor = logLevelToThemeColor(theme, entry.level);
-                const isError = entry.level === "error";
-                let x = rect.x;
-                const meta = entryMetaById?.get(entry.id);
-                const timestamp = meta?.timestamp ?? formatTimestamp(entry.timestamp);
-                const levelLabel = meta?.levelLabel ?? `[${entry.level.toUpperCase().padEnd(5)}]`;
-                const sourceLabel = meta?.sourceLabel ?? entry.source.slice(0, 6).padEnd(6);
-                let metaSuffix = meta?.metaSuffix ?? "";
-                if (metaSuffix.length === 0) {
-                    if (typeof entry.durationMs === "number")
-                        metaSuffix += ` | ${formatDuration(entry.durationMs)}`;
-                    if (entry.tokens)
-                        metaSuffix += ` | ${formatTokenCount(entry.tokens.total)} tokens`;
-                    if (typeof entry.costCents === "number")
-                        metaSuffix += ` | ${formatCost(entry.costCents)}`;
-                }
-                // Timestamp
-                if (showTimestamps) {
-                    builder.drawText(x, y, timestamp, timestampStyle);
-                    x += 9; // "HH:MM:SS" + space
+            const endIndex = Math.min(filtered.length, startIndex + contentRect.h);
+            const hasScrollbar = contentRect.h > 0 && filtered.length > contentRect.h;
+            const textRect = {
+                x: contentRect.x,
+                y: contentRect.y,
+                w: hasScrollbar ? clampNonNegative(contentRect.w - 1) : contentRect.w,
+                h: contentRect.h,
+            };
+            const shouldRenderTextRows = !damageRect || rectIntersects(damageRect, textRect);
+            let rowOffsetStart = 0;
+            let rowOffsetEnd = contentRect.h;
+            if (damageRect) {
+                const top = Math.max(contentRect.y, damageRect.y);
+                const bottom = Math.min(contentRect.y + contentRect.h, damageRect.y + damageRect.h);
+                if (bottom <= top) {
+                    rowOffsetEnd = 0;
                 }
-                // Level
-                builder.drawText(x, y, levelLabel, isError ? { fg: levelColor, bold: true } : { fg: levelColor });
-                x += 8;
-                // Source
-                if (showSource) {
-                    builder.drawText(x, y, sourceLabel, sourceStyle);
-                    x += 7;
+                else {
+                    rowOffsetStart = Math.max(0, top - contentRect.y);
+                    rowOffsetEnd = Math.min(contentRect.h, bottom - contentRect.y);
                 }
-                const hasDetails = typeof entry.details === "string" && entry.details.length > 0;
-                const expanded = hasDetails && (expandedSet ? expandedSet.has(entry.id) : false);
-                const marker = hasDetails ? (expanded ? "▼ " : "▶ ") : "";
-                const details = expanded && entry.details ? ` | ${entry.details}` : "";
-                const msg = `${marker}${entry.message}${details}${metaSuffix}`;
-                const remaining = rect.w - (x - rect.x);
-                if (remaining > 0) {
-                    builder.drawText(x, y, msg.slice(0, remaining), isError ? { fg: levelColor, bold: true } : { fg: levelColor });
+            }
+            if (shouldRenderTextRows && rowOffsetEnd > rowOffsetStart) {
+                const rowStartIndex = Math.max(startIndex, startIndex + rowOffsetStart);
+                const rowEndIndex = Math.min(endIndex, startIndex + rowOffsetEnd);
+                for (let i = rowStartIndex; i < rowEndIndex; i++) {
+                    const entry = filtered[i];
+                    if (!entry)
+                        continue;
+                    const y = contentRect.y + (i - startIndex);
+                    const levelColor = logLevelToThemeColor(theme, entry.level);
+                    const isError = entry.level === "error";
+                    let x = contentRect.x;
+                    const meta = entryMetaById?.get(entry.id);
+                    const timestamp = meta?.timestamp ?? formatTimestamp(entry.timestamp);
+                    const levelLabel = meta?.levelLabel ?? `[${entry.level.toUpperCase().padEnd(5)}]`;
+                    const sourceLabel = meta?.sourceLabel ?? entry.source.slice(0, 6).padEnd(6);
+                    let metaSuffix = meta?.metaSuffix ?? "";
+                    if (metaSuffix.length === 0) {
+                        if (typeof entry.durationMs === "number")
+                            metaSuffix += ` | ${formatDuration(entry.durationMs)}`;
+                        if (entry.tokens)
+                            metaSuffix += ` | ${formatTokenCount(entry.tokens.total)} tokens`;
+                        if (typeof entry.costCents === "number")
+                            metaSuffix += ` | ${formatCost(entry.costCents)}`;
+                    }
+                    // Timestamp
+                    if (showTimestamps) {
+                        builder.drawText(x, y, timestamp, timestampStyle);
+                        x += 9; // "HH:MM:SS" + space
+                    }
+                    // Level
+                    builder.drawText(x, y, levelLabel, isError
+                        ? { fg: levelColor, bold: true }
+                        : mergeTextStyle(contentStyle, { fg: levelColor }));
+                    x += 8;
+                    // Source
+                    if (showSource) {
+                        builder.drawText(x, y, sourceLabel, sourceStyle);
+                        x += 7;
+                    }
+                    const hasDetails = typeof entry.details === "string" && entry.details.length > 0;
+                    const expanded = hasDetails && (expandedSet ? expandedSet.has(entry.id) : false);
+                    const marker = hasDetails ? (expanded ? "▼ " : "▶ ") : "";
+                    const details = expanded && entry.details ? ` | ${entry.details}` : "";
+                    const msg = `${marker}${entry.message}${details}${metaSuffix}`;
+                    const remaining = contentRect.w - (x - contentRect.x);
+                    if (remaining > 0) {
+                        builder.drawText(x, y, msg.slice(0, remaining), isError
+                            ? { fg: levelColor, bold: true }
+                            : mergeTextStyle(contentStyle, { fg: levelColor }));
+                    }
                 }
-                y++;
             }
             builder.popClip();
+            // Vertical scrollbar
+            if (hasScrollbar) {
+                const scrollbarVariant = props.scrollbarVariant ?? "minimal";
+                const scrollbarOwnStyle = asTextStyle(props.scrollbarStyle, theme);
+                const scrollbarBaseStyle = mergeTextStyle(parentStyle, { fg: theme.colors.border });
+                const scrollbarStyle = scrollbarOwnStyle
+                    ? mergeTextStyle(scrollbarBaseStyle, scrollbarOwnStyle)
+                    : scrollbarBaseStyle;
+                const maxScroll = Math.max(0, filtered.length - contentRect.h);
+                const position = maxScroll > 0 ? props.scrollTop / maxScroll : 0;
+                const viewportRatio = filtered.length > 0 ? Math.min(1, contentRect.h / filtered.length) : 1;
+                const variantConfig = SCROLLBAR_CONFIGS[scrollbarVariant];
+                const glyphs = renderVerticalScrollbar(contentRect.h, { position, viewportRatio }, variantConfig);
+                const scrollbarX = contentRect.x + contentRect.w - 1;
+                const scrollbarRect = { x: scrollbarX, y: contentRect.y, w: 1, h: contentRect.h };
+                const shouldRenderScrollbar = !damageRect || rectIntersects(damageRect, scrollbarRect);
+                if (shouldRenderScrollbar) {
+                    let dyStart = 0;
+                    let dyEnd = glyphs.length;
+                    if (damageRect) {
+                        const top = Math.max(contentRect.y, damageRect.y);
+                        const bottom = Math.min(contentRect.y + contentRect.h, damageRect.y + damageRect.h);
+                        if (bottom <= top) {
+                            dyEnd = 0;
+                        }
+                        else {
+                            dyStart = Math.max(0, top - contentRect.y);
+                            dyEnd = Math.min(glyphs.length, bottom - contentRect.y);
+                        }
+                    }
+                    for (let dy = dyStart; dy < dyEnd; dy++) {
+                        const glyph = glyphs[dy];
+                        if (!glyph)
+                            continue;
+                        builder.drawText(scrollbarX, contentRect.y + dy, glyph, scrollbarStyle);
+                    }
+                }
+            }
             break;
         }
         default: