feat(web): show thread API cost in composer

apps/mobile/src/features/usage/UsageRouteScreen.tsx

@@ -11,8 +11,8 @@ import {
   formatUsd,
   makeWindow,
 } from "@t3tools/shared/usageFormat";
-import { useMemo, useState } from "react";
-import { Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Alert, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
@@ -25,6 +25,7 @@ import { UsageDailyChart } from "./UsageDailyChart";
 import { UsageLimitsSection, useRefreshLimits } from "./UsageLimitsSection";
 import type { UsageChartMetric } from "./usageChartData";
 import { PROVIDER_LABEL, useProviderColors } from "./usageProviders";
+import { refreshRebasedUsageWindow, usagePullRefreshTargets } from "./usagePullRefresh";
 
 type UsageTab = "usage" | "limits";
 const TAB_OPTIONS = [
@@ -62,6 +63,8 @@ export function UsageRouteScreen() {
     window: makeWindow(30),
   }));
   const [metric, setMetric] = useState<UsageChartMetric>("cost");
+  const [isPullRefreshing, setIsPullRefreshing] = useState(false);
+  const refreshRequest = useRef(0);
   const { days: windowDays, window } = windowSelection;
   const isPast24Hours = windowDays === 1;
   const { merged, environments, isPending, isPartial, refresh } = useUsage(window);
@@ -91,29 +94,57 @@ export function UsageRouteScreen() {
     [isPast24Hours, merged.daily, merged.hourly],
   );
 
-  // The pull spinner tracks re-scans of environments that have answered
-  // before. The initial scan renders its own placeholder, and an unreachable
-  // environment stays pending forever — neither may pin the spinner on.
-  const refreshingUsage = environments.some((entry) => entry.isPending && entry.summary !== null);
+  const refreshingUsage = isPullRefreshing;
   const showingLimits = tab === "limits";
