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

package/src/components/composer/process.ts

@@ -0,0 +1,65 @@
+import { spawn } from "node:child_process";
+
+export type StreamChunk = { type: "stdout" | "stderr"; data: string };
+
+type Resolver = (() => void) | null;
+
+export function runCommandStreaming(commandLine: string): {
+  stream: AsyncGenerator<StreamChunk, void, void>;
+  exit: Promise<number>;
+} {
+  const child = spawn(commandLine, { shell: true, stdio: ["ignore", "pipe", "pipe"] });
+
+  const queue: StreamChunk[] = [];
+  let notify: Resolver = null;
+  let closed = false;
+  let exitCode = 0;
+
+  const onData = (type: "stdout" | "stderr") => (chunk: unknown) => {
+    const data =
+      typeof chunk === "string"
+        ? chunk
+        : Buffer.isBuffer(chunk)
+          ? chunk.toString("utf8")
+          : String(chunk);
+    queue.push({ type, data });
+    if (notify) {
+      const n = notify;
+      notify = null;
+      n();
+    }
+  };
+
+  child.stdout?.on("data", onData("stdout"));
+  child.stderr?.on("data", onData("stderr"));
+
+  const exit = new Promise<number>((resolve) => {
+    child.on("close", (code) => {
+      exitCode = typeof code === "number" ? code : 0;
+      closed = true;
+      if (notify) {
+        const n = notify;
+        notify = null;
+        n();
+      }
+      resolve(exitCode);
+    });
+  });
+
+  async function* stream(): AsyncGenerator<StreamChunk, void, void> {
+    while (true) {
+      while (queue.length > 0) {
+        const item = queue.shift() as StreamChunk;
+        yield item;
+      }
+      if (closed) {
+        return;
+      }
+      await new Promise<void>((r) => {
+        notify = r;
+      });
+    }
+  }
+
+  return { stream: stream(), exit };
+}

package/src/components/composer/types.ts

@@ -0,0 +1,9 @@
+export { AgentMode } from "@codellm/agent";
+export enum ComposerMode {
+  Prompt,
+  Help,
+  Bash,
+  Command,
+  Files,
+}
+export type ModeMeta = { color?: string; placeholder: string; prefix: string };

package/src/components/composer/use-mention-search.ts

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+
+import { searchFiles } from "../../lib/fs.js";
+import { abbreviateCwd } from "../../lib/path.js";
+
+const DEBOUNCE_MS = 100;
+
+export function useMentionSearch(query: string) {
+  const [results, setResults] = useState<string[]>([]);
+  const [isDirectory, setIsDirectory] = useState<boolean[]>([]);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastQueryRef = useRef<string>("");
+
+  useEffect(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    if (query.trim().length === 0) {
+      setResults([]);
+      setIsDirectory([]);
+      lastQueryRef.current = "";
+      return;
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      if (query === lastQueryRef.current) {
+        return;
+      }
+      lastQueryRef.current = query;
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      const run = async () => {
+        try {
+          const iter = searchFiles(query, { root: process.cwd() });
+          for await (const batch of iter) {
+            if (controller.signal.aborted) {
+              return;
+            }
+            const abbreviated = batch.paths.map(abbreviateCwd);
+            setResults(abbreviated);
+            setIsDirectory(batch.isDirectory);
+          }
+        } catch {
+          // Silently handle errors - likely aborted
+        }
+      };
+      void run();
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [query]);
+
+  return { results, isDirectory };
+}

package/src/components/error-boundry.tsx

@@ -0,0 +1,60 @@
+import { View, Text } from "@codellm/jar";
+import { Component } from "react";
+
+export interface ErrorBoundaryProps extends React.PropsWithChildren {
+  fallback?:
+    | React.ReactNode
+    | ((error: Error, errorInfo: React.ErrorInfo | null) => React.ReactNode);
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  override state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    errorInfo: null,
+  };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error, errorInfo: null };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ error, errorInfo });
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  override render() {
+    const { hasError, error, errorInfo } = this.state;
+    const { fallback, children } = this.props;
+
+    if (hasError) {
+      if (fallback) {
+        return typeof fallback === "function" ? fallback(error!, errorInfo) : fallback;
+      }
+      return (
+        <View flexDirection="column" padding={1}>
+          <Text color="red" bold>
+            Something went wrong.
+          </Text>
+          {error && (
+            <View marginTop={1} flexDirection="column">
+              <Text color="yellow">{error.toString()}</Text>
+              {errorInfo?.componentStack && <Text color="gray">{errorInfo.componentStack}</Text>}
+            </View>
+          )}
+        </View>
+      );
+    }
+
+    return children;
+  }
+}

