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

package/src/components/ui/divider.tsx

@@ -0,0 +1,162 @@
+import { View, type ViewStyle } from "@codellm/jar";
+
+/**
+ * Props for the Divider component.
+ */
+interface DividerProps {
+  /**
+   * Width of the divider.
+   *
+   * @example
+   * ```tsx
+   * <Divider width={50} />
+   *
+   * // ──────────────────────────────────────────────────
+   * ```
+   * @default 'auto'
+   */
+  width?: "auto" | number;
+
+  /**
+   * Padding at the start and the end of the divider.
+   *
+   * @example
+   * ```tsx
+   * <Divider padding={2} />
+   *
+   * // ··─────────────────────────────··
+   * ```
+   * @default 0
+   */
+  padding?: number;
+
+  /**
+   * Char used as a divider.
+   *
+   * @example
+   * ```tsx
+   * <Divider dividerChar="=" />
+   *
+   * // =============================
+   * ```
+   *
+   * @default '─'
+   */
+  dividerChar?: string;
+
+  /**
+   * Color of the divider's border. Matches the type of `borderColor` in the Ink `Box` component.
+   * Accepts standard Ink color names or hex codes.
+   *
+   * @example
+   * ```tsx
+   * <Divider dividerColor="red" />
+   * ```
+   *
+   * @default 'gray'
+   */
+  dividerColor?: ViewStyle["borderColor"];
+
+  /**
+   * Padding at the start and the end of the divider.
+   *
+   * @example
+   * ```tsx
+   * <Divider padding={2} />
+   *
+   * // ··─────────────────────────────··
+   * ```
+   * @default 0
+   */
+  childrenPadding?: number;
+
+  /**
+   * Additional props to be passed to the underlying Ink `Box` component.
+   *
+   *  @example
+   * ```tsx
+   * <Divider boxProps={{ marginTop: 2 }} />
+   *
+   *
+   * //
+   * //
+   * //  ─────────────────────────────
+   * ```
+   */
+  boxProps?: ViewStyle;
+}
+
+const BaseDivider: React.FC<DividerProps> = ({
+  width = "auto",
+  dividerChar,
+  dividerColor = "gray",
+  boxProps,
+}) => (
+  <View
+    width={width}
+    // @ts-expect-error
+    borderStyle={{
+      bottom: dividerChar,
+    }}
+    borderColor={dividerColor}
+    //
+    flexGrow={1}
+    //
+    borderBottom={true}
+    //
+    borderTop={false}
+    borderLeft={false}
+    borderRight={false}
+    //
+    {...boxProps}
+  />
+);
+
+/**
+ * A horizontal divider component styled as a single border line.
+ *
+ * @example
+ * ```tsx
+ * import { render } from 'ink'
+ * import Divider from 'ink-divider'
+ *
+ * render(<Divider title='Title' />)
+ *
+ * // ─────────── Title ───────────
+ * ```
+ *
+ * @returns A styled divider.
+ */
+export const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
+  width = "auto",
+  padding = 0,
+  dividerChar = "─",
+  dividerColor = "gray",
+  childrenPadding = 0,
+  boxProps,
+  children,
+}) => {
+  const dividerLine = (
+    <BaseDivider dividerChar={dividerChar} dividerColor={dividerColor} boxProps={boxProps} />
+  );
+
+  // If there is no title, return only the divider line
+  if (!children) {
+    return (
+      <View paddingLeft={padding} paddingRight={padding}>
+        {dividerLine}
+      </View>
+    );
+  }
+
+  // Otherwise, return the divider line with the title in the middle
+  return (
+    <View width={width} paddingLeft={padding} paddingRight={padding} gap={childrenPadding}>
+      {dividerLine}
+
+      <View>{children}</View>
+
+      {dividerLine}
+    </View>
+  );
+};

package/src/components/ui/gradient.tsx

