gsd-pi 2.74.0 → 2.75.0-dev.063e5a3

package/packages/pi-coding-agent/dist/modes/interactive/components/chat-frame.d.ts

@@ -0,0 +1,11 @@
+import { type TimestampFormat } from "./timestamp.js";
+type FrameTone = "assistant" | "user" | "compaction";
+export declare function renderChatFrame(contentLines: string[], width: number, opts: {
+    label: string;
+    tone: FrameTone;
+    timestamp?: number;
+    timestampFormat: TimestampFormat;
+    showTimestamp?: boolean;
+}): string[];
+export {};
+//# sourceMappingURL=chat-frame.d.ts.map

package/packages/pi-coding-agent/dist/modes/interactive/components/chat-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-frame.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/chat-frame.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEvE,KAAK,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,CAAC;AAUrD,wBAAgB,eAAe,CAC9B,YAAY,EAAE,MAAM,EAAE,EACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE;IACL,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,GACC,MAAM,EAAE,CAkDV"}

package/packages/pi-coding-agent/dist/modes/interactive/components/chat-frame.js

@@ -0,0 +1,53 @@
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+import { formatTimestamp } from "./timestamp.js";
+function trimOuterBlankLines(lines) {
+    let start = 0;
+    let end = lines.length;
+    while (start < end && lines[start].trim().length === 0)
+        start++;
+    while (end > start && lines[end - 1].trim().length === 0)
+        end--;
+    return lines.slice(start, end);
+}
+export function renderChatFrame(contentLines, width, opts) {
+    const outerWidth = Math.max(20, width);
+    const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+    const borderColor = opts.tone === "user"
+        ? "borderAccent"
+        : opts.tone === "compaction"
+            ? "customMessageLabel"
+            : "border";
+    const borderMuted = opts.tone === "compaction" ? "customMessageLabel" : "borderMuted";
+    const border = (s) => theme.fg(borderColor, s);
+    const leftRaw = `• ${opts.label}`;
+    const rightRaw = opts.showTimestamp === false || !opts.timestamp
+        ? ""
+        : formatTimestamp(opts.timestamp, opts.timestampFormat);
+    const leftBudget = rightRaw
+        ? Math.max(1, outerWidth - visibleWidth(rightRaw) - 1)
+        : outerWidth;
+    const left = truncateToWidth(leftRaw, leftBudget, "");
+    const leftStyled = opts.tone === "user"
+        ? theme.fg("accent", theme.bold(left))
+        : opts.tone === "compaction"
+            ? theme.fg("customMessageLabel", theme.bold(left))
+            : theme.fg("muted", theme.bold(left));
+    const rightStyled = rightRaw ? theme.fg("dim", rightRaw) : "";
+    const gap = rightRaw.length > 0
+        ? Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled))
+        : Math.max(0, outerWidth - visibleWidth(leftStyled));
+    const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
+    const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+    const sourceLines = trimOuterBlankLines(contentLines);
+    const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
+        const clipped = truncateToWidth(line, contentWidth, "");
+        return border("│ ") + clipped;
+    });
+    return [
+        theme.fg(borderMuted, "─".repeat(outerWidth)),
+        headerRow + " ".repeat(headerPad),
+        ...bodyLines,
+    ];
+}
+//# sourceMappingURL=chat-frame.js.map

