@golba98/codexa 1.0.1

package/src/ui/Spinner.tsx

@@ -0,0 +1,25 @@
+import React, { startTransition, useEffect, useState } from "react";
+import { Text } from "ink";
+import { useTheme } from "./theme.js";
+
+const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function Spinner({ color }: { color?: string }) {
+  const theme = useTheme();
+  const [frame, setFrame] = useState(0);
+  const activeColor = color ?? theme.DIM;
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      // startTransition marks this as low-priority so React can coalesce or
+      // defer it when a higher-priority streaming render is already pending.
+      startTransition(() => {
+        setFrame((f) => (f + 1) % frames.length);
+      });
+    }, 80);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return <Text color={activeColor}>{frames[frame]}</Text>;
+}

package/src/ui/StaticIntroItem.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "ink";
+import type { CodexAuthState } from "../core/auth/codexAuth.js";
+import { getShellWidth, type Layout, type StartupHeaderMode } from "./layout.js";
+import { buildIntroRenderItem, TimelineRowView } from "./Timeline.js";
+import type { TimelineRow } from "./timelineMeasure.js";
+import { buildTimelineSnapshot } from "./timelineMeasure.js";
+
+interface StaticIntroItemProps {
+  authState: CodexAuthState;
+  workspaceLabel: string;
+  layout: Layout;
+  startupHeaderMode?: StartupHeaderMode;
+  verboseMode: boolean;
+  workspaceRoot: string | null;
+}
+
+export function buildStaticIntroRows({
+  authState,
+  workspaceLabel,
+  layout,
+  startupHeaderMode,
+  verboseMode,
+  workspaceRoot,
+}: StaticIntroItemProps): TimelineRow[] {
+  const introItem = buildIntroRenderItem({ authState, workspaceLabel, layout, startupHeaderMode });
+  return buildTimelineSnapshot([introItem], {
+    totalWidth: getShellWidth(layout.cols),
+    verboseMode,
+    debugLabel: "static-intro",
+    workspaceRoot,
+  }).rows;
+}
+
+export function StaticIntroItem(props: StaticIntroItemProps) {
+  const rows = React.useMemo(() => buildStaticIntroRows(props), [
+    props.authState,
+    props.workspaceLabel,
+    props.layout.cols,
+    props.layout.rows,
+    props.layout.mode,
+    props.startupHeaderMode,
+    props.verboseMode,
+    props.workspaceRoot,
+  ]);
+
+  return (
+    <Box flexDirection="column">
+      {rows.map((row) => (
+        <TimelineRowView key={row.key} row={row} />
+      ))}
+    </Box>
+  );
+}

package/src/ui/StaticTranscriptItem.tsx

@@ -0,0 +1,56 @@
+import { Box } from "ink";
+import type { Layout } from "./layout.js";
+import type { TimelineItem } from "./Timeline.js";
+import { TimelineRowView } from "./Timeline.js";
+import { MemoizedTurnGroup, resolveTurnRunPhase } from "./TurnGroup.js";
+import { buildStandaloneEventRows } from "./timelineMeasure.js";
+import type { RenderTimelineItem } from "./Timeline.js";
+
+interface StaticTranscriptItemProps {
+  item: TimelineItem;
+  layout: Layout;
+  verboseMode: boolean;
+  workspaceRoot: string | null;
+}
+
+export function StaticTranscriptItem({
+  item,
+  layout,
+  verboseMode,
+  workspaceRoot,
+}: StaticTranscriptItemProps) {
+  if (item.type === "turn") {
+    if (!item.user) return null;
+    return (
+      <MemoizedTurnGroup
+        cols={layout.cols}
+        turnIndex={item.turnIndex}
+        user={item.user}
+        run={item.run}
+        assistant={item.assistant}
+        opacity="active"
+        question={null}
+        runPhase={resolveTurnRunPhase(item.run, item.assistant, { kind: "IDLE" }, item.turnId)}
+        streamPreviewRows={0}
+        streamMode="assistant-first"
+        verboseMode={verboseMode}
+        workspaceRoot={workspaceRoot}
+      />
+    );
+  }
+
+  const renderItem: Extract<RenderTimelineItem, { type: "event" }> = {
+    key: `static-event-${item.event.id}`,
+    type: "event",
+    padded: false,
+    event: item.event,
+  };
+  const rows = buildStandaloneEventRows(renderItem, layout.cols);
+  return (
+    <Box flexDirection="column">
+      {rows.map((row) => (
+        <TimelineRowView key={row.key} row={row} />
+      ))}
+    </Box>
+  );
+}

