feat(auth): multi-account OAuth support with auto-relogin

packages/app/dist-mirror/assets/__vite-browser-external-2447137e-BIHI7g3E.js

@@ -0,0 +1 @@
+const e={};export{e as default};

packages/app/src/components/session/session-context-tab.tsx

@@ -1,8 +1,10 @@
-import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
+import { createMemo, createEffect, on, onCleanup, For, Show, createSignal, createResource } from "solid-js"
 import type { JSX } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSync } from "@/context/sync"
 import { useLayout } from "@/context/layout"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { usePlatform } from "@/context/platform"
 import { checksum } from "@opencode-ai/util/encode"
 import { findLast } from "@opencode-ai/util/array"
 import { same } from "@/utils/same"
@@ -12,12 +14,38 @@ import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { Code } from "@opencode-ai/ui/code"
 import { Markdown } from "@opencode-ai/ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import type { AssistantMessage, Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
 import { getSessionContextMetrics } from "./session-context-metrics"
 import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
 import { createSessionContextFormatter } from "./session-context-format"
 
+interface AnthropicUsage {
+  fiveHour?: { utilization: number; resetsAt?: string }
+  sevenDay?: { utilization: number; resetsAt?: string }
+  sevenDaySonnet?: { utilization: number; resetsAt?: string }
+}
+
+interface AccountUsage {
+  id: string
+  label?: string
+  isActive?: boolean
+  health: { successCount: number; failureCount: number; cooldownUntil?: number }
+}
+
+interface ProviderUsageData {
+  accounts: AccountUsage[]
+  anthropicUsage?: AnthropicUsage
+}
+
+interface SessionContextTabProps {
+  messages: () => Message[]
+  visibleUserMessages: () => UserMessage[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
+}
+
 const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
   system: "var(--syntax-info)",
   user: "var(--syntax-success)",
@@ -35,6 +63,201 @@ function Stat(props: { label: string; value: JSX.Element }) {
   )
 }
 
