@golba98/codexa 1.0.2 → 1.0.4

package/src/ui/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 "./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

@@ -18,7 +18,7 @@ import { useTheme } from "./theme.js";
 import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
 import { wrapPlainText, wrapCommandText } from "./textLayout.js";
 import { selectVisibleRunActivity } from "./runActivityView.js";
-import type { RunFileActivity } from "../core/workspaceActivity.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";
@@ -32,7 +32,7 @@ import {
 } from "./outputPipeline.js";
 import { normalizeCommand, getFriendlyActionLabel } from "./commandNormalize.js";
 import * as renderDebug from "../core/perf/renderDebug.js";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+import { normalizePlanReviewMarkdown } from "../core/workspace/planStorage.js";
 
 export type TurnOpacity = "active" | "recent" | "dim";
 
@@ -69,14 +69,14 @@ function UserInputCard({
   dim: boolean;
 }) {
   const theme = useTheme();
-  const borderColor = theme.BORDER_SUBTLE;
+  const borderColor = theme.border;
   const contentWidth = Math.max(1, cols - 7);
   const lines = wrapPlainText(sanitizeTerminalOutput(prompt), contentWidth);
 
   return (
     <DashCard cols={cols} title="PROMPT" borderColor={borderColor}>
       {lines.map((line, i) => (
-        <Text key={i} color={dim ? theme.DIM : theme.TEXT}>
+        <Text key={i} color={dim ? theme.textDim : theme.text}>
           {i === 0 ? "❯ " : "  "}{line}
         </Text>
       ))}
@@ -122,38 +122,38 @@ function ImpactSummary({
 
   const opColor = (op: string) => {
     switch (op) {
-      case "created": return theme.SUCCESS;
-      case "deleted": return theme.ERROR;
-      default: return theme.INFO;
+      case "created": return theme.success;
+      case "deleted": return theme.error;
+      default: return theme.info;
     }
   };
 
   return (
     <Box flexDirection="column" width="100%" paddingX={1} marginTop={0}>
       {hasDeletes && (
-        <Text color={theme.WARNING}>{"⚠ Destructive changes detected:"}</Text>
+        <Text color={theme.warning}>{"⚠ Destructive changes detected:"}</Text>
       )}
       {hasFiles && (
         <>
-          <Text color={theme.DIM}>{"  Changes:"}</Text>
+          <Text color={theme.textDim}>{"  Changes:"}</Text>
           {recentFiles.map((file: RunFileActivity, i: number) => {
             const diffInfo = file.addedLines != null || file.removedLines != null
               ? ` (+${file.addedLines ?? 0} -${file.removedLines ?? 0})`
               : "";
             return (
               <Text key={i}>
-                <Text color={theme.DIM}>{"    "}</Text>
+                <Text color={theme.textDim}>{"    "}</Text>
                 <Text color={opColor(file.operation)}>{opLabel(file.operation)}</Text>
-                <Text color={theme.TEXT}>{" "}{file.path}</Text>
-                <Text color={theme.DIM}>{diffInfo}</Text>
+                <Text color={theme.text}>{" "}{file.path}</Text>
+                <Text color={theme.textDim}>{diffInfo}</Text>
               </Text>
             );
           })}
         </>
       )}
-      <Text color={theme.DIM}>
+      <Text color={theme.textDim}>
         {"  "}
-        <Text color={theme.SUCCESS}>{"✔ "}</Text>
+        <Text color={theme.success}>{"✔ "}</Text>
         {run.touchedFileCount > 0 && `${run.touchedFileCount} file${run.touchedFileCount === 1 ? "" : "s"}`}
         {hasTools && `${hasFiles ? " • " : ""}${run.toolActivities.length} action${run.toolActivities.length === 1 ? "" : "s"}`}
         {run.durationMs != null && ` • ${formatDuration(run.durationMs)}`}
@@ -172,11 +172,11 @@ function FileScanCard({ run, cols }: { run: RunEvent; cols: number }) {
   return (
     <DashCard cols={cols} title="Scanning workspace ..." rightBadge={badge}>
       {hiddenCount > 0 && (
-        <Text color={theme.DIM}>{`... ${hiddenCount} more`}</Text>
+        <Text color={theme.textDim}>{`... ${hiddenCount} more`}</Text>
       )}
       {visible.map((file, i) => (
-        <Text key={i} color={theme.SUCCESS}>
-          {"● "}<Text color={theme.TEXT}>{file.path}</Text>
+        <Text key={i} color={theme.success}>
+          {"● "}<Text color={theme.text}>{file.path}</Text>
         </Text>
       ))}
     </DashCard>
@@ -307,9 +307,9 @@ function PlanPanel({
       cols={cols}
       title="Plan"
       rightBadge={approved ? "approved" : undefined}
-      borderColor={theme.ACCENT}
-      titleColor={theme.TEXT}
-      badgeColor={theme.SUCCESS}
+      borderColor={theme.accent}
+      titleColor={theme.text}
+      badgeColor={theme.success}
     >
       <MemoizedRenderMessage segments={formatted} width={contentWidth} brightHeadings />
     </DashCard>
@@ -337,12 +337,12 @@ function ActionEventCard({
   const actionLabel = getFriendlyActionLabel(actionNormalized);
 
   const statusIcon = tool.status === "failed" ? "✕" : tool.status === "completed" ? "✔" : "▸";
-  const statusColor = tool.status === "failed" ? theme.ERROR : tool.status === "completed" ? theme.SUCCESS : theme.INFO;
-  const borderColor = dim ? theme.BORDER_SUBTLE : tool.status === "running" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE;
+  const statusColor = tool.status === "failed" ? theme.error : tool.status === "completed" ? theme.success : theme.info;
+  const borderColor = dim ? theme.border : tool.status === "running" ? theme.borderFocused : theme.border;
   const detailText = isLiveCursorTarget && tool.status === "running"
     ? "▌"
     : tool.summary?.trim() ? tool.summary : " ";
-  const detailColor = isLiveCursorTarget && tool.status === "running" ? theme.ACCENT : theme.MUTED;
+  const detailColor = isLiveCursorTarget && tool.status === "running" ? theme.accent : theme.textMuted;
   const duration = tool.completedAt != null
     ? formatDuration(tool.completedAt - tool.startedAt)
     : null;
@@ -356,10 +356,10 @@ function ActionEventCard({
         <>
           <Box>
             <Text color={statusColor}>{statusIcon + " "}</Text>
-            <Text color={dim ? theme.DIM : theme.TEXT}>{actionLabel}</Text>
+            <Text color={dim ? theme.textDim : theme.text}>{actionLabel}</Text>
           </Box>
           {commandLines.map((line, i) => (
-            <Text key={i} color={theme.MUTED}>{"  "}{line || " "}</Text>
+            <Text key={i} color={theme.textMuted}>{"  "}{line || " "}</Text>
           ))}
         </>
       ) : (
@@ -367,10 +367,10 @@ function ActionEventCard({
           {commandLines.map((line, i) => (
             <Box key={i}>
               <Text color={i === 0 ? statusColor : undefined}>{i === 0 ? statusIcon + " " : "  "}</Text>
-              <Text color={dim ? theme.DIM : theme.TEXT}>{line || " "}</Text>
+              <Text color={dim ? theme.textDim : theme.text}>{line || " "}</Text>
             </Box>
           ))}
-          <Text color={theme.MUTED}>{"   "}</Text>
+          <Text color={theme.textMuted}>{"   "}</Text>
         </>
       )}
       <Text color={detailColor}>{"  "}{detailText}</Text>
@@ -405,14 +405,14 @@ function CodexThinkingBlock({
 
   return (
     <Box flexDirection="column" width="100%" paddingLeft={transcriptContentIndent} paddingRight={1}>
-      <Text color={theme.MUTED} bold>Codexa</Text>
+      <Text color={theme.textMuted} bold>Codexa</Text>
       {formatProgressBlockBodyLines(block.text, contentWidth)
         .slice(0, verboseMode ? undefined : COMPACT_PROCESSING_BODY_LINE_CAP)
         .map((line, i) => (
-          <Text key={i} color={theme.DIM}>{line || " "}</Text>
+          <Text key={i} color={theme.textDim}>{line || " "}</Text>
         ))}
       {isLiveCursorTarget && block.status === "active" && (
-        <Text color={theme.ACCENT}>▌</Text>
+        <Text color={theme.accent}>▌</Text>
       )}
     </Box>
   );
@@ -453,11 +453,11 @@ function CodexResponseBlock({
 
   return (
     <Box flexDirection="column" width="100%" paddingLeft={transcriptContentIndent} paddingRight={1}>
-      <Text color={theme.MUTED} bold>Codexa</Text>
+      <Text color={theme.textMuted} bold>Codexa</Text>
       {run.status === "failed" && !streaming && isLast && (
         <Box flexDirection="column">
           {wrapPlainText(sanitizeTerminalOutput(run.errorMessage ?? run.summary), contentWidth).map((row, i) => (
-            <Text key={i} color={theme.ERROR}>{i === 0 ? `✕ ${row}` : `  ${row}`}</Text>
+            <Text key={i} color={theme.error}>{i === 0 ? `✕ ${row}` : `  ${row}`}</Text>
           ))}
         </Box>
       )}
@@ -466,7 +466,7 @@ function CodexResponseBlock({
         width={contentWidth}
       />
       {isLiveCursorTarget && segmentStreaming && (
-        <Text color={theme.ACCENT}>▌</Text>
+        <Text color={theme.accent}>▌</Text>
       )}
     </Box>
   );

package/src/ui/UpdateAvailableCard.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { CODEXA_UPDATE_COMMAND, formatVersionLabel } from "../core/version/updateCheck.js";
+import { clampVisualText } from "./layout.js";
+import { useTheme } from "./theme.js";
+
+export const UPDATE_CARD_CONTENT_ROWS = 4; // title + available + using + command
+export const UPDATE_CARD_ROWS = UPDATE_CARD_CONTENT_ROWS + 2; // +2 for top/bottom border rows
+
+export interface UpdateAvailableCardProps {
+  latestVersion: string;
+  currentVersion: string;
+  /** Total box width including borders. Long lines are truncated to fit. */
+  width?: number;
+}
+
+export function UpdateAvailableCard({ latestVersion, currentVersion, width }: UpdateAvailableCardProps) {
+  const theme = useTheme();
+  const command = `Run: ${CODEXA_UPDATE_COMMAND}`;
+  // Inner content width = boxWidth - 2 (left/right border cols)
+  const innerWidth = width !== undefined ? Math.max(8, width - 2) : undefined;
+
+  function clamp(text: string): string {
+    return innerWidth !== undefined ? clampVisualText(text, innerWidth) : text;
+  }
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.accent}
+      flexDirection="column"
+      width={width}
+      flexShrink={0}
+    >
+      <Text color={theme.text} bold>{clamp("Update available")}</Text>
+      <Text color={theme.textMuted}>{clamp(`Codexa ${formatVersionLabel(latestVersion)}`)}</Text>
+      <Text color={theme.textMuted}>{clamp(`Using ${formatVersionLabel(currentVersion)}`)}</Text>
+      <Text color={theme.textDim}>{clamp(command)}</Text>
+    </Box>
+  );
+}