@golba98/codexa 1.0.1

package/src/ui/AgentBlock.tsx

@@ -0,0 +1,130 @@
+import React, { memo, useDeferredValue, useMemo } from "react";
+import { Box, Text } from "ink";
+import type { AssistantEvent, RunEvent } from "../session/types.js";
+import { getAssistantContent } from "../session/types.js";
+import { MemoizedRenderMessage } from "./Markdown.js";
+import { getUsableShellWidth } from "./layout.js";
+import { useTheme } from "./theme.js";
+import { wrapPlainText } from "./textLayout.js";
+import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../session/chatLifecycle.js";
+import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
+import {
+  sanitizeOutput,
+  sanitizeStreamChunk,
+  normalizeOutput,
+  classifyOutput,
+  formatForBox,
+} from "./outputPipeline.js";
+import { DashCard } from "./DashCard.js";
+
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+interface AgentBlockProps {
+  cols: number;
+  assistant: AssistantEvent | null;
+  run: RunEvent | null;
+  streaming: boolean;
+  turnIndex: number;
+  dim?: boolean;
+  runPhase?: "streaming" | "final";
+  streamingPreviewRows?: number;
+  streamingMode?: "assistant-first";
+}
+
+const MemoizedMessageBody = memo(function MessageBody({
+  segments,
+  width,
+}: {
+  segments: ReturnType<typeof formatForBox>;
+  width: number;
+}) {
+  return <MemoizedRenderMessage segments={segments} width={width} />;
+}, (prev, next) => prev.segments === next.segments && prev.width === next.width);
+
+const StreamingCursor = memo(function StreamingCursor() {
+  const theme = useTheme();
+  return (
+    <Box width="100%" paddingLeft={2}>
+      <Text color={theme.ACCENT}>{"▌"}</Text>
+    </Box>
+  );
+});
+
+export function AgentBlock({
+  cols,
+  assistant,
+  run,
+  streaming,
+  dim = false,
+  runPhase = streaming ? "streaming" : "final",
+}: AgentBlockProps) {
+  const theme = useTheme();
+  const content = getAssistantContent(assistant);
+  const deferredContent = useDeferredValue(content);
+  // During streaming, use content directly for immediate rendering.
+  // When not streaming, defer large final content to avoid blocking input.
+  const renderContent = streaming ? content : deferredContent;
+  const contentWidth = Math.max(1, getUsableShellWidth(cols, 4));
+
+  const pipelineState = useMemo(() => {
+    const sanitized = streaming ? sanitizeStreamChunk(renderContent) : sanitizeOutput(renderContent);
+    const normalized = normalizeOutput(sanitized);
+    const classified = classifyOutput(normalized);
+    const formatted = formatForBox(classified, contentWidth);
+    return { length: normalized.length, formatted };
+  }, [contentWidth, renderContent, streaming]);
+
+  const failureMessage = run?.status === "failed"
+    ? sanitizeTerminalOutput(run.errorMessage ?? run.summary)
+    : null;
+  const cancelMessage = run?.status === "canceled" ? sanitizeTerminalOutput(run.summary) : null;
+
+  const runStatus = runPhase === "streaming"
+    ? "streaming"
+    : run?.status === "completed"
+      ? "complete"
+      : run?.status ?? "running";
+  const rightBadge = run?.durationMs != null && runPhase !== "streaming"
+    ? `${runStatus} • ${formatDuration(run.durationMs)}`
+    : runStatus;
+  const heading = run?.runtime.model ? run.runtime.model.toUpperCase().replace(/-/g, " ") : "Codex";
+
+  const borderColor = dim ? theme.BORDER_SUBTLE : (runPhase === "streaming" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE);
+
+  return (
+    <DashCard cols={cols} title={heading} rightBadge={rightBadge} borderColor={borderColor}>
+      {!streaming && failureMessage && (
+        <Box flexDirection="column" width="100%">
+          {wrapPlainText(failureMessage, contentWidth).map((row, index) => (
+            <Text key={index} color={theme.ERROR}>{index === 0 ? `✕ ${row || " "}` : row || " "}</Text>
+          ))}
+        </Box>
+      )}
+
+      {pipelineState.length > 0 && (
+        <Box flexDirection="column" width="100%">
+          <MemoizedMessageBody segments={pipelineState.formatted} width={contentWidth} />
+        </Box>
+      )}
+
+      {streaming && <StreamingCursor />}
+
+      {!streaming && run && run.status !== "running" && (
+        <Box flexDirection="column" width="100%">
+          {run.status === "canceled" && cancelMessage ? (
+            <Text color={theme.WARNING}>{cancelMessage}</Text>
+          ) : run.status === "completed" && pipelineState.length === 0 ? (
+            <Text color={theme.DIM}>{"(no output)"}</Text>
+          ) : null}
+          {run.truncatedOutput && (
+            <Text color={theme.DIM}>{RUN_OUTPUT_TRUNCATION_NOTICE}</Text>
+          )}
+        </Box>
+      )}
+    </DashCard>
+  );
+}

