@golba98/codexa 1.0.3 → 1.0.5

package/src/ui/timeline/TranscriptShell.tsx

@@ -0,0 +1,322 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { Box, Static } from "ink";
+import type { RuntimeSummary } from "../../config/runtimeConfig.js";
+import type { CodexAuthState } from "../../core/auth/codexAuth.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+import type { TimelineEvent, UIState } from "../../session/types.js";
+import {
+  buildActiveRenderItems,
+  buildIntroRenderItem,
+  buildStaticRenderItems,
+  buildTimelineItems,
+  TimelineRowView,
+  type TimelineItem,
+} from "./Timeline.js";
+import { getShellHeight, getShellWidth, resolveStartupHeaderMode, type TerminalViewport } from "../layout.js";
+import {
+  buildNativeTranscriptParts,
+  type NativeTranscriptRowItem,
+  type TimelineRow,
+} from "./timelineMeasure.js";
+import { LOGO_COMPACT, LOGO_COMPACT_MIN_COLS, LOGO_LARGE, LOGO_MEDIUM, selectLogoVariant } from "../render/logoVariants.js";
+
+type TranscriptStaticItem = NativeTranscriptRowItem & { type: "rows" };
+type StaticRenderItem = TranscriptStaticItem;
+
+export interface TranscriptShellProps {
+  layout: TerminalViewport;
+  authState: CodexAuthState;
+  workspaceLabel: string;
+  workspaceRoot?: string | null;
+  runtimeSummary?: RuntimeSummary | null;
+  staticEvents: TimelineEvent[];
+  activeEvents: TimelineEvent[];
+  uiState: UIState;
+  composer: React.ReactNode;
+  composerRows?: number;
+  verboseMode?: boolean;
+  clearCount?: number;
+  /**
+   * Bumped whenever a width-changing resize forces the terminal's app.tsx-owned
+   * clear boundary to physically wipe the screen. Folded into <Static>'s key
+   * (not the whole component's) so already-flushed content reprints at the
+   * new width — without remounting the composer or anything else.
+   */
+  repaintGeneration?: number;
+  visible?: boolean;
+}
+
+function RowsBlock({ rows }: { rows: TimelineRow[] }) {
+  return (
+    <Box flexDirection="column">
+      {rows.map((row) => (
+        <TimelineRowView key={row.key} row={row} />
+      ))}
+    </Box>
+  );
+}
+
+function isTranscriptEvent(event: TimelineEvent): boolean {
+  return event.type === "user" || event.type === "assistant" || event.type === "run" || event.type === "shell";
+}
+
+export function isHomeScreenState({
+  staticEvents,
+  activeEvents,
+  uiState,
+}: {
+  staticEvents: TimelineEvent[];
+  activeEvents: TimelineEvent[];
+  uiState: UIState;
+}): boolean {
+  return uiState.kind === "IDLE"
+    && !staticEvents.some(isTranscriptEvent)
+    && !activeEvents.some(isTranscriptEvent);
+}
+
+function getLogoVariantName(rows: readonly string[]): "large" | "medium" | "compact" | "wordmark" | "none" {
+  if (rows.length === 0) return process.env["CODEXA_NO_ASCII_LOGO"] === "1" ? "none" : "wordmark";
+  if (rows === LOGO_LARGE || rows.join("\n") === LOGO_LARGE.join("\n")) return "large";
+  if (rows === LOGO_MEDIUM || rows.join("\n") === LOGO_MEDIUM.join("\n")) return "medium";
+  if (rows === LOGO_COMPACT || rows.join("\n") === LOGO_COMPACT.join("\n")) return "compact";
+  return "wordmark";
+}
+
+function getLogoHiddenReason({
+  startupHeaderMode,
+  logoVariant,
+  width,
+}: {
+  startupHeaderMode: ReturnType<typeof resolveStartupHeaderMode>;
+  logoVariant: ReturnType<typeof getLogoVariantName>;
+  width: number;
+}): string | null {
+  if (startupHeaderMode === "tiny") return "terminal-too-small";
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return "CODEXA_NO_ASCII_LOGO";
+  if (logoVariant === "wordmark") return `no-ascii-variant-fits-width-${width}`;
+  if (logoVariant === "none") return `no-logo-variant-fits-width-${width}`;
+  return null;
+}
+
+function buildTranscriptItems({
+  layout,
+  authState,
+  workspaceLabel,
+  workspaceRoot,
+  runtimeSummary,
+  staticEvents,
+  activeEvents,
+  uiState,
+  composerRows,
+  verboseMode,
+}: Pick<
+  TranscriptShellProps,
+  | "layout"
+  | "authState"
+  | "workspaceLabel"
+  | "workspaceRoot"
+  | "runtimeSummary"
+  | "staticEvents"
+  | "activeEvents"
+  | "uiState"
+  | "composerRows"
+  | "verboseMode"
+>): { staticItems: TranscriptStaticItem[]; liveRows: TimelineRow[]; startupHeaderMode: ReturnType<typeof resolveStartupHeaderMode> } {
+  const staticItems = buildTimelineItems(staticEvents);
+  const activeItems = buildTimelineItems(activeEvents);
+  const turnIds = [...staticItems, ...activeItems]
+    .filter((item): item is Extract<TimelineItem, { type: "turn" }> => item.type === "turn")
+    .map((item) => item.turnId);
+  const startupHeaderMode = resolveStartupHeaderMode({
+    cols: layout.cols,
+    rows: layout.rows,
+    introRows: 8,
+    composerRows: composerRows ?? 5,
+  });
+
+  const parts = buildNativeTranscriptParts(
+    [
+      buildIntroRenderItem({
+        authState,
+        workspaceLabel,
+        layout,
+        providerLabel: runtimeSummary?.providerLabel ?? null,
+        startupHeaderMode,
+      }),
+      ...buildStaticRenderItems(staticItems, turnIds, null, null, null),
+      ...buildActiveRenderItems(activeItems, turnIds, uiState),
+    ],
+    {
+      totalWidth: getShellWidth(layout.cols),
+      verboseMode,
+      debugLabel: "transcript-shell",
+      workspaceRoot,
+    },
+  );
+
+  return {
+    staticItems: parts.staticItems.map((item) => ({ ...item, type: "rows" as const })),
+    liveRows: parts.liveRows,
+    startupHeaderMode,
+  };
+}
+
+function TranscriptShellInner({
+  layout,
+  authState,
+  workspaceLabel,
+  workspaceRoot = null,
+  runtimeSummary = null,
+  staticEvents,
+  activeEvents,
+  uiState,
+  composer,
+  composerRows,
+  verboseMode = false,
+  clearCount = 0,
+  visible = true,
+}: TranscriptShellProps) {
+  const { staticItems, liveRows, startupHeaderMode } = useMemo(
+    () => buildTranscriptItems({
+      layout,
+      authState,
+      workspaceLabel,
+      workspaceRoot,
+      runtimeSummary,
+      staticEvents,
+      activeEvents,
+      uiState,
+      composerRows,
+      verboseMode,
+    }),
+    [activeEvents, authState, composerRows, layout, runtimeSummary, staticEvents, uiState, verboseMode, workspaceLabel, workspaceRoot],
+  );
+  const homeScreenActive = visible && isHomeScreenState({ staticEvents, activeEvents, uiState });
+  const visibleStaticItemsRef = useRef(staticItems);
+
+  useEffect(() => {
+    if (visible) {
+      visibleStaticItemsRef.current = staticItems;
+    }
+  }, [staticItems, visible]);
+
+  const displayedStaticItems = visible ? staticItems : visibleStaticItemsRef.current;
+
+  const staticRenderItems = useMemo<StaticRenderItem[]>(() => {
+    return displayedStaticItems.map((item) => ({
+      ...item,
+      key: `clear-${clearCount}-${item.key}`,
+    }));
+  }, [clearCount, displayedStaticItems]);
+
+  const displayedLiveRows = visible ? liveRows : [];
+  const staticRowCount = useMemo(
+    () => displayedStaticItems.reduce((rowCount, item) => rowCount + item.rows.length, 0),
+    [displayedStaticItems],
+  );
+  const liveBottomSpacerRows = visible
+    ? Math.max(0, getShellHeight(layout.rows) - staticRowCount - displayedLiveRows.length - (composerRows ?? 0))
+    : 0;
+  const spacerRows = useMemo<TimelineRow[]>(
+    () => Array.from({ length: liveBottomSpacerRows }, (_, index) => ({
+      key: `live-bottom-spacer-${clearCount}-${index}`,
+      spans: [{ text: " ".repeat(getShellWidth(layout.cols)) }],
+    })),
+    [clearCount, layout.cols, liveBottomSpacerRows],
+  );
+  const shellWidth = getShellWidth(layout.cols);
+  const introInnerWidth = Math.max(10, shellWidth - 2);
+  const selectedLogoRows = startupHeaderMode === "tiny"
+    ? []
+    : startupHeaderMode === "large"
+      ? selectLogoVariant(introInnerWidth)
+      : introInnerWidth >= LOGO_COMPACT_MIN_COLS ? LOGO_COMPACT : [];
+  const selectedLogoVariant = getLogoVariantName(selectedLogoRows);
+  const logoHiddenReason = getLogoHiddenReason({
+    startupHeaderMode,
+    logoVariant: selectedLogoVariant,
+    width: introInnerWidth,
+  });
+  const startupTraceKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const nextKey = [
+      layout.cols,
+      layout.rows,
+      layout.mode,
+      startupHeaderMode,
+      homeScreenActive ? "home" : "transcript",
+      staticEvents.length,
+      activeEvents.length,
+      uiState.kind,
+      selectedLogoVariant,
+      clearCount,
+    ].join("|");
+    if (startupTraceKeyRef.current === nextKey) return;
+    startupTraceKeyRef.current = nextKey;
+    renderDebug.traceEvent("startup", "homeRender", {
+      cols: layout.cols,
+      rows: layout.rows,
+      layoutMode: layout.mode,
+      activeRoot: "TranscriptShell",
+      messageCount: [...staticEvents, ...activeEvents].filter(isTranscriptEvent).length,
+      staticEventsLength: staticEvents.length,
+      activeEventsLength: activeEvents.length,
+      uiStateKind: uiState.kind,
+      selectedLayoutMode: startupHeaderMode,
+      selectedLogoVariant,
+      logoBranchSelected: selectedLogoVariant !== "none" && selectedLogoVariant !== "wordmark",
+      logoHiddenReason,
+      composerCount: visible ? 1 : 0,
+      footerCount: visible ? 1 : 0,
+      homeScreenRendererUsed: homeScreenActive,
+      staticItemCount: staticRenderItems.length,
+      liveRowCount: displayedLiveRows.length,
+      clearCount,
+    });
+  }, [
+    activeEvents,
+    clearCount,
+    displayedLiveRows.length,
+    homeScreenActive,
+    layout.cols,
+    layout.mode,
+    layout.rows,
+    logoHiddenReason,
+    selectedLogoVariant,
+    startupHeaderMode,
+    staticEvents,
+    staticRenderItems.length,
+    uiState.kind,
+    visible,
+  ]);
+
+  return (
+    <Box flexDirection="column" width="100%" display={visible ? "flex" : "none"}>
+      <Static key={`static-${clearCount}`} items={staticRenderItems}>
+        {(item) => <RowsBlock key={item.key} rows={item.rows} />}
+      </Static>
+
+      {displayedLiveRows.length > 0 && <RowsBlock rows={displayedLiveRows} />}
+      {spacerRows.length > 0 && <RowsBlock rows={spacerRows} />}
+
+      {visible && composer}
+    </Box>
+  );
+}
+
+export const TranscriptShell = memo(function TranscriptShell(props: TranscriptShellProps) {
+  // repaintGeneration is folded in here (not just <Static>'s own key) because
+  // Ink only reliably re-flushes <Static> content on a genuine fresh mount of
+  // the whole subtree — its "capture before delete" escape hatch
+  // (reconciler.js's isStaticDirty/onImmediateRender) does not fire the same
+  // way when only the inner <Static> node is keyed away and remounted on its
+  // own. This does remount the composer too, but only on the (already
+  // disruptive) event of a real terminal resize, not during normal typing.
+  return (
+    <TranscriptShellInner
+      key={`clear-${props.clearCount ?? 0}-repaint-${props.repaintGeneration ?? 0}`}
+      {...props}
+    />
+  );
+});