package/src/ui/TextEntryPanel.tsx

@@ -0,0 +1,139 @@
+import React, { useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { FocusTargetId } from "./focus.js";
+import { useTheme } from "./theme.js";
+import { stripMouseEscapes } from "./inputBuffer.js";
+
+interface TextEntryPanelProps {
+  focusId: FocusTargetId;
+  title: string;
+  subtitle: string;
+  placeholder?: string;
+  initialValue?: string;
+  inputLabel?: string;
+  footerHint?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+function insertAt(value: string, index: number, text: string): string {
+  return value.slice(0, index) + text + value.slice(index);
+}
+
+export function TextEntryPanel({
+  focusId,
+  title,
+  subtitle,
+  placeholder = "",
+  initialValue = "",
+  inputLabel = "Input",
+  footerHint = "Enter submit  Esc cancel  Backspace delete",
+  onSubmit,
+  onCancel,
+}: TextEntryPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [value, setValue] = useState(initialValue);
+  const [cursor, setCursor] = useState(initialValue.length);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.return) {
+      onSubmit(value.trim());
+      return;
+    }
+
+    if (key.leftArrow) {
+      setCursor((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (key.rightArrow) {
+      setCursor((current) => Math.min(value.length, current + 1));
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      if (cursor === 0) return;
+      setValue((current) => current.slice(0, cursor - 1) + current.slice(cursor));
+      setCursor((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (!input || key.ctrl || key.meta) {
+      return;
+    }
+
+    const filtered = stripMouseEscapes(input);
+    if (!filtered) return;
+    setValue((current) => insertAt(current, cursor, filtered));
+    setCursor((current) => current + filtered.length);
+  }, { isActive: isFocused });
+
+  const display = useMemo(() => {
+    if (!value) {
+      return {
+        before: "",
+        current: placeholder || " ",
+        after: "",
+        isPlaceholder: true,
+      };
+    }
+
+    const safeCursor = Math.max(0, Math.min(cursor, value.length));
+    return {
+      before: value.slice(0, safeCursor),
+      current: value[safeCursor] ?? " ",
+      after: value.slice(safeCursor + (safeCursor < value.length ? 1 : 0)),
+      isPlaceholder: false,
+    };
+  }, [cursor, placeholder, value]);
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_SUBTLE}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+      >
+        <Text color={theme.ACCENT} bold>{title}  </Text>
+        <Text color={theme.MUTED}>{subtitle}</Text>
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_ACTIVE}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        <Box>
+          <Text color={theme.TEXT}>{inputLabel}: </Text>
+          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.before}</Text>
+          <Text
+            backgroundColor={theme.TEXT}
+            color={theme.PANEL}
+          >
+            {display.current}
+          </Text>
+          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.after}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.DIM}>{footerHint}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export function measureTextEntryPanelRows(): number {
+  return 13;
+}

package/src/ui/ThemePicker.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { AVAILABLE_THEMES, formatThemeLabel } from "../config/settings.js";
+import { FOCUS_IDS } from "./focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ThemePickerProps {
+  currentTheme: string;
+  onSelect: (themeId: string) => void;
+  onHighlight?: (themeId: string) => void;
+  onCancel: () => void;
+}
+
+export function ThemePicker({ currentTheme, onSelect, onHighlight, onCancel }: ThemePickerProps) {
+  const items = AVAILABLE_THEMES.map((theme) => ({
+    label: theme.id === currentTheme ? `${formatThemeLabel(theme.id)}  ✓` : formatThemeLabel(theme.id),
+    value: theme.id,
+  }));
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.themePicker}
+      title="Select visual theme"
+      subtitle="Use arrow keys and Enter to switch. Esc closes the panel."
+      items={items}
+      limit={8}
+      onSelect={onSelect}
+      onHighlight={onHighlight}
+      onCancel={onCancel}
+    />
+  );
+}

