@golba98/codexa 1.0.1

package/src/ui/ProviderShortcut.test.tsx

@@ -0,0 +1,143 @@
+import assert from "node:assert/strict";
+import { PassThrough } from "node:stream";
+import test from "node:test";
+import React from "react";
+import { Box, Text, render } from "ink";
+import { createLayoutSnapshot } from "./layout.js";
+import { BottomComposer } from "./BottomComposer.js";
+import { ThemeProvider } from "./theme.js";
+
+class TestInput extends PassThrough {
+  readonly isTTY = true;
+  setRawMode = () => this;
+  ref = () => this;
+  unref = () => this;
+}
+
+class TestOutput extends PassThrough {
+  readonly isTTY = true;
+  columns = 120;
+  rows = 40;
+}
+
+function sleep(ms = 50): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+test("Ctrl+Alt+P raw escape sequence opens provider picker", async () => {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let providerPickerOpened = false;
+
+  render(
+    <ThemeProvider theme="purple">
+      <BottomComposer
+        layout={createLayoutSnapshot(120, 40)}
+        uiState={{ kind: "IDLE" }}
+        mode="auto"
+        model="gpt-4"
+        themeName="purple"
+        reasoningLevel="low"
+        planMode={false}
+        showBusyLoader={false}
+        tokensUsed={0}
+        value=""
+        cursor={0}
+        onChangeInput={() => {}}
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        onChangeValue={() => {}}
+        onChangeCursor={() => {}}
+        onHistoryUp={() => {}}
+        onHistoryDown={() => {}}
+        onOpenBackendPicker={() => {}}
+        onOpenProviderPicker={() => {
+          providerPickerOpened = true;
+        }}
+        onOpenModelPicker={() => {}}
+        onOpenModePicker={() => {}}
+        onOpenThemePicker={() => {}}
+        onOpenAuthPanel={() => {}}
+        onTogglePlanMode={() => {}}
+        onClear={() => {}}
+        onCycleMode={() => {}}
+        onQuit={() => {}}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as any,
+      stdout: stdout as any,
+      debug: true,
+      exitOnCtrlC: false,
+    }
+  );
+
+  // Wait for effect setup
+  await sleep(100);
+
+  // Send raw Ctrl+Alt+P sequence (ESC ^P)
+  stdin.write("\x1b\x10");
+  
+  // useInput is triggered on the next tick in Ink
+  await sleep(100);
+
+  assert.strictEqual(providerPickerOpened, true, "Provider picker should be opened by raw Ctrl+Alt+P sequence");
+});
+
+test("Ctrl+Alt+P CSI u sequence opens provider picker", async () => {
+  const stdin = new TestInput();
+  const stdout = new TestOutput();
+  let providerPickerOpened = false;
+
+  render(
+    <ThemeProvider theme="purple">
+      <BottomComposer
+        layout={createLayoutSnapshot(120, 40)}
+        uiState={{ kind: "IDLE" }}
+        mode="auto"
+        model="gpt-4"
+        themeName="purple"
+        reasoningLevel="low"
+        planMode={false}
+        showBusyLoader={false}
+        tokensUsed={0}
+        value=""
+        cursor={0}
+        onChangeInput={() => {}}
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        onChangeValue={() => {}}
+        onChangeCursor={() => {}}
+        onHistoryUp={() => {}}
+        onHistoryDown={() => {}}
+        onOpenBackendPicker={() => {}}
+        onOpenProviderPicker={() => {
+          providerPickerOpened = true;
+        }}
+        onOpenModelPicker={() => {}}
+        onOpenModePicker={() => {}}
+        onOpenThemePicker={() => {}}
+        onOpenAuthPanel={() => {}}
+        onTogglePlanMode={() => {}}
+        onClear={() => {}}
+        onCycleMode={() => {}}
+        onQuit={() => {}}
+      />
+    </ThemeProvider>,
+    {
+      stdin: stdin as any,
+      stdout: stdout as any,
+      debug: true,
+      exitOnCtrlC: false,
+    }
+  );
+
+  await sleep(100);
+
+  // Send CSI u sequence for Ctrl+Alt+P
+  stdin.write("\x1b[112;7u");
+  
+  await sleep(100);
+
+  assert.strictEqual(providerPickerOpened, true, "Provider picker should be opened by CSI u Ctrl+Alt+P sequence");
+});

