@golba98/codexa 1.0.1

package/src/ui/AttachmentImportPanel.test.tsx

@@ -0,0 +1,204 @@
+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 { AttachmentImportPanel, type PendingImportFile } from "./AttachmentImportPanel.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(/\[[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);
+    },
+  };
+}
+
+const TEST_FILE: PendingImportFile = {
+  srcPath: "C:\\Users\\jorda\\OneDrive\\Screenshots\\Screenshot 2026-05-18.png",
+  rawPath: "C:\\Users\\jorda\\OneDrive\\Screenshots\\Screenshot 2026-05-18.png",
+  destFilename: "Screenshot 2026-05-18.png",
+  isImage: true,
+};
+
+const ATTACHMENTS_DIR = "C:\\Development\\1-JavaScript\\13-Custom-CLI-Normal\\.codexa\\attachments";
+const WORKSPACE_ROOT = "C:\\Development\\1-JavaScript\\13-Custom-CLI-Normal";
+
+interface HarnessState {
+  confirmed: number;
+  cancelled: number;
+}
+
+function AttachmentImportPanelHarness({
+  files = [TEST_FILE],
+  modelSupportsVision = null,
+}: {
+  files?: PendingImportFile[];
+  modelSupportsVision?: boolean | null;
+}) {
+  const [state, setState] = React.useState<HarnessState>({ confirmed: 0, cancelled: 0 });
+
+  return (
+    <ThemeProvider theme="purple">
+      <Box flexDirection="column">
+        <AttachmentImportPanel
+          focusId="import-confirmation"
+          files={files}
+          attachmentsDir={ATTACHMENTS_DIR}
+          workspaceRoot={WORKSPACE_ROOT}
+          modelSupportsVision={modelSupportsVision}
+          onConfirm={() => setState((s) => ({ ...s, confirmed: s.confirmed + 1 }))}
+          onCancel={() => setState((s) => ({ ...s, cancelled: s.cancelled + 1 }))}
+        />
+        <Text>{`confirmed:${state.confirmed}`}</Text>
+        <Text>{`cancelled:${state.cancelled}`}</Text>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+test("AttachmentImportPanel renders filename and destination path", async () => {
+  const harness = createInkHarness(<AttachmentImportPanelHarness />);
+  try {
+    await sleep();
+    const output = harness.getOutput();
+    assert.match(output, /Screenshot 2026-05-18\.png/);
+    assert.match(output, /\.codexa\/attachments/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("AttachmentImportPanel Enter key calls onConfirm", async () => {
+  const harness = createInkHarness(<AttachmentImportPanelHarness />);
+  try {
+    await sleep();
+    harness.stdin.write("\r");
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /confirmed:1/);
+    assert.match(output, /cancelled:0/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("AttachmentImportPanel Esc key calls onCancel", async () => {
+  const harness = createInkHarness(<AttachmentImportPanelHarness />);
+  try {
+    await sleep();
+    harness.stdin.write("");
+    await sleep(80);
+    const output = harness.getOutput();
+    assert.match(output, /confirmed:0/);
+    assert.match(output, /cancelled:1/);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("AttachmentImportPanel shows vision warning when modelSupportsVision is false and file is image", async () => {
+  const harness = createInkHarness(
+    <AttachmentImportPanelHarness modelSupportsVision={false} />,
+  );
+  try {
+    await sleep();
+    const output = harness.getOutput();
+    assert.match(output, /active model may not support images/i);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("AttachmentImportPanel does NOT show vision warning when modelSupportsVision is null", async () => {
+  const harness = createInkHarness(
+    <AttachmentImportPanelHarness modelSupportsVision={null} />,
+  );
+  try {
+    await sleep();
+    const output = harness.getOutput();
+    assert.doesNotMatch(output, /active model may not support images/i);
+  } finally {
+    await harness.cleanup();
+  }
+});
+
+test("AttachmentImportPanel does NOT show vision warning for non-image file even when modelSupportsVision is false", async () => {
+  const textFile: PendingImportFile = {
+    srcPath: "C:\\Users\\jorda\\Documents\\notes.txt",
+    rawPath: "C:\\Users\\jorda\\Documents\\notes.txt",
+    destFilename: "notes.txt",
+    isImage: false,
+  };
+  const harness = createInkHarness(
+    <AttachmentImportPanelHarness files={[textFile]} modelSupportsVision={false} />,
+  );
+  try {
+    await sleep();
+    const output = harness.getOutput();
+    assert.doesNotMatch(output, /active model may not support images/i);
+  } finally {
+    await harness.cleanup();
+  }
+});

package/src/ui/AttachmentImportPanel.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import path from "node:path";
+import { useTheme } from "./theme.js";
+
+export interface PendingImportFile {
+  srcPath: string;
+  rawPath: string;
+  destFilename: string;
+  isImage: boolean;
+}
+
+interface AttachmentImportPanelProps {
+  focusId: string;
+  files: PendingImportFile[];
+  attachmentsDir: string;
+  workspaceRoot: string;
+  modelSupportsVision: boolean | null;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function AttachmentImportPanel({
+  focusId,
+  files,
+  attachmentsDir,
+  workspaceRoot,
+  modelSupportsVision,
+  onConfirm,
+  onCancel,
+}: AttachmentImportPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+
+  useInput((_, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.return) {
+      onConfirm();
+      return;
+    }
+  }, { isActive: isFocused });
+
+  const relativeAttachmentsDir = path.relative(workspaceRoot, attachmentsDir).replace(/\\/g, "/");
+  const hasImages = files.some((f) => f.isImage);
+  const showVisionWarning = hasImages && modelSupportsVision === false;
+  const fileLabel = files.length === 1 ? "file" : "files";
+
+  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>IMPORT FILE  </Text>
+        <Text color={theme.MUTED}>
+          Copy {files.length} outside-workspace {fileLabel} into .codexa/attachments?
+        </Text>
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.BORDER_ACTIVE}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        {files.map((file, i) => (
+          <Box key={i} flexDirection="column" marginBottom={i < files.length - 1 ? 1 : 0}>
+            <Text color={theme.TEXT}>{path.basename(file.srcPath)}</Text>
+            <Text color={theme.DIM}>
+              {"→ "}{relativeAttachmentsDir}/{file.destFilename}
+            </Text>
+          </Box>
+        ))}
+
+        {showVisionWarning && (
+          <Box marginTop={1}>
+            <Text color={theme.WARNING}>
+              Note: active model may not support images.
+            </Text>
+          </Box>
+        )}
+
+        <Box marginTop={1}>
+          <Text color={theme.DIM}>Enter copy and continue  Esc cancel</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/AuthPanel.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { AUTH_PREFERENCES, formatAuthPreferenceLabel } from "../config/settings.js";
+import type { CodexAuthProbeResult } from "../core/auth/codexAuth.js";
+import { getAuthStateLabel } from "../core/auth/codexAuth.js";
+import type { BackendProvider } from "../core/providers/types.js";
+import { useTheme } from "./theme.js";
+
+interface AuthPanelProps {
+  focusId: string;
+  provider: BackendProvider;
+  authPreference: string;
+  authStatus: CodexAuthProbeResult;
+  authStatusBusy: boolean;
+  onSetPreference: (value: string) => void;
+  onRefreshAuthStatus: () => void;
+  onClose: () => void;
+}
+
+export function AuthPanel({
+  focusId,
+  provider,
+  authPreference,
+  authStatus,
+  authStatusBusy,
+  onSetPreference,
+  onRefreshAuthStatus,
+  onClose,
+}: AuthPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+
+  useInput((input, key) => {
+    if (key.escape || input.toLowerCase() === "q") {
+      onClose();
+      return;
+    }
+
+    const numeric = Number.parseInt(input, 10);
+    if (!Number.isNaN(numeric) && numeric >= 1 && numeric <= AUTH_PREFERENCES.length) {
+      onSetPreference(AUTH_PREFERENCES[numeric - 1]!.id);
+    }
+
+    if (input.toLowerCase() === "r") {
+      onRefreshAuthStatus();
+    }
+  }, { isActive: isFocused });
+
+  const authStateLabel = getAuthStateLabel(authStatus.state);
+  const authStateColor =
+    authStatus.state === "authenticated"
+      ? theme.SUCCESS
+      : authStatus.state === "unauthenticated"
+        ? theme.ERROR
+        : theme.WARNING;
+  const checkedAtLabel = authStatus.checkedAt > 0
+    ? new Date(authStatus.checkedAt).toLocaleTimeString()
+    : "not checked yet";
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.BORDER_ACTIVE}
+      flexDirection="column"
+      paddingX={2}
+      paddingY={1}
+      marginTop={1}
+      width="100%"
+    >
+      <Text color={theme.ACCENT} bold>
+        Auth and subscription guidance
+      </Text>
+      <Text color={theme.MUTED}>Current backend: {provider.label}</Text>
+      <Text color={theme.MUTED}>Current preference: {formatAuthPreferenceLabel(authPreference)}</Text>
+      <Text color={theme.INFO}>Backend auth: {provider.authLabel}</Text>
+      <Text color={authStateColor}>Runtime auth state: {authStateLabel}</Text>
+      <Text color={theme.DIM}>Last checked: {checkedAtLabel}</Text>
+      <Text color={theme.DIM}>Probe summary: {authStatus.rawSummary || "No probe output yet"}</Text>
+      <Text color={theme.TEXT}>
+        This UI securely bridges to the Codexa neural network. It does not collect or store your ChatGPT credentials.
+      </Text>
+      <Text color={theme.TEXT}>{provider.statusMessage}</Text>
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={theme.INFO}>Commands:</Text>
+        <Text color={theme.TEXT}>  /login        guided ChatGPT sign-in steps</Text>
+        <Text color={theme.TEXT}>  /logout       guided sign-out steps</Text>
+        <Text color={theme.TEXT}>  /auth status  refresh Codexa authentication</Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {AUTH_PREFERENCES.map((item, index) => (
+          <Text key={item.id} color={item.id === authPreference ? theme.SUCCESS : theme.TEXT}>
+            {index + 1}. {item.label} {item.id === authPreference ? "✓" : ""}
+          </Text>
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={theme.DIM}>
+          Press 1-{AUTH_PREFERENCES.length} to change preference, R to refresh status, Esc to close.
+        </Text>
+      </Box>
+      {authStatusBusy && (
+        <Box marginTop={1}>
+          <Text color={theme.WARNING}>Checking auth status...</Text>
+        </Box>
+      )}
+      {authStatus.recommendedAction && (
+        <Box marginTop={1}>
+          <Text color={theme.DIM}>Next step: {authStatus.recommendedAction}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/ui/BackendPicker.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { AVAILABLE_BACKENDS } from "../config/settings.js";
+import { FOCUS_IDS } from "./focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface BackendPickerProps {
+  currentBackend: string;
+  onSelect: (backend: string) => void;
+  onCancel: () => void;
+}
+
+export function BackendPicker({ currentBackend, onSelect, onCancel }: BackendPickerProps) {
+  const items = AVAILABLE_BACKENDS.map((backend) => ({
+    label: backend.id === currentBackend ? `${backend.label}  ✓` : `${backend.label}  ${backend.id}`,
+    value: backend.id,
+  }));
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.backendPicker}
+      title="Select backend"
+      subtitle="Codexa is connected and ready. Native OpenAI is reserved for a later implementation pass."
+      items={items}
+      onSelect={onSelect}
+      onCancel={onCancel}
+    />
+  );
+}