fix(webapp): guard capped agent send paths and settle the quota re-read

Draft submit and chat retry now bail when the message cap is reached, so
a suggested prompt or retry over the cap no longer fires a silent 403.
The capped draft keeps any open watch card. The quota re-reads when a
turn settles instead of on optimistic append, so the count and cap no
longer lag by one message.

Author: kathiekiwi

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

@@ -201,8 +201,8 @@ export function DashboardAgentChat({
   const orderRef = useRef(createTranscriptOrder(initialMessages));
   const messages = orderTranscript(rawMessages, orderRef.current);
 
-  // Counted here, not in the panel, so it includes the turn just sent.
-  const quota = useAgentMessageQuota({ actionPath, chatId, messages });
+  // Read here, not in the panel, so it re-reads as each turn settles.
+  const quota = useAgentMessageQuota({ actionPath, chatId, status });
   // Either the poll saw the cap, or a send was just refused over it.
   const atMessageCap = quota.kind === "reached" || quotaReached !== null;
   const messageCapLimit =
@@ -271,6 +271,8 @@ export function DashboardAgentChat({
   }, [sendRequest, submit, canSend]);
 
   const retry = useCallback(() => {
+    // Over the cap, a retry only earns another 403 — same guard as `submit`.
+    if (atMessageCap) return;
     // A watch's consent record is a user message nobody typed, so retry never treats it as one.
     const action = retryAction(
       messages.filter((m) => !(m.role === "user" && isWatchRequestMessageId(m.id)))
@@ -283,7 +285,7 @@ export function DashboardAgentChat({
       return;
     }
     void sendMessage({ text: action.text, messageId: action.messageId });
-  }, [messages, sendMessage, regenerate, clearError]);
+  }, [messages, sendMessage, regenerate, clearError, atMessageCap]);
 
   const resolveUri = useTriggerUriResolver(actionPath);
 

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

@@ -46,12 +46,14 @@ export function DashboardAgentDraft({
 
   const submit = useCallback(
     (text: string) => {
+      // Suggested prompts reach here via the hero, bypassing the composer's cap guard.
+      if (capReached) return;
       const trimmed = text.trim();
       if (!trimmed) return;
       setInput("");
       onSubmit(trimmed);
     },
-    [onSubmit]
+    [onSubmit, capReached]
   );
 
   return (
@@ -61,16 +63,19 @@ export function DashboardAgentDraft({
       promoted={promotedPrompt}
       composer={
         capReached ? (
-          <AgentUpgradeBlock
-            limit={capReached.limit}
-            context={
-              <DashboardAgentContextBanner
-                projectSlug={projectSlug}
-                environmentSlug={environmentSlug}
-                currentPage={currentPage}
-              />
-            }
-          />
+          <div className="flex w-full flex-col gap-3">
+            {watchCard}
+            <AgentUpgradeBlock
+              limit={capReached.limit}
+              context={
+                <DashboardAgentContextBanner
+                  projectSlug={projectSlug}
+                  environmentSlug={environmentSlug}
+                  currentPage={currentPage}
+                />
+              }
+            />
+          </div>
         ) : (
           <div className="flex w-full flex-col gap-3">
             {watchCard}

apps/webapp/app/components/dashboard-agent/useAgentMessageQuota.ts

@@ -1,7 +1,6 @@
-import type { UIMessage } from "@ai-sdk/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
-import { countUserMessages, resolveMessageQuota, type MessageQuota } from "./message-quota";
+import { resolveMessageQuota, type MessageQuota } from "./message-quota";
 
 // Gated on billing PRESENCE, not the plan value: no subscription means billing isn't wired
 // up (self-hosted), so there is no cap and no upgrade UI. A wired-up, non-paying plan is free.
@@ -11,20 +10,30 @@ function useIsFreePlan(): boolean | undefined {
   return subscription.isPaying === false;
 }
 
-// `used` is the server's per-period count for the org. Re-read whenever the user sends, so
-// the running total tracks the message just sent without counting the transcript twice.
+// `used` is the server's per-period count for the org. Re-read once a turn settles — the
+// server increment happens mid-turn in the `.in` proxy, so reading on optimistic append
+// would lag the count by one message and show the cap a message late.
 export function useAgentMessageQuota({
   actionPath,
   chatId,
-  messages,
+  status,
 }: {
   actionPath: string;
   chatId: string;
-  messages: UIMessage[];
+  status: string;
 }): MessageQuota {
   const isFreePlan = useIsFreePlan();
   const [used, setUsed] = useState<number | undefined>(undefined);
-  const sentCount = countUserMessages(messages);
+
+  // Bumped each time the status leaves streaming/submitted, which drives the re-read.
+  const [settleTick, setSettleTick] = useState(0);
+  const prevStatus = useRef(status);
+  useEffect(() => {
+    const wasInFlight = prevStatus.current === "streaming" || prevStatus.current === "submitted";
+    const nowSettled = status === "ready" || status === "error";
+    prevStatus.current = status;
+    if (wasInFlight && nowSettled) setSettleTick((tick) => tick + 1);
+  }, [status]);
 
   useEffect(() => {
     if (isFreePlan !== true) return;
@@ -40,7 +49,7 @@ export function useAgentMessageQuota({
       }
     })();
     return () => controller.abort();
-  }, [isFreePlan, actionPath, chatId, sentCount]);
+  }, [isFreePlan, actionPath, chatId, settleTick]);
 
   return resolveMessageQuota({ isFreePlan, used });
 }