fix(web): reject oversized prompts before provider turn start

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

@@ -106,6 +106,11 @@ import { buildExpandedImagePreview, type ExpandedImagePreview } from "./Expanded
 import { basenameOfPath } from "../../pierre-icons";
 import { cn, randomUUID } from "~/lib/utils";
 import { Separator } from "../ui/separator";
+import {
+  getComposerPromptLengthValidationMessage,
+  submitComposerDraft,
+} from "./composerSubmission";
+import { ComposerPromptLengthValidation } from "./ComposerPromptLengthValidation";
 
 type ComposerCommandMenuPosition = {
   bottom: number;
@@ -947,6 +952,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const [isComposerPrimaryActionsCompact, setIsComposerPrimaryActionsCompact] = useState(false);
   const [isComposerModelPickerOpen, setIsComposerModelPickerOpen] = useState(false);
   const [isComposerFocused, setIsComposerFocused] = useState(false);
+  const [composerSubmissionError, setComposerSubmissionError] = useState<string | null>(null);
   const [composerMenuAnchor, setComposerMenuAnchor] = useState<HTMLDivElement | null>(null);
   const [isStashMenuOpen, setIsStashMenuOpen] = useState(false);
   const [stashPulse, setStashPulse] = useState<{ key: number; active: boolean }>({
@@ -1306,6 +1312,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     setComposerCursor((existing) => clampCollapsedComposerCursor(prompt, existing));
   }, [prompt, promptRef]);
 
+  useEffect(() => {
+    if (composerSubmissionError === null) return;
+    const nextError = getComposerPromptLengthValidationMessage(prompt);
+    if (nextError !== composerSubmissionError) {
+      setComposerSubmissionError(nextError);
+    }
+  }, [composerSubmissionError, prompt]);
+
   useEffect(() => {
     composerImagesRef.current = composerImages;
   }, [composerImages, composerImagesRef]);
@@ -1397,6 +1411,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // ------------------------------------------------------------------
   useEffect(() => {
     setComposerHighlightedItemId(null);
+    setComposerSubmissionError(null);
     setComposerCursor(collapseExpandedComposerCursor(promptRef.current, promptRef.current.length));
     setComposerTrigger(detectComposerTrigger(promptRef.current, promptRef.current.length));
     dragDepthRef.current = 0;
@@ -1824,7 +1839,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         });
         return;
       }
-      onSend(event);
+      const submission = submitComposerDraft({
+        prompt: promptRef.current,
+        event,
+        onSend,
+      });
+      setComposerSubmissionError(submission.validationMessage);
+      if (!submission.didDispatch) return;
       if (shouldBlurMobileComposerOnSubmit()) {
         blurMobileComposerAfterSend();
       }
@@ -1835,6 +1856,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       isSendDisabled,
       noProviderAvailable,
       onSend,
+      promptRef,
       shouldBlurMobileComposerOnSubmit,
     ],
   );
@@ -3086,6 +3108,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
             </div>
           </div>
 
