pi-ui-extend 0.1.13 → 0.1.17

package/dist/app/rendering/conversation-viewport.js

@@ -1,5 +1,7 @@
+import { resolveToolRule } from "../../config.js";
+import { stringDisplayWidth } from "../../terminal-width.js";
 import { renderConversationEntry as renderConversationEntryLines } from "./conversation-entry-renderer.js";
-import { shortHash } from "./render-text.js";
+import { horizontalPaddingLayout, shortHash } from "./render-text.js";
 export class ConversationViewport {
     host;
     blockCachesByWidth = new Map();
@@ -23,12 +25,24 @@ export class ConversationViewport {
     slice(width, start, count) {
         if (count <= 0)
             return [];
+        for (let attempt = 0; attempt < 4; attempt += 1) {
+            const layout = this.layoutForWidth(width);
+            const visible = this.sliceMeasured(layout, width, start, count);
+            if (!visible.changed)
+                return visible.lines;
+        }
         const layout = this.layoutForWidth(width);
+        return this.sliceMeasured(layout, width, start, count, { allowLayoutChanges: false }).lines;
+    }
+    sliceMeasured(layout, width, start, count, options = {}) {
+        const allowLayoutChanges = options.allowLayoutChanges !== false;
         const visible = [];
         const end = start + count;
         let entryIndex = this.entryIndexForOffset(layout.offsets, start);
         for (; entryIndex < layout.entries.length; entryIndex += 1) {
             const entry = layout.entries[entryIndex];
+            if (allowLayoutChanges && this.ensureEntryMeasured(layout, width, entryIndex))
+                return { lines: [], changed: true };
             const block = this.blockForEntry(entry, width);
             const blockLineCount = layout.lineCounts[entryIndex] ?? 0;
             if (blockLineCount === 0)
@@ -45,7 +59,7 @@ export class ConversationViewport {
             if (visible.length >= count)
                 break;
         }
-        return visible;
+        return { lines: visible, changed: false };
     }
     entries() {
         const queued = this.queuedEntries();
@@ -80,6 +94,8 @@ export class ConversationViewport {
     }
     entryBlockPositions(width) {
         const layout = this.layoutForWidth(width);
+        for (let index = 0; index < layout.entries.length; index += 1)
+            this.ensureEntryMeasured(layout, width, index);
         return layout.entries.map((entry, index) => ({
             entry,
             offset: layout.offsets[index] ?? 0,
@@ -87,6 +103,21 @@ export class ConversationViewport {
             block: this.blockForEntry(entry, width),
         }));
     }
+    measuredLineCountForEntries(width, entryIds) {
+        if (entryIds.length === 0)
+            return 0;
+        const layout = this.layoutForWidth(width);
+        const indexes = [...new Set(entryIds
+                .map((entryId) => layout.positions.get(entryId))
+                .filter((index) => index !== undefined))]
+            .sort((left, right) => left - right);
+        let lineCount = 0;
+        for (const index of indexes) {
+            this.ensureEntryMeasured(layout, width, index);
+            lineCount += layout.lineCounts[index] ?? 0;
+        }
+        return lineCount;
+    }
     queuedEntries() {
         const session = this.host.session;
         const entries = [];
@@ -130,7 +161,10 @@ export class ConversationViewport {
         const allThinkingExpanded = Boolean(this.host.allThinkingExpanded);
         let layout = this.layoutCachesByWidth.get(width);
         if (!layout || this.layoutStructureChanged(layout, entries, queuedSignature, superCompactTools, allThinkingExpanded)) {
-            layout = this.buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded);
+            const previousLayout = layout && layout.queuedSignature === queuedSignature && layout.superCompactTools === superCompactTools && layout.allThinkingExpanded === allThinkingExpanded
+                ? layout
+                : undefined;
+            layout = this.buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded, previousLayout);
             this.layoutCachesByWidth.set(width, layout);
         }
         else {
@@ -141,22 +175,40 @@ export class ConversationViewport {
         }
         return layout;
     }
-    buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded) {
+    buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded, previousLayout) {
         const entryIds = [];
         const lineCounts = [];
+        const measuredLineCounts = [];
         const offsets = [];
         const positions = new Map();
         let totalLineCount = 0;
+        const estimatedBlockLineCounts = entries.map((entry) => this.estimatedBlockLineCountForEntry(entry, width));
         for (const [index, entry] of entries.entries()) {
             entryIds.push(entry.id);
             positions.set(entry.id, index);
             offsets.push(totalLineCount);
-            const lineCount = this.lineCountForEntry(entry, entries, index, width);
+            const previousLineCount = this.previousMeasuredLineCount(previousLayout, entries, index, entry);
+            const lineCount = previousLineCount ?? this.lineCountWithGap(entry, estimatedBlockLineCounts[index] ?? 0, this.nextEstimatedVisibleEntry(entries, estimatedBlockLineCounts, index));
             lineCounts.push(lineCount);
+            measuredLineCounts.push(previousLineCount !== undefined);
             totalLineCount += lineCount;
         }
         offsets.push(totalLineCount);
-        return { entries, entryIds, lineCounts, offsets, positions, dirtyEntryIds: new Set(), totalLineCount, queuedSignature, superCompactTools, allThinkingExpanded };
+        return { entries, entryIds, lineCounts, measuredLineCounts, offsets, positions, dirtyEntryIds: new Set(), totalLineCount, queuedSignature, superCompactTools, allThinkingExpanded };
+    }
+    previousMeasuredLineCount(previousLayout, entries, index, entry) {
+        const previousIndex = previousLayout?.positions.get(entry.id);
+        if (previousLayout === undefined || previousIndex === undefined)
+            return undefined;
+        if (previousLayout.measuredLineCounts[previousIndex] !== true)
+            return undefined;
+        if (previousLayout.dirtyEntryIds.has(entry.id))
+            return undefined;
+        const previousNextEntryId = previousLayout.entryIds[previousIndex + 1];
+        const nextEntryId = entries[index + 1]?.id;
+        if (previousNextEntryId !== nextEntryId)
+            return undefined;
+        return previousLayout.lineCounts[previousIndex];
     }
     layoutStructureChanged(layout, entries, queuedSignature, superCompactTools, allThinkingExpanded) {
         if (layout.entries.length !== entries.length || layout.queuedSignature !== queuedSignature || layout.superCompactTools !== superCompactTools || layout.allThinkingExpanded !== allThinkingExpanded)
@@ -168,12 +220,17 @@ export class ConversationViewport {
     refreshDirtyLayoutEntries(layout, width) {
         if (layout.dirtyEntryIds.size === 0)
             return;
+        const indexes = new Set();
         for (const entryId of layout.dirtyEntryIds) {
             const position = layout.positions.get(entryId);
             if (position === undefined)
                 continue;
-            this.refreshLayoutEntry(layout, width, position);
+            indexes.add(position);
+            if (position > 0)
+                indexes.add(position - 1);
         }
+        for (const position of [...indexes].sort((left, right) => left - right))
+            this.refreshLayoutEntry(layout, width, position, true);
         layout.dirtyEntryIds.clear();
     }
     blockCacheForWidth(width) {
@@ -187,30 +244,80 @@ export class ConversationViewport {
     refreshDynamicLayoutEntries(layout, width) {
         for (let index = 0; index < layout.entries.length; index += 1) {
             if (this.host.isDynamicConversationBlock(layout.entries[index]))
-                this.refreshLayoutEntry(layout, width, index);
+                this.refreshLayoutEntry(layout, width, index, true);
         }
     }
-    refreshLayoutEntry(layout, width, index) {
+    ensureEntryMeasured(layout, width, index) {
         const entry = layout.entries[index];
         if (!entry)
-            return;
+            return false;
+        if (layout.measuredLineCounts[index] === true && !this.host.isDynamicConversationBlock(entry))
+            return false;
+        return this.refreshLayoutEntry(layout, width, index, true);
+    }
+    refreshLayoutEntry(layout, width, index, measure) {
+        const entry = layout.entries[index];
+        if (!entry)
+            return false;
         const previousLineCount = layout.lineCounts[index] ?? 0;
-        const nextLineCount = this.lineCountForEntry(entry, layout.entries, index, width);
+        const nextLineCount = measure
+            ? this.measuredLineCountForEntry(entry, layout.entries, index, width)
+            : this.estimatedLineCountForEntry(entry, layout.entries, index, width);
+        layout.measuredLineCounts[index] = measure;
         if (previousLineCount === nextLineCount)
-            return;
+            return false;
         const delta = nextLineCount - previousLineCount;
         layout.lineCounts[index] = nextLineCount;
         layout.totalLineCount += delta;
         for (let offsetIndex = index + 1; offsetIndex < layout.offsets.length; offsetIndex += 1) {
             layout.offsets[offsetIndex] = (layout.offsets[offsetIndex] ?? 0) + delta;
         }
+        return true;
     }
-    lineCountForEntry(entry, entries, index, width) {
+    measuredLineCountForEntry(entry, entries, index, width) {
         const block = this.blockForEntry(entry, width);
-        if (block.lineCount === 0)
+        return this.lineCountWithGap(entry, block.lineCount, this.nextVisibleEntry(entries, index, width));
+    }
+    estimatedLineCountForEntry(entry, entries, index, width) {
+        const blockLineCount = this.estimatedBlockLineCountForEntry(entry, width);
+        const blockLineCounts = entries.map((candidate) => this.estimatedBlockLineCountForEntry(candidate, width));
+        return this.lineCountWithGap(entry, blockLineCount, this.nextEstimatedVisibleEntry(entries, blockLineCounts, index));
+    }
+    lineCountWithGap(entry, blockLineCount, nextEntry) {
+        if (blockLineCount === 0)
             return 0;
-        const nextEntry = this.nextVisibleEntry(entries, index, width);
-        return block.lineCount + (this.gapAfterEntry(entry, nextEntry) ? 1 : 0);
+        return blockLineCount + (this.gapAfterEntry(entry, nextEntry) ? 1 : 0);
+    }
+    estimatedBlockLineCountForEntry(entry, width) {
+        if (width <= 0)
+            return 0;
+        switch (entry.kind) {
+            case "assistant":
+                return estimateWrappedLineCount(entry.text, width);
+            case "system":
+            case "error":
+            case "custom":
+            case "session-aborted":
+                return estimateWrappedLineCount(entry.text, width);
+            case "user": {
+                const { contentWidth } = horizontalPaddingLayout(width);
+                return 2 + estimateWrappedLineCount(entry.text, contentWidth);
+            }
+            case "queued": {
+                const { contentWidth } = horizontalPaddingLayout(width);
+                return estimateWrappedLineCount(entry.text, contentWidth);
+            }
+            case "thinking": {
+                const expanded = entry.expanded || this.host.allThinkingExpanded === true;
+                return expanded ? 1 + estimateWrappedLineCount(entry.text, Math.max(1, width - 2)) : 1;
+            }
+            case "shell":
+                return estimateToolLikeLineCount("shell", entry.expanded, `${entry.output}\n${entry.status}`, width, this.host.pixConfig, this.host.superCompactTools === true, true);
+            case "tool":
+                return estimateToolLikeLineCount(entry.toolName, entry.expanded, entry.output, width, this.host.pixConfig, this.host.superCompactTools === true, false);
+            default:
+                return 1;
+        }
     }
     nextVisibleEntry(entries, index, width) {
         for (let nextIndex = index + 1; nextIndex < entries.length; nextIndex += 1) {
@@ -222,6 +329,16 @@ export class ConversationViewport {
         }
         return undefined;
     }
+    nextEstimatedVisibleEntry(entries, lineCounts, index) {
+        for (let nextIndex = index + 1; nextIndex < entries.length; nextIndex += 1) {
+            const nextEntry = entries[nextIndex];
+            if (!nextEntry)
+                continue;
+            if ((lineCounts[nextIndex] ?? 0) > 0)
+                return nextEntry;
+        }
+        return undefined;
+    }
     gapAfterEntry(entry, nextEntry) {
         if (!this.host.superCompactTools)
             return true;
@@ -249,3 +366,27 @@ export class ConversationViewport {
         return result;
     }
 }
+function estimateWrappedLineCount(text, width) {
+    const safeWidth = Math.max(1, width);
+    if (!text)
+        return 0;
+    let count = 0;
+    for (const line of text.split("\n")) {
+        const displayWidth = stringDisplayWidth(line);
+        count += Math.max(1, Math.ceil(displayWidth / safeWidth));
+    }
+    return count;
+}
+function estimateToolLikeLineCount(toolName, expanded, output, width, pixConfig, superCompactTools, includeStatusLine) {
+    const rule = resolveToolRule(toolName, pixConfig.toolRenderer);
+    if (rule.hidden)
+        return 0;
+    if (expanded)
+        return 1 + estimateWrappedLineCount(output, Math.max(1, width - 2));
+    if (rule.compactHidden || (rule.defaultExpanded === true && !superCompactTools))
+        return 1;
+    const bodyLineCount = estimateWrappedLineCount(output, Math.max(1, width - 2));
+    const previewLineCount = Math.min(rule.previewLines, bodyLineCount);
+    const extraStatusLine = includeStatusLine && output.trimEnd().length === 0 ? 1 : 0;
+    return superCompactTools ? 1 : 1 + Math.max(extraStatusLine, previewLineCount);
+}

package/dist/app/rendering/editor-panels.js

@@ -1,6 +1,7 @@
 import { stringDisplayWidth } from "../../terminal-width.js";
 import { SUBAGENTS_WIDGET_MAX_ROWS } from "../constants.js";
 import { ellipsizeDisplay, padOrTrimPlain, wrapLine } from "./render-text.js";
+import { thinkingLevelThemeColor } from "./status-line-renderer.js";
 import { activeSubagentStates, formatElapsedSince, formatSubagentsPanelStats, subagentModelThinkingLabel, subagentRunName, subagentStatusIcon, taskPreviewMap, } from "../subagents/subagents-model.js";
 import { formatTodoPanelStats, formatTodoTaskLine, hasOpenTodoTasks, shiftSegmentsToSlice, todoTaskLineSegments, visibleTodoTaskRows, visibleTodoTasks, } from "../todo/todo-model.js";
 export function renderTodoPanel(details, expanded, width, colors) {
@@ -18,35 +19,47 @@ export function renderTodoPanel(details, expanded, width, colors) {
     const headerText = `todos ${expanded ? "▾" : "▸"}${stats ? ` ${stats}` : ""}`;
     const todoPanelColor = colors.warning;
     const todoMetaColor = colors.muted;
+    const todoThinkingColor = (level) => thinkingLevelThemeColor(level, colors);
+    const todoStatusThemeColor = (status) => {
+        switch (status) {
+            case "pending": return colors.muted;
+            case "in_progress": return colors.warning;
+            case "deferred": return colors.muted;
+            case "completed": return colors.success;
+            case "deleted": return colors.error;
+        }
+    };
     if (!expanded) {
         const prefix = `${headerText} — current: `;
         const current = activeTask ? formatTodoTaskLine(activeTask) : "no active todo";
         const collapsedText = `${prefix}${current}`;
-        const segments = activeTask
-            ? todoTaskLineSegments(activeTask, todoMetaColor).map((segment) => ({
+        const segments = [
+            { start: 0, end: headerText.length, foreground: todoPanelColor },
+            { start: headerText.length, end: prefix.length, foreground: todoMetaColor },
+        ];
+        if (activeTask) {
+            const activeSegments = todoTaskLineSegments(activeTask, todoMetaColor, { thinkingColor: todoThinkingColor, statusColor: todoStatusThemeColor }).map((segment) => ({
                 ...segment,
                 start: segment.start + prefix.length,
                 end: segment.end + prefix.length,
-            }))
-            : undefined;
+            }));
+            segments.push(...activeSegments);
+        }
         const line = {
             text: padOrTrimPlain(ellipsizeDisplay(collapsedText, contentWidth), width),
-            colorOverride: todoPanelColor,
+            segments,
             target,
         };
-        if (segments)
-            line.segments = segments;
         return [line];
     }
     const lines = [];
     for (const { task, depth } of visibleTodoTaskRows(details)) {
         const text = formatTodoTaskLine(task, { depth });
-        const segments = todoTaskLineSegments(task, todoMetaColor, { depth });
+        const segments = todoTaskLineSegments(task, todoMetaColor, { depth, thinkingColor: todoThinkingColor, statusColor: todoStatusThemeColor });
         let start = 0;
         for (const wrapped of wrapLine(text, contentWidth)) {
             lines.push({
                 text: padOrTrimPlain(wrapped, width),
-                colorOverride: todoPanelColor,
                 segments: shiftSegmentsToSlice(segments, start, wrapped.length),
                 target,
             });

package/dist/app/rendering/popup-menu-renderer.d.ts

@@ -0,0 +1,62 @@
+import { type Theme } from "../../theme.js";
+import { type ModelColorsConfig } from "../../config.js";
+import type { PopupMenu } from "../../ui.js";
+import type { ScreenStyler } from "../screen/screen-styler.js";
+import type { Entry, ModelMenuValue, PixMenuItem, PixMenuOptions, QueueMessageMenuValue, RenderedLine, ResumeMenuValue, SlashCommand, ThinkingMenuValue, UserMessageJumpMenuValue, UserMessageMenuValue } from "../types.js";
+import type { AgentSession } from "@earendil-works/pi-coding-agent";
+export type PopupMenuRendererHost = {
+    readonly theme: Theme;
+    readonly screenStyler: ScreenStyler;
+    readonly entries: readonly Entry[];
+    readonly session: AgentSession | undefined;
+    readonly modelColors?: ModelColorsConfig;
+    readonly resumeLoading: boolean;
+    readonly resumeSessionCount: number;
+    readonly userMessageJumpLoading: boolean;
+};
+export declare class PopupMenuRenderer {
+    private readonly host;
+    constructor(host: PopupMenuRendererHost);
+    popupMenuWidth(columns: number): number;
+    popupMenuMargin(columns: number): number;
+    effectivePopupMenuWidth(columns: number): number;
+    styleOverlayLine(row: number, line: RenderedLine, width: number, activeMenu: PopupMenu<unknown>): string;
+    overlayPlainText(line: RenderedLine, width: number): string;
+    renderInlineUserMessageMenu(options: {
+        userContentWidth: number;
+        userContentLeft: number;
+        userLine: (text: string, entryId?: string, syntaxHighlight?: RenderedLine["syntaxHighlight"]) => RenderedLine;
+    }, menu: PopupMenu<UserMessageMenuValue>): RenderedLine[];
+    renderSlashCommandMenu(width: number, menu: PopupMenu<SlashCommand>): RenderedLine[];
+    renderModelMenu(width: number, menu: PopupMenu<ModelMenuValue>): RenderedLine[];
+    renderThinkingMenu(width: number, menu: PopupMenu<ThinkingMenuValue>): RenderedLine[];
+    renderResumeMenu(width: number, menu: PopupMenu<ResumeMenuValue>, state: {
+        directQuery: string;
+        allSessionsLoaded: boolean;
+        loadedSessionCount: number;
+    }): RenderedLine[];
+    renderUserMessageJumpMenu(width: number, menu: PopupMenu<UserMessageJumpMenuValue>, directQuery: string): RenderedLine[];
+    renderQueueMessageMenu(width: number, menu: PopupMenu<QueueMessageMenuValue>): RenderedLine[];
+    renderSdkMenu(width: number, menu: PopupMenu<PixMenuItem<unknown>>, request: {
+        options: PixMenuOptions;
+    } | undefined, directQuery: string): RenderedLine[];
+    private hasPopupActionItems;
+    private labelDescriptionText;
+    private userMessageActionForeground;
+    private selectableItemVariant;
+    private thinkingMenuItemSegments;
+    private modelMenuItemSegments;
+    private modelMenuItemColor;
+    private availableThinkingLevels;
+    private queueMessageItemVariant;
+    private sdkItemVariant;
+    private sdkMenuItemSegments;
+    private itemHighlightSegments;
+    private highlightSegments;
+    private descriptionHighlightSegments;
+    private resumeMenuItemSegments;
+    private popupMenuHeader;
+    private popupLineForeground;
+    private popupLineBackground;
+}
+export declare function formatPopupMenuHeader(title: string, width: number): string;