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

package/src/components/composer/commands/picker.tsx

@@ -0,0 +1,273 @@
+import { View, Text } from "@codellm/jar";
+import { memo, useCallback, useDeferredValue, useEffect, useMemo, useState } from "react";
+
+import { Select } from "../../ui/select.js";
+import { useComposerContext } from "../context.js";
+import { commandRegistry } from "./registry.js";
+import { CommandMatch } from "./types.js";
+
+interface CommandPickerProps {
+  prompt: string;
+  onAccept: () => void;
+  onCancel: () => void;
+  availableHeight: number;
+}
+
+type PickerState =
+  | { type: "commands"; query: string }
+  | { type: "subcommands"; query: string }
+  | { type: "completions"; query: string }
+  | null;
+
+export const CommandPicker = memo(
+  ({ prompt, onAccept, onCancel, availableHeight }: CommandPickerProps) => {
+    const { bufferRef } = useComposerContext();
+    const [match, setMatch] = useState<CommandMatch | null>(null);
+    const [completions, setCompletions] = useState<string[]>([]);
+    const [isLoadingCompletions, setIsLoadingCompletions] = useState(false);
+
+    const commandQuery = useMemo(() => {
+      const trimmed = prompt.trim();
+      if (!trimmed.startsWith("/")) {
+        return "";
+      }
+      return trimmed.slice(1);
+    }, [prompt]);
+
+    const deferredCommandQuery = useDeferredValue(commandQuery);
+    const isFiltering = commandQuery !== deferredCommandQuery;
+
+    const pickerState = useMemo((): PickerState | null => {
+      if (!match) {
+        return { type: "commands", query: deferredCommandQuery };
+      }
+
+      if (match.needsSubcommand) {
+        return { type: "subcommands", query: match.query };
+      }
+
+      const hasCompletionProvider =
+        match.subcommand?.completionProvider || match.command.completionProvider;
+      if (hasCompletionProvider) {
+        return { type: "completions", query: match.query };
+      }
+
+      return null;
+    }, [match, deferredCommandQuery]);
+
+    useEffect(() => {
+      const trimmed = prompt.trim();
+      if (!trimmed.startsWith("/")) {
+        setMatch(null);
+        return;
+      }
+
+      const matched = commandRegistry.match(trimmed);
+      setMatch(matched);
+    }, [prompt]);
+
+    useEffect(() => {
+      const provider = match?.subcommand?.completionProvider || match?.command.completionProvider;
+
+      if (!provider || match?.needsSubcommand) {
+        setCompletions([]);
+        setIsLoadingCompletions(false);
+        return;
+      }
+
+      setIsLoadingCompletions(true);
+      const query = match.query || "";
+      const result = provider(query);
+
+      if (result instanceof Promise) {
+        result
+          .then((items) => {
+            setCompletions(items);
+            setIsLoadingCompletions(false);
+          })
+          .catch(() => {
+            setCompletions([]);
+            setIsLoadingCompletions(false);
+          });
+      } else {
+        setCompletions(result);
+        setIsLoadingCompletions(false);
+      }
+    }, [match, match?.query]);
+
+    const items = useMemo(() => {
+      if (!pickerState) {
+        return [];
+      }
+
+      if (pickerState.type === "subcommands" && match?.command.subcommands) {
+        const subcommands = commandRegistry.searchSubcommands(match.command, pickerState.query);
+        return subcommands.map((sub) => `${sub.id} - ${sub.description}`);
+      }
+
+      if (pickerState.type === "completions") {
+        if (isLoadingCompletions) {
+          return ["Loading models..."];
+        }
+
+        if (completions.length === 0) {
+          if (match?.query.trim()) {
+            return [`No matches for "${match.query}"`];
+          }
+          return ["No options available"];
+        }
+
+        return completions;
+      }
+
+      const commands = commandRegistry.search(deferredCommandQuery);
+      return commands.map((cmd) => `${cmd.id} - ${cmd.description}`);
+    }, [pickerState, match, completions, isLoadingCompletions, deferredCommandQuery]);
+
+    const getAutocompleteText = useCallback(
+      (item: string, idx: number): string | null => {
+        if (!pickerState) {
+          return null;
+        }
+
+        if (pickerState.type === "subcommands" && match?.command.subcommands) {
+          const subcommands = commandRegistry.searchSubcommands(match.command, pickerState.query);
+          const selectedSubcommand = subcommands[idx];
+          if (selectedSubcommand) {
+            return `/${match.command.id} ${selectedSubcommand.id} `;
+          }
+          return null;
+        }
+
+        if (pickerState.type === "completions" && match) {
+          if (isLoadingCompletions || item.startsWith("Loading") || item.startsWith("No ")) {
+            return null;
+          }
+          const baseCommand = match.subcommand
+            ? `/${match.command.id} ${match.subcommand.id}`
+            : `/${match.command.id}`;
+          return `${baseCommand} ${item}`;
+        }
+
+        const commands = commandRegistry.search(deferredCommandQuery);
+        const selectedCommand = commands[idx];
+        if (selectedCommand) {
+          return `/${selectedCommand.id} `;
+        }
+        return null;
+      },
+      [pickerState, match, deferredCommandQuery, isLoadingCompletions],
+    );
+
+    const handleTab = useCallback(
+      (item: string, idx: number) => {
+        const buffer = bufferRef.current;
+        if (!buffer) {
+          return;
+        }
+
+        const text = getAutocompleteText(item, idx);
+        if (text) {
+          buffer.setText(text);
+        }
+      },
+      [bufferRef, getAutocompleteText],
+    );
+
+    const handleSubmit = useCallback(
+      async (item: string, idx: number) => {
+        const buffer = bufferRef.current;
+        if (!buffer) {
+          onAccept();
+          return;
+        }
+
+        if (!pickerState) {
+          return;
+        }
+
+        if (pickerState.type === "subcommands" && match?.command.subcommands) {
+          const subcommands = commandRegistry.searchSubcommands(match.command, pickerState.query);
+          const selectedSubcommand = subcommands[idx];
+
+          if (selectedSubcommand) {
+            if (selectedSubcommand.requiresArgument || selectedSubcommand.completionProvider) {
+              buffer.setText(`/${match.command.id} ${selectedSubcommand.id} `);
+            } else {
+              await selectedSubcommand.execute([]);
+              buffer.setText("");
+            }
+            onAccept();
+          }
+          return;
+        }
+
+        if (pickerState.type === "completions" && match) {
+          if (isLoadingCompletions || item.startsWith("Loading") || item.startsWith("No ")) {
+            return;
+          }
+
+          const executor = match.subcommand || match.command;
+          if (executor.execute) {
+            await executor.execute([item]);
+            buffer.setText("");
+            onAccept();
+          }
+          return;
+        }
+
+        const commands = commandRegistry.search(deferredCommandQuery);
+        const selectedCommand = commands[idx];
+
+        if (!selectedCommand) {
+          return;
+        }
+
+        if (selectedCommand.subcommands && selectedCommand.subcommands.length > 0) {
+          buffer.setText(`/${selectedCommand.id} `);
+          onAccept();
+          return;
+        }
+
+        if (selectedCommand.requiresArgument || selectedCommand.completionProvider) {
+          buffer.setText(`/${selectedCommand.id} `);
+          onAccept();
+          return;
+        }
+
+        if (selectedCommand.execute) {
+          await selectedCommand.execute([]);
+          buffer.setText("");
+          onAccept();
+        }
+      },
+      [bufferRef, match, deferredCommandQuery, onAccept, pickerState, isLoadingCompletions],
+    );
+
+    if (!pickerState || items.length === 0) {
+      return null;
+    }
+
+    const limit = Math.max(1, Math.min(10, availableHeight - 2));
+
+    return (
+      <View flexDirection="column">
+        {isFiltering && pickerState.type === "commands" && (
+          <Text dimColor>Filtering commands...</Text>
+        )}
+        <Select
+          items={items}
+          limit={limit}
+          maxHeight={availableHeight}
+          isActive
+          showIndex
+          showIndicators
+          onSubmit={handleSubmit}
+          onTab={handleTab}
+          onCancel={onCancel}
+        />
+      </View>
+    );
+  },
+);
+CommandPicker.displayName = "CommandPicker";

