fix(web): usage-limit banner reset time follows the Time format setting

apps/web/src/components/ChatView.tsx

@@ -4070,6 +4070,7 @@ export default function ChatView(props: ChatViewProps) {
           stoppedAt: activeThreadShell.latestRun.completedAt ?? activeThreadShell.updatedAt,
           recovery: activeThreadShell.limitRecovery ?? null,
           snoozedUntil: activeThreadShell.snoozedUntil,
+          timestampFormat,
           onChange: async (limitRecovery) => {
             const result = await updateThreadMetadata({
               environmentId,

apps/web/src/components/chat/UsageLimitRecoveryBanner.test.tsx

@@ -0,0 +1,36 @@
+import { RunId } from "@t3tools/contracts";
+import type { TimestampFormat } from "@t3tools/contracts/settings";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import { usageLimitRecoveryBannerItem } from "./UsageLimitRecoveryBanner";
+
+const stoppedAt = new Date(2026, 9, 20, 12, 0);
+
+function bannerDescription(resetAt: Date, timestampFormat: TimestampFormat) {
+  return usageLimitRecoveryBannerItem({
+    runId: RunId.make("run-1"),
+    resetAt: resetAt.toISOString(),
+    stoppedAt: stoppedAt.toISOString(),
+    snoozedUntil: null,
+    recovery: null,
+    timestampFormat,
+    onChange: async () => {},
+  }).description;
+}
+
+describe("usageLimitRecoveryBannerItem", () => {
+  it.each([
+    ["12-hour", "Resets 5:30 PM"],
+    ["24-hour", "Resets 17:30"],
+  ] as const)("formats a same-day reset with the %s setting", (timestampFormat, expected) => {
+    using _now = vi.spyOn(Date, "now").mockReturnValue(stoppedAt.getTime());
+    expect(bannerDescription(new Date(2026, 9, 20, 17, 30), timestampFormat)).toBe(expected);
+  });
+
+  it("names the day when the reset is tomorrow", () => {
+    using _now = vi.spyOn(Date, "now").mockReturnValue(stoppedAt.getTime());
+    expect(bannerDescription(new Date(2026, 9, 21, 17, 30), "24-hour")).toBe(
+      "Resets tomorrow at 17:30",
+    );
+  });
+});

apps/web/src/components/chat/UsageLimitRecoveryBanner.tsx

@@ -3,9 +3,11 @@ import {
   type OrchestrationV2LimitRecoveryUpdate,
   type RunId,
 } from "@t3tools/contracts";
+import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { GaugeIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "../ui/button";
+import { formatUpcomingTimestamp } from "../../timestampFormat";
 import { toastManager } from "../ui/toast";
 import type { ComposerBannerStackItem } from "./ComposerBannerStack";
 
@@ -15,11 +17,12 @@ type RecoveryProps = {
   stoppedAt: string;
   snoozedUntil: string | null;
   recovery: OrchestrationV2LimitRecovery | null;
+  timestampFormat: TimestampFormat;
   onChange: (recovery: OrchestrationV2LimitRecoveryUpdate) => Promise<void>;
 };
 
 export function usageLimitRecoveryBannerItem(props: RecoveryProps): ComposerBannerStackItem {
-  const { runId, resetAt, stoppedAt } = props;
+  const { runId, resetAt, stoppedAt, timestampFormat } = props;
   const canSchedule = resetAt !== null && Date.parse(resetAt) > Date.parse(stoppedAt);
   return {
     id: `usage-limit-recovery:${runId}`,
@@ -28,7 +31,7 @@ export function usageLimitRecoveryBannerItem(props: RecoveryProps): ComposerBann
     icon: <GaugeIcon />,
     title: "Usage limit reached",
     description: resetAt
-      ? `Resets ${new Date(resetAt).toLocaleString()}`
+      ? `Resets ${formatUpcomingTimestamp(resetAt, timestampFormat)}`
       : "Reset time unavailable; retry manually",
     actions: canSchedule ? <RecoveryActions key={`${runId}:${resetAt}`} {...props} /> : null,
   };