package/src/ui/ThinkingBlock.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { RunEvent } from "../session/types.js";
+import { clampVisualText, getUsableShellWidth } from "./layout.js";
+import { useTheme } from "./theme.js";
+import { DashCard } from "./DashCard.js";
+import {
+  formatProgressBlockBodyLines,
+  getProgressUpdateCount,
+  selectVisibleProgressBlocks,
+  type VisibleProgressBlock,
+} from "./progressEntries.js";
+
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+
+const MAX_VISIBLE_PROGRESS_ENTRIES = 3;
+
+interface ThinkingBlockProps {
+  cols: number;
+  run: RunEvent;
+  turnIndex: number;
+}
+
+function getBlockMarker(isLive: boolean): string {
+  return isLive ? "▸" : "•";
+}
+
+export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
+  const theme = useTheme();
+  const {
+    blocks,
+    hiddenCount,
+    totalCount,
+    latestBlock,
+    latestActiveBlock,
+  } = selectVisibleProgressBlocks(run.progressEntries ?? [], MAX_VISIBLE_PROGRESS_ENTRIES);
+  const contentWidth = Math.max(1, getUsableShellWidth(cols, 8));
+  const updateCount = totalCount || getProgressUpdateCount(run.progressEntries ?? []);
+  const currentBlock = latestActiveBlock ?? latestBlock;
+  const currentText = currentBlock
+    ? clampVisualText(currentBlock.headline.replace(/^Current:\s*/i, ""), Math.max(1, contentWidth - 9))
+    : null;
+  const rightBadge = run.status === "running"
+    ? "active"
+    : `${updateCount} update${updateCount === 1 ? "" : "s"}`;
+
+  if (blocks.length === 0 && run.status === "running") {
+    return null;
+  }
+
+  return (
+    <DashCard
+      cols={cols}
+      title="Processing"
+      rightBadge={rightBadge}
+      borderColor={run.status === "running" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE}
+    >
+      {blocks.length === 0 ? (
+        <Text color={theme.DIM}>No processing updates</Text>
+      ) : (
+        <Box flexDirection="column" width="100%">
+          {currentText && run.status === "running" && (
+            <Box width="100%">
+              <Text color={theme.INFO} bold>Current: </Text>
+              <Text color={theme.TEXT}>{currentText}</Text>
+            </Box>
+          )}
+          {hiddenCount > 0 && (
+            <Box marginTop={currentText && run.status === "running" ? 1 : 0}>
+              <Text color={theme.DIM}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
+            </Box>
+          )}
+          {blocks.map((block, blockIndex) => {
+            const isLive = run.status === "running" && block.isActive;
+            return (
+              <Box
+                key={block.key}
+                flexDirection="column"
+                width="100%"
+                marginTop={blockIndex === 0 && hiddenCount === 0 && !(currentText && run.status === "running") ? 0 : 1}
+              >
+                <Text color={isLive ? theme.ACCENT : theme.INFO} bold={isLive}>
+                  {`${getBlockMarker(isLive)} ${isLive ? "Live" : block.label}`}
+                </Text>
+                {formatProgressBlockBodyLines(block.text, contentWidth).map((line, lineIndex) => (
+                  <Text key={`${block.key}-${lineIndex}`} color={theme.MUTED}>
+                    {line ? `${isLive ? "  | " : "    "}${line}` : " "}
+                  </Text>
+                ))}
+                {isLive && (
+                  <Text color={theme.ACCENT}>  | ▌</Text>
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+    </DashCard>
+  );
+}