opencode-account-manager 0.4.1

package/src/tui/components/ImportModal.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import * as fs from "fs";
+import * as path from "path";
+import { FileBrowser } from "./FileBrowser";
+import { PasswordInput } from "./PasswordInput";
+import {
+  Account,
+  EncryptedExportFile,
+  PortableExportFile,
+  isEncryptedExportFile,
+  isPortableExportFile,
+} from "../../core/types";
+import { decrypt } from "../../core/crypto";
+import { readJsonFile } from "../../core/utils";
+import { updateLastImportFolder, getLastImportFolder } from "../../core/config-store";
+
+interface ImportModalProps {
+  existingAccounts: Account[];
+  onComplete: (accounts: Account[], newCount: number, overwrittenCount: number) => void;
+  onCancel: () => void;
+}
+
+type ImportStep = "file" | "password" | "preview" | "importing" | "success" | "error";
+
+interface ImportPreviewItem {
+  email: string;
+  exists: boolean;
+}
+
+export function ImportModal({ existingAccounts, onComplete, onCancel }: ImportModalProps) {
+  const [step, setStep] = useState<ImportStep>("file");
+  const [selectedFile, setSelectedFile] = useState<string>("");
+  const [isEncrypted, setIsEncrypted] = useState<boolean>(false);
+  const [importedAccounts, setImportedAccounts] = useState<Account[]>([]);
+  const [previewItems, setPreviewItems] = useState<ImportPreviewItem[]>([]);
+  const [error, setError] = useState<string>("");
+  const [result, setResult] = useState({ newCount: 0, overwrittenCount: 0 });
+
+  // Check if account exists in current accounts
+  const existsInCurrent = (email: string): boolean => {
+    return existingAccounts.some(
+      acc => acc.email.toLowerCase() === email.toLowerCase()
+    );
+  };
+
+  // Handle file selection
+  const handleFileSelect = (filePath: string) => {
+    setSelectedFile(filePath);
+    updateLastImportFolder(path.dirname(filePath));
+
+    try {
+      const data = readJsonFile(filePath);
+
+      if (isEncryptedExportFile(data)) {
+        setIsEncrypted(true);
+        setStep("password");
+      } else if (isPortableExportFile(data)) {
+        setIsEncrypted(false);
+        processAccounts(data.accounts);
+      } else if (Array.isArray(data)) {
+        // Raw array of accounts
+        setIsEncrypted(false);
+        processAccounts(data);
+      } else {
+        throw new Error("Unknown file format");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to read file");
+      setStep("error");
+    }
+  };
+
+  // Handle password for encrypted files
+  const handlePasswordSubmit = (password: string) => {
+    try {
+      const data = readJsonFile<EncryptedExportFile>(selectedFile);
+      
+      const decrypted = decrypt<{ accounts: Account[] }>(
+        {
+          salt: data.salt,
+          iv: data.iv,
+          authTag: data.authTag,
+          data: data.data,
+        },
+        password
+      );
+
+      processAccounts(decrypted.accounts);
+    } catch (err) {
+      setError("Invalid password or corrupted file");
+      setStep("error");
+    }
+  };
+
+  // Process accounts and show preview
+  const processAccounts = (accounts: Account[]) => {
+    // Filter valid accounts
+    const validAccounts = accounts.filter(
+      acc => acc.email && acc.email.includes("@")
+    );
+
+    if (validAccounts.length === 0) {
+      setError("No valid accounts found in file");
+      setStep("error");
+      return;
+    }
+
+    setImportedAccounts(validAccounts);
+
+    // Build preview
+    const preview: ImportPreviewItem[] = validAccounts.map(acc => ({
+      email: acc.email,
+      exists: existsInCurrent(acc.email),
+    }));
+
+    setPreviewItems(preview);
+    setStep("preview");
+  };
+
+  // Handle import confirmation
+  useInput((input, key) => {
+    if (step === "preview") {
+      if (key.return) {
+        doImport();
+      } else if (key.escape) {
+        onCancel();
+      }
+    } else if (step === "success" || step === "error") {
+      if (key.return || key.escape) {
+        if (step === "success") {
+          onComplete(importedAccounts, result.newCount, result.overwrittenCount);
+        } else {
+          onCancel();
+        }
+      }
+    }
+  });
+
+  // Do the actual import
+  const doImport = () => {
+    setStep("importing");
+
+    const newCount = previewItems.filter(p => !p.exists).length;
+    const overwrittenCount = previewItems.filter(p => p.exists).length;
+
+    setResult({ newCount, overwrittenCount });
+    setStep("success");
+
+    // Auto-complete after 2 seconds
+    setTimeout(() => {
+      onComplete(importedAccounts, newCount, overwrittenCount);
+    }, 2000);
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* File Selection */}
+      {step === "file" && (
+        <FileBrowser
+          mode="file"
+          initialPath={getLastImportFolder()}
+          extensions={[".ocam", ".json"]}
+          title="Select file to import"
+          onSelect={handleFileSelect}
+          onCancel={onCancel}
+        />
+      )}
+
+      {/* Password Input */}
+      {step === "password" && (
+        <PasswordInput
+          mode="single"
+          title="Enter Password"
+          subtitle={path.basename(selectedFile)}
+          onSubmit={handlePasswordSubmit}
+          onCancel={onCancel}
+        />
+      )}
+
+      {/* Preview */}
+      {step === "preview" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="cyan"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="cyan">IMPORT PREVIEW</Text>
+          <Box marginY={1}>
+            <Text>
+              Found {importedAccounts.length} accounts in{" "}
+              <Text color="cyan">{path.basename(selectedFile)}</Text>
+              {isEncrypted && <Text color="green"> (encrypted)</Text>}
+            </Text>
+          </Box>
+
+          {/* Account list */}
+          <Box flexDirection="column">
+            {previewItems.slice(0, 8).map((item, index) => (
+              <Box key={item.email}>
+                <Text>• {item.email}</Text>
+                {item.exists && (
+                  <Text color="yellow"> ⚠️ exists (will overwrite)</Text>
+                )}
+              </Box>
+            ))}
+            {previewItems.length > 8 && (
+              <Text dimColor>... and {previewItems.length - 8} more</Text>
+            )}
+          </Box>
+
+          {/* Summary */}
+          <Box marginTop={1}>
+            <Text>
+              <Text color="green">{previewItems.filter(p => !p.exists).length} new</Text>
+              {" | "}
+              <Text color="yellow">{previewItems.filter(p => p.exists).length} will overwrite</Text>
+            </Text>
+          </Box>
+
+          <Box marginTop={1}>
+            <Text dimColor>[Enter] Import  [Esc] Cancel</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Importing */}
+      {step === "importing" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="cyan"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text color="cyan">Importing...</Text>
+        </Box>
+      )}
+
+      {/* Success */}
+      {step === "success" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="green"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="green">✓ Import Successful!</Text>
+          <Box marginTop={1}>
+            <Text>
+              Imported {importedAccounts.length} accounts
+              {" ("}
+              <Text color="green">{result.newCount} new</Text>
+              {", "}
+              <Text color="yellow">{result.overwrittenCount} overwritten</Text>
+              {")"}
+            </Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>[Enter] Close</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Error */}
+      {step === "error" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="red"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="red">✗ Import Failed</Text>
+          <Box marginTop={1}>
+            <Text color="red">{error}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>[Enter] Try again  [Esc] Cancel</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/McpServerList.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { McpServerInfo } from "../../core/opencode-config";
+
+interface McpServerListProps {
+  servers: McpServerInfo[];
+}
+
+export function McpServerList({ servers }: McpServerListProps) {
+  if (servers.length === 0) {
+    return (
+      <Box paddingX={1}>
+        <Text dimColor>No MCP servers configured</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Header */}
+      <Box>
+        <Box width={20}>
+          <Text bold dimColor>SERVER</Text>
+        </Box>
+        <Box width={10}>
+          <Text bold dimColor>STATUS</Text>
+        </Box>
+        <Box width={8}>
+          <Text bold dimColor>ENV</Text>
+        </Box>
+        <Box>
+          <Text bold dimColor>COMMAND</Text>
+        </Box>
+      </Box>
+
+      {/* Rows */}
+      {servers.map((server) => (
+        <Box key={server.id}>
+          <Box width={20}>
+            <Text color="cyan">{truncate(server.id, 18)}</Text>
+          </Box>
+          <Box width={10}>
+            {server.enabled ? (
+              <Text color="green">enabled</Text>
+            ) : (
+              <Text color="red">disabled</Text>
+            )}
+          </Box>
+          <Box width={8}>
+            {server.hasEnvVars ? (
+              <Text color="yellow">{server.envVarCount}</Text>
+            ) : (
+              <Text dimColor>-</Text>
+            )}
+          </Box>
+          <Box>
+            <Text dimColor>{truncate(server.command, 40)}</Text>
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function truncate(str: string, len: number): string {
+  return str.length > len ? str.slice(0, len - 1) + "…" : str;
+}

package/src/tui/components/Menu.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+
+export type MenuAction =
+  | "refresh"
+  | "export"
+  | "export-selected"
+  | "import-file"
+  | "import-am"
+  | "toggle-select-mode"
+  | "select-all"
+  | "select-none"
+  | "enable-selected"
+  | "disable-selected"
+  | "delete-selected"
+  | "quit";
+
+interface MenuItem {
+  label: string;
+  key: string;
+  action: MenuAction;
+  selectModeOnly?: boolean;
+  normalModeOnly?: boolean;
+}
+
+const MENU_ITEMS: MenuItem[] = [
+  { label: "Refresh", key: "R", action: "refresh" },
+  { label: "Export", key: "E", action: "export", normalModeOnly: true },
+  { label: "Import", key: "I", action: "import-file", normalModeOnly: true },
+  { label: "AM Import", key: "A", action: "import-am", normalModeOnly: true },
+  { label: "Select Mode", key: "S", action: "toggle-select-mode", normalModeOnly: true },
+  { label: "Exit Select", key: "S", action: "toggle-select-mode", selectModeOnly: true },
+  { label: "All", key: "A", action: "select-all", selectModeOnly: true },
+  { label: "None", key: "N", action: "select-none", selectModeOnly: true },
+  { label: "Enable", key: "E", action: "enable-selected", selectModeOnly: true },
+  { label: "Disable", key: "D", action: "disable-selected", selectModeOnly: true },
+  { label: "Export", key: "X", action: "export-selected", selectModeOnly: true },
+  { label: "Delete", key: "DEL", action: "delete-selected", selectModeOnly: true },
+  { label: "Quit", key: "Q", action: "quit" },
+];
+
+interface MenuBarProps {
+  onSelect: (action: MenuAction) => void;
+  selectMode?: boolean;
+  selectedCount?: number;
+}
+
+export function MenuBar({ onSelect, selectMode = false, selectedCount = 0 }: MenuBarProps) {
+  useInput((input, key) => {
+    const lower = input.toLowerCase();
+    
+    if (selectMode) {
+      // Select mode keys
+      if (lower === "s" || key.escape) onSelect("toggle-select-mode");
+      if (lower === "a") onSelect("select-all");
+      if (lower === "n") onSelect("select-none");
+      if (lower === "e") onSelect("enable-selected");
+      if (lower === "d") onSelect("disable-selected");
+      if (lower === "x") onSelect("export-selected");
+      if (key.delete || lower === "backspace") onSelect("delete-selected");
+      if (lower === "r") onSelect("refresh");
+      if (lower === "q") onSelect("quit");
+    } else {
+      // Normal mode keys
+      if (lower === "r") onSelect("refresh");
+      if (lower === "e") onSelect("export");
+      if (lower === "i") onSelect("import-file");
+      if (lower === "a") onSelect("import-am");
+      if (lower === "s") onSelect("toggle-select-mode");
+      if (lower === "q" || key.escape) onSelect("quit");
+    }
+  });
+
+  const visibleItems = MENU_ITEMS.filter(item => {
+    if (selectMode && item.normalModeOnly) return false;
+    if (!selectMode && item.selectModeOnly) return false;
+    return true;
+  });
+
+  return (
+    <Box flexDirection="column">
+      {selectMode && (
+        <Box marginBottom={1} paddingX={1}>
+          <Text color="yellow" bold>
+            SELECT MODE - {selectedCount} selected | ↑↓ navigate | SPACE toggle | ENTER confirm
+          </Text>
+        </Box>
+      )}
+      <Box
+        borderStyle="single"
+        borderColor={selectMode ? "yellow" : "gray"}
+        paddingX={1}
+        justifyContent="space-between"
+      >
+        {visibleItems.map((item) => (
+          <Text key={item.action + item.key} dimColor>
+            [{item.key}] {item.label}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/PasswordInput.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface PasswordInputProps {
+  mode: "single" | "confirm";
+  title?: string;
+  subtitle?: string;
+  warning?: string;
+  onSubmit: (password: string) => void;
+  onCancel: () => void;
+}
+
+export function PasswordInput({
+  mode,
+  title = "Enter Password",
+  subtitle,
+  warning,
+  onSubmit,
+  onCancel,
+}: PasswordInputProps) {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [activeField, setActiveField] = useState<"password" | "confirm">("password");
+  const [error, setError] = useState<string | null>(null);
+
+  useInput((input, key) => {
+    // Handle escape
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    // Handle tab to switch fields (in confirm mode)
+    if (key.tab && mode === "confirm") {
+      setActiveField(prev => prev === "password" ? "confirm" : "password");
+      return;
+    }
+
+    // Handle enter
+    if (key.return) {
+      if (mode === "confirm" && activeField === "password") {
+        // Move to confirm field
+        setActiveField("confirm");
+        return;
+      }
+
+      // Validate
+      if (password.length === 0) {
+        setError("Password cannot be empty");
+        return;
+      }
+
+      if (mode === "confirm" && password !== confirmPassword) {
+        setError("Passwords do not match");
+        return;
+      }
+
+      onSubmit(password);
+      return;
+    }
+
+    // Handle backspace
+    if (key.backspace || key.delete) {
+      if (activeField === "password") {
+        setPassword(prev => prev.slice(0, -1));
+      } else {
+        setConfirmPassword(prev => prev.slice(0, -1));
+      }
+      setError(null);
+      return;
+    }
+
+    // Handle regular input (printable characters)
+    if (input && input.length === 1 && !key.ctrl && !key.meta) {
+      if (activeField === "password") {
+        setPassword(prev => prev + input);
+      } else {
+        setConfirmPassword(prev => prev + input);
+      }
+      setError(null);
+    }
+  });
+
+  const maskPassword = (pwd: string): string => {
+    return "•".repeat(pwd.length);
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">{title}</Text>
+        {subtitle && <Text dimColor> - {subtitle}</Text>}
+      </Box>
+
+      {/* Password field */}
+      <Box>
+        <Text dimColor>Password: </Text>
+        <Box
+          borderStyle={activeField === "password" ? "single" : undefined}
+          borderColor="yellow"
+          paddingX={1}
+          minWidth={30}
+        >
+          <Text color={activeField === "password" ? "white" : "gray"}>
+            {maskPassword(password)}
+            {activeField === "password" && <Text color="yellow">▌</Text>}
+          </Text>
+        </Box>
+      </Box>
+
+      {/* Confirm field (only in confirm mode) */}
+      {mode === "confirm" && (
+        <Box marginTop={1}>
+          <Text dimColor>Confirm:  </Text>
+          <Box
+            borderStyle={activeField === "confirm" ? "single" : undefined}
+            borderColor="yellow"
+            paddingX={1}
+            minWidth={30}
+          >
+            <Text color={activeField === "confirm" ? "white" : "gray"}>
+              {maskPassword(confirmPassword)}
+              {activeField === "confirm" && <Text color="yellow">▌</Text>}
+            </Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Warning */}
+      {warning && (
+        <Box marginTop={1}>
+          <Text color="yellow">⚠️  {warning}</Text>
+        </Box>
+      )}
+
+      {/* Error */}
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">✗ {error}</Text>
+        </Box>
+      )}
+
+      {/* Help */}
+      <Box marginTop={1}>
+        <Text dimColor>
+          {mode === "confirm" ? "[Tab] Switch field  " : ""}
+          [Enter] Confirm  [Esc] Cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/ProviderList.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { ProviderInfo } from "../../core/opencode-config";
+
+interface ProviderListProps {
+  providers: ProviderInfo[];
+}
+
+export function ProviderList({ providers }: ProviderListProps) {
+  if (providers.length === 0) {
+    return (
+      <Box paddingX={1}>
+        <Text dimColor>No providers configured</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Header */}
+      <Box>
+        <Box width={20}>
+          <Text bold dimColor>PROVIDER</Text>
+        </Box>
+        <Box width={10}>
+          <Text bold dimColor>MODELS</Text>
+        </Box>
+        <Box width={10}>
+          <Text bold dimColor>TYPE</Text>
+        </Box>
+        <Box>
+          <Text bold dimColor>BASE URL</Text>
+        </Box>
+      </Box>
+
+      {/* Rows */}
+      {providers.map((provider) => (
+        <Box key={provider.id}>
+          <Box width={20}>
+            <Text color="cyan">{truncate(provider.name || provider.id, 18)}</Text>
+          </Box>
+          <Box width={10}>
+            <Text color="yellow">{provider.modelCount}</Text>
+          </Box>
+          <Box width={10}>
+            <Text color={provider.type === "builtin" ? "green" : "magenta"}>
+              {provider.type}
+            </Text>
+          </Box>
+          <Box>
+            <Text dimColor>{provider.baseURL || "-"}</Text>
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function truncate(str: string, len: number): string {
+  return str.length > len ? str.slice(0, len - 1) + "…" : str;
+}