pi-ui-extend 0.1.1

package/dist/app/editor-layout-renderer.js

@@ -0,0 +1,211 @@
+import { ABOVE_EDITOR_WIDGET_KEY_GROUPS, BUILT_IN_SUBAGENTS_WIDGET_KEYS, INPUT_MAX_ROWS, LEGACY_TODO_WIDGET_KEYS, } from "./constants.js";
+import { renderSubagentsPanel, renderTodoPanel } from "./editor-panels.js";
+import { ellipsizeDisplay, horizontalPaddingLayout, padHorizontalText, sanitizeText } from "./render-text.js";
+import { APP_ICONS } from "./icons.js";
+const INPUT_FRAME_VERTICAL = "│";
+export class EditorLayoutRenderer {
+    host;
+    constructor(host) {
+        this.host = host;
+    }
+    computeLayout(width, rows) {
+        const maxAvailableInputRows = Math.max(1, rows - 5);
+        const renderedInput = this.renderInput(width, Math.min(INPUT_MAX_ROWS, maxAvailableInputRows), maxAvailableInputRows);
+        const maxEntityRows = Math.max(0, rows - renderedInput.lines.length - 4);
+        const framedEntityWidth = inputFrameContentWidth(width);
+        const aboveEditorEntities = this.renderAboveEditorEntities(framedEntityWidth);
+        let aboveEditorLines = this.limitEntityLines(aboveEditorEntities.lines, maxEntityRows);
+        if (aboveEditorEntities.hasWidgets && aboveEditorLines.length < maxEntityRows) {
+            aboveEditorLines = [...aboveEditorLines, { text: "", variant: "normal" }];
+        }
+        const belowEditorLines = this.limitEntityLines(this.renderExtensionWidgets("belowEditor", framedEntityWidth), maxEntityRows - aboveEditorLines.length);
+        const inputBottomSeparatorRow = rows - 1;
+        const belowEditorStartRow = inputBottomSeparatorRow - belowEditorLines.length;
+        const inputStartRow = belowEditorStartRow - renderedInput.lines.length;
+        const inputSeparatorRow = inputStartRow - aboveEditorLines.length - 1;
+        return {
+            renderedInput,
+            aboveEditorLines,
+            belowEditorLines,
+            inputStartRow,
+            inputSeparatorRow,
+            inputBottomSeparatorRow,
+            bodyHeight: Math.max(0, inputSeparatorRow - 1),
+        };
+    }
+    renderWidgetRegistration(widget, width) {
+        try {
+            const lines = Array.isArray(widget.content)
+                ? widget.content
+                : this.renderWidgetComponent(widget, width);
+            return lines.map((line) => ({ text: line, variant: "normal" }));
+        }
+        catch (error) {
+            return [{ text: `${widget.key}: widget render failed: ${String(error)}`, variant: "error" }];
+        }
+    }
+    renderWidgetComponent(widget, width) {
+        const content = widget.content;
+        if (typeof content !== "function")
+            return [...content];
+        const component = widget.component ?? content(this.host.widgetTuiHandle(), this.host.createExtensionTheme());
+        widget.component = component;
+        return component.render(width);
+    }
+    renderAboveEditorEntities(width) {
+        const todoPanelLines = renderTodoPanel(this.host.todoDetails, this.host.todoPanelExpanded, width, this.host.theme.colors);
+        const hasBuiltInTodoPanel = todoPanelLines.length > 0;
+        const subagentsPanelLines = renderSubagentsPanel(this.host.subagentsWidgetState, this.host.subagentsPanelExpanded, width, this.host.theme.colors);
+        const hasBuiltInSubagentsPanel = subagentsPanelLines.length > 0;
+        const lines = [...todoPanelLines, ...subagentsPanelLines];
+        let hasWidgets = lines.length > 0;
+        const consumedWidgetKeys = new Set();
+        for (const widgetKeys of ABOVE_EDITOR_WIDGET_KEY_GROUPS) {
+            const slotLines = [];
+            for (const key of widgetKeys) {
+                if (hasBuiltInTodoPanel && LEGACY_TODO_WIDGET_KEYS.has(key)) {
+                    consumedWidgetKeys.add(key);
+                    this.host.suppressExtensionWidget(key);
+                    continue;
+                }
+                if (hasBuiltInSubagentsPanel && BUILT_IN_SUBAGENTS_WIDGET_KEYS.has(key)) {
+                    consumedWidgetKeys.add(key);
+                    this.host.suppressExtensionWidget(key);
+                    continue;
+                }
+                const widget = this.host.extensionWidgets.get(key);
+                if (!widget || widget.placement !== "aboveEditor")
+                    continue;
+                consumedWidgetKeys.add(key);
+                const widgetLines = this.renderWidgetRegistration(widget, width);
+                if (widgetLines.length > 0)
+                    hasWidgets = true;
+                slotLines.push(...widgetLines);
+            }
+            lines.push(...slotLines);
+        }
+        for (const widget of this.host.extensionWidgets.values()) {
+            if (widget.placement !== "aboveEditor" || consumedWidgetKeys.has(widget.key))
+                continue;
+            if (hasBuiltInTodoPanel && LEGACY_TODO_WIDGET_KEYS.has(widget.key)) {
+                this.host.suppressExtensionWidget(widget.key);
+                continue;
+            }
+            if (hasBuiltInSubagentsPanel && BUILT_IN_SUBAGENTS_WIDGET_KEYS.has(widget.key)) {
+                this.host.suppressExtensionWidget(widget.key);
+                continue;
+            }
+            const widgetLines = this.renderWidgetRegistration(widget, width);
+            if (widgetLines.length > 0)
+                hasWidgets = true;
+            lines.push(...widgetLines);
+        }
+        lines.push(...this.renderVoicePartial(width));
+        return { lines, hasWidgets };
+    }
+    renderVoicePartial(width) {
+        const partial = this.host.voicePartialText?.trim();
+        if (!partial)
+            return [];
+        const { left, contentWidth } = horizontalPaddingLayout(width);
+        const text = ellipsizeDisplay(`${APP_ICONS.microphone} ${sanitizeText(partial)}`, contentWidth);
+        return [{
+                text: padHorizontalText(text, width),
+                variant: "muted",
+                segments: [{ start: left, end: left + APP_ICONS.microphone.length, foreground: this.host.theme.colors.error }],
+            }];
+    }
+    renderExtensionWidgets(placement, width) {
+        const lines = [];
+        for (const widget of this.host.extensionWidgets.values()) {
+            if (widget.placement !== placement)
+                continue;
+            lines.push(...this.renderWidgetRegistration(widget, width));
+        }
+        return lines;
+    }
+    limitEntityLines(lines, maxRows) {
+        if (maxRows <= 0)
+            return [];
+        if (lines.length <= maxRows)
+            return [...lines];
+        const hidden = lines.length - maxRows + 1;
+        return [
+            ...lines.slice(0, Math.max(0, maxRows - 1)),
+            { text: `… +${hidden} more UI rows`, variant: "muted" },
+        ];
+    }
+    renderInput(width, normalMaxRows, extensionMaxRows) {
+        const { left, contentWidth } = horizontalPaddingLayout(width);
+        const extensionLines = this.host.renderExtensionInputComponent(contentWidth);
+        const hasExtensionInput = extensionLines !== undefined;
+        const usesEditor = !hasExtensionInput || this.host.extensionInputUsesEditor();
+        const maxRows = hasExtensionInput ? extensionMaxRows : normalMaxRows;
+        const customLines = hasExtensionInput
+            ? this.limitExtensionInputLines(extensionLines, Math.max(0, maxRows - (usesEditor ? 1 : 0)))
+            : [];
+        const editorMaxRows = usesEditor ? Math.max(1, maxRows - customLines.length) : 1;
+        const rendered = this.host.inputEditor.render(contentWidth, editorMaxRows, "", "");
+        const visibleLines = rendered.visualLines.slice(rendered.scrollOffset, rendered.scrollOffset + editorMaxRows);
+        const scrollBar = usesEditor
+            ? inputScrollBarMetrics(rendered.visualLines.length, visibleLines.length, rendered.scrollOffset)
+            : undefined;
+        const editorLines = usesEditor ? visibleLines.map((vl) => frameInputLine(padHorizontalText(vl.text, width))) : [];
+        const editorTagSpans = usesEditor
+            ? visibleLines.map((vl) => vl.tagSpans.map((span) => ({
+                start: span.start + left,
+                end: span.end + left,
+            })))
+            : [];
+        const paddedCustomLines = customLines.map((line) => frameInputLine(padHorizontalText(line, width)));
+        return {
+            lines: [...paddedCustomLines, ...editorLines],
+            cursorRowOffset: customLines.length + rendered.cursorVisualRow - rendered.scrollOffset,
+            cursorColumn: Math.min(width, left + rendered.cursorScreenCol),
+            cursorVisible: usesEditor && rendered.cursorVisible,
+            scrollOffset: rendered.scrollOffset,
+            totalLineCount: rendered.visualLines.length,
+            visibleRowCount: visibleLines.length,
+            scrollBar,
+            editorStartRowOffset: customLines.length,
+            tagSpans: [
+                ...paddedCustomLines.map(() => []),
+                ...editorTagSpans,
+            ],
+        };
+    }
+    limitExtensionInputLines(lines, maxRows) {
+        if (maxRows <= 0)
+            return [];
+        if (lines.length <= maxRows)
+            return [...lines];
+        const hidden = lines.length - maxRows + 1;
+        return [
+            ...lines.slice(0, Math.max(0, maxRows - 1)),
+            `… +${hidden} more UI rows`,
+        ];
+    }
+}
+function frameInputLine(line) {
+    if (line.length <= 0)
+        return line;
+    if (line.length === 1)
+        return INPUT_FRAME_VERTICAL;
+    return `${INPUT_FRAME_VERTICAL}${line.slice(1, -1)}${INPUT_FRAME_VERTICAL}`;
+}
+function inputFrameContentWidth(width) {
+    return Math.max(1, width - 2);
+}
+function inputScrollBarMetrics(totalLineCount, visibleRowCount, scrollOffset) {
+    if (visibleRowCount <= 0 || totalLineCount <= visibleRowCount)
+        return undefined;
+    const thumbSize = Math.max(1, Math.min(visibleRowCount, Math.round((visibleRowCount * visibleRowCount) / totalLineCount)));
+    const travel = Math.max(0, visibleRowCount - thumbSize);
+    const maxScroll = Math.max(0, totalLineCount - visibleRowCount);
+    const thumbOffset = travel === 0 ? 0 : Math.round((scrollOffset / maxScroll) * travel);
+    return {
+        top: thumbOffset,
+        height: thumbSize,
+        trackHeight: visibleRowCount,
+    };
+}