@@ -0,0 +1,56 @@
+import { Text } from "@codellm/jar";
+import * as gradientString from "gradient-string";
+import { memo, useMemo } from "react";
+import stripAnsi from "strip-ansi";
+
+type GradientName =
+  | "atlas"
+  | "cristal"
+  | "teen"
+  | "mind"
+  | "morning"
+  | "vice"
+  | "passion"
+  | "fruit"
+  | "instagram"
+  | "retro"
+  | "summer"
+  | "pastel"
+  | "rainbow";
+
+type GradientColors = Array<tinycolor.ColorInput>;
+
+type GradientProps = {
+  readonly children: React.ReactNode;
+} & (
+  | {
+      /**
+       * The name of a [built-in gradient](https://github.com/bokub/gradient-string#available-built-in-gradients).
+       * Mutually exclusive with `colors`.
+       */
+      readonly name: GradientName;
+      readonly colors?: never;
+    }
+  | {
+      /**
+       * [Colors to use to make the gradient.](https://github.com/bokub/gradient-string#initialize-a-gradient)
+       * Mutually exclusive with `name`.
+       */
+      readonly colors: GradientColors;
+      readonly name?: never;
+    }
+);
+
+export const Gradient = memo((props: GradientProps) => {
+  const gradient = useMemo(() => {
+    if (props.name) {
+      return gradientString[props.name];
+    }
+    return gradientString.default(...props.colors);
+  }, [props.name, props.colors]);
+
+  const applyGradient = (text: string) => gradient.multiline(stripAnsi(text));
+
+  return <Text transform={applyGradient}>{props.children}</Text>;
+});
+Gradient.displayName = "Gradient";

package/src/components/ui/input.tsx

