fix(webapp): release the upgrade panel when the message allowance frees up

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx

@@ -21,6 +21,7 @@ import {
   FREE_PLAN_MESSAGE_LIMIT,
   MESSAGE_QUOTA_REACHED_REASON,
   parseQuotaReachedResponse,
+  type MessageQuota,
 } from "./message-quota";
 import { createTranscriptOrder, orderTranscript } from "./message-order";
 import { navigateDestination } from "./navigate-target";
@@ -78,6 +79,7 @@ export function DashboardAgentChat({
   onCancelWatch,
   onTurnSettled,
   onActivityChange,
+  onQuotaChange,
 }: {
   chatId: string;
   initialMessages: UIMessage[];
@@ -105,6 +107,8 @@ export function DashboardAgentChat({
   onCancelWatch: (watchId: string) => void;
   onTurnSettled: () => void;
   onActivityChange?: (chatId: string, activity: TurnActivity | null) => void;
+  /** The poll lives here, so this is where the panel learns the cap has lifted. */
+  onQuotaChange?: (quota: MessageQuota) => void;
 }) {
   const [input, setInput] = useState("");
   // Set when the server refuses a send over the cap, so the block shows at once rather than
@@ -209,6 +213,11 @@ export function DashboardAgentChat({
 
   // Read here, not in the panel, so it re-reads as each turn settles.
   const quota = useAgentMessageQuota({ actionPath, chatId, status });
+  useEffect(() => {
+    onQuotaChange?.(quota);
+    // The quota object is rebuilt every render; only its kind is acted on.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [quota.kind, onQuotaChange]);
   // Either the poll saw the cap, or a send was just refused over it.
   const atMessageCap = quota.kind === "reached" || quotaReached !== null;
   const messageCapLimit =

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -24,7 +24,11 @@ import {
   writeLastChat,
 } from "./last-chat-storage";
 import { DashboardAgentDraft } from "./DashboardAgentDraft";
-import { parseQuotaReachedResponse } from "./message-quota";
+import {
+  parseQuotaReachedResponse,
+  shouldClearCapReached,
+  type MessageQuota,
+} from "./message-quota";
 import { WatchCard } from "./WatchCard";
 import { watchDraftFor } from "./watch-card";
 import { NO_WATCH_CARD, watchCardReducer } from "./watch-card-state";
@@ -205,6 +209,8 @@ export function DashboardAgentPanel({
   // half-configured watch card, which would otherwise be submitted against the new chat.
   const claimChatSlot = useCallback(() => {
     dispatchWatchCard({ type: "chat-changed" });
+    // A new attempt goes back to the server, which re-refuses if the cap still stands.
+    setCapReached(null);
     // A request belongs to the chat it was made in: the remounting chat has a fresh guard ref,
     // so a kept request would be sent a second time.
     setSendRequest(undefined);
@@ -491,6 +497,11 @@ export function DashboardAgentPanel({
     setActive(null);
   }, [claimChatSlot]);
 
+  // Released only by a read that proves capacity: an unknown quota keeps the block.
+  const handleQuotaChange = useCallback((quota: MessageQuota) => {
+    if (shouldClearCapReached(quota)) setCapReached(null);
+  }, []);
+
   const switchChat = useCallback(
     (id: string) => {
       void openChat(id);
@@ -638,6 +649,7 @@ export function DashboardAgentPanel({
             // The generated chat name is written before the turn-complete chunk lands.
             onTurnSettled={loadHistory}
             onActivityChange={handleActivityChange}
+            onQuotaChange={handleQuotaChange}
           />
         ) : (
           <DashboardAgentDraft

apps/webapp/app/components/dashboard-agent/message-quota.test.ts

@@ -8,6 +8,7 @@ import {
   quotaResponseUpdate,
   resolveMessageLimit,
   resolveMessageQuota,
+  shouldClearCapReached,
 } from "./message-quota";
 
 describe("quotaResponseUpdate", () => {
@@ -113,6 +114,36 @@ describe("parseQuotaReachedResponse", () => {
   });
 });
 
+describe("shouldClearCapReached", () => {
+  const readQuota = (data: { used?: number; limit?: number | null } | null) => {
+    const update = quotaResponseUpdate(data);
+    return resolveMessageQuota({
+      isFreePlan: true,
+      used: update?.used,
+      limit: resolveMessageLimit(update?.limit),
+    });
+  };
+
+  it("releases the block once a read shows capacity", () => {
+    // Refused at 20/20, then the allowance resets or the plan's cap grows.
+    expect(shouldClearCapReached(readQuota({ used: 20, limit: 20 }))).toBe(false);
+    expect(shouldClearCapReached(readQuota({ used: 0, limit: 20 }))).toBe(true);
+    expect(shouldClearCapReached(readQuota({ used: 20, limit: 500 }))).toBe(true);
+  });
+
+  it("keeps the block when the read is degraded, so the composer can't flash", () => {
+    expect(shouldClearCapReached(readQuota({ used: 20, limit: 20 }))).toBe(false);
+    expect(shouldClearCapReached(readQuota(null))).toBe(false);
+    expect(shouldClearCapReached(readQuota({ limit: 20 }))).toBe(false);
+  });
+
+  it("keeps the block while the plan hasn't resolved", () => {
+    expect(shouldClearCapReached(resolveMessageQuota({ isFreePlan: undefined, used: 0 }))).toBe(
+      false
+    );
+  });
+});
+
 describe("messageQuotaReachedCopy", () => {
   it("names the Free plan only for the client nudge", () => {
     const copy = messageQuotaReachedCopy(FREE_PLAN_MESSAGE_LIMIT, false);

apps/webapp/app/components/dashboard-agent/message-quota.ts

@@ -48,6 +48,15 @@ export function resolveMessageQuota({
     : { kind: "within", used, limit, remaining };
 }
 
+/**
+ * Whether a refusal-set cap can be released: only a read that proves capacity is back. An
+ * unknown quota (degraded read, plan not resolved) keeps the block, so the composer never
+ * flashes back for someone the server is about to refuse again.
+ */
+export function shouldClearCapReached(quota: MessageQuota): boolean {
+  return quota.kind === "within";
+}
+
 // The server code both the create and `in` paths refuse with. The client owns the copy,
 // so this code must never reach the UI as text.
 export const MESSAGE_QUOTA_REACHED_ERROR = "message_quota_reached";