pi-ui-extend 1.0.8 → 1.0.10

package/dist/app/extensions/extension-ui-controller.js

@@ -394,16 +394,14 @@ export class ExtensionUiController {
         if (!this.host.isRunning())
             return undefined;
         const scopeKey = this.normalizeScopeKey(options.scopeKey);
-        if (!this.isScopeActive(scopeKey))
-            return undefined;
         if (this.activeCustomUis.has(scopeKey))
             throw new Error("Another extension custom UI is already active.");
-        const savedInput = options.savedInput ?? this.host.getInput();
+        const savedInput = options.savedInput ?? (this.isScopeActive(scopeKey) ? this.host.getInput() : undefined);
         return await new Promise((resolve, reject) => {
             const active = {
                 key: CUSTOM_UI_WIDGET_KEY,
                 scopeKey,
-                savedInput,
+                ...(savedInput === undefined ? {} : { savedInput }),
                 settled: false,
                 resolve: (value) => resolve(value),
                 reject,
@@ -414,20 +412,17 @@ export class ExtensionUiController {
             const done = (value) => {
                 if (active.settled || this.activeCustomUis.get(scopeKey) !== active)
                     return;
-                this.finishActiveCustomUi(active, this.isScopeActive(scopeKey) ? value : undefined, { resolve: true });
+                this.finishActiveCustomUi(active, value, { resolve: true });
             };
             void (async () => {
                 try {
                     const component = await factory(this.widgetTuiHandle(scopeKey), this.createExtensionTheme(), {}, done);
-                    if (active.settled || this.activeCustomUis.get(scopeKey) !== active || !this.isScopeActive(scopeKey)) {
+                    if (active.settled || this.activeCustomUis.get(scopeKey) !== active) {
                         component.dispose?.();
-                        if (!active.settled && this.activeCustomUis.get(scopeKey) === active) {
-                            this.finishActiveCustomUi(active, undefined, { resolve: true });
-                        }
                         return;
                     }
                     active.component = component;
-                    if (this.host.isRunning())
+                    if (this.host.isRunning() && this.isScopeActive(scopeKey))
                         this.host.render();
                 }
                 catch (error) {
@@ -454,8 +449,9 @@ export class ExtensionUiController {
             return;
         active.settled = true;
         this.activeCustomUis.delete(active.scopeKey);
-        if (this.isScopeActive(active.scopeKey) && this.host.getInput() !== active.savedInput)
+        if (this.isScopeActive(active.scopeKey) && active.savedInput !== undefined && this.host.getInput() !== active.savedInput) {
             this.host.setInput(active.savedInput);
+        }
         try {
             active.component?.dispose?.();
         }
@@ -479,7 +475,10 @@ export class ExtensionUiController {
         const scopeKey = this.activeScopeKey();
         if (!this.isScopeActive(scopeKey))
             return undefined;
-        return this.activeCustomUis.get(scopeKey);
+        const active = this.activeCustomUis.get(scopeKey);
+        if (active && active.savedInput === undefined)
+            active.savedInput = this.host.getInput();
+        return active;
     }
     isScopeActive(scopeKey) {
         return this.host.isExtensionUiScopeActive?.(scopeKey) ?? this.activeScopeKey() === scopeKey;

package/dist/app/rendering/tool-block-renderer.js

@@ -1,4 +1,5 @@
 import { resolveColor } from "../../config.js";
+import { renderMarkdownLine } from "../../markdown-format.js";
 import { expandTabs, sliceByDisplayWidth, stringDisplayWidth, wrapDisplayLineByWords } from "../../terminal-width.js";
 import { alertIconPrefixLength, hasToolLspDiagnosticsAfterMutation, lspDiagnosticSeverityForLine, sanitizeText, toolStatusIcon, toolStatusIconColor, wrapLine } from "./render-text.js";
 import { APP_ICONS } from "../icons.js";
@@ -234,9 +235,16 @@ function renderToolBodyLines(text, width, target, color, style, colors, syntaxHi
         const lspDiagnosticStyle = hasLspDiagnostics ? lspDiagnosticLineStyle(displayLine, colors) : undefined;
         const bodyLineStyle = bodyLineStyleForLine(bodyLineStyles, absoluteRawLineIndex, colors);
         const lineSyntaxHighlight = syntaxHighlightForLine(syntaxHighlight, absoluteRawLineIndex);
+        const markdownLine = lineSyntaxHighlight?.language === "markdown"
+            ? renderMarkdownLine(displayLine, lineSyntaxHighlight.startColumn ?? 0)
+            : undefined;
+        const syntaxDisplayLine = markdownLine?.text ?? displayLine;
         const wrappedLines = ansiLine && !diffStyle && !lspDiagnosticStyle && !bodyLineStyle && !lineSyntaxHighlight
             ? wrapAnsiStyledDisplayLine(ansiLine, bodyWidth)
-            : wrapBodyLine(displayLine, bodyWidth).map((wrapped) => ({ text: wrapped, segments: [] }));
+            : wrapBodyLine(syntaxDisplayLine, bodyWidth).map((wrapped) => ({ text: wrapped, segments: [] }));
+        const wrappedSourceRanges = lineSyntaxHighlight && wrappedLines.length > 1
+            ? sourceRangesForWrappedLines(syntaxDisplayLine, wrappedLines.map((line) => line.text))
+            : [];
         for (const [wrapIndex, wrapped] of wrappedLines.entries()) {
             const line = {
                 text: `${displayPrefix}${wrapped.text}`,
@@ -271,9 +279,33 @@ function renderToolBodyLines(text, width, target, color, style, colors, syntaxHi
             }
             else if (lineSyntaxHighlight) {
                 const rawStart = wrapIndex === 0 ? lineSyntaxHighlight.startColumn ?? 0 : 0;
-                line.syntaxHighlight = { language: lineSyntaxHighlight.language, start: Math.min(line.text.length, displayPrefix.length + rawStart) };
-                if (gutterSegment)
-                    line.segments = [gutterSegment];
+                const sourceRange = wrappedSourceRanges[wrapIndex];
+                const markdownSegments = sourceRange
+                    ? markdownLine?.segments.flatMap((segment) => shiftStyledSegmentToRange(segment, sourceRange)) ?? []
+                    : markdownLine?.segments ?? [];
+                line.syntaxHighlight = {
+                    language: lineSyntaxHighlight.language,
+                    start: Math.min(line.text.length, displayPrefix.length + rawStart),
+                    ...(sourceRange ? {
+                        context: {
+                            text: syntaxDisplayLine,
+                            rangeStart: sourceRange.start,
+                            rangeEnd: sourceRange.end,
+                            renderStart: displayPrefix.length,
+                            syntaxStart: lineSyntaxHighlight.startColumn ?? 0,
+                        },
+                    } : {}),
+                };
+                const syntaxSegments = [
+                    ...(gutterSegment ? [gutterSegment] : []),
+                    ...markdownSegments.map((segment) => ({
+                        ...segment,
+                        start: segment.start + displayPrefix.length,
+                        end: segment.end + displayPrefix.length,
+                    })),
+                ];
+                if (syntaxSegments.length > 0)
+                    line.segments = syntaxSegments;
             }
             else if (wrapped.segments.length > 0) {
                 line.segments = [
@@ -302,6 +334,25 @@ function renderToolBodyLines(text, width, target, color, style, colors, syntaxHi
     }
     return lines;
 }
+function shiftStyledSegmentToRange(segment, range) {
+    const start = Math.max(segment.start, range.start);
+    const end = Math.min(segment.end, range.end);
+    if (end <= start)
+        return [];
+    return [{ ...segment, start: start - range.start, end: end - range.start }];
+}
+function sourceRangesForWrappedLines(text, wrappedLines) {
+    const ranges = [];
+    let cursor = 0;
+    for (const wrapped of wrappedLines) {
+        const found = text.indexOf(wrapped, cursor);
+        const start = found === -1 ? cursor : found;
+        const end = Math.min(text.length, start + wrapped.length);
+        ranges.push({ start, end });
+        cursor = end;
+    }
+    return ranges;
+}
 const ANSI_STANDARD_COLORS = ["#000000", "#cd3131", "#0dbc79", "#e5e510", "#2472c8", "#bc3fbc", "#11a8cd", "#e5e5e5"];
 const ANSI_BRIGHT_COLORS = ["#666666", "#f14c4c", "#23d18b", "#f5f543", "#3b8eea", "#d670d6", "#29b8db", "#e5e5e5"];
 function sanitizeToolBodyText(text, preserveAnsi) {

package/dist/app/screen/screen-styler.js

@@ -16,7 +16,7 @@ export class ScreenStyler {
             ...(line?.backgroundOverride === undefined ? {} : { background: line.backgroundOverride }),
         };
         const colors = this.host.theme.colors;
-        const markdownLine = line?.syntaxHighlight?.language === "markdown"
+        const markdownLine = line?.syntaxHighlight?.language === "markdown" && !line.syntaxHighlight.context
             ? renderMarkdownDisplayLine(line.text, width, line.syntaxHighlight.start)
             : undefined;
         const text = markdownLine?.text ?? line?.text ?? "";

package/dist/bundled-extensions/question/index.js

@@ -18,7 +18,7 @@ export default function questionExtension(pi) {
             if (!ctx.hasUI)
                 return createQuestionToolResult(createCanceledQuestionResult("ui_unavailable", questions), questions);
             const selections = await runQuestionnaire(questions, ctx);
-            if (selections === null)
+            if (selections == null)
                 return createQuestionToolResult(createCanceledQuestionResult("user_canceled"), questions);
             return createQuestionToolResult(createSuccessfulQuestionResult(questions, selections), questions);
         },

package/dist/bundled-extensions/question/tui.d.ts

@@ -1,2 +1,2 @@
 import type { NormalizedQuestion, QuestionSelection, QuestionUiContext } from "./types.js";
-export declare function runQuestionnaire(questions: NormalizedQuestion[], ctx: QuestionUiContext): Promise<QuestionSelection[] | null>;
+export declare function runQuestionnaire(questions: NormalizedQuestion[], ctx: QuestionUiContext): Promise<QuestionSelection[] | null | undefined>;

package/dist/bundled-extensions/question/types.d.ts

@@ -61,7 +61,7 @@ export interface QuestionToolResult {
 export interface QuestionUiContext {
     hasUI?: boolean;
     ui: {
-        custom<T>(factory: (tui: QuestionTui, theme: QuestionTheme, keybindings: unknown, done: (value: T) => void) => QuestionComponent): Promise<T>;
+        custom<T>(factory: (tui: QuestionTui, theme: QuestionTheme, keybindings: unknown, done: (value: T) => void) => QuestionComponent): Promise<T | undefined>;
         setEditorText?(text: string): void;
         getEditorText?(): string;
         notify?(message: string, level: "info" | "warning" | "error"): void;

package/dist/markdown-format.d.ts

@@ -9,6 +9,8 @@ export type RenderedMarkdownLine = {
         bold: true;
     }[];
     heading?: boolean;
+    sourceStart?: number;
+    sourceEnd?: number;
 };
 export type RenderedMarkdownTextLine = {
     text: string;

package/dist/markdown-format.js

@@ -84,13 +84,26 @@ export function renderMarkdownTextLines(text, width, start = 0, options = {}) {
         const syntaxHighlight = markdownLineSyntaxHighlight(fence, Boolean(opensFence || closesFence), start);
         const isHeadingLine = !fence && /^\s{0,3}#{1,6}\s/.test(rawLine);
         const markdownLine = syntaxHighlight?.language === "markdown" || isHeadingLine ? renderMarkdownLine(rawLine) : undefined;
-        for (const wrapped of wrapRenderedMarkdownLine(markdownLine ?? { text: rawLine, segments: [] }, width, options)) {
+        const logicalLine = markdownLine ?? { text: rawLine, segments: [] };
+        for (const wrapped of wrapRenderedMarkdownLine(logicalLine, width, options)) {
+            const wrappedSyntaxHighlight = syntaxHighlight && wrapped.sourceStart !== undefined && wrapped.sourceEnd !== undefined
+                ? {
+                    ...syntaxHighlight,
+                    context: {
+                        text: logicalLine.text,
+                        rangeStart: wrapped.sourceStart,
+                        rangeEnd: wrapped.sourceEnd,
+                        renderStart: start,
+                        syntaxStart: 0,
+                    },
+                }
+                : syntaxHighlight;
             lines.push({
                 text: wrapped.text,
                 ...(wrapped.copyText === undefined ? {} : { copyText: wrapped.copyText }),
                 ...(wrapped.continuesOnNextLine ? { continuesOnNextLine: true } : {}),
                 ...(wrapped.segments.length > 0 ? { segments: wrapped.segments } : {}),
-                ...(syntaxHighlight ? { syntaxHighlight } : {}),
+                ...(wrappedSyntaxHighlight ? { syntaxHighlight: wrappedSyntaxHighlight } : {}),
                 ...(isHeadingLine ? { heading: true } : {}),
             });
         }
@@ -133,6 +146,8 @@ function wrapRenderedMarkdownLine(line, width, options) {
         copyText: line.text.slice(range.start, ranges[index + 1]?.start ?? range.end),
         ...(index < ranges.length - 1 ? { continuesOnNextLine: true } : {}),
         segments: line.segments.flatMap((segment) => shiftSegmentToRange(segment, range.start, range.end)),
+        sourceStart: range.start,
+        sourceEnd: range.end,
     }));
 }
 function wrapDisplayLineByWordsWithRanges(text, width, options) {

package/dist/syntax-highlight.d.ts

@@ -3,6 +3,18 @@ export type SyntaxHighlightLanguage = "c" | "cpp" | "csharp" | "css" | "go" | "h
 export type SyntaxLineHighlight = {
     language: SyntaxHighlightLanguage;
     start: number;
+    context?: SyntaxHighlightContext;
+};
+export type SyntaxHighlightContext = {
+    /** Complete logical line, before it was soft-wrapped for display. */
+    text: string;
+    /** Source range represented by this visual line. */
+    rangeStart: number;
+    rangeEnd: number;
+    /** Visual column where rangeStart is rendered. */
+    renderStart: number;
+    /** Source column where syntax parsing begins. */
+    syntaxStart: number;
 };
 export type ToolBodySyntaxHighlight = {
     language: SyntaxHighlightLanguage;

package/dist/syntax-highlight.js

@@ -112,12 +112,32 @@ export function syntaxHighlightLanguageForMarkdownFence(info) {
     return MARKDOWN_FENCE_LANGUAGES[token];
 }
 export function syntaxHighlightSegmentsForLine(text, highlight, colors) {
+    if (highlight.context)
+        return contextualSyntaxSegments(highlight.language, highlight.context, colors);
     const start = Math.max(0, Math.min(text.length, highlight.start));
     if (start >= text.length)
         return [];
     const segments = localSyntaxSegments(text.slice(start), highlight.language, colors);
     return segments.map((segment) => ({ ...segment, start: segment.start + start, end: segment.end + start }));
 }
+function contextualSyntaxSegments(language, context, colors) {
+    const syntaxStart = Math.max(0, Math.min(context.text.length, context.syntaxStart));
+    const rangeStart = Math.max(0, Math.min(context.text.length, context.rangeStart));
+    const rangeEnd = Math.max(rangeStart, Math.min(context.text.length, context.rangeEnd));
+    const segments = localSyntaxSegments(context.text.slice(syntaxStart), language, colors)
+        .map((segment) => ({ ...segment, start: segment.start + syntaxStart, end: segment.end + syntaxStart }));
+    return segments.flatMap((segment) => {
+        const start = Math.max(segment.start, rangeStart);
+        const end = Math.min(segment.end, rangeEnd);
+        if (end <= start)
+            return [];
+        return [{
+                ...segment,
+                start: context.renderStart + start - rangeStart,
+                end: context.renderStart + end - rangeStart,
+            }];
+    });
+}
 function localSyntaxSegments(code, language, colors) {
     switch (language) {
         case "css":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ui-extend",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Pix: a workspace-first terminal UI for Pi with tabs, readable tool activity, voice input, and bundled agent tools.",
   "private": false,
   "repository": {