package/packages/pi-coding-agent/dist/modes/interactive/components/chat-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-frame.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/chat-frame.ts"],"names":[],"mappings":"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","sourcesContent":["import { truncateToWidth, visibleWidth } from \"@gsd/pi-tui\";\nimport { theme } from \"../theme/theme.js\";\nimport { formatTimestamp, type TimestampFormat } from \"./timestamp.js\";\n\ntype FrameTone = \"assistant\" | \"user\" | \"compaction\";\n\nfunction trimOuterBlankLines(lines: string[]): string[] {\n\tlet start = 0;\n\tlet end = lines.length;\n\twhile (start < end && lines[start].trim().length === 0) start++;\n\twhile (end > start && lines[end - 1].trim().length === 0) end--;\n\treturn lines.slice(start, end);\n}\n\nexport function renderChatFrame(\n\tcontentLines: string[],\n\twidth: number,\n\topts: {\n\t\tlabel: string;\n\t\ttone: FrameTone;\n\t\ttimestamp?: number;\n\t\ttimestampFormat: TimestampFormat;\n\t\tshowTimestamp?: boolean;\n\t},\n): string[] {\n\tconst outerWidth = Math.max(20, width);\n\tconst contentWidth = Math.max(1, outerWidth - 2); // \"│ \" + content\n\tconst borderColor =\n\t\topts.tone === \"user\"\n\t\t\t? \"borderAccent\"\n\t\t\t: opts.tone === \"compaction\"\n\t\t\t\t? \"customMessageLabel\"\n\t\t\t\t: \"border\";\n\tconst borderMuted =\n\t\topts.tone === \"compaction\" ? \"customMessageLabel\" : \"borderMuted\";\n\tconst border = (s: string) => theme.fg(borderColor, s);\n\tconst leftRaw = `• ${opts.label}`;\n\tconst rightRaw =\n\t\topts.showTimestamp === false || !opts.timestamp\n\t\t\t? \"\"\n\t\t\t: formatTimestamp(opts.timestamp, opts.timestampFormat);\n\n\tconst leftBudget = rightRaw\n\t\t? Math.max(1, outerWidth - visibleWidth(rightRaw) - 1)\n\t\t: outerWidth;\n\tconst left = truncateToWidth(leftRaw, leftBudget, \"\");\n\tconst leftStyled =\n\t\topts.tone === \"user\"\n\t\t\t? theme.fg(\"accent\", theme.bold(left))\n\t\t\t: opts.tone === \"compaction\"\n\t\t\t\t? theme.fg(\"customMessageLabel\", theme.bold(left))\n\t\t\t\t: theme.fg(\"muted\", theme.bold(left));\n\tconst rightStyled = rightRaw ? theme.fg(\"dim\", rightRaw) : \"\";\n\tconst gap =\n\t\trightRaw.length > 0\n\t\t\t? Math.max(\n\t\t\t\t\t1,\n\t\t\t\t\touterWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled),\n\t\t\t\t)\n\t\t\t: Math.max(0, outerWidth - visibleWidth(leftStyled));\n\tconst headerRow = `${leftStyled}${\" \".repeat(gap)}${rightStyled}`;\n\tconst headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));\n\n\tconst sourceLines = trimOuterBlankLines(contentLines);\n\tconst bodyLines = (sourceLines.length > 0 ? sourceLines : [\"\"]).map((line) => {\n\t\tconst clipped = truncateToWidth(line, contentWidth, \"\");\n\t\treturn border(\"│ \") + clipped;\n\t});\n\n\treturn [\n\t\ttheme.fg(borderMuted, \"─\".repeat(outerWidth)),\n\t\theaderRow + \" \".repeat(headerPad),\n\t\t...bodyLines,\n\t];\n}\n"]}

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.d.ts

@@ -1,16 +1,19 @@
-import { Box, type MarkdownTheme } from "@gsd/pi-tui";
+import { Container, type MarkdownTheme } from "@gsd/pi-tui";
 import type { CompactionSummaryMessage } from "../../../core/messages.js";
 /**
- * Component that renders a compaction message with collapsed/expanded state.
- * Uses same background color as custom messages for visual consistency.
+ * Renders a compaction notice in the shared chat-frame style (top rule,
+ * `• compaction` header, `│ ` body margin) with purple border/label so it
+ * visually matches the other framed messages (user / assistant / tool
+ * execution) while standing apart from the conversation flow.
  */
