@golba98/codexa 1.0.2 → 1.0.4

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

@@ -0,0 +1,103 @@
+import { getTextWidth } from "./textLayout.js";
+
+// ─── Logo constants ───────────────────────────────────────────────────────────
+// Each variant is an array of exact terminal rows.
+//
+// IMPORTANT: Never apply `bold` when rendering these rows. Bold rendering of
+// Unicode full-block (█) and box-drawing (╔═╗╝) characters causes per-glyph
+// width/stroke differences in most terminal fonts (Ptyxis, GNOME Terminal,
+// VS Code), producing visible gaps between characters that should be flush.
+// The companion `wrap="truncate"` rule keeps each row on exactly one terminal
+// line regardless of the surrounding Ink flex layout.
+
+// Canonical Codexa brand wordmark — the ██ block art is the authoritative
+// large logo for wide/max layouts.
+export const CODEXA_WORDMARK = [
+  " ██████╗ ██████╗ ██████╗ ███████╗██╗  ██╗ █████╗ ",
+  "██╔════╝██╔═══██╗██╔══██╗██╔════╝╚██╗██╔╝██╔══██╗",
+  "██║     ██║   ██║██║  ██║█████╗   ╚███╔╝ ███████║",
+  "██║     ██║   ██║██║  ██║██╔══╝   ██╔██╗ ██╔══██║",
+  "╚██████╗╚██████╔╝██████╔╝███████╗██╔╝ ██╗██║  ██║",
+  " ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝",
+].join("\n");
+
+/** 6-row ANSI Shadow block-char logo. Requires cols ≥ LOGO_LARGE_MIN_COLS. */
+export const LOGO_LARGE: readonly string[] = CODEXA_WORDMARK.split("\n");
+
+/** 4-row pure-ASCII art logo. Requires cols ≥ LOGO_MEDIUM_MIN_COLS. */
+export const LOGO_MEDIUM: readonly string[] = [
+  "  ____   ___  ____  _____ _  __    _    ",
+  " / ___| / _ \\|  _ \\| ____| |/ /   / \\   ",
+  "| |    | | | | | | |  _| | ' /   / _ \\  ",
+  "|_|     \\___/|_| |_|_____|_|\\_\\ /_/ \\_\\ ",
+];
+
+/** 1-row compact logo. Requires cols ≥ LOGO_COMPACT_MIN_COLS. */
+export const LOGO_COMPACT: readonly string[] = [
+  "✦ CODEXA",
+];
+
+// ─── Breakpoints ──────────────────────────────────────────────────────────────
+
+// Aligned with MEDIUM_HEADER_MIN_COLUMNS so any side-by-side-capable terminal
+// shows the canonical block wordmark instead of the thin ASCII fallback.
+export const LOGO_LARGE_MIN_COLS = 72;
+export const LOGO_MEDIUM_MIN_COLS = 72;
+export const LOGO_COMPACT_MIN_COLS = 48;
+
+// Minimum terminal rows each variant needs to render without crowding out the
+// metadata + composer. A wide-but-short terminal (e.g. VS Code's bottom panel)
+// must step DOWN to a smaller logo instead of dropping straight to text-only.
+export const LOGO_LARGE_MIN_ROWS = 35;
+export const LOGO_MEDIUM_MIN_ROWS = 16;
+export const LOGO_COMPACT_MIN_ROWS = 12;
+
+const LOGO_VARIANTS: readonly { logo: readonly string[]; minCols: number; minRows: number }[] = [
+  { logo: LOGO_LARGE, minCols: LOGO_LARGE_MIN_COLS, minRows: LOGO_LARGE_MIN_ROWS },
+  { logo: LOGO_MEDIUM, minCols: LOGO_MEDIUM_MIN_COLS, minRows: LOGO_MEDIUM_MIN_ROWS },
+  { logo: LOGO_COMPACT, minCols: LOGO_COMPACT_MIN_COLS, minRows: LOGO_COMPACT_MIN_ROWS },
+];
+
+// ─── Selection ────────────────────────────────────────────────────────────────
+
+/**
+ * Returns the best logo variant for the given terminal column count.
+ *
+ * Env overrides:
+ *   CODEXA_NO_ASCII_LOGO=1  → always text-only (empty array)
+ *   CODEXA_COMPACT_LOGO=1   → always compact single-line logo
+ */
+export function selectLogoVariant(cols: number): readonly string[] {
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return [];
+  if (process.env["CODEXA_COMPACT_LOGO"] === "1") return LOGO_COMPACT;
+  if (cols >= LOGO_LARGE_MIN_COLS) return LOGO_LARGE;
+  if (cols >= LOGO_COMPACT_MIN_COLS) return LOGO_COMPACT;
+  return [];
+}
+
+/**
+ * Returns the largest logo variant that fits BOTH the available columns and
+ * rows. Unlike {@link selectLogoVariant} (columns-only), this degrades a
+ * too-tall logo to a shorter one before falling back to text-only — so a
+ * wide-but-short terminal keeps a logo instead of collapsing to a flat line.
+ * Returns an empty array only when even the 1-row compact logo cannot fit.
+ *
+ * Honours the same env overrides as {@link selectLogoVariant}.
+ */
+export function selectLogoVariantForViewport(cols: number, rows: number): readonly string[] {
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return [];
+  if (process.env["CODEXA_COMPACT_LOGO"] === "1") {
+    return rows >= LOGO_COMPACT_MIN_ROWS ? LOGO_COMPACT : [];
+  }
+  for (const variant of LOGO_VARIANTS) {
+    if (cols >= variant.minCols && rows >= variant.minRows) {
+      return variant.logo;
+    }
+  }
+  return [];
+}
+
+/** Returns the visual column width of the widest row in a logo variant. */
+export function getLogoWidth(logo: readonly string[]): number {
+  return logo.reduce((max, line) => Math.max(max, getTextWidth(line)), 0);
+}

