@abacus-ai/cli 1.106.25007 → 2.0.0-canary.0

package/src/components/composer/modes/__tests__/bash-renderer.test.tsx

@@ -0,0 +1,1108 @@
+import { useState, useEffect } from "react";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+
+import { render, cleanup, logInk } from "../../../../lib/test-utils.js";
+import { sleep } from "../../../../lib/utils.js";
+import { BashRenderer, type BashRendererProps } from "../../modes/bash-renderer.js";
+import { destroyPersistentShell } from "../../persistent-shell.js";
+
+// Test wrapper component to manage state
+function BashRendererWrapper(
+  props: Omit<BashRendererProps, "state" | "setState"> & {
+    initialState?: BashRendererProps["state"];
+  },
+) {
+  const [state, setState] = useState<BashRendererProps["state"]>(
+    props.initialState || {
+      submittedCommand: null,
+      runId: 0,
+      output: "",
+      isRunning: false,
+    },
+  );
+
+  return <BashRenderer {...props} state={state} setState={setState} />;
+}
+
+describe.sequential("BashRenderer", () => {
+  const mockSetState = vi.fn();
+  const mockOnCommandComplete = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Clean up any existing shell instance before each test
+    destroyPersistentShell();
+  });
+
+  afterEach(() => {
+    cleanup();
+    // Clean up shell instance after each test
+    destroyPersistentShell();
+  });
+
+  it("should render with empty state", () => {
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should render command history", () => {
+    const commandHistory = [
+      { command: "echo hello", output: "hello" },
+      { command: "ls", output: "file1.txt\nfile2.txt" },
+    ];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("echo hello");
+    expect(output).toContain("ls");
+    expect(output).toContain("hello");
+  });
+
+  it("should render submitted command", () => {
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test",
+          runId: 1,
+          output: "",
+          isRunning: true,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("echo test");
+  });
+
+  it("should execute command when submittedCommand is set", async () => {
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "output line 1\noutput line 2"',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    // Wait for async operations
+    await sleep(500);
+
+    // Command should have been executed (verified by behavior, not mocks)
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should not execute command if normalized is empty", async () => {
+    render(
+      <BashRenderer
+        state={{
+          submittedCommand: "   ",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(100);
+
+    // Empty command should not trigger execution
+    expect(mockOnCommandComplete).not.toHaveBeenCalled();
+  });
+
+  it("should execute command when runId is set", async () => {
+    render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // The component should execute the command when runId is set
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should not re-execute command with same runId", async () => {
+    mockOnCommandComplete.mockClear();
+
+    // Use a wrapper component that maintains state internally
+    // This ensures the same component instance persists, so lastRunIdRef is preserved
+    const TestWrapper = () => {
+      const [state, setState] = useState<BashRendererProps["state"]>({
+        submittedCommand: "echo test1",
+        runId: 1,
+        output: "",
+        isRunning: false,
+      });
+
+      // After first command completes, update output without changing runId
+      useEffect(() => {
+        if (mockOnCommandComplete.mock.calls.length === 1 && state.output === "") {
+          // Simulate parent updating output after command completes
+          setTimeout(() => {
+            setState((prev) => ({ ...prev, output: "some output" }));
+          }, 100);
+        }
+      }, [state.output]);
+
+      return (
+        <BashRenderer
+          state={state}
+          setState={setState}
+          onCommandComplete={mockOnCommandComplete}
+          commandHistory={[]}
+          currentPrompt=""
+          availableHeight={20}
+        />
+      );
+    };
+
+    render(<TestWrapper />);
+
+    // Wait for first execution to complete
+    await sleep(600);
+
+    // Verify command was executed once
+    expect(mockOnCommandComplete).toHaveBeenCalledTimes(1);
+    const callCountAfterFirstExecution = mockOnCommandComplete.mock.calls.length;
+
+    // Wait for state update to trigger re-render (output changes but runId stays same)
+    await sleep(200);
+
+    // Wait a bit more to ensure useEffect has run and checked the runId
+    await sleep(300);
+
+    // onCommandComplete should NOT be called again because runId hasn't changed
+    // The check `if (runId === lastRunIdRef.current) return` should prevent re-execution
+    expect(mockOnCommandComplete).toHaveBeenCalledTimes(callCountAfterFirstExecution);
+  });
+
+  it("should execute command when runId changes", async () => {
+    const { rerender } = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test1",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(300);
+
+    // Clear previous calls
+    mockOnCommandComplete.mockClear();
+
+    // Re-render with different runId
+    rerender(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test2",
+          runId: 2,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Should have called onCommandComplete again with new command
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should update output as stream chunks arrive", async () => {
+    const instance = render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "chunk1\nchunk2"',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Output should be updated as chunks arrive
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should strip dangerous sequences from output", async () => {
+    // Use a real command - stripDangerousSequences is called internally
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // stripDangerousSequences is called internally, we verify behavior
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should handle command execution error gracefully", async () => {
+    // Use a command that will fail (non-existent command)
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "nonexistentcommand12345",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Error handling should call onCommandComplete
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should call onCommandComplete with output when command succeeds", async () => {
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "command output"',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+    // Verify it was called with output (not empty string)
+    const calls = mockOnCommandComplete.mock.calls;
+    expect(calls.length).toBeGreaterThan(0);
+    if (calls.length > 0 && calls[0][0]) {
+      expect(calls[0][0].length).toBeGreaterThan(0);
+    }
+  });
+
+  it("should set isRunning to true when command starts", async () => {
+    render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(50);
+
+    // setState is called with a function, so we check if it was called
+    expect(mockSetState).toHaveBeenCalled();
+    // Verify it's called with a function that returns isRunning: true
+    const setStateCall = mockSetState.mock.calls.find((call) => {
+      if (typeof call[0] === "function") {
+        const result = call[0]({ isRunning: false });
+        return result.isRunning === true;
+      }
+      return false;
+    });
+    expect(setStateCall).toBeDefined();
+  });
+
+  it("should set isRunning to false when command completes", async () => {
+    render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // setState is called with a function, verify it sets isRunning to false
+    expect(mockSetState).toHaveBeenCalled();
+    const setStateCall = mockSetState.mock.calls.find((call) => {
+      if (typeof call[0] === "function") {
+        const result = call[0]({ isRunning: true });
+        return result.isRunning === false;
+      }
+      return false;
+    });
+    expect(setStateCall).toBeDefined();
+  });
+
+  it("should limit history display when submittedCommand exists", () => {
+    const commandHistory = [
+      { command: "cmd1", output: "out1" },
+      { command: "cmd2", output: "out2" },
+      { command: "cmd3", output: "out3" },
+      { command: "cmd4", output: "out4" },
+    ];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "current",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should show only last 2 history items when submittedCommand exists
+    expect(output).toContain("cmd3");
+    expect(output).toContain("cmd4");
+    expect(output).not.toContain("cmd1");
+    expect(output).not.toContain("cmd2");
+  });
+
+  it("should show more history when no submittedCommand", () => {
+    const commandHistory = [
+      { command: "cmd1", output: "out1" },
+      { command: "cmd2", output: "out2" },
+      { command: "cmd3", output: "out3" },
+    ];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should show last 3 history items when no submittedCommand
+    expect(output).toContain("cmd1");
+    expect(output).toContain("cmd2");
+    expect(output).toContain("cmd3");
+  });
+
+  it("should calculate maxLinesPerCommand based on available height", () => {
+    const commandHistory = [
+      { command: "cmd1", output: "out1" },
+      { command: "cmd2", output: "out2" },
+    ];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "current",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={10}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should enable truncation when height is limited", () => {
+    const commandHistory = [{ command: "cmd1", output: "line1\nline2\nline3\nline4\nline5" }];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={5}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should enable truncation when typing", () => {
+    const commandHistory = [{ command: "cmd1", output: "line1\nline2\nline3\nline4\nline5" }];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt="typing..."
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should enable truncation when multiple commands exist", () => {
+    const commandHistory = [
+      { command: "cmd1", output: "out1" },
+      { command: "cmd2", output: "out2" },
+    ];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "cmd3",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should handle empty command history", () => {
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toContain("test");
+    expect(output).toBeDefined();
+  });
+
+  it("should trim submittedCommand before executing", async () => {
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "  echo trimmed-test  ",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Command should be executed with trimmed value
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should handle very small availableHeight", () => {
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={1}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should handle multiple output chunks", async () => {
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "chunk1chunk2chunk3"',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+    const calls = mockOnCommandComplete.mock.calls;
+    if (calls.length > 0 && calls[0][0]) {
+      expect(calls[0][0]).toContain("chunk");
+    }
+  });
+
+  it("should handle stderr output", async () => {
+    // Use a command that produces stderr output
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "error message" >&2',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should handle mixed stdout and stderr", async () => {
+    // Use a command that produces both stdout and stderr
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: 'echo "stdout" && echo "stderr" >&2',
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should handle component unmount during command execution", async () => {
+    const instance = render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "sleep 0.1 && echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    // Unmount before command completes
+    cleanup();
+
+    // Should not crash
+    await sleep(200);
+  });
+
+  it("should handle new command submission while previous is running", async () => {
+    const { rerender } = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo command1",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(50);
+
+    // Submit new command before first completes
+    rerender(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo command2",
+          runId: 2,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Should handle both commands
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should handle many commands with limited height", () => {
+    const commandHistory = Array(10)
+      .fill(0)
+      .map((_, i) => ({
+        command: `cmd${i}`,
+        output: `out${i}`,
+      }));
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "current",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt=""
+        availableHeight={15}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should call onCommandComplete with empty string on error", async () => {
+    // Use a command that will fail (non-existent command)
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "nonexistentcommand12345",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Error handling should call onCommandComplete
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+  });
+
+  it("should reset output when new command starts", async () => {
+    const { rerender } = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo command1",
+          runId: 1,
+          output: "old output",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(300);
+
+    // Clear previous calls
+    mockSetState.mockClear();
+
+    // Submit new command with different runId
+    rerender(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo command2",
+          runId: 2,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // Output should be reset for new command (setState is called with isRunning: true first)
+    // The output reset happens in the useEffect via setOutput('')
+    expect(mockSetState).toHaveBeenCalled();
+  });
+
+  it("should handle command with no output", async () => {
+    // Use a command that produces no output (like true or : command)
+    render(
+      <BashRenderer
+        state={{
+          submittedCommand: "true",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(500);
+
+    // When stream has no chunks, commandOutput remains empty string
+    // onCommandComplete should be called with empty string to signal completion
+    expect(mockOnCommandComplete).toHaveBeenCalledWith("");
+  });
+
+  it("should handle very long command output", async () => {
+    // Use a command that produces long output
+    render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "python3 -c \"print('x' * 10000)\"",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    await sleep(1000);
+
+    expect(mockOnCommandComplete).toHaveBeenCalled();
+    const calls = mockOnCommandComplete.mock.calls;
+    if (calls.length > 0 && calls[0][0]) {
+      expect(calls[0][0].length).toBeGreaterThan(1000);
+    }
+  });
+
+  it("should use normalized command in BashRunner", () => {
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "  echo hello  ",
+          runId: 1,
+          output: "output",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    // Should show trimmed command
+    expect(output).toContain("echo hello");
+    expect(output).not.toContain("  echo hello  ");
+  });
+
+  it("should handle currentPrompt affecting truncation", () => {
+    const commandHistory = [{ command: "cmd1", output: "line1\nline2\nline3\nline4\nline5" }];
+
+    const instance = render(
+      <BashRenderer
+        state={{
+          submittedCommand: null,
+          runId: 0,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={commandHistory}
+        currentPrompt="typing command..."
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    expect(output).toBeDefined();
+  });
+
+  it("should not call onCommandComplete when command is cancelled by new command", async () => {
+    mockOnCommandComplete.mockClear();
+
+    const firstCommandCallback = vi.fn();
+    const secondCommandCallback = vi.fn();
+
+    const { rerender } = render(
+      <BashRenderer
+        state={{
+          submittedCommand: "sleep 0.3 && echo command1",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={firstCommandCallback}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    // Wait a bit for first command to start
+    await sleep(50);
+
+    // Submit new command before first completes (this should cancel the first)
+    rerender(
+      <BashRenderer
+        state={{
+          submittedCommand: "echo command2",
+          runId: 2,
+          output: "",
+          isRunning: false,
+        }}
+        setState={mockSetState}
+        onCommandComplete={secondCommandCallback}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    // Wait for both commands to potentially complete
+    await sleep(500);
+
+    // The first command should have been cancelled and not call onCommandComplete
+    expect(firstCommandCallback).not.toHaveBeenCalled();
+    // The second command should have completed and called onCommandComplete
+    expect(secondCommandCallback).toHaveBeenCalled();
+    expect(secondCommandCallback.mock.calls[0][0]).toContain("command2");
+  });
+
+  it("should not call onCommandComplete when component unmounts during execution", async () => {
+    mockOnCommandComplete.mockClear();
+
+    const instance = render(
+      <BashRendererWrapper
+        initialState={{
+          submittedCommand: "sleep 0.2 && echo test",
+          runId: 1,
+          output: "",
+          isRunning: false,
+        }}
+        onCommandComplete={mockOnCommandComplete}
+        commandHistory={[]}
+        currentPrompt=""
+        availableHeight={20}
+      />,
+    );
+
+    logInk(instance);
+
+    // Wait a bit for command to start
+    await sleep(50);
+
+    // Unmount before command completes
+    cleanup();
+
+    // Wait for command to potentially complete
+    await sleep(300);
+
+    // onCommandComplete should not be called for cancelled command
+    expect(mockOnCommandComplete).not.toHaveBeenCalled();
+  });
+});