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

package/src/components/tool-group-summary.tsx

@@ -0,0 +1,263 @@
+import { View, Text } from "@codellm/jar";
+import { memo } from "react";
+
+import type { HistorySegment } from "../lib/types.js";
+
+import { useTheme } from "../theme/index.js";
+import { toolMap } from "./tools/index.js";
+import { BlinkingDot } from "./tools/shared/index.js";
+
+/** Tools that are collapsed into summary lines; everything else renders individually */
+export const GROUPABLE_TOOLS = new Set([
+  "read_file",
+  "list_dir",
+  "grep",
+  "file_search",
+  "semantic_search_server",
+  "web_search",
+  "fetch_url",
+  "get_tab_content",
+  "get_terminal_output",
+  "get_interactive_elements",
+  "navigate_to",
+  "new_tab",
+  "switch_active_tab",
+  "close_tab",
+  "refresh_tab",
+  "get_diagnostics",
+  "upload_image",
+]);
+
+export function getToolName(seg: HistorySegment): string {
+  const req = seg.toolUseRequest;
+  if (!req) return "";
+  if (Array.isArray(req)) return (req[0] as { name?: string })?.name ?? "";
+  return (req as { name?: string }).name ?? "";
+}
+
+function getToolInput(seg: HistorySegment): Record<string, unknown> {
+  const req = seg.toolUseRequest;
+  if (!req) return {};
+  if (Array.isArray(req)) return (req[0] as { input?: Record<string, unknown> })?.input ?? {};
+  return (req as { input?: Record<string, unknown> }).input ?? {};
+}
+
+/** Get the display params for a tool (e.g. file path, pattern) */
+function getActiveToolParams(seg: HistorySegment): string {
+  const name = getToolName(seg);
+  const input = getToolInput(seg);
+  const def = toolMap[name];
+  if (!def) return "";
+  try {
+    return def.getHeaderParams(input);
+  } catch {
+    return "";
+  }
+}
+
+type Category =
+  | "read"
+  | "list"
+  | "search"
+  | "web"
+  | "fetch"
+  | "browser"
+  | "terminal"
+  | "diag"
+  | "other";
+
+function categorize(toolName: string): Category {
+  switch (toolName) {
+    case "read_file":
+      return "read";
+    case "list_dir":
+      return "list";
+    case "grep":
+    case "file_search":
+    case "semantic_search_server":
+      return "search";
+    case "web_search":
+      return "web";
+    case "fetch_url":
+      return "fetch";
+    case "navigate_to":
+    case "new_tab":
+    case "switch_active_tab":
+    case "close_tab":
+    case "refresh_tab":
+    case "get_tab_content":
+    case "get_interactive_elements":
+      return "browser";
+    case "get_terminal_output":
+      return "terminal";
+    case "get_diagnostics":
+      return "diag";
+    default:
+      return "other";
+  }
+}
+
+interface CategoryCount {
+  completed: number;
+  executing: number;
+}
+
+/** Build summary string. Completed counts use past tense; executing count appended as progressive. */
+function buildSummary(counts: Partial<Record<Category, CategoryCount>>): string {
+  const parts: string[] = [];
+
+  function fmtCategory(cat: Category, completed: number, executing: number): void {
+    const total = completed + executing;
+    if (total === 0) return;
+
+    let phrase: string;
+    if (executing > 0) {
+      // Progressive form for the executing portion
+      switch (cat) {
+        case "search":
+          phrase = total === 1 ? "searching for 1 pattern" : `searching for ${total} patterns`;
+          break;
+        case "read":
+          phrase = total === 1 ? "reading 1 file" : `reading ${total} files`;
+          break;
+        case "list":
+          phrase = total === 1 ? "listing 1 directory" : `listing ${total} directories`;
+          break;
+        case "web":
+          phrase = total === 1 ? "searching the web" : `searching the web ${total} times`;
+          break;
+        case "fetch":
+          phrase = total === 1 ? "fetching 1 URL" : `fetching ${total} URLs`;
+          break;
+        case "browser":
+          phrase = total === 1 ? "navigating browser" : `navigating browser ${total} times`;
+          break;
+        case "terminal":
+          phrase = "getting terminal output";
+          break;
+        case "diag":
+          phrase = "checking diagnostics";
+          break;
+        default:
+          phrase = total === 1 ? "1 operation" : `${total} operations`;
+          break;
+      }
+    } else {
+      // Past tense for all completed
+      switch (cat) {
+        case "search":
+          phrase =
+            completed === 1 ? "searched for 1 pattern" : `searched for ${completed} patterns`;
+          break;
+        case "read":
+          phrase = completed === 1 ? "read 1 file" : `read ${completed} files`;
+          break;
+        case "list":
+          phrase = completed === 1 ? "listed 1 directory" : `listed ${completed} directories`;
+          break;
+        case "web":
+          phrase = completed === 1 ? "searched the web" : `searched the web ${completed} times`;
+          break;
+        case "fetch":
+          phrase = completed === 1 ? "fetched 1 URL" : `fetched ${completed} URLs`;
+          break;
+        case "browser":
+          phrase = completed === 1 ? "navigated browser" : `navigated browser ${completed} times`;
+          break;
+        case "terminal":
+          phrase = "got terminal output";
+          break;
+        case "diag":
+          phrase = "checked diagnostics";
+          break;
+        default:
+          phrase = completed === 1 ? "1 operation" : `${completed} operations`;
+          break;
+      }
+    }
+    parts.push(phrase);
+  }
+
+  // Render in a consistent order
+  const order: Category[] = [
+    "search",
+    "read",
+    "list",
+    "web",
+    "fetch",
+    "browser",
+    "terminal",
+    "diag",
+    "other",
+  ];
+  for (const cat of order) {
+    const c = counts[cat];
+    if (c) fmtCategory(cat, c.completed, c.executing);
+  }
+
+  return parts.join(", ");
+}
+
+interface ToolGroupSummaryProps {
+  segments: HistorySegment[];
+}
+
+export const ToolGroupSummary = memo(({ segments }: ToolGroupSummaryProps) => {
+  const { colors } = useTheme();
+
+  const counts: Partial<Record<Category, CategoryCount>> = {};
+  let activeSeg: HistorySegment | null = null;
+  let hasExecuting = false;
+  let hasError = false;
+
+  for (const seg of segments) {
+    const name = getToolName(seg);
+    const cat = categorize(name);
+    const isExecuting = !seg.toolUseResult;
+
+    if (!counts[cat]) counts[cat] = { completed: 0, executing: 0 };
+    if (isExecuting) {
+      counts[cat]!.executing++;
+      activeSeg = seg;
+      hasExecuting = true;
+    } else {
+      counts[cat]!.completed++;
+      // Detect error: rejected flag or content starting with "Error:"
+      const result = seg.toolUseResult as { rejected?: boolean; content?: string } | undefined;
+      if (result?.rejected || result?.content?.startsWith("Error:")) {
+        hasError = true;
+      }
+    }
+  }
+
+  const rawSummary = buildSummary(counts);
+  const summary = rawSummary.charAt(0).toUpperCase() + rawSummary.slice(1);
+  const activeParams = activeSeg ? getActiveToolParams(activeSeg) : null;
+
+  // Dot color: executing → blinking (white), error → red, all success → green
+  const dotColor = hasError ? "red" : !hasExecuting ? "green" : "white";
+
+  return (
+    <View flexDirection="column">
+      <View flexDirection="row" gap={1} alignItems="center">
+        {hasExecuting ? <BlinkingDot /> : <Text color={dotColor}>⏺</Text>}
+        <Text>
+          {summary}
+          {hasExecuting ? "…" : ""}
+        </Text>
+        <Text color={colors.textMuted} dimColor>
+          (ctrl+o to expand)
+        </Text>
+      </View>
+      {activeParams && (
+        <View flexDirection="row" paddingLeft={2}>
+          <Text color={colors.textSubtle} dimColor>
+            ⎿{"  "}
+          </Text>
+          <Text color={colors.textSubtle}>{activeParams}</Text>
+        </View>
+      )}
+    </View>
+  );
+});
+ToolGroupSummary.displayName = "ToolGroupSummary";

