poe-code 3.0.178 → 3.0.179

package/packages/design-system/dist/dashboard/components/footer.js

@@ -0,0 +1,58 @@
+import { getTheme } from "../../internal/theme-detect.js";
+import { light } from "../../tokens/colors.js";
+export function renderFooter(buffer, rect, hints) {
+    buffer.clearRect(rect);
+    if (rect.width <= 0 || rect.height <= 0 || hints.length === 0) {
+        return;
+    }
+    const cells = truncateCells(hintsToCells(hints), rect.width);
+    const startX = rect.x + Math.floor((rect.width - cells.length) / 2);
+    const y = rect.y + Math.floor(rect.height / 2);
+    cells.forEach((cell, index) => {
+        buffer.put(startX + index, y, cell.ch, cell.style);
+    });
+}
+export function defaultHints() {
+    return [
+        { key: "q", label: "Quit" },
+        { key: "e", label: "Edit" },
+        { key: "p", label: "Pause" },
+        { key: "r", label: "Retry" },
+        { key: "↑↓", label: "Scroll" },
+        { key: "F", label: "Follow" }
+    ];
+}
+function hintsToCells(hints) {
+    const accentStyle = getAccentStyle();
+    const cells = [];
+    hints.forEach((hint, hintIndex) => {
+        if (hintIndex > 0) {
+            cells.push({ ch: " ", style: {} }, { ch: " ", style: {} });
+        }
+        for (const ch of hint.key) {
+            cells.push({ ch, style: accentStyle });
+        }
+        cells.push({ ch: " ", style: {} });
+        for (const ch of hint.label) {
+            cells.push({ ch, style: {} });
+        }
+    });
+    return cells;
+}
+function truncateCells(cells, width) {
+    if (cells.length <= width) {
+        return cells;
+    }
+    if (width <= 3) {
+        return Array.from({ length: Math.max(0, width) }, () => ({ ch: ".", style: {} }));
+    }
+    return [
+        ...cells.slice(0, width - 3),
+        { ch: ".", style: {} },
+        { ch: ".", style: {} },
+        { ch: ".", style: {} }
+    ];
+}
+function getAccentStyle() {
+    return getTheme() === light ? { fg: "#006699", bold: true } : { fg: "cyan", bold: true };
+}

package/packages/design-system/dist/dashboard/components/output-pane.d.ts

@@ -0,0 +1,21 @@
+import { type StyledSegment } from "../ansi.js";
+import { ScreenBuffer } from "../buffer.js";
+import type { CellStyle, OutputItem, Rect } from "../types.js";
+export type OutputPaneState = {
+    items: OutputItem[];
+    scrollOffset: number;
+    autoFollow: boolean;
+};
+export type VisualLine = {
+    text: string;
+    style: CellStyle;
+    prefix: string;
+    prefixStyle: CellStyle;
+    segments?: StyledSegment[];
+};
+export declare function renderOutputPane(buffer: ScreenBuffer, rect: Rect, state: OutputPaneState): void;
+export declare function computeVisualLines(items: OutputItem[], width: number): VisualLine[];
+export declare function scrollUp(state: OutputPaneState, lines: number): OutputPaneState;
+export declare function scrollDown(state: OutputPaneState, lines: number, totalVisualLines: number): OutputPaneState;
+export declare function scrollToTop(state: OutputPaneState): OutputPaneState;
+export declare function scrollToBottom(state: OutputPaneState, totalVisualLines: number, paneHeight: number): OutputPaneState;

package/packages/design-system/dist/dashboard/components/output-pane.js

