pi-ui-extend 0.1.1 → 0.1.3

package/dist/app/mouse-controller.js

@@ -114,6 +114,10 @@ export class AppMouseController {
         if (event.button !== 0)
             return;
         if (target?.kind === "toast") {
+            if (!toastTargetContainsEvent(target, event))
+                return;
+            if (target.action === "body")
+                return;
             if (this.copyErrorToast(target.id)) {
                 this.showClickFlashForEvent(event);
                 return;
@@ -235,6 +239,14 @@ export class AppMouseController {
         const statusTarget = this.statusTargetAt(event);
         if (statusTarget)
             return statusTarget;
+        const toastTarget = this.renderedTargets.get(event.y);
+        if (toastTarget?.kind === "toast" && toastTargetContainsEvent(toastTarget, event)) {
+            return {
+                y: event.y,
+                startColumn: toastTarget.startColumn ?? event.x,
+                endColumn: toastTarget.endColumn ?? event.x + 1,
+            };
+        }
         if (this.renderedTargets.has(event.y)) {
             const bounds = nonBlankLineBounds(this.renderedRowTexts.get(event.y) ?? "", event.x);
             return { y: event.y, startColumn: bounds.startColumn, endColumn: bounds.endColumn };
@@ -469,7 +481,8 @@ export class AppMouseController {
         const session = this.host.runtimeSession();
         if (!session)
             return false;
-        this.host.showToast(formatDcpStatsToast(session), "info");
+        const message = formatDcpStatsToast(session);
+        this.host.showToast(message, "info", { variant: "dialog" });
         return true;
     }
     handleStatusModelUsageClick(event) {
@@ -910,6 +923,11 @@ export function screenSelectionLineText(row, text, startColumn, endColumn, input
 function sameConversationPoint(left, right) {
     return !!left && left.line === right.line && left.x === right.x;
 }
+function toastTargetContainsEvent(target, event) {
+    if (target.startColumn === undefined || target.endColumn === undefined)
+        return true;
+    return event.x >= target.startColumn && event.x < target.endColumn;
+}
 function displayCellsInColumnRange(text, startColumn, endColumn) {
     let cells = "";
     for (let column = startColumn; column < endColumn; column += 1) {

package/dist/app/nerd-font-controller.d.ts

@@ -2,6 +2,9 @@ export type NerdFontInstallHost = {
     showToast(message: string, kind: "success" | "error" | "warning" | "info"): void;
     render(): void;
 };
+export declare const FONT_FAMILY_NAME = "JetBrainsMono Nerd Font Mono";
+export declare const FONT_FILE_NAME = "JetBrainsMonoNerdFontMono-Regular.ttf";
+export declare const FONT_DOWNLOAD_URL = "https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFontMono-Regular.ttf";
 export declare class NerdFontController {
     private readonly host;
     private ensureStarted;
@@ -9,3 +12,6 @@ export declare class NerdFontController {
     ensureInstalledOnStartup(): void;
     private ensureInstalled;
 }
+export declare function isJetBrainsNerdFontInstalled(): Promise<boolean>;
+export declare function installJetBrainsNerdFont(): Promise<string>;
+export declare function userFontInstallPath(): string;

package/dist/app/nerd-font-controller.js

@@ -1,8 +1,12 @@
 import { spawn, spawnSync } from "node:child_process";
-import { readdir } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { mkdir, readdir, writeFile } from "node:fs/promises";
 import { homedir } from "node:os";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 const CASK_NAME = "font-jetbrains-mono-nerd-font";
+export const FONT_FAMILY_NAME = "JetBrainsMono Nerd Font Mono";
+export const FONT_FILE_NAME = "JetBrainsMonoNerdFontMono-Regular.ttf";
+export const FONT_DOWNLOAD_URL = "https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFontMono-Regular.ttf";
 const FONT_FILE_PATTERN = /(?:JetBrainsMono|JetBrains).*Nerd.*\.(?:ttf|otf)$/iu;
 export class NerdFontController {
     host;
@@ -19,17 +23,9 @@ export class NerdFontController {
     async ensureInstalled() {
         if (await isJetBrainsNerdFontInstalled())
             return;
-        if (process.platform !== "darwin") {
-            this.host.showToast("Nerd Font is missing; auto-install is only configured for macOS Homebrew", "warning");
-            return;
-        }
-        if (!commandExists("brew")) {
-            this.host.showToast("Nerd Font is missing; install Homebrew or JetBrainsMono Nerd Font manually", "warning");
-            return;
-        }
         this.host.showToast("Installing JetBrainsMono Nerd Font…", "info");
         try {
-            await runBrewInstall();
+            await installJetBrainsNerdFont();
             if (await isJetBrainsNerdFontInstalled()) {
                 this.host.showToast("JetBrainsMono Nerd Font installed", "success");
             }
@@ -45,18 +41,89 @@ export class NerdFontController {
         }
     }
 }
-async function isJetBrainsNerdFontInstalled() {
+export async function isJetBrainsNerdFontInstalled() {
     if (commandExists("brew") && spawnSync("brew", ["list", "--cask", CASK_NAME], { stdio: "ignore" }).status === 0)
         return true;
-    const fontDirs = [join(homedir(), "Library", "Fonts"), "/Library/Fonts", "/System/Library/Fonts"];
+    if (process.platform === "linux" && commandExists("fc-match")) {
+        const result = spawnSync("fc-match", ["-f", "%{family}", FONT_FAMILY_NAME], { encoding: "utf8" });
+        if (result.status === 0 && /JetBrains.*Nerd/iu.test(result.stdout))
+            return true;
+    }
+    const fontDirs = platformFontDirs();
     for (const dir of fontDirs) {
+        if (await directoryContainsFont(dir))
+            return true;
+    }
+    return false;
+}
+export async function installJetBrainsNerdFont() {
+    if (process.platform === "darwin" && commandExists("brew")) {
+        await runBrewInstall();
+        return CASK_NAME;
+    }
+    const targetPath = userFontInstallPath();
+    await mkdir(dirname(targetPath), { recursive: true });
+    const response = await fetch(FONT_DOWNLOAD_URL, {
+        headers: { "User-Agent": "pix-font-installer" },
+        signal: AbortSignal.timeout(30_000),
+    });
+    if (!response.ok)
+        throw new Error(`download failed with HTTP ${response.status}`);
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    if (bytes.length < 100_000)
+        throw new Error("downloaded font is unexpectedly small");
+    await writeFile(targetPath, bytes);
+    if (process.platform === "linux")
+        runOptionalCommand("fc-cache", ["-f", dirname(targetPath)]);
+    if (process.platform === "win32")
+        registerWindowsUserFont(targetPath);
+    return targetPath;
+}
+export function userFontInstallPath() {
+    switch (process.platform) {
+        case "darwin":
+            return join(homedir(), "Library", "Fonts", FONT_FILE_NAME);
+        case "win32":
+            return join(process.env.LOCALAPPDATA ?? join(homedir(), "AppData", "Local"), "Microsoft", "Windows", "Fonts", FONT_FILE_NAME);
+        default:
+            return join(homedir(), ".local", "share", "fonts", "pix", FONT_FILE_NAME);
+    }
+}
+function platformFontDirs() {
+    switch (process.platform) {
+        case "darwin":
+            return [join(homedir(), "Library", "Fonts"), "/Library/Fonts", "/System/Library/Fonts"];
+        case "win32":
+            return [
+                join(process.env.LOCALAPPDATA ?? join(homedir(), "AppData", "Local"), "Microsoft", "Windows", "Fonts"),
+                join(process.env.WINDIR ?? "C:\\Windows", "Fonts"),
+            ];
+        default:
+            return [join(homedir(), ".local", "share", "fonts"), join(homedir(), ".fonts"), "/usr/local/share/fonts", "/usr/share/fonts"];
+    }
+}
+async function directoryContainsFont(root) {
+    if (!existsSync(root))
+        return false;
+    const pending = [{ dir: root, depth: 0 }];
+    let scanned = 0;
+    while (pending.length > 0 && scanned < 5_000) {
+        const current = pending.pop();
+        if (!current)
+            continue;
+        let entries;
         try {
-            const files = await readdir(dir);
-            if (files.some((file) => FONT_FILE_PATTERN.test(file)))
-                return true;
+            entries = await readdir(current.dir, { withFileTypes: true });
         }
         catch {
-            // Ignore unreadable/missing font directories.
+            continue;
+        }
+        for (const entry of entries) {
+            scanned += 1;
+            if (entry.isFile() && FONT_FILE_PATTERN.test(entry.name))
+                return true;
+            if (entry.isDirectory() && current.depth < 4)
+                pending.push({ dir: join(current.dir, entry.name), depth: current.depth + 1 });
         }
     }
     return false;
@@ -80,6 +147,20 @@ async function runBrewInstall() {
         });
     });
 }
+function registerWindowsUserFont(fontPath) {
+    const escapedPath = fontPath.replaceAll("'", "''");
+    const escapedName = `${FONT_FAMILY_NAME} (TrueType)`.replaceAll("'", "''");
+    runOptionalCommand("powershell.exe", [
+        "-NoProfile",
+        "-ExecutionPolicy",
+        "Bypass",
+        "-Command",
+        `New-Item -Path 'HKCU:\\Software\\Microsoft\\Windows NT\\CurrentVersion\\Fonts' -Force | Out-Null; New-ItemProperty -Path 'HKCU:\\Software\\Microsoft\\Windows NT\\CurrentVersion\\Fonts' -Name '${escapedName}' -Value '${escapedPath}' -PropertyType String -Force | Out-Null`,
+    ]);
+}
+function runOptionalCommand(command, args) {
+    spawnSync(command, args, { stdio: "ignore" });
+}
 function commandExists(command) {
     if (process.platform === "win32")
         return spawnSync("where", [command], { stdio: "ignore" }).status === 0;

package/dist/app/render-controller.js

@@ -243,10 +243,11 @@ export class AppRenderController {
         }
         for (const toastOverlay of renderToastOverlays(this.deps.toastController.toast.visibleStates, columns, Math.max(0, statusRow - topReservedRows - 1), this.deps.theme)) {
             const row = topReservedRows + toastOverlay.row;
-            this.deps.mouseController.renderedTargets.set(row, { kind: "toast", id: toastOverlay.id });
-            this.deps.mouseController.renderedRowTexts.set(row, toastOverlay.text);
-            setRenderedBackground(row, this.deps.theme.colors.toastBackground);
-            appendFrameOutput(regionForOverlayRow(row), row, this.renderFrameRow(row, toastOverlay.output));
+            const rowText = this.deps.mouseController.renderedRowTexts.get(row) ?? "";
+            if (toastOverlay.target)
+                this.deps.mouseController.renderedTargets.set(row, toastOverlay.target);
+            this.deps.mouseController.renderedRowTexts.set(row, overlayText(rowText, toastOverlay.column, toastOverlay.text));
+            appendFrameOutput(regionForOverlayRow(row), row, `\x1b[${row};${toastOverlay.column}H${toastOverlay.output}`);
         }
         if (topReservedRows === 0) {
             const newTabTarget = tabLayout.targets.find((target) => target.kind === "new-tab");

package/dist/app/startup-checks.js

@@ -14,7 +14,7 @@ export async function checkPiCliAvailability(pathValue = process.env.PATH ?? "")
         return [];
     return [{
             kind: "error",
-            message: "pi CLI is not available on PATH. Install pi or add it to PATH before starting pix.",
+            message: "pi CLI is not available on PATH. Run `pix install` or add pi to PATH before starting pix.",
         }];
 }
 export function checkPiToolsSuiteExtensionAvailability(extensionsResult) {
@@ -34,13 +34,16 @@ export function checkPiToolsSuiteExtensionAvailability(extensionsResult) {
 }
 async function executableExistsOnPath(command, pathValue) {
     const dirs = pathValue.split(delimiter).filter((part) => part.length > 0);
+    const names = process.platform === "win32" ? [command, `${command}.cmd`, `${command}.exe`, `${command}.bat`] : [command];
     for (const dir of dirs) {
-        try {
-            await access(join(dir, command), fsConstants.X_OK);
-            return true;
-        }
-        catch {
-            // Keep scanning PATH entries.
+        for (const name of names) {
+            try {
+                await access(join(dir, name), fsConstants.X_OK);
+                return true;
+            }
+            catch {
+                // Keep scanning PATH entries.
+            }
         }
     }
     return false;

package/dist/app/toast-controller.d.ts

@@ -1,4 +1,4 @@
-import { Toast, type ToastKind } from "../ui.js";
+import { Toast, type ToastKind, type ToastVariant } from "../ui.js";
 export type AppToastControllerHost = {
     render(): void;
 };
@@ -7,7 +7,10 @@ export declare class AppToastController {
     readonly toast: Toast;
     private readonly timers;
     constructor(host: AppToastControllerHost);
-    showToast(message: string, kind?: ToastKind): void;
+    showToast(message: string, kind?: ToastKind, options?: {
+        durationMs?: number;
+        variant?: ToastVariant;
+    }): void;
     dismissToast(toastId: number): void;
     clearToastTimers(): void;
 }

package/dist/app/toast-controller.js

@@ -7,17 +7,20 @@ export class AppToastController {
     constructor(host) {
         this.host = host;
     }
-    showToast(message, kind = "info") {
-        const toastId = this.toast.show(message, kind);
-        if (kind === "error") {
+    showToast(message, kind = "info", options = {}) {
+        const toastId = this.toast.show(message, kind, options.variant ? { variant: options.variant } : {});
+        if (kind === "error" || options.variant === "dialog") {
             this.host.render();
             return;
         }
+        const durationMs = typeof options.durationMs === "number" && Number.isFinite(options.durationMs) && options.durationMs > 0
+            ? Math.floor(options.durationMs)
+            : TOAST_DURATION_MS;
         const timer = setTimeout(() => {
             this.toast.hide(toastId);
             this.timers.delete(toastId);
             this.host.render();
-        }, TOAST_DURATION_MS);
+        }, durationMs);
         this.timers.set(toastId, timer);
         timer.unref();
         this.host.render();

package/dist/app/toast-renderer.d.ts

@@ -1,9 +1,12 @@
 import { type Theme } from "../theme.js";
 import type { ToastEntry } from "../ui.js";
+import type { ToastLineTarget } from "./types.js";
 export type ToastOverlay = {
     id: number;
     row: number;
+    column: number;
     text: string;
     output: string;
+    target?: ToastLineTarget;
 };
 export declare function renderToastOverlays(states: readonly ToastEntry[], width: number, maxRows: number, theme: Theme): ToastOverlay[];

package/dist/app/toast-renderer.js

@@ -9,6 +9,10 @@ export function renderToastOverlays(states, width, maxRows, theme) {
     for (const state of [...states].reverse()) {
         if (overlays.length >= maxRows)
             break;
+        if (state.variant === "dialog") {
+            overlays.push(...renderDialogToastOverlay(state, width, Math.max(0, maxRows - overlays.length), theme, overlays.length));
+            continue;
+        }
         const icon = toastKindIcon(state.kind);
         const lines = toastMessageLines(state.message, icon, Math.max(1, width - 6));
         const visibleLines = lines.slice(0, Math.max(0, maxRows - overlays.length));
@@ -17,19 +21,22 @@ export function renderToastOverlays(states, width, maxRows, theme) {
         const contentWidth = Math.max(...visibleLines.map((line) => stringDisplayWidth(line)));
         const toastWidth = Math.min(Math.max(12, contentWidth + 2), Math.max(1, width - 4));
         const leftWidth = Math.max(0, width - toastWidth - 2);
-        const rightWidth = Math.max(0, width - leftWidth - toastWidth);
+        const column = leftWidth + 1;
         for (const line of visibleLines) {
             const message = ` ${padOrTrimPlain(line, Math.max(0, toastWidth - 2))} `;
-            const text = `${" ".repeat(leftWidth)}${padOrTrimPlain(message, toastWidth)}${" ".repeat(rightWidth)}`;
-            const output = [
-                colorLine("", leftWidth, { background: theme.colors.background }),
-                colorLine(message, toastWidth, {
-                    ...toastKindStyle(state.kind, theme),
-                    bold: true,
-                }),
-                colorLine("", rightWidth, { background: theme.colors.background }),
-            ].join("");
-            overlays.push({ id: state.id, row: overlays.length + 1, text, output });
+            const text = padOrTrimPlain(message, toastWidth);
+            const output = colorLine(message, toastWidth, {
+                ...toastKindStyle(state.kind, theme),
+                bold: true,
+            });
+            overlays.push({
+                id: state.id,
+                row: overlays.length + 1,
+                column,
+                text,
+                output,
+                target: { kind: "toast", id: state.id, action: "toast", startColumn: column, endColumn: column + toastWidth },
+            });
         }
     }
     return overlays;
@@ -53,6 +60,60 @@ function toastMessageLines(message, icon, maxWidth) {
     }
     return lines.length > 0 ? lines : [firstPrefix.trimEnd()];
 }
+function renderDialogToastOverlay(state, width, maxRows, theme, rowOffset) {
+    if (maxRows <= 0 || width <= 0)
+        return [];
+    const maxDialogWidth = Math.max(1, Math.min(width - 4, 72));
+    const icon = toastKindIcon(state.kind);
+    const closeLabel = `[${APP_ICONS.close}]`;
+    const wrappedLines = dialogMessageLines(state.message, Math.max(1, maxDialogWidth - 4));
+    const title = `${icon} Dialog`;
+    const requiredWidth = Math.max(16, stringDisplayWidth(` ${title} ${closeLabel} `) + 2, ...wrappedLines.map((line) => stringDisplayWidth(line) + 4));
+    const dialogWidth = Math.min(maxDialogWidth, Math.max(16, requiredWidth));
+    const bodyWidth = Math.max(1, dialogWidth - 4);
+    const bodyLines = dialogMessageLines(state.message, bodyWidth);
+    const bodyRows = Math.max(0, maxRows - 2);
+    const visibleBodyLines = bodyLines.slice(0, bodyRows);
+    const includeBottom = maxRows > 1;
+    const dialogRows = [
+        dialogTopLine(title, closeLabel, dialogWidth),
+        ...visibleBodyLines.map((line) => `│ ${padOrTrimPlain(line, bodyWidth)} │`),
+        ...(includeBottom ? [`╰${"─".repeat(Math.max(0, dialogWidth - 2))}╯`] : []),
+    ].slice(0, maxRows);
+    const leftWidth = Math.max(0, width - dialogWidth - 2);
+    const column = leftWidth + 1;
+    const style = toastKindStyle(state.kind, theme);
+    const closeStartColumn = column + 1 + dialogTopCloseOffset(title, closeLabel, dialogWidth);
+    const closeEndColumn = closeStartColumn + stringDisplayWidth(closeLabel);
+    return dialogRows.map((text, index) => ({
+        id: state.id,
+        row: rowOffset + index + 1,
+        column,
+        text,
+        output: colorLine(text, dialogWidth, { ...style, bold: true }),
+        target: index === 0
+            ? { kind: "toast", id: state.id, action: "close", startColumn: closeStartColumn, endColumn: closeEndColumn }
+            : { kind: "toast", id: state.id, action: "body", startColumn: column, endColumn: column + dialogWidth },
+    }));
+}
+function dialogMessageLines(message, maxWidth) {
+    const safeMaxWidth = Math.max(1, maxWidth);
+    const lines = sanitizeText(message).split("\n").flatMap((line) => wrapDisplayLine(line, safeMaxWidth));
+    return lines.length > 0 ? lines : [""];
+}
+function dialogTopLine(title, closeLabel, width) {
+    const innerWidth = Math.max(0, width - 2);
+    const closeOffset = dialogTopCloseOffset(title, closeLabel, width);
+    const leftLabel = ` ${title} `;
+    const spacer = " ".repeat(Math.max(0, closeOffset - stringDisplayWidth(leftLabel)));
+    return `╭${padOrTrimPlain(`${leftLabel}${spacer}${closeLabel} `, innerWidth)}╮`;
+}
+function dialogTopCloseOffset(title, closeLabel, width) {
+    const innerWidth = Math.max(0, width - 2);
+    const leftLabel = ` ${title} `;
+    const closeWidth = stringDisplayWidth(closeLabel);
+    return Math.max(stringDisplayWidth(leftLabel), innerWidth - closeWidth - 1);
+}
 function toastKindIcon(kind) {
     switch (kind) {
         case "success":

package/dist/app/types.d.ts

@@ -227,10 +227,14 @@ export type RenderedLine = {
     } | {
         kind: "queue-message";
         id: string;
-    } | {
-        kind: "toast";
-        id: number;
-    };
+    } | ToastLineTarget;
+};
+export type ToastLineTarget = {
+    kind: "toast";
+    id: number;
+    action?: "toast" | "body" | "close";
+    startColumn?: number;
+    endColumn?: number;
 };
 export type ImageClickTarget = {
     start: number;

package/dist/ui.d.ts

@@ -28,9 +28,11 @@ export declare class PopupMenu<T> {
 }
 export declare const TOAST_KINDS: readonly ["success", "error", "warning", "info"];
 export type ToastKind = (typeof TOAST_KINDS)[number];
+export type ToastVariant = "compact" | "dialog";
 export type ToastState = {
     message: string;
     kind: ToastKind;
+    variant?: ToastVariant;
 };
 export type ToastEntry = ToastState & {
     id: number;
@@ -47,7 +49,9 @@ export declare function isToastKind(value: unknown): value is ToastKind;
 export declare class Toast {
     private readonly entries;
     private nextId;
-    show(message: string, kind?: ToastKind): number;
+    show(message: string, kind?: ToastKind, options?: {
+        variant?: ToastVariant;
+    }): number;
     hide(id?: number): void;
     get state(): ToastState | undefined;
     get visibleStates(): readonly ToastEntry[];

package/dist/ui.js

@@ -60,10 +60,10 @@ export function isToastKind(value) {
 export class Toast {
     entries = [];
     nextId = 1;
-    show(message, kind = "info") {
+    show(message, kind = "info", options = {}) {
         const id = this.nextId;
         this.nextId += 1;
-        this.entries.push({ id, message, kind, createdAt: Date.now() });
+        this.entries.push({ id, message, kind, createdAt: Date.now(), ...(options.variant ? { variant: options.variant } : {}) });
         return id;
     }
     hide(id) {