-export declare class CompactionSummaryMessageComponent extends Box {
+export declare class CompactionSummaryMessageComponent extends Container {
     private expanded;
     private message;
     private markdownTheme;
     constructor(message: CompactionSummaryMessage, markdownTheme?: MarkdownTheme);
     setExpanded(expanded: boolean): void;
     invalidate(): void;
-    private updateDisplay;
+    private rebuild;
+    render(width: number): string[];
 }
 //# sourceMappingURL=compaction-summary-message.d.ts.map

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compaction-summary-message.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAY,KAAK,aAAa,EAAgB,MAAM,aAAa,CAAC;AAC9E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAI1E;;;GAGG;AACH,qBAAa,iCAAkC,SAAQ,GAAG;IACzD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,EAAE,wBAAwB,EAAE,aAAa,GAAE,aAAkC;IAOhG,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAK3B,UAAU,IAAI,IAAI;IAK3B,OAAO,CAAC,aAAa;CA2BrB"}
+{"version":3,"file":"compaction-summary-message.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,aAAa,EAAQ,MAAM,aAAa,CAAC;AAC5E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAK1E;;;;;GAKG;AACH,qBAAa,iCAAkC,SAAQ,SAAS;IAC/D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,aAAa,CAAgB;gBAGpC,OAAO,EAAE,wBAAwB,EACjC,aAAa,GAAE,aAAkC;IAQlD,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAO3B,UAAU,IAAI,IAAI;IAK3B,OAAO,CAAC,OAAO;IA4BN,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAYxC"}

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.js

@@ -1,32 +1,34 @@
-import { Box, Markdown, Spacer, Text } from "@gsd/pi-tui";
+import { Container, Markdown, Text } from "@gsd/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { renderChatFrame } from "./chat-frame.js";
 import { editorKey } from "./keybinding-hints.js";
 /**
- * Component that renders a compaction message with collapsed/expanded state.
- * Uses same background color as custom messages for visual consistency.
+ * Renders a compaction notice in the shared chat-frame style (top rule,
+ * `• compaction` header, `│ ` body margin) with purple border/label so it
+ * visually matches the other framed messages (user / assistant / tool
+ * execution) while standing apart from the conversation flow.
  */
-export class CompactionSummaryMessageComponent extends Box {
+export class CompactionSummaryMessageComponent extends Container {
     constructor(message, markdownTheme = getMarkdownTheme()) {
-        super(1, 1, (t) => theme.bg("customMessageBg", t));
+        super();
         this.expanded = false;
         this.message = message;
         this.markdownTheme = markdownTheme;
-        this.updateDisplay();
+        this.rebuild();
     }
     setExpanded(expanded) {
-        this.expanded = expanded;
-        this.updateDisplay();
+        if (this.expanded !== expanded) {
+            this.expanded = expanded;
+            this.rebuild();
+        }
     }
     invalidate() {
         super.invalidate();
-        this.updateDisplay();
+        this.rebuild();
     }
-    updateDisplay() {
+    rebuild() {
         this.clear();
         const tokenStr = this.message.tokensBefore.toLocaleString();
-        const label = theme.fg("customMessageLabel", theme.bold("[compaction]"));
-        this.addChild(new Text(label, 0, 0));
-        this.addChild(new Spacer(1));
         if (this.expanded) {
             const header = `**Compacted from ${tokenStr} tokens**\n\n`;
             this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
@@ -39,5 +41,17 @@ export class CompactionSummaryMessageComponent extends Box {
                 theme.fg("customMessageText", " to expand)"), 0, 0));
         }
     }
+    render(width) {
+        const frameWidth = Math.max(20, width);
+        const contentWidth = Math.max(1, frameWidth - 4);
+        const lines = super.render(contentWidth);
+        const framed = renderChatFrame(lines, frameWidth, {
+            label: "compaction",
+            tone: "compaction",
+            timestampFormat: "date-time-iso",
+            showTimestamp: false,
+        });
+        return framed.length > 0 ? ["", ...framed] : framed;
+    }
 }
 //# sourceMappingURL=compaction-summary-message.js.map

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"compaction-summary-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAsB,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;GAGG;AACH,MAAM,OAAO,iCAAkC,SAAQ,GAAG;IAKzD,YAAY,OAAiC,EAAE,gBAA+B,gBAAgB,EAAE;QAC/F,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;QAL5C,aAAQ,GAAG,KAAK,CAAC;QAMxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,WAAW,CAAC,QAAiB;QAC5B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEQ,UAAU;QAClB,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEO,aAAa;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;QAC5D,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,oBAAoB,QAAQ,eAAe,CAAC;YAC3D,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE;gBACrE,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC;aAC5D,CAAC,CACF,CAAC;QACH,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,CACZ,IAAI,IAAI,CACP,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,QAAQ,WAAW,CAAC;gBACnE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;gBACzC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAC7C,CAAC,EACD,CAAC,CACD,CACD,CAAC;QACH,CAAC;IACF,CAAC;CACD","sourcesContent":["import { Box, Markdown, type MarkdownTheme, Spacer, Text } from \"@gsd/pi-tui\";\nimport type { CompactionSummaryMessage } from \"../../../core/messages.js\";\nimport { getMarkdownTheme, theme } from \"../theme/theme.js\";\nimport { editorKey } from \"./keybinding-hints.js\";\n\n/**\n * Component that renders a compaction message with collapsed/expanded state.\n * Uses same background color as custom messages for visual consistency.\n */\nexport class CompactionSummaryMessageComponent extends Box {\n\tprivate expanded = false;\n\tprivate message: CompactionSummaryMessage;\n\tprivate markdownTheme: MarkdownTheme;\n\n\tconstructor(message: CompactionSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {\n\t\tsuper(1, 1, (t) => theme.bg(\"customMessageBg\", t));\n\t\tthis.message = message;\n\t\tthis.markdownTheme = markdownTheme;\n\t\tthis.updateDisplay();\n\t}\n\n\tsetExpanded(expanded: boolean): void {\n\t\tthis.expanded = expanded;\n\t\tthis.updateDisplay();\n\t}\n\n\toverride invalidate(): void {\n\t\tsuper.invalidate();\n\t\tthis.updateDisplay();\n\t}\n\n\tprivate updateDisplay(): void {\n\t\tthis.clear();\n\n\t\tconst tokenStr = this.message.tokensBefore.toLocaleString();\n\t\tconst label = theme.fg(\"customMessageLabel\", theme.bold(\"[compaction]\"));\n\t\tthis.addChild(new Text(label, 0, 0));\n\t\tthis.addChild(new Spacer(1));\n\n\t\tif (this.expanded) {\n\t\t\tconst header = `**Compacted from ${tokenStr} tokens**\\n\\n`;\n\t\t\tthis.addChild(\n\t\t\t\tnew Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {\n\t\t\t\t\tcolor: (text: string) => theme.fg(\"customMessageText\", text),\n\t\t\t\t}),\n\t\t\t);\n\t\t} else {\n\t\t\tthis.addChild(\n\t\t\t\tnew Text(\n\t\t\t\t\ttheme.fg(\"customMessageText\", `Compacted from ${tokenStr} tokens (`) +\n\t\t\t\t\t\ttheme.fg(\"dim\", editorKey(\"expandTools\")) +\n\t\t\t\t\t\ttheme.fg(\"customMessageText\", \" to expand)\"),\n\t\t\t\t\t0,\n\t\t\t\t\t0,\n\t\t\t\t),\n\t\t\t);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"compaction-summary-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsB,IAAI,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,OAAO,iCAAkC,SAAQ,SAAS;IAK/D,YACC,OAAiC,EACjC,gBAA+B,gBAAgB,EAAE;QAEjD,KAAK,EAAE,CAAC;QARD,aAAQ,GAAG,KAAK,CAAC;QASxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,QAAiB;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;IACF,CAAC;IAEQ,UAAU;QAClB,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAEO,OAAO;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,oBAAoB,QAAQ,eAAe,CAAC;YAC3D,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE;gBACrE,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC;aAC5D,CAAC,CACF,CAAC;QACH,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,CACZ,IAAI,IAAI,CACP,KAAK,CAAC,EAAE,CACP,mBAAmB,EACnB,kBAAkB,QAAQ,WAAW,CACrC;gBACA,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;gBACzC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAC7C,CAAC,EACD,CAAC,CACD,CACD,CAAC;QACH,CAAC;IACF,CAAC;IAEQ,MAAM,CAAC,KAAa;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE;YACjD,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,YAAY;YAClB,eAAe,EAAE,eAAe;YAChC,aAAa,EAAE,KAAK;SACpB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACrD,CAAC;CACD","sourcesContent":["import { Container, Markdown, type MarkdownTheme, Text } from \"@gsd/pi-tui\";\nimport type { CompactionSummaryMessage } from \"../../../core/messages.js\";\nimport { getMarkdownTheme, theme } from \"../theme/theme.js\";\nimport { renderChatFrame } from \"./chat-frame.js\";\nimport { editorKey } from \"./keybinding-hints.js\";\n\n/**\n * Renders a compaction notice in the shared chat-frame style (top rule,\n * `• compaction` header, `│ ` body margin) with purple border/label so it\n * visually matches the other framed messages (user / assistant / tool\n * execution) while standing apart from the conversation flow.\n */\nexport class CompactionSummaryMessageComponent extends Container {\n\tprivate expanded = false;\n\tprivate message: CompactionSummaryMessage;\n\tprivate markdownTheme: MarkdownTheme;\n\n\tconstructor(\n\t\tmessage: CompactionSummaryMessage,\n\t\tmarkdownTheme: MarkdownTheme = getMarkdownTheme(),\n\t) {\n\t\tsuper();\n\t\tthis.message = message;\n\t\tthis.markdownTheme = markdownTheme;\n\t\tthis.rebuild();\n\t}\n\n\tsetExpanded(expanded: boolean): void {\n\t\tif (this.expanded !== expanded) {\n\t\t\tthis.expanded = expanded;\n\t\t\tthis.rebuild();\n\t\t}\n\t}\n\n\toverride invalidate(): void {\n\t\tsuper.invalidate();\n\t\tthis.rebuild();\n\t}\n\n\tprivate rebuild(): void {\n\t\tthis.clear();\n\n\t\tconst tokenStr = this.message.tokensBefore.toLocaleString();\n\n\t\tif (this.expanded) {\n\t\t\tconst header = `**Compacted from ${tokenStr} tokens**\\n\\n`;\n\t\t\tthis.addChild(\n\t\t\t\tnew Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {\n\t\t\t\t\tcolor: (text: string) => theme.fg(\"customMessageText\", text),\n\t\t\t\t}),\n\t\t\t);\n\t\t} else {\n\t\t\tthis.addChild(\n\t\t\t\tnew Text(\n\t\t\t\t\ttheme.fg(\n\t\t\t\t\t\t\"customMessageText\",\n\t\t\t\t\t\t`Compacted from ${tokenStr} tokens (`,\n\t\t\t\t\t) +\n\t\t\t\t\t\ttheme.fg(\"dim\", editorKey(\"expandTools\")) +\n\t\t\t\t\t\ttheme.fg(\"customMessageText\", \" to expand)\"),\n\t\t\t\t\t0,\n\t\t\t\t\t0,\n\t\t\t\t),\n\t\t\t);\n\t\t}\n\t}\n\n\toverride render(width: number): string[] {\n\t\tconst frameWidth = Math.max(20, width);\n\t\tconst contentWidth = Math.max(1, frameWidth - 4);\n\t\tconst lines = super.render(contentWidth);\n\t\tconst framed = renderChatFrame(lines, frameWidth, {\n\t\t\tlabel: \"compaction\",\n\t\t\ttone: \"compaction\",\n\t\t\ttimestampFormat: \"date-time-iso\",\n\t\t\tshowTimestamp: false,\n\t\t});\n\t\treturn framed.length > 0 ? [\"\", ...framed] : framed;\n\t}\n}\n"]}

package/packages/pi-coding-agent/dist/modes/interactive/components/tool-execution.d.ts

@@ -60,6 +60,14 @@ export declare class ToolExecutionComponent extends Container {
         details?: any;
         isError: boolean;
     }, isPartial?: boolean): void;