@@ -0,0 +1,323 @@
+import { resolveThemeName } from "../../internal/theme-detect.js";
+import { hasAnsi, parseAnsi } from "../ansi.js";
+const TEXT_OFFSET = 3;
+const CONTINUATION_PREFIX = "│";
+export function renderOutputPane(buffer, rect, state) {
+    buffer.clearRect(rect);
+    if (rect.width <= 0 || rect.height <= 0) {
+        return;
+    }
+    const visualLines = computeVisualLines(state.items, rect.width);
+    const showBanner = !state.autoFollow && rect.height >= 2;
+    const contentHeight = showBanner ? rect.height - 1 : rect.height;
+    const startLine = state.autoFollow
+        ? Math.max(visualLines.length - contentHeight, 0)
+        : clampScrollOffset(state.scrollOffset, visualLines.length);
+    const textRect = {
+        x: rect.x + TEXT_OFFSET,
+        y: rect.y,
+        width: rect.width - TEXT_OFFSET,
+        height: contentHeight
+    };
+    for (let row = 0; row < contentHeight; row += 1) {
+        const line = visualLines[startLine + row];
+        if (line === undefined) {
+            continue;
+        }
+        buffer.putInRect(rect, row, line.prefix, line.prefixStyle);
+        if (line.segments && line.segments.length > 0) {
+            let offsetX = 0;
+            for (const segment of line.segments) {
+                if (segment.text.length === 0) {
+                    continue;
+                }
+                const remaining = textRect.width - offsetX;
+                if (remaining <= 0) {
+                    break;
+                }
+                buffer.putInRect({
+                    x: textRect.x + offsetX,
+                    y: textRect.y,
+                    width: remaining,
+                    height: textRect.height
+                }, row, segment.text, segment.style);
+                offsetX += countCells(segment.text);
+            }
+            continue;
+        }
+        buffer.putInRect(textRect, row, line.text, line.style);
+    }
+    if (showBanner) {
+        const hiddenBelow = Math.max(0, visualLines.length - (startLine + contentHeight));
+        renderFollowBanner(buffer, rect, hiddenBelow);
+    }
+}
+function renderFollowBanner(buffer, rect, hiddenBelow) {
+    const bannerRow = rect.height - 1;
+    const themeName = resolveThemeName();
+    const keyStyle = themeName === "light"
+        ? { fg: "#006699", bold: true }
+        : { fg: "cyan", bold: true };
+    const labelStyle = getMutedStyle(themeName);
+    const message = hiddenBelow > 0
+        ? `↓ F to follow · ${hiddenBelow} more`
+        : "↓ F to follow";
+    const cells = buildBannerCells(message, keyStyle, labelStyle);
+    const clipped = cells.slice(0, rect.width);
+    const startX = rect.x + Math.max(0, Math.floor((rect.width - clipped.length) / 2));
+    const y = rect.y + bannerRow;
+    for (let index = 0; index < clipped.length; index += 1) {
+        const cell = clipped[index];
+        buffer.put(startX + index, y, cell.ch, cell.style);
+    }
+}
+function buildBannerCells(message, keyStyle, labelStyle) {
+    const cells = [];
+    for (const ch of message) {
+        cells.push({ ch, style: ch === "F" ? keyStyle : labelStyle });
+    }
+    return cells;
+}
+export function computeVisualLines(items, width) {
+    if (width <= 0) {
+        return [];
+    }
+    const themeName = resolveThemeName();
+    const mutedStyle = getMutedStyle(themeName);
+    const textWidth = Math.max(width - TEXT_OFFSET, 0);
+    const visualLines = [];
+    for (const item of items) {
+        const itemStyle = getItemStyle(item.kind, themeName);
+        if (hasAnsi(item.text)) {
+            const styledLines = parseAnsi(item.text, {});
+            let firstRow = true;
+            for (const styledLine of styledLines) {
+                const rows = hardWrapSegments(styledLine.segments, textWidth);
+                for (const rowSegments of rows) {
+                    visualLines.push({
+                        prefix: firstRow ? getPrefix(item.kind) : CONTINUATION_PREFIX,
+                        prefixStyle: firstRow ? itemStyle : mutedStyle,
+                        style: itemStyle,
+                        text: rowSegments.map((segment) => segment.text).join(""),
+                        segments: rowSegments
+                    });
+                    firstRow = false;
+                }
+            }
+            continue;
+        }
+        const wrappedLines = wrapText(item.text, textWidth);
+        for (let index = 0; index < wrappedLines.length; index += 1) {
+            visualLines.push({
+                prefix: index === 0 ? getPrefix(item.kind) : CONTINUATION_PREFIX,
+                prefixStyle: index === 0 ? itemStyle : mutedStyle,
+                style: itemStyle,
+                text: wrappedLines[index] ?? ""
+            });
+        }
+    }
+    return visualLines;
+}
+function hardWrapSegments(segments, width) {
+    if (width <= 0) {
+        return [[]];
+    }
+    const rows = [[]];
+    let rowWidth = 0;
+    for (const segment of segments) {
+        if (segment.text.length === 0) {
+            continue;
+        }
+        const chars = [...segment.text];
+        let cursor = 0;
+        while (cursor < chars.length) {
+            const space = width - rowWidth;
+            if (space <= 0) {
+                rows.push([]);
+                rowWidth = 0;
+                continue;
+            }
+            const take = chars.slice(cursor, cursor + space).join("");
+            const currentRow = rows[rows.length - 1];
+            currentRow.push({ text: take, style: { ...segment.style } });
+            rowWidth += Math.min(space, chars.length - cursor);
+            cursor += space;
+            if (cursor < chars.length) {
+                rows.push([]);
+                rowWidth = 0;
+            }
+        }
+    }
+    return rows;
+}
+function countCells(text) {
+    return Array.from(text).length;
+}
+export function scrollUp(state, lines) {
+    return {
+        ...state,
+        autoFollow: false,
+        scrollOffset: Math.max(0, state.scrollOffset - normalizeCount(lines))
+    };
+}
+export function scrollDown(state, lines, totalVisualLines) {
+    return {
+        ...state,
+        autoFollow: false,
+        scrollOffset: Math.min(clampScrollOffset(totalVisualLines - 1, totalVisualLines), state.scrollOffset + normalizeCount(lines))
+    };
+}
+export function scrollToTop(state) {
+    return {
+        ...state,
+        autoFollow: false,
+        scrollOffset: 0
+    };
+}
+export function scrollToBottom(state, totalVisualLines, paneHeight) {
+    return {
+        ...state,
+        autoFollow: true,
+        scrollOffset: Math.max(0, normalizeCount(totalVisualLines) - normalizeCount(paneHeight))
+    };
+}
+function getPrefix(kind) {
+    if (kind === "success") {
+        return "◆";
+    }
+    if (kind === "error") {
+        return "■";
+    }
+    if (kind === "tool") {
+        return CONTINUATION_PREFIX;
+    }
+    if (kind === "status") {
+        return "●";
+    }
+    return "◇";
+}
+function getItemStyle(kind, themeName) {
+    if (kind === "success") {
+        return themeName === "light" ? { fg: "#008800" } : { fg: "green" };
+    }
+    if (kind === "error") {
+        return themeName === "light" ? { fg: "#cc0000" } : { fg: "red" };
+    }
+    if (kind === "tool") {
+        return getMutedStyle(themeName);
+    }
+    if (kind === "status") {
+        return themeName === "light" ? { fg: "#a200ff" } : { fg: "magenta" };
+    }
+    return themeName === "light" ? { fg: "#a200ff" } : { fg: "magenta" };
+}
+function getMutedStyle(themeName) {
+    return themeName === "light" ? { fg: "#666666" } : { dim: true };
+}
+function wrapText(value, width) {
+    const logicalLines = splitLogicalLines(value);
+    if (logicalLines.length === 0) {
+        return [""];
+    }
+    if (width <= 0) {
+        return logicalLines.map(() => "");
+    }
+    return logicalLines.flatMap((line) => wrapParagraph(line, width));
+}
+function wrapParagraph(value, width) {
+    if (value.length === 0) {
+        return [""];
+    }
+    const tokens = tokenize(value);
+    const lines = [];
+    let currentLine = "";
+    let pendingSpace = "";
+    const flushLine = () => {
+        lines.push(currentLine);
+        currentLine = "";
+        pendingSpace = "";
+    };
+    for (const token of tokens) {
+        if (token.kind === "space") {
+            if (currentLine.length > 0) {
+                pendingSpace += token.value;
+            }
+            continue;
+        }
+        const chunks = splitWord(token.value, width);
+        for (let index = 0; index < chunks.length; index += 1) {
+            const chunk = chunks[index] ?? "";
+            const gap = index === 0 ? pendingSpace : "";
+            if (currentLine.length > 0 && currentLine.length + gap.length + chunk.length > width) {
+                flushLine();
+            }
+            if (currentLine.length > 0 && gap.length > 0) {
+                currentLine += gap;
+            }
+            currentLine += chunk;
+            pendingSpace = "";
+            if (index < chunks.length - 1) {
+                flushLine();
+            }
+        }
+    }
+    if (currentLine.length > 0 || lines.length === 0) {
+        lines.push(currentLine);
+    }
+    return lines;
+}
+function splitWord(value, width) {
+    if (value.length <= width) {
+        return [value];
+    }
+    const chunks = [];
+    for (let index = 0; index < value.length; index += width) {
+        chunks.push(value.slice(index, index + width));
+    }
+    return chunks;
+}
+function tokenize(value) {
+    const tokens = [];
+    let current = "";
+    let currentKind;
+    for (const ch of value) {
+        const nextKind = isWrappingSpace(ch) ? "space" : "word";
+        if (currentKind !== undefined && currentKind !== nextKind) {
+            tokens.push({ kind: currentKind, value: current });
+            current = "";
+        }
+        currentKind = nextKind;
+        current += ch;
+    }
+    if (currentKind !== undefined) {
+        tokens.push({ kind: currentKind, value: current });
+    }
+    return tokens;
+}
+function splitLogicalLines(value) {
+    const lines = [];
+    let currentLine = "";
+    for (const ch of value) {
+        if (ch === "\r") {
+            continue;
+        }
+        if (ch === "\n") {
+            lines.push(currentLine);
+            currentLine = "";
+            continue;
+        }
+        currentLine += ch;
+    }
+    lines.push(currentLine);
+    return lines;
+}
+function clampScrollOffset(scrollOffset, totalVisualLines) {
+    const maxOffset = Math.max(0, normalizeCount(totalVisualLines) - 1);
+    return Math.max(0, Math.min(normalizeCount(scrollOffset), maxOffset));
+}
+function normalizeCount(value) {
+    return Math.max(0, Math.floor(value));
+}
+function isWrappingSpace(ch) {
+    return ch === " " || ch === "\t";
+}