package/src/ui/{TurnGroup.tsx → timeline/TurnGroup.tsx}

@@ -9,30 +9,30 @@ import type {
   RunToolActivity,
   UIState,
   UserPromptEvent,
-} from "../session/types.js";
-import { getAssistantContent, getResponseSegmentText, getRunPlanText } from "../session/types.js";
-import { formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
+} from "../../session/types.js";
+import { getAssistantContent, getResponseSegmentText, getRunPlanText } from "../../session/types.js";
+import { formatTerminalAnswerInline } from "../render/terminalAnswerFormat.js";
 import { ActionRequiredBlock } from "./ActionRequiredBlock.js";
-import { DashCard } from "./DashCard.js";
-import { useTheme } from "./theme.js";
-import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
-import { wrapPlainText, wrapCommandText } from "./textLayout.js";
+import { DashCard } from "../chrome/DashCard.js";
+import { useTheme } from "../theme.js";
+import { sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.js";
+import { wrapPlainText, wrapCommandText } from "../render/textLayout.js";
 import { selectVisibleRunActivity } from "./runActivityView.js";
-import type { RunFileActivity } from "../core/workspaceActivity.js";
-import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../session/chatLifecycle.js";
+import type { RunFileActivity } from "../../core/workspace/workspaceActivity.js";
+import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../../session/chatLifecycle.js";
 import { formatProgressBlockBodyLines } from "./progressEntries.js";
-import { getUsableShellWidth, transcriptContentIndent } from "./layout.js";
-import { MemoizedRenderMessage } from "./Markdown.js";
+import { getUsableShellWidth, transcriptContentIndent } from "../layout.js";
+import { MemoizedRenderMessage } from "../render/Markdown.js";
 import {
   sanitizeOutput,
   sanitizeStreamChunk,
   normalizeOutput,
   classifyOutput,
   formatForBox,
-} from "./outputPipeline.js";
-import { normalizeCommand, getFriendlyActionLabel } from "./commandNormalize.js";
-import * as renderDebug from "../core/perf/renderDebug.js";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+} from "../render/outputPipeline.js";
+import { normalizeCommand, getFriendlyActionLabel } from "../input/commandNormalize.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+import { normalizePlanReviewMarkdown } from "../../core/workspace/planStorage.js";
 
 export type TurnOpacity = "active" | "recent" | "dim";
 

