opencode-account-manager 0.6.3 → 0.6.5

package/src/tui/components/AccountList.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { StatusBadge } from "./StatusBadge";
-import { Account } from "../../core/types";
+import { StatusBadge } from "./StatusBadge";
+import { HealthBadge } from "./HealthBadge";
+import { Account, AccountHealthResult } from "../../core/types";
+import { normalizeHealthKey } from "../../core/config-store";
 
-interface AccountRowProps {
-  account: Account;
-  isSelected?: boolean;
-  isChecked?: boolean;
-  showCheckbox?: boolean;
-}
+interface AccountRowProps {
+  account: Account;
+  isSelected?: boolean;
+  isChecked?: boolean;
+  showCheckbox?: boolean;
+  healthResult?: AccountHealthResult;
+}
 
 function formatDuration(ms: number): string {
   if (ms <= 0) return "-";
@@ -20,98 +23,109 @@ function formatDuration(ms: number): string {
   return `${minutes}m`;
 }
 
-function getAccountStatus(account: Account): {
-  status: "available" | "limited" | "disabled";
-  resetIn: string;
-  limitDetails: string[];
-} {
-  if (account.enabled === false) {
-    return { status: "disabled", resetIn: "-", limitDetails: [] };
-  }
-  const resets = account.rateLimitResetTimes || {};
-  const now = Date.now();
-  const limitDetails: string[] = [];
-  
-  // Build detailed limit info for each model
-  for (const [model, resetTime] of Object.entries(resets)) {
-    if (resetTime > now) {
-      limitDetails.push(`${model}: ${formatDuration(resetTime - now)}`);
-    }
-  }
-  
-  if (limitDetails.length === 0) {
-    return { status: "available", resetIn: "-", limitDetails: [] };
-  }
-  
-  const nextReset = Math.min(...Object.values(resets).filter((v) => v > now));
-  return {
-    status: "limited",
-    resetIn: formatDuration(nextReset - now),
-    limitDetails,
-  };
-}
+function getAccountStatus(account: Account): {
+  status: "available" | "limited" | "disabled";
+  resetIn: string;
+  limitDetails: string[];
+} {
+  if (account.enabled === false) {
+    return { status: "disabled", resetIn: "-", limitDetails: [] };
+  }
+  const resets = account.rateLimitResetTimes || {};
+  const now = Date.now();
+  const limitDetails: string[] = [];
+  
+  // Build detailed limit info for each model
+  for (const [model, resetTime] of Object.entries(resets)) {
+    if (resetTime > now) {
+      limitDetails.push(`${model}: ${formatDuration(resetTime - now)}`);
+    }
+  }
+  
+  if (limitDetails.length === 0) {
+    return { status: "available", resetIn: "-", limitDetails: [] };
+  }
+  
+  const nextReset = Math.min(...Object.values(resets).filter((v) => v > now));
+  return {
+    status: "limited",
+    resetIn: formatDuration(nextReset - now),
+    limitDetails,
+  };
+}
 
-export function AccountRow({ account, isSelected, isChecked, showCheckbox }: AccountRowProps) {
+export function AccountRow({
+  account,
+  isSelected,
+  isChecked,
+  showCheckbox,
+  healthResult,
+}: AccountRowProps) {
   const { status, resetIn, limitDetails } = getAccountStatus(account);
   const project = account.projectId || account.managedProjectId || "-";
-
-  const checkbox = showCheckbox 
-    ? (isChecked ? "[x]" : "[ ]") 
-    : "";
-  
-  const cursor = isSelected ? ">" : " ";
-  const emailColor = status === "disabled" ? "gray" : "white";
-
-  return (
-    <Box flexDirection="column">
-      <Box flexDirection="row" paddingX={1}>
-        <Box width={2}>
-          <Text color={isSelected ? "white" : "gray"}>{cursor}</Text>
-        </Box>
-        {showCheckbox && (
-          <Box width={4}>
-            <Text color={isChecked ? "white" : "gray"}>{checkbox}</Text>
-          </Box>
-        )}
-        <Box width={28}>
-          <Text color={emailColor} strikethrough={status === "disabled"}>
-            {account.email}
-          </Text>
-        </Box>
-        <Box width={18}>
-          <Text dimColor>{project.slice(0, 16)}</Text>
-        </Box>
+
+  const checkbox = showCheckbox 
+    ? (isChecked ? "[x]" : "[ ]") 
+    : "";
+  
+  const cursor = isSelected ? ">" : " ";
+  const emailColor = status === "disabled" ? "gray" : "white";
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row" paddingX={1}>
+        <Box width={2}>
+          <Text color={isSelected ? "white" : "gray"}>{cursor}</Text>
+        </Box>
+        {showCheckbox && (
+          <Box width={4}>
+            <Text color={isChecked ? "white" : "gray"}>{checkbox}</Text>
+          </Box>
+        )}
+        <Box width={28}>
+          <Text color={emailColor} strikethrough={status === "disabled"}>
+            {account.email}
+          </Text>
+        </Box>
+        <Box width={18}>
+          <Text dimColor>{project.slice(0, 16)}</Text>
+        </Box>
         <Box width={12}>
           <StatusBadge status={status} />
         </Box>
         <Box width={10}>
-          <Text dimColor>{resetIn}</Text>
+          <HealthBadge result={healthResult} />
         </Box>
-      </Box>
-      {status === "limited" && limitDetails.length > 0 && (
-        <Box paddingLeft={showCheckbox ? 8 : 4}>
-          <Text dimColor>
-            └─ {limitDetails.join(" | ")}
-          </Text>
+        <Box width={10}>
+          <Text dimColor>{resetIn}</Text>
         </Box>
-      )}
-    </Box>
-  );
-}
-
-interface AccountListProps {
-  accounts: Account[];
-  selectedIndex?: number;
-  checkedEmails?: Set<string>;
-  showCheckbox?: boolean;
+      </Box>
+      {status === "limited" && limitDetails.length > 0 && (
+        <Box paddingLeft={showCheckbox ? 8 : 4}>
+          <Text dimColor>
+            └─ {limitDetails.join(" | ")}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
 }
 
-export function AccountList({ 
-  accounts, 
-  selectedIndex = -1, 
-  checkedEmails = new Set(),
-  showCheckbox = false 
-}: AccountListProps) {
+interface AccountListProps {
+  accounts: Account[];
+  selectedIndex?: number;
+  checkedEmails?: Set<string>;
+  showCheckbox?: boolean;
+  healthResults?: Record<string, AccountHealthResult>;
+}
+
+export function AccountList({ 
+  accounts, 
+  selectedIndex = -1, 
+  checkedEmails = new Set(),
+  showCheckbox = false,
+  healthResults
+}: AccountListProps) {
   return (
     <Box flexDirection="column">
       <Box flexDirection="row" paddingX={1} marginBottom={1}>
@@ -129,22 +143,26 @@ export function AccountList({
         <Box width={18}>
           <Text bold dimColor>PROJECT</Text>
         </Box>
-        <Box width={12}>
-          <Text bold dimColor>STATUS</Text>
-        </Box>
-        <Box width={10}>
-          <Text bold dimColor>RESET IN</Text>
-        </Box>
+        <Box width={12}>
+          <Text bold dimColor>STATUS</Text>
+        </Box>
+        <Box width={10}>
+          <Text bold dimColor>HEALTH</Text>
+        </Box>
+        <Box width={10}>
+          <Text bold dimColor>RESET IN</Text>
+        </Box>
       </Box>
-      {accounts.map((account, index) => (
-        <AccountRow
-          key={account.email}
-          account={account}
-          isSelected={index === selectedIndex}
-          isChecked={checkedEmails.has(account.email)}
-          showCheckbox={showCheckbox}
-        />
-      ))}
+      {accounts.map((account, index) => (
+        <AccountRow
+          key={account.email}
+          account={account}
+          isSelected={index === selectedIndex}
+          isChecked={checkedEmails.has(account.email)}
+          showCheckbox={showCheckbox}
+          healthResult={healthResults?.[normalizeHealthKey(account.email)]}
+        />
+      ))}
       {accounts.length === 0 && (
         <Box paddingX={1}>
           <Text dimColor>No accounts found</Text>

package/src/tui/components/ActionPalette.tsx

@@ -1,117 +1,117 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-
-export interface PaletteAction {
-  id: string;
-  label: string;
-  shortcut?: string;
-  description?: string;
-  category?: string;
-}
-
-interface ActionPaletteProps {
-  actions: PaletteAction[];
-  onSelect: (actionId: string) => void;
-  onClose: () => void;
-}
-
-export function ActionPalette({ actions, onSelect, onClose }: ActionPaletteProps) {
-  const [search, setSearch] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  // Filter actions by search
-  const filteredActions = actions.filter(action => {
-    const searchLower = search.toLowerCase();
-    return (
-      action.label.toLowerCase().includes(searchLower) ||
-      action.id.toLowerCase().includes(searchLower) ||
-      (action.description?.toLowerCase().includes(searchLower))
-    );
-  });
-
-  useInput((input, key) => {
-    // Close on Escape
-    if (key.escape) {
-      onClose();
-      return;
-    }
-
-    // Navigate up
-    if (key.upArrow) {
-      setSelectedIndex(prev => Math.max(0, prev - 1));
-      return;
-    }
-
-    // Navigate down
-    if (key.downArrow) {
-      setSelectedIndex(prev => Math.min(filteredActions.length - 1, prev + 1));
-      return;
-    }
-
-    // Select on Enter
-    if (key.return) {
-      const action = filteredActions[selectedIndex];
-      if (action) {
-        onSelect(action.id);
-      }
-      return;
-    }
-
-    // Backspace
-    if (key.backspace || key.delete) {
-      setSearch(prev => prev.slice(0, -1));
-      setSelectedIndex(0);
-      return;
-    }
-
-    // Type to search (printable characters)
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      setSearch(prev => prev + input);
-      setSelectedIndex(0);
-    }
-  });
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="gray"
-      paddingX={1}
-      paddingY={0}
-    >
-      {/* Search input */}
-      <Box marginBottom={1}>
-        <Text bold>{">"} </Text>
-        <Text>{search || " "}</Text>
-        <Text color="gray">_</Text>
-      </Box>
-
-      {/* Actions list */}
-      <Box flexDirection="column" marginBottom={1}>
-        {filteredActions.length === 0 ? (
-          <Text dimColor>No matching actions</Text>
-        ) : (
-          filteredActions.slice(0, 10).map((action, index) => {
-            const isSelected = index === selectedIndex;
-            return (
-              <Box key={action.id}>
-                <Text inverse={isSelected} dimColor={!isSelected}>
-                  {isSelected ? "▸ " : "  "}
-                  {action.label}
-                </Text>
-                {action.shortcut && (
-                  <Text dimColor> [{action.shortcut}]</Text>
-                )}
-              </Box>
-            );
-          })
-        )}
-      </Box>
-
-      {/* Help */}
-      <Box>
-        <Text dimColor>↑↓ navigate • Enter select • Esc close</Text>
-      </Box>
-    </Box>
-  );
-}
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface PaletteAction {
+  id: string;
+  label: string;
+  shortcut?: string;
+  description?: string;
+  category?: string;
+}
+
+interface ActionPaletteProps {
+  actions: PaletteAction[];
+  onSelect: (actionId: string) => void;
+  onClose: () => void;
+}
+
+export function ActionPalette({ actions, onSelect, onClose }: ActionPaletteProps) {
+  const [search, setSearch] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Filter actions by search
+  const filteredActions = actions.filter(action => {
+    const searchLower = search.toLowerCase();
+    return (
+      action.label.toLowerCase().includes(searchLower) ||
+      action.id.toLowerCase().includes(searchLower) ||
+      (action.description?.toLowerCase().includes(searchLower))
+    );
+  });
+
+  useInput((input, key) => {
+    // Close on Escape
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    // Navigate up
+    if (key.upArrow) {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+      return;
+    }
+
+    // Navigate down
+    if (key.downArrow) {
+      setSelectedIndex(prev => Math.min(filteredActions.length - 1, prev + 1));
+      return;
+    }
+
+    // Select on Enter
+    if (key.return) {
+      const action = filteredActions[selectedIndex];
+      if (action) {
+        onSelect(action.id);
+      }
+      return;
+    }
+
+    // Backspace
+    if (key.backspace || key.delete) {
+      setSearch(prev => prev.slice(0, -1));
+      setSelectedIndex(0);
+      return;
+    }
+
+    // Type to search (printable characters)
+    if (input && input.length === 1 && !key.ctrl && !key.meta) {
+      setSearch(prev => prev + input);
+      setSelectedIndex(0);
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+      paddingY={0}
+    >
+      {/* Search input */}
+      <Box marginBottom={1}>
+        <Text bold>{">"} </Text>
+        <Text>{search || " "}</Text>
+        <Text color="gray">_</Text>
+      </Box>
+
+      {/* Actions list */}
+      <Box flexDirection="column" marginBottom={1}>
+        {filteredActions.length === 0 ? (
+          <Text dimColor>No matching actions</Text>
+        ) : (
+          filteredActions.slice(0, 10).map((action, index) => {
+            const isSelected = index === selectedIndex;
+            return (
+              <Box key={action.id}>
+                <Text inverse={isSelected} dimColor={!isSelected}>
+                  {isSelected ? "▸ " : "  "}
+                  {action.label}
+                </Text>
+                {action.shortcut && (
+                  <Text dimColor> [{action.shortcut}]</Text>
+                )}
+              </Box>
+            );
+          })
+        )}
+      </Box>
+
+      {/* Help */}
+      <Box>
+        <Text dimColor>↑↓ navigate • Enter select • Esc close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Box.tsx

@@ -12,7 +12,7 @@ interface BoxProps {
 export function Box({
   title,
   children,
-  borderColor = "cyan",
+  borderColor = "gray",
   width,
   padding = 1,
 }: BoxProps) {
@@ -26,7 +26,7 @@ export function Box({
     >
       {title && (
         <InkBox marginBottom={1}>
-          <Text bold color={borderColor}>
+          <Text bold>
             {title}
           </Text>
         </InkBox>