@abacus-ai/cli 1.106.25008 → 2.0.0-canary.1

package/src/components/__tests__/status-indicator.test.tsx

@@ -0,0 +1,403 @@
+// @vitest-environment node
+
+import stripAnsi from "strip-ansi";
+import { describe, it, expect, afterEach } from "vitest";
+
+import { NetworkActivityProvider } from "../../context/network-activity.js";
+import { render, logInk, cleanup } from "../../lib/test-utils.js";
+import { AgentStatus } from "../../providers/agent.js";
+import { StatusIndicator } from "../status-indicator.js";
+
+// Helper function to wrap StatusIndicator with required providers
+function renderStatusIndicator(status: AgentStatus) {
+  return render(
+    <NetworkActivityProvider>
+      <StatusIndicator status={status} />
+    </NetworkActivityProvider>,
+  );
+}
+
+describe.concurrent("StatusIndicator", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should not render when status is Idle", () => {
+    const instance = renderStatusIndicator(AgentStatus.Idle);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    // Should be empty or whitespace only when idle
+    expect(stripAnsi(output).trim()).toBe("");
+  });
+
+  it("should not render when status is WaitingForToolPermission", () => {
+    const instance = renderStatusIndicator(AgentStatus.WaitingForToolPermission);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    expect(stripAnsi(output).trim()).toBe("");
+  });
+
+  it("should render shimmer text when status is Submitted", () => {
+    const instance = renderStatusIndicator(AgentStatus.Submitted);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    const plainText = stripAnsi(output);
+
+    expect(output).toBeDefined();
+    // Should show some status text with "..." and escape hint
+    expect(plainText).toContain("...");
+    expect(plainText).toContain("esc to interrupt");
+  });
+
+  it("should render shimmer text when status is Streaming", () => {
+    const instance = renderStatusIndicator(AgentStatus.Streaming);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    const plainText = stripAnsi(output);
+
+    expect(output).toBeDefined();
+    expect(plainText).toContain("...");
+    expect(plainText).toContain("esc to interrupt");
+  });
+
+  it("should render shimmer text when status is ExecutingTool", () => {
+    const instance = renderStatusIndicator(AgentStatus.ExecutingTool);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    const plainText = stripAnsi(output);
+
+    expect(output).toBeDefined();
+    expect(plainText).toContain("...");
+    expect(plainText).toContain("esc to interrupt");
+  });
+
+  it('should render "Resuming" when status is LoadingConversation', () => {
+    const instance = renderStatusIndicator(AgentStatus.LoadingConversation);
+
+    logInk(instance);
+
+    const output = instance.lastFrame() ?? "";
+    const plainText = stripAnsi(output);
+
+    expect(output).toBeDefined();
+    expect(plainText).toContain("Resuming...");
+    // Should NOT show escape hint for loading conversation
+    expect(plainText).not.toContain("esc to interrupt");
+  });
+
+  it("should show indicator when transitioning from Idle to ExecutingTool", () => {
+    // This simulates what happens when an MCP tool starts executing
+    // Using rerender() to simulate prop changes from parent (AgentProvider)
+    const instance = renderStatusIndicator(AgentStatus.Idle);
+
+    // Initially idle - should be empty
+    let output = instance.lastFrame() ?? "";
+    expect(stripAnsi(output).trim()).toBe("");
+
+    // Simulate MCP tool starting - parent updates status prop
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.ExecutingTool} />
+      </NetworkActivityProvider>,
+    );
+
+    // Re-render should show the indicator
+    output = instance.lastFrame() ?? "";
+    const plainText = stripAnsi(output);
+
+    console.log("[UI Test] After status change to ExecutingTool:", plainText);
+
+    expect(plainText).toContain("...");
+    expect(plainText).toContain("esc to interrupt");
+  });
+
+  it("should hide indicator when transitioning from ExecutingTool to Idle", () => {
+    // This simulates what happens when an MCP tool finishes executing
+    const instance = renderStatusIndicator(AgentStatus.ExecutingTool);
+
+    // Initially executing - should show indicator
+    let output = instance.lastFrame() ?? "";
+    let plainText = stripAnsi(output);
+    expect(plainText).toContain("...");
+
+    // Simulate MCP tool completing - parent updates status prop
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Idle} />
+      </NetworkActivityProvider>,
+    );
+
+    // Re-render should hide the indicator
+    output = instance.lastFrame() ?? "";
+    plainText = stripAnsi(output);
+
+    console.log("[UI Test] After status change to Idle:", `"${plainText}"`);
+
+    expect(plainText.trim()).toBe("");
+  });
+
+  it("should update immediately when status changes (simulating MCP tool call)", () => {
+    // This test verifies that UI updates happen synchronously with status changes
+    // If there was a delay bug, this test would catch it
+    const instance = renderStatusIndicator(AgentStatus.Idle);
+
+    const startTime = Date.now();
+
+    // Simulate rapid status changes like during MCP tool execution
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Submitted} />
+      </NetworkActivityProvider>,
+    );
+    const afterSubmitted = instance.lastFrame() ?? "";
+
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.ExecutingTool} />
+      </NetworkActivityProvider>,
+    );
+    const afterExecuting = instance.lastFrame() ?? "";
+
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Streaming} />
+      </NetworkActivityProvider>,
+    );
+    const afterStreaming = instance.lastFrame() ?? "";
+
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Idle} />
+      </NetworkActivityProvider>,
+    );
+    const afterIdle = instance.lastFrame() ?? "";
+
+    const totalTime = Date.now() - startTime;
+
+    console.log("[UI Test] Status transitions:");
+    console.log("  - Submitted:", stripAnsi(afterSubmitted).includes("...") ? "visible" : "hidden");
+    console.log(
+      "  - ExecutingTool:",
+      stripAnsi(afterExecuting).includes("...") ? "visible" : "hidden",
+    );
+    console.log("  - Streaming:", stripAnsi(afterStreaming).includes("...") ? "visible" : "hidden");
+    console.log("  - Idle:", stripAnsi(afterIdle).trim() === "" ? "hidden" : "visible");
+    console.log(`  Total time for 4 transitions: ${totalTime}ms`);
+
+    // Verify each state rendered correctly
+    expect(stripAnsi(afterSubmitted)).toContain("...");
+    expect(stripAnsi(afterExecuting)).toContain("...");
+    expect(stripAnsi(afterStreaming)).toContain("...");
+    expect(stripAnsi(afterIdle).trim()).toBe("");
+
+    // All transitions should be nearly instant (< 50ms total for 4 changes)
+    // This catches bugs where UI updates are delayed
+    expect(totalTime).toBeLessThan(50);
+  });
+});
+
+describe.sequential("StatusIndicator - MCP Tool Execution Flow", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  /**
+   * This test simulates the exact flow that happens when an MCP tool is called:
+   * 1. User sends message -> Submitted
+   * 2. Agent starts processing -> Streaming
+   * 3. Agent calls MCP tool -> ExecutingTool
+   * 4. Tool completes -> Streaming (continues)
+   * 5. Agent done -> Idle
+   *
+   * The bug your teammate fixed was that step 3 (ExecutingTool) wasn't showing
+   * in the UI because status updates weren't being handled correctly.
+   */
+  it("should show correct UI through full MCP tool execution lifecycle", async () => {
+    const renderTimes: { status: string; frame: string; time: number; visible: boolean }[] = [];
+    const startTime = Date.now();
+
+    const instance = renderStatusIndicator(AgentStatus.Idle);
+
+    // Step 0: Initial idle state
+    let frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "Idle (initial)",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    // Step 1: User submits message
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Submitted} />
+      </NetworkActivityProvider>,
+    );
+    frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "Submitted",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    // Small delay to simulate async behavior
+    await new Promise((r) => setTimeout(r, 10));
+
+    // Step 2: Agent starts streaming response
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Streaming} />
+      </NetworkActivityProvider>,
+    );
+    frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "Streaming",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    // Step 3: Agent calls MCP tool - THIS IS THE CRITICAL PART
+    // If status update is delayed, user sees no feedback
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.ExecutingTool} />
+      </NetworkActivityProvider>,
+    );
+    frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "ExecutingTool",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    // Step 4: Tool completes, back to streaming
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Streaming} />
+      </NetworkActivityProvider>,
+    );
+    frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "Streaming (after tool)",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    // Step 5: Agent completes
+    instance.rerender(
+      <NetworkActivityProvider>
+        <StatusIndicator status={AgentStatus.Idle} />
+      </NetworkActivityProvider>,
+    );
+    frame = instance.lastFrame() ?? "";
+    renderTimes.push({
+      status: "Idle (final)",
+      frame: stripAnsi(frame),
+      time: Date.now() - startTime,
+      visible: stripAnsi(frame).includes("..."),
+    });
+
+    // Log the timeline
+    console.log("[MCP Flow Test] Render timeline:");
+    renderTimes.forEach((r) => {
+      console.log(`  ${r.time}ms: ${r.status} -> ${r.visible ? "VISIBLE" : "hidden"}`);
+    });
+
+    // Verify we got through all states
+    expect(renderTimes.length).toBe(6);
+
+    // Verify the ExecutingTool state was visible (the bug was this not showing)
+    const executingToolEntry = renderTimes.find((r) => r.status === "ExecutingTool");
+    expect(executingToolEntry).toBeDefined();
+    expect(executingToolEntry?.visible).toBe(true);
+
+    // Verify Submitted was visible
+    const submittedEntry = renderTimes.find((r) => r.status === "Submitted");
+    expect(submittedEntry?.visible).toBe(true);
+
+    // Verify Streaming was visible
+    const streamingEntry = renderTimes.find((r) => r.status === "Streaming");
+    expect(streamingEntry?.visible).toBe(true);
+
+    // Verify final Idle is hidden
+    const idleFinalEntry = renderTimes.find((r) => r.status === "Idle (final)");
+    expect(idleFinalEntry?.visible).toBe(false);
+
+    // Verify timing - each transition should happen quickly
+    for (let i = 1; i < renderTimes.length; i++) {
+      const timeBetween = renderTimes[i].time - renderTimes[i - 1].time;
+      // Each transition should be < 20ms (plus our 10ms simulated delay)
+      expect(timeBetween).toBeLessThanOrEqual(40);
+    }
+  });
+
+  /**
+   * Test that verifies UI responds to status changes without artificial delays.
+   * This would catch bugs where status updates are batched or delayed.
+   */
+  it("should render each status change immediately without batching", () => {
+    const instance = renderStatusIndicator(AgentStatus.Idle);
+    const frames: string[] = [];
+
+    // Rapid-fire status changes
+    const statuses: AgentStatus[] = [
+      AgentStatus.Submitted,
+      AgentStatus.Streaming,
+      AgentStatus.ExecutingTool,
+      AgentStatus.WaitingForToolPermission,
+      AgentStatus.ExecutingTool,
+      AgentStatus.Streaming,
+      AgentStatus.Idle,
+    ];
+
+    const startTime = Date.now();
+
+    for (const status of statuses) {
+      instance.rerender(
+        <NetworkActivityProvider>
+          <StatusIndicator status={status} />
+        </NetworkActivityProvider>,
+      );
+      frames.push(instance.lastFrame() ?? "");
+    }
+
+    const totalTime = Date.now() - startTime;
+
+    console.log(`[Batching Test] ${statuses.length} status changes in ${totalTime}ms`);
+    console.log("[Batching Test] Frames captured:", frames.length);
+
+    // Each status change should produce a frame
+    expect(frames.length).toBe(statuses.length);
+
+    // Should be very fast (no delays between renders)
+    expect(totalTime).toBeLessThan(50);
+
+    // Verify specific states rendered correctly
+    // Submitted (index 0) should be visible
+    expect(stripAnsi(frames[0])).toContain("...");
+    // WaitingForToolPermission (index 3) should be hidden
+    expect(stripAnsi(frames[3]).trim()).toBe("");
+    // Final Idle (index 6) should be hidden
+    expect(stripAnsi(frames[6]).trim()).toBe("");
+  });
+});