package/dist/app/editor-panels.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from "../theme.js";
+import type { RenderedLine, SubagentsWidgetState, TodoDetails } from "./types.js";
+export declare function renderTodoPanel(details: TodoDetails | undefined, expanded: boolean, width: number, colors: Theme["colors"]): RenderedLine[];
+export declare function renderSubagentsPanel(state: SubagentsWidgetState | undefined, expanded: boolean, width: number, colors: Theme["colors"]): RenderedLine[];

package/dist/app/editor-panels.js

@@ -0,0 +1,130 @@
+import { stringDisplayWidth } from "../terminal-width.js";
+import { SUBAGENTS_WIDGET_MAX_ROWS } from "./constants.js";
+import { ellipsizeDisplay, padOrTrimPlain, wrapLine } from "./render-text.js";
+import { activeSubagentStates, formatElapsedSince, formatSubagentsPanelStats, subagentModelThinkingLabel, subagentRunName, subagentStatusIcon, taskPreviewMap, } from "./subagents-model.js";
+import { formatTodoPanelStats, formatTodoTaskLine, hasOpenTodoTasks, shiftSegmentsToSlice, todoTaskLineSegments, visibleTodoTaskRows, visibleTodoTasks, } from "./todo-model.js";
+export function renderTodoPanel(details, expanded, width, colors) {
+    if (!details)
+        return [];
+    const tasks = visibleTodoTasks(details);
+    if (tasks.length === 0)
+        return [];
+    if (!hasOpenTodoTasks(details))
+        return [];
+    const contentWidth = Math.max(1, width);
+    const target = { kind: "todo-panel" };
+    const activeTask = tasks.find((task) => task.status === "in_progress");
+    const stats = formatTodoPanelStats(tasks);
+    const headerText = `todos ${expanded ? "▾" : "▸"}${stats ? ` ${stats}` : ""}`;
+    const todoPanelColor = colors.warning;
+    const todoMetaColor = colors.muted;
+    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) => ({
+                ...segment,
+                start: segment.start + prefix.length,
+                end: segment.end + prefix.length,
+            }))
+            : undefined;
+        const line = {
+            text: padOrTrimPlain(ellipsizeDisplay(collapsedText, contentWidth), width),
+            colorOverride: todoPanelColor,
+            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 });
+        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,
+            });
+            start += wrapped.length;
+        }
+    }
+    return lines;
+}
+export function renderSubagentsPanel(state, expanded, width, colors) {
+    if (!state)
+        return [];
+    const activeAgents = activeSubagentStates(state.agents);
+    if (activeAgents.length === 0)
+        return [];
+    const target = { kind: "subagents-panel" };
+    const previewById = taskPreviewMap(state.tasks);
+    const runName = subagentRunName(state.runDir);
+    const titleSuffix = state.live ? "" : " (snapshot)";
+    const stats = formatSubagentsPanelStats(activeAgents);
+    const headerText = `subagents ${expanded ? "▾" : "▸"}${stats ? ` ${stats}` : ""}${titleSuffix}`;
+    const contentWidth = Math.max(1, width);
+    if (!expanded) {
+        const collapsedText = `${headerText} — ${runName}`;
+        return [{ text: padOrTrimPlain(ellipsizeDisplay(collapsedText, contentWidth), width), colorOverride: colors.accent, target }];
+    }
+    const lines = [];
+    const visibleAgents = activeAgents.slice(0, SUBAGENTS_WIDGET_MAX_ROWS);
+    const rowWidth = contentWidth;
+    const now = Date.now();
+    for (const agent of visibleAgents) {
+        const preview = previewById.get(agent.id);
+        const model = subagentModelThinkingLabel(preview);
+        const task = preview?.task?.trim() || preview?.scope?.trim() || "task unavailable";
+        const icon = subagentStatusIcon(agent.status);
+        const prefix = `${icon} ${agent.id} ${model} `;
+        const suffix = ` ${formatElapsedSince(agent.startedAt, now)}`;
+        const taskWidth = Math.max(8, rowWidth - stringDisplayWidth(prefix) - stringDisplayWidth(suffix));
+        const taskText = ellipsizeDisplay(task, taskWidth);
+        const text = `${prefix}${taskText}${suffix}`;
+        lines.push({
+            text: padOrTrimPlain(text, width),
+            colorOverride: colors.muted,
+            segments: subagentPanelLineSegments({ text, icon, agentId: agent.id, model, taskText, prefix, status: agent.status }, colors),
+            target,
+        });
+    }
+    const hidden = activeAgents.length - visibleAgents.length;
+    if (hidden > 0)
+        lines.push({ text: padOrTrimPlain(`+${hidden} more`, width), variant: "muted", target });
+    return lines;
+}
+function subagentPanelLineSegments(input, colors) {
+    const iconStart = input.text.indexOf(input.icon);
+    const nameStart = input.text.indexOf(input.agentId, iconStart + input.icon.length);
+    const modelStart = input.text.indexOf(input.model, nameStart + input.agentId.length);
+    const taskStart = input.prefix.length;
+    const suffixStart = taskStart + input.taskText.length;
+    return [
+        { start: iconStart, end: iconStart + input.icon.length, foreground: subagentStatusColor(input.status, colors), bold: true },
+        { start: nameStart, end: nameStart + input.agentId.length, foreground: colors.accent, bold: true },
+        { start: modelStart, end: modelStart + input.model.length, foreground: colors.info },
+        { start: taskStart, end: suffixStart, foreground: colors.muted },
+        { start: suffixStart, end: input.text.length, foreground: colors.muted },
+    ].filter((segment) => segment.start >= 0 && segment.end > segment.start);
+}
+function subagentStatusColor(status, colors) {
+    switch (status) {
+        case "planned":
+            return colors.muted;
+        case "running":
+            return colors.info;
+        case "retrying":
+            return colors.warning;
+        case "done":
+            return colors.success;
+        case "failed":
+            return colors.error;
+        case "stopped":
+            return colors.muted;
+    }
+}

