@golba98/codexa 1.0.1

package/src/ui/TimelineNavigation.test.tsx

@@ -0,0 +1,201 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { PassThrough } from "node:stream";
+import React from "react";
+import { render } from "ink";
+import type { TimelineEvent } from "../session/types.js";
+import { createLayoutSnapshot } from "./layout.js";
+import { ThemeProvider } from "./theme.js";
+import { Timeline } from "./Timeline.js";
+
+class TestInput extends PassThrough {
+  readonly isTTY = true;
+
+  setRawMode(): this {
+    return this;
+  }
+
+  override resume(): this {
+    return this;
+  }
+
+  override pause(): this {
+    return this;
+  }
+
+  ref(): this {
+    return this;
+  }
+
+  unref(): this {
+    return this;
+  }
+}
+
+class TestOutput extends PassThrough {
+  readonly isTTY = true;
+  columns = 100;
+  rows = 30;
+}
+
+function sleep(ms = 50): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function stripAnsi(value: string): string {
+  return value.replace(/\u001B\[[0-?]*[ -/]*[@-~]/g, "");
+}
+
+function makeLongTranscript(): TimelineEvent[] {
+  const content = Array.from({ length: 36 }, (_, index) => `line-${String(index).padStart(2, "0")}`).join("\n");
+  return [
+    { id: 1, type: "user", createdAt: 1, prompt: "print many lines", turnId: 1 },
+    { id: 2, type: "assistant", createdAt: 2, content, contentChunks: [], turnId: 1 },
+  ];
+}
+
+test("wheel mode: SGR wheel-up shows JumpToBottomBar with wheel hint", async () => {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let output = "";
+  stdout.on("data", (chunk) => { output += chunk.toString(); });
+
+  const instance = render(
+    <ThemeProvider theme="purple">
+      <Timeline
+        staticEvents={makeLongTranscript()}
+        activeEvents={[]}
+        layout={createLayoutSnapshot(100, 30)}
+        uiState={{ kind: "IDLE" }}
+        viewportRows={8}
+        verboseMode={false}
+        mouseCapture={true}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as unknown as NodeJS.ReadStream,
+      stdout: stdout as unknown as NodeJS.WriteStream,
+      stderr: stdout as unknown as NodeJS.WriteStream,
+      debug: true,
+      exitOnCtrlC: false,
+      patchConsole: false,
+    },
+  );
+
+  try {
+    await sleep(100);
+    const beforeWheel = output.length;
+
+    // Send SGR mouse wheel-up event
+    stdin.write("[<64;12;9M");
+    await sleep(100);
+
+    const frame = stripAnsi(output.slice(beforeWheel));
+    assert.match(frame, /Scrolled up/);
+    assert.match(frame, /wheel↓\/End to bottom/);
+  } finally {
+    instance.unmount();
+  }
+});
+
+test("wheel mode: End key after wheel-up hides JumpToBottomBar", async () => {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let output = "";
+  stdout.on("data", (chunk) => { output += chunk.toString(); });
+
+  const instance = render(
+    <ThemeProvider theme="purple">
+      <Timeline
+        staticEvents={makeLongTranscript()}
+        activeEvents={[]}
+        layout={createLayoutSnapshot(100, 30)}
+        uiState={{ kind: "IDLE" }}
+        viewportRows={8}
+        verboseMode={false}
+        mouseCapture={true}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as unknown as NodeJS.ReadStream,
+      stdout: stdout as unknown as NodeJS.WriteStream,
+      stderr: stdout as unknown as NodeJS.WriteStream,
+      debug: true,
+      exitOnCtrlC: false,
+      patchConsole: false,
+    },
+  );
+
+  try {
+    await sleep(100);
+    stdin.write("[<64;12;9M");
+    await sleep(100);
+
+    const beforeEnd = output.length;
+    stdin.write("");
+    await sleep(100);
+
+    const endFrame = stripAnsi(output.slice(beforeEnd));
+    assert.doesNotMatch(endFrame, /Scrolled up/);
+  } finally {
+    instance.unmount();
+  }
+});
+
+test("PageUp, End, and SGR wheel packets navigate the timeline through Ink input", async () => {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let output = "";
+  stdout.on("data", (chunk) => {
+    output += chunk.toString();
+  });
+
+  const instance = render(
+    <ThemeProvider theme="purple">
+      <Timeline
+        staticEvents={makeLongTranscript()}
+        activeEvents={[]}
+        layout={createLayoutSnapshot(100, 30)}
+        uiState={{ kind: "IDLE" }}
+        viewportRows={8}
+        verboseMode={false}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as unknown as NodeJS.ReadStream,
+      stdout: stdout as unknown as NodeJS.WriteStream,
+      stderr: stdout as unknown as NodeJS.WriteStream,
+      debug: true,
+      exitOnCtrlC: false,
+      patchConsole: false,
+    },
+  );
+
+  try {
+    await sleep(100);
+    const beforePageUpLength = output.length;
+
+    stdin.write("\u001b[5~");
+    await sleep(100);
+
+    const pageUpFrame = stripAnsi(output.slice(beforePageUpLength));
+    assert.match(pageUpFrame, /Scrolled up/);
+    assert.match(pageUpFrame, /PgDn\/End to bottom/);
+
+    const beforeEndLength = output.length;
+    stdin.write("\u001b[F");
+    await sleep(100);
+
+    const endFrame = stripAnsi(output.slice(beforeEndLength));
+    assert.doesNotMatch(endFrame, /Scrolled up/);
+
+    const beforeWheelLength = output.length;
+    stdin.write("\u001b[<64;12;9M");
+    await sleep(100);
+
+    const wheelFrame = stripAnsi(output.slice(beforeWheelLength));
+    assert.match(wheelFrame, /Scrolled up/);
+  } finally {
+    instance.unmount();
+  }
+});

