by codex: feat. General Improvements

components/ErrorMessage.tsx

@@ -5,6 +5,12 @@ const ERROR_MESSAGES: Record<string, string> = {
   MISSING_ACCESS_TOKEN: "auth.json is missing the accessToken field.",
   INVALID_JSON: "The selected file is not valid JSON.",
   NO_ORGS_FOUND: "No Claude organizations found for this session key.",
+  INVALID_CODEX_RESPONSE:
+    "Codex returned an unexpected response. The app was kept safe from invalid data.",
+  INVALID_CLAUDE_RESPONSE:
+    "Claude returned an unexpected usage response. The app was kept safe from invalid data.",
+  INVALID_CLAUDE_ORGS_RESPONSE:
+    "Claude returned an unexpected organizations response.",
 };
 
 function humanize(code: string): string {

components/LastUpdated.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { Text } from "react-native";
+import { COUNTDOWN_INTERVAL_MS } from "@/lib/constants";
+import { formatLastUpdated } from "@/lib/timeUtils";
+
+export function LastUpdated({ timestamp }: { timestamp: number | null }) {
+  const [now, setNow] = useState(Date.now);
+
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), COUNTDOWN_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!timestamp) return null;
+
+  return (
+    <Text selectable className="text-xs text-neutral-400 dark:text-neutral-500">
+      {formatLastUpdated(timestamp, now)}
+    </Text>
+  );
+}

components/ProgressBar.tsx

@@ -1,12 +1,13 @@
 import { View } from "react-native";
+import { PROGRESS_THRESHOLDS } from "@/lib/constants";
 
 interface ProgressBarProps {
   percent: number;
 }
 
 function getBarColor(percent: number): string {
-  if (percent >= 85) return "bg-red-500";
-  if (percent >= 60) return "bg-yellow-400";
+  if (percent >= PROGRESS_THRESHOLDS.danger) return "bg-red-500";
+  if (percent >= PROGRESS_THRESHOLDS.warning) return "bg-yellow-400";
   return "bg-green-500";
 }
 

components/ResetCountdown.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Text } from "react-native";
+import { COUNTDOWN_INTERVAL_MS } from "@/lib/constants";
 import { formatResetCountdown, formatResetCountdownISO } from "@/lib/timeUtils";
 
 interface ResetCountdownProps {
@@ -8,18 +9,28 @@ interface ResetCountdownProps {
 }
 
 export function ResetCountdown({ resetAtSeconds, resetAtISO }: ResetCountdownProps) {
+  const latest = useRef({ resetAtSeconds, resetAtISO });
+  latest.current = { resetAtSeconds, resetAtISO };
+
   const getLabel = () => {
-    if (resetAtSeconds !== undefined) return formatResetCountdown(resetAtSeconds);
-    if (resetAtISO) return formatResetCountdownISO(resetAtISO);
+    if (latest.current.resetAtSeconds !== undefined) {
+      return formatResetCountdown(latest.current.resetAtSeconds);
+    }
+    if (latest.current.resetAtISO) return formatResetCountdownISO(latest.current.resetAtISO);
     return "";
   };
 
   const [label, setLabel] = useState(getLabel);
 
   useEffect(() => {
-    setLabel(getLabel());
-    const interval = setInterval(() => setLabel(getLabel()), 60_000);
+    const update = () => setLabel(getLabel());
+    update();
+    const interval = setInterval(update, COUNTDOWN_INTERVAL_MS);
     return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    setLabel(getLabel());
   }, [resetAtSeconds, resetAtISO]);
 
   if (!label) return null;

components/ScreenErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import { COLORS } from "@/lib/constants";
+
+interface Props {
+  children: React.ReactNode;
+  screenName: string;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class ScreenErrorBoundary extends React.Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  render() {
+    if (!this.state.error) return this.props.children;
+
+    return (
+      <View className="flex-1 items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-8">
+        <Text selectable className="text-xl font-bold text-neutral-900 dark:text-white">
+          {this.props.screenName} hit a snag
+        </Text>
+        <Text
+          selectable
+          className="mt-2 text-center text-sm text-neutral-500 dark:text-neutral-400"
+        >
+          This screen could not be rendered. The rest of Codexbar is still available.
+        </Text>
+        <TouchableOpacity
+          onPress={() => this.setState({ error: null })}
+          className="mt-5 rounded-xl px-4 py-3"
+          style={{ backgroundColor: COLORS.codex }}
+        >
+          <Text className="text-sm font-semibold text-white">Try again</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}