package/src/ui/modeDisplay.ts

@@ -18,10 +18,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "◉",
-        ringColor: theme.WARNING,
-        ringFill: theme.BORDER_SUBTLE,
-        iconColor: theme.WARNING,
-        labelColor: theme.TEXT,
+        ringColor: theme.warning,
+        ringFill: theme.border,
+        iconColor: theme.warning,
+        labelColor: theme.text,
         labelBold: true,
         ringBold: true,
       };
@@ -29,10 +29,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "◎",
-        ringColor: theme.BORDER_ACTIVE,
-        ringFill: theme.PANEL_ALT,
-        iconColor: theme.PROMPT,
-        labelColor: theme.TEXT,
+        ringColor: theme.borderFocused,
+        ringFill: theme.surfaceMuted,
+        iconColor: theme.prompt,
+        labelColor: theme.text,
         labelBold: true,
         ringBold: false,
       };
@@ -41,10 +41,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "○",
-        ringColor: theme.SUCCESS,
-        ringFill: theme.PANEL_SOFT,
-        iconColor: theme.SUCCESS,
-        labelColor: theme.MUTED,
+        ringColor: theme.success,
+        ringFill: theme.surfaceMuted,
+        iconColor: theme.success,
+        labelColor: theme.textMuted,
         labelBold: false,
         ringBold: false,
       };

package/src/ui/runtimeDisplay.ts

