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

package/src/components/segments.tsx

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

@@ -0,0 +1,306 @@
+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>
+  );
+};