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>

app/(tabs)/index.tsx

@@ -16,6 +16,7 @@ import { onUsageDataLoaded } from "@/lib/notifications";
 import { ProgressBar } from "@/components/ProgressBar";
 import { ResetCountdown } from "@/components/ResetCountdown";
 import { LastUpdated } from "@/components/LastUpdated";
+import { ErrorMessage } from "@/components/ErrorMessage";
 import { ScreenErrorBoundary } from "@/components/ScreenErrorBoundary";
 import { COLORS, getUsageColor } from "@/lib/constants";
 import { windowLabel } from "@/lib/timeUtils";
@@ -184,12 +185,7 @@ function DashboardTabContent() {
               />
             )}
             {codex.auth && codex.status === "error" && (
-              <View className="flex-row items-center gap-x-2 py-1">
-                <MaterialIcons name="error-outline" size={16} color="#ef4444" />
-                <Text className="text-sm text-red-500 dark:text-red-400">
-                  Failed to fetch usage
-                </Text>
-              </View>
+              <ErrorMessage message={codex.error} />
             )}
             {codex.usage && (
               <View>
@@ -271,12 +267,7 @@ function DashboardTabContent() {
               />
             )}
             {claude.auth && claude.status === "error" && (
-              <View className="flex-row items-center gap-x-2 py-1">
-                <MaterialIcons name="error-outline" size={16} color="#ef4444" />
-                <Text className="text-sm text-red-500 dark:text-red-400">
-                  Failed to fetch usage
-                </Text>
-              </View>
+              <ErrorMessage message={claude.error} />
             )}
             {claude.usage && (
               <View>

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}`;
 }