ubume 0.1.0

package/src/ui/timeline/ActionRequiredBlock.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { getUsableShellWidth } from "../layout.js";
+import { wrapPlainText } from "../render/textLayout.js";
+import { useTheme } from "../theme.js";
+
+interface ActionRequiredBlockProps {
+  cols: number;
+  turnIndex: number;
+  question: string;
+}
+
+export function ActionRequiredBlock({ cols, turnIndex, question }: ActionRequiredBlockProps) {
+  const theme = useTheme();
+  const contentWidth = Math.max(1, getUsableShellWidth(cols, 6));
+
+  const wrappedContent = question
+    .split("\n")
+    .flatMap((line) => {
+      const rows = wrapPlainText(line, contentWidth);
+      return rows.length > 0 ? rows : [""];
+    });
+
+  return (
+    <Box borderStyle="single" borderColor={theme.borderFocused} flexDirection="column" marginBottom={1} width="100%">
+      <Box width="100%" justifyContent="space-between" overflow="hidden" paddingX={1}>
+        <Text color={theme.text} bold>{`[${turnIndex}] ACTION REQUIRED`}</Text>
+        <Text color={theme.text} bold>{"⚡"}</Text>
+      </Box>
+      <Box flexDirection="column" paddingX={2} marginTop={1} marginBottom={1} width="100%">
+        <Text color={theme.text} bold>{"Verification Question"}</Text>
+        {wrappedContent.map((row, index) => (
+          <Text key={`content-${index}`} color={theme.text}>{row || " "}</Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/timeline/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 "../render/Markdown.js";
+import { getUsableShellWidth } from "../layout.js";
+import { useTheme } from "../theme.js";
+import { wrapPlainText } from "../render/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 "../render/outputPipeline.js";
+import { DashCard } from "../chrome/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 : (runPhase === "streaming" ? theme.borderFocused : theme.border);
+
+  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.textDim}>{"(no output)"}</Text>
+          ) : null}
+          {run.truncatedOutput && (
+            <Text color={theme.textDim}>{RUN_OUTPUT_TRUNCATION_NOTICE}</Text>
+          )}
+        </Box>
+      )}
+    </DashCard>
+  );
+}

package/src/ui/timeline/StaticIntroItem.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "ink";
+import type { CodexAuthState } from "../../core/auth/codexAuth.js";
+import { getShellWidth, type Layout, type StartupHeaderMode } from "../layout.js";
+import { buildIntroRenderItem, TimelineRowView } from "./Timeline.js";
+import type { TimelineRow } from "./timelineMeasure.js";
+import { buildTimelineSnapshot } from "./timelineMeasure.js";
+
+interface StaticIntroItemProps {
+  authState: CodexAuthState;
+  workspaceLabel: string;
+  layout: Layout;
+  startupHeaderMode?: StartupHeaderMode;
+  verboseMode: boolean;
+  workspaceRoot: string | null;
+}
+
+export function buildStaticIntroRows({
+  authState,
+  workspaceLabel,
+  layout,
+  startupHeaderMode,
+  verboseMode,
+  workspaceRoot,
+}: StaticIntroItemProps): TimelineRow[] {
+  const introItem = buildIntroRenderItem({ authState, workspaceLabel, layout, startupHeaderMode });
+  return buildTimelineSnapshot([introItem], {
+    totalWidth: getShellWidth(layout.cols),
+    verboseMode,
+    debugLabel: "static-intro",
+    workspaceRoot,
+  }).rows;
+}
+
+export function StaticIntroItem(props: StaticIntroItemProps) {
+  const rows = React.useMemo(() => buildStaticIntroRows(props), [
+    props.authState,
+    props.workspaceLabel,
+    props.layout.cols,
+    props.layout.rows,
+    props.layout.mode,
+    props.startupHeaderMode,
+    props.verboseMode,
+    props.workspaceRoot,
+  ]);
+
+  return (
+    <Box flexDirection="column">
+      {rows.map((row) => (
+        <TimelineRowView key={row.key} row={row} />
+      ))}
+    </Box>
+  );
+}

package/src/ui/timeline/ThinkingBlock.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { RunEvent } from "../../session/types.js";
+import { clampVisualText, getUsableShellWidth } from "../layout.js";
+import { useTheme } from "../theme.js";
+import { DashCard } from "../chrome/DashCard.js";
+import {
+  formatProgressBlockBodyLines,
+  getProgressUpdateCount,
+  selectVisibleProgressBlocks,
+  type VisibleProgressBlock,
+} from "./progressEntries.js";
+
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+
+const MAX_VISIBLE_PROGRESS_ENTRIES = 3;
+
+interface ThinkingBlockProps {
+  cols: number;
+  run: RunEvent;
+  turnIndex: number;
+}
+
+function getBlockMarker(isLive: boolean): string {
+  return isLive ? "▸" : "•";
+}
+
+export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
+  const theme = useTheme();
+  const {
+    blocks,
+    hiddenCount,
+    totalCount,
+    latestBlock,
+    latestActiveBlock,
+  } = selectVisibleProgressBlocks(run.progressEntries ?? [], MAX_VISIBLE_PROGRESS_ENTRIES);
+  const contentWidth = Math.max(1, getUsableShellWidth(cols, 8));
+  const updateCount = totalCount || getProgressUpdateCount(run.progressEntries ?? []);
+  const currentBlock = latestActiveBlock ?? latestBlock;
+  const currentText = currentBlock
+    ? clampVisualText(currentBlock.headline.replace(/^Current:\s*/i, ""), Math.max(1, contentWidth - 9))
+    : null;
+  const rightBadge = run.status === "running"
+    ? "active"
+    : `${updateCount} update${updateCount === 1 ? "" : "s"}`;
+
+  if (blocks.length === 0 && run.status === "running") {
+    return null;
+  }
+
+  return (
+    <DashCard
+      cols={cols}
+      title="Processing"
+      rightBadge={rightBadge}
+      borderColor={run.status === "running" ? theme.borderFocused : theme.border}
+    >
+      {blocks.length === 0 ? (
+        <Text color={theme.textDim}>No processing updates</Text>
+      ) : (
+        <Box flexDirection="column" width="100%">
+          {currentText && run.status === "running" && (
+            <Box width="100%">
+              <Text color={theme.info} bold>Current: </Text>
+              <Text color={theme.text}>{currentText}</Text>
+            </Box>
+          )}
+          {hiddenCount > 0 && (
+            <Box marginTop={currentText && run.status === "running" ? 1 : 0}>
+              <Text color={theme.textDim}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
+            </Box>
+          )}
+          {blocks.map((block, blockIndex) => {
+            const isLive = run.status === "running" && block.isActive;
+            return (
+              <Box
+                key={block.key}
+                flexDirection="column"
+                width="100%"
+                marginTop={blockIndex === 0 && hiddenCount === 0 && !(currentText && run.status === "running") ? 0 : 1}
+              >
+                <Text color={isLive ? theme.accent : theme.info} bold={isLive}>
+                  {`${getBlockMarker(isLive)} ${isLive ? "Live" : block.label}`}
+                </Text>
+                {formatProgressBlockBodyLines(block.text, contentWidth).map((line, lineIndex) => (
+                  <Text key={`${block.key}-${lineIndex}`} color={theme.textMuted}>
+                    {line ? `${isLive ? "  | " : "    "}${line}` : " "}
+                  </Text>
+                ))}
+                {isLive && (
+                  <Text color={theme.accent}>  | ▌</Text>
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+    </DashCard>
+  );
+}