package/src/components/composer/commands/registry.ts

@@ -0,0 +1,233 @@
+import { ComposerMode } from "../types.js";
+import { CommandDefinition, CommandMatch, SubcommandDefinition } from "./types.js";
+
+class CommandRegistry {
+  private commands = new Map<string, CommandDefinition>();
+
+  register(command: CommandDefinition): void {
+    if (this.commands.has(command.id)) {
+      return;
+    }
+    this.commands.set(command.id, command);
+  }
+
+  clear(): void {
+    this.commands.clear();
+  }
+
+  get(id: string): CommandDefinition | undefined {
+    return this.commands.get(id);
+  }
+
+  getAll(): CommandDefinition[] {
+    return Array.from(this.commands.values());
+  }
+
+  private getAliasesForMode(command: CommandDefinition, mode: ComposerMode): string[] {
+    if (!command.alias) {
+      return [];
+    }
+
+    if (Array.isArray(command.alias)) {
+      return command.alias;
+    }
+
+    return command.alias[mode] ?? [];
+  }
+
+  private buildCommandMatch(command: CommandDefinition, argParts: string[]): CommandMatch {
+    if (command.subcommands && command.subcommands.length > 0) {
+      if (argParts.length === 0) {
+        return { command, args: "", query: "", needsSubcommand: true };
+      }
+
+      const subcommandId = argParts[0];
+      const subcommand = command.subcommands.find((sub) => sub.id === subcommandId);
+
+      if (!subcommand) {
+        const args = argParts.join(" ");
+        return { command, args, query: args, needsSubcommand: true };
+      }
+
+      const args = argParts.slice(1).join(" ");
+      return { command, subcommand, args, query: args };
+    }
+
+    const args = argParts.join(" ");
+    return { command, args, query: args };
+  }
+
+  private findCommandByAlias(aliasName: string, mode: ComposerMode): CommandDefinition | undefined {
+    const lowerAlias = aliasName.toLowerCase();
+    for (const command of this.commands.values()) {
+      const aliases = this.getAliasesForMode(command, mode);
+      if (aliases.some((a) => a.toLowerCase() === lowerAlias)) {
+        return command;
+      }
+    }
+    return undefined;
+  }
+
+  matchByAlias(input: string, mode: ComposerMode): CommandMatch | null {
+    const parts = input.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+      return null;
+    }
+
+    const [aliasName, ...argParts] = parts;
+    const command = this.findCommandByAlias(aliasName, mode);
+
+    if (!command) {
+      return null;
+    }
+
+    const acceptsArgs =
+      command.requiresArgument || (command.subcommands && command.subcommands.length > 0);
+    if (!acceptsArgs && argParts.length > 0) {
+      return null;
+    }
+
+    return this.buildCommandMatch(command, argParts);
+  }
+
+  /**
+   * Parse arguments respecting quoted strings (single or double quotes)
+   */
+  private parseArgs(argsString: string): string[] {
+    const args: string[] = [];
+    let current = "";
+    let inQuote: "'" | '"' | null = null;
+    let escaped = false;
+
+    for (let i = 0; i < argsString.length; i++) {
+      const char = argsString[i];
+
+      if (escaped) {
+        current += char;
+        escaped = false;
+        continue;
+      }
+
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+
+      if (char === "'" || char === '"') {
+        if (inQuote === char) {
+          // End quote
+          inQuote = null;
+        } else if (inQuote === null) {
+          // Start quote
+          inQuote = char;
+        } else {
+          // Inside different quote type, treat as literal
+          current += char;
+        }
+        continue;
+      }
+
+      if (char === " " && inQuote === null) {
+        // Whitespace outside quotes = separator
+        if (current.length > 0) {
+          args.push(current);
+          current = "";
+        }
+        continue;
+      }
+
+      current += char;
+    }
+
+    // Add final argument
+    if (current.length > 0) {
+      args.push(current);
+    }
+
+    return args;
+  }
+
+  async execute(match: CommandMatch): Promise<boolean> {
+    if (match.needsSubcommand) {
+      return false;
+    }
+
+    const args = match.args ? this.parseArgs(match.args) : [];
+    const executor = match.subcommand || match.command;
+
+    if (executor.requiresArgument && args.length === 0) {
+      return false;
+    }
+
+    if (match.subcommand?.execute) {
+      await match.subcommand.execute(args);
+      return true;
+    }
+
+    if (match.command.execute) {
+      await match.command.execute(args);
+      return true;
+    }
+
+    return false;
+  }
+
+  match(input: string, mode?: ComposerMode): CommandMatch | null {
+    const trimmed = input.trim();
+
+    if (mode !== undefined && !trimmed.startsWith("/")) {
+      return this.matchByAlias(trimmed, mode);
+    }
+
+    if (!trimmed.startsWith("/")) {
+      return null;
+    }
+
+    const parts = trimmed.slice(1).split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+      return null;
+    }
+
+    const [commandId, ...argParts] = parts;
+    const command = this.commands.get(commandId);
+
+    if (!command) {
+      return null;
+    }
+
+    return this.buildCommandMatch(command, argParts);
+  }
+
+  search(query: string): CommandDefinition[] {
+    const lowerQuery = query.toLowerCase();
+    if (!query) {
+      return this.getAll();
+    }
+
+    return this.getAll().filter((cmd) => {
+      const idMatch = cmd.id.toLowerCase().includes(lowerQuery);
+      const descMatch = cmd.description.toLowerCase().includes(lowerQuery);
+      const usageMatch = cmd.usage.toLowerCase().includes(lowerQuery);
+      return idMatch || descMatch || usageMatch;
+    });
+  }
+
+  searchSubcommands(command: CommandDefinition, query: string): SubcommandDefinition[] {
+    if (!command.subcommands) {
+      return [];
+    }
+
+    const lowerQuery = query.toLowerCase();
+    if (!query) {
+      return command.subcommands;
+    }
+
+    return command.subcommands.filter((sub) => {
+      const idMatch = sub.id.toLowerCase().includes(lowerQuery);
+      const descMatch = sub.description.toLowerCase().includes(lowerQuery);
+      return idMatch || descMatch;
+    });
+  }
+}
+
+export const commandRegistry = new CommandRegistry();

