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

package/src/components/ui/divider.tsx

@@ -1,162 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,228 +0,0 @@
-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: !disabled });
-
-    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

@@ -1,151 +0,0 @@
-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

@@ -1,76 +0,0 @@
-import { Text } from "@codellm/jar";
-import chalk from "chalk";
-import { startTransition } from "react";
-import { memo, 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 coloredText = useMemo(() => {
-    const peakPosition = offset % textLength;
-    const gradientWidth = Math.max(textLength * 0.6, 3);
-    let result = "";
-    for (let i = 0; i < textLength; i++) {
-      let distance = Math.abs(i - peakPosition);
-      const wrapDistance = textLength - distance;
-      const circularDistance = Math.min(distance, wrapDistance);
-      const brightness = Math.max(0, 1 - circularDistance / gradientWidth);
-      const rgb = interpolateRgb(baseRgb, brightness);
-      result += chalk.rgb(rgb.r, rgb.g, rgb.b)(text[i]);
-    }
-    return result;
-  }, [offset, textLength, baseRgb, text]);
-
-  return <Text>{coloredText}</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 interpolateRgb(base: RGB, brightness: number): RGB {
-  const minR = Math.floor(base.r * DIM_FACTOR);
-  const minG = Math.floor(base.g * DIM_FACTOR);
-  const minB = Math.floor(base.b * DIM_FACTOR);
-
-  return {
-    r: Math.floor(minR + (base.r - minR) * brightness),
-    g: Math.floor(minG + (base.g - minG) * brightness),
-    b: Math.floor(minB + (base.b - minB) * brightness),
-  };
-}