package/src/components/tool-permissions/ask-user-question-permission-ui.tsx

@@ -0,0 +1,312 @@
+import type { AskUserQuestionItem, PermissionDecision } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import { type Key, useInput } from "@codellm/jar";
+import { memo, useCallback, useRef, useState } from "react";
+
+import { TextBuffer } from "../../lib/text-buffer.js";
+import { Input, type InputKeyDownEvent } from "../ui/input.js";
+import { PermissionPreviewHeader, dashedBorderStyle } from "./permission-preview-header.js";
+
+interface AskUserQuestionPermissionUIProps {
+  questions: AskUserQuestionItem[];
+  onResolve: (decision: PermissionDecision) => void;
+}
+
+export const AskUserQuestionPermissionUI = memo(
+  ({ questions, onResolve }: AskUserQuestionPermissionUIProps) => {
+    const [questionIndex, setQuestionIndex] = useState(0);
+    const [optionIndex, setOptionIndex] = useState(0);
+    // selected: Map from questionIndex → Set of selected option indices
+    const [selected, setSelected] = useState<Map<number, Set<number>>>(() => new Map());
+    const [noteMode, setNoteMode] = useState(false);
+    // notes per question
+    const [notes, setNotes] = useState<Map<number, string>>(() => new Map());
+    const noteBufferRef = useRef<TextBuffer | null>(null);
+
+    const currentQuestion = questions[questionIndex];
+    const currentSelected = selected.get(questionIndex) ?? new Set<number>();
+
+    const optionIndexRef = useRef(optionIndex);
+    optionIndexRef.current = optionIndex;
+    const questionIndexRef = useRef(questionIndex);
+    questionIndexRef.current = questionIndex;
+    const noteModeRef = useRef(noteMode);
+    noteModeRef.current = noteMode;
+    const questionsRef = useRef(questions);
+    questionsRef.current = questions;
+    const selectedRef = useRef(selected);
+    selectedRef.current = selected;
+    const notesRef = useRef(notes);
+    notesRef.current = notes;
+
+    const buildAnswers = useCallback(
+      (finalSelected: Map<number, Set<number>>, finalNotes: Map<number, string>) => {
+        const answers: Record<string, string> = {};
+        for (let i = 0; i < questionsRef.current.length; i++) {
+          const q = questionsRef.current[i];
+          if (!q) continue;
+          const sel = finalSelected.get(i);
+          if (!sel || sel.size === 0) continue;
+          const chosen = [...sel]
+            .sort((a, b) => a - b)
+            .map((idx) => q.options[idx]?.label ?? "")
+            .filter(Boolean);
+          const note = finalNotes.get(i);
+          answers[`question_${i}`] = note ? `${chosen.join(", ")} — ${note}` : chosen.join(", ");
+        }
+        return answers;
+      },
+      [],
+    );
+
+    const submit = useCallback(
+      (finalSelected: Map<number, Set<number>>, finalNotes: Map<number, string>) => {
+        onResolve({
+          type: "question_answers",
+          answers: buildAnswers(finalSelected, finalNotes),
+        });
+      },
+      [onResolve, buildAnswers],
+    );
+
+    const advanceOrSubmit = useCallback(
+      (
+        nextQIndex: number,
+        latestSelected: Map<number, Set<number>>,
+        latestNotes: Map<number, string>,
+      ) => {
+        if (nextQIndex >= questionsRef.current.length) {
+          submit(latestSelected, latestNotes);
+        } else {
+          setQuestionIndex(nextQIndex);
+          setOptionIndex(0);
+          setNoteMode(false);
+        }
+      },
+      [submit],
+    );
+
+    // Confirm current question and move to next (or submit)
+    const confirmCurrent = useCallback(() => {
+      const qi = questionIndexRef.current;
+      const q = questionsRef.current[qi];
+      if (!q) return;
+      // If nothing selected, treat as skip for this question (no answer recorded)
+      const latestSelected = selectedRef.current;
+      const latestNotes = notesRef.current;
+      advanceOrSubmit(qi + 1, latestSelected, latestNotes);
+    }, [advanceOrSubmit]);
+
+    const confirmCurrentRef = useRef(confirmCurrent);
+    confirmCurrentRef.current = confirmCurrent;
+
+    const handleNoteKeyDown = useCallback((event: InputKeyDownEvent) => {
+      if (event.key.return) {
+        const text = noteBufferRef.current?.text?.trim() ?? "";
+        const qi = questionIndexRef.current;
+        const newNotes = new Map(notesRef.current);
+        if (text) newNotes.set(qi, text);
+        else newNotes.delete(qi);
+        setNotes(newNotes);
+        setNoteMode(false);
+        event.preventDefault();
+        return;
+      }
+      if (event.key.escape) {
+        setNoteMode(false);
+        event.preventDefault();
+        return;
+      }
+      if (event.key.tab) {
+        // Tab in note mode exits note mode
+        setNoteMode(false);
+        event.preventDefault();
+        return;
+      }
+    }, []);
+
+    const handleNoteSubmit = useCallback((value: string) => {
+      const qi = questionIndexRef.current;
+      const newNotes = new Map(notesRef.current);
+      const text = value.trim();
+      if (text) newNotes.set(qi, text);
+      else newNotes.delete(qi);
+      setNotes(newNotes);
+      setNoteMode(false);
+    }, []);
+
+    const keypressHandler = useCallback(
+      (_input: string, key: Key) => {
+        if (noteModeRef.current) return;
+
+        const qi = questionIndexRef.current;
+        const q = questionsRef.current[qi];
+        if (!q) return;
+        const numOptions = q.options.length;
+
+        if (key.upArrow) {
+          setOptionIndex((prev) => Math.max(0, prev - 1));
+          return;
+        }
+        if (key.downArrow) {
+          setOptionIndex((prev) => Math.min(numOptions - 1, prev + 1));
+          return;
+        }
+        if (key.leftArrow) {
+          // Navigate to previous question
+          if (qi > 0) {
+            setQuestionIndex(qi - 1);
+            setOptionIndex(0);
+            setNoteMode(false);
+          }
+          return;
+        }
+        if (key.rightArrow) {
+          // Navigate to next question (only if we've been there)
+          if (qi < questionsRef.current.length - 1) {
+            setQuestionIndex(qi + 1);
+            setOptionIndex(0);
+            setNoteMode(false);
+          }
+          return;
+        }
+        if (_input === " ") {
+          const oi = optionIndexRef.current;
+          const newSelected = new Map(selectedRef.current);
+          const sel = new Set(newSelected.get(qi) ?? []);
+          if (q.multiSelect) {
+            if (sel.has(oi)) sel.delete(oi);
+            else sel.add(oi);
+          } else {
+            sel.clear();
+            sel.add(oi);
+          }
+          newSelected.set(qi, sel);
+          setSelected(newSelected);
+          return;
+        }
+        if (key.return) {
+          // If nothing selected yet for single-select, select current option first
+          const sel = selectedRef.current.get(qi) ?? new Set<number>();
+          if (sel.size === 0 && !q.multiSelect) {
+            const oi = optionIndexRef.current;
+            const newSelected = new Map(selectedRef.current);
+            const newSel = new Set([oi]);
+            newSelected.set(qi, newSel);
+            setSelected(newSelected);
+            advanceOrSubmit(qi + 1, newSelected, notesRef.current);
+          } else {
+            confirmCurrentRef.current();
+          }
+          return;
+        }
+        if (key.tab) {
+          setNoteMode(true);
+          // Pre-fill with existing note if any
+          setTimeout(() => {
+            const existingNote = notesRef.current.get(qi) ?? "";
+            if (noteBufferRef.current && existingNote) {
+              noteBufferRef.current.setText(existingNote);
+            }
+          }, 0);
+          return;
+        }
+        if (key.escape) {
+          // Skip remaining questions and submit what we have
+          submit(selectedRef.current, notesRef.current);
+          return;
+        }
+      },
+      [advanceOrSubmit, submit],
+    );
+
+    useInput(keypressHandler, { isActive: !noteMode });
+
+    if (!currentQuestion) return null;
+
+    const note = notes.get(questionIndex);
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader
+          title={`Questions (${questionIndex + 1}/${questions.length}): ${currentQuestion.header}`}
+        />
+        <View flexDirection="column" paddingLeft={1} paddingY={1}>
+          <Text>{currentQuestion.question}</Text>
+        </View>
+        <View flexDirection="column" paddingLeft={1}>
+          {currentQuestion.options.map(
+            (opt: { label: string; description: string }, idx: number) => {
+              const isHighlighted = idx === optionIndex;
+              const isSel = currentSelected.has(idx);
+              const checkbox = currentQuestion.multiSelect
+                ? isSel
+                  ? "[x] "
+                  : "[ ] "
+                : isSel
+                  ? "◉  "
+                  : "○  ";
+              return (
+                <View key={idx} flexDirection="row">
+                  <Text color={isHighlighted ? "cyan" : undefined}>
+                    {isHighlighted ? "❯ " : "  "}
+                  </Text>
+                  <Text color={isSel ? "green" : isHighlighted ? undefined : "gray"}>
+                    {checkbox}
+                    {opt.label}
+                  </Text>
+                  {opt.description ? <Text dimColor> — {opt.description}</Text> : null}
+                </View>
+              );
+            },
+          )}
+        </View>
+
+        {noteMode ? (
+          <View flexDirection="column" paddingLeft={1} paddingTop={1}>
+            <View flexDirection="row">
+              <Text color="cyan">{"❯ "}</Text>
+              <Text dimColor>Note: </Text>
+              <Input
+                ref={noteBufferRef}
+                placeholder="Add context or instructions…"
+                onSubmit={handleNoteSubmit}
+                onKeyDown={handleNoteKeyDown}
+              />
+            </View>
+          </View>
+        ) : (
+          <View flexDirection="column" paddingLeft={1} paddingTop={1}>
+            {note && (
+              <Text dimColor>
+                Note: <Text italic>{note}</Text>
+              </Text>
+            )}
+          </View>
+        )}
+
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="row" paddingLeft={1} paddingBottom={1} gap={2}>
+          <Text dimColor>↑↓ option</Text>
+          <Text dimColor>space select</Text>
+          <Text dimColor>enter confirm</Text>
+          {questions.length > 1 && (
+            <>
+              <Text dimColor>←→ navigate</Text>
+            </>
+          )}
+          <Text dimColor>tab note</Text>
+          <Text dimColor>esc skip</Text>
+        </View>
+      </View>
+    );
+  },
+);
+AskUserQuestionPermissionUI.displayName = "AskUserQuestionPermissionUI";