@zigai/pi-message-highlights 0.1.0

package/README.md

@@ -0,0 +1,17 @@
+# @zigai/pi-message-highlights
+
+Highlights URLs and file paths in Pi's interactive UI:
+
+- URLs render blue.
+- File paths render with Pi's accent/highlight color.
+- Applies to assistant responses, past user messages, and the prompt editor.
+
+## Install
+
+```sh
+pi install npm:@zigai/pi-message-highlights
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@zigai/pi-message-highlights",
+  "version": "0.1.0",
+  "description": "Pi package that highlights URLs and file paths in messages and the prompt editor.",
+  "keywords": [
+    "highlighting",
+    "pi",
+    "pi-coding-agent",
+    "pi-extension",
+    "pi-package",
+    "pi-tweaks",
+    "rendering"
+  ],
+  "homepage": "https://github.com/zigai/pi-tweaks/tree/main/packages/pi-message-highlights#readme",
+  "bugs": {
+    "url": "https://github.com/zigai/pi-tweaks/issues"
+  },
+  "license": "MIT",
+  "author": "zigai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zigai/pi-tweaks.git",
+    "directory": "packages/pi-message-highlights"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "*.json"
+  ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  },
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  }
+}

package/src/highlight-text.ts

@@ -0,0 +1,344 @@
+const ESC = String.fromCharCode(0x1b);
+const BEL = String.fromCharCode(0x07);
+const ST = `${ESC}\\`;
+const DEFAULT_FOREGROUND = `${ESC}[39m`;
+
+const URL_REGEX = /https?:\/\/[^\s<>"'`]+/g;
+const FILE_EXTENSION_PATTERN = [
+    "astro",
+    "bash",
+    "c",
+    "cjs",
+    "css",
+    "gif",
+    "go",
+    "gql",
+    "graphql",
+    "h",
+    "html?",
+    "ico",
+    "java",
+    "jpeg",
+    "jpg",
+    "js",
+    "jsonc?",
+    "jsx",
+    "kt",
+    "kts",
+    "less",
+    "lock",
+    "log",
+    "mdx?",
+    "mjs",
+    "php",
+    "png",
+    "proto",
+    "py",
+    "rb",
+    "rs",
+    "sass",
+    "scss",
+    "sh",
+    "sql",
+    "sqlite",
+    "svg",
+    "svelte",
+    "swift",
+    "toml",
+    "tsx?",
+    "txt",
+    "vue",
+    "wasm",
+    "webp",
+    "ya?ml",
+    "zsh",
+].join("|");
+const EXPLICIT_PATH_PREFIX_PATTERN = String.raw`(?:~/|\.{1,2}/|/)`;
+const PATH_SEGMENT_PATTERN = String.raw`[A-Za-z0-9._~+@%-]+`;
+const PATH_FILENAME_PATTERN = String.raw`${PATH_SEGMENT_PATTERN}\.(?:${FILE_EXTENSION_PATTERN})`;
+const PREFIXED_PATH_PATTERN = String.raw`${EXPLICIT_PATH_PREFIX_PATTERN}${PATH_SEGMENT_PATTERN}(?:/${PATH_SEGMENT_PATTERN})*`;
+const RELATIVE_FILE_PATH_PATTERN = String.raw`${PATH_SEGMENT_PATTERN}(?:/${PATH_SEGMENT_PATTERN})*/${PATH_FILENAME_PATTERN}`;
+const BARE_FILENAME_PATTERN = String.raw`(?:${PATH_FILENAME_PATTERN}|Dockerfile|Justfile|Makefile|\.(?:env|gitignore|npmrc|prettierignore)(?:\.[A-Za-z0-9_-]+)?)`;
+const LINE_SUFFIX_PATTERN = String.raw`(?::\d+(?:-\d+)?(?::\d+)?)?`;
+const FILEPATH_REGEX = new RegExp(
+    String.raw`(^|[\s([{<"'\x60])((?:${PREFIXED_PATH_PATTERN}|${RELATIVE_FILE_PATH_PATTERN}|${BARE_FILENAME_PATTERN})${LINE_SUFFIX_PATTERN})(?=$|[\s)\]}>"'\x60,.;:!?])`,
+    "g",
+);
+const TRAILING_URL_PUNCTUATION = /[.,;:!?]+$/;
+const TRAILING_PATH_PUNCTUATION = /[.,;!?]+$/;
+
+export const URL_BLUE_STYLE = `${ESC}[38;5;117m`;
+
+export type HighlightStyles = {
+    readonly url: string;
+    readonly filepath: string;
+};
+
+type TextToken = {
+    readonly kind: "text";
+    readonly text: string;
+    readonly plainStart: number;
+    readonly plainEnd: number;
+    readonly foreground: string | undefined;
+};
+
+type ControlToken = {
+    readonly kind: "control";
+    readonly text: string;
+};
+
+type Token = TextToken | ControlToken;
+
+type HighlightRange = {
+    readonly start: number;
+    readonly end: number;
+    readonly style: string;
+};
+
+function readEscapeSequence(text: string, start: number): string {
+    const introducer = text[start + 1];
+    if (introducer === undefined) return text.slice(start, start + 1);
+
+    if (introducer === "[") {
+        for (let index = start + 2; index < text.length; index += 1) {
+            const code = text.charCodeAt(index);
+            if (code >= 0x40 && code <= 0x7e) return text.slice(start, index + 1);
+        }
+        return text.slice(start);
+    }
+
+    if (introducer === "]" || introducer === "_" || introducer === "P" || introducer === "^") {
+        const belIndex = text.indexOf(BEL, start + 2);
+        const stIndex = text.indexOf(ST, start + 2);
+        if (belIndex === -1 && stIndex === -1) return text.slice(start);
+        if (belIndex !== -1 && (stIndex === -1 || belIndex < stIndex)) {
+            return text.slice(start, belIndex + BEL.length);
+        }
+        return text.slice(start, stIndex + ST.length);
+    }
+
+    return text.slice(start, start + 2);
+}
+
+function parseSgrNumbers(sequence: string): number[] | undefined {
+    if (!sequence.startsWith(`${ESC}[`) || !sequence.endsWith("m")) return undefined;
+
+    const params = sequence.slice(2, -1);
+    if (params.length === 0) return [0];
+
+    const numbers: number[] = [];
+    for (const param of params.split(";")) {
+        if (param.length === 0) {
+            numbers.push(0);
+            continue;
+        }
+        const value = Number(param);
+        if (!Number.isInteger(value)) return undefined;
+        numbers.push(value);
+    }
+    return numbers;
+}
+
+function resolveForegroundAfterSgr(
+    sequence: string,
+    currentForeground: string | undefined,
+): string | undefined {
+    const numbers = parseSgrNumbers(sequence);
+    if (numbers === undefined) return currentForeground;
+
+    let foreground = currentForeground;
+    for (let index = 0; index < numbers.length; index += 1) {
+        const code = numbers[index] ?? 0;
+        if (code === 0) {
+            foreground = undefined;
+        } else if (code === 39) {
+            foreground = undefined;
+        } else if ((code >= 30 && code <= 37) || (code >= 90 && code <= 97)) {
+            foreground = `${ESC}[${code}m`;
+        } else if (code === 38) {
+            const mode = numbers[index + 1];
+            if (mode === 5) {
+                const color = numbers[index + 2];
+                if (color !== undefined) {
+                    foreground = `${ESC}[38;5;${color}m`;
+                    index += 2;
+                }
+            } else if (mode === 2) {
+                const red = numbers[index + 2];
+                const green = numbers[index + 3];
+                const blue = numbers[index + 4];
+                if (red !== undefined && green !== undefined && blue !== undefined) {
+                    foreground = `${ESC}[38;2;${red};${green};${blue}m`;
+                    index += 4;
+                }
+            }
+        }
+    }
+
+    return foreground;
+}
+
+function tokenizeAnsi(text: string): { readonly tokens: Token[]; readonly plainText: string } {
+    const tokens: Token[] = [];
+    let plainText = "";
+    let foreground: string | undefined;
+    let index = 0;
+
+    while (index < text.length) {
+        if (text[index] === ESC) {
+            const sequence = readEscapeSequence(text, index);
+            foreground = resolveForegroundAfterSgr(sequence, foreground);
+            tokens.push({ kind: "control", text: sequence });
+            index += sequence.length;
+            continue;
+        }
+
+        const start = index;
+        while (index < text.length && text[index] !== ESC) {
+            index += 1;
+        }
+
+        const tokenText = text.slice(start, index);
+        tokens.push({
+            kind: "text",
+            text: tokenText,
+            plainStart: plainText.length,
+            plainEnd: plainText.length + tokenText.length,
+            foreground,
+        });
+        plainText += tokenText;
+    }
+
+    return { tokens, plainText };
+}
+
+function getTrailingPunctuationPattern(kind: "url" | "filepath"): RegExp {
+    if (kind === "url") return TRAILING_URL_PUNCTUATION;
+    return TRAILING_PATH_PUNCTUATION;
+}
+
+function getBracketOpener(closingBracket: string): string {
+    if (closingBracket === ")") return "(";
+    if (closingBracket === "]") return "[";
+    return "{";
+}
+
+function trimMatchEnd(text: string, kind: "url" | "filepath"): string {
+    const trimmed = text.replace(getTrailingPunctuationPattern(kind), "");
+
+    let result = trimmed;
+    while (result.length > 0) {
+        const last = result.at(-1);
+        if (last !== ")" && last !== "]" && last !== "}") break;
+
+        const opener = getBracketOpener(last);
+        const openingCount = result.split(opener).length - 1;
+        const closingCount = result.split(last).length - 1;
+        if (closingCount <= openingCount) break;
+        result = result.slice(0, -1);
+    }
+
+    return result;
+}
+
+function overlapsRange(ranges: readonly HighlightRange[], start: number, end: number): boolean {
+    return ranges.some((range) => start < range.end && end > range.start);
+}
+
+function addRange(
+    ranges: HighlightRange[],
+    start: number,
+    rawText: string,
+    kind: "url" | "filepath",
+    style: string,
+): void {
+    const text = trimMatchEnd(rawText, kind);
+    if (text.length === 0) return;
+
+    const end = start + text.length;
+    if (overlapsRange(ranges, start, end)) return;
+    ranges.push({ start, end, style });
+}
+
+function collectHighlightRanges(plainText: string, styles: HighlightStyles): HighlightRange[] {
+    const ranges: HighlightRange[] = [];
+
+    for (const match of plainText.matchAll(URL_REGEX)) {
+        if (match.index === undefined) continue;
+        addRange(ranges, match.index, match[0], "url", styles.url);
+    }
+
+    for (const match of plainText.matchAll(FILEPATH_REGEX)) {
+        if (match.index === undefined) continue;
+        const prefix = match[1] ?? "";
+        const filepath = match[2];
+        if (filepath === undefined) continue;
+        addRange(ranges, match.index + prefix.length, filepath, "filepath", styles.filepath);
+    }
+
+    return ranges.sort((left, right) => left.start - right.start);
+}
+
+function restoreForeground(foreground: string | undefined): string {
+    return foreground ?? DEFAULT_FOREGROUND;
+}
+
+function appendTextWithHighlights(
+    output: string[],
+    token: TextToken,
+    ranges: readonly HighlightRange[],
+): void {
+    let tokenOffset = 0;
+
+    for (const range of ranges) {
+        if (range.end <= token.plainStart) continue;
+        if (range.start >= token.plainEnd) break;
+
+        const highlightStart = Math.max(range.start, token.plainStart) - token.plainStart;
+        const highlightEnd = Math.min(range.end, token.plainEnd) - token.plainStart;
+
+        if (highlightStart > tokenOffset) {
+            output.push(token.text.slice(tokenOffset, highlightStart));
+        }
+
+        output.push(range.style);
+        output.push(token.text.slice(highlightStart, highlightEnd));
+        output.push(restoreForeground(token.foreground));
+        tokenOffset = highlightEnd;
+    }
+
+    if (tokenOffset < token.text.length) {
+        output.push(token.text.slice(tokenOffset));
+    }
+}
+
+export function highlightMessageLine(line: string, styles: HighlightStyles): string {
+    if (line.length === 0) return line;
+
+    const { tokens, plainText } = tokenizeAnsi(line);
+    const ranges = collectHighlightRanges(plainText, styles);
+    if (ranges.length === 0) return line;
+
+    const output: string[] = [];
+    for (const token of tokens) {
+        if (token.kind === "control") {
+            output.push(token.text);
+        } else {
+            appendTextWithHighlights(output, token, ranges);
+        }
+    }
+
+    return output.join("");
+}
+
+export function highlightMessageLines(lines: readonly string[], styles: HighlightStyles): string[] {
+    return lines.map((line) => highlightMessageLine(line, styles));
+}
+
+export function getStylePrefix(styleFn: (text: string) => string): string {
+    const sentinel = "\u0000";
+    const styled = styleFn(sentinel);
+    const sentinelIndex = styled.indexOf(sentinel);
+    if (sentinelIndex < 0) return "";
+    return styled.slice(0, sentinelIndex);
+}