+  useEffect(
+    () => () => {
+      refreshRequest.current += 1;
+    },
+    [],
+  );
   const selectWindow = (days: number) => {
+    refreshRequest.current += 1;
+    setIsPullRefreshing(false);
     setWindowSelection({
       days,
       window: makeWindow(days, undefined, days === 1 ? "hour" : "day"),
     });
   };
   const refreshWindow = () => {
+    const request = ++refreshRequest.current;
+    const targets = usagePullRefreshTargets(environments);
+    setIsPullRefreshing(targets.size > 0);
+    const completeRefresh = () => {
+      if (request !== refreshRequest.current) return false;
+      refreshRequest.current += 1;
+      setIsPullRefreshing(false);
+      return true;
+    };
+    const failRefresh = (error: unknown) => {
+      if (!completeRefresh()) return;
+      Alert.alert(
+        "Could not refresh usage",
+        error instanceof Error ? error.message : "Usage could not be refreshed. Try again.",
+      );
+    };
     const nextWindow = makeWindow(windowDays, undefined, isPast24Hours ? "hour" : "day");
     if (
-      nextWindow.sinceDay === window.sinceDay &&
-      nextWindow.untilDay === window.untilDay &&
-      nextWindow.sinceTime === window.sinceTime &&
-      nextWindow.untilTime === window.untilTime
+      nextWindow.sinceDay !== window.sinceDay ||
+      nextWindow.untilDay !== window.untilDay ||
+      nextWindow.sinceTime !== window.sinceTime ||
+      nextWindow.untilTime !== window.untilTime
     ) {
-      refresh();
-    } else {
-      setWindowSelection({ days: windowDays, window: nextWindow });
+      void refreshRebasedUsageWindow(
+        nextWindow,
+        refresh,
+        (refreshedWindow) => {
+          setWindowSelection({ days: windowDays, window: refreshedWindow });
+        },
+        () => request === refreshRequest.current,
+      ).then(completeRefresh, failRefresh);
+      return;
     }
+    void refresh().then(completeRefresh, failRefresh);
   };
 
   return (
@@ -273,14 +304,14 @@ function ChartCard(props: {
     <View className="gap-4 rounded-[24px] border-continuous bg-card p-4">
       <View className="gap-0.5">
         <Text className="text-sm text-foreground-muted">
-          {metric === "cost" ? "Raw token cost" : "Processed tokens"}
+          {metric === "cost" ? "Local public-list estimate" : "Processed tokens"}
         </Text>
         <Text className="text-4xl font-t3-bold tabular-nums text-foreground">
           {metric === "cost" ? `${formatUsd(merged.costUsd)}*` : formatTokens(merged.totalTokens)}
         </Text>
         <Text className="text-sm text-foreground-muted">
           {metric === "cost"
-            ? "* if billed at full API rate"
+            ? "* estimated from local transcripts at public list rates"
             : `Across ${formatCount(merged.sessions)} sessions`}
         </Text>
       </View>
@@ -417,7 +448,16 @@ function TotalsSection(props: { readonly merged: MergedUsage; readonly isPast24H
         <MetricCell
           label="Uncached input"
           value={formatTokens(merged.uncachedInputTokens)}
-          detail={`${formatTokens(merged.cacheCreationTokens)} cache writes`}
+          detail="fresh input tokens"
+        />
+        <MetricCell
+          label="Cache writes, estimated"
+          value={
+            merged.costQuality.cacheWriteUsd === null
+              ? "Unavailable"
+              : formatUsd(merged.costQuality.cacheWriteUsd)
+          }
+          detail={`${formatTokens(merged.cacheCreationTokens)} tokens · not an expiry measure`}
         />
         <MetricCell
           label="Output"

apps/mobile/src/features/usage/usagePullRefresh.test.ts

@@ -0,0 +1,118 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import type { UsageSummaryInput } from "@t3tools/contracts";
+
+import { refreshRebasedUsageWindow, usagePullRefreshTargets } from "./usagePullRefresh";
+
+const status = (environmentId: string, summary: unknown | null, isPending: boolean) => ({
+  environmentId: environmentId as EnvironmentId,
+  summary,
+  isPending,
+});
+
+describe("usage pull refresh", () => {
+  it("shows pull state for answered environments without waiting on initial reads", () => {
+    const targets = usagePullRefreshTargets([
+      status("answered", { readAt: "before" }, false),
+      status("unreachable", null, true),
+    ]);
+
+    expect([...targets]).toEqual(["answered"]);
+  });
+
+  it("tracks failed retries without waiting on already-pending environments", () => {
+    const targets = usagePullRefreshTargets([
+      status("failed", null, false),
+      status("already-pending", null, true),
+    ]);
+
+    expect([...targets]).toEqual(["failed"]);
+    expect(usagePullRefreshTargets([status("already-pending", null, true)]).size).toBe(0);
+  });
+
+  it("commits a rebased window only after its refreshed snapshot publishes", async () => {
+    const events: string[] = [];
+    let releaseRates!: () => void;
+    const rates = new Promise<void>((resolve) => {
+      releaseRates = resolve;
+    });
+    let releasePublication!: () => void;
+    const publication = new Promise<void>((resolve) => {
+      releasePublication = resolve;
+    });
+    const input = { sinceDay: "2026-09-04" } as UsageSummaryInput;
+    const operation = refreshRebasedUsageWindow(
+      input,
+      async () => {
+        events.push("rates-started");
+        await rates;
+        events.push("rescan-started");
+        await publication;
+        events.push("rescan-published");
+      },
+      () => events.push("window-committed"),
+      () => true,
+    );
+
+    expect(events).toEqual(["rates-started"]);
+    releaseRates();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(events).toEqual(["rates-started", "rescan-started"]);
+    releasePublication();
+    await operation;
+    expect(events).toEqual([
+      "rates-started",
+      "rescan-started",
+      "rescan-published",
+      "window-committed",
+    ]);
+  });
+
+  it("does not restore a rebased window after a newer selection", async () => {
+    let releaseRates!: () => void;
+    const rates = new Promise<void>((resolve) => {
+      releaseRates = resolve;
+    });
+    const rebased = { sinceDay: "2026-09-04" } as UsageSummaryInput;
+    const newer = { sinceDay: "2026-08-07" } as UsageSummaryInput;
+    let selected = rebased;
+    let activeRequest = 1;
+    const request = activeRequest;
+    const operation = refreshRebasedUsageWindow(
+      rebased,
+      async () => {
+        await rates;
+      },
+      (input) => {
+        selected = input;
+      },
+      () => request === activeRequest,
+    );
+
+    selected = newer;
+    activeRequest += 1;
+    releaseRates();
+    await operation;
+
+    expect(selected).toBe(newer);
+  });
+
+  it("does not commit a rebased window when refresh fails", async () => {
+    const failure = new Error("transcript scan failed");
+    let committed = false;
+
+    await expect(
+      refreshRebasedUsageWindow(
+        { sinceDay: "2026-09-04" } as UsageSummaryInput,
+        async () => Promise.reject(failure),
+        () => {
+          committed = true;
+        },
+        () => true,
+      ),
+    ).rejects.toBe(failure);
+    expect(committed).toBe(false);
+  });
+});

apps/mobile/src/features/usage/usagePullRefresh.ts

@@ -0,0 +1,30 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import type { UsageSummaryInput } from "@t3tools/contracts";
+
+interface UsageRefreshStatus {
+  readonly environmentId: EnvironmentId;
+  readonly isPending: boolean;
+  readonly summary: unknown | null;
+}
+
+/** Selects environments for which pull-to-refresh should show its indicator. */
+export function usagePullRefreshTargets(
+  environments: readonly UsageRefreshStatus[],
+): ReadonlySet<EnvironmentId> {
+  return new Set(
+    environments.flatMap((environment) =>
+      environment.summary === null && environment.isPending ? [] : [environment.environmentId],
+    ),
+  );
+}
+
+/** Starts the explicit rescan before committing a rebased window to the screen. */
+export async function refreshRebasedUsageWindow(
+  input: UsageSummaryInput,
+  refresh: (input: UsageSummaryInput) => Promise<void>,
+  commit: (input: UsageSummaryInput) => void,
+  isCurrent: () => boolean,
+): Promise<void> {
+  await refresh(input);
+  if (isCurrent()) commit(input);
+}