better-codex 0.1.4 → 0.2.1

package/apps/web/src/components/session-view/rate-limit-banner.tsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react'
+import { Icons, Button } from '../ui'
+import type { Account } from '../../types'
+
+interface RateLimitBannerProps {
+  visible: boolean
+  currentAccount?: Account
+  availableAccounts: Account[]
+  errorMessage?: string
+  onSwitchAccount: (accountId: string) => void
+  onDismiss: () => void
+}
+
+export const isRateLimitError = (message: string): boolean => {
+  const lowerMessage = message.toLowerCase()
+  return (
+    lowerMessage.includes('rate limit') ||
+    lowerMessage.includes('usage limit') ||
+    lowerMessage.includes('quota exceeded') ||
+    lowerMessage.includes('too many requests') ||
+    lowerMessage.includes('request limit') ||
+    lowerMessage.includes('hit your usage limit') ||
+    lowerMessage.includes('limit reached') ||
+    lowerMessage.includes('try again') && lowerMessage.includes('limit')
+  )
+}
+
+export const RateLimitBanner = ({
+  visible,
+  currentAccount,
+  availableAccounts,
+  errorMessage,
+  onSwitchAccount,
+  onDismiss,
+}: RateLimitBannerProps) => {
+  const [selectedAccountId, setSelectedAccountId] = useState<string | null>(null)
+
+  // Auto-select first available account
+  useEffect(() => {
+    if (availableAccounts.length > 0 && !selectedAccountId) {
+      // Prefer accounts with lower usage
+      const sorted = [...availableAccounts].sort((a, b) => {
+        const aUsage = a.usage?.primary?.usedPercent ?? 0
+        const bUsage = b.usage?.primary?.usedPercent ?? 0
+        return aUsage - bUsage
+      })
+      setSelectedAccountId(sorted[0]?.id ?? null)
+    }
+  }, [availableAccounts, selectedAccountId])
+
+  if (!visible) {
+    return null
+  }
+
+  const handleSwitch = () => {
+    if (selectedAccountId) {
+      onSwitchAccount(selectedAccountId)
+      onDismiss()
+    }
+  }
+
+  const extractResetTime = (message: string): string | null => {
+    const patterns = [
+      /try again (?:at|after) ([^.]+)/i,
+      /resets? (?:at|in) ([^.]+)/i,
+      /available (?:at|after) ([^.]+)/i,
+    ]
+    for (const pattern of patterns) {
+      const match = message.match(pattern)
+      if (match) {
+        return match[1].trim()
+      }
+    }
+    return null
+  }
+
+  const resetTime = errorMessage ? extractResetTime(errorMessage) : null
+
+  return (
+    <div className="px-4 py-3 border-b border-border bg-bg-secondary/70">
+      <div className="bg-bg-tertiary border border-border rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <div className="w-9 h-9 rounded-lg bg-bg-primary border border-border flex items-center justify-center">
+            <Icons.Warning className="w-4 h-4 text-yellow-500" />
+          </div>
+          
+          <div className="flex-1 min-w-0">
+            <h3 className="text-sm font-semibold text-text-primary">
+              Usage Limit Reached
+            </h3>
+            <p className="text-xs text-text-muted mt-1">
+              {currentAccount?.name || 'Current account'} has hit its usage limit.
+              {resetTime && (
+                <span className="block mt-0.5">
+                  Resets: <span className="text-text-secondary">{resetTime}</span>
+                </span>
+              )}
+            </p>
+
+            {availableAccounts.length > 0 ? (
+              <div className="mt-3">
+                <p className="text-xs text-text-secondary mb-2">
+                  Continue with another account:
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {availableAccounts.map((account) => (
+                    <button
+                      key={account.id}
+                      onClick={() => setSelectedAccountId(account.id)}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all ${
+                        selectedAccountId === account.id
+                          ? 'bg-accent-green-soft border-accent-green/50 text-accent-green'
+                          : 'bg-bg-secondary border-border hover:border-text-muted text-text-secondary'
+                      }`}
+                    >
+                      <div className={`w-2 h-2 rounded-full ${
+                        account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                      }`} />
+                      <span className="text-xs font-medium">{account.name}</span>
+                      {account.usage?.primary && (
+                        <span className={`text-[10px] ${
+                          account.usage.primary.usedPercent >= 80 ? 'text-yellow-500' :
+                          account.usage.primary.usedPercent >= 60 ? 'text-text-muted' :
+                          'text-accent-green'
+                        }`}>
+                          {Math.round(account.usage.primary.usedPercent)}%
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+                
+                <div className="flex items-center gap-2 mt-3">
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={handleSwitch}
+                    disabled={!selectedAccountId}
+                  >
+                    <Icons.ArrowRight className="w-3.5 h-3.5" />
+                    Switch Account
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onDismiss}
+                  >
+                    Dismiss
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="mt-3 flex items-center gap-2">
+                <p className="text-xs text-text-muted">
+                  No other accounts available. Add more accounts in the sidebar or wait for the limit to reset.
+                </p>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDismiss}
+                >
+                  Dismiss
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <button
+            onClick={onDismiss}
+            className="shrink-0 p-1 rounded hover:bg-bg-hover transition-colors"
+          >
+            <Icons.X className="w-4 h-4 text-text-muted" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/apps/web/src/components/session-view/session-dialogs.tsx

@@ -1,5 +1,5 @@
-import type { ApprovalPolicy, ReasoningEffort, ReasoningSummary } from '../../types'
-import { AlertDialog, Button, CopyDialog, Dialog, PromptDialog, Select, type SelectOption } from '../ui'
+import type { Account, ApprovalPolicy, ReasoningEffort, ReasoningSummary } from '../../types'
+import { AlertDialog, Button, CopyDialog, Dialog, Icons, PromptDialog, Select, type SelectOption } from '../ui'
 
 interface SessionDialogsProps {
   showModelDialog: boolean
@@ -32,6 +32,11 @@ interface SessionDialogsProps {
   onCloseResumeDialog: () => void
   resumeCandidates: Array<{ id: string; title: string; preview: string }>
   onResumeThread: (threadId: string) => void
+  showAccountSwitchDialog: boolean
+  onCloseAccountSwitchDialog: () => void
+  currentAccount?: Account
+  switchableAccounts: Account[]
+  onSwitchAccount: (accountId: string) => void
   showFeedbackDialog: boolean
   onCloseFeedbackDialog: () => void
   feedbackCategory: string
@@ -81,6 +86,11 @@ export const SessionDialogs = ({
   onCloseResumeDialog,
   resumeCandidates,
   onResumeThread,
+  showAccountSwitchDialog,
+  onCloseAccountSwitchDialog,
+  currentAccount,
+  switchableAccounts,
+  onSwitchAccount,
   showFeedbackDialog,
   onCloseFeedbackDialog,
   feedbackCategory,
@@ -212,6 +222,87 @@ export const SessionDialogs = ({
         </div>
       </Dialog>
 
+      <Dialog open={showAccountSwitchDialog} onClose={onCloseAccountSwitchDialog} title="Switch Account">
+        <div className="space-y-3">
+          <p className="text-xs text-text-muted">
+            Continue this thread with a different account. The conversation history will be preserved.
+          </p>
+          
+          {currentAccount && (
+            <div className="p-3 rounded-lg bg-bg-tertiary border border-border">
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${
+                  currentAccount.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                }`} />
+                <span className="text-xs font-medium text-text-primary">{currentAccount.name}</span>
+                <span className="text-[10px] text-text-muted ml-auto">current</span>
+              </div>
+              {currentAccount.usage?.primary && (
+                <div className="mt-2 flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-bg-primary rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full rounded-full transition-all ${
+                        currentAccount.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                        currentAccount.usage.primary.usedPercent >= 80 ? 'bg-accent-orange' :
+                        'bg-accent-green'
+                      }`}
+                      style={{ width: `${Math.min(100, currentAccount.usage.primary.usedPercent)}%` }}
+                    />
+                  </div>
+                  <span className="text-[10px] text-text-muted">
+                    {Math.round(currentAccount.usage.primary.usedPercent)}% used
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="space-y-2 max-h-[200px] overflow-y-auto">
+            {switchableAccounts.length === 0 && (
+              <div className="text-xs text-text-muted py-4 text-center">
+                No other authenticated accounts available.
+              </div>
+            )}
+            {switchableAccounts.map((account) => (
+              <button
+                key={account.id}
+                type="button"
+                onClick={() => {
+                  onSwitchAccount(account.id)
+                  onCloseAccountSwitchDialog()
+                }}
+                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border bg-bg-tertiary hover:bg-bg-hover hover:border-text-muted/40 transition-colors"
+              >
+                <div className={`w-2 h-2 rounded-full ${
+                  account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                }`} />
+                <div className="flex-1 min-w-0 text-left">
+                  <div className="text-xs font-medium text-text-primary truncate">{account.name}</div>
+                  {account.usage?.primary && (
+                    <div className="mt-1 flex items-center gap-2">
+                      <div className="flex-1 h-1 bg-bg-primary rounded-full overflow-hidden">
+                        <div 
+                          className={`h-full rounded-full transition-all ${
+                            account.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                            account.usage.primary.usedPercent >= 80 ? 'bg-accent-orange' :
+                            'bg-accent-green'
+                          }`}
+                          style={{ width: `${Math.min(100, account.usage.primary.usedPercent)}%` }}
+                        />
+                      </div>
+                      <span className="text-[10px] text-text-muted">
+                        {Math.round(account.usage.primary.usedPercent)}%
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <Icons.ArrowRight className="w-4 h-4 text-text-muted shrink-0" />
+              </button>
+            ))}
+          </div>
+        </div>
+      </Dialog>
+
       <Dialog open={showFeedbackDialog} onClose={onCloseFeedbackDialog} title="Send Feedback">
         <div className="space-y-3">
           <Select

package/apps/web/src/components/session-view/session-header.tsx

@@ -1,30 +1,49 @@
 import { IconButton, Icons } from '../ui'
+import { ThreadAccountSwitcher } from './thread-account-switcher'
+import type { Account } from '../../types'
 
 interface SessionHeaderProps {
   title: string
+  accountId?: string
   accountName?: string
+  accounts?: Account[]
   model?: string
   status?: string
   canInteract: boolean
   onArchive: () => void
+  onSwitchAccount?: (accountId: string) => void
 }
 
 export const SessionHeader = ({
   title,
+  accountId,
   accountName,
+  accounts = [],
   model,
   status,
   canInteract,
   onArchive,
+  onSwitchAccount,
 }: SessionHeaderProps) => {
   const isActive = status === 'active'
+  const showAccountSwitcher = accounts.length > 1 && accountId && onSwitchAccount
 
   return (
     <header className="hidden md:flex px-4 py-3 border-b border-border items-center justify-between shrink-0 gap-4">
       <div className="min-w-0 flex-1 overflow-hidden">
         <h2 className="text-sm font-semibold text-text-primary truncate">{title}</h2>
-        <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-muted">
-          <span className="truncate max-w-[100px]">{accountName || 'Unknown account'}</span>
+        <div className="flex items-center gap-1 mt-0.5 text-[10px] text-text-muted">
+          {showAccountSwitcher ? (
+            <ThreadAccountSwitcher
+              currentAccountId={accountId}
+              currentAccountName={accountName}
+              accounts={accounts}
+              disabled={isActive}
+              onSwitch={onSwitchAccount}
+            />
+          ) : (
+            <span className="truncate max-w-[100px] px-2 py-1">{accountName || 'Unknown account'}</span>
+          )}
           <span>·</span>
           <span>{model || 'unknown'}</span>
           <span>·</span>

package/apps/web/src/components/session-view/thread-account-switcher.tsx

@@ -0,0 +1,191 @@
+import { useState, useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { Icons } from '../ui'
+import type { Account } from '../../types'
+
+interface ThreadAccountSwitcherProps {
+  currentAccountId: string
+  currentAccountName?: string
+  accounts: Account[]
+  disabled?: boolean
+  onSwitch: (accountId: string) => void
+}
+
+export const ThreadAccountSwitcher = ({
+  currentAccountId,
+  currentAccountName,
+  accounts,
+  disabled,
+  onSwitch,
+}: ThreadAccountSwitcherProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 })
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Filter to only show other accounts that are online
+  const availableAccounts = accounts.filter(
+    (account) => account.id !== currentAccountId && account.status === 'online'
+  )
+
+  // Update dropdown position when opening
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+      })
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (
+        buttonRef.current && !buttonRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const handleSwitch = (accountId: string) => {
+    onSwitch(accountId)
+    setIsOpen(false)
+  }
+
+  const currentAccount = accounts.find((a) => a.id === currentAccountId)
+  const hasRateLimitWarning = currentAccount?.usage?.primary?.usedPercent 
+    ? currentAccount.usage.primary.usedPercent >= 80 
+    : false
+
+  const dropdownContent = isOpen && availableAccounts.length > 0 && (
+    <div 
+      ref={dropdownRef}
+      className="fixed min-w-[200px] bg-bg-elevated border border-border rounded-lg shadow-lg py-1 z-[9999]"
+      style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
+    >
+      <div className="px-3 py-2 border-b border-border">
+        <p className="text-[10px] text-text-muted font-medium uppercase tracking-wide">
+          Switch Account
+        </p>
+        <p className="text-[10px] text-text-muted mt-0.5">
+          Continue this thread with another account
+        </p>
+      </div>
+      
+      {/* Current account */}
+      <div className="px-3 py-2 bg-bg-secondary/50">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${
+            currentAccount?.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+          }`} />
+          <span className="text-xs text-text-primary font-medium">
+            {currentAccountName}
+          </span>
+          <span className="text-[10px] text-text-muted ml-auto">current</span>
+        </div>
+        {currentAccount?.usage?.primary && (
+          <div className="mt-1.5 flex items-center gap-2">
+            <div className="flex-1 h-1 bg-bg-tertiary rounded-full overflow-hidden">
+              <div 
+                className={`h-full rounded-full transition-all ${
+                  currentAccount.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                  currentAccount.usage.primary.usedPercent >= 80 ? 'bg-yellow-500' :
+                  'bg-accent-green'
+                }`}
+                style={{ width: `${Math.min(100, currentAccount.usage.primary.usedPercent)}%` }}
+              />
+            </div>
+            <span className="text-[9px] text-text-muted">
+              {Math.round(currentAccount.usage.primary.usedPercent)}%
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Available accounts */}
+      <div className="py-1">
+        {availableAccounts.map((account) => (
+          <button
+            key={account.id}
+            onClick={() => handleSwitch(account.id)}
+            className="w-full flex items-center gap-2 px-3 py-2 hover:bg-bg-hover transition-colors text-left"
+          >
+            <div className={`w-2 h-2 rounded-full ${
+              account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+            }`} />
+            <div className="flex-1 min-w-0">
+              <span className="text-xs text-text-primary block truncate">
+                {account.name}
+              </span>
+              {account.usage?.primary && (
+                <div className="mt-1 flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-bg-tertiary rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full rounded-full transition-all ${
+                        account.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                        account.usage.primary.usedPercent >= 80 ? 'bg-yellow-500' :
+                        'bg-accent-green'
+                      }`}
+                      style={{ width: `${Math.min(100, account.usage.primary.usedPercent)}%` }}
+                    />
+                  </div>
+                  <span className="text-[9px] text-text-muted">
+                    {Math.round(account.usage.primary.usedPercent)}%
+                  </span>
+                </div>
+              )}
+            </div>
+            <Icons.ArrowRight className="w-3 h-3 text-text-muted shrink-0" />
+          </button>
+        ))}
+      </div>
+
+      {hasRateLimitWarning && (
+        <div className="px-3 py-2 border-t border-border bg-yellow-500/5">
+          <p className="text-[10px] text-yellow-500">
+            <Icons.Warning className="w-3 h-3 inline mr-1" />
+            Current account is near rate limit. Consider switching.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`group flex items-center gap-1.5 px-2 py-1 rounded-md transition-colors ${
+          disabled 
+            ? 'opacity-50 cursor-not-allowed' 
+            : 'hover:bg-bg-hover cursor-pointer'
+        } ${hasRateLimitWarning ? 'text-yellow-500' : ''}`}
+        title={availableAccounts.length > 0 ? 'Switch account for this thread' : 'No other accounts available'}
+      >
+        <span className={`truncate max-w-[100px] text-[10px] ${hasRateLimitWarning ? 'text-yellow-500' : 'text-text-muted'}`}>
+          {currentAccountName || 'Unknown account'}
+        </span>
+        {hasRateLimitWarning && (
+          <Icons.Warning className="w-3 h-3 text-yellow-500 shrink-0" />
+        )}
+        {availableAccounts.length > 0 && !disabled && (
+          <Icons.ChevronDown className={`w-3 h-3 text-text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        )}
+      </button>
+
+      {dropdownContent && createPortal(dropdownContent, document.body)}
+    </div>
+  )
+}

package/apps/web/src/components/ui/icons.tsx

@@ -184,4 +184,16 @@ export const Icons = {
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
     </svg>
   ),
+
+  ArrowRight: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+    </svg>
+  ),
+
+  Switch: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+    </svg>
+  ),
 }