+function formatResetTime(resetAt?: string): string {
+  if (!resetAt) return ""
+  const reset = new Date(resetAt)
+  const now = new Date()
+  const diffMs = reset.getTime() - now.getTime()
+  if (diffMs <= 0) return "now"
+  const totalMinutes = Math.floor(diffMs / (1000 * 60))
+  const hours = Math.floor(totalMinutes / 60)
+  const minutes = totalMinutes % 60
+  if (hours > 0) return `${hours}h ${minutes}m`
+  return `${minutes}m`
+}
+
+function getUsageColor(percent: number): string {
+  if (percent <= 50) return "var(--syntax-success)"
+  if (percent <= 80) return "var(--syntax-warning)"
+  return "var(--syntax-danger)"
+}
+
+function AnthropicUsageSection() {
+  const globalSDK = useGlobalSDK()
+  const platform = usePlatform()
+  const [switching, setSwitching] = createSignal<string | null>(null)
+
+  const [usage, { refetch, mutate }] = createResource(async () => {
+    const result = await globalSDK.client.auth.usage({})
+    const data = result.data as Record<string, ProviderUsageData>
+    return data["anthropic"]
+  })
+
+  const switchAccount = async (recordID: string) => {
+    setSwitching(recordID)
+    try {
+      const doFetch = platform.fetch ?? fetch
+      const response = await doFetch(`${globalSDK.url}/auth/active`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providerID: "anthropic", recordID }),
+      })
+      if (response.ok) {
+        const result = await response.json()
+        const current = usage()
+        if (current && result.success) {
+          mutate({
+            ...current,
+            accounts: current.accounts.map((acc) => ({
+              ...acc,
+              isActive: acc.id === recordID,
+            })),
+            anthropicUsage: result.anthropicUsage ?? current.anthropicUsage,
+          })
+        }
+      }
+    } catch (e) {
+      console.error("Failed to switch account:", e)
+    } finally {
+      setSwitching(null)
+    }
+  }
+
+  const rateLimits = createMemo(() => {
+    const data = usage()
+    if (!data?.anthropicUsage) return []
+
+    const limits: { key: string; label: string; utilization: number; resetsAt?: string; color: string }[] = []
+
+    if (data.anthropicUsage.fiveHour) {
+      limits.push({
+        key: "5h",
+        label: "5-Hour",
+        utilization: data.anthropicUsage.fiveHour.utilization,
+        resetsAt: data.anthropicUsage.fiveHour.resetsAt,
+        color: getUsageColor(data.anthropicUsage.fiveHour.utilization),
+      })
+    }
+    if (data.anthropicUsage.sevenDay) {
+      limits.push({
+        key: "7d",
+        label: "Weekly (All)",
+        utilization: data.anthropicUsage.sevenDay.utilization,
+        resetsAt: data.anthropicUsage.sevenDay.resetsAt,
+        color: getUsageColor(data.anthropicUsage.sevenDay.utilization),
+      })
+    }
+    if (data.anthropicUsage.sevenDaySonnet) {
+      limits.push({
+        key: "7d-sonnet",
+        label: "Weekly (Sonnet)",
+        utilization: data.anthropicUsage.sevenDaySonnet.utilization,
+        resetsAt: data.anthropicUsage.sevenDaySonnet.resetsAt,
+        color: getUsageColor(data.anthropicUsage.sevenDaySonnet.utilization),
+      })
+    }
+
+    return limits
+  })
+
+  return (
+    <div class="flex flex-col gap-2">
+      <div class="text-12-regular text-text-weak">Anthropic Rate Limits</div>
+
+      <Show when={usage.loading}>
+        <div class="flex items-center justify-center py-4">
+          <Spinner class="size-4" />
+        </div>
+      </Show>
+
+      <Show when={!usage.loading && usage()}>
+        {(data) => (
+          <>
+            <Show when={rateLimits().length > 0}>
+              <For each={rateLimits()}>
+                {(limit) => (
+                  <div class="flex flex-col gap-1">
+                    <div class="h-2 w-full rounded-full bg-surface-base overflow-hidden">
+                      <div
+                        class="h-full transition-all"
+                        style={{
+                          width: `${limit.utilization}%`,
+                          "background-color": limit.color,
+                        }}
+                      />
+                    </div>
+                    <div class="flex items-center gap-1 text-11-regular text-text-weak">
+                      <div class="size-2 rounded-sm" style={{ "background-color": limit.color }} />
+                      <div>{limit.label}</div>
+                      <div class="text-text-weaker">{limit.utilization}%</div>
+                      <Show when={limit.resetsAt}>
+                        <div class="text-text-weaker ml-auto">resets {formatResetTime(limit.resetsAt)}</div>
+                      </Show>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </Show>
+
+            <Show when={data().accounts.length > 1}>
+              <div class="flex flex-col gap-2 mt-2">
+                <div class="text-11-regular text-text-weak">Accounts ({data().accounts.length}) - click to switch</div>
+                <div class="flex flex-wrap gap-1">
+                  <For each={data().accounts}>
+                    {(account, index) => {
+                      const isSwitching = () => switching() === account.id
+                      const canSwitch = () => !account.isActive && !isSwitching()
+
+                      return (
+                        <button
+                          type="button"
+                          disabled={!canSwitch()}
+                          onClick={() => canSwitch() && switchAccount(account.id)}
+                          class="px-2 py-1 rounded text-11-medium transition-all"
+                          classList={{
+                            "bg-fill-success-ghost border border-fill-success-base text-fill-success-base":
+                              account.isActive,
+                            "bg-surface-base border border-border-base text-text-muted hover:border-border-strong hover:text-text-base cursor-pointer":
+                              canSwitch(),
+                            "bg-surface-base border border-border-base text-text-weaker":
+                              !canSwitch() && !account.isActive,
+                          }}
+                        >
+                          <Show when={isSwitching()}>
+                            <Spinner class="size-3 mr-1 inline" />
+                          </Show>
+                          {account.label && account.label !== "default" ? account.label : `Account ${index() + 1}`}
+                          <Show when={account.isActive}>
+                            <span class="ml-1 text-10-regular">(active)</span>
+                          </Show>
+                        </button>
+                      )
+                    }}
+                  </For>
+                </div>
+              </div>
+            </Show>
+
+            <button
+              type="button"
+              class="text-11-regular text-text-muted hover:text-text-base transition-colors self-start mt-1"
+              onClick={() => refetch()}
+            >
+              Refresh
+            </button>
+          </>
+        )}
+      </Show>
+
+      <Show when={!usage.loading && !usage()}>
+        <div class="text-11-regular text-text-muted p-2 rounded bg-surface-base">
+          No Anthropic OAuth account connected.
+        </div>
+      </Show>
+    </div>
+  )
+}
+
 function RawMessageContent(props: { message: Message; getParts: (id: string) => Part[]; onRendered: () => void }) {
   const file = createMemo(() => {
     const parts = props.getParts(props.message.id)
@@ -315,6 +538,11 @@ export function SessionContextTab() {
           </div>
         </Show>
 
+        {/* Anthropic Rate Limits - only show when provider is Anthropic */}
+        <Show when={ctx()?.provider?.id === "anthropic"}>
+          <AnthropicUsageSection />
+        </Show>
+
         <Show when={systemPrompt()}>
           {(prompt) => (
             <div class="flex flex-col gap-2">