pi-ui-extend 0.1.1

package/dist/app/tool-block-renderer.js

@@ -0,0 +1,439 @@
+import { resolveColor } from "../config.js";
+import { expandTabs, sliceByDisplayWidth, stringDisplayWidth, wrapDisplayLineByWords } from "../terminal-width.js";
+import { hasToolLspDiagnosticsAfterMutation, sanitizeText, toolStatusIcon, toolStatusIconColor, wrapLine } from "./render-text.js";
+const TRUNCATED_PREVIEW_MARKER = "… ";
+export function renderToolBlock(entry, rule, width, colors, options = {}) {
+    if (rule.hidden)
+        return [];
+    const hasLspDiagnostics = hasToolLspDiagnosticsAfterMutation(entry);
+    const expanded = entry.expanded && !options.superCompact;
+    const stateIcon = toolStatusIcon(entry);
+    const toolColor = resolveColor(rule.color, colors);
+    const toolOutputColor = colors.statusForeground;
+    const headerPrefix = `${stateIcon} ${entry.toolName}`;
+    const headerArgs = formatToolHeaderArgs(entry.headerArgs);
+    const headerArgsWidth = width - stringDisplayWidth(headerPrefix) - 1;
+    const clippedHeaderArgs = headerArgsWidth > 0 ? sliceByDisplayWidth(headerArgs, headerArgsWidth) : "";
+    const target = { kind: "tool", id: entry.id };
+    const header = clippedHeaderArgs ? `${headerPrefix} ${clippedHeaderArgs}` : headerPrefix;
+    const headerArgsStart = clippedHeaderArgs ? headerPrefix.length + 1 : header.length;
+    const headerLine = {
+        text: header,
+        target,
+        colorOverride: toolColor,
+        segments: [
+            { start: 0, end: stateIcon.length, foreground: toolStatusIconColor(entry, colors), bold: true },
+            ...headerArgsStyledSegments(headerArgsStart, clippedHeaderArgs.length, entry.headerArgsSegments, colors),
+        ],
+    };
+    const headerLines = [headerLine];
+    if (expanded) {
+        headerLines.push(...renderToolBodyLines(entry.expandedText, width, target, toolOutputColor, entry.bodyStyle, colors, entry.syntaxHighlight, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi));
+        return headerLines;
+    }
+    if (rule.compactHidden || rule.defaultExpanded === true)
+        return headerLines;
+    const body = entry.collapsedBody.trimEnd();
+    if (!body || rule.previewLines === 0)
+        return headerLines;
+    if (!options.superCompact) {
+        headerLines.push(...renderCollapsedPreviewLines(entry, body, rule, width, target, toolOutputColor, colors, hasLspDiagnostics));
+        return headerLines;
+    }
+    const preview = collapsedInlinePreview(body, rule, entry.preserveAnsi);
+    if (!preview.text)
+        return headerLines;
+    const separator = " — ";
+    const availablePreviewWidth = width - stringDisplayWidth(header) - stringDisplayWidth(separator);
+    if (availablePreviewWidth <= 0)
+        return headerLines;
+    const previewText = preview.overflow ? `${TRUNCATED_PREVIEW_MARKER}${preview.text}` : preview.text;
+    const clippedPreview = sliceByDisplayWidth(previewText, availablePreviewWidth);
+    if (!clippedPreview)
+        return headerLines;
+    headerLine.text = `${header}${separator}${clippedPreview}`;
+    const previewStart = header.length + separator.length;
+    const previewTextStart = previewStart + (preview.overflow ? TRUNCATED_PREVIEW_MARKER.length : 0);
+    headerLine.segments = [
+        ...(headerLine.segments ?? []),
+        ...(preview.overflow ? [{ start: previewStart, end: previewStart + 1, foreground: colors.statusDotBase }] : []),
+        { start: previewTextStart, end: headerLine.text.length, foreground: toolOutputColor },
+    ];
+    return headerLines;
+}
+function renderCollapsedPreviewLines(entry, body, rule, width, target, color, colors, hasLspDiagnostics) {
+    const allLines = renderToolBodyLines(body, width, target, color, entry.bodyStyle, colors, undefined, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi);
+    if (rule.previewLines >= allLines.length)
+        return allLines;
+    const previewLines = rule.direction === "tail" ? allLines.slice(-rule.previewLines) : allLines.slice(0, rule.previewLines);
+    return markTruncatedPreviewLine(previewLines, rule.direction, colors.statusDotBase);
+}
+function collapsedInlinePreview(text, rule, preserveAnsi = false) {
+    const rawLines = sanitizeToolBodyText(text, preserveAnsi).split("\n").map((line) => stripAnsi(line).trim()).filter(Boolean);
+    if (rawLines.length === 0)
+        return { text: "", overflow: false };
+    const selectedLines = rule.direction === "tail" ? rawLines.slice(-rule.previewLines) : rawLines.slice(0, rule.previewLines);
+    return { text: selectedLines.join(" "), overflow: rawLines.length > rule.previewLines };
+}
+function markTruncatedPreviewLine(lines, direction, markerColor) {
+    if (lines.length === 0)
+        return lines;
+    const markerIndex = direction === "tail" ? 0 : lines.length - 1;
+    return lines.map((line, index) => {
+        if (index !== markerIndex)
+            return line;
+        return {
+            ...line,
+            text: line.text.startsWith("  ") ? `${TRUNCATED_PREVIEW_MARKER}${line.text.slice(2)}` : `${TRUNCATED_PREVIEW_MARKER}${line.text}`,
+            segments: [{ start: 0, end: 1, foreground: markerColor }, ...(line.segments ?? [])],
+        };
+    });
+}
+function renderToolBodyLines(text, width, target, color, style, colors, syntaxHighlight, bodyWrap = "char", hasLspDiagnostics = false, bodyLineStyles, preserveAnsi = false) {
+    const bodyWidth = Math.max(1, width - 2);
+    const lines = [];
+    const wrapBodyLine = bodyWrap === "word" ? wrapDisplayLineByWords : wrapLine;
+    for (const [rawLineIndex, rawLine] of sanitizeToolBodyText(text, preserveAnsi).split("\n").entries()) {
+        const ansiLine = preserveAnsi ? ansiStyledLine(rawLine) : undefined;
+        const displayLine = ansiLine?.text ?? rawLine;
+        const diffStyle = style === "diff" ? diffLineStyle(displayLine, colors) : undefined;
+        const lspDiagnosticStyle = hasLspDiagnostics ? lspDiagnosticLineStyle(displayLine, colors) : undefined;
+        const bodyLineStyle = bodyLineStyleForLine(bodyLineStyles, rawLineIndex, colors);
+        const lineSyntaxHighlight = syntaxHighlightForLine(syntaxHighlight, rawLineIndex);
+        const wrappedLines = ansiLine && !diffStyle && !lspDiagnosticStyle && !bodyLineStyle && !lineSyntaxHighlight
+            ? wrapAnsiStyledDisplayLine(ansiLine, bodyWidth)
+            : wrapBodyLine(displayLine, bodyWidth).map((wrapped) => ({ text: wrapped, segments: [] }));
+        for (const [wrapIndex, wrapped] of wrappedLines.entries()) {
+            const line = { text: `  ${wrapped.text}`, target, colorOverride: color };
+            if (diffStyle) {
+                const segment = { start: 2, end: line.text.length, foreground: diffStyle.foreground };
+                if (diffStyle.bold != null)
+                    segment.bold = diffStyle.bold;
+                line.segments = [segment];
+            }
+            else if (lspDiagnosticStyle) {
+                line.segments = [{ start: 2, end: line.text.length, foreground: lspDiagnosticStyle.foreground }];
+            }
+            else if (bodyLineStyle && line.text.length > 2) {
+                line.segments = [{ start: 2, end: line.text.length, ...bodyLineStyle }];
+            }
+            else if (lineSyntaxHighlight) {
+                const rawStart = wrapIndex === 0 ? lineSyntaxHighlight.startColumn ?? 0 : 0;
+                line.syntaxHighlight = { language: lineSyntaxHighlight.language, start: Math.min(line.text.length, 2 + rawStart) };
+            }
+            else if (wrapped.segments.length > 0) {
+                line.segments = wrapped.segments.map((segment) => ({ ...segment, start: segment.start + 2, end: segment.end + 2 }));
+            }
+            lines.push(line);
+        }
+    }
+    return lines;
+}
+const ANSI_STANDARD_COLORS = ["#000000", "#cd3131", "#0dbc79", "#e5e510", "#2472c8", "#bc3fbc", "#11a8cd", "#e5e5e5"];
+const ANSI_BRIGHT_COLORS = ["#666666", "#f14c4c", "#23d18b", "#f5f543", "#3b8eea", "#d670d6", "#29b8db", "#e5e5e5"];
+function sanitizeToolBodyText(text, preserveAnsi) {
+    const withoutCarriageReturns = text.replace(/\r/g, "");
+    if (preserveAnsi)
+        return expandTabs(withoutCarriageReturns);
+    return sanitizeText(text);
+}
+function stripAnsi(text) {
+    return ansiStyledLine(text).text;
+}
+function ansiStyledLine(rawLine) {
+    let text = "";
+    let style = {};
+    let segmentStart;
+    const segments = [];
+    const flushSegment = () => {
+        if (segmentStart == null || segmentStart >= text.length)
+            return;
+        segments.push({ start: segmentStart, end: text.length, ...style });
+        segmentStart = undefined;
+    };
+    const setStyle = (nextStyle) => {
+        if (sameAnsiStyle(style, nextStyle))
+            return;
+        flushSegment();
+        style = nextStyle;
+        if (hasAnsiStyle(style))
+            segmentStart = text.length;
+    };
+    for (let index = 0; index < rawLine.length;) {
+        const ansiLength = ansiSequenceLength(rawLine, index);
+        if (ansiLength > 0) {
+            const sequence = rawLine.slice(index, index + ansiLength);
+            const nextStyle = applyAnsiSequence(style, sequence);
+            if (nextStyle)
+                setStyle(nextStyle);
+            index += ansiLength;
+            continue;
+        }
+        const codePoint = rawLine.codePointAt(index) ?? 0;
+        text += String.fromCodePoint(codePoint);
+        index += codePointLength(codePoint);
+    }
+    flushSegment();
+    return { text, segments };
+}
+function wrapAnsiStyledDisplayLine(line, width) {
+    const safeWidth = Math.max(1, width);
+    if (line.text.length === 0)
+        return [{ text: "", segments: [] }];
+    const ranges = [];
+    let start = 0;
+    let used = 0;
+    for (let index = 0; index < line.text.length;) {
+        const codePoint = line.text.codePointAt(index) ?? 0;
+        const char = String.fromCodePoint(codePoint);
+        const charWidth = stringDisplayWidth(char);
+        if (index > start && used + charWidth > safeWidth) {
+            ranges.push({ start, end: index });
+            start = index;
+            used = 0;
+        }
+        used += charWidth;
+        index += codePointLength(codePoint);
+    }
+    ranges.push({ start, end: line.text.length });
+    return ranges.map((range) => ({
+        text: line.text.slice(range.start, range.end),
+        segments: line.segments.flatMap((segment) => shiftSegmentToRange(segment, range.start, range.end)),
+    }));
+}
+function shiftSegmentToRange(segment, rangeStart, rangeEnd) {
+    const start = Math.max(segment.start, rangeStart);
+    const end = Math.min(segment.end, rangeEnd);
+    if (end <= start)
+        return [];
+    return [{ ...segment, start: start - rangeStart, end: end - rangeStart }];
+}
+function applyAnsiSequence(style, sequence) {
+    const match = /^\x1b\[([\d;:]*)m$/u.exec(sequence);
+    if (!match)
+        return undefined;
+    const params = ansiSgrParams(match[1] ?? "");
+    let next = { ...style };
+    for (let index = 0; index < params.length; index += 1) {
+        const code = params[index] ?? 0;
+        if (code === 0) {
+            next = {};
+        }
+        else if (code === 1) {
+            next.bold = true;
+        }
+        else if (code === 22) {
+            delete next.bold;
+        }
+        else if (code === 4) {
+            next.underline = true;
+        }
+        else if (code === 24) {
+            delete next.underline;
+        }
+        else if (code === 9) {
+            next.strikethrough = true;
+        }
+        else if (code === 29) {
+            delete next.strikethrough;
+        }
+        else if (code === 39) {
+            delete next.foreground;
+        }
+        else if (code === 49) {
+            delete next.background;
+        }
+        else if ((code === 38 || code === 48) && params[index + 1] === 5) {
+            const color = ansi256Color(params[index + 2] ?? 0);
+            if (code === 38)
+                next.foreground = color;
+            else
+                next.background = color;
+            index += 2;
+        }
+        else if ((code === 38 || code === 48) && params[index + 1] === 2) {
+            const color = rgbHex(params[index + 2] ?? 0, params[index + 3] ?? 0, params[index + 4] ?? 0);
+            if (code === 38)
+                next.foreground = color;
+            else
+                next.background = color;
+            index += 4;
+        }
+        else if (code >= 30 && code <= 37) {
+            next.foreground = ansiBasicColor(ANSI_STANDARD_COLORS, code - 30);
+        }
+        else if (code >= 90 && code <= 97) {
+            next.foreground = ansiBasicColor(ANSI_BRIGHT_COLORS, code - 90);
+        }
+        else if (code >= 40 && code <= 47) {
+            next.background = ansiBasicColor(ANSI_STANDARD_COLORS, code - 40);
+        }
+        else if (code >= 100 && code <= 107) {
+            next.background = ansiBasicColor(ANSI_BRIGHT_COLORS, code - 100);
+        }
+    }
+    return next;
+}
+function ansiSgrParams(paramsText) {
+    if (!paramsText)
+        return [0];
+    return paramsText.split(/[;:]/u).map((part) => Number.parseInt(part || "0", 10)).map((value) => Number.isFinite(value) ? value : 0);
+}
+function ansi256Color(value) {
+    const color = Math.max(0, Math.min(255, Math.trunc(value)));
+    if (color < 8)
+        return ansiBasicColor(ANSI_STANDARD_COLORS, color);
+    if (color < 16)
+        return ansiBasicColor(ANSI_BRIGHT_COLORS, color - 8);
+    if (color >= 232) {
+        const level = 8 + (color - 232) * 10;
+        return rgbHex(level, level, level);
+    }
+    const offset = color - 16;
+    const levels = [0, 95, 135, 175, 215, 255];
+    return rgbHex(levels[Math.floor(offset / 36) % 6] ?? 0, levels[Math.floor(offset / 6) % 6] ?? 0, levels[offset % 6] ?? 0);
+}
+function ansiBasicColor(colors, index) {
+    return colors[index] ?? colors[0] ?? "#000000";
+}
+function rgbHex(red, green, blue) {
+    const channel = (value) => Math.max(0, Math.min(255, Math.trunc(value))).toString(16).padStart(2, "0");
+    return `#${channel(red)}${channel(green)}${channel(blue)}`;
+}
+function sameAnsiStyle(left, right) {
+    return left.foreground === right.foreground
+        && left.background === right.background
+        && left.bold === right.bold
+        && left.underline === right.underline
+        && left.strikethrough === right.strikethrough;
+}
+function hasAnsiStyle(style) {
+    return Boolean(style.foreground || style.background || style.bold || style.underline || style.strikethrough);
+}
+function ansiSequenceLength(text, index) {
+    if (text.charCodeAt(index) !== 0x1b)
+        return 0;
+    const next = text[index + 1];
+    if (!next)
+        return 1;
+    if (next === "[") {
+        for (let cursor = index + 2; cursor < text.length; cursor += 1) {
+            const code = text.charCodeAt(cursor);
+            if (code >= 0x40 && code <= 0x7e)
+                return cursor - index + 1;
+        }
+        return text.length - index;
+    }
+    if (next === "]") {
+        for (let cursor = index + 2; cursor < text.length; cursor += 1) {
+            const code = text.charCodeAt(cursor);
+            if (code === 0x07)
+                return cursor - index + 1;
+            if (code === 0x1b && text[cursor + 1] === "\\")
+                return cursor - index + 2;
+        }
+        return text.length - index;
+    }
+    return 2;
+}
+function codePointLength(codePoint) {
+    return codePoint > 0xffff ? 2 : 1;
+}
+function bodyLineStyleForLine(styles, lineIndex, colors) {
+    const style = styles?.find((candidate) => lineIndex >= candidate.startLine && (candidate.endLine == null || lineIndex < candidate.endLine));
+    if (!style)
+        return undefined;
+    const { startLine: _startLine, endLine: _endLine, color, foreground, ...segment } = style;
+    const resolvedForeground = foreground ?? (color ? colors[color] : undefined);
+    return resolvedForeground ? { ...segment, foreground: resolvedForeground } : segment;
+}
+function lspDiagnosticLineStyle(line, colors) {
+    const severity = lspDiagnosticSeverityForLine(line);
+    if (severity === "error")
+        return { foreground: colors.error };
+    if (severity === "warning")
+        return { foreground: colors.warning };
+    if (severity === "hint")
+        return { foreground: colors.muted };
+    return undefined;
+}
+function lspDiagnosticSeverityForLine(line) {
+    const countSeverity = lspDiagnosticCountSeverity(line);
+    if (countSeverity)
+        return countSeverity;
+    const severityMatch = /(?:^|[^\p{L}\p{N}_])(?:diagnosticseverity\.)?(errors?|warnings?|warn|hints?)(?=$|[^\p{L}\p{N}_])/iu.exec(line);
+    const severity = severityMatch?.[1]?.toLowerCase();
+    if (!severity)
+        return undefined;
+    if (severity.startsWith("error"))
+        return "error";
+    if (severity.startsWith("warn"))
+        return "warning";
+    return "hint";
+}
+function lspDiagnosticCountSeverity(line) {
+    const counts = [...line.matchAll(/\b(\d+)\s+(errors?|warnings?|hints?)\b/giu)];
+    if (counts.length === 0)
+        return undefined;
+    for (const severity of ["error", "warning", "hint"]) {
+        if (counts.some((match) => Number(match[1]) > 0 && match[2]?.toLowerCase().startsWith(severity)))
+            return severity;
+    }
+    return undefined;
+}
+function syntaxHighlightForLine(highlights, lineIndex) {
+    const list = highlights ? (Array.isArray(highlights) ? highlights : [highlights]) : [];
+    return list.find((highlight) => lineIndex >= highlight.startLine && (highlight.endLine == null || lineIndex < highlight.endLine));
+}
+function diffLineStyle(line, colors) {
+    const content = line.trimStart();
+    if (/^(?:diff --git|index |\*\*\* (?:Begin|End) Patch)/.test(content))
+        return { foreground: colors.muted, bold: true };
+    if (/^(?:---|\+\+\+|\*\*\* (?:Update|Add|Delete) File:)/.test(content))
+        return { foreground: colors.statusForeground, bold: true };
+    if (/^@@/.test(content))
+        return { foreground: colors.accent, bold: true };
+    if (/^\+/.test(content))
+        return { foreground: colors.success };
+    if (/^-/.test(content))
+        return { foreground: colors.error };
+    return undefined;
+}
+function formatToolHeaderArgs(argsText) {
+    return sanitizeText(argsText ?? "").replace(/\n+/g, " ").trim();
+}
+function headerArgsStyledSegments(headerArgsStart, clippedLength, customSegments, colors) {
+    if (clippedLength <= 0)
+        return [];
+    if (!customSegments || customSegments.length === 0)
+        return [{ start: headerArgsStart, end: headerArgsStart + clippedLength, foreground: colors.muted }];
+    const segments = [];
+    let offset = 0;
+    const clippedCustomSegments = customSegments
+        .map((segment) => clippedHeaderSegment(segment, clippedLength))
+        .filter((segment) => segment !== undefined)
+        .sort((left, right) => left.start - right.start || left.end - right.end);
+    for (const segment of clippedCustomSegments) {
+        const start = Math.max(offset, segment.start);
+        if (start >= segment.end)
+            continue;
+        if (start > offset)
+            segments.push({ start: headerArgsStart + offset, end: headerArgsStart + start, foreground: colors.muted });
+        segments.push({
+            ...segment,
+            start: headerArgsStart + start,
+            end: headerArgsStart + segment.end,
+        });
+        offset = segment.end;
+    }
+    if (offset < clippedLength)
+        segments.push({ start: headerArgsStart + offset, end: headerArgsStart + clippedLength, foreground: colors.muted });
+    return segments;
+}
+function clippedHeaderSegment(segment, clippedLength) {
+    const start = Math.max(0, Math.min(clippedLength, segment.start));
+    const end = Math.max(start, Math.min(clippedLength, segment.end));
+    if (end <= start)
+        return undefined;
+    return { ...segment, start, end };
+}