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

package/src/components/segments.tsx

@@ -1,356 +0,0 @@
-import { View, Text } from "@codellm/jar";
-import { Fragment, memo, useMemo, useState, useEffect, useRef, startTransition } from "react";
-
-import { Markdown } from "../lib/markdown/index.js";
-import { capitalize, getRandomWord } from "../lib/status-utils.js";
-import { formatDurationMs } from "../lib/timing.js";
-import { HistorySegment } from "../lib/types.js";
-import { getSegmentContent } from "../lib/utils.js";
-import { useTheme } from "../theme/index.js";
-import { ErrorBoundary } from "./error-boundry.js";
-import { Tool } from "./tools.js";
-import { BlinkingIndicator } from "./ui/blinking-indicator.js";
-import { Shimmer } from "./ui/shimmer.js";
-
-const TextSegment = memo((props: HistorySegment) => {
-  const { type, segment, isSpinny = false, source } = props;
-  if (type !== "text") {
-    throw Error(`Can only render text segments, got ${type}`);
-  }
-
-  const content = useMemo(() => getSegmentContent(segment), [segment]);
-
-  if (!content?.trim()) {
-    return null;
-  }
-
-  // User text segments - dim italic with ❯ prefix
-  if (source === "user") {
-    return (
-      <View flexDirection="row" gap={1}>
-        <Text color="white">❯</Text>
-        <Text dimColor italic>
-          {content}
-        </Text>
-      </View>
-    );
-  }
-
-  // Bot text segments - spinny shows shimmer, normal shows markdown with ⏺ prefix
-  if (isSpinny) {
-    return (
-      <View flexDirection="row" alignItems="center" gap={1}>
-        <Shimmer text={content} />
-      </View>
-    );
-  }
-
-  return (
-    <View flexDirection="column">
-      <View flexDirection="row" gap={1}>
-        <Text color="white">⏺</Text>
-        <Markdown>{content.trimStart()}</Markdown>
-      </View>
-    </View>
-  );
-});
-TextSegment.displayName = "TextSegment";
-
-/**
- * Expanded thinking segment: shows full thought content + duration.
- * Used in expanded view where thoughts are always visible.
- */
-export const ExpandedThinkingSegment = memo((props: HistorySegment) => {
-  const { segment, thinkingStartTime, thinkingEndTime } = props;
-  const { colors } = useTheme();
-  const content = useMemo(() => getSegmentContent(segment), [segment]);
-  const duration = useMemo(() => {
-    if (thinkingStartTime && thinkingEndTime) {
-      return `thought for ${formatDurationMs(thinkingEndTime - thinkingStartTime)}`;
-    }
-    return null;
-  }, [thinkingStartTime, thinkingEndTime]);
-
-  return (
-    <View flexDirection="row" gap={1} alignItems="flex-start">
-      <Text color={colors.textSubtle}>✳</Text>
-      <View flexDirection="column" gap={0}>
-        {duration && <Text dimColor>({duration})</Text>}
-        {content && (
-          <Text color={colors.textSubtle} wrap="wrap">
-            {content}
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-});
-ExpandedThinkingSegment.displayName = "ExpandedThinkingSegment";
-
-/** Duration threshold (ms) below which we don't show timing numbers */
-const THINKING_DURATION_THRESHOLD = 5000;
-
-/** SDK-native thinking segment — emitted by thinking_delta / thinking_complete events.
- *  Visible while active and for 2s after completion, then hides. */
-const ThinkingSegment = memo((props: HistorySegment) => {
-  const { isSpinny = false, thinkingStartTime, thinkingEndTime } = props;
-  const [currentTime, setCurrentTime] = useState(performance.now());
-  const [hidden, setHidden] = useState(false);
-
-  // Tick timer while actively thinking
-  useEffect(() => {
-    if (!isSpinny || !thinkingStartTime) return undefined;
-    const interval = setInterval(() => {
-      startTransition(() => setCurrentTime(performance.now()));
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [isSpinny, thinkingStartTime]);
-
-  // After thinking completes, hide after 2s
-  useEffect(() => {
-    if (isSpinny || !thinkingEndTime) return undefined;
-    const timer = setTimeout(() => setHidden(true), 2000);
-    return () => clearTimeout(timer);
-  }, [isSpinny, thinkingEndTime]);
-
-  if (hidden) return null;
-
-  const label = useMemo(() => {
-    if (isSpinny) {
-      if (!thinkingStartTime) return "thinking...";
-      const elapsed = currentTime - thinkingStartTime;
-      // Only show duration if thinking has lasted >5s
-      return elapsed < THINKING_DURATION_THRESHOLD
-        ? "thinking..."
-        : `thinking for ${formatDurationMs(elapsed)}`;
-    }
-    if (thinkingStartTime && thinkingEndTime) {
-      const duration = thinkingEndTime - thinkingStartTime;
-      return duration < THINKING_DURATION_THRESHOLD
-        ? "thought"
-        : `thought for ${formatDurationMs(duration)}`;
-    }
-    return "thinking...";
-  }, [thinkingStartTime, thinkingEndTime, isSpinny, currentTime]);
-
-  return (
-    <View flexDirection="row" gap={1} alignItems="flex-start">
-      {isSpinny ? <BlinkingIndicator char="●" color="cyan" /> : <Text color="green">●</Text>}
-      <Text dimColor>{label}</Text>
-    </View>
-  );
-});
-ThinkingSegment.displayName = "ThinkingSegment";
-
-/** SDK-native tool call segment — emitted by tool_requested / tool_execution_complete events */
-const ToolCallSegment = memo((props: HistorySegment) => {
-  const { toolUseRequest, toolUseResult, toolDisplayData, parsedResult } = props;
-
-  if (!toolUseRequest) return null;
-
-  if (Array.isArray(toolUseRequest)) {
-    return (
-      <>
-        {toolUseRequest.map((req, index) => (
-          <Tool
-            key={req.id ?? index}
-            {...req}
-            result={toolUseResult}
-            displayData={toolDisplayData}
-            parsedResult={parsedResult}
-          />
-        ))}
-      </>
-    );
-  }
-
-  return (
-    <Tool
-      {...toolUseRequest}
-      result={toolUseResult}
-      displayData={toolDisplayData}
-      parsedResult={parsedResult}
-    />
-  );
-});
-ToolCallSegment.displayName = "ToolCallSegment";
-
-/** Generic collapsible — used for in-flight spinners ("Processing…", "Analyzing result…") */
-const CollapsibleComponentSegment = memo((props: HistorySegment) => {
-  const { type, segment, title, isSpinny = false } = props;
-  const { colors } = useTheme();
-  const wordRef = useRef<string>(getRandomWord());
-
-  if (type !== "collapsible_component") {
-    throw Error(`Can only render collapsible component segments, got ${type}`);
-  }
-
-  const content = useMemo(() => getSegmentContent(segment), [segment]);
-
-  if (!content && !title) {
-    throw Error("Collapsible component segment must have content or title");
-  }
-
-  const displayTitle = title || capitalize(wordRef.current);
-
-  return (
-    <View
-      borderStyle={content ? "single" : undefined}
-      borderColor={colors.border}
-      flexDirection="column"
-      alignItems="flex-start"
-      gap={1}
-    >
-      {displayTitle && (
-        <View flexDirection="row" alignItems="center" gap={1}>
-          {isSpinny ? (
-            <>
-              <Shimmer text={`${displayTitle}...`} />
-              <Text dimColor>(esc to interrupt)</Text>
-            </>
-          ) : (
-            <>
-              <Text> </Text>
-              <Text color={colors.textMuted}>{displayTitle}</Text>
-            </>
-          )}
-        </View>
-      )}
-      {content && <Markdown>{content}</Markdown>}
-    </View>
-  );
-});
-CollapsibleComponentSegment.displayName = "CollapsibleComponentSegment";
-
-const NotificationSegment = memo((props: HistorySegment) => {
-  const { type, message, severity = "info", actions, flashKey } = props;
-  const { colors } = useTheme();
-
-  if (type !== "code_llm_notification") {
-    throw Error(`Can only render notification segments, got ${type}`);
-  }
-  const [isFlashing, setIsFlashing] = useState(false);
-  const prevFlashKeyRef = useRef(flashKey);
-
-  // Flash effect: when flashKey changes (duplicate notification), briefly highlight
-  useEffect(() => {
-    if (flashKey !== prevFlashKeyRef.current && flashKey != null) {
-      prevFlashKeyRef.current = flashKey;
-      setIsFlashing(true);
-      const timer = setTimeout(() => setIsFlashing(false), 600);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [flashKey]);
-
-  if (!message) {
-    throw Error("Notification segment must have message");
-  }
-
-  const validSeverity = useMemo(
-    () =>
-      severity === "info" ||
-      severity === "success" ||
-      severity === "error" ||
-      severity === "warning"
-        ? severity
-        : "info",
-    [severity],
-  );
-
-  const textColor = useMemo(() => {
-    switch (validSeverity) {
-      case "info":
-        return colors.info;
-      case "success":
-        return colors.success;
-      case "warning":
-        return colors.warning;
-      case "error":
-        return colors.error;
-      default:
-        return colors.info;
-    }
-  }, [validSeverity, colors]);
-
-  const formatActionLabel = (actionType: string): string => {
-    const words = actionType
-      .replace(/_/g, " ")
-      .replace(/([A-Z])/g, " $1")
-      .trim()
-      .split(" ")
-      .filter((word) => word.length > 0);
-    return words
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(" ");
-  };
-
-  const actionLinks = useMemo(() => (actions || []).filter((action) => action.link), [actions]);
-
-  return (
-    <View flexDirection="column" gap={0}>
-      <View flexDirection="row" gap={1}>
-        <Text color={textColor}>{isFlashing ? "◉" : "●"}</Text>
-        <Text color={textColor} bold={isFlashing} inverse={isFlashing}>
-          {isFlashing ? ` ${message} ` : message}
-        </Text>
-      </View>
-      {actionLinks.length > 0 && (
-        <View marginLeft={2} flexDirection="row" gap={1}>
-          {actionLinks.map((action, index) => (
-            <Fragment key={index}>
-              {index > 0 && <Text> | </Text>}
-              <Text color="cyan" underline>
-                {formatActionLabel(action.type)}
-              </Text>
-            </Fragment>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-});
-NotificationSegment.displayName = "NotificationSegment";
-
-const SegmentBase = memo(({ segment }: { segment: HistorySegment }) => {
-  switch (segment.type) {
-    case "text":
-      return <TextSegment {...segment} />;
-    case "thinking":
-      return <ThinkingSegment {...segment} />;
-    case "code_llm_tool_call":
-      return <ToolCallSegment {...segment} />;
-    case "collapsible_component":
-      return <CollapsibleComponentSegment {...segment} />;
-    case "code_llm_agent_tool_request":
-      // History hydration produces this for older conversations — render same as tool call
-      return <ToolCallSegment {...segment} />;
-    case "code_llm_notification":
-      return <NotificationSegment {...segment} />;
-    default:
-      // Silently skip unknown/unsupported segment types rather than crashing
-      return null;
-  }
-});
-SegmentBase.displayName = "SegmentBase";
-
-function SegmentErrorFallback(error: Error, _errorInfo: React.ErrorInfo | null) {
-  const errorSegment: HistorySegment = {
-    id: "error-fallback",
-    status: "completed",
-    source: "bot",
-    type: "code_llm_notification",
-    message: error.message,
-    severity: "error",
-  };
-
-  return <NotificationSegment {...errorSegment} />;
-}
-
-export function Segment({ segment }: { segment: HistorySegment }) {
-  return (
-    <ErrorBoundary fallback={SegmentErrorFallback}>
-      <SegmentBase segment={segment} />
-    </ErrorBoundary>
-  );
-}

package/src/components/status-indicator.tsx

@@ -1,306 +0,0 @@
-import { View, Text } from "@codellm/jar";
-import { useEffect, useRef, useState } from "react";
-
-import { useNetworkActivity } from "../context/network-activity.js";
-import { formatDurationMs } from "../lib/timing.js";
-import { AgentStatus, type RetryState } from "../providers/agent.js";
-import { Shimmer } from "./ui/shimmer.js";
-
-const STATUS_WORDS = [
-  "baking",
-  "beaming",
-  "booping",
-  "bouncing",
-  "brewing",
-  "bubbling",
-  "chasing",
-  "churning",
-  "coalescing",
-  "conjuring",
-  "cooking",
-  "crafting",
-  "crunching",
-  "cuddling",
-  "dancing",
-  "dazzling",
-  "discovering",
-  "doodling",
-  "dreaming",
-  "drifting",
-  "enchanting",
-  "exploring",
-  "finding",
-  "floating",
-  "fluttering",
-  "foraging",
-  "forging",
-  "frolicking",
-  "gathering",
-  "giggling",
-  "gliding",
-  "greeting",
-  "growing",
-  "hatching",
-  "herding",
-  "honking",
-  "hopping",
-  "hugging",
-  "humming",
-  "imagining",
-  "inventing",
-  "jingling",
-  "juggling",
-  "jumping",
-  "kindling",
-  "knitting",
-  "launching",
-  "leaping",
-  "mapping",
-  "marinating",
-  "meandering",
-  "mixing",
-  "moseying",
-  "munching",
-  "napping",
-  "nibbling",
-  "noodling",
-  "orbiting",
-  "painting",
-  "percolating",
-  "petting",
-  "plotting",
-  "pondering",
-  "popping",
-  "prancing",
-  "purring",
-  "puzzling",
-  "questing",
-  "riding",
-  "roaming",
-  "rolling",
-  "sauteeing",
-  "scribbling",
-  "seeking",
-  "shimmying",
-  "singing",
-  "skipping",
-  "sleeping",
-  "snacking",
-  "sniffing",
-  "snuggling",
-  "soaring",
-  "sparking",
-  "spinning",
-  "splashing",
-  "sprouting",
-  "squishing",
-  "stargazing",
-  "stirring",
-  "strolling",
-  "swimming",
-  "swinging",
-  "tickling",
-  "tinkering",
-  "toasting",
-  "tumbling",
-  "twirling",
-  "waddling",
-  "wandering",
-  "watching",
-  "weaving",
-  "whistling",
-  "wibbling",
-  "wiggling",
-  "wishing",
-  "wobbling",
-  "wondering",
-  "yawning",
-  "zooming",
-];
-
-interface StatusIndicatorProps {
-  status: AgentStatus;
-  /** Start time of the most recent thinking block (ms epoch) */
-  thinkingStartTime?: number | null;
-  /** End time of the most recent thinking block (ms epoch), null if still thinking */
-  thinkingEndTime?: number | null;
-  /** Current retry state, if retrying */
-  retryState?: RetryState | null;
-  /** Whether the network is currently online */
-  networkOnline?: boolean;
-}
-
-function capitalize(word: string): string {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-}
-
-function getRandomWord(): string {
-  const index = Math.floor(Math.random() * STATUS_WORDS.length);
-  return STATUS_WORDS[index];
-}
-
-/** Thinking indicator: "thinking" → "thinking for 5s" → "thought for 1.2m" (shown 5s after done) */
-function useThinkingLabel(
-  thinkingStartTime: number | null | undefined,
-  thinkingEndTime: number | null | undefined,
-): string | null {
-  const [tick, setTick] = useState(0);
-  const hideAfterRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    if (!thinkingStartTime) return;
-
-    const interval = setInterval(() => {
-      setTick((t) => t + 1);
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, [thinkingStartTime]);
-
-  if (!thinkingStartTime) return null;
-
-  const now = Date.now();
-
-  if (thinkingEndTime) {
-    // After completion, show label for 5 seconds then hide
-    if (hideAfterRef.current === null) {
-      hideAfterRef.current = thinkingEndTime + 5000;
-    }
-    if (now > hideAfterRef.current) return null;
-    const durationMs = thinkingEndTime - thinkingStartTime;
-    // Only show duration if thinking lasted >5s
-    return durationMs < 5000 ? "thought" : `thought for ${formatDurationMs(durationMs)}`;
-  }
-
-  // Reset hide timer when thinking restarts
-  hideAfterRef.current = null;
-
-  void tick; // consumed by interval to force re-render
-
-  // Still thinking — show elapsed, only show duration if >5s
-  const elapsedMs = now - thinkingStartTime;
-  if (elapsedMs < 5000) return "thinking";
-  return `thinking for ${formatDurationMs(elapsedMs)}`;
-}
-
-/** Countdown hook for retry delay. Returns remaining seconds. */
-function useRetryCountdown(retryState: RetryState | null): number {
-  const [remaining, setRemaining] = useState(0);
-  const startRef = useRef<number>(0);
-
-  useEffect(() => {
-    if (!retryState) {
-      setRemaining(0);
-      return;
-    }
-    startRef.current = Date.now();
-    setRemaining(Math.ceil(retryState.delayMs / 1000));
-
-    const interval = setInterval(() => {
-      const elapsed = Date.now() - startRef.current;
-      const left = Math.max(0, Math.ceil((retryState.delayMs - elapsed) / 1000));
-      setRemaining(left);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [retryState]);
-
-  return remaining;
-}
-
-export const StatusIndicator = ({
-  status,
-  thinkingStartTime,
-  thinkingEndTime,
-  retryState,
-  networkOnline = true,
-}: StatusIndicatorProps) => {
-  const { activity } = useNetworkActivity();
-  const [word, setWord] = useState(() => getRandomWord());
-  const previousStatusRef = useRef<AgentStatus>(AgentStatus.Idle);
-  const [justReconnected, setJustReconnected] = useState(false);
-  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (previousStatusRef.current === AgentStatus.Idle && status !== AgentStatus.Idle) {
-      setWord(getRandomWord());
-    }
-    previousStatusRef.current = status;
-  }, [status]);
-
-  // Track "back online" flash
-  const prevOnlineRef = useRef(networkOnline);
-  useEffect(() => {
-    if (!prevOnlineRef.current && networkOnline) {
-      setJustReconnected(true);
-      reconnectTimerRef.current = setTimeout(() => setJustReconnected(false), 2000);
-    }
-    prevOnlineRef.current = networkOnline;
-    return () => {
-      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
-    };
-  }, [networkOnline]);
-
-  const thinkingLabel = useThinkingLabel(thinkingStartTime, thinkingEndTime);
-  const retryCountdown = useRetryCountdown(retryState ?? null);
-
-  // ── Offline state ──
-  if (!networkOnline) {
-    return (
-      <View paddingLeft={1} flexDirection="row" gap={1}>
-        <Text color="red">⚠</Text>
-        <Text color="red">You are offline</Text>
-        <Text dimColor>— will retry when you're back online</Text>
-      </View>
-    );
-  }
-
-  // ── Just reconnected flash ──
-  if (justReconnected) {
-    return (
-      <View paddingLeft={1} flexDirection="row" gap={1}>
-        <Text color="green">✓</Text>
-        <Text color="green">Back online</Text>
-      </View>
-    );
-  }
-
-  // ── Retry state ──
-  if (retryState) {
-    const countdownLabel =
-      retryCountdown > 0
-        ? `(in ${retryCountdown}s)`
-        : `(attempt ${retryState.attempt}/${retryState.maxAttempts})`;
-    return (
-      <View paddingLeft={1} flexDirection="row" gap={1}>
-        <Text color="yellow">↻</Text>
-        <Shimmer text="Retrying..." />
-        <Text color="yellow">{countdownLabel}</Text>
-        <Text dimColor>
-          (attempt {retryState.attempt}/{retryState.maxAttempts} · esc to cancel)
-        </Text>
-      </View>
-    );
-  }
-
-  // ── Normal operation ──
-  const shouldShow = status !== AgentStatus.Idle && status !== AgentStatus.WaitingForToolPermission;
-
-  if (!shouldShow) {
-    return null;
-  }
-
-  const displayWord = status === AgentStatus.LoadingConversation ? "Resuming" : capitalize(word);
-  const indicator = activity === "upload" ? "↑" : activity === "download" ? "↓" : "•";
-
-  return (
-    <View paddingLeft={1} flexDirection="row" gap={1}>
-      <Text color="cyan">{indicator}</Text>
-      <Shimmer text={`${displayWord}...`} />
-      {thinkingLabel && <Text color="cyan">({thinkingLabel})</Text>}
-      {status !== AgentStatus.LoadingConversation && (
-        <Text dimColor>(esc/ctrl+c to interrupt)</Text>
-      )}
-    </View>
-  );
-};