fix: Show actionable error details for account health check failures

Setup tokens from `claude setup-token` can't query the usage API,
resulting in a useless "Usage API request failed" message. Now shows
the actual HTTP status and guides users to complete OAuth setup.
Also distinguishes warning state (yellow) from error state (red)
in the AccountCard UI.

packages/web/src/components/AccountCard.tsx

@@ -93,10 +93,14 @@ export type AccountData = {
 };
 
 export function AccountCard({ account }: { account: AccountData }) {
+  const hasWarning = account.credentialsValid && !account.isExhausted && account.error;
+
   const statusIcon = !account.credentialsValid ? (
     <XCircle className="h-5 w-5 shrink-0 text-destructive" />
   ) : account.isExhausted ? (
     <AlertTriangle className="h-5 w-5 shrink-0 text-yellow-500" />
+  ) : hasWarning ? (
+    <AlertTriangle className="h-5 w-5 shrink-0 text-yellow-500" />
   ) : (
     <CheckCircle2 className="h-5 w-5 shrink-0 text-green-500" />
   );
@@ -105,7 +109,9 @@ export function AccountCard({ account }: { account: AccountData }) {
     ? "Invalid credentials"
     : account.isExhausted
       ? `Exhausted until ${account.exhaustedUntil ? new Date(account.exhaustedUntil).toLocaleTimeString() : "unknown"}`
-      : "Available";
+      : hasWarning
+        ? "Setup incomplete"
+        : "Available";
 
   const usage = account.usage;
 
@@ -189,9 +195,11 @@ export function AccountCard({ account }: { account: AccountData }) {
           </div>
         )}
 
-        {/* Error message */}
+        {/* Error / warning message */}
         {account.error && (
-          <p className="pl-8 text-xs text-destructive">{account.error}</p>
+          <p className={`pl-8 text-xs ${hasWarning ? 'text-yellow-600 dark:text-yellow-500' : 'text-destructive'}`}>
+            {account.error}
+          </p>
         )}
       </CardContent>
     </Card>