by codex: feat. General Improvements

2026-06-25 14:27:58 +02:00
parent 9dd17cf565
commit 2c31be11c4
33 changed files with 1217 additions and 296 deletions
@@ -15,6 +15,9 @@ import { useClaudeUsage } from "@/hooks/useClaudeUsage";
 import { onUsageDataLoaded } from "@/lib/notifications";
 import { ProgressBar } from "@/components/ProgressBar";
 import { ResetCountdown } from "@/components/ResetCountdown";
+import { LastUpdated } from "@/components/LastUpdated";
+import { ScreenErrorBoundary } from "@/components/ScreenErrorBoundary";
+import { COLORS, getUsageColor } from "@/lib/constants";
 import { windowLabel } from "@/lib/timeUtils";

 function UsageRow({
@@ -28,8 +31,7 @@ function UsageRow({
  resetAtSeconds?: number;
  resetAtISO?: string;
 }) {
-  const color =
-    percent >= 90 ? "#ef4444" : percent >= 70 ? "#f59e0b" : "#10a37f";
+  const color = getUsageColor(percent);
  return (
    <View className="mb-4">
      <View className="flex-row justify-between items-baseline mb-1.5">
@@ -65,33 +67,33 @@ function SetupPrompt({ label }: { label: string }) {
  );
 }

-export default function DashboardTab() {
+function DashboardTabContent() {
  const codex = useCodexUsage();
  const claude = useClaudeUsage();

  // Fire daily digest reschedule + threshold check whenever fresh data arrives
  useEffect(() => {
-    if (codex.status === "success" || claude.status === "success") {
+    if (codex.usage || claude.usage) {
      void onUsageDataLoaded(
-        claude.status === "success" ? claude.usage : null,
-        codex.status === "success" ? codex.usage : null
+        claude.usage,
+        codex.usage
      );
    }
-  }, [codex.status, claude.status]);
+  }, [codex.lastFetchedAt, claude.lastFetchedAt]);

  useFocusEffect(
    useCallback(() => {
-      codex.reload();
-      claude.reload();
-    }, [])
+      void codex.reloadCredentials();
+      void claude.reloadCredentials();
+    }, [codex.reloadCredentials, claude.reloadCredentials])
  );

  const isRefreshing =
    codex.status === "loading" || claude.status === "loading";

  const handleRefresh = () => {
-    codex.refresh();
-    claude.refresh();
+    void codex.refresh();
+    void claude.refresh();
  };

  const connectedCount = [codex.auth, claude.auth].filter(Boolean).length;
@@ -108,7 +110,7 @@ export default function DashboardTab() {
          <RefreshControl
            refreshing={isRefreshing}
            onRefresh={handleRefresh}
-            tintColor="#10a37f"
+            tintColor={COLORS.codex}
          />
        }
      >
@@ -135,21 +137,21 @@ export default function DashboardTab() {
            onPress={handleRefresh}
            className="w-9 h-9 rounded-xl bg-neutral-100 dark:bg-neutral-800 items-center justify-center"
          >
-            <MaterialIcons name="refresh" size={18} color="#10a37f" />
+            <MaterialIcons name="refresh" size={18} color={COLORS.codex} />
          </TouchableOpacity>
        </View>

        {/* Codex card */}
        <View className="rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 mb-4 overflow-hidden">
-          <View style={{ height: 3, backgroundColor: "#10a37f" }} />
+          <View style={{ height: 3, backgroundColor: COLORS.codex }} />
          <View className="p-4">
            <View className="flex-row items-center justify-between mb-4">
              <View className="flex-row items-center gap-x-2.5">
                <View
                  className="w-8 h-8 rounded-xl items-center justify-center"
-                  style={{ backgroundColor: "#10a37f18" }}
+                  style={{ backgroundColor: `${COLORS.codex}18` }}
                >
-                  <MaterialIcons name="auto-awesome" size={16} color="#10a37f" />
+                  <MaterialIcons name="auto-awesome" size={16} color={COLORS.codex} />
                </View>
                <Text className="text-sm font-semibold text-neutral-900 dark:text-white">
                  Codex CLI
@@ -175,9 +177,9 @@ export default function DashboardTab() {
            {!codex.auth && (
              <SetupPrompt label="Import auth.json to see your Codex rate limits." />
            )}
-            {codex.auth && codex.status === "loading" && (
+            {codex.auth && codex.status === "loading" && !codex.usage && (
              <ActivityIndicator
-                color="#10a37f"
+                color={COLORS.codex}
                style={{ marginVertical: 16 }}
              />
            )}
@@ -189,7 +191,7 @@ export default function DashboardTab() {
                </Text>
              </View>
            )}
-            {codex.status === "success" && codex.usage && (
+            {codex.usage && (
              <View>
                <UsageRow
                  label={`${windowLabel(codex.usage.rate_limit.primary_window.limit_window_seconds)} window`}
@@ -220,13 +222,16 @@ export default function DashboardTab() {
                    <MaterialIcons
                      name="all-inclusive"
                      size={14}
-                      color="#10a37f"
+                      color={COLORS.codex}
                    />
                    <Text className="text-xs text-green-600 dark:text-green-400">
                      Unlimited credits
                    </Text>
                  </View>
                )}
+                <View className="mt-3 border-t border-neutral-100 pt-3 dark:border-neutral-800">
+                  <LastUpdated timestamp={codex.lastFetchedAt} />
+                </View>
              </View>
            )}
          </View>
@@ -234,15 +239,15 @@ export default function DashboardTab() {

        {/* Claude card */}
        <View className="rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 mb-4 overflow-hidden">
-          <View style={{ height: 3, backgroundColor: "#d97706" }} />
+          <View style={{ height: 3, backgroundColor: COLORS.claude }} />
          <View className="p-4">
            <View className="flex-row items-center justify-between mb-4">
              <View className="flex-row items-center gap-x-2.5">
                <View
                  className="w-8 h-8 rounded-xl items-center justify-center"
-                  style={{ backgroundColor: "#d9770618" }}
+                  style={{ backgroundColor: `${COLORS.claude}18` }}
                >
-                  <MaterialIcons name="psychology" size={16} color="#d97706" />
+                  <MaterialIcons name="psychology" size={16} color={COLORS.claude} />
                </View>
                <Text className="text-sm font-semibold text-neutral-900 dark:text-white">
                  Claude.ai
@@ -259,9 +264,9 @@ export default function DashboardTab() {
            {!claude.auth && (
              <SetupPrompt label="Add your session key to see Claude usage windows." />
            )}
-            {claude.auth && claude.status === "loading" && (
+            {claude.auth && claude.status === "loading" && !claude.usage && (
              <ActivityIndicator
-                color="#d97706"
+                color={COLORS.claude}
                style={{ marginVertical: 16 }}
              />
            )}
@@ -273,7 +278,7 @@ export default function DashboardTab() {
                </Text>
              </View>
            )}
-            {claude.status === "success" && claude.usage && (
+            {claude.usage && (
              <View>
                <UsageRow
                  label="5-hour window"
@@ -305,6 +310,9 @@ export default function DashboardTab() {
                    )}
                  </View>
                )}
+                <View className="mt-3 border-t border-neutral-100 pt-3 dark:border-neutral-800">
+                  <LastUpdated timestamp={claude.lastFetchedAt} />
+                </View>
              </View>
            )}
          </View>
@@ -313,3 +321,11 @@ export default function DashboardTab() {
    </SafeAreaView>
  );
 }
+
+export default function DashboardTab() {
+  return (
+    <ScreenErrorBoundary screenName="Dashboard">
+      <DashboardTabContent />
+    </ScreenErrorBoundary>
+  );
+}