@golba98/codexa 1.0.1

package/src/ui/ProviderPicker.test.tsx

@@ -0,0 +1,289 @@
+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 { buildProviderRegistry } from "../core/providerLauncher/registry.js";
+import type { ProviderId, ProviderPickerAction } from "../core/providerLauncher/types.js";
+import { createLayoutSnapshot } from "./layout.js";
+import { ProviderPicker } from "./ProviderPicker.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;
+}
+
+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,
+    getOutput(): string {
+      return stripAnsi(output);
+    },
+    async cleanup() {
+      instance.cleanup();
+      await sleep(20);
+    },
+  };
+}
+
+function ProviderPickerHarness() {
+  const [action, setAction] = React.useState("none");
+  const providers = buildProviderRegistry({
+    activeModel: "gpt-5.4",
+    workspaceConfig: { workspaceDefaultProviderId: "openai" },
+  });
+
+  return (
+    <ThemeProvider theme="purple">
+      <Box flexDirection="column">
+        <ProviderPicker
+          layout={createLayoutSnapshot(120, 40)}
+          providers={providers}
+          onAction={(providerId: ProviderId, nextAction: ProviderPickerAction) => {
+            setAction(`${providerId}:${nextAction}`);
+          }}
+          onCancel={() => setAction("cancel")}
+        />
+        <Text>{`action:${action}`}</Text>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+test("provider picker renders compact aligned provider rows", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /Providers/);
+    assert.match(output, /Enter = select, U = use, S = set default, Esc = cancel/);
+    assert.match(output, /OpenAI/);
+    assert.match(output, /Anthropic/);
+    assert.match(output, /Google/);
+    assert.match(output, /Local/);
+    assert.doesNotMatch(output, /Antigravity/);
+    assert.match(output, /Context/);
+    assert.match(output, /Tool/);
+    assert.match(output, /Strm/);
+    assert.match(output, /Unknown/);
+    assert.match(output, /\?/);
+    assert.match(output, /Disabled/);
+    assert.doesNotMatch(output, /0\/unknown/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker stays readable in a cramped terminal layout", async () => {
+  const providers = buildProviderRegistry({ activeModel: "gpt-5.4-mini" });
+  const harness = createInkHarness(
+    <ThemeProvider theme="purple">
+      <ProviderPicker
+        layout={createLayoutSnapshot(44, 18)}
+        providers={providers}
+        onAction={() => {}}
+        onCancel={() => {}}
+      />
+    </ThemeProvider>,
+  );
+
+  try {
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /Providers/);
+    assert.match(output, /Enter select/);
+    assert.doesNotMatch(output, /Gemini CLIEnabled/);
+    assert.match(output, /OpenAI/);
+    assert.match(output, /Local/);
+    assert.match(output, /Disabled/);
+    assert.doesNotMatch(output, /undefined/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker supports setting default with S", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("s");
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:anthropic:set-default/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker opens action menu and selects launch", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(40);
+    assert.match(harness.getOutput(), /Provider action: Anthropic/);
+    assert.match(harness.getOutput(), /Use in Codexa/);
+    assert.match(harness.getOutput(), /Launch external CLI/);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:anthropic:launch/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker reports Anthropic in-Codexa route actions without launching", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:anthropic:use-in-codexa/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker exposes Gemini diagnostics action", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(40);
+    assert.match(harness.getOutput(), /Provider action: Google/);
+    assert.match(harness.getOutput(), /Run Gemini diagnostics/);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\u001b[B");
+    await sleep(40);
+    harness.stdin.write("\r");
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:google:run-diagnostics/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("provider picker cancels from provider list with Esc", async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write("\u001b");
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:cancel/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test('pressing U fires use-in-codexa for the selected provider', async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write('u');
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:openai:use-in-codexa/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test('pressing U after navigating down fires use-in-codexa for the selected provider', async () => {
+  const harness = createInkHarness(<ProviderPickerHarness />);
+
+  try {
+    await sleep(80);
+    harness.stdin.write('j'); // down to Anthropic
+    await sleep(40);
+    harness.stdin.write('u');
+    await sleep(80);
+
+    assert.match(harness.getOutput(), /action:anthropic:use-in-codexa/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+

package/src/ui/ProviderPicker.tsx

@@ -0,0 +1,321 @@
+import React, { useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { ProviderConfig, ProviderId, ProviderPickerAction } from "../core/providerLauncher/types.js";
+import { traceInputDebug } from "../core/inputDebug.js";
+import { FOCUS_IDS } from "./focus.js";
+import { clampVisualText, getShellWidth, type Layout } from "./layout.js";
+import { useTheme } from "./theme.js";
+
+// ─── Types & helpers ─────────────────────────────────────────────────────────
+
+interface ProviderPickerProps {
+  layout: Layout;
+  providers: readonly ProviderConfig[];
+  onAction: (providerId: ProviderId, action: ProviderPickerAction) => void;
+  onCancel: () => void;
+  /** When set, the picker mounts directly at this provider's action panel. */
+  initialProviderId?: ProviderId;
+}
+
+interface ProviderActionItem {
+  value: ProviderPickerAction;
+  label: string;
+  disabledReason?: string | null;
+}
+
+function clampIndex(index: number, length: number): number {
+  if (length <= 0) return 0;
+  return Math.max(0, Math.min(length - 1, index));
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ProviderPicker({ layout, providers, onAction, onCancel, initialProviderId }: ProviderPickerProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: FOCUS_IDS.providerPicker, autoFocus: true });
+  const initialIndex = initialProviderId
+    ? Math.max(0, providers.findIndex((p) => p.id === initialProviderId))
+    : 0;
+  const [providerIndex, setProviderIndex] = useState(initialIndex);
+  const [mode, setMode] = useState<"providers" | "actions">(
+    initialProviderId ? "actions" : "providers",
+  );
+  const [actionIndex, setActionIndex] = useState(0);
+
+  const selectedProvider = providers[clampIndex(providerIndex, providers.length)];
+  const shellWidth = getShellWidth(layout.cols);
+  const panelWidth = Math.max(42, Math.min(shellWidth - 2, layout.mode === "full" ? 86 : 72));
+  const innerWidth = Math.max(30, panelWidth - 4);
+  const markerWidth = 2;
+  const columnGaps = 4;
+  const columnWidthBudget = Math.max(26, innerWidth - markerWidth - columnGaps);
+  const statusWidth = Math.min(8, Math.max(6, columnWidthBudget - 20));
+  const toolsWidth = 4;
+  const streamWidth = 4;
+  const contextWidth = Math.min(11, Math.max(7, columnWidthBudget - statusWidth - toolsWidth - streamWidth - 16));
+  const providerNameWidth = Math.min(layout.mode === "micro" ? 10 : 14, Math.max(8, columnWidthBudget - statusWidth - toolsWidth - streamWidth - contextWidth - 8));
+  const modelWidth = Math.max(5, columnWidthBudget - providerNameWidth - contextWidth - toolsWidth - streamWidth - statusWidth);
+
+  const helpText = layout.mode === "micro"
+    ? "Enter select  U use  S default  Esc"
+    : "Enter = select, U = use, S = set default, Esc = cancel";
+  const title = mode === "actions" && selectedProvider
+    ? `Provider action: ${selectedProvider.displayName}`
+    : "Providers";
+  const actions = useMemo<ProviderActionItem[]>(() => {
+    const routeUnavailable = selectedProvider?.routeMode === "in-codexa"
+      ? null
+      : selectedProvider?.routeUnavailableReason ?? "In-Codexa routing is not configured yet.";
+
+    return [
+      { value: "use-in-codexa", label: "Use in Codexa", disabledReason: routeUnavailable },
+      { value: "select-model", label: "Select model", disabledReason: routeUnavailable },
+      { value: "refresh-models", label: selectedProvider?.id === "anthropic" ? "Refresh Claude capabilities" : selectedProvider?.id === "local" ? "Refresh LM Studio metadata" : "Refresh models", disabledReason: routeUnavailable },
+      ...(selectedProvider?.id === "google" || selectedProvider?.id === "local"
+        ? [{ value: "run-diagnostics" as const, label: selectedProvider.id === "local" ? "Run Local diagnostics" : "Run Gemini diagnostics" }]
+        : []),
+      { value: "launch", label: "Launch external CLI" },
+      { value: "set-default", label: "Set as workspace default" },
+      { value: "cancel", label: "Cancel" },
+    ];
+  }, [selectedProvider]);
+
+  useInput((input, key) => {
+    traceInputDebug("provider_picker_input", {
+      handler: "ProviderPicker.useInput",
+      input,
+      return: Boolean(key.return),
+      escape: Boolean(key.escape),
+      upArrow: Boolean(key.upArrow),
+      downArrow: Boolean(key.downArrow),
+      mode,
+      providerIndex,
+      actionIndex,
+    });
+
+    if (key.ctrl && (input === "c" || input === "q")) {
+      onCancel();
+      return;
+    }
+
+    if (key.escape) {
+      if (mode === "actions") {
+        setMode("providers");
+        setActionIndex(0);
+        return;
+      }
+      onCancel();
+      return;
+    }
+
+    if (mode === "providers") {
+      if (key.upArrow || input === "k") {
+        setProviderIndex((current) => clampIndex(current - 1, providers.length));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setProviderIndex((current) => clampIndex(current + 1, providers.length));
+        return;
+      }
+      if (input.toLowerCase() === "s" && selectedProvider) {
+        onAction(selectedProvider.id, "set-default");
+        return;
+      }
+      if (input.toLowerCase() === "u" && selectedProvider) {
+        onAction(selectedProvider.id, "use-in-codexa");
+        return;
+      }
+      if (key.return && selectedProvider) {
+        setMode("actions");
+        setActionIndex(0);
+      }
+      return;
+    }
+
+    if (key.upArrow || input === "k") {
+      setActionIndex((current) => clampIndex(current - 1, actions.length));
+      return;
+    }
+    if (key.downArrow || input === "j") {
+      setActionIndex((current) => clampIndex(current + 1, actions.length));
+      return;
+    }
+    if (key.return && selectedProvider) {
+      onAction(selectedProvider.id, actions[actionIndex]?.value ?? "cancel");
+    }
+  }, { isActive: isFocused });
+
+  const body = useMemo(() => {
+    if (mode === "actions" && selectedProvider) {
+      const inCodexaAvailable = selectedProvider.routeMode === "in-codexa";
+      const isConfigured = inCodexaAvailable && !selectedProvider.routeUnavailableReason;
+      const inCodexaStatusText = !inCodexaAvailable ? "Unavailable" : isConfigured ? "Available" : "Needs configuration";
+      const inCodexaStatusColor = !inCodexaAvailable ? theme.ERROR : isConfigured ? theme.SUCCESS : theme.WARNING;
+
+      return (
+        <Box flexDirection="column">
+          <Box marginBottom={1} flexDirection="column" paddingX={2}>
+            <Text color={theme.DIM}>Status: <Text color={theme.TEXT}>{selectedProvider.routeUnavailableReason ?? "Ready"}</Text></Text>
+            <Text color={theme.DIM}>Backend: <Text color={theme.TEXT}>{selectedProvider.backendType}</Text></Text>
+            <Text color={theme.DIM}>Use in Codexa: <Text color={inCodexaStatusColor}>{inCodexaStatusText}</Text></Text>
+          </Box>
+          {actions.map((action, index) => (
+            <ActionRow
+              key={action.value}
+              label={action.label}
+              disabledReason={action.disabledReason}
+              isHighlighted={index === actionIndex}
+              width={innerWidth}
+            />
+          ))}
+        </Box>
+      );
+    }
+
+    return providers.map((provider, index) => (
+      <ProviderRow
+        key={provider.id}
+        provider={provider}
+        isHighlighted={index === providerIndex}
+        widths={{ providerNameWidth, modelWidth, contextWidth, toolsWidth, streamWidth, statusWidth }}
+      />
+    ));
+  }, [actionIndex, actions, contextWidth, innerWidth, mode, modelWidth, providerIndex, providerNameWidth, providers, streamWidth, toolsWidth, statusWidth]);
+
+  return (
+    <Box flexDirection="column" width={panelWidth}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.PROMPT}
+        paddingX={1}
+        paddingY={0}
+        width={panelWidth}
+        flexDirection="column"
+      >
+        <Box width="100%" overflow="hidden">
+          <Text color={theme.ACCENT} bold>
+            {clampVisualText(`${title}   ${helpText}`, innerWidth)}
+          </Text>
+        </Box>
+
+        {mode === "providers" && (
+          <Box width="100%" overflow="hidden">
+            <Text color={theme.DIM}>
+              {"  "}
+              {clampVisualText("Provider", providerNameWidth)}
+              {" "}
+              {clampVisualText("Model", modelWidth)}
+              {" "}
+              {clampVisualText("Context", contextWidth)}
+              {" "}
+              {clampVisualText("Tool", toolsWidth)}
+              {" "}
+              {clampVisualText("Strm", streamWidth)}
+              {" "}
+              {clampVisualText("Status", statusWidth)}
+            </Text>
+          </Box>
+        )}
+
+        <Box flexDirection="column" marginTop={0} width="100%">
+          {body}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+// ─── Subcomponents ───────────────────────────────────────────────────────────
+
+function capabilityFlag(value: boolean | null | undefined): string {
+  if (value === true) return "Y";
+  if (value === false) return "N";
+  return "?";
+}
+
+function ProviderRow({
+  provider,
+  isHighlighted,
+  widths,
+}: {
+  provider: ProviderConfig;
+  isHighlighted: boolean;
+  widths: {
+    providerNameWidth: number;
+    modelWidth: number;
+    contextWidth: number;
+    toolsWidth: number;
+    streamWidth: number;
+    statusWidth: number;
+  };
+}) {
+  const theme = useTheme();
+  const statusColor = provider.isActiveRoute
+    ? theme.SUCCESS
+    : provider.enabled && !provider.routeUnavailableReason
+      ? theme.SUCCESS
+      : theme.WARNING;
+  const marker = isHighlighted ? ">" : " ";
+  const defaultMark = provider.isActiveRoute ? "@" : provider.isDefault ? "*" : " ";
+  const statusText = provider.isActiveRoute ? "Active" : provider.statusLabel;
+
+  return (
+    <Box width="100%" overflow="hidden">
+      <Box width={2} flexShrink={0}>
+        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{marker}{defaultMark}</Text>
+      </Box>
+      <Box width={widths.providerNameWidth} flexShrink={0} overflow="hidden">
+        <Text color={isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted}>
+          {clampVisualText(provider.displayName, widths.providerNameWidth)}
+        </Text>
+      </Box>
+      <Text> </Text>
+      <Box width={widths.modelWidth} flexShrink={0} overflow="hidden">
+        <Text color={theme.MUTED}>{clampVisualText(provider.currentModel, widths.modelWidth)}</Text>
+      </Box>
+      <Text> </Text>
+      <Box width={widths.contextWidth} flexShrink={0} overflow="hidden">
+        <Text color={theme.MUTED}>{clampVisualText(provider.contextLengthLabel ?? "Unknown", widths.contextWidth)}</Text>
+      </Box>
+      <Text> </Text>
+      <Box width={widths.toolsWidth} flexShrink={0} overflow="hidden">
+        <Text color={theme.MUTED}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsToolCalls), widths.toolsWidth)}</Text>
+      </Box>
+      <Text> </Text>
+      <Box width={widths.streamWidth} flexShrink={0} overflow="hidden">
+        <Text color={theme.MUTED}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsStreaming), widths.streamWidth)}</Text>
+      </Box>
+      <Text> </Text>
+      <Box width={widths.statusWidth} flexShrink={0} overflow="hidden">
+        <Text color={statusColor}>{clampVisualText(statusText, widths.statusWidth)}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function ActionRow({
+  label,
+  disabledReason,
+  isHighlighted,
+  width,
+}: {
+  label: string;
+  disabledReason?: string | null;
+  isHighlighted: boolean;
+  width: number;
+}) {
+  const theme = useTheme();
+  const text = disabledReason ? `${label} unavailable` : label;
+  return (
+    <Box width="100%" overflow="hidden">
+      <Box width={2} flexShrink={0}>
+        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{isHighlighted ? ">" : " "}</Text>
+      </Box>
+      <Box width={Math.max(10, width - 2)} flexShrink={0} overflow="hidden">
+        <Text color={disabledReason ? theme.DIM : isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted && !disabledReason}>
+          {clampVisualText(text, Math.max(10, width - 2))}
+        </Text>
+      </Box>
+    </Box>
+  );
+}