package/dist/app/extension-actions-controller.d.ts

@@ -0,0 +1,22 @@
+import type { AgentSessionRuntime, ExtensionCommandContextActions, ExtensionError } from "@earendil-works/pi-coding-agent";
+import type { Entry } from "./types.js";
+export type AppExtensionActionsHost = {
+    isRunning(): boolean;
+    getInput(): string;
+    setInput(value: string): void;
+    resetSessionView(): void;
+    loadSessionHistory(): void;
+    afterSessionReplacement(message?: string): void;
+    addEntry(entry: Entry): void;
+    setStatus(status: string): void;
+    setSessionStatus(runtime: AgentSessionRuntime["session"]): void;
+    showToast(message: string, kind: "success" | "error" | "warning" | "info"): void;
+    render(): void;
+};
+export declare class AppExtensionActionsController {
+    private readonly host;
+    constructor(host: AppExtensionActionsHost);
+    createCommandContextActions(runtime: AgentSessionRuntime): ExtensionCommandContextActions;
+    waitForSessionIdle(runtime: AgentSessionRuntime): Promise<void>;
+    handleExtensionError(error: ExtensionError): void;
+}

package/dist/app/extension-actions-controller.js

@@ -0,0 +1,60 @@
+import { createId } from "./id.js";
+export class AppExtensionActionsController {
+    host;
+    constructor(host) {
+        this.host = host;
+    }
+    createCommandContextActions(runtime) {
+        return {
+            waitForIdle: () => this.waitForSessionIdle(runtime),
+            newSession: async (options) => {
+                const result = await runtime.newSession(options);
+                if (!result.cancelled)
+                    this.host.afterSessionReplacement("Started a new session.");
+                return result;
+            },
+            fork: async (entryId, options) => {
+                const result = await runtime.fork(entryId, options);
+                if (!result.cancelled)
+                    this.host.afterSessionReplacement("Forked to a new session.");
+                return result;
+            },
+            navigateTree: async (targetId, options) => {
+                const result = await runtime.session.navigateTree(targetId, options);
+                if (!result.cancelled && !result.aborted) {
+                    this.host.resetSessionView();
+                    this.host.loadSessionHistory();
+                    if (result.editorText && !this.host.getInput().trim())
+                        this.host.setInput(result.editorText);
+                    this.host.setSessionStatus(runtime.session);
+                    this.host.render();
+                }
+                return result;
+            },
+            switchSession: async (sessionPath, options) => {
+                const result = await runtime.switchSession(sessionPath, options);
+                if (!result.cancelled)
+                    this.host.afterSessionReplacement(`Switched session: ${sessionPath}`);
+                return result;
+            },
+            reload: async () => {
+                await runtime.session.reload();
+                this.host.setSessionStatus(runtime.session);
+                this.host.showToast("Reloaded resources", "success");
+                this.host.render();
+            },
+        };
+    }
+    async waitForSessionIdle(runtime) {
+        while (runtime.session.isStreaming || runtime.session.isCompacting) {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        }
+    }
+    handleExtensionError(error) {
+        const pathText = error.extensionPath ? ` (${error.extensionPath})` : "";
+        this.host.addEntry({ id: createId("error"), kind: "error", text: `Extension ${error.event} failed${pathText}: ${error.error}` });
+        this.host.showToast(`Extension ${error.event} failed`, "error");
+        if (this.host.isRunning())
+            this.host.render();
+    }
+}