package/src/components/composer/__tests__/bash-runner.test.tsx

@@ -0,0 +1,263 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+
+import * as pathModule from "../../../lib/path.js";
+import { render, cleanup, logInk } from "../../../lib/test-utils.js";
+import { BashRunner } from "../bash-runner.js";
+
+// Mock the path module
+vi.mock("../../../lib/path.js", () => ({
+  abbreviateHome: vi.fn((path: string) => path),
+}));
+
+describe.concurrent("BashRunner", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mock implementation
+    vi.mocked(pathModule.abbreviateHome).mockImplementation((p: string) => p);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render command and output", () => {
+    const instance = render(<BashRunner command="echo hello" output="hello" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("echo hello");
+    expect(output).toContain("hello");
+  });
+
+  it("should render empty output", () => {
+    const instance = render(<BashRunner command="ls" output="" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("ls");
+    // Should not crash with empty output
+    expect(output).toBeDefined();
+  });
+
+  it("should render multi-line output", () => {
+    const multiLineOutput = "line1\nline2\nline3";
+    const instance = render(<BashRunner command="cat file.txt" output={multiLineOutput} />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("cat file.txt");
+    expect(output).toContain("line1");
+    expect(output).toContain("line2");
+    expect(output).toContain("line3");
+  });
+
+  it("should not truncate when truncate is false", () => {
+    const longOutput = Array(20)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="long-command" output={longOutput} truncate={false} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should contain all lines when truncate is false
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 19");
+    expect(output).not.toContain("lines hidden");
+  });
+
+  it("should truncate output when truncate is true and output exceeds maxLines", () => {
+    const longOutput = Array(20)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="long-command" output={longOutput} truncate={true} maxLines={10} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should show first and last half of maxLines
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 4"); // First half (5 lines)
+    expect(output).toContain("line 15"); // Last half (5 lines)
+    expect(output).toContain("line 19");
+    expect(output).toContain("lines hidden");
+  });
+
+  it("should not truncate when output is within maxLines", () => {
+    const shortOutput = Array(5)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="short-command" output={shortOutput} truncate={true} maxLines={10} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 4");
+    expect(output).not.toContain("lines hidden");
+  });
+
+  it("should use default maxLines of 10 when not provided", () => {
+    const longOutput = Array(20)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(<BashRunner command="test" output={longOutput} truncate={true} />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should truncate at default 10 lines (5 + 5)
+    expect(output).toContain("lines hidden");
+  });
+
+  it("should handle truncation with odd maxLines", () => {
+    const longOutput = Array(20)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="test" output={longOutput} truncate={true} maxLines={9} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // With maxLines=9, halfLines=4, so should show first 4 and last 4
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 3");
+    expect(output).toContain("line 16");
+    expect(output).toContain("line 19");
+    expect(output).toContain("lines hidden");
+  });
+
+  it("should display truncation indicator in the middle", () => {
+    const longOutput = Array(20)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="test" output={longOutput} truncate={true} maxLines={10} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // The truncation indicator should appear between first and last half
+    const lines = output.split("\n");
+    const truncationIndex = lines.findIndex((line) => line.includes("lines hidden"));
+    expect(truncationIndex).toBeGreaterThan(-1);
+    // Should be after first half and before last half
+    expect(truncationIndex).toBeGreaterThan(0);
+    expect(truncationIndex).toBeLessThan(lines.length - 1);
+  });
+
+  it("should call abbreviateHome with process.cwd()", () => {
+    const instance = render(<BashRunner command="pwd" output="output" />);
+
+    logInk(instance);
+
+    expect(pathModule.abbreviateHome).toHaveBeenCalledWith(process.cwd());
+  });
+
+  it("should handle command with special characters", () => {
+    const instance = render(<BashRunner command="echo 'hello world' && ls -la" output="output" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("echo 'hello world' && ls -la");
+  });
+
+  it("should handle output with special characters", () => {
+    const specialOutput = "line with \"quotes\" and 'apostrophes' and $variables";
+    const instance = render(<BashRunner command="test" output={specialOutput} />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("quotes");
+    expect(output).toContain("apostrophes");
+    expect(output).toContain("$variables");
+  });
+
+  it("should handle very long single line output", () => {
+    const veryLongLine = "x".repeat(1000);
+    const instance = render(<BashRunner command="test" output={veryLongLine} />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("x");
+    expect(output).toBeDefined();
+  });
+
+  it("should handle edge case with maxLines=1", () => {
+    const longOutput = Array(10)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="test" output={longOutput} truncate={true} maxLines={1} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should show at least one line (the last line) even with maxLines=1
+    expect(output).toBeDefined();
+    expect(output).toContain("line 9"); // Last line should be shown
+    expect(output).toContain("lines hidden");
+  });
+
+  it("should handle large number of lines", () => {
+    const largeOutput = Array(1000)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="test" output={largeOutput} truncate={true} maxLines={20} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("lines hidden");
+    expect(output).toBeDefined();
+    // Should show first and last portions of output
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 999");
+  });
+
+  it("should not show truncation when lines exactly equal maxLines", () => {
+    const exactOutput = Array(10)
+      .fill("line")
+      .map((_, i) => `line ${i}`)
+      .join("\n");
+    const instance = render(
+      <BashRunner command="test" output={exactOutput} truncate={true} maxLines={10} />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should not show truncation indicator when lines.length === maxLines
+    expect(output).toBeDefined();
+    expect(output).not.toContain("lines hidden");
+    // Should show all lines
+    expect(output).toContain("line 0");
+    expect(output).toContain("line 9");
+  });
+});