+    /**
+     * Mark a tool call as historical when replaying from session context and
+     * no matching tool result is available. Happens after compaction squashes
+     * tool_result messages out of history — the tool call block survives but
+     * the result is gone. Without this, the component stays in "Running" state
+     * forever even though the tool completed long ago.
+     */
+    markHistoricalNoResult(): void;
     /**
      * Finalize a pending tool call as failed/interrupted while preserving any streamed partial output.
      */

package/packages/pi-coding-agent/dist/modes/interactive/components/tool-execution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-execution.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/tool-execution.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,SAAS,EAOT,KAAK,GAAG,EAER,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AA8FxE,MAAM,WAAW,oBAAoB;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAS;IACpD,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,IAAI,CAAM;IAClB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,MAAM,CAAC,CAIb;IAEF,OAAO,CAAC,eAAe,CAAC,CAAiC;IACzD,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,eAAe,CAA8D;IAGrF,OAAO,CAAC,uBAAuB,CAA2C;IAE1E,OAAO,CAAC,mBAAmB,CAAC,CAAsB;IAElD,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,kBAAkB,GAE7B;gBAGA,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,oBAAoB,YAAK,EAClC,cAAc,EAAE,cAAc,GAAG,SAAS,EAC1C,EAAE,EAAE,GAAG,EACP,GAAG,GAAE,MAAsB;IA2B5B;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAOhC,OAAO,IAAI,IAAI;IASf,UAAU,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAQ3B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,8BAA8B;IAkBtC,OAAO,CAAC,oCAAoC;IAyD5C;;;OAGG;IACH,eAAe,IAAI,IAAI;IAWvB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IA6B5B,YAAY,CACX,MAAM,EAAE;QACP,OAAO,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAClF,OAAO,CAAC,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KACjB,EACD,SAAS,UAAQ,GACf,IAAI;IAeP;;OAEG;IACH,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAoBzC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA2BlC,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAKzB,UAAU,IAAI,IAAI;IAKlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAOxC,OAAO,CAAC,aAAa;IAiJrB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA+EzB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,mBAAmB;CAoX3B"}
+{"version":3,"file":"tool-execution.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/tool-execution.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,SAAS,EAOT,KAAK,GAAG,EAGR,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AA6IxE,MAAM,WAAW,oBAAoB;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAS;IACpD,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,IAAI,CAAM;IAClB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,MAAM,CAAC,CAIb;IAEF,OAAO,CAAC,eAAe,CAAC,CAAiC;IACzD,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,eAAe,CAA8D;IAGrF,OAAO,CAAC,uBAAuB,CAA2C;IAE1E,OAAO,CAAC,mBAAmB,CAAC,CAAsB;IAElD,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,kBAAkB,GAE7B;gBAGA,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,oBAAoB,YAAK,EAClC,cAAc,EAAE,cAAc,GAAG,SAAS,EAC1C,EAAE,EAAE,GAAG,EACP,GAAG,GAAE,MAAsB;IA2B5B;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAOhC,OAAO,IAAI,IAAI;IASf,UAAU,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAQ3B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,8BAA8B;IAkBtC,OAAO,CAAC,oCAAoC;IAyD5C;;;OAGG;IACH,eAAe,IAAI,IAAI;IAWvB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IA6B5B,YAAY,CACX,MAAM,EAAE;QACP,OAAO,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAClF,OAAO,CAAC,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KACjB,EACD,SAAS,UAAQ,GACf,IAAI;IAeP;;;;;;OAMG;IACH,sBAAsB,IAAI,IAAI;IAU9B;;OAEG;IACH,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAoBzC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA2BlC,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAKzB,UAAU,IAAI,IAAI;IAKlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAsBxC,OAAO,CAAC,aAAa;IA6IrB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA+EzB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,mBAAmB;CAoX3B"}