package/src/ui/ReasoningPicker.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { type ReasoningEffortCapability } from "../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../config/settings.js";
+import { FOCUS_IDS } from "./focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ReasoningPickerProps {
+  currentReasoning: string;
+  currentModel: string;
+  reasoningLevels: readonly ReasoningEffortCapability[];
+  defaultReasoning: string | null;
+  sourceLabel?: string | null;
+  onSelect: (reasoning: string) => void;
+  onCancel: () => void;
+}
+
+export function ReasoningPicker({
+  currentReasoning,
+  currentModel,
+  reasoningLevels,
+  defaultReasoning,
+  sourceLabel,
+  onSelect,
+  onCancel,
+}: ReasoningPickerProps) {
+  const items = reasoningLevels.map((reasoning) => ({
+    label: reasoning.id === currentReasoning ? `${reasoning.label}  ✓` : reasoning.label,
+    value: reasoning.id,
+  }));
+
+  const baseSubtitle = defaultReasoning
+    ? `Suggested for ${currentModel}: ${formatReasoningLabel(defaultReasoning)}`
+    : `Detected levels for ${currentModel}`;
+  const subtitle = sourceLabel ? `${baseSubtitle} · ${sourceLabel}` : baseSubtitle;
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.reasoningPicker}
+      title="Select reasoning level"
+      subtitle={subtitle}
+      items={items}
+      onSelect={onSelect}
+      onCancel={onCancel}
+    />
+  );
+}

package/src/ui/RunFooter.tsx

