opencode-account-manager 0.4.1

package/src/tui/components/ExportModal.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import * as path from "path";
+import { FileBrowser } from "./FileBrowser";
+import { PasswordInput } from "./PasswordInput";
+import {
+  Account,
+  ExportFormat,
+  EncryptedExportFile,
+  PortableExportFile,
+} from "../../core/types";
+import { encrypt } from "../../core/crypto";
+import { writeJsonFile } from "../../core/utils";
+import {
+  updateLastExportFolder,
+  getLastExportFolder,
+} from "../../core/config-store";
+
+interface ExportModalProps {
+  accounts: Account[];
+  onComplete: (filePath: string) => void;
+  onCancel: () => void;
+}
+
+type ExportStep = "format" | "folder" | "password" | "exporting" | "success" | "error";
+
+export function ExportModal({ accounts, onComplete, onCancel }: ExportModalProps) {
+  const [step, setStep] = useState<ExportStep>("format");
+  const [format, setFormat] = useState<ExportFormat>("encrypted");
+  const [folder, setFolder] = useState<string>("");
+  const [exportedPath, setExportedPath] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  // Generate filename with timestamp
+  const generateFilename = (ext: string): string => {
+    const date = new Date();
+    const dateStr = date.toISOString().split("T")[0]; // YYYY-MM-DD
+    return `opencode-accounts-${dateStr}${ext}`;
+  };
+
+  // Handle format selection
+  useInput((input, key) => {
+    if (step !== "format") return;
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (input === "1") {
+      setFormat("encrypted");
+      setStep("folder");
+    } else if (input === "2") {
+      setFormat("plain");
+      setStep("folder");
+    }
+  });
+
+  // Handle folder selection
+  const handleFolderSelect = (selectedFolder: string) => {
+    setFolder(selectedFolder);
+    updateLastExportFolder(selectedFolder);
+
+    if (format === "encrypted") {
+      setStep("password");
+    } else {
+      // Plain export - no password needed
+      doExport(selectedFolder, undefined);
+    }
+  };
+
+  // Handle password submission
+  const handlePasswordSubmit = (password: string) => {
+    doExport(folder, password);
+  };
+
+  // Do the actual export
+  const doExport = (targetFolder: string, password?: string) => {
+    setStep("exporting");
+
+    try {
+      const ext = format === "encrypted" ? ".ocam" : ".json";
+      const filename = generateFilename(ext);
+      const filePath = path.join(targetFolder, filename);
+
+      if (format === "encrypted" && password) {
+        // Create encrypted export
+        const payload = {
+          version: 1,
+          accounts: accounts,
+          exportedAt: Date.now(),
+        };
+
+        const encrypted = encrypt(payload, password);
+
+        const encryptedFile: EncryptedExportFile = {
+          version: 1,
+          format: "encrypted",
+          algorithm: "aes-256-gcm",
+          salt: encrypted.salt,
+          iv: encrypted.iv,
+          authTag: encrypted.authTag,
+          data: encrypted.data,
+          exportedAt: Date.now(),
+          accountCount: accounts.length,
+          exportedFrom: "opencode-account-manager",
+        };
+
+        writeJsonFile(filePath, encryptedFile);
+      } else {
+        // Plain export
+        const plainFile: PortableExportFile = {
+          version: 1,
+          exportedAt: Date.now(),
+          exportedFrom: "opencode-account-manager",
+          accounts: accounts,
+        };
+
+        writeJsonFile(filePath, plainFile);
+      }
+
+      setExportedPath(filePath);
+      setStep("success");
+
+      // Auto-complete after 2 seconds
+      setTimeout(() => {
+        onComplete(filePath);
+      }, 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setStep("error");
+    }
+  };
+
+  // Handle success/error dismissal
+  useInput((input, key) => {
+    if (step === "success" || step === "error") {
+      if (key.return || key.escape) {
+        if (step === "success") {
+          onComplete(exportedPath);
+        } else {
+          onCancel();
+        }
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {/* Format Selection */}
+      {step === "format" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="cyan"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="cyan">EXPORT {accounts.length} ACCOUNTS</Text>
+          <Box marginY={1} flexDirection="column">
+            <Text>Select export format:</Text>
+            <Box marginTop={1}>
+              <Text color="green">[1] Encrypted (.ocam)</Text>
+              <Text dimColor> - Password protected, recommended</Text>
+            </Box>
+            <Box>
+              <Text color="yellow">[2] Plain JSON</Text>
+              <Text dimColor> - No encryption (tokens visible!)</Text>
+            </Box>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>[1-2] Select  [Esc] Cancel</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Folder Selection */}
+      {step === "folder" && (
+        <FileBrowser
+          mode="folder"
+          initialPath={getLastExportFolder()}
+          title={`Export to folder (${format === "encrypted" ? ".ocam" : ".json"})`}
+          onSelect={handleFolderSelect}
+          onCancel={onCancel}
+        />
+      )}
+
+      {/* Password Input */}
+      {step === "password" && (
+        <PasswordInput
+          mode="confirm"
+          title="Set Export Password"
+          subtitle={`${accounts.length} accounts`}
+          warning="Remember this password! Without it, you cannot recover your accounts."
+          onSubmit={handlePasswordSubmit}
+          onCancel={() => setStep("folder")}
+        />
+      )}
+
+      {/* Exporting */}
+      {step === "exporting" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="cyan"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text color="cyan">Exporting...</Text>
+        </Box>
+      )}
+
+      {/* Success */}
+      {step === "success" && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="green"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="green">✓ Export Successful!</Text>
+          <Box marginTop={1}>
+            <Text>Exported {accounts.length} accounts to:</Text>
+          </Box>
+          <Box>
+            <Text color="cyan">{exportedPath}</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">✗ Export Failed</Text>
+          <Box marginTop={1}>
+            <Text color="red">{error}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>[Enter] Close</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/FileBrowser.tsx

@@ -0,0 +1,393 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import * as fs from "fs";
+import * as path from "path";
+import { getQuickLocations, QuickLocation } from "../../core/config-store";
+
+interface FileBrowserProps {
+  mode: "folder" | "file";
+  initialPath?: string;
+  extensions?: string[]; // e.g., [".ocam", ".json"]
+  title?: string;
+  onSelect: (selectedPath: string) => void;
+  onCancel: () => void;
+}
+
+interface FileItem {
+  name: string;
+  isDirectory: boolean;
+  path: string;
+  size?: number;
+  mtime?: Date;
+}
+
+type ViewMode = "quick" | "browse" | "input";
+
+export function FileBrowser({
+  mode,
+  initialPath,
+  extensions = [],
+  title,
+  onSelect,
+  onCancel,
+}: FileBrowserProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath || process.cwd());
+  const [items, setItems] = useState<FileItem[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [viewMode, setViewMode] = useState<ViewMode>("quick");
+  const [inputPath, setInputPath] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [quickLocations, setQuickLocations] = useState<QuickLocation[]>([]);
+
+  // Load quick locations on mount
+  useEffect(() => {
+    setQuickLocations(getQuickLocations());
+  }, []);
+
+  // Load directory contents when path changes
+  useEffect(() => {
+    if (viewMode !== "browse") return;
+    
+    try {
+      if (!fs.existsSync(currentPath)) {
+        setError(`Path not found: ${currentPath}`);
+        setItems([]);
+        return;
+      }
+
+      const stat = fs.statSync(currentPath);
+      if (!stat.isDirectory()) {
+        setError("Not a directory");
+        setItems([]);
+        return;
+      }
+
+      const entries = fs.readdirSync(currentPath, { withFileTypes: true });
+      const fileItems: FileItem[] = [];
+
+      // Add parent directory
+      const parentPath = path.dirname(currentPath);
+      if (parentPath !== currentPath) {
+        fileItems.push({
+          name: "..",
+          isDirectory: true,
+          path: parentPath,
+        });
+      }
+
+      // Add directories and files
+      for (const entry of entries) {
+        const fullPath = path.join(currentPath, entry.name);
+        const isDir = entry.isDirectory();
+
+        // Skip hidden files/folders (starting with .)
+        if (entry.name.startsWith(".")) continue;
+
+        // In file mode, filter by extension
+        if (mode === "file" && !isDir) {
+          if (extensions.length > 0) {
+            const ext = path.extname(entry.name).toLowerCase();
+            if (!extensions.includes(ext)) continue;
+          }
+        }
+
+        // In folder mode, only show directories
+        if (mode === "folder" && !isDir) continue;
+
+        try {
+          const stat = fs.statSync(fullPath);
+          fileItems.push({
+            name: entry.name,
+            isDirectory: isDir,
+            path: fullPath,
+            size: stat.size,
+            mtime: stat.mtime,
+          });
+        } catch {
+          // Skip files we can't stat
+        }
+      }
+
+      // Sort: directories first, then files
+      fileItems.sort((a, b) => {
+        if (a.name === "..") return -1;
+        if (b.name === "..") return 1;
+        if (a.isDirectory && !b.isDirectory) return -1;
+        if (!a.isDirectory && b.isDirectory) return 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      setItems(fileItems);
+      setSelectedIndex(0);
+      setError(null);
+    } catch (err) {
+      setError(`Error reading directory: ${err}`);
+      setItems([]);
+    }
+  }, [currentPath, viewMode, mode, extensions]);
+
+  useInput((input, key) => {
+    // Handle escape
+    if (key.escape) {
+      if (viewMode === "input") {
+        setViewMode("quick");
+        setInputPath("");
+      } else {
+        onCancel();
+      }
+      return;
+    }
+
+    // Handle input mode
+    if (viewMode === "input") {
+      if (key.return) {
+        // Try to navigate to input path
+        const trimmed = inputPath.trim();
+        if (trimmed) {
+          if (fs.existsSync(trimmed)) {
+            const stat = fs.statSync(trimmed);
+            if (mode === "folder" && stat.isDirectory()) {
+              onSelect(trimmed);
+            } else if (mode === "file" && stat.isFile()) {
+              onSelect(trimmed);
+            } else if (stat.isDirectory()) {
+              setCurrentPath(trimmed);
+              setViewMode("browse");
+            } else {
+              setError("Invalid path for this mode");
+            }
+          } else {
+            setError("Path does not exist");
+          }
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setInputPath(prev => prev.slice(0, -1));
+        return;
+      }
+
+      if (input && !key.ctrl && !key.meta) {
+        setInputPath(prev => prev + input);
+        return;
+      }
+      return;
+    }
+
+    // Handle quick location mode
+    if (viewMode === "quick") {
+      // Number keys for quick locations
+      const num = parseInt(input, 10);
+      if (!isNaN(num) && num >= 1 && num <= quickLocations.length) {
+        const loc = quickLocations[num - 1];
+        if (mode === "folder") {
+          onSelect(loc.path);
+        } else {
+          setCurrentPath(loc.path);
+          setViewMode("browse");
+        }
+        return;
+      }
+
+      // 'p' for paste path
+      if (input.toLowerCase() === "p") {
+        setViewMode("input");
+        return;
+      }
+
+      // 'b' for browse
+      if (input.toLowerCase() === "b") {
+        setViewMode("browse");
+        return;
+      }
+
+      // Arrow keys to navigate quick locations
+      if (key.upArrow) {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+      }
+      if (key.downArrow) {
+        setSelectedIndex(prev => Math.min(quickLocations.length - 1, prev + 1));
+      }
+      if (key.return) {
+        const loc = quickLocations[selectedIndex];
+        if (loc) {
+          if (mode === "folder") {
+            onSelect(loc.path);
+          } else {
+            setCurrentPath(loc.path);
+            setViewMode("browse");
+          }
+        }
+      }
+      return;
+    }
+
+    // Handle browse mode
+    if (viewMode === "browse") {
+      if (key.upArrow) {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+      }
+      if (key.downArrow) {
+        setSelectedIndex(prev => Math.min(items.length - 1, prev + 1));
+      }
+      if (key.return) {
+        const item = items[selectedIndex];
+        if (!item) return;
+
+        if (item.isDirectory) {
+          if (mode === "folder") {
+            // In folder mode, enter selects current folder
+            // Navigate into with right arrow
+            onSelect(item.path === path.dirname(currentPath) ? currentPath : item.path);
+          } else {
+            // In file mode, navigate into directory
+            setCurrentPath(item.path);
+          }
+        } else {
+          // Select file
+          onSelect(item.path);
+        }
+      }
+      if (key.rightArrow) {
+        const item = items[selectedIndex];
+        if (item?.isDirectory && item.name !== "..") {
+          setCurrentPath(item.path);
+        }
+      }
+      if (key.leftArrow) {
+        const parent = path.dirname(currentPath);
+        if (parent !== currentPath) {
+          setCurrentPath(parent);
+        }
+      }
+
+      // 'p' for paste path
+      if (input.toLowerCase() === "p") {
+        setViewMode("input");
+        return;
+      }
+
+      // 'q' for quick locations
+      if (input.toLowerCase() === "q") {
+        setViewMode("quick");
+        return;
+      }
+    }
+  });
+
+  const formatSize = (bytes?: number): string => {
+    if (bytes === undefined) return "";
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}K`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+  };
+
+  const truncatePath = (p: string, maxLen: number): string => {
+    if (p.length <= maxLen) return p;
+    return "..." + p.slice(-(maxLen - 3));
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          {title || (mode === "folder" ? "Select Folder" : "Select File")}
+        </Text>
+      </Box>
+
+      {/* Current path */}
+      <Box marginBottom={1}>
+        <Text dimColor>Path: </Text>
+        <Text>{truncatePath(currentPath, 50)}</Text>
+      </Box>
+
+      {/* Error */}
+      {error && (
+        <Box marginBottom={1}>
+          <Text color="red">✗ {error}</Text>
+        </Box>
+      )}
+
+      {/* Quick Locations View */}
+      {viewMode === "quick" && (
+        <Box flexDirection="column">
+          <Text dimColor>Quick Locations:</Text>
+          {quickLocations.map((loc, index) => (
+            <Box key={loc.path}>
+              <Text color={index === selectedIndex ? "yellow" : "white"}>
+                {index === selectedIndex ? "> " : "  "}
+                [{index + 1}] {loc.label}
+              </Text>
+              <Text dimColor> ({truncatePath(loc.path, 30)})</Text>
+            </Box>
+          ))}
+          <Box marginTop={1}>
+            <Text dimColor>[1-{quickLocations.length}] Select  [B] Browse  [P] Paste path  [Esc] Cancel</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Browse View */}
+      {viewMode === "browse" && (
+        <Box flexDirection="column">
+          <Box flexDirection="column" height={10}>
+            {items.slice(
+              Math.max(0, selectedIndex - 4),
+              Math.max(10, selectedIndex + 6)
+            ).map((item, displayIndex) => {
+              const actualIndex = Math.max(0, selectedIndex - 4) + displayIndex;
+              const isSelected = actualIndex === selectedIndex;
+              
+              return (
+                <Box key={item.path}>
+                  <Text color={isSelected ? "yellow" : "white"}>
+                    {isSelected ? "> " : "  "}
+                    {item.isDirectory ? "📁 " : "📄 "}
+                    {item.name}
+                  </Text>
+                  {!item.isDirectory && (
+                    <Text dimColor> ({formatSize(item.size)})</Text>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>
+              [↑↓] Navigate  [Enter] Select  [←→] Navigate dirs  [Q] Quick  [P] Paste  [Esc] Cancel
+            </Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Input View */}
+      {viewMode === "input" && (
+        <Box flexDirection="column">
+          <Text dimColor>Paste or type path:</Text>
+          <Box
+            borderStyle="single"
+            borderColor="yellow"
+            paddingX={1}
+            marginY={1}
+          >
+            <Text>
+              {inputPath}
+              <Text color="yellow">▌</Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text dimColor>[Enter] Confirm  [Esc] Back</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/Header.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface HeaderProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export function Header({
+  title = "OpenCode Account Manager",
+  subtitle,
+}: HeaderProps) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text bold color="cyan">
+          * {title}
+        </Text>
+        {subtitle && <Text dimColor> - {subtitle}</Text>}
+      </Box>
+      <Text dimColor>
+        ────────────────────────────────────────────────────────────────
+      </Text>
+    </Box>
+  );
+}