pi-ui-extension 1.1.0

package/extensions/tool-view/panel.ts

@@ -0,0 +1,221 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import {
+  truncateToWidth,
+  visibleWidth,
+  type Component,
+  type TUI,
+  type TuiInputListener,
+} from "@earendil-works/pi-tui";
+import { panelBottom, panelContent, panelTop } from "../sidebar/panel.ts";
+import { installPriorityInputListener, parseSgrMouseEvent } from "../sidebar/resize.ts";
+import { TOOL_VIEW_MODES, type ToolViewMode } from "./types.ts";
+import type { ToolUsageCount, ToolUsageKind, ToolUsageSnapshot } from "./usage.ts";
+
+export type ToolViewPanelOptions = {
+  readonly tui: TUI;
+  readonly getDesiredWidth: () => number;
+  readonly getMode: () => ToolViewMode | undefined;
+  readonly getUsage: () => ToolUsageSnapshot | undefined;
+  readonly onSelect: (mode: ToolViewMode) => void;
+  readonly showModeSelector?: () => boolean;
+  readonly showBottomBorder?: boolean;
+};
+
+type LayoutRect = { readonly x: number; readonly y: number; readonly width: number; readonly height: number };
+type LayoutBox = {
+  readonly component: Component;
+  readonly rect: LayoutRect;
+  readonly clip: LayoutRect;
+  readonly children: readonly LayoutBox[];
+};
+type LayoutTui = TUI & { readonly currentLayout?: { readonly root: LayoutBox } };
+
+function contains(rect: LayoutRect, x: number, y: number): boolean {
+  return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
+}
+
+function findLayoutBox(box: LayoutBox, component: Component): LayoutBox | undefined {
+  if (box.component === component) return box;
+  for (const child of box.children) {
+    const match = findLayoutBox(child, component);
+    if (match) return match;
+  }
+  return undefined;
+}
+
+function modeLabel(mode: ToolViewMode): string {
+  switch (mode) {
+    case "normal": return "Normal";
+    case "compact": return "Compact";
+    case "hidden": return "Hidden";
+  }
+}
+
+function centerText(text: string, width: number): string {
+  const clipped = truncateToWidth(text, Math.max(0, width), "");
+  const padding = Math.max(0, width - visibleWidth(clipped));
+  const left = Math.floor(padding / 2);
+  return `${" ".repeat(left)}${clipped}${" ".repeat(padding - left)}`;
+}
+
+function usageText(name: string, exchange: number, session: number, width: number): string {
+  const value = `${exchange}/${session}`;
+  const nameWidth = Math.max(0, width - visibleWidth(value) - 1);
+  if (nameWidth === 0) return truncateToWidth(value, width, "");
+  const clippedName = truncateToWidth(name, nameWidth, "…");
+  const gap = " ".repeat(Math.max(1, width - visibleWidth(clippedName) - visibleWidth(value)));
+  return `${clippedName}${gap}${value}`;
+}
+
+export function groupUsageCounts(counts: readonly ToolUsageCount[]): Readonly<Record<ToolUsageKind, readonly ToolUsageCount[]>> {
+  return Object.freeze({
+    tool: Object.freeze(counts.filter((count) => count.kind === "tool")),
+    mcp: Object.freeze(counts.filter((count) => count.kind === "mcp")),
+  });
+}
+
+/** Clickable single-row selector for tool transcript rendering mode. */
+export class ToolViewPanel implements Component {
+  private pressedMode: ToolViewMode | undefined;
+  private disposed = false;
+  private readonly uninstallInput: () => void;
+
+  constructor(
+    private readonly theme: Theme,
+    private readonly options: ToolViewPanelOptions,
+  ) {
+    const listener: TuiInputListener = (data) => this.handleMouseInput(data);
+    this.uninstallInput = installPriorityInputListener(options.tui, listener);
+  }
+
+  private getLayoutBox(): LayoutBox | undefined {
+    const root = (this.options.tui as LayoutTui).currentLayout?.root;
+    return root ? findLayoutBox(root, this) : undefined;
+  }
+
+  private modeAt(x: number, y: number): ToolViewMode | undefined {
+    if (this.options.showModeSelector?.() === false) return undefined;
+    const box = this.getLayoutBox();
+    if (!box || !contains(box.clip, x, y) || !contains(box.rect, x, y)) return undefined;
+    if (y - box.rect.y !== 1) return undefined;
+
+    const contentWidth = Math.max(1, Math.min(box.rect.width, this.options.getDesiredWidth()) - 4);
+    const contentColumn = x - box.rect.x - 2;
+    if (contentColumn < 0 || contentColumn >= contentWidth) return undefined;
+
+    const index = Math.min(
+      TOOL_VIEW_MODES.length - 1,
+      Math.floor(contentColumn * TOOL_VIEW_MODES.length / contentWidth),
+    );
+    return TOOL_VIEW_MODES[index];
+  }
+
+  private isInsidePanel(x: number, y: number): boolean {
+    const box = this.getLayoutBox();
+    return Boolean(box && contains(box.clip, x, y) && contains(box.rect, x, y));
+  }
+
+  private handleMouseInput(data: string): { consume: true } | undefined {
+    const mouse = parseSgrMouseEvent(data);
+    // Let the enclosing ScrollView receive wheel events before any click handling.
+    if (!mouse || (mouse.button & 64) !== 0) return undefined;
+
+    const x = mouse.x - 1;
+    const y = mouse.y - 1;
+    const inside = this.isInsidePanel(x, y);
+    const isLeft = (mouse.button & 3) === 0;
+
+    if (mouse.release) {
+      const pressed = this.pressedMode;
+      if (!pressed) return undefined;
+      this.pressedMode = undefined;
+      const released = this.modeAt(x, y);
+      if (released === pressed) {
+        queueMicrotask(() => {
+          const currentMode = this.options.getMode();
+          if (!this.disposed && currentMode !== undefined && currentMode !== released) {
+            this.options.onSelect(released);
+          }
+        });
+      }
+      this.options.tui.requestRender();
+      return { consume: true };
+    }
+
+    if (mouse.motion) {
+      if (!this.pressedMode) return undefined;
+      if (this.modeAt(x, y) !== this.pressedMode) {
+        this.pressedMode = undefined;
+        this.options.tui.requestRender();
+      }
+      return { consume: true };
+    }
+
+    if (!inside) return undefined;
+    if (!isLeft) return undefined;
+
+    if (this.options.getMode() === undefined) return { consume: true };
+    this.pressedMode = this.modeAt(x, y);
+    if (this.pressedMode) this.options.tui.requestRender();
+    return this.pressedMode ? { consume: true } : undefined;
+  }
+
+  render(width: number): string[] {
+    const renderWidth = Math.max(1, Math.min(width, this.options.getDesiredWidth()));
+    const contentWidth = Math.max(1, renderWidth - 4);
+    const showModeSelector = this.options.showModeSelector?.() !== false;
+    const currentMode = this.options.getMode();
+    const connected = currentMode !== undefined;
+    const baseWidth = Math.floor(contentWidth / TOOL_VIEW_MODES.length);
+    const remainder = contentWidth % TOOL_VIEW_MODES.length;
+    const body = TOOL_VIEW_MODES.map((mode, index) => {
+      const selected = mode === currentMode;
+      const pressed = mode === this.pressedMode;
+      const marker = !connected ? "·" : selected ? "●" : "○";
+      const segmentWidth = baseWidth + (index < remainder ? 1 : 0);
+      const text = centerText(`${marker} ${modeLabel(mode)}`, segmentWidth);
+      return pressed
+        ? this.theme.fg("warning", text)
+        : selected
+          ? this.theme.fg("success", text)
+          : this.theme.fg("dim", text);
+    }).join("");
+    const selectorBody = showModeSelector
+      ? body
+      : this.theme.fg("dim", centerText("View controlled by Fabric", contentWidth));
+    const usage = this.options.getUsage();
+    const grouped = groupUsageCounts(usage?.counts ?? []);
+    const usageRows: string[] = [];
+    const appendGroup = (label: "TOOLS" | "MCP", counts: readonly ToolUsageCount[]): void => {
+      if (counts.length === 0) return;
+      usageRows.push(panelContent(this.theme, label, "accent", contentWidth));
+      for (const count of counts) {
+        usageRows.push(panelContent(
+          this.theme,
+          usageText(count.name, count.exchange, count.session, contentWidth),
+          count.exchange > 0 ? "accent" : "dim",
+          contentWidth,
+        ));
+      }
+    };
+    appendGroup("TOOLS", grouped.tool);
+    appendGroup("MCP", grouped.mcp);
+
+    const lines = [
+      panelTop(this.theme, "TOOL VIEW", renderWidth),
+      panelContent(this.theme, selectorBody, "dim", contentWidth),
+      ...usageRows,
+    ];
+    if (this.options.showBottomBorder !== false) lines.push(panelBottom(this.theme, renderWidth));
+    return lines.map((line) => truncateToWidth(line, renderWidth, ""));
+  }
+
+  invalidate(): void {}
+
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.pressedMode = undefined;
+    this.uninstallInput();
+  }
+}