package/packages/pi-coding-agent/dist/modes/interactive/components/tool-execution.js

@@ -1,4 +1,4 @@
-import { Box, Container, getCapabilities, Image, imageFallback, Spacer, Text, truncateToWidth, } from "@gsd/pi-tui";
+import { Box, Container, getCapabilities, Image, imageFallback, Spacer, Text, truncateToWidth, visibleWidth, } from "@gsd/pi-tui";
 import stripAnsi from "strip-ansi";
 import { computeEditDiff } from "../../../core/tools/edit-diff.js";
 import { allTools } from "../../../core/tools/index.js";
@@ -51,6 +51,39 @@ function parseMcpToolName(name) {
         return null;
     return { server: rest.slice(0, delim), tool: rest.slice(delim + 2) };
 }
+function trimOuterBlankLines(lines) {
+    let start = 0;
+    let end = lines.length;
+    while (start < end && lines[start].trim().length === 0)
+        start++;
+    while (end > start && lines[end - 1].trim().length === 0)
+        end--;
+    return lines.slice(start, end);
+}
+function renderToolFrame(contentLines, width, opts) {
+    const outerWidth = Math.max(20, width);
+    const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+    const borderColor = opts.tone === "error" ? "error" : "toolTitle";
+    const topColor = opts.tone === "error" ? "error" : "toolTitle";
+    const labelColor = opts.tone === "error" ? "error" : "toolTitle";
+    const statusColor = opts.tone === "error" ? "error" : opts.tone === "pending" ? "warning" : "success";
+    const border = (s) => theme.fg(borderColor, s);
+    const leftStyled = theme.fg(labelColor, theme.bold(`• ${opts.label}`));
+    const rightStyled = theme.fg(statusColor, opts.status);
+    const gap = Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
+    const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
+    const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+    const sourceLines = trimOuterBlankLines(contentLines);
+    const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
+        const clipped = truncateToWidth(line, contentWidth, "");
+        return border("│ ") + clipped;
+    });
+    return [
+        theme.fg(topColor, "─".repeat(outerWidth)),
+        headerRow + " ".repeat(headerPad),
+        ...bodyLines,
+    ];
+}
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
@@ -293,6 +326,23 @@ export class ToolExecutionComponent extends Container {
         // Convert non-PNG images to PNG for Kitty protocol (async)
         this.maybeConvertImagesForKitty();
     }