package/src/components/composer/commands/types.ts

@@ -0,0 +1,33 @@
+import { ComposerMode } from "../types.js";
+
+export type CommandCompletionProvider = (query: string) => Promise<string[]> | string[];
+
+export type CommandAlias = string[] | Partial<Record<ComposerMode, string[]>>;
+
+export interface SubcommandDefinition {
+  id: string;
+  description: string;
+  usage: string;
+  requiresArgument?: boolean;
+  completionProvider?: CommandCompletionProvider;
+  execute: (args: string[]) => Promise<void> | void;
+}
+
+export interface CommandDefinition {
+  id: string;
+  description: string;
+  usage: string;
+  requiresArgument?: boolean;
+  completionProvider?: CommandCompletionProvider;
+  subcommands?: SubcommandDefinition[];
+  execute?: (args: string[]) => Promise<void> | void;
+  alias?: CommandAlias;
+}
+
+export interface CommandMatch {
+  command: CommandDefinition;
+  subcommand?: SubcommandDefinition;
+  args: string;
+  query: string;
+  needsSubcommand?: boolean;
+}

package/src/components/composer/context.tsx

@@ -0,0 +1,88 @@
+import { createContext, use, useMemo, useRef, useState } from "react";
+
+import type { TextBuffer } from "../../lib/text-buffer.js";
+import type { FileAttachment } from "../../lib/types.js";
+
+import { useAgent } from "../../hooks/use-agent.js";
+import { ComposerMode } from "./types.js";
+
+export type ComposerActivity = "idle" | "pending" | "error";
+
+type ComposerContextValue = {
+  prompt: string;
+  setPrompt: (v: string) => void;
+  mode: ComposerMode;
+  setMode: (m: ComposerMode) => void;
+  bufferRef: React.RefObject<TextBuffer | null>;
+  activity: ComposerActivity;
+  setActivity: (s: ComposerActivity) => void;
+  queuedMessages: string[];
+  addToQueue: (message: string) => void;
+  removeFirstFromQueue: () => void;
+  clearQueue: () => void;
+  attachments: FileAttachment[];
+  setAttachments: (a: FileAttachment[]) => void;
+  addAttachment: (a: FileAttachment) => void;
+  clearAttachments: () => void;
+};
+
+const ComposerContext = createContext<ComposerContextValue | null>(null);
+
+export function useComposerContext() {
+  const ctx = use(ComposerContext);
+  if (!ctx) {
+    throw new Error(`${useComposerContext.name} must be used within ${ComposerProvider.name}`);
+  }
+  return ctx;
+}
+
+export function ComposerProvider({ children }: React.PropsWithChildren) {
+  const [prompt, setPrompt] = useState("");
+  const [mode, setMode] = useState(ComposerMode.Prompt);
+  const bufferRef = useRef<TextBuffer>(null);
+  const [activity, setActivity] = useState<ComposerActivity>("idle");
+
+  // Use queue from AgentContext instead of local state
+  const { queuedMessages, addToQueue, removeFirstFromQueue, clearQueue } = useAgent();
+  const [attachments, setAttachments] = useState<FileAttachment[]>([]);
+
+  const addAttachment = (attachment: FileAttachment) => {
+    setAttachments((prev) => [...prev, attachment]);
+  };
+
+  const clearAttachments = () => {
+    setAttachments([]);
+  };
+
+  const value = useMemo<ComposerContextValue>(
+    () => ({
+      prompt,
+      setPrompt,
+      mode,
+      setMode,
+      bufferRef,
+      activity,
+      setActivity,
+      queuedMessages,
+      addToQueue,
+      removeFirstFromQueue,
+      clearQueue,
+      attachments,
+      setAttachments,
+      addAttachment,
+      clearAttachments,
+    }),
+    [
+      prompt,
+      mode,
+      activity,
+      queuedMessages,
+      addToQueue,
+      removeFirstFromQueue,
+      clearQueue,
+      attachments,
+    ],
+  );
+
+  return <ComposerContext.Provider value={value}>{children}</ComposerContext.Provider>;
+}