package/src/ui/TopHeader.test.tsx

@@ -0,0 +1,239 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import React from "react";
+import { PassThrough } from "node:stream";
+import { render } from "ink";
+import type { CodexAuthState } from "../core/auth/codexAuth.js";
+import { buildRuntimeSummary } from "../config/runtimeConfig.js";
+import { TEST_RUNTIME } from "../test/runtimeTestUtils.js";
+import { createLayoutSnapshot } from "./layout.js";
+import { ThemeProvider } from "./theme.js";
+import { getHeaderHeroLayout, HEADER_WORDMARK_LINES, TopHeader } from "./TopHeader.js";
+import { APP_VERSION, formatWorkspaceDisplayPath, HEADER_CONFIG_DEFAULTS } from "../config/settings.js";
+import type { HeaderConfig } from "../config/settings.js";
+
+class TestInput extends PassThrough {
+  readonly isTTY = true;
+
+  setRawMode(): this {
+    return this;
+  }
+
+  override resume(): this {
+    return this;
+  }
+
+  override pause(): this {
+    return this;
+  }
+
+  ref(): this {
+    return this;
+  }
+
+  unref(): this {
+    return this;
+  }
+}
+
+class TestOutput extends PassThrough {
+  readonly isTTY = true;
+  columns = 120;
+  rows = 40;
+}
+
+function stripAnsi(value: string): string {
+  return value.replace(/\u001B\[[0-?]*[ -/]*[@-~]/g, "");
+}
+
+function sleep(ms = 50): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const HEADER_CONFIG_WITH_AUTH: HeaderConfig = { ...HEADER_CONFIG_DEFAULTS, showAuthStatus: true };
+
+async function renderHeader(cols: number, authState: CodexAuthState, headerConfig?: HeaderConfig): Promise<string> {
+  return renderHeaderWithWorkspace(cols, authState, "C:\\Development\\1-JavaScript\\13-Custom CLI", headerConfig);
+}
+
+async function renderHeaderWithWorkspace(
+  cols: number,
+  authState: CodexAuthState,
+  workspaceLabel: string,
+  headerConfig: HeaderConfig = HEADER_CONFIG_DEFAULTS,
+): Promise<string> {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  stdout.columns = cols;
+  let output = "";
+
+  stdout.on("data", (chunk) => {
+    output += chunk.toString();
+  });
+
+  const instance = render(
+    <ThemeProvider theme="purple">
+      <TopHeader
+        authState={authState}
+        workspaceLabel={workspaceLabel}
+        layout={createLayoutSnapshot(cols, 40)}
+        runtimeSummary={buildRuntimeSummary(TEST_RUNTIME)}
+        headerConfig={headerConfig}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as unknown as NodeJS.ReadStream,
+      stdout: stdout as unknown as NodeJS.WriteStream,
+      stderr: stdout as unknown as NodeJS.WriteStream,
+      debug: true,
+      exitOnCtrlC: false,
+      patchConsole: false,
+    },
+  );
+
+  await sleep(60);
+  instance.cleanup();
+  await sleep(20);
+
+  return stripAnsi(output);
+}
+
+test("full mode renders wordmark at wide terminal", async () => {
+  const output = await renderHeader(130, "authenticated", HEADER_CONFIG_WITH_AUTH);
+
+  assert.equal(getHeaderHeroLayout(createLayoutSnapshot(130, 40)).mode, "wide");
+  assert.match(output, /[█╔╗╚╝═║]/);
+  assert.match(output, new RegExp(`Codexa v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.match(output, /Authenticated/);
+  assert.match(output, /Workspace:\s*C:\\Development\\1-JavaScript\\13-Custom CLI/);
+  assert.doesNotMatch(output, /Runtime:/);
+  assert.doesNotMatch(output, /gpt-5\.4/i);
+  assert.doesNotMatch(output, /Net:\s*off/i);
+  assert.doesNotMatch(output, /Roots:\s*0/i);
+  assert.doesNotMatch(output, /FULL AUTO/i);
+  assert.doesNotMatch(output, /Workspace write/i);
+  assert.doesNotMatch(output, /On request/i);
+});
+
+test("wide header centers metadata beside the logo with a clear column gap", async () => {
+  const output = await renderHeader(130, "authenticated", HEADER_CONFIG_WITH_AUTH);
+  const rows = output.split("\n");
+  const firstLogoRow = rows.findIndex((row) => row.includes("██████"));
+  const brandRow = rows.findIndex((row) => row.includes(`Codexa v${APP_VERSION}`));
+  const workspaceRow = rows.findIndex((row) => row.includes("Workspace:"));
+
+  assert.ok(firstLogoRow >= 0, "logo should render");
+  assert.equal(brandRow, firstLogoRow + 1, "metadata should be vertically centered within the logo block");
+  // With auth shown: brand → auth → [1-row gap] → workspace — so workspace is 3 rows from brand
+  assert.equal(workspaceRow, brandRow + 3, "workspace should sit below auth with a 1-row gap between version and workspace");
+  assert.ok((rows[brandRow]?.indexOf(`Codexa v${APP_VERSION}`) ?? -1) >= 55, "metadata should have a visible left gap from the logo");
+});
+
+test("version and workspace metadata rows have a visible gap between them", async () => {
+  // Default config: brand + workspace only (no auth row between them)
+  const output = await renderHeader(130, "authenticated");
+  const rows = output.split("\n");
+  const brandRow = rows.findIndex((row) => row.includes(`Codexa v${APP_VERSION}`));
+  const workspaceRow = rows.findIndex((row) => row.includes("Workspace:"));
+
+  assert.ok(brandRow >= 0, "brand line should render");
+  assert.ok(workspaceRow > brandRow + 1, "workspace should not be immediately adjacent to version");
+  assert.equal(workspaceRow, brandRow + 2, "workspace is exactly 2 rows below brand — 1 blank gap row separates them");
+});
+
+test("narrow full header stacks metadata below the logo instead of squeezing columns", async () => {
+  const output = await renderHeader(110, "authenticated", HEADER_CONFIG_WITH_AUTH);
+  const rows = output.split("\n");
+  const brandRow = rows.findIndex((row) => row.includes(`Codexa v${APP_VERSION}`));
+  const lastLogoRow = rows.findIndex((row) => row.includes("╚═════"));
+
+  assert.equal(getHeaderHeroLayout(createLayoutSnapshot(110, 40)).mode, "stacked");
+  assert.ok(lastLogoRow >= 0, "logo should render");
+  assert.ok(brandRow > lastLogoRow, "metadata should render below the logo when stacked");
+  assert.doesNotMatch(rows[brandRow] ?? "", /[█╔╗╚╝═║]/, "stacked metadata row should not contain logo glyphs");
+});
+
+test("header wordmark lines never contain metadata text", () => {
+  const wordmarkText = HEADER_WORDMARK_LINES.join("\n");
+
+  assert.doesNotMatch(wordmarkText, /Codexa v/);
+  assert.doesNotMatch(wordmarkText, /Workspace:/);
+  assert.doesNotMatch(wordmarkText, /Auth:/);
+});
+
+test("compact mode renders version and auth", async () => {
+  const output = await renderHeader(105, "authenticated", HEADER_CONFIG_WITH_AUTH);
+
+  assert.match(output, new RegExp(`v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.match(output, /Authenticated/);
+  assert.match(output, /C:\\Development\\1-JavaScript\\13-Custom CLI/);
+  assert.doesNotMatch(output, /Runtime:/);
+  assert.doesNotMatch(output, /gpt-5\.4/i);
+  assert.doesNotMatch(output, /Net:\s*off/i);
+  assert.doesNotMatch(output, /Roots:\s*0/i);
+  assert.doesNotMatch(output, /FULL AUTO/i);
+  assert.doesNotMatch(output, /[█╔╗╚╝═║]/);
+});
+
+test("micro mode renders version and auth", async () => {
+  const output = await renderHeader(50, "authenticated");
+
+  assert.match(output, /Codex/);
+  assert.match(output, new RegExp(`v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.doesNotMatch(output, /[█╔╗╚╝═║]/);
+  assert.doesNotMatch(output, /gpt-5\.4/i);
+});
+
+test("full mode always shows wordmark regardless of activity", async () => {
+  const output = await renderHeader(180, "authenticated", HEADER_CONFIG_WITH_AUTH);
+
+  assert.match(output, /[█╔╗╚╝═║]/);
+  assert.match(output, new RegExp(`Codexa v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.match(output, /Authenticated/);
+  assert.match(output, /Workspace:\s*C:\\Development\\1-JavaScript\\13-Custom CLI/);
+  assert.doesNotMatch(output, /Runtime:/);
+});
+
+test("full mode renders Checking for checking auth state", async () => {
+  const output = await renderHeader(130, "checking", HEADER_CONFIG_WITH_AUTH);
+  assert.match(output, /Checking/);
+  assert.doesNotMatch(output, /Unknown/);
+});
+
+test("compact mode preserves workspace truncation without runtime text", async () => {
+  const output = await renderHeaderWithWorkspace(
+    60,
+    "authenticated",
+    "C:\\Development\\1-JavaScript\\13-Custom CLI\\packages\\really-long-subfolder\\nested\\workspace",
+  );
+
+  assert.match(output, /\.\.\. /);
+  assert.match(output, /nested\\workspace/);
+  assert.doesNotMatch(output, /packages\\really-long-subfolder/);
+  assert.doesNotMatch(output, /gpt-5\.4/i);
+});
+
+test("renders configured workspace display labels", async () => {
+  const workspaceRoot = "C:\\Development\\1-JavaScript\\13-Custom-CLI-Normal";
+
+  const dirOutput = await renderHeaderWithWorkspace(
+    130,
+    "authenticated",
+    formatWorkspaceDisplayPath(workspaceRoot, "dir"),
+  );
+  assert.match(dirOutput, /Workspace:\s*13-Custom-CLI-Normal/);
+
+  const nameOutput = await renderHeaderWithWorkspace(
+    130,
+    "authenticated",
+    formatWorkspaceDisplayPath(workspaceRoot, "name"),
+  );
+  assert.match(nameOutput, /Workspace:\s*Codexa/);
+
+  const simpleOutput = await renderHeaderWithWorkspace(
+    130,
+    "authenticated",
+    formatWorkspaceDisplayPath(workspaceRoot, "simple"),
+  );
+  assert.match(simpleOutput, /Workspace:\s*13-Custom-CLI-Normal/);
+});

package/src/ui/TopHeader.tsx

@@ -0,0 +1,257 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { APP_VERSION, HEADER_CONFIG_DEFAULTS, type HeaderConfig } from "../config/settings.js";
+import type { RuntimeSummary } from "../config/runtimeConfig.js";
+import type { CodexAuthState } from "../core/auth/codexAuth.js";
+import { getAuthStateLabel } from "../core/auth/codexAuth.js";
+import * as renderDebug from "../core/perf/renderDebug.js";
+import { useTheme } from "./theme.js";
+import type { Layout } from "./layout.js";
+import { getTextWidth } from "./textLayout.js";
+
+export const HEADER_WORDMARK_LINES = [
+  " ██████╗ ██████╗ ██████╗ ███████╗██╗  ██╗ █████╗ ",
+  "██╔════╝██╔═══██╗██╔══██╗██╔════╝╚██╗██╔╝██╔══██╗",
+  "██║     ██║   ██║██║  ██║█████╗   ╚███╔╝ ███████║",
+  "██║     ██║   ██║██║  ██║██╔══╝   ██╔██╗ ██╔══██║",
+  "╚██████╗╚██████╔╝██████╔╝███████╗██╔╝ ██╗██║  ██║",
+  " ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝",
+];
+
+const MIN_METADATA_COLUMN_WIDTH = 60;
+const STACKED_METADATA_GAP_ROWS = 1;
+
+export type HeaderHeroMode = "wide" | "stacked" | "compact";
+
+export interface HeaderHeroLayout {
+  mode: HeaderHeroMode;
+  topMarginRows: number;
+  bottomMarginRows: number;
+  metadataGapColumns: number;
+  metadataGapRows: number;
+  logoRows: number;
+  metadataRows: number;
+  totalRows: number;
+}
+
+
+interface TopHeaderProps {
+  authState: CodexAuthState;
+  workspaceLabel: string;
+  layout: Layout;
+  runtimeSummary?: RuntimeSummary | null;
+  headerConfig?: HeaderConfig;
+}
+
+function getWordmarkWidth(): number {
+  return HEADER_WORDMARK_LINES.reduce((maxWidth, line) => Math.max(maxWidth, getTextWidth(line)), 0);
+}
+
+function getHeaderVerticalMargins(layout: Layout): { topMarginRows: number; bottomMarginRows: number } {
+  if (layout.mode !== "full") {
+    return {
+      topMarginRows: 0,
+      bottomMarginRows: layout.rows > 24 ? 1 : 0,
+    };
+  }
+
+  if (layout.rows <= 24) {
+    return { topMarginRows: 0, bottomMarginRows: 1 };
+  }
+
+  return {
+    topMarginRows: 1,
+    bottomMarginRows: layout.rows >= 36 ? 2 : 1,
+  };
+}
+
+export function getHeaderHeroLayout(layout: Layout): HeaderHeroLayout {
+  const { topMarginRows, bottomMarginRows } = getHeaderVerticalMargins(layout);
+  const metadataRows = 3;
+
+  if (layout.mode !== "full") {
+    return {
+      mode: "compact",
+      topMarginRows,
+      bottomMarginRows,
+      metadataGapColumns: 0,
+      metadataGapRows: 0,
+      logoRows: 1,
+      metadataRows: 0,
+      totalRows: topMarginRows + 1 + bottomMarginRows,
+    };
+  }
+
+  const logoRows = HEADER_WORDMARK_LINES.length;
+  const metadataGapColumns = layout.cols >= 150 ? 6 : layout.cols >= 130 ? 5 : 4;
+  const canUseWideHero = layout.cols >= getWordmarkWidth() + metadataGapColumns + MIN_METADATA_COLUMN_WIDTH + 2;
+  const metadataGapRows = canUseWideHero ? 0 : STACKED_METADATA_GAP_ROWS;
+  const contentRows = canUseWideHero
+    ? logoRows
+    : logoRows + metadataGapRows + metadataRows;
+
+  return {
+    mode: canUseWideHero ? "wide" : "stacked",
+    topMarginRows,
+    bottomMarginRows,
+    metadataGapColumns,
+    metadataGapRows,
+    logoRows,
+    metadataRows,
+    totalRows: topMarginRows + contentRows + bottomMarginRows,
+  };
+}
+
+export function measureTopHeaderRows(layout: Layout): number {
+  return getHeaderHeroLayout(layout).totalRows;
+}
+
+/** Truncate a path to fit within maxWidth, keeping the end and prefixing with "... " if needed */
+function truncatePath(path: string, maxWidth: number): string {
+  if (maxWidth <= 4 || path.length <= maxWidth) return path;
+  // Prefix with "... " (4 chars) and take the last (maxWidth - 4) chars
+  return "... " + path.slice(path.length - (maxWidth - 4));
+}
+
+export function TopHeader({
+  authState,
+  workspaceLabel,
+  layout,
+  headerConfig = HEADER_CONFIG_DEFAULTS,
+}: TopHeaderProps) {
+  renderDebug.useRenderDebug("Header", {
+    authState,
+    workspaceLabel,
+    cols: layout.cols,
+    rows: layout.rows,
+    mode: layout.mode,
+  });
+  renderDebug.useLifecycleDebug("Header", {
+    authState,
+    cols: layout.cols,
+    rows: layout.rows,
+    mode: layout.mode,
+  });
+
+  const { cols, mode } = layout;
+  const theme = useTheme();
+
+  const authLabelRaw = getAuthStateLabel(authState);
+  const authLabel = authLabelRaw.length > 0
+    ? authLabelRaw[0]!.toUpperCase() + authLabelRaw.slice(1)
+    : authLabelRaw;
+
+  const wsDisplay = truncatePath(workspaceLabel, Math.max(18, cols - 40));
+  const heroLayout = getHeaderHeroLayout(layout);
+  const metadataLines = [
+    headerConfig.showBrand ? { key: "brand", text: `Codexa v${APP_VERSION}`, color: theme.TEXT, bold: true } : null,
+    headerConfig.showAuthStatus ? { key: "auth", text: `Auth: ${authLabel}`, color: theme.TEXT, bold: false } : null,
+    headerConfig.showWorkspace ? { key: "workspace", text: `Workspace: ${wsDisplay}`, color: theme.MUTED, bold: false } : null,
+  ].filter((line): line is { key: string; text: string; color: string; bold: boolean } => Boolean(line));
+
+  // Add a 1-row gap between the version line and workspace line in wide mode
+  // so the two pieces of metadata have breathing room beside the logo.
+  const hasMetadataGap = heroLayout.mode === "wide"
+    && metadataLines.some((l) => l.key === "brand")
+    && metadataLines.some((l) => l.key === "workspace");
+  const metadataVisualRows = metadataLines.length + (hasMetadataGap ? 1 : 0);
+
+  const metadataColumn = (
+    <Box flexDirection="column" flexGrow={1} minWidth={Math.min(MIN_METADATA_COLUMN_WIDTH, Math.max(1, cols - getWordmarkWidth() - heroLayout.metadataGapColumns - 2))}>
+      {metadataLines.map((line) =>
+        hasMetadataGap && line.key === "workspace" ? (
+          <Box key={line.key} marginTop={1}>
+            <Text color={line.color} bold={line.bold} wrap="truncate">{line.text}</Text>
+          </Box>
+        ) : (
+          <Text key={line.key} color={line.color} bold={line.bold} wrap="truncate">{line.text}</Text>
+        )
+      )}
+    </Box>
+  );
+
+  const logoColumn = (
+    <Box flexDirection="column" flexShrink={0}>
+      {HEADER_WORDMARK_LINES.map((line, i) => (
+        <Text key={i} color={theme.ACCENT} bold>{line}</Text>
+      ))}
+    </Box>
+  );
+
+  if (mode === "full") {
+    const metadataTopOffset = Math.max(0, Math.floor((HEADER_WORDMARK_LINES.length - metadataVisualRows) / 2));
+
+    return (
+      <Box flexDirection="column" paddingX={1} width="100%">
+        {heroLayout.topMarginRows > 0 && (
+          <Box height={heroLayout.topMarginRows} />
+        )}
+
+        {heroLayout.mode === "wide" ? (
+          <Box flexDirection="row" width="100%">
+            {logoColumn}
+            <Box width={heroLayout.metadataGapColumns} flexShrink={0} />
+            <Box flexDirection="column" flexGrow={1} paddingTop={metadataTopOffset}>
+              {metadataColumn}
+            </Box>
+          </Box>
+        ) : (
+          <Box flexDirection="column" width="100%">
+            {logoColumn}
+            {heroLayout.metadataGapRows > 0 && (
+              <Box height={heroLayout.metadataGapRows} />
+            )}
+            {metadataColumn}
+          </Box>
+        )}
+
+        {heroLayout.bottomMarginRows > 0 && (
+          <Box height={heroLayout.bottomMarginRows} />
+        )}
+      </Box>
+    );
+  }
+
+  // Compact / micro / activity-collapsed: single-line header
+  const compactParts: React.ReactNode[] = [];
+  if (headerConfig.showBrand) {
+    compactParts.push(
+      <Text key="brand" color={theme.TEXT} bold>{`Codexa v${APP_VERSION}`}</Text>,
+    );
+  }
+  if (headerConfig.showAuthStatus) {
+    if (compactParts.length > 0) compactParts.push(<Text key="sep-auth" color={theme.DIM}>{"  ·  "}</Text>);
+    compactParts.push(<Text key="auth" color={theme.TEXT}>{authLabel}</Text>);
+  }
+  if (headerConfig.showWorkspace) {
+    if (compactParts.length > 0) compactParts.push(<Text key="sep-ws" color={theme.DIM}>{"  ·  "}</Text>);
+    compactParts.push(<Text key="ws" color={theme.MUTED} wrap="truncate">{wsDisplay}</Text>);
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1} width="100%">
+      {heroLayout.topMarginRows > 0 && (
+        <Box height={heroLayout.topMarginRows} />
+      )}
+      <Box flexDirection="row" width="100%">
+        {compactParts}
+      </Box>
+      {heroLayout.bottomMarginRows > 0 && (
+        <Box height={heroLayout.bottomMarginRows} />
+      )}
+    </Box>
+  );
+}
+
+// Memoize to prevent re-renders during streaming when props haven't changed
+export const MemoizedTopHeader = memo(TopHeader, (prev, next) => {
+  return (
+    prev.authState === next.authState &&
+    prev.workspaceLabel === next.workspaceLabel &&
+    prev.layout.cols === next.layout.cols &&
+    prev.layout.rows === next.layout.rows &&
+    prev.layout.mode === next.layout.mode &&
+    prev.runtimeSummary === next.runtimeSummary &&
+    prev.headerConfig === next.headerConfig
+  );
+});