+    /**
+     * Mark a tool call as historical when replaying from session context and
+     * no matching tool result is available. Happens after compaction squashes
+     * tool_result messages out of history — the tool call block survives but
+     * the result is gone. Without this, the component stays in "Running" state
+     * forever even though the tool completed long ago.
+     */
+    markHistoricalNoResult() {
+        if (this.result)
+            return; // real result already set, nothing to do
+        this.isPartial = false;
+        this.result = {
+            content: [],
+            isError: false,
+        };
+        this.updateDisplay();
+    }
     /**
      * Finalize a pending tool call as failed/interrupted while preserving any streamed partial output.
      */
@@ -364,15 +414,25 @@ export class ToolExecutionComponent extends Container {
         if (this.hideComponent) {
             return [];
         }
-        return super.render(width);
+        const frameWidth = Math.max(20, width);
+        const contentWidth = Math.max(1, frameWidth - 4);
+        const lines = super.render(contentWidth);
+        const frameTone = this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
+        const frameStatus = this.isPartial || !this.result ? "Running" : this.result.isError ? "Error" : "Done";
+        const parsed = parseMcpToolName(this.toolName);
+        const frameLabel = parsed
+            ? `Tool ${parsed.server}·${parsed.tool}`
+            : `Tool ${this.normalizedToolName || this.toolName || "unknown"}`;
+        const framed = renderToolFrame(lines, frameWidth, {
+            label: frameLabel,
+            status: frameStatus,
+            tone: frameTone,
+        });
+        return framed.length > 0 ? ["", ...framed] : framed;
     }
     updateDisplay() {
-        // Set background based on state
-        const bgFn = this.isPartial
-            ? (text) => theme.bg("toolPendingBg", text)
-            : this.result?.isError
-                ? (text) => theme.bg("toolErrorBg", text)
-                : (text) => theme.bg("toolSuccessBg", text);
+        // Tool body now uses transparent background; status is conveyed in the frame header.
+        const bgFn = (text) => text;
         const useBuiltInRenderer = this.shouldUseBuiltInRenderer();
         let customRendererHasContent = false;
         this.hideComponent = false;