opencode-account-manager 0.6.3 → 0.6.5

package/src/tui/components/McpServerList.tsx

@@ -1,67 +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>{truncate(server.id, 18)}</Text>
-          </Box>
-          <Box width={10}>
-            {server.enabled ? (
-              <Text>enabled</Text>
-            ) : (
-              <Text dimColor>disabled</Text>
-            )}
-          </Box>
-          <Box width={8}>
-            {server.hasEnvVars ? (
-              <Text>{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;
-}
+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>{truncate(server.id, 18)}</Text>
+          </Box>
+          <Box width={10}>
+            {server.enabled ? (
+              <Text>enabled</Text>
+            ) : (
+              <Text dimColor>disabled</Text>
+            )}
+          </Box>
+          <Box width={8}>
+            {server.hasEnvVars ? (
+              <Text>{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

@@ -1,19 +1,19 @@
 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";
+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;
@@ -23,21 +23,21 @@ interface MenuItem {
   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" },
-];
+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;
@@ -46,30 +46,30 @@ interface MenuBarProps {
 }
 
 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");
-    }
-  });
+  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;
@@ -78,17 +78,17 @@ export function MenuBar({ onSelect, selectMode = false, selectedCount = 0 }: Men
   });
 
   return (
-    <Box flexDirection="column">
-      {selectMode && (
-        <Box marginBottom={1} paddingX={1}>
-          <Text dimColor bold>
-            SELECT MODE - {selectedCount} selected | ↑↓ navigate | SPACE toggle | ←→ switch section
-          </Text>
-        </Box>
-      )}
+    <Box flexDirection="column">
+      {selectMode && (
+        <Box marginBottom={1} paddingX={1}>
+          <Text dimColor bold>
+            SELECT MODE - {selectedCount} selected | ↑↓ navigate | SPACE toggle | ←→ switch section
+          </Text>
+        </Box>
+      )}
       <Box
         borderStyle="single"
-        borderColor={selectMode ? "white" : "gray"}
+        borderColor={selectMode ? "white" : "gray"}
         paddingX={1}
         justifyContent="space-between"
       >

package/src/tui/components/PasswordInput.tsx

@@ -1,159 +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>
-  );
-}
+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="gray"
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold>{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>
+  );
+}