package/src/index.ts

@@ -0,0 +1,180 @@
+import { Editor } from "@earendil-works/pi-tui";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+import {
+    getStylePrefix,
+    highlightMessageLines,
+    URL_BLUE_STYLE,
+    type HighlightStyles,
+} from "./highlight-text.ts";
+
+const MESSAGE_HIGHLIGHTS_PATCH_KEY = Symbol.for("zigai.pi-message-highlights.patched");
+
+type PatchState = typeof globalThis & {
+    [MESSAGE_HIGHLIGHTS_PATCH_KEY]?: boolean;
+};
+
+type ThemeLike = {
+    fg(color: "accent", text: string): string;
+};
+
+type HighlightStylesProvider = () => HighlightStyles;
+
+type RenderablePrototype = {
+    render(this: object, width: number): string[];
+};
+
+function getPatchState(): PatchState {
+    return globalThis as PatchState;
+}
+
+async function resolvePiDistDir(): Promise<string> {
+    const codingAgentEntry = fileURLToPath(import.meta.resolve("@earendil-works/pi-coding-agent"));
+    return dirname(codingAgentEntry);
+}
+
+function warnInternalPatchUnavailable(feature: string, error?: unknown): void {
+    let suffix = "";
+    if (error instanceof Error && error.message.length > 0) {
+        suffix = `: ${error.message}`;
+    }
+    console.warn(
+        `[pi-message-highlights] ${feature} unavailable; Pi internals may have changed${suffix}`,
+    );
+}
+
+async function loadPiTheme(): Promise<ThemeLike | undefined> {
+    try {
+        const distDir = await resolvePiDistDir();
+        const themePath = pathToFileURL(join(distDir, "modes/interactive/theme/theme.js")).href;
+        // SAFETY: This imports Pi's own interactive theme module. The exported
+        // proxy is intentionally stable across Pi module loaders and exposes
+        // Theme.fg once the interactive theme is initialized.
+        const themeModule = (await import(themePath)) as { theme?: ThemeLike };
+        const theme = themeModule.theme;
+        if (theme === undefined) return undefined;
+        return {
+            fg(color: "accent", text: string): string {
+                return theme.fg(color, text);
+            },
+        };
+    } catch (error: unknown) {
+        warnInternalPatchUnavailable("theme color lookup", error);
+    }
+    return undefined;
+}
+
+async function loadComponentPrototype(
+    fileName: string,
+    exportName: string,
+): Promise<RenderablePrototype | undefined> {
+    try {
+        const distDir = await resolvePiDistDir();
+        const componentPath = pathToFileURL(
+            join(distDir, "modes/interactive/components", fileName),
+        ).href;
+        const componentModule = (await import(componentPath)) as Record<string, unknown>;
+        const exported = componentModule[exportName];
+        if (typeof exported !== "function") {
+            warnInternalPatchUnavailable(`${exportName} patch`);
+            return undefined;
+        }
+
+        const prototype = Reflect.get(exported, "prototype");
+        if (
+            typeof prototype === "object" &&
+            prototype !== null &&
+            typeof Reflect.get(prototype, "render") === "function"
+        ) {
+            // SAFETY: Runtime checks above verified the render method required
+            // by the RenderablePrototype patch seam.
+            return prototype as RenderablePrototype;
+        }
+        warnInternalPatchUnavailable(`${exportName} patch`);
+    } catch (error: unknown) {
+        warnInternalPatchUnavailable(`${exportName} patch`, error);
+    }
+    return undefined;
+}
+
+function buildHighlightStyles(theme: ThemeLike | undefined): HighlightStyles {
+    let filepath = "\u001b[38;5;81m";
+    if (theme !== undefined) {
+        try {
+            const prefix = getStylePrefix((text: string) => theme.fg("accent", text));
+            if (prefix.length > 0) {
+                filepath = prefix;
+            }
+        } catch {
+            // Theme may not be initialized yet during early startup renders.
+            // Later renders will retry and pick up the native accent color.
+        }
+    }
+
+    return {
+        url: URL_BLUE_STYLE,
+        filepath,
+    };
+}
+
+function getEditorPrototype(): RenderablePrototype | undefined {
+    const prototype = Editor.prototype as unknown;
+    if (
+        typeof prototype === "object" &&
+        prototype !== null &&
+        typeof Reflect.get(prototype, "render") === "function"
+    ) {
+        // SAFETY: Runtime checks above verified the render method required by
+        // patchRenderablePrototype. Editor.prototype is the stable pi-tui seam
+        // used by Pi's CustomEditor subclass.
+        return prototype as RenderablePrototype;
+    }
+    warnInternalPatchUnavailable("Editor patch");
+    return undefined;
+}
+
+function patchRenderablePrototype(
+    prototype: RenderablePrototype,
+    getStyles: HighlightStylesProvider,
+): void {
+    const originalRender = Reflect.get(prototype, "render") as
+        | ((this: object, width: number) => string[])
+        | undefined;
+    if (typeof originalRender !== "function") return;
+
+    prototype.render = function highlightedRender(this: object, width: number): string[] {
+        return highlightMessageLines(originalRender.call(this, width), getStyles());
+    };
+}
+
+async function installMessageHighlightPatch(): Promise<void> {
+    const state = getPatchState();
+    if (state[MESSAGE_HIGHLIGHTS_PATCH_KEY] === true) return;
+
+    const theme = await loadPiTheme();
+    const getStyles = () => buildHighlightStyles(theme);
+    const assistantPrototype = await loadComponentPrototype(
+        "assistant-message.js",
+        "AssistantMessageComponent",
+    );
+    const userPrototype = await loadComponentPrototype("user-message.js", "UserMessageComponent");
+    const editorPrototype = getEditorPrototype();
+    if (
+        assistantPrototype === undefined ||
+        userPrototype === undefined ||
+        editorPrototype === undefined
+    ) {
+        return;
+    }
+
+    patchRenderablePrototype(assistantPrototype, getStyles);
+    patchRenderablePrototype(userPrototype, getStyles);
+    patchRenderablePrototype(editorPrototype, getStyles);
+
+    state[MESSAGE_HIGHLIGHTS_PATCH_KEY] = true;
+}
+
+export default async function messageHighlightsExtension(): Promise<void> {
+    await installMessageHighlightPatch();
+}