@golba98/codexa 1.0.1

package/src/ui/PlanReviewPanel.test.tsx

@@ -0,0 +1,267 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import React from "react";
+import { PassThrough } from "node:stream";
+import { Box, Text, render } from "ink";
+import { PlanActionPicker } from "./PlanActionPicker.js";
+import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+import {
+  buildPlanReviewDisplayRows,
+  buildPlanReviewRows,
+  PlanReviewPanel,
+} from "./PlanReviewPanel.js";
+import { ThemeProvider } from "./theme.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 = 80;
+  rows = 24;
+}
+
+function stripAnsi(value: string): string {
+  return value.replace(/\u001B\[[0-?]*[ -/]*[@-~]/g, "");
+}
+
+function sleep(ms = 50): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function renderPlanPanel(planText: string, cols = 80): 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">
+      <PlanReviewPanel
+        planText={planText}
+        cols={cols}
+        workspaceRoot="C:\\Development\\Project"
+      />
+    </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(80);
+  instance.cleanup();
+  await sleep(20);
+  return stripAnsi(output);
+}
+
+function createInkHarness(node: React.ReactElement) {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let output = "";
+
+  stdout.on("data", (chunk) => {
+    output += chunk.toString();
+  });
+
+  const instance = render(node, {
+    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,
+  });
+
+  return {
+    stdin,
+    getOutput() {
+      return stripAnsi(output);
+    },
+    async cleanup() {
+      instance.cleanup();
+      await sleep(20);
+    },
+  };
+}
+
+function makeLongPlan(itemCount = 40): string {
+  return [
+    "Files:",
+    ...Array.from({ length: itemCount }, (_, index) =>
+      `- src/file-${index + 1}.ts Description for item ${index + 1}.`,
+    ),
+    "",
+    "Steps:",
+    ...Array.from({ length: itemCount }, (_, index) =>
+      `${index + 1}. Complete implementation step ${index + 1}.`,
+    ),
+  ].join("\n");
+}
+
+function PlanActionHarness() {
+  const [selection, setSelection] = React.useState("none");
+  const [cancelCount, setCancelCount] = React.useState(0);
+
+  return (
+    <ThemeProvider theme="purple">
+      <Box flexDirection="column">
+        <PlanActionPicker
+          onSelect={(value) => setSelection(value)}
+          onCancel={() => setCancelCount((count) => count + 1)}
+        />
+        <Text>{`selection:${selection}`}</Text>
+        <Text>{`cancel:${cancelCount}`}</Text>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+test("plan review markdown normalization converts bold section labels into headings", () => {
+  const normalized = normalizePlanReviewMarkdown("**Files**\n- src/app.tsx\n\n**Steps**\n1. Wire the panel");
+
+  assert.match(normalized, /## Files/);
+  assert.match(normalized, /## Steps/);
+  assert.doesNotMatch(normalized, /\*\*Files\*\*/);
+  assert.doesNotMatch(normalized, /\*\*Steps\*\*/);
+});
+
+test("plan review rows hide workspace-root filesystem details", () => {
+  const rows = buildPlanReviewRows(
+    "**Files**\n- C:\\Development\\Project\\src\\app.tsx\n\nSteps:\n1. Keep the saved plan internal.",
+    "C:\\Development\\Project",
+  );
+  const joined = JSON.stringify(rows);
+
+  assert.match(joined, /src\/app\.tsx/);
+  assert.doesNotMatch(joined, /C:\\\\Development/);
+  assert.doesNotMatch(joined, /Path:/);
+});
+
+test("plan review display rows wrap long lines inside the panel width", () => {
+  const longText = "This line should wrap cleanly inside the review panel instead of clipping horizontally past the right border where it would become unreadable.";
+  const semanticRows = buildPlanReviewRows(`Files:\n- src/core/board.py ${longText}`);
+  const displayRows = buildPlanReviewDisplayRows(semanticRows, 34);
+  const joined = displayRows.map((row) => row.text).join("\n");
+
+  assert.match(joined, /This line/);
+  assert.match(joined, /should wrap cleanly/);
+  assert.match(joined, /instead of clipping/);
+  assert.ok(
+    displayRows.every((row) => row.text.length <= 34),
+    "wrapped rows should stay within the requested content width",
+  );
+});
+
+test("plan review panel renders the full long plan instead of a clipped row range", async () => {
+  const output = await renderPlanPanel(makeLongPlan(40), 100);
+
+  assert.match(output, /Plan/);
+  assert.match(output, /src\/file-1\.ts/);
+  assert.match(output, /src\/file-20\.ts/);
+  assert.match(output, /src\/file-40\.ts/);
+  assert.match(output, /40\. Complete implementation step 40\./);
+  assert.doesNotMatch(output, /Plan \d+[-–]\d+ of \d+/);
+  assert.doesNotMatch(output, /PageUp\/PageDown scroll plan/);
+  assert.doesNotMatch(output, /C:\\Development/);
+});
+
+test("plan action picker keeps simple menu navigation and enter selection", async () => {
+  const harness = createInkHarness(<PlanActionHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("u");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.match(output, /Plan ready/);
+    assert.match(output, /\[I\] Implement changes/);
+    assert.match(output, /\[U\] Update plan/);
+    assert.doesNotMatch(output, /╭── Plan ready/);
+    assert.doesNotMatch(output, /I\s\sImplement changes/);
+    assert.doesNotMatch(output, /U\s\sUpdate plan/);
+    assert.doesNotMatch(output, /Cancel/);
+    assert.doesNotMatch(output, /Request changes/);
+    assert.doesNotMatch(output, /Add constraints/);
+    assert.doesNotMatch(output, /type a decision/);
+    assert.match(output, /selection:revise/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("plan action picker supports focused hotkeys and escape cancellation", async () => {
+  const harness = createInkHarness(<PlanActionHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("u");
+    await sleep(80);
+    harness.stdin.write("\u001b");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.match(output, /selection:revise/);
+    assert.match(output, /cancel:1/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("plan action picker implements with hotkey", async () => {
+  const harness = createInkHarness(<PlanActionHarness />);
+  try {
+    await sleep(80);
+    harness.stdin.write("i");
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /selection:implement/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("plan action picker selects focused action with enter", async () => {
+  const harness = createInkHarness(<PlanActionHarness />);
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b[B");
+    await sleep(80);
+    harness.stdin.write("\r");
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /selection:revise/);
+  } finally {
+    await harness.cleanup();
+  }
+});

package/src/ui/PlanReviewPanel.tsx

@@ -0,0 +1,212 @@
+import { useMemo } from "react";
+import { Box, Text } from "ink";
+import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+import { getUsableShellWidth } from "./layout.js";
+import { parseMarkdown } from "./Markdown.js";
+import { getTextWidth } from "./textLayout.js";
+import { useTheme } from "./theme.js";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type InlinePart =
+  | { kind: "text"; text: string }
+  | { kind: "code"; text: string }
+  | { kind: "bold"; text: string };
+
+type PlanReviewRow =
+  | { type: "blank" }
+  | { type: "header"; text: string }
+  | { type: "bullet"; marker: string; text: string }
+  | { type: "text"; text: string };
+
+type PlanReviewDisplayRow = {
+  text: string;
+  tone: "text" | "muted";
+  bold?: boolean;
+};
+
+function inlinePartsToText(parts: InlinePart[]): string {
+  return parts.map((part) => part.text).join("");
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+export function buildPlanReviewRows(planText: string, workspaceRoot?: string | null): PlanReviewRow[] {
+  const normalized = normalizePlanReviewMarkdown(planText, workspaceRoot);
+  const segments = parseMarkdown(normalized);
+  const rows: PlanReviewRow[] = [];
+
+  for (const segment of segments) {
+    if (rows.length > 0) rows.push({ type: "blank" });
+
+    if (segment.type === "header") {
+      rows.push({ type: "header", text: inlinePartsToText(segment.parts as InlinePart[]) });
+      continue;
+    }
+
+    if (segment.type === "list") {
+      for (const item of segment.items) {
+        rows.push({
+          type: "bullet",
+          marker: segment.ordered ? `${item.num}.` : "•",
+          text: inlinePartsToText(item.parts as InlinePart[]),
+        });
+      }
+      continue;
+    }
+
+    if (segment.type === "para") {
+      for (const line of segment.lines) {
+        const text = inlinePartsToText(line as InlinePart[]).trim();
+        if (text) rows.push({ type: "text", text });
+      }
+      continue;
+    }
+
+    if (segment.type === "code") {
+      for (const line of segment.lines) {
+        rows.push({ type: "text", text: line });
+      }
+    }
+  }
+
+  return rows.filter((row, index) => !(row.type === "blank" && rows[index - 1]?.type === "blank"));
+}
+
+function padVisual(text: string, width: number): string {
+  const currentWidth = getTextWidth(text);
+  if (currentWidth >= width) return text;
+  return `${text}${" ".repeat(width - currentWidth)}`;
+}
+
+function splitLongWord(word: string, width: number): string[] {
+  const chunks: string[] = [];
+  let current = "";
+
+  for (const char of Array.from(word)) {
+    if (current && getTextWidth(current + char) > width) {
+      chunks.push(current);
+      current = char;
+    } else {
+      current += char;
+    }
+  }
+
+  if (current) chunks.push(current);
+  return chunks;
+}
+
+function wrapReviewText(text: string, width: number): string[] {
+  const safeWidth = Math.max(1, width);
+  const words = text.trim().split(/\s+/).filter(Boolean);
+  const rows: string[] = [];
+  let current = "";
+
+  for (const word of words) {
+    if (getTextWidth(word) > safeWidth) {
+      if (current) {
+        rows.push(current);
+        current = "";
+      }
+      rows.push(...splitLongWord(word, safeWidth));
+      continue;
+    }
+
+    const candidate = current ? `${current} ${word}` : word;
+    if (getTextWidth(candidate) <= safeWidth) {
+      current = candidate;
+    } else {
+      if (current) rows.push(current);
+      current = word;
+    }
+  }
+
+  if (current) rows.push(current);
+  return rows.length > 0 ? rows : [""];
+}
+
+export function buildPlanReviewDisplayRows(rows: PlanReviewRow[], width: number): PlanReviewDisplayRow[] {
+  const displayRows: PlanReviewDisplayRow[] = [];
+
+  for (const row of rows) {
+    if (row.type === "blank") {
+      displayRows.push({ text: " ", tone: "muted" });
+      continue;
+    }
+
+    if (row.type === "header") {
+      for (const line of wrapReviewText(row.text, width)) {
+        displayRows.push({ text: line || " ", tone: "text", bold: true });
+      }
+      continue;
+    }
+
+    if (row.type === "bullet") {
+      const markerWidth = Math.max(2, getTextWidth(row.marker) + 1);
+      const bodyWidth = Math.max(1, width - markerWidth);
+      const wrapped = wrapReviewText(row.text, bodyWidth);
+
+      wrapped.forEach((line, index) => {
+        displayRows.push({
+          text: `${index === 0 ? `${row.marker} ` : " ".repeat(markerWidth)}${line || " "}`,
+          tone: "text",
+        });
+      });
+      continue;
+    }
+
+    for (const line of wrapReviewText(row.text, width)) {
+      displayRows.push({ text: line || " ", tone: "text" });
+    }
+  }
+
+  return displayRows;
+}
+
+function buildTopBorder(width: number, title: string): { title: string; fill: string } {
+  const prefixWidth = 3;
+  const titleWidth = getTextWidth(title);
+  const suffixWidth = 1;
+  const fillCount = Math.max(1, width - prefixWidth - titleWidth - suffixWidth);
+  return { title, fill: "─".repeat(fillCount) };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function PlanReviewPanel({
+  planText,
+  cols,
+  workspaceRoot,
+}: {
+  planText: string;
+  cols: number;
+  workspaceRoot?: string | null;
+}) {
+  const theme = useTheme();
+  const panelCols = Math.min(Math.max(20, getUsableShellWidth(cols) - 4), 96);
+  const contentWidth = Math.max(1, panelCols - 4);
+  const rows = useMemo(() => buildPlanReviewRows(planText, workspaceRoot), [planText, workspaceRoot]);
+  const displayRows = useMemo(() => buildPlanReviewDisplayRows(rows, contentWidth), [rows, contentWidth]);
+  const topBorder = useMemo(() => buildTopBorder(panelCols, "Plan "), [panelCols]);
+
+  return (
+    <Box width="100%" flexDirection="column" paddingX={2}>
+      <Text wrap="truncate">
+        <Text color={theme.BORDER_SUBTLE}>{"╭─ "}</Text>
+        <Text color={theme.TEXT} bold>{topBorder.title}</Text>
+        <Text color={theme.BORDER_SUBTLE}>{topBorder.fill}</Text>
+        <Text color={theme.BORDER_SUBTLE}>{"╮"}</Text>
+      </Text>
+      {displayRows.map((row, index) => (
+        <Text key={index} wrap="truncate">
+          <Text color={theme.BORDER_SUBTLE}>{"│ "}</Text>
+          <Text color={row.tone === "muted" ? theme.MUTED : theme.TEXT} bold={row.bold}>
+            {padVisual(row.text, contentWidth)}
+          </Text>
+          <Text color={theme.BORDER_SUBTLE}>{" │"}</Text>
+        </Text>
+      ))}
+      <Text wrap="truncate" color={theme.BORDER_SUBTLE}>{`╰${"─".repeat(Math.max(1, panelCols - 2))}╯`}</Text>
+    </Box>
+  );
+}

package/src/ui/PromptCardBorder.test.tsx

@@ -0,0 +1,161 @@
+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 { RunEvent, UserPromptEvent } from "../session/types.js";
+import { TEST_RUNTIME } from "../test/runtimeTestUtils.js";
+import { ThemeProvider } from "./theme.js";
+import { TurnGroup } from "./TurnGroup.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));
+}
+
+function makeRunningRun(turnId: number): RunEvent {
+  return {
+    id: 2,
+    type: "run",
+    createdAt: 2,
+    startedAt: 2,
+    durationMs: null,
+    backendId: "codex-subprocess",
+    backendLabel: "Codexa",
+    runtime: TEST_RUNTIME,
+    prompt: "Do work",
+    progressEntries: [],
+    status: "running",
+    summary: "Running",
+    truncatedOutput: false,
+    toolActivities: [],
+    activity: [],
+    touchedFileCount: 0,
+    errorMessage: null,
+    turnId,
+  };
+}
+
+function makeUser(turnId: number): UserPromptEvent {
+  return {
+    id: 1,
+    type: "user",
+    createdAt: 1,
+    prompt: "Do work",
+    turnId,
+  };
+}
+
+function renderTurnGroup(node: React.ReactElement) {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let output = "";
+  stdout.on("data", (chunk) => {
+    output += chunk.toString();
+  });
+  const instance = render(node, {
+    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,
+  });
+
+  return {
+    instance,
+    readOutput: () => stripAnsi(output),
+    resetOutput: () => {
+      output = "";
+    },
+  };
+}
+
+test("prompt card top border stays closed at the top-right corner across rerenders", async () => {
+  const turnId = 14;
+  const user = makeUser(turnId);
+  const run = makeRunningRun(turnId);
+
+  const harness = renderTurnGroup(
+    <ThemeProvider theme="purple">
+      <TurnGroup
+        cols={80}
+        turnIndex={1}
+        user={user}
+        run={run}
+        assistant={null}
+        opacity="active"
+        question={null}
+        runPhase="thinking"
+        streamPreviewRows={8}
+        streamMode="assistant-first"
+      />
+    </ThemeProvider>,
+  );
+
+  await sleep();
+  let frame = harness.readOutput();
+  let topBorder = frame.split("\n").find((line) => line.includes("╭── PROMPT"));
+  assert.ok(topBorder, "expected prompt top border line");
+  assert.match(topBorder!, /──╮$/);
+  assert.doesNotMatch(topBorder!, / ──╮$/);
+
+  harness.resetOutput();
+  harness.instance.rerender(
+    <ThemeProvider theme="purple">
+      <TurnGroup
+        cols={56}
+        turnIndex={1}
+        user={user}
+        run={run}
+        assistant={null}
+        opacity="active"
+        question={null}
+        runPhase="thinking"
+        streamPreviewRows={8}
+        streamMode="assistant-first"
+      />
+    </ThemeProvider>,
+  );
+
+  await sleep();
+  frame = harness.readOutput();
+  topBorder = frame.split("\n").find((line) => line.includes("╭── PROMPT"));
+  assert.ok(topBorder, "expected prompt top border line after resize rerender");
+  assert.match(topBorder!, /──╮$/);
+  assert.doesNotMatch(topBorder!, / ──╮$/);
+
+  harness.instance.unmount();
+});