package/src/components/exit-message.tsx

@@ -0,0 +1,29 @@
+import { View, Text } from "@codellm/jar";
+import { memo } from "react";
+
+import { useTheme } from "../theme/index.js";
+import { SMALL_BLOCK } from "./logo.js";
+
+interface ExitMessageProps {
+  duration: string;
+  credits: number;
+  conversationId?: string | null;
+}
+
+export const ExitMessage = memo(({ duration, credits, conversationId }: ExitMessageProps) => {
+  const { colors } = useTheme();
+
+  return (
+    <View flexDirection="column" paddingY={1}>
+      <Text color={colors.primary}>{SMALL_BLOCK}</Text>
+      <View height={1} />
+      <Text color={colors.info}>https://desktop.abacus.ai</Text>
+      <View height={1} />
+      <Text dimColor>Spent {duration} in the CLI</Text>
+      {credits > 0 && <Text dimColor>Total credits used: {Math.floor(credits * 100) / 100}</Text>}
+      {conversationId && <Text dimColor>abacusai --resume {conversationId}</Text>}
+    </View>
+  );
+});
+
+ExitMessage.displayName = "ExitMessage";

package/src/components/expanded-view.tsx

@@ -0,0 +1,74 @@
+import { View, Text, useInput } from "@codellm/jar";
+import { memo, useMemo } from "react";
+
+import type { HistorySegment } from "../lib/types.js";
+
+import { useTheme } from "../theme/index.js";
+import { Segment, ExpandedThinkingSegment } from "./segments.js";
+
+interface ExpandedViewProps {
+  /** Snapshot of segments taken when expand mode was activated — never updates */
+  snapshot: HistorySegment[];
+  onClose: () => void;
+}
+
+/**
+ * Read-only expanded view: shows all segments including thoughts and full tool results.
+ * This is a static snapshot — it won't update while open.
+ * Ctrl+O or Escape closes it.
+ */
+export const ExpandedView = memo(({ snapshot, onClose }: ExpandedViewProps) => {
+  const { colors } = useTheme();
+
+  // Handle Ctrl+O and Escape to close
+  useInput((input, key) => {
+    if ((key.ctrl || key.super) && input === "o") {
+      onClose();
+    }
+    if (key.escape) {
+      onClose();
+    }
+  });
+
+  // Filter out temp/spinny segments
+  const segments = useMemo(() => snapshot.filter((s) => !s.temp && !s.isSpinny), [snapshot]);
+
+  return (
+    <View flexDirection="column" gap={1}>
+      <View flexDirection="column" gap={1} paddingBottom={1} width="95%">
+        {segments.map((seg) => (
+          <ExpandedSegment key={seg.id} segment={seg} />
+        ))}
+      </View>
+
+      {/* Footer */}
+      <View
+        borderStyle="single"
+        borderColor={colors.border}
+        paddingLeft={1}
+        paddingRight={1}
+        flexDirection="row"
+        gap={2}
+      >
+        <Text color={colors.textMuted}>expanded view</Text>
+        <Text dimColor>ctrl+o or esc to collapse</Text>
+      </View>
+    </View>
+  );
+});
+ExpandedView.displayName = "ExpandedView";
+
+/**
+ * In expanded view:
+ * - thinking segments are always shown via ExpandedThinkingSegment
+ * - all other segments (including tool calls) render normally via Segment,
+ *   which already includes full tool result output via ToolDef.renderUI
+ */
+const ExpandedSegment = memo(({ segment }: { segment: HistorySegment }) => {
+  if (segment.type === "thinking") {
+    return <ExpandedThinkingSegment {...segment} />;
+  }
+
+  return <Segment segment={segment} />;
+});
+ExpandedSegment.displayName = "ExpandedSegment";

package/src/components/file-completion.tsx