package/dist/app/extension-event-bus.d.ts

@@ -0,0 +1,3 @@
+import type { EventBus } from "@earendil-works/pi-coding-agent";
+export type ExtensionEventForwarder = (channel: string, data: unknown) => void;
+export declare function createIsolatedExtensionEventBus(forwardEmit?: ExtensionEventForwarder): EventBus;

package/dist/app/extension-event-bus.js

@@ -0,0 +1,23 @@
+import { EventEmitter } from "node:events";
+export function createIsolatedExtensionEventBus(forwardEmit) {
+    const emitter = new EventEmitter();
+    emitter.setMaxListeners(0);
+    return {
+        emit: (channel, data) => {
+            emitter.emit(channel, data);
+            forwardEmit?.(channel, data);
+        },
+        on: (channel, handler) => {
+            const safeHandler = async (data) => {
+                try {
+                    await handler(data);
+                }
+                catch (error) {
+                    console.error(`Event handler error (${channel}):`, error);
+                }
+            };
+            emitter.on(channel, safeHandler);
+            return () => emitter.off(channel, safeHandler);
+        },
+    };
+}

package/dist/app/extension-ui-controller.d.ts

@@ -0,0 +1,57 @@
+import { type Theme } from "../theme.js";
+import { type ToastKind, type ToastNotifier } from "../ui.js";
+import type { Entry, ExtensionInputMouseEvent, ExtensionWidgetRegistration, ExtensionWidgetTheme, PixExtensionUIContext, PixMenuController, WidgetPlacement, WidgetTuiHandle } from "./types.js";
+export type ExtensionTerminalInputResult = {
+    consume: boolean;
+    data?: string;
+};
+export type ExtensionUiControllerHost = {
+    readonly theme: Theme;
+    isRunning(): boolean;
+    render(): void;
+    showToast(message: string, kind?: ToastKind): void;
+    readonly toastNotifier: ToastNotifier;
+    readonly menuController: PixMenuController;
+    setStatus(status: string): void;
+    restoreSessionStatus(): void;
+    setInput(value: string): void;
+    getInput(): string;
+    readonly entries: readonly Entry[];
+    deleteConversationEntry(entryId: string): void;
+};
+export declare class ExtensionUiController {
+    private readonly host;
+    private readonly extensionWidgets;
+    private readonly terminalInputHandlers;
+    private activeCustomUi;
+    private readonly aboveInputRenderer;
+    constructor(host: ExtensionUiControllerHost);
+    get widgets(): ReadonlyMap<string, ExtensionWidgetRegistration>;
+    createExtensionTheme(): ExtensionWidgetTheme;
+    setWidget(key: string, content: unknown, options?: {
+        placement?: WidgetPlacement;
+    }): void;
+    clearWidgets(): void;
+    suppressWidget(key: string): void;
+    handleTerminalInput(data: string): ExtensionTerminalInputResult;
+    renderActiveCustomUi(width: number): string[] | undefined;
+    activeCustomUiUsesEditor(): boolean;
+    handleCustomUiMouse(event: ExtensionInputMouseEvent): boolean;
+    widgetTuiHandle(): WidgetTuiHandle;
+    createExtensionUIContext(): PixExtensionUIContext;
+    private setAboveInputWidget;
+    private clearAboveInputWidget;
+    private selectDialog;
+    private confirmDialog;
+    private inputDialog;
+    private editorDialog;
+    private editorBackedDialog;
+    private renderEditorBackedDialog;
+    private dialogLine;
+    private withDialogAutoDismiss;
+    private showCustomUi;
+    private cancelActiveCustomUi;
+    private rejectActiveCustomUi;
+    private finishActiveCustomUi;
+    private invalidateWidget;
+}