opencode-account-manager 0.6.0 → 0.6.2

package/src/tui/components/AccountList.tsx

@@ -60,17 +60,17 @@ export function AccountRow({ account, isSelected, isChecked, showCheckbox }: Acc
     : "";
   
   const cursor = isSelected ? ">" : " ";
-  const emailColor = status === "disabled" ? "gray" : (isSelected ? "white" : "cyan");
+  const emailColor = status === "disabled" ? "gray" : "white";
 
   return (
     <Box flexDirection="column">
       <Box flexDirection="row" paddingX={1}>
         <Box width={2}>
-          <Text color={isSelected ? "yellow" : "white"}>{cursor}</Text>
+          <Text color={isSelected ? "white" : "gray"}>{cursor}</Text>
         </Box>
         {showCheckbox && (
           <Box width={4}>
-            <Text color={isChecked ? "green" : "gray"}>{checkbox}</Text>
+            <Text color={isChecked ? "white" : "gray"}>{checkbox}</Text>
           </Box>
         )}
         <Box width={28}>
@@ -90,7 +90,7 @@ export function AccountRow({ account, isSelected, isChecked, showCheckbox }: Acc
       </Box>
       {status === "limited" && limitDetails.length > 0 && (
         <Box paddingLeft={showCheckbox ? 8 : 4}>
-          <Text color="gray">
+          <Text dimColor>
             └─ {limitDetails.join(" | ")}
           </Text>
         </Box>

package/src/tui/components/ActionPalette.tsx

@@ -75,13 +75,13 @@ export function ActionPalette({ actions, onSelect, onClose }: ActionPaletteProps
     <Box
       flexDirection="column"
       borderStyle="round"
-      borderColor="cyan"
+      borderColor="gray"
       paddingX={1}
       paddingY={0}
     >
       {/* Search input */}
       <Box marginBottom={1}>
-        <Text color="cyan" bold>{">"} </Text>
+        <Text bold>{">"} </Text>
         <Text>{search || " "}</Text>
         <Text color="gray">_</Text>
       </Box>
@@ -95,10 +95,7 @@ export function ActionPalette({ actions, onSelect, onClose }: ActionPaletteProps
             const isSelected = index === selectedIndex;
             return (
               <Box key={action.id}>
-                <Text
-                  backgroundColor={isSelected ? "cyan" : undefined}
-                  color={isSelected ? "black" : "white"}
-                >
+                <Text inverse={isSelected} dimColor={!isSelected}>
                   {isSelected ? "▸ " : "  "}
                   {action.label}
                 </Text>

package/src/tui/components/DashboardView.tsx

@@ -7,33 +7,90 @@ interface DashboardViewProps {
   selectedIndex: number;
 }
 
-interface RateLimitInfo {
-  model: string;
+interface ModelConfig {
+  key: string;
   displayName: string;
-  resetTime: number;
+  shortName: string;
+}
+
+// Model definitions with display names
+const MODEL_CONFIGS: ModelConfig[] = [
+  { key: "claude", displayName: "Claude", shortName: "Claude" },
+  { key: "gemini-cli:gemini-3-pro-preview", displayName: "G3 Pro", shortName: "G3 Pro" },
+  { key: "gemini-cli:gemini-3-flash-preview", displayName: "G3 Flash", shortName: "G3 Fl" },
+  { key: "gemini-cli:imagen-3", displayName: "G3 Image", shortName: "G3 Img" },
+  { key: "gemini-cli:gemini-2.5-pro", displayName: "G2.5 Pro", shortName: "G2.5" },
+  { key: "gemini-cli:gemini-2.0-flash", displayName: "G2 Flash", shortName: "G2 Fl" },
+  { key: "gemini", displayName: "Gemini", shortName: "Gem" },
+];
+
+const DEFAULT_MODEL_KEYS = [
+  "claude",
+  "gemini-cli:gemini-3-pro-preview",
+  "gemini-cli:gemini-3-flash-preview",
+  "gemini-cli:imagen-3",
+];
+
+const MODEL_CONFIG_MAP = new Map(MODEL_CONFIGS.map((model) => [model.key, model]));
+
+interface ModelStatus {
+  available: boolean;
   timeRemaining: string;
+  percentage: number;
+  resetTime: number;
 }
 
 function formatTimeRemaining(resetTime: number): string {
   const now = Date.now();
-  if (resetTime <= now) return "";
+  if (resetTime <= now) return "0h 0m";
   
   const remaining = resetTime - now;
   const hours = Math.floor(remaining / 3600000);
   const minutes = Math.floor((remaining % 3600000) / 60000);
   
-  if (hours > 24) {
+  if (hours >= 24) {
     const days = Math.floor(hours / 24);
     return `${days}d ${hours % 24}h`;
   }
-  if (hours > 0) {
-    return `${hours}h ${minutes}m`;
+  return `${hours}h ${minutes}m`;
+}
+
+function calculatePercentage(resetTime: number): number {
+  const now = Date.now();
+  if (resetTime <= now) return 100;
+  
+  const remaining = resetTime - now;
+  const maxTime = 24 * 3600000;
+  const clamped = Math.min(remaining, maxTime);
+  const elapsed = maxTime - clamped;
+  return Math.max(0, Math.min(100, Math.round((elapsed / maxTime) * 100)));
+}
+
+function getModelStatus(account: Account, modelKey: string): ModelStatus {
+  const now = Date.now();
+  const rateLimits = account.rateLimitResetTimes || {};
+  
+  // Check if model is rate limited
+  const resetTime = rateLimits[modelKey] || 0;
+  
+  if (resetTime <= now) {
+    return {
+      available: true,
+      timeRemaining: "0h 0m",
+      percentage: 100,
+      resetTime: 0,
+    };
   }
-  return `${minutes}m`;
+  
+  return {
+    available: false,
+    timeRemaining: formatTimeRemaining(resetTime),
+    percentage: calculatePercentage(resetTime),
+    resetTime,
+  };
 }
 
 function getModelDisplayName(model: string): string {
-  // Shorten long model names for display
   if (model.includes(":")) {
     const parts = model.split(":");
     return parts[1] || parts[0];
@@ -41,36 +98,85 @@ function getModelDisplayName(model: string): string {
   return model;
 }
 
-function getAccountRateLimits(account: Account): RateLimitInfo[] {
-  const now = Date.now();
-  const rateLimits = account.rateLimitResetTimes || {};
-  
-  return Object.entries(rateLimits)
-    .filter(([_, time]) => time > now)
-    .map(([model, resetTime]) => ({
-      model,
-      displayName: getModelDisplayName(model),
-      resetTime,
-      timeRemaining: formatTimeRemaining(resetTime),
-    }))
-    .sort((a, b) => a.resetTime - b.resetTime);
+function getModelShortName(model: string): string {
+  const name = getModelDisplayName(model);
+  if (name.length <= 7) return name;
+  return name.slice(0, 6) + "…";
 }
 
-function getAccountStatus(account: Account): { 
-  status: string; 
-  statusColor: string;
-  indicator: string;
-} {
-  if (account.enabled === false) {
-    return { status: "disabled", statusColor: "gray", indicator: "○" };
-  }
-  
-  const limits = getAccountRateLimits(account);
-  if (limits.length === 0) {
-    return { status: "available", statusColor: "white", indicator: "●" };
-  }
-  
-  return { status: "limited", statusColor: "gray", indicator: "◐" };
+function getDisplayModels(accounts: Account[]): ModelConfig[] {
+  const activeKeys = new Set<string>(DEFAULT_MODEL_KEYS);
+
+  accounts.forEach((acc) => {
+    if (acc.rateLimitResetTimes) {
+      Object.keys(acc.rateLimitResetTimes).forEach((key) => {
+        activeKeys.add(key);
+      });
+    }
+  });
+
+  const models: ModelConfig[] = [];
+
+  DEFAULT_MODEL_KEYS.forEach((key) => {
+    const config = MODEL_CONFIG_MAP.get(key);
+    if (config) models.push(config);
+  });
+
+  const extraKeys = Array.from(activeKeys).filter((key) => !DEFAULT_MODEL_KEYS.includes(key));
+  extraKeys.sort().forEach((key) => {
+    const config = MODEL_CONFIG_MAP.get(key);
+    if (config) {
+      models.push(config);
+    } else {
+      models.push({
+        key,
+        displayName: getModelDisplayName(key),
+        shortName: getModelShortName(key),
+      });
+    }
+  });
+
+  return models;
+}
+
+function formatLastUsed(timestamp?: number): string {
+  if (!timestamp) return "--";
+  const date = new Date(timestamp);
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${month}/${day} ${hours}:${minutes}`;
+}
+
+// Progress bar component using text
+function ProgressBar({ percentage, width = 6 }: { percentage: number; width?: number }) {
+  const filled = Math.round((percentage / 100) * width);
+  const empty = width - filled;
+
+  return (
+    <Text>
+      {"█".repeat(filled)}
+      <Text dimColor>{"░".repeat(empty)}</Text>
+    </Text>
+  );
+}
+
+// Model cell component
+function ModelCell({ status, width = 20 }: { status: ModelStatus; width?: number }) {
+  return (
+    <Box width={width}>
+      <Box width={8}>
+        <ProgressBar percentage={status.percentage} width={6} />
+      </Box>
+      <Box width={7}>
+        <Text dimColor>{status.timeRemaining.padStart(6)}</Text>
+      </Box>
+      <Box width={5}>
+        <Text>{`${status.percentage}%`.padStart(4)}</Text>
+      </Box>
+    </Box>
+  );
 }
 
 export function DashboardView({ accounts, selectedIndex }: DashboardViewProps) {
@@ -83,78 +189,88 @@ export function DashboardView({ accounts, selectedIndex }: DashboardViewProps) {
     );
   }
 
+  const displayModels = getDisplayModels(accounts);
+  const modelColumnWidth = 20;
+  const emailWidth = 28;
+  const lastUsedWidth = 14;
+  const totalWidth = 3 + emailWidth + displayModels.length * modelColumnWidth + lastUsedWidth;
+
   return (
     <Box flexDirection="column">
       {/* Header */}
-      <Box paddingX={1} marginBottom={1}>
+      <Box paddingX={1}>
         <Box width={3}>
           <Text dimColor>{" "}</Text>
         </Box>
-        <Box width={30}>
+        <Box width={emailWidth}>
           <Text dimColor bold>EMAIL</Text>
         </Box>
-        <Box width={10}>
-          <Text dimColor bold>STATUS</Text>
-        </Box>
-        <Box flexGrow={1}>
-          <Text dimColor bold>RATE LIMITS</Text>
+        {displayModels.map(model => (
+          <Box key={model.key} width={modelColumnWidth}>
+            <Text dimColor bold>{model.shortName}</Text>
+          </Box>
+        ))}
+        <Box width={lastUsedWidth}>
+          <Text dimColor bold>LAST USED</Text>
         </Box>
       </Box>
 
-      {/* Accounts */}
+      {/* Separator */}
+      <Box paddingX={1}>
+        <Text dimColor>{"─".repeat(totalWidth)}</Text>
+      </Box>
+
+      {/* Account rows */}
       {accounts.map((account, index) => {
         const isSelected = index === selectedIndex;
-        const { status, statusColor, indicator } = getAccountStatus(account);
-        const limits = getAccountRateLimits(account);
+        const isDisabled = account.enabled === false;
         
         // Truncate email
-        const email = account.email.length > 28 
-          ? account.email.slice(0, 25) + "..." 
+        const email = account.email.length > emailWidth - 3 
+          ? account.email.slice(0, emailWidth - 6) + "..." 
           : account.email;
 
         return (
           <Box key={account.email} paddingX={1}>
             {/* Selection cursor */}
             <Box width={3}>
-              <Text color={isSelected ? "cyan" : undefined} bold={isSelected}>
+              <Text bold={isSelected}>
                 {isSelected ? "› " : "  "}
               </Text>
             </Box>
             
             {/* Email */}
-            <Box width={30}>
+            <Box width={emailWidth}>
               <Text 
-                color={isSelected ? "cyan" : (account.enabled === false ? "gray" : "white")}
                 bold={isSelected}
-                dimColor={account.enabled === false}
+                dimColor={isDisabled}
               >
                 {email}
               </Text>
             </Box>
             
-            {/* Status indicator */}
-            <Box width={10}>
-              <Text color={statusColor}>
-                {indicator} {status}
-              </Text>
-            </Box>
-            
-            {/* Rate limits - show all models */}
-            <Box flexGrow={1}>
-              {limits.length === 0 ? (
-                <Text dimColor>—</Text>
-              ) : (
-                <Text>
-                  {limits.map((limit, i) => (
-                    <Text key={limit.model}>
-                      <Text dimColor>{limit.displayName}</Text>
-                      <Text color="gray">:</Text>
-                      <Text color="white">{limit.timeRemaining}</Text>
-                      {i < limits.length - 1 ? <Text dimColor> │ </Text> : null}
-                    </Text>
-                  ))}
-                </Text>
-              )}
+            {/* Model columns */}
+            {displayModels.map(model => {
+              const status = getModelStatus(account, model.key);
+              
+              if (isDisabled) {
+                return (
+                  <Box key={model.key} width={modelColumnWidth}>
+                    <Text dimColor>── disabled ──</Text>
+                  </Box>
+                );
+              }
+              
+              return (
+                <ModelCell 
+                  key={model.key} 
+                  status={status} 
+                  width={modelColumnWidth}
+                />
+              );
+            })}
+            <Box width={lastUsedWidth}>
+              <Text dimColor>{formatLastUsed(account.lastUsed)}</Text>
             </Box>
           </Box>
         );
@@ -162,19 +278,43 @@ export function DashboardView({ accounts, selectedIndex }: DashboardViewProps) {
 
       {/* Summary */}
       <Box paddingX={1} marginTop={1}>
-        <Text dimColor>
-          ─────────────────────────────────────────────────────────────────
-        </Text>
+        <Text dimColor>{"─".repeat(totalWidth)}</Text>
       </Box>
+      
       <Box paddingX={1}>
         <Text dimColor>
-          {accounts.length} accounts • {accounts.filter(a => a.enabled !== false && getAccountRateLimits(a).length === 0).length} available • {accounts.filter(a => getAccountRateLimits(a).length > 0).length} limited
+          {accounts.length} accounts
+        </Text>
+        <Text dimColor> │ </Text>
+        <Text>
+          {accounts.filter(a => {
+            if (a.enabled === false) return false;
+            const now = Date.now();
+            const limits = a.rateLimitResetTimes || {};
+            return !Object.values(limits).some(t => t > now);
+          }).length}
+        </Text>
+        <Text dimColor> available</Text>
+        <Text dimColor> │ </Text>
+        <Text dimColor>
+          {accounts.filter(a => {
+            if (a.enabled === false) return false;
+            const now = Date.now();
+            const limits = a.rateLimitResetTimes || {};
+            return Object.values(limits).some(t => t > now);
+          }).length} limited
+        </Text>
+        <Text dimColor> │ </Text>
+        <Text dimColor>
+          {accounts.filter(a => a.enabled === false).length} disabled
         </Text>
       </Box>
 
       {/* Legend */}
       <Box paddingX={1} marginTop={1}>
-        <Text dimColor>● available  ◐ limited  ○ disabled</Text>
+        <Text dimColor>████ 100%</Text>
+        <Text dimColor>  ░░░░ limited  </Text>
+        <Text dimColor>── disabled</Text>
       </Box>
     </Box>
   );

package/src/tui/components/McpServerList.tsx

@@ -37,18 +37,18 @@ export function McpServerList({ servers }: McpServerListProps) {
       {servers.map((server) => (
         <Box key={server.id}>
           <Box width={20}>
-            <Text color="cyan">{truncate(server.id, 18)}</Text>
+            <Text>{truncate(server.id, 18)}</Text>
           </Box>
           <Box width={10}>
             {server.enabled ? (
-              <Text color="green">enabled</Text>
+              <Text>enabled</Text>
             ) : (
-              <Text color="red">disabled</Text>
+              <Text dimColor>disabled</Text>
             )}
           </Box>
           <Box width={8}>
             {server.hasEnvVars ? (
-              <Text color="yellow">{server.envVarCount}</Text>
+              <Text>{server.envVarCount}</Text>
             ) : (
               <Text dimColor>-</Text>
             )}

package/src/tui/components/Menu.tsx

@@ -81,14 +81,14 @@ export function MenuBar({ onSelect, selectMode = false, selectedCount = 0 }: Men
     <Box flexDirection="column">
       {selectMode && (
         <Box marginBottom={1} paddingX={1}>
-          <Text color="yellow" bold>
+          <Text dimColor bold>
             SELECT MODE - {selectedCount} selected | ↑↓ navigate | SPACE toggle | ←→ switch section
           </Text>
         </Box>
       )}
       <Box
         borderStyle="single"
-        borderColor={selectMode ? "yellow" : "gray"}
+        borderColor={selectMode ? "white" : "gray"}
         paddingX={1}
         justifyContent="space-between"
       >

package/src/tui/components/ProviderList.tsx

@@ -37,15 +37,13 @@ export function ProviderList({ providers }: ProviderListProps) {
       {providers.map((provider) => (
         <Box key={provider.id}>
           <Box width={20}>
-            <Text color="cyan">{truncate(provider.name || provider.id, 18)}</Text>
+            <Text>{truncate(provider.name || provider.id, 18)}</Text>
           </Box>
           <Box width={10}>
-            <Text color="yellow">{provider.modelCount}</Text>
+            <Text>{provider.modelCount}</Text>
           </Box>
           <Box width={10}>
-            <Text color={provider.type === "builtin" ? "green" : "magenta"}>
-              {provider.type}
-            </Text>
+            <Text dimColor>{provider.type}</Text>
           </Box>
           <Box>
             <Text dimColor>{provider.baseURL || "-"}</Text>

package/src/tui/components/SectionBox.tsx

@@ -22,14 +22,14 @@ export function SectionBox({
       marginBottom={1}
     >
       <Box paddingX={1}>
-        <Text bold color="white">{title}</Text>
-        {collapsed && <Text dimColor> (collapsed)</Text>}
+        <Text bold>{title}</Text>
+        {collapsed ? <Text dimColor> (collapsed)</Text> : null}
       </Box>
-      {!collapsed && (
+      {!collapsed ? (
         <Box flexDirection="column" paddingY={0}>
           {children}
         </Box>
-      )}
+      ) : null}
     </Box>
   );
 }

package/src/tui/components/StatsRow.tsx

@@ -1,33 +1,33 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-interface StatCardProps {
-  label: string;
-  value: string | number;
-  color?: string;
-}
-
-export function StatCard({ label, value, color = "white" }: StatCardProps) {
-  return (
-    <Box flexDirection="column" marginRight={2}>
-      <Text dimColor>{label}</Text>
-      <Text bold color={color}>
-        {value}
-      </Text>
-    </Box>
-  );
-}
-
-interface StatsRowProps {
-  stats: StatCardProps[];
-}
-
-export function StatsRow({ stats }: StatsRowProps) {
-  return (
-    <Box flexDirection="row" marginY={1}>
-      {stats.map((stat, index) => (
-        <StatCard key={index} {...stat} />
-      ))}
-    </Box>
-  );
-}
+import React from "react";
+import { Box, Text } from "ink";
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  color?: string;
+}
+
+export function StatCard({ label, value, color = "white" }: StatCardProps) {
+  return (
+    <Box flexDirection="column" marginRight={2}>
+      <Text dimColor>{label}</Text>
+      <Text bold color={color}>
+        {value}
+      </Text>
+    </Box>
+  );
+}
+
+interface StatsRowProps {
+  stats: StatCardProps[];
+}
+
+export function StatsRow({ stats }: StatsRowProps) {
+  return (
+    <Box flexDirection="row" marginY={1}>
+      {stats.map((stat, index) => (
+        <StatCard key={index} {...stat} />
+      ))}
+    </Box>
+  );
+}

package/src/tui/components/StatusBadge.tsx

@@ -1,33 +1,33 @@
-import React from "react";
-import { Text } from "ink";
-
-interface StatusBadgeProps {
-  status: "available" | "limited" | "disabled" | "error";
-  label?: string;
-}
-
-const STATUS_COLORS: Record<string, string> = {
-  available: "green",
-  limited: "yellow",
-  disabled: "gray",
-  error: "red",
-};
-
-const STATUS_ICONS: Record<string, string> = {
-  available: "●",
-  limited: "○",
-  disabled: "x",
-  error: "!",
-};
-
-export function StatusBadge({ status, label }: StatusBadgeProps) {
-  const color = STATUS_COLORS[status] || "gray";
-  const icon = STATUS_ICONS[status] || "?";
-  const text = label || status.toUpperCase();
-
-  return (
-    <Text color={color}>
-      {icon} {text}
-    </Text>
-  );
-}
+import React from "react";
+import { Text } from "ink";
+
+interface StatusBadgeProps {
+  status: "available" | "limited" | "disabled" | "error";
+  label?: string;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  available: "white",
+  limited: "gray",
+  disabled: "gray",
+  error: "gray",
+};
+
+const STATUS_ICONS: Record<string, string> = {
+  available: "●",
+  limited: "◐",
+  disabled: "○",
+  error: "!",
+};
+
+export function StatusBadge({ status, label }: StatusBadgeProps) {
+  const color = STATUS_COLORS[status] || "gray";
+  const icon = STATUS_ICONS[status] || "?";
+  const text = label || status.toUpperCase();
+
+  return (
+    <Text color={color}>
+      {icon} {text}
+    </Text>
+  );
+}