@@ -0,0 +1,112 @@
+import { formatModeLabel, formatReasoningLabel } from "../config/settings.js";
+import type { RuntimeSummary } from "../config/runtimeConfig.js";
+import type { CodexModelCapability } from "../core/models/codexModelCapabilities.js";
+import type { ModelSpec } from "../core/models/modelSpecs.js";
+import type { ModelContextMetadata } from "../core/providerRuntime/contextMetadata.js";
+import { contextMetadataToModelSpec, formatContextCompact } from "../core/providerRuntime/contextMetadata.js";
+import type { ActiveProviderRoute } from "../core/providerRuntime/types.js";
+import { getAntigravityModelLabel } from "../core/providerRuntime/antigravity.js";
+
+export interface ActiveRuntimeDisplayInput {
+  route: ActiveProviderRoute;
+  reasoningLevel: string;
+  mode: string;
+  tokensUsed: number;
+  modelCapability?: CodexModelCapability | null;
+  contextMetadata?: ModelContextMetadata | null;
+}
+
+export interface ActiveRuntimeDisplay {
+  providerLabel: string;
+  modelDisplay: string;
+  footerModelDisplay: string;
+  contextDisplay: string;
+  modeLabel: string;
+  modelSpec: ModelSpec;
+}
+
+const PROVIDER_DISPLAY: Record<string, string> = {
+  openai: "OpenAI Codex CLI",
+  anthropic: "Claude Code CLI",
+  google: "Gemini CLI",
+  local: "Local",
+  antigravity: "Antigravity CLI",
+};
+
+function formatContextLimit(value: number): string {
+  if (value >= 1_000_000) {
+    const millions = value / 1_000_000;
+    return Number.isInteger(millions) || Math.abs(millions - 1.048576) < 0.000001
+      ? `${Math.round(millions)}M`
+      : `${millions.toFixed(1)}M`;
+  }
+  return formatContextCompact(value);
+}
+
+function formatUsedTokens(value: number): string {
+  return formatContextCompact(value).replace(/k$/, "K");
+}
+
+function isContextForRoute(metadata: ModelContextMetadata | null | undefined, route: ActiveProviderRoute): metadata is ModelContextMetadata {
+  return metadata?.providerId === route.providerId && metadata.modelId === route.modelId;
+}
+
+function getModelLabel(route: ActiveProviderRoute, capability?: CodexModelCapability | null): string {
+  if (route.providerId === "anthropic") {
+    return capability?.label ?? route.modelId;
+  }
+  if (route.providerId === "antigravity") {
+    return getAntigravityModelLabel(route.modelId);
+  }
+  return route.modelId;
+}
+
+export function buildActiveRuntimeDisplay({
+  route,
+  reasoningLevel,
+  mode,
+  tokensUsed,
+  modelCapability = null,
+  contextMetadata = null,
+}: ActiveRuntimeDisplayInput): ActiveRuntimeDisplay {
+  const providerLabel = PROVIDER_DISPLAY[route.providerId] ?? route.providerId;
+  const rawReasoning = route.providerId === "antigravity"
+    ? route.reasoning
+    : route.reasoning ?? reasoningLevel;
+  const reasoning = rawReasoning ? formatReasoningLabel(rawReasoning) : null;
+  const modelLabel = getModelLabel(route, modelCapability);
+  const validContextMetadata = isContextForRoute(contextMetadata, route) ? contextMetadata : null;
+  const contextDisplay = validContextMetadata?.contextLength != null
+    ? `${formatUsedTokens(tokensUsed)} / ${validContextMetadata.confidence === "estimated" ? "~" : ""}${formatContextLimit(validContextMetadata.contextLength)}`
+    : "Unknown";
+  const modelSpec = contextMetadataToModelSpec(validContextMetadata ?? {
+    providerId: route.providerId,
+    modelId: route.modelId,
+    contextLength: null,
+    source: "unknown",
+    confidence: "unknown",
+    error: "Context length unavailable for this model.",
+  });
+
+  return {
+    providerLabel,
+    modelDisplay: reasoning
+      ? `${providerLabel} / ${modelLabel} / reasoning: ${reasoning}`
+      : `${providerLabel} / ${modelLabel}`,
+    footerModelDisplay: reasoning
+      ? `${providerLabel} / ${modelLabel} (${reasoning})`
+      : `${providerLabel} / ${modelLabel}`,
+    contextDisplay,
+    modeLabel: formatModeLabel(mode),
+    modelSpec,
+  };
+}
+
+export function runtimeDisplayToSummary(display: ActiveRuntimeDisplay, base: RuntimeSummary): RuntimeSummary {
+  return {
+    ...base,
+    providerLabel: display.providerLabel,
+    modelLabel: display.modelDisplay,
+    contextLabel: display.contextDisplay,
+  };
+}

package/src/ui/textLayout.ts

@@ -198,9 +198,14 @@ export function splitTextAtColumn(text: string, column: number): { before: strin
 
 // ─── Text wrapping ────────────────────────────────────────────────────────────
 
-export function wrapTextRows(text: string, maxWidth: number): WrappedTextRow[] {
+export function wrapTextRows(
+  text: string,
+  maxWidth: number,
+  firstLineWidth: number = maxWidth,
+): WrappedTextRow[] {
   const normalized = normalizeLineBreaks(text);
   const safeWidth = Math.max(1, maxWidth);
+  const safeFirstWidth = Math.max(1, firstLineWidth);
   const rows: WrappedTextRow[] = [];
   let rowStart = 0;
   let rowText = "";
@@ -220,7 +225,9 @@ export function wrapTextRows(text: string, maxWidth: number): WrappedTextRow[] {
       continue;
     }
 
-    if (rowText.length > 0 && rowWidth + unit.width > safeWidth) {
+    // Only the first emitted row honors firstLineWidth; later rows use maxWidth.
+    const limit = rows.length === 0 ? safeFirstWidth : safeWidth;
+    if (rowText.length > 0 && rowWidth + unit.width > limit) {
       rows.push({
         text: rowText,
         start: rowStart,
@@ -252,8 +259,12 @@ export function wrapTextRows(text: string, maxWidth: number): WrappedTextRow[] {
   }];
 }
 
-export function wrapPlainText(text: string, maxWidth: number): string[] {
-  return wrapTextRows(text, maxWidth).map((row) => row.text);
+export function wrapPlainText(
+  text: string,
+  maxWidth: number,
+  firstLineWidth: number = maxWidth,
+): string[] {
+  return wrapTextRows(text, maxWidth, firstLineWidth).map((row) => row.text);
 }
 
 export function wrapCommandText(text: string, maxWidth: number): string[] {