@golba98/codexa 1.0.1

package/src/ui/CodexLogo.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "./theme.js";
+import type { LayoutMode } from "./layout.js";
+
+// Full 4-line ASCII banner — rendered only in "full" mode.
+const BANNER = [
+  "  ____   ___  ____  _____ _  __    _    ",
+  " / ___| / _ \\|  _ \\| ____| |/ /   / \\   ",
+  "| |    | | | | | | |  _| | ' /   / _ \\  ",
+  "|_|     \\___/|_| |_|_____|_|\\_\\ /_/ \\_\\ "
+];
+
+
+interface CodexLogoProps {
+  /** Which layout mode we're in. Defaults to "full". */
+  layout?: LayoutMode;
+}
+
+export function CodexLogo({ layout = "full" }: CodexLogoProps) {
+  const theme = useTheme();
+
+  function colorForIndex(index: number): string {
+    return theme.LOGO[index % theme.LOGO.length] ?? theme.LOGO[0];
+  }
+
+  // Micro mode — no logo rendered at all
+  if (layout === "micro") return null;
+
+  // Compact mode — single colourful line: ✦ CODEXA
+  if (layout === "compact") {
+    const letters = ["C", "O", "D", "E", "X", "A"];
+    return (
+      <Box>
+        <Text color={theme.LOGO[0]} bold>{"✦ "}</Text>
+        {letters.map((char, index) => (
+          <Text key={index} color={colorForIndex(index)} bold>
+            {char}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  // Full mode — ASCII banner to stay stable across terminals/codepages.
+  return (
+    <Box flexDirection="column" overflow="hidden">
+      {BANNER.map((line, index) => (
+        <Text key={line} color={colorForIndex(index)} wrap="truncate">
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}

package/src/ui/DashCard.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import type { ReactNode } from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "./theme.js";
+import { getVisualWidth } from "./layout.js";
+
+interface DashCardProps {
+  cols: number;
+  title: string;
+  rightBadge?: string;
+  borderColor?: string;
+  titleColor?: string;
+  badgeColor?: string;
+  children: ReactNode;
+}
+
+export function DashCard({
+  cols,
+  title,
+  rightBadge,
+  borderColor,
+  titleColor,
+  badgeColor,
+  children,
+}: DashCardProps) {
+  const theme = useTheme();
+  const border = borderColor ?? theme.BORDER_SUBTLE;
+  const tColor = titleColor ?? theme.MUTED;
+  const bColor = badgeColor ?? theme.DIM;
+
+  // Account for AppShell gutter (-1) and Timeline paddingX={1} (-2)
+  const w = cols - 3;
+
+  const topLine = buildTopBorder(w, title, rightBadge);
+  const bottomFill = "─".repeat(Math.max(1, w - 2));
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Text wrap="truncate">
+        <Text color={border}>{"╭── "}</Text>
+        <Text color={tColor} bold>{topLine.title}</Text>
+        <Text color={border}>{topLine.badge ? " " + topLine.fill + " " : " " + topLine.fill}</Text>
+        {topLine.badge ? (
+          <>
+            <Text color={bColor}>{topLine.badge}</Text>
+            <Text color={border}>{" ──╮"}</Text>
+          </>
+        ) : (
+          <Text color={border}>{"──╮"}</Text>
+        )}
+      </Text>
+      <Box flexDirection="row" width="100%">
+        <Text color={border}>{"│ "}</Text>
+        <Box flexDirection="column" flexGrow={1} flexShrink={1}>
+          {children}
+        </Box>
+        <Text color={border}>{" │"}</Text>
+      </Box>
+      <Text wrap="truncate" color={border}>{"╰" + bottomFill + "╯"}</Text>
+    </Box>
+  );
+}
+
+function buildTopBorder(
+  w: number,
+  title: string,
+  badge?: string,
+): { title: string; fill: string; badge: string | null } {
+  // Layout: "╭── " + title + " " + fill + " " + badge + " ──╮"
+  // Or:     "╭── " + title + " " + fill + "──╮"
+  const prefix = 4; // "╭── "
+  const suffix = badge ? 4 : 3; // " ──╮" with badge spacing, or "──╮"
+  const titleWidth = getVisualWidth(title);
+  const badgeWidth = badge ? getVisualWidth(badge) : 0;
+  const spacing = badge ? 2 : 1; // the title-only variant has no trailing gap before the corner
+
+  const available = w - prefix - titleWidth - spacing - badgeWidth - suffix;
+  const fillCount = Math.max(1, available);
+  const fill = "─".repeat(fillCount);
+
+  return { title, fill, badge: badge ?? null };
+}

package/src/ui/Markdown.test.ts

@@ -0,0 +1,157 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { parseMarkdown } from "./Markdown.js";
+import type { ParaSegment, CodeSegment, Segment } from "./Markdown.js";
+
+const SAMPLE = [
+  "# Summary",
+  "",
+  "The current rendering path is flattening the assistant response into a dense block.",
+  "",
+  "What needs to improve:",
+  "",
+  "- Preserve paragraph spacing.",
+  "- Keep bullet lists readable.",
+  "- Keep code blocks separate.",
+  "- Avoid merging activity logs with final answers.",
+  "",
+  "Steps:",
+  "",
+  "1. Sanitize unsafe control characters.",
+  "2. Preserve markdown structure.",
+  "3. Render semantic blocks with spacing.",
+  "4. Verify streaming still works.",
+  "",
+  "Example command:",
+  "",
+  "```powershell",
+  "npm run typecheck",
+  "npm run build",
+  "```",
+  "",
+  "Assistant: Done. Formatting pipeline is now applied.",
+].join("\n");
+
+function segmentText(segments: Segment[]): string {
+  return segments.flatMap((segment) => {
+    if (segment.type === "code") return segment.lines;
+    if (segment.type === "header") return segment.parts.map((part) => part.text);
+    if (segment.type === "list") return segment.items.flatMap((item) => item.parts.map((part) => part.text));
+    return segment.lines.flatMap((line) => line.map((part) => part.text));
+  }).join("\n");
+}
+
+test("sample response produces separate segments, not one dense para", () => {
+  const segments = parseMarkdown(SAMPLE);
+  const types = segments.map((s) => s.type);
+
+  assert.ok(
+    segments.length >= 7,
+    `expected ≥7 segments, got ${segments.length}: ${JSON.stringify(types)}`,
+  );
+  assert.equal(segments[0]?.type, "header", "first segment must be the header");
+  assert.ok(types.includes("code"), "expected a code segment");
+  assert.ok(types.includes("list"), "expected a list segment");
+});
+
+test("blank lines between paragraphs produce separate ParaSegments", () => {
+  const segments = parseMarkdown(SAMPLE);
+  const paras = segments.filter((s): s is ParaSegment => s.type === "para");
+
+  for (const para of paras) {
+    const text = para.lines.flat().map((p) => p.text).join(" ");
+    assert.ok(
+      !(text.includes("rendering path") && text.includes("What needs to improve")),
+      "two distinct paragraphs must not share one ParaSegment",
+    );
+  }
+});
+
+test("blank lines inside code blocks are preserved", () => {
+  const input = "```\nline1\n\nline3\n```";
+  const segments = parseMarkdown(input);
+  assert.equal(segments.length, 1);
+  assert.equal(segments[0]?.type, "code");
+  const code = segments[0] as CodeSegment;
+  assert.deepEqual(code.lines, ["line1", "", "line3"]);
+});
+
+test("plain paragraphs with no blank lines stay in one segment", () => {
+  const input = "Line one.\nLine two.\nLine three.";
+  const segments = parseMarkdown(input);
+  assert.equal(segments.length, 1);
+  assert.equal(segments[0]?.type, "para");
+  const para = segments[0] as ParaSegment;
+  assert.equal(para.lines.length, 3);
+});
+
+test("header immediately followed by text produces two segments", () => {
+  const input = "# Title\n\nSome text here.";
+  const segments = parseMarkdown(input);
+  assert.equal(segments[0]?.type, "header");
+  assert.equal(segments[1]?.type, "para");
+});
+
+test("cleans local markdown file links into compact terminal paths", () => {
+  const input = "The app shell lives in [`src/App.tsx`](C:/Users/Example/Projects/Project/src/App.tsx#L22).";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /src\/App\.tsx:22/);
+  assert.doesNotMatch(text, /C:\/Users/);
+  assert.doesNotMatch(text, /\]\(/);
+});
+
+test("cleans Windows absolute paths in prose", () => {
+  const input = "Formal proof: C:\\Users\\Example\\Projects\\Project\\docs\\proof.md#L26";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /docs\/proof\.md:26/);
+  assert.doesNotMatch(text, /C:\\Users/);
+});
+
+test("cleans file paths with encoded spaces", () => {
+  const input = "Overview: [README.md](file:///C:/Users/Example/Projects/5-Date%20Verification/README.md)";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /README\.md/);
+  assert.doesNotMatch(text, /file:\/\//);
+  assert.doesNotMatch(text, /5-Date%20Verification/);
+});
+
+test("cleans local line ranges", () => {
+  const input = "See [proof](C:/Users/Example/Projects/Project/docs/proof.md#L26-L31).";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /proof \(docs\/proof\.md:26-31\)/);
+  assert.doesNotMatch(text, /C:\/Users/);
+});
+
+test("external web markdown links remain unchanged", () => {
+  const input = "Docs: [OpenAI](https://platform.openai.com/docs).";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /\[OpenAI\]\(https:\/\/platform\.openai\.com\/docs\)/);
+});
+
+test("inline-code web links remain unchanged", () => {
+  const input = "Use `https://platform.openai.com/docs` for reference.";
+  const text = segmentText(parseMarkdown(input));
+
+  assert.match(text, /https:\/\/platform\.openai\.com\/docs/);
+});
+
+test("code blocks are not rewritten by terminal answer cleanup", () => {
+  const input = [
+    "```text",
+    "C:/Users/Example/Project/src/App.tsx#L22",
+    "[README.md](file:///C:/Project/README.md)",
+    "```",
+  ].join("\n");
+  const segments = parseMarkdown(input);
+  const code = segments[0] as CodeSegment;
+
+  assert.deepEqual(code.lines, [
+    "C:/Users/Example/Project/src/App.tsx#L22",
+    "[README.md](file:///C:/Project/README.md)",
+  ]);
+});

package/src/ui/Markdown.tsx

@@ -0,0 +1,310 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "./theme.js";
+import { Panel } from "./Panel.js";
+import { maybeRenderDiff, type DiffRenderLineType } from "./diffRenderer.js";
+import { formatLocalPathForTerminal, formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
+
+// ─── Markdown parser ─────────────────────────────────────────────────────────
+
+type InlinePart =
+  | { kind: "text"; text: string }
+  | { kind: "code"; text: string }
+  | { kind: "bold"; text: string };
+
+function parseInline(text: string): InlinePart[] {
+  const formattedText = formatTerminalAnswerInline(text);
+  const parts: InlinePart[] = [];
+  const pat = /`([^`\n]+)`|\*\*([^*\n]+)\*\*/g;
+  let last = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pat.exec(formattedText)) !== null) {
+    if (match.index > last) parts.push({ kind: "text", text: formattedText.slice(last, match.index) });
+    if (match[1] !== undefined) parts.push({ kind: "code", text: formatLocalPathForTerminal(match[1]) });
+    if (match[2] !== undefined) parts.push({ kind: "bold", text: match[2] });
+    last = pat.lastIndex;
+  }
+
+  if (last < formattedText.length) parts.push({ kind: "text", text: formattedText.slice(last) });
+  return parts.length > 0 ? parts : [{ kind: "text", text: formattedText }];
+}
+
+export type CodeSegment = { type: "code"; lang: string; lines: string[] };
+export type HeaderSegment = { type: "header"; level: 1 | 2 | 3; parts: InlinePart[] };
+export type ListItem = { num: number; parts: InlinePart[] };
+export type ListSegment = { type: "list"; ordered: boolean; items: ListItem[] };
+export type ParaSegment = { type: "para"; lines: InlinePart[][] };
+export type Segment = CodeSegment | HeaderSegment | ListSegment | ParaSegment;
+
+const FENCE_RE = /^```(.*)$/;
+const HEADER_RE = /^(#{1,3})\s+(.+)/;
+const BULLET_RE = /^\s*[-*]\s+(.+)/;
+const ORDERED_RE = /^\s*(\d+)\.\s+(.+)/;
+
+function isBlockStart(line: string): boolean {
+  return FENCE_RE.test(line) || HEADER_RE.test(line) || BULLET_RE.test(line) || ORDERED_RE.test(line);
+}
+
+export function parseMarkdown(content: string): Segment[] {
+  const lines = content.split("\n");
+  const out: Segment[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index]!;
+
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+
+    const fenceMatch = FENCE_RE.exec(line);
+    if (fenceMatch) {
+      const codeLines: string[] = [];
+      const lang = (fenceMatch[1] ?? "").trim();
+      index += 1;
+      while (index < lines.length && !FENCE_RE.test(lines[index]!)) {
+        codeLines.push(lines[index]!);
+        index += 1;
+      }
+      index += 1;
+      out.push({ type: "code", lang, lines: codeLines });
+      continue;
+    }
+
+    const headerMatch = HEADER_RE.exec(line);
+    if (headerMatch) {
+      out.push({
+        type: "header",
+        level: Math.min(3, headerMatch[1]!.length) as 1 | 2 | 3,
+        parts: parseInline(headerMatch[2]!),
+      });
+      index += 1;
+      continue;
+    }
+
+    if (BULLET_RE.test(line)) {
+      const items: ListItem[] = [];
+      let counter = 1;
+      while (index < lines.length) {
+        const match = BULLET_RE.exec(lines[index]!);
+        if (!match) break;
+        items.push({ num: counter, parts: parseInline(match[1]!) });
+        counter += 1;
+        index += 1;
+      }
+      out.push({ type: "list", ordered: false, items });
+      continue;
+    }
+
+    if (ORDERED_RE.test(line)) {
+      const items: ListItem[] = [];
+      while (index < lines.length) {
+        const match = ORDERED_RE.exec(lines[index]!);
+        if (!match) break;
+        items.push({ num: Number.parseInt(match[1]!, 10), parts: parseInline(match[2]!) });
+        index += 1;
+      }
+      out.push({ type: "list", ordered: true, items });
+      continue;
+    }
+
+    const paraLines: InlinePart[][] = [];
+    while (index < lines.length && !isBlockStart(lines[index]!) && lines[index]!.trim() !== '') {
+      paraLines.push(parseInline(lines[index]!));
+      index += 1;
+    }
+    if (paraLines.length > 0) {
+      out.push({ type: "para", lines: paraLines });
+    }
+  }
+
+  return out;
+}
+
+// ─── Rendering helpers ────────────────────────────────────────────────────────
+
+function InlineText({ parts, color }: { parts: InlinePart[]; color: string }) {
+  const theme = useTheme();
+
+  return (
+    <Text color={color} wrap="wrap">
+      {parts.map((part, index) => {
+        if (part.kind === "code") return <Text key={index} color={theme.INFO}>{part.text}</Text>;
+        if (part.kind === "bold") return <Text key={index} bold>{part.text}</Text>;
+        return <Text key={index}>{part.text}</Text>;
+      })}
+    </Text>
+  );
+}
+
+function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
+  const trimmed = label.trimEnd();
+  const slash = trimmed.endsWith("/") ? "/" : "";
+  const base = slash ? trimmed.slice(0, -1) : trimmed;
+  const lastDot = base.lastIndexOf(".");
+  const isDirectory = slash === "/" || (lastDot <= 0 && base.length > 0);
+
+  if (isDirectory) {
+    return (
+      <Text color={theme.TEXT} bold>
+        {base}
+        {slash}
+      </Text>
+    );
+  }
+
+  return (
+    <Text color={theme.TEXT}>
+      {base.slice(0, lastDot)}
+      <Text color={theme.DIM}>{base.slice(lastDot)}</Text>
+    </Text>
+  );
+}
+
+function TreeLine({ line }: { line: string }) {
+  const theme = useTheme();
+  const match = /^([│├└─\s]*)(.*)$/.exec(line);
+  const prefix = match?.[1] ?? "";
+  const label = match?.[2] ?? line;
+
+  return (
+    <Box width="100%">
+      <Text color={theme.DIM}>{prefix}</Text>
+      {renderTreeLabel(label, theme)}
+    </Box>
+  );
+}
+
+function isTreeLine(line: string): boolean {
+  return /^[│├└─\s]+/.test(line);
+}
+
+function getDiffColor(kind: DiffRenderLineType, theme: ReturnType<typeof useTheme>): string {
+  switch (kind) {
+    case "add":
+      return theme.SUCCESS;
+    case "remove":
+      return theme.ERROR;
+    case "hunk":
+      return theme.ACCENT;
+    case "file":
+    case "meta":
+      return theme.INFO;
+    case "context":
+    default:
+      return theme.MUTED;
+  }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function RenderMessage({ segments, width, brightHeadings = false }: { segments: Segment[]; width: number; brightHeadings?: boolean }) {
+  const theme = useTheme();
+
+  return (
+    <Box flexDirection="column" width="100%">
+      {segments.map((segment, index) => {
+        const marginTop = index > 0 ? 1 : 0;
+
+        if (segment.type === "code") {
+          const lang = (segment.lang || "").toLowerCase();
+          const looksLikeTree = segment.lines.some((line) => isTreeLine(line));
+
+          let title = segment.lang || "code";
+          let codeLines = segment.lines;
+          const firstLine = codeLines[0]?.trim() || "";
+          if (/^[a-zA-Z0-9_\-\.\/]+\.[a-zA-Z0-9]+$/.test(firstLine)) {
+            title = firstLine;
+            codeLines = codeLines.slice(1);
+          }
+
+          const rightTitle = segment.lang ? `${segment.lang.toUpperCase()} ⎘ Copy Code` : "⎘ Copy Code";
+          const panelWidth = Math.max(10, width);
+          const diffLines = maybeRenderDiff(codeLines.join("\n"), { force: lang === "diff" });
+
+          return (
+            <Box
+              key={index}
+              marginTop={marginTop}
+              flexDirection="column"
+              paddingLeft={2}
+              width="100%"
+            >
+              <Panel cols={panelWidth} title={title} rightTitle={rightTitle}>
+                {diffLines
+                  ? diffLines.map((line, lineIndex) => (
+                    <Text key={lineIndex} color={getDiffColor(line.type, theme)} wrap="wrap">
+                      {line.text || " "}
+                    </Text>
+                  ))
+                  : codeLines.map((line, lineIndex) => (
+                    looksLikeTree ? (
+                      <TreeLine key={lineIndex} line={line || " "} />
+                    ) : (
+                      <Box key={lineIndex}>
+                        <Box width={3} flexShrink={0} marginRight={1} justifyContent="flex-end">
+                          <Text color={theme.DIM}>{lineIndex + 1}</Text>
+                        </Box>
+                        <Text color={theme.MUTED} wrap="wrap">{line || " "}</Text>
+                      </Box>
+                    )
+                  ))}
+              </Panel>
+            </Box>
+          );
+        }
+
+        if (segment.type === "header") {
+          const color = segment.level === 1 ? theme.ACCENT : segment.level === 2 ? theme.TEXT : (brightHeadings ? theme.TEXT : theme.MUTED);
+          return (
+            <Box key={index} flexDirection="column" marginTop={marginTop}>
+              {segment.level <= 2 && <Text color={theme.BORDER_SUBTLE}>{"───"}</Text>}
+              <Box>
+                <Text color={color}>{segment.level <= 2 ? "✧ " : "• "}</Text>
+                <InlineText parts={segment.parts} color={color} />
+              </Box>
+            </Box>
+          );
+        }
+
+        if (segment.type === "list") {
+          return (
+            <Box key={index} flexDirection="column" marginTop={marginTop}>
+              {segment.items.map((item, itemIndex) => (
+                <Box key={itemIndex}>
+                  <Text color={theme.ACCENT}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
+                  <Box flexGrow={1} flexShrink={1}>
+                    <InlineText parts={item.parts} color={theme.TEXT} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          );
+        }
+
+        const hasContent = segment.lines.some(
+          (parts) => !(parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()),
+        );
+        if (!hasContent) return null;
+
+        return (
+          <Box key={index} flexDirection="column" marginTop={marginTop}>
+            {segment.lines.map((parts, lineIndex) => {
+              if (parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()) {
+                return null;
+              }
+              return <InlineText key={lineIndex} parts={parts} color={theme.TEXT} />;
+            })}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export const MemoizedRenderMessage = React.memo(RenderMessage, (prev, next) => (
+  prev.segments === next.segments && prev.width === next.width && prev.brightHeadings === next.brightHeadings
+));
+

package/src/ui/ModePicker.tsx

@@ -0,0 +1,27 @@
+import { AVAILABLE_MODES } from "../config/settings.js";
+import { FOCUS_IDS } from "./focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ModePickerProps {
+  currentMode: string;
+  onSelect: (mode: string) => void;
+  onCancel: () => void;
+}
+
+export function ModePicker({ currentMode, onSelect, onCancel }: ModePickerProps) {
+  const items = AVAILABLE_MODES.map((mode) => ({
+    label: mode.key === currentMode ? `${mode.label}  ✓` : mode.label,
+    value: mode.key,
+  }));
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.modePicker}
+      title="Select mode"
+      subtitle="Execution mode controls how aggressive the runner can be."
+      items={items}
+      onSelect={onSelect}
+      onCancel={onCancel}
+    />
+  );
+}

package/src/ui/ModelPicker.tsx

@@ -0,0 +1,31 @@
+import { type CodexModelCapability } from "../core/models/codexModelCapabilities.js";
+import { FOCUS_IDS } from "./focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ModelPickerProps {
+  models: readonly CodexModelCapability[];
+  currentModel: string;
+  onSelect: (model: string) => void;
+  onCancel: () => void;
+}
+
+export function ModelPicker({ models, currentModel, onSelect, onCancel }: ModelPickerProps) {
+  const items = models.map((model) => {
+    const label = model.label === model.model ? model.model : `${model.label} (${model.model})`;
+    return {
+      label: model.model === currentModel || model.id === currentModel ? `${label}  ✓` : label,
+      value: model.model,
+    };
+  });
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.modelPicker}
+      title="Select model"
+      subtitle="Use arrow keys and Enter. Esc closes the panel."
+      items={items}
+      onSelect={onSelect}
+      onCancel={onCancel}
+    />
+  );
+}