fix: show meaningful error messages in dashboard

Replace hardcoded "Failed to fetch usage" in the Dashboard tab with the
ErrorMessage component so errors like TOKEN_EXPIRED, HTTP 429, and network
failures display human-readable text consistent with the detail tabs.
Also improve HTTP error copy and add network-level error detection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/ErrorMessage.tsx

@@ -11,11 +11,23 @@ const ERROR_MESSAGES: Record<string, string> = {
     "Claude returned an unexpected usage response. The app was kept safe from invalid data.",
   INVALID_CLAUDE_ORGS_RESPONSE:
     "Claude returned an unexpected organizations response.",
+  UNKNOWN_ERROR: "An unknown error occurred. Try refreshing.",
 };
 
 function humanize(code: string): string {
   if (code.startsWith("HTTP_ERROR_")) {
-    return `Unexpected server error (HTTP ${code.replace("HTTP_ERROR_", "")}).`;
+    const status = code.replace("HTTP_ERROR_", "");
+    if (status === "429") return "Rate limited by the server. Try again shortly.";
+    if (status === "500" || status === "502" || status === "503")
+      return `Server error (${status}). The service may be down.`;
+    return `Unexpected server response (HTTP ${status}).`;
+  }
+  if (
+    code === "Network request failed" ||
+    code.includes("fetch") ||
+    code.includes("network")
+  ) {
+    return "Network error. Check your internet connection and try again.";
   }
   return ERROR_MESSAGES[code] ?? `Unexpected error: ${code}`;
 }