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

package/src/components/ui/__tests__/gradient.test.tsx

@@ -0,0 +1,125 @@
+import { Text } from "@codellm/jar";
+import stripAnsi from "strip-ansi";
+import { describe, expect } from "vitest";
+
+// TODO: re-enable when jar testing utilities are available
+import { render, logInk, cleanup } from "../../../lib/test-utils.js";
+import { Gradient } from "../gradient.js";
+
+describe.concurrent("Gradient", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render text with a named gradient", () => {
+    const instance = render(
+      <Gradient name="rainbow">
+        <Text>Hello World</Text>
+      </Gradient>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "Hello World";
+
+    expect(output).toBeDefined();
+    expect(typeof output).toBe("string");
+    // The gradient should apply ANSI color codes to the text
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present (output should be longer than plain text)
+    expect(output.length).toBeGreaterThan(plainText.length);
+    // Verify ANSI escape sequences are present (should contain escape character)
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should render text with custom colors", () => {
+    const instance = render(
+      <Gradient colors={["#ff0000", "#0000ff"]}>
+        <Text>Test Text</Text>
+      </Gradient>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "Test Text";
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present (output should be longer than plain text)
+    expect(output.length).toBeGreaterThan(plainText.length);
+    // Verify ANSI escape sequences are present
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  const gradientNames = [
+    "atlas",
+    "cristal",
+    "teen",
+    "mind",
+    "morning",
+    "vice",
+    "passion",
+    "fruit",
+    "instagram",
+    "retro",
+    "summer",
+    "pastel",
+    "rainbow",
+  ] as const;
+  for (const name of gradientNames) {
+    it(`should handle gradient name: ${name}`, () => {
+      const instance = render(
+        <Gradient name={name}>
+          <Text>Test Text</Text>
+        </Gradient>,
+      );
+
+      logInk(instance);
+
+      const output = instance.frames.join("");
+      const plainText = "Test Text";
+
+      expect(output).toBeDefined();
+      expect(stripAnsi(output)).toContain(plainText);
+      // Verify that ANSI codes are present
+      expect(output.length).toBeGreaterThan(plainText.length);
+      expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+    });
+  }
+
+  it("should handle multiline text", () => {
+    const instance = render(
+      <Gradient name="rainbow">
+        <Text>Line 1{"\n"}Line 2</Text>
+      </Gradient>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain("Line 1");
+    expect(stripAnsi(output)).toContain("Line 2");
+    // Verify that ANSI codes are present
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should handle empty text", () => {
+    const instance = render(
+      <Gradient name="rainbow">
+        <Text></Text>
+      </Gradient>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Empty text should still be valid (may or may not have ANSI codes)
+    expect(typeof output).toBe("string");
+  });
+});

package/src/components/ui/__tests__/input.test.tsx

@@ -0,0 +1,166 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { stripAnsi } from "../../../lib/ansi.js";
+import { render, logInk, cleanup } from "../../../lib/test-utils.js";
+import { Input } from "../input.js";
+
+describe.concurrent("Input", () => {
+  const TestWrapper = ({ children }: React.PropsWithChildren) => <>{children}</>;
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render with placeholder", () => {
+    const instance = render(
+      <TestWrapper>
+        <Input placeholder="Enter text..." />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(typeof output).toBe("string");
+    expect(output).toContain("Enter text...");
+  });
+
+  it("should render with initial value", () => {
+    const instance = render(
+      <TestWrapper>
+        <Input initialValue="Hello" />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("Hello");
+  });
+
+  it("should call onChange when value changes", () => {
+    const onChange = vi.fn();
+    render(
+      <TestWrapper>
+        <Input onChange={onChange} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onChange prop
+    expect(onChange).toBeDefined();
+  });
+
+  it("should call onSubmit when enter is pressed", () => {
+    const onSubmit = vi.fn();
+    render(
+      <TestWrapper>
+        <Input initialValue="test" onSubmit={onSubmit} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onSubmit prop
+    expect(onSubmit).toBeDefined();
+  });
+
+  it("should handle ref", () => {
+    const ref = createRef<any>();
+    render(
+      <TestWrapper>
+        <Input ref={ref} />
+      </TestWrapper>,
+    );
+
+    // The ref should be set after render
+    expect(ref.current).toBeDefined();
+  });
+
+  it("should render with custom placeholder props", () => {
+    const instance = render(
+      <TestWrapper>
+        <Input placeholder="Custom" placeholderProps={{ color: "blue" }} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("Custom");
+  });
+
+  it("should handle disabled state", () => {
+    const instance = render(
+      <TestWrapper>
+        <Input disabled placeholder="Disabled input" />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("Disabled input");
+  });
+
+  it("should handle grammar highlighting", () => {
+    const grammar = [
+      { regex: /\d+/g, color: "red" },
+      { regex: /[a-z]+/g, color: "blue" },
+    ];
+
+    const instance = render(
+      <TestWrapper>
+        <Input initialValue="test123" grammar={grammar} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("test");
+    expect(output).toContain("123");
+  });
+
+  it("should handle onKeyDown callback", () => {
+    const onKeyDown = vi.fn();
+    render(
+      <TestWrapper>
+        <Input onKeyDown={onKeyDown} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onKeyDown prop
+    expect(onKeyDown).toBeDefined();
+  });
+
+  it("should handle width and height constraints", () => {
+    const instance = render(
+      <TestWrapper>
+        <Input
+          initialValue="This is a long text that should be constrained"
+          width={20}
+          height={5}
+        />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("This is a long");
+  });
+});

package/src/components/ui/__tests__/select.test.tsx

@@ -0,0 +1,273 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { cleanup, render, logInk } from "../../../lib/test-utils.js";
+import { Select } from "../select.js";
+
+describe.concurrent("Select", () => {
+  const TestWrapper = ({ children }: React.PropsWithChildren) => <>{children}</>;
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render items", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(typeof output).toBe("string");
+    expect(output).toContain("Item 1");
+    expect(output).toContain("Item 2");
+    expect(output).toContain("Item 3");
+  });
+
+  it("should highlight the first item by default", () => {
+    const items = ["First", "Second", "Third"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // The selected item should have a '>' prefix
+    expect(output).toContain("> First");
+  });
+
+  it("should use initialIndex to set initial selection", () => {
+    const items = ["First", "Second", "Third"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} initialIndex={1} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(output).toContain("> Second");
+  });
+
+  it('should show "No matches" when items array is empty', () => {
+    const instance = render(
+      <TestWrapper>
+        <Select items={[]} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(output).toContain("No matches");
+  });
+
+  it("should respect limit prop", () => {
+    const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} limit={5} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should only show up to limit items
+    expect(output).toContain("Item 1");
+    expect(output).toContain("Item 5");
+    // Should not show items beyond limit
+    expect(output).not.toContain("Item 6");
+  });
+
+  it("should show index when showIndex is true", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} showIndex={true} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should show index like (1/3)
+    expect(output).toContain("(1/3)");
+  });
+
+  it("should not show index when showIndex is false", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} showIndex={false} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should not show index
+    expect(output).not.toContain("(1/3)");
+  });
+
+  it("should show indicators when showIndicators is true and there are more items", () => {
+    const items = Array.from({ length: 15 }, (_, i) => `Item ${i + 1}`);
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} limit={5} showIndicators={true} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should show scroll indicators when there are more items
+    expect(output).toContain("▼");
+  });
+
+  it("should call onHighlight when selection changes", () => {
+    const onHighlight = vi.fn();
+    const items = ["Item 1", "Item 2", "Item 3"];
+    render(
+      <TestWrapper>
+        <Select items={items} onHighlight={onHighlight} />
+      </TestWrapper>,
+    );
+
+    // onHighlight should be called with the initial selection
+    // Note: Testing actual keypress events would require more complex setup
+    expect(onHighlight).toBeDefined();
+  });
+
+  it("should call onSubmit when enter is pressed", () => {
+    const onSubmit = vi.fn();
+    const items = ["Item 1", "Item 2", "Item 3"];
+    render(
+      <TestWrapper>
+        <Select items={items} onSubmit={onSubmit} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onSubmit prop
+    expect(onSubmit).toBeDefined();
+  });
+
+  it("should call onCancel when escape is pressed", () => {
+    const onCancel = vi.fn();
+    const items = ["Item 1", "Item 2", "Item 3"];
+    render(
+      <TestWrapper>
+        <Select items={items} onCancel={onCancel} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onCancel prop
+    expect(onCancel).toBeDefined();
+  });
+
+  it("should call onTab when tab is pressed", () => {
+    const onTab = vi.fn();
+    const items = ["Item 1", "Item 2", "Item 3"];
+    render(
+      <TestWrapper>
+        <Select items={items} onTab={onTab} />
+      </TestWrapper>,
+    );
+
+    // Note: Testing actual keypress events would require more complex setup
+    // This test verifies the component renders correctly with the onTab prop
+    expect(onTab).toBeDefined();
+  });
+
+  it("should respect isActive prop", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} isActive={false} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(output).toContain("Item 1");
+  });
+
+  it("should handle maxHeight constraint", () => {
+    const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} limit={10} maxHeight={5} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should respect maxHeight constraint
+    expect(output).toContain("Item 1");
+  });
+
+  it("should clamp initialIndex to valid range", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} initialIndex={10} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should clamp to last item (index 2)
+    expect(output).toContain("> Item 3");
+  });
+
+  it("should handle negative initialIndex", () => {
+    const items = ["Item 1", "Item 2", "Item 3"];
+    const instance = render(
+      <TestWrapper>
+        <Select items={items} initialIndex={-1} />
+      </TestWrapper>,
+    );
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    // Should clamp to first item (index 0)
+    expect(output).toContain("> Item 1");
+  });
+});

package/src/components/ui/__tests__/shimmer.test.tsx

@@ -0,0 +1,99 @@
+import stripAnsi from "strip-ansi";
+import { describe, expect } from "vitest";
+
+import { render, logInk, cleanup } from "../../../lib/test-utils.js";
+import { Shimmer } from "../shimmer.js";
+
+describe.concurrent("Shimmer", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render text with shimmer effect", () => {
+    const instance = render(<Shimmer text="Hello World Shimmer" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "Hello World Shimmer";
+
+    expect(output).toBeDefined();
+    expect(typeof output).toBe("string");
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present (output should be longer than plain text)
+    expect(output.length).toBeGreaterThan(plainText.length);
+    // Verify ANSI escape sequences are present
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should render with custom color", () => {
+    const instance = render(<Shimmer text="Test" color="#ff0000" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "Test";
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present
+    expect(output.length).toBeGreaterThan(plainText.length);
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should handle empty text", () => {
+    const instance = render(<Shimmer text="" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+  });
+
+  it("should handle single character", () => {
+    const instance = render(<Shimmer text="A" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "A";
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present
+    expect(output.length).toBeGreaterThan(plainText.length);
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should handle long text", () => {
+    const longText =
+      "This is a very long text that should still render properly with the shimmer effect";
+    const instance = render(<Shimmer text={longText} />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain(longText);
+    // Verify that ANSI codes are present
+    expect(output.length).toBeGreaterThan(longText.length);
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+
+  it("should use default color when not provided", () => {
+    const instance = render(<Shimmer text="Default Shimmer" />);
+
+    logInk(instance);
+
+    const output = instance.frames.join("");
+    const plainText = "Default Shimmer";
+
+    expect(output).toBeDefined();
+    expect(stripAnsi(output)).toContain(plainText);
+    // Verify that ANSI codes are present
+    expect(output.length).toBeGreaterThan(plainText.length);
+    expect(output).toMatch(new RegExp(String.fromCharCode(27) + "\\["));
+  });
+});

package/src/components/ui/blinking-indicator.tsx

@@ -0,0 +1,25 @@
+import { Text } from "@codellm/jar";
+import { memo, useEffect, useState } from "react";
+
+interface BlinkingIndicatorProps {
+  char: string;
+  color?: string;
+}
+
+const BLINK_INTERVAL = 500; // ms
+
+export const BlinkingIndicator = memo(({ char, color }: BlinkingIndicatorProps) => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, BLINK_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <Text color={color}>{visible ? char : " "}</Text>;
+});
+
+BlinkingIndicator.displayName = "BlinkingIndicator";