+          <ComposerPromptLengthValidation message={composerSubmissionError} />
+
           {/* Bottom toolbar */}
           {isComposerCollapsedMobile ? null : activePendingApproval ? (
             <div className="flex items-center justify-end gap-2 px-3 pb-3 sm:px-4 sm:pb-4">

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

@@ -0,0 +1,23 @@
+import { PROVIDER_SEND_TURN_MAX_INPUT_CHARS } from "@t3tools/contracts";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { getComposerPromptLengthValidationMessage } from "./composerSubmission";
+import { ComposerPromptLengthValidation } from "./ComposerPromptLengthValidation";
+
+describe("ComposerPromptLengthValidation", () => {
+  it("renders oversized prompt feedback as an actionable composer alert", () => {
+    const message = getComposerPromptLengthValidationMessage(
+      "x".repeat(PROVIDER_SEND_TURN_MAX_INPUT_CHARS + 1),
+    );
+
+    const markup = renderToStaticMarkup(<ComposerPromptLengthValidation message={message} />);
+
+    expect(markup).toContain('role="alert"');
+    expect(markup).toContain('data-chat-composer-validation="prompt-length"');
+    expect(markup).toContain(
+      "Prompt is 1 character over the 120,000-character limit. Shorten or split it before sending.",
+    );
+    expect(markup).not.toContain("ProviderValidationError");
+  });
+});

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

@@ -0,0 +1,13 @@
+export function ComposerPromptLengthValidation({ message }: { message: string | null }) {
+  if (!message) return null;
+
+  return (
+    <p
+      role="alert"
+      className="px-3 pb-2 text-xs text-destructive sm:px-4"
+      data-chat-composer-validation="prompt-length"
+    >
+      {message}
+    </p>
+  );
+}

apps/web/src/components/chat/composerSubmission.test.ts

@@ -0,0 +1,53 @@
+import { PROVIDER_SEND_TURN_MAX_INPUT_CHARS } from "@t3tools/contracts";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import { submitComposerDraft } from "./composerSubmission";
+
+describe("submitComposerDraft", () => {
+  it("keeps an oversized draft editable and sends a corrected follow-up", () => {
+    let draft = "x".repeat(PROVIDER_SEND_TURN_MAX_INPUT_CHARS + 1);
+    let validationMessage: string | null = null;
+    const dispatchedDrafts: string[] = [];
+    const preventDefault = vi.fn();
+
+    const submit = () => {
+      const result = submitComposerDraft({
+        prompt: draft,
+        event: { preventDefault },
+        onSend: () => dispatchedDrafts.push(draft),
+      });
+      validationMessage = result.validationMessage;
+    };
+
+    submit();
+
+    expect(dispatchedDrafts).toEqual([]);
+    expect(draft).toHaveLength(PROVIDER_SEND_TURN_MAX_INPUT_CHARS + 1);
+    expect(validationMessage).toBe(
+      "Prompt is 1 character over the 120,000-character limit. Shorten or split it before sending.",
+    );
+    expect(preventDefault).toHaveBeenCalledOnce();
+
+    draft = "Corrected prompt";
+    submit();
+
+    expect(dispatchedDrafts).toEqual(["Corrected prompt"]);
+    expect(validationMessage).toBeNull();
+  });
+
+  it("allows a draft at the shared character limit through the normal send path", () => {
+    const draft = "x".repeat(PROVIDER_SEND_TURN_MAX_INPUT_CHARS);
+    const onSend = vi.fn();
+    const preventDefault = vi.fn();
+
+    const result = submitComposerDraft({
+      prompt: draft,
+      event: { preventDefault },
+      onSend,
+    });
+
+    expect(result).toEqual({ validationMessage: null, didDispatch: true });
+    expect(onSend).toHaveBeenCalledOnce();
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+});

apps/web/src/components/chat/composerSubmission.ts

@@ -0,0 +1,26 @@
+import { PROVIDER_SEND_TURN_MAX_INPUT_CHARS } from "@t3tools/contracts";
+
+type ComposerSubmitEvent = { preventDefault: () => void };
+
+export function getComposerPromptLengthValidationMessage(prompt: string): string | null {
+  const excessCharacters = prompt.length - PROVIDER_SEND_TURN_MAX_INPUT_CHARS;
+  if (excessCharacters <= 0) return null;
+
+  const characterLabel = excessCharacters === 1 ? "character" : "characters";
+  return `Prompt is ${excessCharacters.toLocaleString("en-US")} ${characterLabel} over the ${PROVIDER_SEND_TURN_MAX_INPUT_CHARS.toLocaleString("en-US")}-character limit. Shorten or split it before sending.`;
+}
+
+export function submitComposerDraft(options: {
+  prompt: string;
+  event: ComposerSubmitEvent | undefined;
+  onSend: (event?: ComposerSubmitEvent) => void;
+}): { validationMessage: string | null; didDispatch: boolean } {
+  const validationMessage = getComposerPromptLengthValidationMessage(options.prompt);
+  if (validationMessage) {
+    options.event?.preventDefault();
+    return { validationMessage, didDispatch: false };
+  }
+
+  options.onSend(options.event);
+  return { validationMessage: null, didDispatch: true };
+}

docs/user/composer.md

@@ -0,0 +1,5 @@
+# Message composer
+
+Messages can contain up to 120,000 characters. If a draft is longer, T3 Code keeps it in the
+composer and shows how many characters need to be removed. Shorten the draft or split it into
+multiple messages, then send again in the same thread.