@golba98/codexa 1.0.1 → 1.0.2

package/src/ui/TopHeader.test.tsx

@@ -50,7 +50,11 @@ function sleep(ms = 50): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const HEADER_CONFIG_WITH_AUTH: HeaderConfig = { ...HEADER_CONFIG_DEFAULTS, showAuthStatus: true };
+const HEADER_CONFIG_WITH_AUTH: HeaderConfig = {
+  ...HEADER_CONFIG_DEFAULTS,
+  showAuthStatus: true,
+  showContext: true,
+};
 
 async function renderHeader(cols: number, authState: CodexAuthState, headerConfig?: HeaderConfig): Promise<string> {
   return renderHeaderWithWorkspace(cols, authState, "C:\\Development\\1-JavaScript\\13-Custom CLI", headerConfig);
@@ -105,9 +109,12 @@ test("full mode renders wordmark at wide terminal", async () => {
   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.match(output, /Workspace:\s*C:\\Development\\1-JavaScript\\13-Custom CLI/);
+  assert.match(output, /Provider:\s*Codexa Core/);
+  assert.match(output, /Context:\s*Unknown/);
+  assert.doesNotMatch(output, /Model:/);
+  assert.doesNotMatch(output, /Reasoning:/);
   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);
@@ -123,15 +130,17 @@ test("wide header centers metadata beside the logo with a clear column gap", asy
   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");
-});
+  assert.ok(brandRow >= firstLogoRow && brandRow <= firstLogoRow + 2, "metadata should be vertically centered within the logo block");
+  assert.equal(workspaceRow, brandRow + 2, "workspace should sit below auth in the metadata block");
+  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 output = await renderHeader(130, "authenticated", {
+    ...HEADER_CONFIG_DEFAULTS,
+    showProvider: false,
+    showModel: false,
+  });
   const rows = output.split("\n");
   const brandRow = rows.findIndex((row) => row.includes(`Codexa v${APP_VERSION}`));
   const workspaceRow = rows.findIndex((row) => row.includes("Workspace:"));
@@ -161,28 +170,33 @@ test("header wordmark lines never contain metadata text", () => {
   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/);
+test("compact mode renders version and auth", async () => {
+  const output = await renderHeader(105, "authenticated", HEADER_CONFIG_WITH_AUTH);
+
+  assert.match(output, /[█╔╗╚╝═║]/);
+  assert.match(output, new RegExp(`v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.match(output, /Authenticated/);
+  assert.match(output, /Workspace:\s*C:\\Development\\1-JavaScript\\13-Custom CLI/);
+  assert.match(output, /Provider:\s*Codexa Core/);
+  assert.match(output, /Context:\s*Unknown/);
+  assert.doesNotMatch(output, /Model:/);
+  assert.doesNotMatch(output, /Reasoning:/);
   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("micro mode renders version and auth", async () => {
+  const output = await renderHeader(50, "authenticated", HEADER_CONFIG_WITH_AUTH);
+
+  assert.match(output, /Codex/);
+  assert.match(output, new RegExp(`v${APP_VERSION.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+  assert.doesNotMatch(output, /[█╔╗╚╝═║]/);
+  assert.match(output, /Provider/);
+  assert.match(output, /Contex/);
+  assert.doesNotMatch(output, /Model:/);
+});
 
 test("full mode always shows wordmark regardless of activity", async () => {
   const output = await renderHeader(180, "authenticated", HEADER_CONFIG_WITH_AUTH);
@@ -195,23 +209,24 @@ test("full mode always shows wordmark regardless of activity", async () => {
 });
 
 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/);
-});
+  const output = await renderHeader(130, "checking", HEADER_CONFIG_WITH_AUTH);
+  assert.match(output, /Checking/);
+  assert.doesNotMatch(output, /Auth:\s*Unknown/);
+});
 
-test("compact mode preserves workspace truncation without runtime text", async () => {
+test("compact mode preserves workspace truncation with 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);
-});
+  assert.match(output, /\.\.\. /);
+  assert.match(output, /nested\\workspace/);
+  assert.doesNotMatch(output, /packages\\really-long-subfolder/);
+  assert.match(output, /Provider:\s*Codexa Core/);
+  assert.doesNotMatch(output, /Model:/);
+});
 
 test("renders configured workspace display labels", async () => {
   const workspaceRoot = "C:\\Development\\1-JavaScript\\13-Custom-CLI-Normal";
@@ -221,7 +236,7 @@ test("renders configured workspace display labels", async () => {
     "authenticated",
     formatWorkspaceDisplayPath(workspaceRoot, "dir"),
   );
-  assert.match(dirOutput, /Workspace:\s*13-Custom-CLI-Normal/);
+  assert.match(dirOutput, /Workspace:\s*(?:.*\\)?13-Custom-CLI-Normal/);
 
   const nameOutput = await renderHeaderWithWorkspace(
     130,
@@ -235,5 +250,5 @@ test("renders configured workspace display labels", async () => {
     "authenticated",
     formatWorkspaceDisplayPath(workspaceRoot, "simple"),
   );
-  assert.match(simpleOutput, /Workspace:\s*13-Custom-CLI-Normal/);
+  assert.match(simpleOutput, /Workspace:\s*(?:.*\\)?13-Custom-CLI-Normal/);
 });

package/src/ui/TopHeader.tsx

@@ -20,6 +20,8 @@ export const HEADER_WORDMARK_LINES = [
 
 const MIN_METADATA_COLUMN_WIDTH = 60;
 const STACKED_METADATA_GAP_ROWS = 1;
+const MIN_LOGO_TERMINAL_WIDTH = getWordmarkWidth() + 2;
+const MIN_LOGO_TERMINAL_ROWS = 24;
 
 export type HeaderHeroMode = "wide" | "stacked" | "compact";
 
@@ -34,6 +36,7 @@ export interface HeaderHeroLayout {
   totalRows: number;
 }
 
+type HeaderMetadataLine = { key: string; text: string; color: string; bold: boolean };
 
 interface TopHeaderProps {
   authState: CodexAuthState;
@@ -47,29 +50,43 @@ function getWordmarkWidth(): number {
   return HEADER_WORDMARK_LINES.reduce((maxWidth, line) => Math.max(maxWidth, getTextWidth(line)), 0);
 }
 
+function getMetadataRowCount(headerConfig: HeaderConfig): number {
+  return [
+    headerConfig.showBrand,
+    headerConfig.showAuthStatus,
+    headerConfig.showWorkspace,
+    headerConfig.showProvider,
+    headerConfig.showContext,
+  ].filter(Boolean).length;
+}
+
 function getHeaderVerticalMargins(layout: Layout): { topMarginRows: number; bottomMarginRows: number } {
   if (layout.mode !== "full") {
     return {
       topMarginRows: 0,
-      bottomMarginRows: layout.rows > 24 ? 1 : 0,
+      bottomMarginRows: 0,
     };
   }
 
   if (layout.rows <= 24) {
-    return { topMarginRows: 0, bottomMarginRows: 1 };
+    return { topMarginRows: 0, bottomMarginRows: 0 };
   }
 
   return {
     topMarginRows: 1,
-    bottomMarginRows: layout.rows >= 36 ? 2 : 1,
+    bottomMarginRows: 0,
   };
 }
 
-export function getHeaderHeroLayout(layout: Layout): HeaderHeroLayout {
+export function getHeaderHeroLayout(
+  layout: Layout,
+  headerConfig: HeaderConfig = HEADER_CONFIG_DEFAULTS,
+): HeaderHeroLayout {
   const { topMarginRows, bottomMarginRows } = getHeaderVerticalMargins(layout);
-  const metadataRows = 3;
+  const metadataRows = getMetadataRowCount(headerConfig);
+  const canRenderLogo = layout.cols >= MIN_LOGO_TERMINAL_WIDTH && layout.rows >= MIN_LOGO_TERMINAL_ROWS;
 
-  if (layout.mode !== "full") {
+  if (!canRenderLogo) {
     return {
       mode: "compact",
       topMarginRows,
@@ -85,7 +102,7 @@ export function getHeaderHeroLayout(layout: Layout): HeaderHeroLayout {
   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 metadataGapRows = canUseWideHero || metadataRows === 0 ? 0 : STACKED_METADATA_GAP_ROWS;
   const contentRows = canUseWideHero
     ? logoRows
     : logoRows + metadataGapRows + metadataRows;
@@ -102,8 +119,11 @@ export function getHeaderHeroLayout(layout: Layout): HeaderHeroLayout {
   };
 }
 
-export function measureTopHeaderRows(layout: Layout): number {
-  return getHeaderHeroLayout(layout).totalRows;
+export function measureTopHeaderRows(
+  layout: Layout,
+  headerConfig: HeaderConfig = HEADER_CONFIG_DEFAULTS,
+): number {
+  return getHeaderHeroLayout(layout, headerConfig).totalRows;
 }
 
 /** Truncate a path to fit within maxWidth, keeping the end and prefixing with "... " if needed */
@@ -117,6 +137,7 @@ export function TopHeader({
   authState,
   workspaceLabel,
   layout,
+  runtimeSummary = null,
   headerConfig = HEADER_CONFIG_DEFAULTS,
 }: TopHeaderProps) {
   renderDebug.useRenderDebug("Header", {
@@ -133,7 +154,7 @@ export function TopHeader({
     mode: layout.mode,
   });
 
-  const { cols, mode } = layout;
+  const { cols } = layout;
   const theme = useTheme();
 
   const authLabelRaw = getAuthStateLabel(authState);
@@ -142,16 +163,23 @@ export function TopHeader({
     : authLabelRaw;
 
   const wsDisplay = truncatePath(workspaceLabel, Math.max(18, cols - 40));
-  const heroLayout = getHeaderHeroLayout(layout);
+  const heroLayout = getHeaderHeroLayout(layout, headerConfig);
   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));
+    headerConfig.showProvider && runtimeSummary?.providerLabel
+      ? { key: "provider", text: `Provider: ${runtimeSummary.providerLabel}`, color: theme.TEXT, bold: false }
+      : null,
+    headerConfig.showContext
+      ? { key: "context", text: `Context: ${runtimeSummary?.contextLabel ?? "Unknown"}`, color: theme.MUTED, bold: false }
+      : null,
+  ].filter((line): line is HeaderMetadataLine => 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.length <= 3
     && metadataLines.some((l) => l.key === "brand")
     && metadataLines.some((l) => l.key === "workspace");
   const metadataVisualRows = metadataLines.length + (hasMetadataGap ? 1 : 0);
@@ -178,7 +206,7 @@ export function TopHeader({
     </Box>
   );
 
-  if (mode === "full") {
+  if (heroLayout.mode !== "compact") {
     const metadataTopOffset = Math.max(0, Math.floor((HEADER_WORDMARK_LINES.length - metadataVisualRows) / 2));
 
     return (
@@ -188,7 +216,7 @@ export function TopHeader({
         )}
 
         {heroLayout.mode === "wide" ? (
-          <Box flexDirection="row" width="100%">
+          <Box flexDirection="row" width="100%" alignItems="flex-start">
             {logoColumn}
             <Box width={heroLayout.metadataGapColumns} flexShrink={0} />
             <Box flexDirection="column" flexGrow={1} paddingTop={metadataTopOffset}>
@@ -225,7 +253,15 @@ export function TopHeader({
   }
   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>);
+    compactParts.push(<Text key="ws" color={theme.MUTED} wrap="truncate">{`Workspace: ${wsDisplay}`}</Text>);
+  }
+  if (headerConfig.showProvider && runtimeSummary?.providerLabel) {
+    if (compactParts.length > 0) compactParts.push(<Text key="sep-provider" color={theme.DIM}>{"  ·  "}</Text>);
+    compactParts.push(<Text key="provider" color={theme.TEXT} wrap="truncate">{`Provider: ${runtimeSummary.providerLabel}`}</Text>);
+  }
+  if (headerConfig.showContext) {
+    if (compactParts.length > 0) compactParts.push(<Text key="sep-context" color={theme.DIM}>{"  ·  "}</Text>);
+    compactParts.push(<Text key="context" color={theme.MUTED} wrap="truncate">{`Context: ${runtimeSummary?.contextLabel ?? "Unknown"}`}</Text>);
   }
 
   return (

package/src/ui/layout.test.ts

@@ -85,8 +85,9 @@ test("chooses startup header mode from measured row budget", () => {
 });
 
 test("measures the header rows for full and compact layouts", () => {
-  assert.equal(measureTopHeaderRows(createLayoutSnapshot(120, 30)), 8);
-  assert.equal(measureTopHeaderRows(createLayoutSnapshot(80, 24)), 1);
+  assert.equal(measureTopHeaderRows(createLayoutSnapshot(120, 30)), 7);
+  assert.equal(measureTopHeaderRows(createLayoutSnapshot(80, 24)), 10);
+  assert.equal(measureTopHeaderRows(createLayoutSnapshot(50, 24)), 1);
 });
 
 test("header hero switches from stacked to wide only when metadata has room", () => {