@@ -0,0 +1,65 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import type { UIState } from "../session/types.js";
+import * as renderDebug from "../core/perf/renderDebug.js";
+import { useTheme } from "./theme.js";
+import { AnimatedStatusText } from "./AnimatedStatusText.js";
+import { isAnimatedBusyState } from "./busyStatusAnimation.js";
+
+export function measureRunFooterRows(): number {
+  return 3;
+}
+
+export function getRunFooterStatus(uiState: UIState): string {
+  if (uiState.kind === "IDLE") return "";
+  if (uiState.kind === "THINKING") return "Codexa is thinking";
+  if (uiState.kind === "RESPONDING") return "Codexa is thinking";
+  if (uiState.kind === "ANSWER_VISIBLE") return "Codexa response complete";
+  if (uiState.kind === "SHELL_RUNNING") return "Codexa is running command";
+  if (uiState.kind === "ERROR") return uiState.message;
+  if (uiState.kind === "AWAITING_USER_ACTION") return "Codexa needs your answer";
+  return "Codexa is working";
+}
+
+interface RunFooterProps {
+  uiState: UIState;
+  showBusyLoader?: boolean;
+  onCancel: () => void;
+  onQuit: () => void;
+}
+
+function RunFooter({ uiState, showBusyLoader = true }: RunFooterProps) {
+  renderDebug.useRenderDebug("Footer", {
+    uiStateKind: uiState.kind,
+    showBusyLoader,
+  });
+  renderDebug.useLifecycleDebug("Footer", {
+    uiStateKind: uiState.kind,
+  });
+
+  const theme = useTheme();
+  // THINKING/RESPONDING/SHELL_RUNNING indicate active processing
+  const isActive = showBusyLoader && isAnimatedBusyState(uiState.kind);
+
+  return (
+    <Box flexDirection="column" paddingBottom={1} width="100%">
+      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.BORDER_SUBTLE} marginBottom={1} />
+      <Box paddingX={1} width="100%" justifyContent="space-between" overflow="hidden">
+        <Box flexShrink={1} flexGrow={1} overflow="hidden">
+          <Text color={theme.INFO}>{"✧ "}</Text>
+          <AnimatedStatusText baseText={getRunFooterStatus(uiState)} isActive={isActive} />
+        </Box>
+        <Box flexShrink={0}>
+          <Text color={theme.DIM}>Esc cancel  Ctrl+C quit</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export const MemoizedRunFooter = memo(RunFooter, (prev, next) => {
+  return prev.uiState.kind === next.uiState.kind
+    && prev.showBusyLoader === next.showBusyLoader;
+});
+
+export { RunFooter };

package/src/ui/SelectionPanel.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import SelectInput from "ink-select-input";
+import { useTheme } from "./theme.js";
+
+interface SelectionPanelProps {
+  focusId: string;
+  title: string;
+  subtitle: string;
+  items: Array<{ label: string; value: string }>;
+  limit?: number;
+  onSelect: (value: string) => void;
+  onHighlight?: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function SelectionPanel({
+  focusId,
+  title,
+  subtitle,
+  items,
+  limit,
+  onSelect,
+  onHighlight,
+  onCancel,
+}: SelectionPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+
+  useInput((_, key) => {
+    if (key.escape) onCancel();
+  }, { isActive: isFocused });
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      {/* Block 1: title + instructions */}
+      <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>
+
+      {/* Block 2: selection list */}
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_ACTIVE}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+      >
+        <SelectInput
+          items={items}
+          isFocused={isFocused}
+          limit={limit}
+          onSelect={(item) => onSelect(item.value)}
+          onHighlight={(item) => onHighlight?.(item.value)}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/ui/SettingsPanel.test.tsx

@@ -0,0 +1,233 @@
+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 type { SettingDefinition } from "../config/settings.js";
+import { SettingsPanel } from "./SettingsPanel.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 = 120;
+  rows = 40;
+}
+
+type TestSettingKey = "directory" | "density";
+
+const TEST_SETTINGS: readonly SettingDefinition<TestSettingKey, string>[] = [
+  {
+    key: "directory",
+    label: "Directory",
+    description: "Controls the displayed workspace label.",
+    options: [
+      { value: "normal", label: "Normal" },
+      { value: "simple", label: "Simple" },
+    ],
+  },
+  {
+    key: "density",
+    label: "Density",
+    description: "Controls how dense the rows feel.",
+    options: [
+      { value: "cozy", label: "Cozy" },
+      { value: "compact", label: "Compact" },
+      { value: "dense", label: "Dense" },
+    ],
+  },
+] as const;
+
+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 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,
+    instance,
+    getOutput(): string {
+      return stripAnsi(output);
+    },
+    async cleanup() {
+      instance.cleanup();
+      await sleep(20);
+    },
+  };
+}
+
+function SettingsPanelHarness() {
+  const [saved, setSaved] = React.useState<Record<TestSettingKey, string>>({
+    directory: "normal",
+    density: "cozy",
+  });
+  const [saveCount, setSaveCount] = React.useState(0);
+  const [cancelCount, setCancelCount] = React.useState(0);
+
+  return (
+    <ThemeProvider theme="purple">
+      <Box flexDirection="column">
+        <SettingsPanel
+          focusId="settings-panel"
+          settings={TEST_SETTINGS}
+          values={saved}
+          onSave={(nextValues) => {
+            setSaved(nextValues);
+            setSaveCount((count) => count + 1);
+          }}
+          onCancel={() => setCancelCount((count) => count + 1)}
+        />
+        <Text>{`saved:${JSON.stringify(saved)}`}</Text>
+        <Text>{`saveCount:${saveCount}`}</Text>
+        <Text>{`cancel:${cancelCount}`}</Text>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+test("up and down move between settings rows before changing values", async () => {
+  const harness = createInkHarness(<SettingsPanelHarness />);
+
+  try {
+    await sleep();
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[C");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.match(output, /saved:\{"directory":"normal","density":"compact"\}/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("changing settings in the panel does not save repeatedly before Enter", async () => {
+  const harness = createInkHarness(<SettingsPanelHarness />);
+
+  try {
+    await sleep();
+    harness.stdin.write("\u001b[C");
+    await sleep(40);
+    harness.stdin.write("\u001b[C");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[C");
+    await sleep(80);
+
+    let output = harness.getOutput();
+    assert.match(output, /saved:\{"directory":"normal","density":"cozy"\}/);
+    assert.match(output, /saveCount:0/);
+
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    output = harness.getOutput();
+    assert.match(output, /saved:\{"directory":"normal","density":"compact"\}/);
+    assert.match(output, /saveCount:1/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("left and right cycle the active option and wrap across the list", async () => {
+  const harness = createInkHarness(<SettingsPanelHarness />);
+
+  try {
+    await sleep();
+    harness.stdin.write("\u001b[D");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.match(output, /saved:\{"directory":"simple","density":"cozy"\}/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("escape cancels the panel without saving the draft values", async () => {
+  const harness = createInkHarness(<SettingsPanelHarness />);
+
+  try {
+    await sleep();
+    harness.stdin.write("\u001b[C");
+    await sleep(40);
+    harness.stdin.write("\u001b");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.match(output, /saved:\{"directory":"normal","density":"cozy"\}/);
+    assert.match(output, /cancel:1/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("printable input is ignored while the settings panel is focused", async () => {
+  const harness = createInkHarness(<SettingsPanelHarness />);
+
+  try {
+    await sleep();
+    harness.stdin.write("abc");
+    await sleep(40);
+    harness.stdin.write("\u001b[C");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    const output = harness.getOutput();
+    assert.doesNotMatch(output, /abc/);
+    assert.match(output, /saved:\{"directory":"simple","density":"cozy"\}/);
+  } finally {
+    await harness.cleanup();
+  }
+});

package/src/ui/SettingsPanel.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { SettingDefinition } from "../config/settings.js";
+import type { FocusTargetId } from "./focus.js";
+import { useTheme } from "./theme.js";
+
+export interface SettingsPanelProps<TKey extends string> {
+  focusId: FocusTargetId;
+  title?: string;
+  settings: readonly SettingDefinition<TKey, string>[];
+  values: Record<TKey, string>;
+  onSave: (values: Record<TKey, string>) => void;
+  onCancel: () => void;
+}
+
+function cycleOption<TKey extends string>(
+  definition: SettingDefinition<TKey, string>,
+  currentValue: string,
+  direction: -1 | 1,
+): string {
+  const currentIndex = definition.options.findIndex((option) => option.value === currentValue);
+  const safeIndex = currentIndex >= 0 ? currentIndex : 0;
+  const nextIndex = (safeIndex + direction + definition.options.length) % definition.options.length;
+  return definition.options[nextIndex]?.value ?? currentValue;
+}
+
+export function SettingsPanel<TKey extends string>({
+  focusId,
+  title = "Settings",
+  settings,
+  values,
+  onSave,
+  onCancel,
+}: SettingsPanelProps<TKey>) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [draftValues, setDraftValues] = useState<Record<TKey, string>>(() => ({ ...values }));
+
+  const activeSetting = settings[selectedIndex] ?? settings[0];
+  const subtitle = useMemo(() => {
+    const instructions = "↑↓ setting  ←→ option  Enter save  Esc cancel";
+    if (!activeSetting?.description) {
+      return instructions;
+    }
+
+    return `${instructions}\n${activeSetting.description}`;
+  }, [activeSetting]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.return) {
+      onSave(draftValues);
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex((current) => Math.min(settings.length - 1, current + 1));
+      return;
+    }
+
+    if (key.leftArrow || key.rightArrow) {
+      const direction: -1 | 1 = key.leftArrow ? -1 : 1;
+      const definition = settings[selectedIndex];
+      if (!definition) {
+        return;
+      }
+
+      setDraftValues((current) => ({
+        ...current,
+        [definition.key]: cycleOption(definition, current[definition.key], direction),
+      }));
+      return;
+    }
+
+    if (!input || key.ctrl || key.meta) {
+      return;
+    }
+  }, { isActive: isFocused });
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_SUBTLE}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+        flexDirection="column"
+      >
+        <Box>
+          <Text color={theme.ACCENT} bold>{title}  </Text>
+          <Text color={theme.MUTED}>{subtitle.split("\n")[0]}</Text>
+        </Box>
+        {activeSetting?.description && (
+          <Box marginTop={1}>
+            <Text color={theme.DIM}>{activeSetting.description}</Text>
+          </Box>
+        )}
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_ACTIVE}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        {settings.map((setting, index) => {
+          const isSelectedRow = index === selectedIndex;
+          const currentValue = draftValues[setting.key];
+
+          return (
+            <Box key={setting.key} flexDirection="row" width="100%">
+              <Box width={3}>
+                <Text color={isSelectedRow ? theme.ACCENT : theme.DIM}>{isSelectedRow ? "▸ " : "  "}</Text>
+              </Box>
+              <Box width={20}>
+                <Text color={isSelectedRow ? theme.TEXT : theme.MUTED} bold={isSelectedRow}>
+                  {setting.label}
+                </Text>
+              </Box>
+              <Box flexDirection="row" flexWrap="wrap" flexGrow={1}>
+                {setting.options.map((option, optionIndex) => {
+                  const isActiveOption = option.value === currentValue;
+                  const optionText = isActiveOption ? `[${option.label}]` : option.label;
+                  return (
+                    <Text
+                      key={option.value}
+                      color={isActiveOption ? (isSelectedRow ? theme.ACCENT : theme.TEXT) : theme.DIM}
+                      bold={isActiveOption}
+                    >
+                      {optionIndex > 0 ? "  " : ""}
+                      {optionText}
+                    </Text>
+                  );
+                })}
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}