package/packages/design-system/dist/dashboard/components/stats-pane.d.ts

@@ -0,0 +1,7 @@
+import { ScreenBuffer } from "../buffer.js";
+import type { DashboardStats, Rect } from "../types.js";
+import type { VisualLine } from "./output-pane.js";
+export declare function renderStatsPane(buffer: ScreenBuffer, rect: Rect, stats: DashboardStats): void;
+export declare function formatElapsed(ms: number): string;
+export declare function formatNumber(n: number): string;
+export declare function statsToLines(stats: DashboardStats, width: number): VisualLine[];

package/packages/design-system/dist/dashboard/components/stats-pane.js

@@ -0,0 +1,120 @@
+import { getTheme } from "../../internal/theme-detect.js";
+import { light } from "../../tokens/colors.js";
+export function renderStatsPane(buffer, rect, stats) {
+    buffer.clearRect(rect);
+    if (rect.width <= 0 || rect.height <= 0) {
+        return;
+    }
+    const lines = statsToLines(stats, rect.width);
+    for (let row = 0; row < rect.height; row += 1) {
+        const line = lines[row];
+        if (line === undefined) {
+            continue;
+        }
+        if (line.prefix.length > 0) {
+            buffer.putInRect(rect, row, line.prefix, line.prefixStyle);
+        }
+        if (line.text.length === 0) {
+            continue;
+        }
+        const textStart = Math.min(line.prefix.length, rect.width);
+        buffer.putInRect({ x: rect.x + textStart, y: rect.y + row, width: rect.width - textStart, height: 1 }, 0, line.text, line.style);
+    }
+}
+export function formatElapsed(ms) {
+    const safeMs = Number.isFinite(ms) ? ms : 0;
+    const totalSeconds = Math.max(0, Math.floor(safeMs / 1_000));
+    const hours = Math.floor(totalSeconds / 3_600);
+    const minutes = Math.floor((totalSeconds % 3_600) / 60);
+    const seconds = totalSeconds % 60;
+    return [hours, minutes, seconds].map((value) => value.toString().padStart(2, "0")).join(":");
+}
+export function formatNumber(n) {
+    return new Intl.NumberFormat("en-US").format(n);
+}
+export function statsToLines(stats, width) {
+    if (width <= 0) {
+        return [];
+    }
+    const mutedStyle = getToneStyle("muted");
+    const totalTokens = stats.tokensIn + stats.tokensOut;
+    const lines = [
+        createKeyValueLine("Status", formatStatus(stats.status), width, getStatusStyle(stats.status)),
+        createKeyValueLine("Iteration", formatNumber(stats.iterations), width),
+        createKeyValueLine("Elapsed", formatElapsed(stats.elapsedMs), width),
+        createBlankLine(),
+        createKeyValueLine("Tokens In", formatNumber(stats.tokensIn), width),
+        createKeyValueLine("Tokens Out", formatNumber(stats.tokensOut), width),
+        createKeyValueLine("Total", formatNumber(totalTokens), width)
+    ];
+    if (stats.currentAction !== undefined) {
+        lines.push(createBlankLine(), {
+            prefix: clipText("Current:", width),
+            prefixStyle: {},
+            style: {},
+            text: ""
+        }, {
+            prefix: width > 0 ? clipText("  ", width) : "",
+            prefixStyle: mutedStyle,
+            style: mutedStyle,
+            text: clipText(stats.currentAction, Math.max(width - 2, 0))
+        });
+    }
+    return lines;
+}
+function createBlankLine() {
+    return {
+        prefix: "",
+        prefixStyle: {},
+        style: {},
+        text: ""
+    };
+}
+function createKeyValueLine(label, value, width, valueStyle = {}) {
+    const clippedValue = clipText(value, width);
+    const availableBeforeValue = Math.max(width - clippedValue.length, 0);
+    const clippedLabel = clipText(label, Math.max(availableBeforeValue - 1, 0));
+    return {
+        prefix: clippedLabel + " ".repeat(Math.max(availableBeforeValue - clippedLabel.length, 0)),
+        prefixStyle: {},
+        style: valueStyle,
+        text: clippedValue
+    };
+}
+function clipText(value, width) {
+    return width <= 0 ? "" : value.slice(0, width);
+}
+function formatStatus(status) {
+    return `${status.slice(0, 1).toUpperCase()}${status.slice(1)}`;
+}
+function getStatusStyle(status) {
+    if (status === "running") {
+        return getToneStyle("info");
+    }
+    if (status === "paused") {
+        return getToneStyle("warning");
+    }
+    if (status === "error") {
+        return getToneStyle("error");
+    }
+    if (status === "done") {
+        return getToneStyle("success");
+    }
+    return getToneStyle("muted");
+}
+function getToneStyle(tone) {
+    const isLightTheme = getTheme() === light;
+    if (tone === "muted") {
+        return isLightTheme ? { fg: "#666666" } : { dim: true };
+    }
+    if (tone === "info") {
+        return isLightTheme ? { fg: "#a200ff" } : { fg: "magenta" };
+    }
+    if (tone === "warning") {
+        return isLightTheme ? { fg: "#cc6600" } : { fg: "yellow" };
+    }
+    if (tone === "error") {
+        return isLightTheme ? { fg: "#cc0000" } : { fg: "red" };
+    }
+    return isLightTheme ? { fg: "#008800" } : { fg: "green" };
+}

package/packages/design-system/dist/dashboard/dashboard.d.ts

@@ -0,0 +1,20 @@
+import type { FooterHint } from "./components/footer.js";
+import type { Command, DashboardStats, OutputItem } from "./types.js";
+export type DashboardOptions = {
+    title?: string;
+    statsTitle?: string;
+    keymap?: Partial<Record<Command, string[]>>;
+    rightPaneWidth?: number;
+    hints?: FooterHint[];
+    stdin?: NodeJS.ReadStream;
+    stdout?: NodeJS.WriteStream;
+};
+export type Dashboard = {
+    start(): void;
+    stop(): void;
+    appendOutput(item: OutputItem): void;
+    updateStats(stats: Partial<DashboardStats>): void;
+    onCommand(handler: (cmd: Command) => void): void;
+    destroy(): void;
+};
+export declare function createDashboard(opts?: DashboardOptions): Dashboard;