@@ -0,0 +1,127 @@
+import { View, Text } from "@codellm/jar";
+import * as path from "path";
+import { memo } from "react";
+
+export interface FileMatch {
+  resource: string;
+}
+
+export interface FileCompletionProps {
+  readonly suggestions: FileMatch[];
+  readonly selectedIndex: number;
+  readonly visible: boolean;
+  readonly maxHeight?: number;
+}
+
+const getFileType = (fileName: string): string => {
+  const ext = path.extname(fileName);
+  switch (ext) {
+    case ".ts":
+    case ".tsx":
+      return "ts";
+    case ".js":
+    case ".jsx":
+      return "js";
+    case ".json":
+      return "json";
+    case ".md":
+      return "md";
+    case ".css":
+    case ".scss":
+      return "css";
+    case ".html":
+      return "html";
+    case ".py":
+      return "py";
+    case ".rs":
+      return "rs";
+    case ".go":
+      return "go";
+    case ".yaml":
+    case ".yml":
+      return "yaml";
+    default:
+      return fileName.includes(".") ? "file" : "dir";
+  }
+};
+
+const FileCompletionComponent = ({
+  suggestions,
+  selectedIndex,
+  visible,
+  maxHeight = 8,
+}: FileCompletionProps) => {
+  if (!visible || suggestions.length === 0) {
+    return null;
+  }
+
+  // Show only a window of results for performance
+  const startIndex = Math.max(0, selectedIndex - Math.floor(maxHeight / 2));
+  const endIndex = Math.min(suggestions.length, startIndex + maxHeight);
+  const visibleSuggestions = suggestions.slice(startIndex, endIndex);
+
+  return (
+    <View
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+      marginBottom={1}
+    >
+      <Text dimColor>
+        {suggestions.length} file{suggestions.length !== 1 ? "s" : ""}
+      </Text>
+
+      {visibleSuggestions.map((suggestion, index) => {
+        const actualIndex = startIndex + index;
+        const isSelected = actualIndex === selectedIndex;
+        const fileName = path.basename(suggestion.resource);
+        const fileType = getFileType(fileName);
+
+        // Smart path display - show relative to cwd
+        const relativePath = suggestion.resource.startsWith(process.cwd())
+          ? suggestion.resource.slice(process.cwd().length + 1).replace(/\\/g, "/")
+          : suggestion.resource.replace(/\\/g, "/");
+
+        const displayPath =
+          relativePath.length > 60 ? "..." + relativePath.slice(-57) : relativePath;
+
+        return (
+          <View key={suggestion.resource} flexDirection="row">
+            <Text color={isSelected ? "blue" : "gray"} bold={isSelected} dimColor={!isSelected}>
+              {isSelected ? ">" : " "}
+            </Text>
+            <Text color={isSelected ? "blue" : undefined} bold={isSelected}>
+              {" " + displayPath}
+            </Text>
+            <Text dimColor> [{fileType}]</Text>
+          </View>
+        );
+      })}
+
+      {suggestions.length > maxHeight && (
+        <Text dimColor>
+          {selectedIndex + 1}/{suggestions.length} • ↑↓ navigate • Tab select • Esc cancel
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export const FileCompletion = memo(FileCompletionComponent);
+
+export interface CompletionState {
+  suggestions: FileMatch[];
+  selectedIndex: number;
+  visible: boolean;
+  pattern: string;
+  startPosition: number;
+}
+
+export const initialCompletionState: CompletionState = {
+  suggestions: [],
+  selectedIndex: 0,
+  visible: false,
+  pattern: "",
+  startPosition: 0,
+};

package/src/components/header.tsx

@@ -0,0 +1,47 @@
+import { View, Text } from "@codellm/jar";
+import { memo, useMemo } from "react";
+
+import pkg from "@/package.json" with { type: "json" };
+
+import { useShellSize } from "../context/shell-size.js";
+import { useTheme } from "../theme/index.js";
+import { Gradient } from "./ui/gradient.js";
+
+export const RUBI = `\
+ ▗▄▖ ▗▄▄▖  ▗▄▖  ▗▄▄▖▗▖ ▗▖ ▗▄▄▖ ▗▄▖ ▗▄▄▄▖     ▗▄▄▖▗▖   ▗▄▄▄▖
+▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌   ▐▌ ▐▌  █      ▐▌   ▐▌     █
+▐▛▀▜▌▐▛▀▚▖▐▛▀▜▌▐▌   ▐▌ ▐▌ ▝▀▚▖▐▛▀▜▌  █      ▐▌   ▐▌     █
+▐▌ ▐▌▐▙▄▞▘▐▌ ▐▌▝▚▄▄▖▝▚▄▞▘▗▄▄▞▘▐▌ ▐▌▗▄█▄▖    ▝▚▄▄▖▐▙▄▄▖▗▄█▄▖ `;
+
+const NARROW_TERMINAL_WIDTH = 50;
+
+export const Header = memo(() => {
+  const { width } = useShellSize();
+  const { colors } = useTheme();
+
+  const gradientColors = useMemo(
+    () => [colors.gradientStart, colors.gradientMid, colors.gradientEnd],
+    [colors],
+  );
+
+  if (width <= NARROW_TERMINAL_WIDTH) {
+    return (
+      <View flexDirection="row" gap={1} flexWrap="wrap">
+        <Gradient colors={gradientColors}>
+          <Text>Abacus AI</Text>
+        </Gradient>
+        <Text color={colors.textMuted}>v{pkg.version}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="column">
+      <Gradient colors={gradientColors}>
+        <Text>{RUBI}</Text>
+      </Gradient>
+      <Text color={colors.textMuted}>v{pkg.version}</Text>
+    </View>
+  );
+});
+Header.displayName = "Header";

package/src/components/logo.tsx

@@ -0,0 +1,37 @@
+type GradientColors = Array<string>;
+
+export const COLLOSAL = `
+       d8888 888                                                     d8888 8888888
+      d88888 888                                                    d88888   888
+     d88P888 888                                                   d88P888   888
+    d88P 888 88888b.   8888b.   .d8888b 888  888 .d8888b          d88P 888   888
+   d88P  888 888 "88b     "88b d88P"    888  888 88K             d88P  888   888
+  d88P   888 888  888 .d888888 888      888  888 "Y8888b.       d88P   888   888
+ d8888888888 888 d88P 888  888 Y88b.    Y88b 888      X88 d8b  d8888888888   888
+d88P     888 88888P"  "Y888888  "Y8888P  "Y88888  88888P' Y8P d88P     888 8888888
+`;
+
+export const ANSI_SHADOW = `
+ █████╗ ██████╗  █████╗  ██████╗██╗   ██╗███████╗    █████╗ ██╗     ██████╗██╗     ██╗
+██╔══██╗██╔══██╗██╔══██╗██╔════╝██║   ██║██╔════╝   ██╔══██╗██║    ██╔════╝██║     ██║
+███████║██████╔╝███████║██║     ██║   ██║███████╗   ███████║██║    ██║     ██║     ██║
+██╔══██║██╔══██╗██╔══██║██║     ██║   ██║╚════██║   ██╔══██║██║    ██║     ██║     ██║
+██║  ██║██████╔╝██║  ██║╚██████╗╚██████╔╝███████║██╗██║  ██║██║    ╚██████╗███████╗██║
+╚═╝  ╚═╝╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝╚═╝  ╚═╝╚═╝     ╚═════╝╚══════╝╚═╝
+`;
+
+export const SMALL_BLOCK = `
+▞▀▖▌                ▞▀▖▜▘ ▞▀▖▌  ▜▘
+▙▄▌▛▀▖▝▀▖▞▀▖▌ ▌▞▀▘  ▙▄▌▐  ▌  ▌  ▐
+▌ ▌▌ ▌▞▀▌▌ ▖▌ ▌▝▀▖▗▖▌ ▌▐  ▌ ▖▌  ▐
+▘ ▘▀▀ ▝▀▘▝▀ ▝▀▘▀▀ ▝▘▘ ▘▀▘ ▝▀ ▀▀▘▀▘
+`;
+
+export const SMALL_BLOCK_2 = `
+▞▀▖▌                ▞▀▖▜▘
+▙▄▌▛▀▖▝▀▖▞▀▖▌ ▌▞▀▘  ▙▄▌▐
+▌ ▌▌ ▌▞▀▌▌ ▖▌ ▌▝▀▖▗▖▌ ▌▐
+▘ ▘▀▀ ▝▀▘▝▀ ▝▀▘▀▀ ▝▘▘ ▘▀▘
+`;
+
+export const GRADIENT: GradientColors = ["pink", "lightblue", "plum", "lightcyan", "lightgray"];