package/extensions/tool-view/trust.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { mkdtemp, mkdir, writeFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { installToolViewController } from "./controller.ts";
+
+test("managed bash honors trust changes and reloads project shell settings", async () => {
+  const directory = await mkdtemp(join(tmpdir(), "tool-view-trust-"));
+  const tools = new Map<string, any>();
+  const pi = { registerTool(tool: any) { tools.set(tool.name, tool); }, registerCommand() {}, registerShortcut() {}, on() {} } as any;
+  let trusted = false;
+  const ctx = {
+    cwd: directory,
+    isProjectTrusted: () => trusted,
+    sessionManager: { getSessionId: () => "trust-test", getSessionFile: () => undefined },
+  };
+  const run = async () => {
+    const result = await tools.get("bash").execute("test", { command: "echo COMMAND_MARKER", timeout: 5 }, undefined, undefined, ctx);
+    return result.content.map((item: any) => item.text ?? "").join("\n");
+  };
+  try {
+    await mkdir(join(directory, ".pi"));
+    const settings = join(directory, ".pi", "settings.json");
+    await writeFile(settings, JSON.stringify({ shellCommandPrefix: "echo PROJECT_PREFIX;" }));
+    await installToolViewController(pi, { modeFile: join(directory, "mode.json") });
+    assert.doesNotMatch(await run(), /PROJECT_PREFIX/);
+    trusted = true;
+    assert.match(await run(), /PROJECT_PREFIX/);
+    trusted = false;
+    assert.doesNotMatch(await run(), /PROJECT_PREFIX/);
+    await writeFile(settings, JSON.stringify({ shellPath: join(directory, "missing-shell") }));
+    assert.match(await run(), /COMMAND_MARKER/);
+    trusted = true;
+    await assert.rejects(run());
+    await writeFile(settings, JSON.stringify({ shellCommandPrefix: "echo UPDATED_PREFIX;" }));
+    assert.match(await run(), /UPDATED_PREFIX/);
+  } finally {
+    await rm(directory, { recursive: true, force: true });
+  }
+});

package/extensions/tool-view/types.ts

@@ -0,0 +1,6 @@
+export const TOOL_VIEW_MODES = ["normal", "compact", "hidden"] as const;
+export type ToolViewMode = (typeof TOOL_VIEW_MODES)[number];
+
+export function isToolViewMode(value: unknown): value is ToolViewMode {
+  return typeof value === "string" && TOOL_VIEW_MODES.includes(value as ToolViewMode);
+}

package/extensions/tool-view/usage.test.ts

@@ -0,0 +1,231 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { ToolExecutionEndEvent } from "@earendil-works/pi-coding-agent";
+import { createToolUsageTracker, toolNamesFromBranch } from "./usage.ts";
+
+function ended(toolName: string, details: unknown = {}): ToolExecutionEndEvent {
+  return {
+    type: "tool_execution_end",
+    toolCallId: `${toolName}-call`,
+    toolName,
+    result: { content: [], details },
+    isError: false,
+  };
+}
+
+test("tracks top-level tools for the current question and session", () => {
+  const tracker = createToolUsageTracker(["read", "read", "bash"]);
+  tracker.startExchange();
+  tracker.record(ended("read"));
+  // Multiple internal LLM turns in one answer must continue accumulating.
+  tracker.record(ended("read"));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "read", kind: "tool", exchange: 2, session: 4 },
+    { name: "bash", kind: "tool", exchange: 0, session: 1 },
+  ]);
+
+  tracker.startExchange();
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "read", kind: "tool", exchange: 0, session: 4 },
+    { name: "bash", kind: "tool", exchange: 0, session: 1 },
+  ]);
+});
+
+test("counts nested Fabric trace operations as their actual tools", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record({ ...ended("fabric_exec", {
+    success: true,
+    trace: {
+      kind: "pi-fabric.execution",
+      version: 1,
+      outcome: "succeeded",
+      phases: [],
+      operations: [
+        { type: "call", sequence: 1, ref: "pi.read", provider: "pi", action: "read", args: {}, outcome: "succeeded" },
+        { type: "call", sequence: 2, ref: "pi.bash", provider: "pi", action: "bash", args: {}, outcome: "succeeded" },
+        { type: "call", sequence: 3, ref: "mcp.context7.query-docs", provider: "mcp", action: "query-docs", args: {}, outcome: "succeeded" },
+        { type: "call", sequence: 4, ref: "extensions.ask_user_question", provider: "extensions", action: "ask_user_question", args: {}, outcome: "succeeded" },
+      ],
+      counts: { droppedValues: 0, truncatedValues: 0, redactedValues: 0, droppedOperations: 0 },
+    },
+  }), toolCallId: "call_outer_fabric" });
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "ask_user_question", kind: "tool", exchange: 1, session: 1 },
+    { name: "bash", kind: "tool", exchange: 1, session: 1 },
+    { name: "fabric_exec", kind: "tool", exchange: 1, session: 1 },
+    { name: "read", kind: "tool", exchange: 1, session: 1 },
+    { name: "context7", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("does not double-count nested lifecycle events replayed by Fabric", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("read", {},));
+  tracker.record({ ...ended("read"), toolCallId: "fabric_nested", result: { content: [], details: {} } });
+  assert.equal(tracker.getSnapshot().counts.find((count) => count.name === "read")?.exchange, 1);
+});
+
+test("adds the MCP server for proxy calls without hiding the gateway count", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("mcp", { mode: "call", server: "codebase-memory-mcp", tool: "search_graph" }));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "mcp", kind: "tool", exchange: 1, session: 1 },
+    { name: "codebase-memory-mcp", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("counts each MCP call made by mcpScript", () => {
+  const tracker = createToolUsageTracker([], () => ["codebase-memory-mcp", "context-mode"]);
+  tracker.startExchange();
+  tracker.record(ended("mcpScript", {
+    mode: "script",
+    calls: [
+      { operation: "search", query: "graph", ok: true },
+      { operation: "call", path: "codebase-memory-mcp_search_graph", ok: true },
+      { operation: "call", path: "codebase-memory-mcp_get_code_snippet", ok: true },
+      { operation: "call", path: "context-mode_ctx_search", ok: false, error: "failed" },
+    ],
+  }));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "mcpScript", kind: "tool", exchange: 1, session: 1 },
+    { name: "codebase-memory-mcp", kind: "mcp", exchange: 2, session: 2 },
+    { name: "context-mode", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("attributes direct context-mode bridge tools to the MCP server", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("ctx_execute"));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "ctx_execute", kind: "tool", exchange: 1, session: 1 },
+    { name: "context-mode", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("does not attribute unknown ctx-prefixed tools to context-mode", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("ctx_custom"));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "ctx_custom", kind: "tool", exchange: 1, session: 1 },
+  ]);
+});
+
+test("rebuilds session totals when the active branch changes", () => {
+  const firstBranch = [{
+    type: "message",
+    message: { role: "toolResult", toolName: "read", details: {} },
+  }];
+  const secondBranch = [{
+    type: "message",
+    message: { role: "toolResult", toolName: "bash", details: {} },
+  }];
+  const tracker = createToolUsageTracker(toolNamesFromBranch(firstBranch));
+  tracker.startExchange();
+  tracker.resetSession(secondBranch);
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "bash", kind: "tool", exchange: 0, session: 1 },
+  ]);
+});
+
+test("re-attributes restored mcpScript calls after MCP server discovery", () => {
+  const entries = [{
+    type: "message",
+    message: {
+      role: "toolResult",
+      toolName: "mcpScript",
+      details: {
+        mode: "script",
+        calls: [{ operation: "call", path: "team_core_search", ok: false, error: "failed" }],
+      },
+    },
+  }];
+  const tracker = createToolUsageTracker(toolNamesFromBranch(entries));
+  tracker.resetSession(entries, ["team_core"]);
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "mcpScript", kind: "tool", exchange: 0, session: 1 },
+    { name: "team_core", kind: "mcp", exchange: 0, session: 1 },
+  ]);
+});
+
+test("keeps same-named Tool and MCP server in separate sections", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("mcp", { mode: "call", server: "mcp", tool: "status" }));
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "mcp", kind: "tool", exchange: 1, session: 1 },
+    { name: "mcp", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("rebuilds current-question MCP counts when server discovery arrives late", () => {
+  let servers: string[] = [];
+  const details = {
+    mode: "script",
+    calls: [{ operation: "call", path: "team_core_search", ok: true }],
+  };
+  const entries = [{
+    type: "message",
+    message: { role: "toolResult", toolName: "mcpScript", details },
+  }];
+  const tracker = createToolUsageTracker([], () => servers);
+  tracker.startExchange();
+  tracker.record(ended("mcpScript", details));
+  servers = ["team_core"];
+  tracker.resetSession(entries, servers, { preserveExchange: true });
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "mcpScript", kind: "tool", exchange: 1, session: 1 },
+    { name: "team_core", kind: "mcp", exchange: 1, session: 1 },
+  ]);
+});
+
+test("clears current-question counts when the active branch changes", () => {
+  const tracker = createToolUsageTracker();
+  tracker.startExchange();
+  tracker.record(ended("read"));
+  tracker.resetSession([{
+    type: "message",
+    message: { role: "toolResult", toolName: "read", details: {} },
+  }]);
+
+  assert.deepEqual(tracker.getSnapshot().counts, [
+    { name: "read", kind: "tool", exchange: 0, session: 1 },
+  ]);
+});
+
+test("restores completed tool and MCP counts from a session branch", () => {
+  const entries = [
+    {
+      type: "message",
+      message: {
+        role: "toolResult",
+        toolName: "read",
+        details: {},
+      },
+    },
+    {
+      type: "message",
+      message: {
+        role: "toolResult",
+        toolName: "mcp",
+        details: { mode: "call", server: "codebase-memory-mcp", tool: "search_graph" },
+      },
+    },
+  ];
+
+  assert.deepEqual(toolNamesFromBranch(entries), ["read", "mcp", "codebase-memory-mcp"]);
+});