package/src/ui/timeline/layoutListWindow.ts

@@ -0,0 +1,145 @@
+/**
+ * Shared utility for windowing large lists in limited terminal rows.
+ */
+
+export interface ListWindowOptions {
+  itemCount: number;
+  selectedIndex: number;
+  availableRows: number;
+  /** Fixed rows consumed by headers, borders, titles, etc. */
+  chromeRows: number;
+  /** Whether to show "↑ N more" and "↓ N more" indicators. */
+  showIndicators?: boolean;
+  /** Whether to show "Showing X-Y of N" range line. */
+  showRangeLine?: boolean;
+}
+
+export interface ListWindowResult {
+  start: number;
+  end: number;
+  visibleCount: number;
+  showAbove: boolean;
+  showBelow: boolean;
+  showRange: boolean;
+  hiddenAbove: number;
+  hiddenBelow: number;
+  /** Total rows consumed including chrome and indicators. */
+  totalRows: number;
+}
+
+/**
+ * Calculates a contiguous window of items that fits within available rows,
+ * ensuring the selected item is always visible.
+ */
+export function calculateListWindow({
+  itemCount,
+  selectedIndex,
+  availableRows,
+  chromeRows,
+  showIndicators = true,
+  showRangeLine = false,
+}: ListWindowOptions): ListWindowResult {
+  if (itemCount === 0) {
+    return {
+      start: 0,
+      end: 0,
+      visibleCount: 0,
+      showAbove: false,
+      showBelow: false,
+      showRange: false,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      totalRows: chromeRows,
+    };
+  }
+
+  const rangeReserved = showRangeLine ? 1 : 0;
+  
+  // If everything fits including the range line, just show everything.
+  if (itemCount + chromeRows + rangeReserved <= availableRows) {
+    return {
+      start: 0,
+      end: itemCount,
+      visibleCount: itemCount,
+      showAbove: false,
+      showBelow: false,
+      showRange: showRangeLine,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      totalRows: itemCount + chromeRows + rangeReserved,
+    };
+  }
+
+  // Otherwise we must window.
+  // We reserve space for indicators if requested.
+  // We MUST fit within availableRows.
+  const indicatorReserved = showIndicators ? 2 : 0;
+  const baseReserved = chromeRows + indicatorReserved + rangeReserved;
+  
+  let itemRows = Math.max(1, availableRows - baseReserved);
+  let start = 0;
+  let end = 0;
+
+  // Iteratively refine to account for dynamic indicators.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    const visibleCount = Math.max(1, Math.min(itemCount, itemRows));
+    
+    // Center selected item if possible
+    start = Math.max(0, selectedIndex - Math.floor(visibleCount / 2));
+    if (start + visibleCount > itemCount) {
+      start = Math.max(0, itemCount - visibleCount);
+    }
+    end = Math.min(itemCount, start + visibleCount);
+
+    const actualAbove = start > 0;
+    const actualBelow = end < itemCount;
+    const dynamicReserved = chromeRows 
+      + (showRangeLine ? 1 : 0)
+      + (showIndicators && actualAbove ? 1 : 0)
+      + (showIndicators && actualBelow ? 1 : 0);
+    
+    const nextItemRows = Math.max(1, availableRows - dynamicReserved);
+    if (nextItemRows === itemRows) break;
+    itemRows = nextItemRows;
+  }
+
+  // Final visibility check for selectedIndex
+  if (selectedIndex < start) {
+    start = selectedIndex;
+    end = Math.min(itemCount, start + itemRows);
+  } else if (selectedIndex >= end) {
+    end = selectedIndex + 1;
+    start = Math.max(0, end - itemRows);
+  }
+
+  // Final clamping to ensure we don't exceed availableRows if indicators are shown
+  let finalAbove = showIndicators && start > 0;
+  let finalBelow = showIndicators && end < itemCount;
+  
+  while (end - start + chromeRows + (showRangeLine ? 1 : 0) + (finalAbove ? 1 : 0) + (finalBelow ? 1 : 0) > availableRows && end - start > 1) {
+    // Shrink window from the side further from selectedIndex
+    if (selectedIndex - start > end - 1 - selectedIndex) {
+      start++;
+    } else {
+      end--;
+    }
+    finalAbove = showIndicators && start > 0;
+    finalBelow = showIndicators && end < itemCount;
+  }
+
+  return {
+    start,
+    end,
+    visibleCount: end - start,
+    showAbove: finalAbove,
+    showBelow: finalBelow,
+    showRange: showRangeLine,
+    hiddenAbove: start,
+    hiddenBelow: itemCount - end,
+    totalRows: (end - start) 
+      + chromeRows 
+      + (showRangeLine ? 1 : 0)
+      + (finalAbove ? 1 : 0)
+      + (finalBelow ? 1 : 0),
+  };
+}

package/src/ui/{progressEntries.ts → timeline/progressEntries.ts}

@@ -1,6 +1,6 @@
-import type { RunProgressBlock, RunProgressEntry, RunProgressSource } from "../session/types.js";
-import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
-import { wrapPlainText } from "./textLayout.js";
+import type { RunProgressBlock, RunProgressEntry, RunProgressSource } from "../../session/types.js";
+import { sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.js";
+import { wrapPlainText } from "../render/textLayout.js";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 

package/src/ui/{runActivityView.ts → timeline/runActivityView.ts}

@@ -1,4 +1,4 @@
-import type { RunEvent } from "../session/types.js";
+import type { RunEvent } from "../../session/types.js";
 
 const MAX_VISIBLE_ACTIVE_ACTIVITY = 6;
 const MAX_VISIBLE_SUMMARY_ACTIVITY = 4;