package/src/components/composer/file-mention-picker.tsx

@@ -0,0 +1,83 @@
+import { View, Text } from "@codellm/jar";
+import { memo, useCallback, useDeferredValue, useEffect, useState } from "react";
+
+import { Select } from "../ui/select.js";
+import { useComposerContext } from "./context.js";
+import { getMentionAtCursor } from "./mentions.js";
+import { useMentionSearch } from "./use-mention-search.js";
+
+export const FileMentionPicker = memo(
+  ({
+    onAccept,
+    onCancel,
+    availableHeight,
+  }: {
+    onAccept: () => void;
+    onCancel: () => void;
+    availableHeight: number;
+  }) => {
+    const { prompt, bufferRef } = useComposerContext();
+    const [fileQuery, setFileQuery] = useState("");
+
+    useEffect(() => {
+      const buffer = bufferRef.current;
+      if (!buffer) {
+        setFileQuery("");
+        return;
+      }
+      const mention = getMentionAtCursor(buffer.text, buffer.cursor);
+      const newQuery = mention?.query ?? "";
+      setFileQuery((prev) => (prev !== newQuery ? newQuery : prev));
+    }, [bufferRef, prompt]);
+
+    const deferredFileQuery = useDeferredValue(fileQuery);
+    const { results, isDirectory } = useMentionSearch(deferredFileQuery);
+    const isSearching = fileQuery !== deferredFileQuery;
+
+    const displayResults = results.map((path, idx) => (isDirectory[idx] ? `${path}/` : path));
+
+    const handleSubmit = useCallback(
+      (item: string, idx: number) => {
+        const buffer = bufferRef.current;
+        if (!buffer) return onAccept();
+        const mention = getMentionAtCursor(buffer.text, buffer.cursor);
+        if (mention) {
+          const actualPath = results[idx];
+          buffer.replaceRange(
+            mention.startRow,
+            mention.startCol,
+            mention.endRow,
+            mention.endCol,
+            `@${actualPath}${isDirectory[idx] ? "/" : ""} `,
+          );
+        }
+        onAccept();
+      },
+      [bufferRef, onAccept, results, isDirectory],
+    );
+
+    const limit = Math.max(1, Math.min(10, availableHeight - 2));
+
+    return (
+      <View flexDirection="column">
+        <Select
+          items={displayResults}
+          limit={limit}
+          maxHeight={availableHeight}
+          isActive
+          showIndex
+          showIndicators
+          onSubmit={handleSubmit}
+          onTab={handleSubmit}
+          onCancel={onCancel}
+        />
+        {isSearching && (
+          <View marginTop={0}>
+            <Text dimColor>Searching...</Text>
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+FileMentionPicker.displayName = "FileMentionPicker";