@hheei/pi-ext-ui 0.5.2 → 0.6.0

package/dist/tool-group-view.js

@@ -0,0 +1,458 @@
+import { Container, MouseRegion, Spacer, Text, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+import { fitRow } from "@hheei/pi-ext-core";
+import { formatDurationMs } from "./payload-parser.js";
+import { formatToolHeaderText, isCollapsible, renderWithoutToolRails, } from "./tool-view.js";
+function formatElapsed(milliseconds) {
+    const total = Math.max(0, Math.floor(milliseconds / 1000));
+    const seconds = total % 60;
+    const minutes = Math.floor(total / 60) % 60;
+    const hours = Math.floor(total / 3600);
+    if (hours > 0)
+        return `${hours}h ${String(minutes).padStart(2, "0")}m ${String(seconds).padStart(2, "0")}s`;
+    if (minutes > 0)
+        return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+    return `${seconds}s`;
+}
+/** The same decimal steps the Pi footer uses, so two places never disagree about a token count. */
+function formatTokens(count) {
+    if (count < 1000)
+        return String(count);
+    if (count < 10_000)
+        return `${(count / 1000).toFixed(1)}k`;
+    if (count < 1_000_000)
+        return `${String(Math.round(count / 1000))}k`;
+    if (count < 10_000_000)
+        return `${(count / 1_000_000).toFixed(1)}M`;
+    return `${String(Math.round(count / 1_000_000))}M`;
+}
+function cacheHitRate(latest, cacheTotal) {
+    if (latest === undefined || cacheTotal <= 0)
+        return "—";
+    const prompt = latest.input + latest.cacheRead + latest.cacheWrite;
+    if (prompt <= 0)
+        return "—";
+    return `${((latest.cacheRead / prompt) * 100).toFixed(1).replace(/\.0$/, "")}%`;
+}
+function preview(text) {
+    return text.split("\n").find((line) => line.trim() !== "");
+}
+/**
+ * The collapsed frame of one activity block.
+ *
+ * The frame owns only layout and hit testing: tool rows keep their own component so their glyph,
+ * colors, copy action, and fold level stay the ones the transcript already draws. Anything this
+ * view synthesized itself would drift from those rows.
+ */
+export class ToolGroupView extends Container {
+    #header = new Text("", 0, 0);
+    #ui;
+    #redraw;
+    #run;
+    #members = [];
+    #settled = false;
+    #raw = false;
+    #category;
+    #item;
+    #renderedExpanded = false;
+    #hits = [];
+    constructor(ui, redraw, run) {
+        super();
+        this.#ui = ui;
+        this.#redraw = redraw;
+        this.#run = run;
+        const heading = new MouseRegion(this.#header, (event) => {
+            if (event.type !== "click" || event.button !== "left")
+                return undefined;
+            this.#toggleRaw();
+            return { handled: true, render: true };
+        });
+        const body = {
+            render: (width) => this.#renderBody(width),
+            handleMouse: (event) => this.#hit(event),
+            invalidate() { },
+        };
+        this.children = [new Spacer(1), heading, body];
+    }
+    #toggleRaw() {
+        this.#raw = this.#ui.getToolsExpanded() ? false : !this.#raw;
+        if (this.#raw) {
+            this.#category = undefined;
+            this.#item = undefined;
+            for (const member of this.#members) {
+                if (isCollapsible(member.component))
+                    member.component.collapseAll();
+            }
+        }
+        this.#redraw();
+    }
+    /**
+     * The footer names work in progress: the latest top-level call that is still active, or the last
+     * one started when none is. Arrival order of partial updates must not decide it.
+     */
+    #tailIndex() {
+        let last = -1;
+        let active = -1;
+        for (const [index, member] of this.#members.entries()) {
+            if (member.kind !== "tool")
+                continue;
+            last = index;
+            if (member.status === "running" || member.status === "streaming")
+                active = index;
+        }
+        return active === -1 ? last : active;
+    }
+    #historyTools(tailIndex) {
+        // The footer slot shows the tail only while the block runs; once it carries the request
+        // totals the tail belongs to the list, or its call would disappear from the block.
+        const tail = this.#settled ? -1 : tailIndex;
+        const indices = [];
+        for (const [index, member] of this.#members.entries()) {
+            if (member.kind === "tool" && index !== tail)
+                indices.push(index);
+        }
+        return indices;
+    }
+    #thinkingItems() {
+        return this.#members.filter((member) => (member.thinkingChars ?? 0) > 0);
+    }
+    #noticeItems() {
+        return this.#members.filter((member) => member.kind === "notice");
+    }
+    #calls() {
+        let total = 0;
+        for (const member of this.#members) {
+            if (member.kind !== "tool")
+                continue;
+            // The count is a fact the tool reports; a bounded child list must not lower it.
+            total += member.childCount ?? (member.children === undefined ? 1 : member.children.length);
+        }
+        return total;
+    }
+    #usage() {
+        let requests = 0;
+        let input = 0;
+        let output = 0;
+        let cacheTotal = 0;
+        let latest;
+        for (const member of this.#members) {
+            if (member.kind !== "assistant")
+                continue;
+            requests += 1;
+            if (member.usage === undefined)
+                continue;
+            input += member.usage.input;
+            output += member.usage.output;
+            cacheTotal += member.usage.cacheRead + member.usage.cacheWrite;
+            latest = member.usage;
+        }
+        return { requests, input, output, cacheTotal, latest };
+    }
+    /** The block footer: the whole block's request and token totals, fixed under the body. */
+    #footerRow() {
+        const theme = this.#ui.theme;
+        const usage = this.#usage();
+        const input = usage.latest === undefined ? "—" : formatTokens(usage.input);
+        const output = usage.latest === undefined ? "—" : formatTokens(usage.output);
+        const parts = [
+            `Requests ×${usage.requests}`,
+            `IN ${input}`,
+            `OUT ${output}`,
+            `CH ${cacheHitRate(usage.latest, usage.cacheTotal)}`,
+        ];
+        return theme.fg("dim", parts.join(" · "));
+    }
+    #categoryRow(category, label, detail) {
+        const theme = this.#ui.theme;
+        const pin = `${theme.fg("dim", this.#category === category ? "▾" : "▸")} `;
+        const tail = detail === "" ? "" : `${theme.fg("dim", " · ")}${theme.fg("dim", detail)}`;
+        return `${pin}${theme.fg("muted", label)}${tail}`;
+    }
+    #renderBody(width) {
+        if (this.#renderedExpanded)
+            return this.#renderRaw(width);
+        return this.#renderFrame(width);
+    }
+    #renderRaw(width) {
+        const theme = this.#ui.theme;
+        const rail = theme.fg("muted", "─".repeat(Math.max(0, width)));
+        const lines = [rail];
+        const hits = [{ height: 1, action: { kind: "none" } }];
+        for (const member of this.#members) {
+            const wrapper = this.#offsetWrapper(member.component);
+            const rows = renderWithoutToolRails(wrapper, Math.max(1, width));
+            if (rows.length === 0)
+                continue;
+            hits.push({ height: rows.length, action: { kind: "member", wrapper } });
+            for (const row of rows)
+                lines.push(fitRow(row, Math.max(0, width), "…"));
+        }
+        lines.push(rail);
+        hits.push({ height: 1, action: { kind: "none" } });
+        this.#hits = hits;
+        return lines;
+    }
+    /** Header, rails, the three categories, and the read-only tail; every row is one terminal row. */
+    #renderFrame(width) {
+        const theme = this.#ui.theme;
+        const lines = [];
+        const hits = [];
+        const push = (row, action = { kind: "none" }) => {
+            lines.push(fitRow(row, Math.max(0, width), "…"));
+            hits.push({ height: 1, action });
+        };
+        /** Rows that belong to one component keep one hit so its own geometry stays correct. */
+        const pushBlock = (rows, action) => {
+            if (rows.length === 0)
+                return;
+            for (const row of rows)
+                lines.push(fitRow(row, Math.max(0, width), "…"));
+            hits.push({ height: rows.length, action });
+        };
+        const rail = theme.fg("muted", "─".repeat(Math.max(0, width)));
+        const tailIndex = this.#tailIndex();
+        const tools = this.#historyTools(tailIndex);
+        push(rail);
+        const notices = this.#noticeItems();
+        if (notices.length > 0) {
+            const kinds = new Map();
+            for (const member of notices) {
+                const kind = member.title ?? "notice";
+                kinds.set(kind, (kinds.get(kind) ?? 0) + 1);
+            }
+            const detail = [...kinds].map(([kind, count]) => `${kind} ×${count}`).join(" · ");
+            push(this.#categoryRow("notices", "notice", detail), {
+                kind: "category",
+                category: "notices",
+            });
+            if (this.#category === "notices")
+                this.#renderNotices(notices, width, push);
+        }
+        const thinking = this.#thinkingItems();
+        if (thinking.length > 0) {
+            const tokens = Math.ceil(thinking.reduce((sum, member) => sum + (member.thinkingChars ?? 0), 0) / 4);
+            push(this.#categoryRow("thinking", "thinking", `${String(tokens)} tokens`), {
+                kind: "category",
+                category: "thinking",
+            });
+            if (this.#category === "thinking")
+                this.#renderThinking(thinking, width, push);
+        }
+        const counts = new Map();
+        for (const index of tools) {
+            const member = this.#members[index];
+            if (member === undefined)
+                continue;
+            if (member.children === undefined) {
+                if (member.title !== undefined)
+                    counts.set(member.title, (counts.get(member.title) ?? 0) + 1);
+                continue;
+            }
+            for (const child of member.children)
+                counts.set(child.title, (counts.get(child.title) ?? 0) + 1);
+        }
+        if (counts.size > 0) {
+            const names = [...counts]
+                .map(([name, count]) => `${theme.fg("toolTitle", theme.bold(name))} ${theme.fg("dim", `×${count}`)}`)
+                .join(theme.fg("dim", " · "));
+            push(this.#categoryRow("tools", names, ""), {
+                kind: "category",
+                category: "tools",
+            });
+            if (this.#category === "tools")
+                this.#renderTools(theme, tools, width, push, pushBlock);
+        }
+        push(rail);
+        // One footer slot: the running tail while the block is live, the block totals once it settles.
+        const tail = this.#members[tailIndex];
+        if (this.#settled)
+            push(this.#footerRow());
+        else if (tail !== undefined && tail.title !== undefined) {
+            push(formatToolHeaderText({ status: tail.status, title: tail.title }, theme));
+        }
+        this.#hits = hits;
+        return lines;
+    }
+    /** Every tool at its own level 0, one blank row between calls. */
+    #renderTools(theme, tools, width, push, pushBlock) {
+        let first = true;
+        const separate = () => {
+            if (!first)
+                push("");
+            first = false;
+        };
+        for (const memberIndex of tools) {
+            const member = this.#members[memberIndex];
+            if (member === undefined)
+                continue;
+            if (member.children === undefined) {
+                const wrapper = this.#offsetWrapper(member.component);
+                separate();
+                // One hit for the whole tool: its own rows carry the header, copy slot, and fold state.
+                pushBlock(renderWithoutToolRails(wrapper, Math.max(1, width)), {
+                    kind: "member",
+                    wrapper,
+                });
+                continue;
+            }
+            for (const [index, child] of member.children.entries()) {
+                separate();
+                const open = this.#item?.member === member.component && this.#item.child === index;
+                // The container's own row already reads `summary · duration`; a child listed in the
+                // group must read the same, or the same call looks different in the two views.
+                const summary = [child.summary ?? "", formatDurationMs(child.durationMs)]
+                    .filter((part) => part !== "")
+                    .join(" · ");
+                push(`${theme.fg("dim", open ? "▾" : "▸")} ${formatToolHeaderText({ status: child.status, title: child.title, summary }, theme)}`, { kind: "item", member: member.component, child: index });
+                if (!open || child.detail === undefined)
+                    continue;
+                for (const row of this.#detailRows(child.detail, width))
+                    push(row);
+            }
+        }
+    }
+    /** One thinking block per assistant turn: a label row, one preview row, and the text on demand. */
+    #renderThinking(thinking, width, push) {
+        const theme = this.#ui.theme;
+        let first = true;
+        for (const member of thinking) {
+            if (!first)
+                push("");
+            first = false;
+            const open = this.#item?.member === member.component;
+            const tokens = Math.ceil((member.thinkingChars ?? 0) / 4);
+            push(`${theme.fg("dim", open ? "▾" : "▸")} ${theme.fg("muted", "thinking")}${theme.fg("dim", ` · ${String(tokens)} tokens`)}`, { kind: "item", member: member.component });
+            const text = member.thinking;
+            if (text === undefined)
+                continue;
+            if (open) {
+                for (const row of this.#detailRows(text, width))
+                    push(row);
+                continue;
+            }
+            const line = preview(text);
+            if (line !== undefined)
+                push(`${theme.fg("dim", "▎")} ${theme.fg("thinkingText", line)}`);
+        }
+    }
+    /** Notices keep one row each and open their provider-rendered detail in place. */
+    #renderNotices(notices, width, push) {
+        const theme = this.#ui.theme;
+        for (const member of notices) {
+            const detail = member.detail;
+            const open = detail !== undefined && this.#item?.member === member.component;
+            const pin = detail === undefined ? "" : `${theme.fg("dim", open ? "▾" : "▸")} `;
+            push(`${pin}${member.summary ?? member.title ?? ""}`, detail === undefined ? { kind: "none" } : { kind: "item", member: member.component });
+            if (!open)
+                continue;
+            for (const row of detail(width))
+                push(row);
+        }
+    }
+    #hit(event) {
+        let y = event.y;
+        for (const hit of this.#hits) {
+            if (y >= hit.height) {
+                y -= hit.height;
+                continue;
+            }
+            const action = hit.action;
+            if (action.kind === "none")
+                return undefined;
+            if (event.type !== "click" || event.button !== "left")
+                return undefined;
+            if (action.kind === "category") {
+                const open = this.#category === action.category;
+                this.#category = open ? undefined : action.category;
+                this.#item = undefined;
+                this.#redraw();
+                return { handled: true, render: true };
+            }
+            if (action.kind === "item") {
+                const same = this.#item?.member === action.member && this.#item.child === action.child;
+                this.#item = same
+                    ? undefined
+                    : {
+                        member: action.member,
+                        ...(action.child === undefined ? {} : { child: action.child }),
+                    };
+                this.#redraw();
+                return { handled: true, render: true };
+            }
+            return action.wrapper.handleMouse?.({ ...event, y, height: hit.height });
+        }
+        return undefined;
+    }
+    /**
+     * The member's own rows without Pi's leading separator. Built only for a member the current frame
+     * actually draws, so a collapsed category allocates nothing for the rows it hides.
+     */
+    #offsetWrapper(component) {
+        let offset = 0;
+        return {
+            render(width) {
+                const rows = component.render(width);
+                // Pi adds one leading separator per tool; the group supplies its own spacing.
+                offset = rows[0] === "" ? 1 : 0;
+                return rows.slice(offset);
+            },
+            handleMouse(event) {
+                return component.handleMouse?.({
+                    ...event,
+                    y: event.y + offset,
+                    height: event.height + offset,
+                });
+            },
+            invalidate() { },
+        };
+    }
+    /**
+     * Expanded detail keeps its text. The user opened it to read it, so a line wider than the frame is
+     * wrapped to the width the indent leaves instead of being cut with an ellipsis.
+     */
+    #detailRows(text, width) {
+        const inner = Math.max(1, width - 2);
+        return text.split("\n").flatMap((line) => {
+            const wrapped = wrapTextWithAnsi(line, inner);
+            return (wrapped.length > 0 ? wrapped : [""]).map((row) => `  ${row}`);
+        });
+    }
+    update(members, settled) {
+        this.#members = members;
+        this.#settled = settled;
+        if (this.#item !== undefined && !members.some((m) => m.component === this.#item?.member))
+            this.#item = undefined;
+        if (this.#category === "thinking" && this.#thinkingItems().length === 0)
+            this.#category = undefined;
+        if (this.#category === "notices" && this.#noticeItems().length === 0)
+            this.#category = undefined;
+    }
+    invalidate() {
+        // Original chatContainer.invalidate invalidates original members exactly once; only the header
+        // text belongs to this view.
+        this.#header.invalidate();
+    }
+    render(width) {
+        const globalExpanded = this.#ui.getToolsExpanded();
+        if (globalExpanded) {
+            // The host's forced expansion owns the frame; closing it returns to a fully closed group.
+            // A raw view the user opened by hand must not outlive it, or closing Ctrl+O would leave the
+            // block expanded with no way back to the aggregate.
+            this.#raw = false;
+            this.#category = undefined;
+            this.#item = undefined;
+        }
+        this.#renderedExpanded = this.#raw || globalExpanded;
+        const theme = this.#ui.theme;
+        const calls = this.#calls();
+        const elapsed = this.#run === undefined
+            ? "—"
+            : formatElapsed((this.#run.endedAt ?? performance.now()) - this.#run.startedAt);
+        const details = [
+            theme.fg("muted", "collapse views"),
+            theme.fg("dim", elapsed),
+            theme.fg("dim", `${calls} ${calls === 1 ? "call" : "calls"}`),
+        ].join(theme.fg("dim", " · "));
+        this.#header.setText(fitRow(`${theme.fg("dim", this.#renderedExpanded ? "▾" : "▸")} ${details}`, Math.max(0, width), "…"));
+        return super.render(width);
+    }
+}

package/dist/tool-view.d.ts

@@ -23,11 +23,22 @@ export interface Collapsible {
     collapseAll(): void;
 }
 export declare function isCollapsible(value: unknown): value is Collapsible;
+/** One nested call inside a container, reduced to what a row and its detail need. */
+export interface ToolViewChild {
+    readonly title: string;
+    readonly summary?: string | undefined;
+    readonly status?: ToolStatusKind | undefined;
+    readonly durationMs?: number | undefined;
+    readonly detail?: string | undefined;
+}
 export interface ToolViewSpec {
     readonly theme: Theme;
     readonly header: ToolViewHeaderSpec;
     readonly collapsedRows?: readonly string[] | Component | (Component & Collapsible) | undefined;
     readonly sections?: readonly RailSection[] | undefined;
+    readonly children?: readonly ToolViewChild[] | undefined;
+    /** Nested calls the tool made, when the list above is only what fits. */
+    readonly childCount?: number | undefined;
     readonly collapsibleChildren?: readonly Collapsible[] | undefined;
     readonly copy?: ToolViewCopySpec | undefined;
     readonly stateHolder?: unknown;
@@ -87,6 +98,10 @@ export declare class ToolView implements Component {
     get collapsed(): boolean;
     /** Current semantic header, without fold/copy controls or body; hidden slots have no summary. */
     get summary(): string | undefined;
+    /** Nested calls this tool reported; a hidden slot reports none. */
+    get children(): readonly ToolViewChild[] | undefined;
+    /** How many nested calls the tool made, even when `children` lists only what fits. */
+    get childCount(): number | undefined;
     setFoldLevel(next: FoldLevel): void;
     setCollapsed(collapsed: boolean): void;
     toggle(ctrlKey?: boolean): void;

package/dist/tool-view.js

@@ -13,6 +13,7 @@ export function createToolView(spec) {
 }
 const FOLD_LEVEL_STATE_KEY = "__piExtUiFoldLevel";
 const COPIED_UNTIL_STATE_KEY = "__piExtUiCopiedUntil";
+const COPY_FAILED_STATE_KEY = "__piExtUiCopyFailed";
 const COPY_FEEDBACK_TIMER_KEY = "__piExtUiCopyTimer";
 const DEFAULT_MAX_SECTION_LINES = 9;
 export const MAX_LEVEL2_SECTION_LINES = 500;
@@ -61,6 +62,12 @@ function isCopiedActive(stateHolder, localCopiedUntil) {
     const until = stateHolder[COPIED_UNTIL_STATE_KEY];
     return typeof until === "number" && until > now;
 }
+/** A rejected write is feedback of its own; it must not leave the success mark on screen. */
+function isCopyFailed(stateHolder, localFailed) {
+    if (localFailed)
+        return true;
+    return isRecord(stateHolder) && stateHolder[COPY_FAILED_STATE_KEY] === true;
+}
 export function formatStatusGlyph(status, theme) {
     switch (status ?? "ok") {
         case "streaming":
@@ -217,6 +224,7 @@ export class ToolView {
     #spec;
     #localLevel;
     #localCopiedUntil = 0;
+    #localCopyFailed = false;
     #localTimer;
     #lastWidth = 80;
     #lastHeight = 0;
@@ -233,12 +241,15 @@ export class ToolView {
             const until = spec.stateHolder[COPIED_UNTIL_STATE_KEY];
             if (typeof until === "number" && until > Date.now()) {
                 this.#localCopiedUntil = until;
+                this.#localCopyFailed = spec.stateHolder[COPY_FAILED_STATE_KEY] === true;
                 const remaining = until - Date.now();
                 if (!spec.stateHolder[COPY_FEEDBACK_TIMER_KEY]) {
                     const timer = setTimeout(() => {
                         this.#localCopiedUntil = 0;
+                        this.#localCopyFailed = false;
                         if (isRecord(this.#spec.stateHolder)) {
                             this.#spec.stateHolder[COPIED_UNTIL_STATE_KEY] = 0;
+                            this.#spec.stateHolder[COPY_FAILED_STATE_KEY] = false;
                             this.#spec.stateHolder[COPY_FEEDBACK_TIMER_KEY] = undefined;
                         }
                         this.#localTimer = undefined;
@@ -268,6 +279,14 @@ export class ToolView {
     get summary() {
         return this.#hidden ? undefined : formatToolHeaderText(this.#spec.header, this.#spec.theme);
     }
+    /** Nested calls this tool reported; a hidden slot reports none. */
+    get children() {
+        return this.#hidden ? undefined : this.#spec.children;
+    }
+    /** How many nested calls the tool made, even when `children` lists only what fits. */
+    get childCount() {
+        return this.#hidden ? undefined : this.#spec.childCount;
+    }
     #collapseChildren() {
         const { collapsedRows, collapsibleChildren } = this.#spec;
         if (collapsibleChildren !== undefined) {
@@ -306,24 +325,34 @@ export class ToolView {
             : copySpec.primary;
         const writeClip = this.#spec.copyToClipboard ?? copyToSystemClipboard;
         const durationMs = this.#spec.copyFeedbackDurationMs ?? DEFAULT_COPY_FEEDBACK_MS;
+        // Feedback starts when the write settles. Marking it before the promise made a rejected
+        // clipboard write look exactly like a successful copy.
+        void writeClip(payload).then(() => this.#showCopyFeedback(durationMs, false), () => this.#showCopyFeedback(durationMs, true));
+    }
+    /** One feedback window in the copy slot: ✓ when the text reached the clipboard, ✗ when it did not. */
+    #showCopyFeedback(durationMs, failed) {
         const until = Date.now() + durationMs;
-        this.#localCopiedUntil = until;
+        this.#localCopiedUntil = failed ? 0 : until;
+        this.#localCopyFailed = failed;
         if (isRecord(this.#spec.stateHolder)) {
             const prevTimer = this.#spec.stateHolder[COPY_FEEDBACK_TIMER_KEY];
             if (prevTimer !== undefined) {
                 clearTimeout(prevTimer);
             }
-            this.#spec.stateHolder[COPIED_UNTIL_STATE_KEY] = until;
+            this.#spec.stateHolder[COPIED_UNTIL_STATE_KEY] = this.#localCopiedUntil;
+            this.#spec.stateHolder[COPY_FAILED_STATE_KEY] = failed;
         }
         if (this.#localTimer !== undefined) {
             clearTimeout(this.#localTimer);
         }
-        void writeClip(payload).catch(() => { });
+        this.#cache = undefined;
         this.#spec.invalidate?.();
         const timer = setTimeout(() => {
             this.#localCopiedUntil = 0;
+            this.#localCopyFailed = false;
             if (isRecord(this.#spec.stateHolder)) {
                 this.#spec.stateHolder[COPIED_UNTIL_STATE_KEY] = 0;
+                this.#spec.stateHolder[COPY_FAILED_STATE_KEY] = false;
                 this.#spec.stateHolder[COPY_FEEDBACK_TIMER_KEY] = undefined;
             }
             this.#localTimer = undefined;
@@ -345,8 +374,13 @@ export class ToolView {
         if (copy === undefined || safeWidth < 6) {
             return truncate(leftContent, safeWidth);
         }
-        const copied = isCopiedActive(this.#spec.stateHolder, this.#localCopiedUntil);
-        const copyIcon = copied ? theme.fg("success", "✓") : theme.fg("dim", "󰆏");
+        const failed = isCopyFailed(this.#spec.stateHolder, this.#localCopyFailed);
+        const copied = !failed && isCopiedActive(this.#spec.stateHolder, this.#localCopiedUntil);
+        const copyIcon = failed
+            ? theme.fg("error", "✗")
+            : copied
+                ? theme.fg("success", "✓")
+                : theme.fg("dim", "󰆏");
         // Leave 1 column on the right for Pi's fullscreen scrollbar so the copy icon doesn't collide
         const rightMargin = 1;
         const copySlotWidth = 2 + rightMargin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hheei/pi-ext-ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@hheei/pi-ext-core": "^0.6.4"
+    "@hheei/pi-ext-core": "^0.7.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": ">=1.0.1",