package/src/ui/AnimatedStatusText.test.ts

@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import test from "node:test";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+test("busy status text owns the local animation timer", () => {
+  const source = readFileSync(join(here, "AnimatedStatusText.tsx"), "utf8");
+
+  assert.match(source, /setInterval/);
+  assert.match(source, /useEffect/);
+  assert.match(source, /useState/);
+  assert.doesNotMatch(source, /useAnimatedDots|useThrottledValue/);
+});

package/src/ui/AnimatedStatusText.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { Text } from "ink";
+import * as renderDebug from "../core/perf/renderDebug.js";
+import { useTheme } from "./theme.js";
+import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
+import { BUSY_STATUS_FRAME_MS, BUSY_STATUS_FRAMES, getBusyStatusFrame } from "./busyStatusAnimation.js";
+
+interface AnimatedStatusTextProps {
+  baseText: string;
+  isActive: boolean;
+  isError?: boolean;
+  animationFrame?: string;
+}
+
+function useLocalBusyStatusFrame(isActive: boolean, label: string): string {
+  const [frameIndex, setFrameIndex] = useState(0);
+  const staticStatus = process.env.CODEXA_DEBUG_STATIC_STATUS === "1";
+
+  useEffect(() => {
+    if (!isActive || staticStatus) {
+      setFrameIndex(0);
+      return;
+    }
+
+    setFrameIndex(0);
+    const timer = setInterval(() => {
+      setFrameIndex((current) => {
+        const next = current + 1;
+        renderDebug.traceStatusTick({ owner: "Status", label, frameIndex: next });
+        return next;
+      });
+    }, BUSY_STATUS_FRAME_MS);
+    timer.unref?.();
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [isActive, label, staticStatus]);
+
+  if (isActive && staticStatus) {
+    return BUSY_STATUS_FRAMES[BUSY_STATUS_FRAMES.length - 1]!;
+  }
+  return getBusyStatusFrame(frameIndex);
+}
+
+export function AnimatedStatusText({ baseText, isActive, isError = false, animationFrame }: AnimatedStatusTextProps) {
+  const localFrame = useLocalBusyStatusFrame(isActive, baseText);
+  renderDebug.useRenderDebug("Status", {
+    baseText,
+    isActive,
+    isError,
+    animationFrame: animationFrame ?? localFrame,
+  });
+  renderDebug.useLifecycleDebug("Status", {
+    baseText,
+    isActive,
+    isError,
+  });
+
+  const theme = useTheme();
+  const renderedText = sanitizeTerminalOutput(baseText);
+  const suffix = isActive ? animationFrame ?? localFrame : "";
+
+  return (
+    <Text color={isError ? theme.ERROR : theme.INFO} wrap="truncate">
+      {renderedText}{suffix}
+    </Text>
+  );
+}