@@ -0,0 +1,228 @@
+import { View, Text } from "@codellm/jar";
+import { type Key, useInput, useFocusState } from "@codellm/jar";
+import chalk from "chalk";
+import { memo, useCallback, useEffect, useMemo } from "react";
+
+import { TextBuffer, useTextBuffer } from "../../lib/text-buffer.js";
+
+export interface InputKeyDownEvent {
+  input: string;
+  key: Key;
+  target: TextBuffer;
+  preventDefault: () => void;
+}
+
+type GrammarRule = {
+  regex: RegExp;
+  color: string;
+};
+
+interface InputProps extends Omit<React.ComponentProps<typeof View>, "children" | "ref"> {
+  ref?: React.RefObject<TextBuffer | null>;
+  initialValue?: string;
+  onKeyDown?: (e: InputKeyDownEvent) => void;
+  onChange?: (value: string, buffer: TextBuffer) => void;
+  onSubmit?: (value: string) => void;
+  placeholder?: string;
+  placeholderProps?: Omit<React.ComponentProps<typeof Text>, "children">;
+  grammar?: ReadonlyArray<GrammarRule>;
+  disabled?: boolean;
+  width?: number;
+  height?: number;
+}
+
+const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+
+function colorizeWithChalk(text: string, color: string): string {
+  if (!text) return text;
+  if (HEX_COLOR_RE.test(color)) return chalk.hex(color)(text);
+  const maybe = (chalk as unknown as Record<string, unknown>)[color];
+  if (typeof maybe === "function") {
+    const fn = maybe as (input: string) => string;
+    return fn(text);
+  }
+  return text;
+}
+
+function ensureGlobalRegex(regex: RegExp): RegExp {
+  const flags = regex.flags.includes("g") ? regex.flags : `${regex.flags}g`;
+  return new RegExp(regex.source, flags);
+}
+
+function highlightTextWithGrammar(text: string, rules?: ReadonlyArray<GrammarRule>): string {
+  if (!rules?.length || !text) return text;
+
+  type Token = { text: string; styled: boolean };
+  let tokens: Token[] = [{ text, styled: false }];
+
+  for (const rule of rules) {
+    const regex = ensureGlobalRegex(rule.regex);
+    const nextTokens: Token[] = [];
+
+    for (const token of tokens) {
+      if (token.styled || !token.text) {
+        nextTokens.push(token);
+        continue;
+      }
+
+      let lastIndex = 0;
+      let match: RegExpExecArray | null;
+      while ((match = regex.exec(token.text)) !== null) {
+        const start = match.index;
+        const end = start + match[0].length;
+
+        if (start > lastIndex) {
+          nextTokens.push({ text: token.text.slice(lastIndex, start), styled: false });
+        }
+
+        const matched = token.text.slice(start, end);
+        const colored = colorizeWithChalk(matched, rule.color);
+        nextTokens.push({ text: colored, styled: true });
+
+        if (end === lastIndex) {
+          regex.lastIndex += 1;
+        }
+        lastIndex = end;
+      }
+
+      if (lastIndex < token.text.length) {
+        nextTokens.push({ text: token.text.slice(lastIndex), styled: false });
+      }
+    }
+
+    tokens = nextTokens;
+  }
+
+  return tokens.map((t) => t.text).join("");
+}
+
+export const Input = memo(
+  ({
+    initialValue,
+    onChange,
+    onSubmit,
+    placeholder = "Type text...",
+    ref,
+    placeholderProps,
+    onKeyDown,
+    grammar,
+    disabled,
+    width = Number.MAX_SAFE_INTEGER,
+    height = Number.MAX_SAFE_INTEGER,
+    ...props
+  }: InputProps) => {
+    const { isFocused } = useFocusState();
+
+    const buffer = useTextBuffer({
+      initialText: initialValue,
+      initialCursorOffset: 0,
+      viewport: { width, height },
+      onChange: (value) => onChange?.(value, buffer),
+    });
+
+    useEffect(() => {
+      if (ref) {
+        ref.current = buffer;
+      }
+    }, [buffer, ref]);
+
+    const handleSubmit = useCallback(() => {
+      const value = buffer.text;
+      if (!value.trim()) return;
+      onSubmit?.(value);
+      buffer.setText("");
+    }, [buffer, onSubmit]);
+
+    const handleKeypress = useCallback(
+      (input: string, key: Key) => {
+        let prevented = false;
+        onKeyDown?.({
+          input,
+          key,
+          target: buffer,
+          preventDefault: () => {
+            prevented = true;
+          },
+        });
+        if (prevented) return;
+        if (disabled) return;
+
+        if (!disabled && key.return && !key.ctrl && !key.meta && !key.shift) {
+          // Check for backslash-enter pattern for newline
+          const text = buffer.text;
+          if (text.endsWith("\\")) {
+            // Remove the backslash and insert a newline
+            buffer.backspace();
+            buffer.newline();
+            return;
+          }
+          handleSubmit();
+          return;
+        }
+
+        buffer.handleInput(input, key);
+      },
+      [buffer, handleSubmit, onKeyDown, disabled],
+    );
+
+    useInput(handleKeypress, { isActive: true });
+
+    const linesToRender = buffer.viewportVisualLines;
+    const [cursorVisualRowAbsolute, cursorVisualColAbsolute] = buffer.visualCursor;
+    const scrollVisualRow = buffer.visualScrollRow;
+
+    const showCursor = isFocused;
+    const applyGrammar = useMemo(
+      () => (text: string) => highlightTextWithGrammar(text, grammar),
+      [grammar],
+    );
+
+    if (!buffer.text && placeholder) {
+      return (
+        <View {...props}>
+          {showCursor ? (
+            <Text dimColor {...placeholderProps}>
+              {chalk.inverse(placeholder.slice(0, 1))}
+              {placeholder.slice(1)}
+            </Text>
+          ) : (
+            <Text color="gray" {...placeholderProps}>
+              {placeholder}
+            </Text>
+          )}
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column" flexGrow={1} {...props}>
+        {linesToRender.map((lineText, visualIdxInRenderedSet) => {
+          const absoluteVisualIdx = scrollVisualRow + visualIdxInRenderedSet;
+          const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
+          const isOnCursorLine = showCursor && visualIdxInRenderedSet === cursorVisualRow;
+
+          if (!isOnCursorLine) {
+            const content = grammar?.length ? applyGrammar(lineText) : lineText;
+            return <Text key={`line-${absoluteVisualIdx}`}>{content || " "}</Text>;
+          }
+
+          const before = lineText.slice(0, cursorVisualColAbsolute);
+          const cursorChar = lineText[cursorVisualColAbsolute] ?? " ";
+          const after = lineText.slice(cursorVisualColAbsolute + 1);
+          const beforeHighlighted = grammar?.length ? applyGrammar(before) : before;
+          const afterHighlighted = grammar?.length ? applyGrammar(after) : after;
+
+          return (
+            <Text key={`line-${absoluteVisualIdx}`}>
+              {beforeHighlighted}
+              {chalk.inverse(cursorChar)}
+              {afterHighlighted}
+            </Text>
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/components/ui/select.tsx

@@ -0,0 +1,151 @@
+import { View, Text, useInput } from "@codellm/jar";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+
+interface SelectProps {
+  items: string[];
+  limit?: number;
+  maxHeight?: number;
+  initialIndex?: number;
+  isActive?: boolean;
+  showIndex?: boolean;
+  showIndicators?: boolean;
+  onHighlight?: (item: string, index: number) => void;
+  onSubmit?: (item: string, index: number) => void;
+  onTab?: (item: string, index: number) => void;
+  onCancel?: () => void;
+}
+
+export const Select = memo(
+  ({
+    items,
+    limit = 10,
+    maxHeight,
+    initialIndex = 0,
+    isActive = true,
+    showIndex = true,
+    showIndicators = false,
+    onHighlight,
+    onSubmit,
+    onTab,
+    onCancel,
+  }: SelectProps) => {
+    const total = items.length;
+    const clampedInitial = Math.max(0, Math.min(initialIndex, Math.max(0, total - 1)));
+    const [selected, setSelected] = useState(clampedInitial);
+    const [start, setStart] = useState(0);
+
+    const effectiveLimit = useMemo(() => {
+      if (maxHeight !== undefined && maxHeight > 0) {
+        const indicatorRows = (showIndicators ? 2 : 0) + (showIndex ? 1 : 0);
+        return Math.max(1, Math.min(limit, maxHeight - indicatorRows));
+      }
+      return limit;
+    }, [maxHeight, limit, showIndicators, showIndex]);
+
+    const visibleCount = Math.max(1, Math.min(effectiveLimit, total || effectiveLimit));
+    const mid = Math.floor(visibleCount / 2);
+
+    useEffect(() => {
+      if (selected >= total) {
+        setSelected(total === 0 ? 0 : total - 1);
+        setStart(0);
+      }
+    }, [total, selected]);
+
+    useEffect(() => {
+      if (typeof onHighlight === "function" && total > 0) {
+        onHighlight(items[selected], selected);
+      }
+    }, [selected, total, items, onHighlight]);
+
+    const clampStart = useCallback(
+      (s: number) => {
+        const maxStart = Math.max(0, total - visibleCount);
+        return Math.max(0, Math.min(s, maxStart));
+      },
+      [total, visibleCount],
+    );
+
+    const moveUp = useCallback(() => {
+      if (total === 0) return;
+      const nextSel = (selected - 1 + total) % total;
+      setSelected(nextSel);
+      if (nextSel < start + mid) setStart(clampStart(nextSel - mid));
+      if (nextSel > start + visibleCount - 1) setStart(clampStart(nextSel - visibleCount + 1));
+    }, [total, selected, start, mid, visibleCount, clampStart]);
+
+    const moveDown = useCallback(() => {
+      if (total === 0) return;
+      const nextSel = (selected + 1) % total;
+      setSelected(nextSel);
+      if (nextSel > start + mid) setStart(clampStart(nextSel - mid));
+      if (nextSel < start) setStart(clampStart(nextSel));
+    }, [total, selected, start, mid, clampStart]);
+
+    useInput(
+      (_input, key) => {
+        if (!isActive) return;
+        if (key.upArrow) {
+          moveUp();
+          return;
+        }
+        if (key.downArrow) {
+          moveDown();
+          return;
+        }
+        if (key.escape) {
+          onCancel?.();
+          return;
+        }
+        if (key.tab && !key.ctrl && !key.meta && !key.shift) {
+          if (total > 0) onTab?.(items[selected], selected);
+          return;
+        }
+        if (key.return && !key.ctrl && !key.meta && !key.shift) {
+          if (total > 0) onSubmit?.(items[selected], selected);
+          else onCancel?.();
+        }
+      },
+      { isActive },
+    );
+
+    const windowed = useMemo(() => {
+      if (total === 0) return [] as string[];
+      const end = Math.min(total, start + visibleCount);
+      return items.slice(start, end);
+    }, [items, total, start, visibleCount]);
+
+    const hasSpaceForIndicators = maxHeight === undefined || maxHeight >= 3;
+    const effectiveShowIndicators = showIndicators && hasSpaceForIndicators;
+    const effectiveShowIndex = showIndex && hasSpaceForIndicators;
+
+    return (
+      <View flexDirection="column">
+        {effectiveShowIndicators && total > 0 && start > 0 && (
+          <Text dimColor>▲ {effectiveShowIndex && total > 1 && `(${selected + 1}/${total})`}</Text>
+        )}
+        {total === 0 ? (
+          <Text dimColor>No matches</Text>
+        ) : (
+          windowed.map((label, idx) => {
+            const absoluteIndex = start + idx;
+            const isSelected = absoluteIndex === selected;
+            return (
+              <Text key={`${label}-${absoluteIndex}`} color={isSelected ? "cyanBright" : undefined}>
+                {isSelected ? "> " : "  "}
+                {label}
+              </Text>
+            );
+          })
+        )}
+        {effectiveShowIndicators && total > 0 && start + visibleCount < total && (
+          <Text dimColor>▼ {effectiveShowIndex && total > 1 && `(${selected + 1}/${total})`}</Text>
+        )}
+        {!effectiveShowIndicators && effectiveShowIndex && total > 1 && (
+          <Text dimColor>{`(${selected + 1}/${total})`}</Text>
+        )}
+      </View>
+    );
+  },
+);
+Select.displayName = "Select";

package/src/components/ui/shimmer.tsx

@@ -0,0 +1,84 @@
+import { Text } from "@codellm/jar";
+import { startTransition } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+
+interface ShimmerProps {
+  text: string;
+  color?: string;
+}
+
+const SHIMMER_INTERVAL = 100;
+const DIM_FACTOR = 0.25;
+
+export const Shimmer = memo(({ text, color = "#94a3b8" }: ShimmerProps) => {
+  const [offset, setOffset] = useState(0);
+  const textLength = text.length;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Lowest priority: animation re-renders must never delay input or streaming.
+      startTransition(() => {
+        setOffset((prev) => prev + 1);
+      });
+    }, SHIMMER_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const baseRgb = useMemo(() => parseHexColor(color), [color]);
+
+  const getCharColor = useCallback(
+    (index: number): string => {
+      const peakPosition = offset % textLength;
+
+      let distance = Math.abs(index - peakPosition);
+      const wrapDistance = textLength - distance;
+      const circularDistance = Math.min(distance, wrapDistance);
+
+      const gradientWidth = Math.max(textLength * 0.6, 3);
+      const brightness = Math.max(0, 1 - circularDistance / gradientWidth);
+
+      return interpolateColor(baseRgb, brightness);
+    },
+    [offset, textLength, baseRgb],
+  );
+
+  return (
+    <Text>
+      {text.split("").map((char, index) => (
+        <Text key={`${char}-${index}`} color={getCharColor(index)}>
+          {char}
+        </Text>
+      ))}
+    </Text>
+  );
+});
+
+Shimmer.displayName = "Shimmer";
+
+interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+function parseHexColor(hex: string): RGB {
+  const cleanHex = hex.replace("#", "");
+  return {
+    r: parseInt(cleanHex.substring(0, 2), 16),
+    g: parseInt(cleanHex.substring(2, 4), 16),
+    b: parseInt(cleanHex.substring(4, 6), 16),
+  };
+}
+
+function interpolateColor(base: RGB, brightness: number): string {
+  const minR = Math.floor(base.r * DIM_FACTOR);
+  const minG = Math.floor(base.g * DIM_FACTOR);
+  const minB = Math.floor(base.b * DIM_FACTOR);
+
+  const newR = Math.floor(minR + (base.r - minR) * brightness);
+  const newG = Math.floor(minG + (base.g - minG) * brightness);
+  const newB = Math.floor(minB + (base.b - minB) * brightness);
+
+  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+}