fix(app): refresh provider usage timing

packages/app/src/usage/balance-bar.tsx

@@ -5,6 +5,7 @@ import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { clampPct, formatAmount, formatResetLabel } from "./format";
 import type { UsageBalance, UsageTone } from "./types";
+import { useRelativeTimeTick } from "./use-relative-time-tick";
 
 interface ResolvedBalance {
   amountText: string;
@@ -51,6 +52,7 @@ function fillToneStyle(tone: UsageTone) {
 
 export function UsageBalanceBar({ balance }: { balance: UsageBalance }) {
   const { t, i18n } = useTranslation();
+  useRelativeTimeTick(balance.resetsAt != null);
   const { amountText, usedPct } = resolveBalance(balance, t, i18n.resolvedLanguage);
   const tone = balance.tone ?? "default";
   const resetLabel = formatResetLabel(balance.resetsAt);

packages/app/src/usage/use-relative-time-tick.ts

@@ -0,0 +1,12 @@
+import { useEffect, useReducer } from "react";
+import { subscribeToRelativeTimeTick } from "@/utils/relative-time-ticker";
+
+/** Re-renders a mounted usage label when its relative time can change. */
+export function useRelativeTimeTick(enabled: boolean): void {
+  const [, tick] = useReducer((value: number) => value + 1, 0);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    return subscribeToRelativeTimeTick("minute", tick);
+  }, [enabled]);
+}

packages/app/src/usage/window-bar.tsx

@@ -16,6 +16,7 @@ import { displayPercent, usageWindowRowLabel } from "./model";
 import type { UsageDisplayAs } from "./preferences";
 import { windowTone } from "./tone";
 import type { UsageTone, UsageWindow } from "./types";
+import { useRelativeTimeTick } from "./use-relative-time-tick";
 
 // Pinned rows carry the pinned surface; hovering an unpinned row previews it at half strength,
 // so a hover never reads as the selection. Pinned rows do not react to hover.
@@ -45,6 +46,10 @@ export function UsageWindowBar({
   const tone = windowTone(window);
 
   const isAtRisk = window.runsOutAt != null && window.shortfallPct != null;
+  const relativeTime = isAtRisk ? window.runsOutAt : window.resetsAt;
+  useRelativeTimeTick(relativeTime != null);
+  const relativeTime = isAtRisk ? window.runsOutAt : window.resetsAt;
+  useRelativeTimeTick(relativeTime != null);
   const trailing = isAtRisk
     ? formatRunsOutLabel(window.runsOutAt)
     : formatResetLabel(window.resetsAt);