diff --git a/apps/web/app/[lang]/(dashboard)/dashboard/clone/clone-text-field.tsx b/apps/web/app/[lang]/(dashboard)/dashboard/clone/clone-text-field.tsx
index 007faa7e4..5a91cffb1 100644
--- a/apps/web/app/[lang]/(dashboard)/dashboard/clone/clone-text-field.tsx
+++ b/apps/web/app/[lang]/(dashboard)/dashboard/clone/clone-text-field.tsx
@@ -14,6 +14,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { CLONE_TEXT_MAX_LENGTH_VOXTRAL_PAID } from '@/lib/clone/constants';
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 import { cn } from '@/lib/utils';
 import { type CloneStateAction, formatCloneMessage } from './clone-state';
 
@@ -49,7 +50,7 @@ export function CloneTextField({
             data-testid="clone-text-input"
             disabled={disabled}
             id="text-to-convert"
-            maxLength={textMaxLength + 30}
+            maxLength={textMaxLength + CHARACTERS_LIMIT_GRACE}
             onChange={(e) => {
               dispatch({
                 patch: { text: e.target.value },
diff --git a/apps/web/components/grok-tts-editor.tsx b/apps/web/components/grok-tts-editor.tsx
index 55d2eab68..eba73bc90 100644
--- a/apps/web/components/grok-tts-editor.tsx
+++ b/apps/web/components/grok-tts-editor.tsx
@@ -49,6 +49,7 @@ import {
   grokTextToTipTapDoc,
   grokTipTapDocToText,
 } from '@/lib/tts-editor';
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 import { cn } from '@/lib/utils';
 import { UiState } from './tiptap/tiptap-extension/ui-state-extension';
 import { SlashDropdownMenu } from './tiptap/tiptap-ui/slash-dropdown-menu/slash-dropdown-menu';
@@ -207,6 +208,34 @@ function moveEditorSelectionToEnd(
   return selection;
 }
 
+interface AppliedEditorContent {
+  selection: EditorSelectionSnapshot;
+  text: string;
+}
+
+/**
+ * Replaces the document without re-entering `onUpdate`, and reports what the
+ * editor actually ended up with.
+ *
+ * `plainTextToDoc(text)` is only a request: ProseMirror coerces it to the
+ * schema and `AutoConvertGrokTags` can rewrite it again in an appended
+ * transaction, so the round trip is not guaranteed to be the identity. Because
+ * `emitUpdate: false` suppresses the update that used to report the result,
+ * callers must reconcile against the returned `text` rather than assume the
+ * text they passed in was applied verbatim.
+ */
+function applyEditorContent(
+  editor: EditorInstance,
+  text: string,
+): AppliedEditorContent {
+  editor.commands.setContent(plainTextToDoc(text), { emitUpdate: false });
+
+  return {
+    selection: moveEditorSelectionToEnd(editor),
+    text: grokTipTapDocToText(editor.getJSON()),
+  };
+}
+
 interface GrokSlashMenuConfig {
   allow?: NonNullable<SuggestionMenuProps['allow']>;
   customItems: SuggestionItem[];
@@ -297,6 +326,7 @@ export function GrokTTSEditor({
   const [currentLength, setCurrentLength] = useState(value.length);
   const charactersLimitRef = useRef(charactersLimit);
   const enforceCharactersLimitRef = useRef(enforceCharactersLimit);
+  const onChangeRef = useRef(onChange);
   const contentResetSelectionRef = useRef<EditorSelectionSnapshot | null>(null);
   const lastSelectionRef = useRef<EditorSelectionSnapshot>({
     empty: true,
@@ -307,7 +337,8 @@ export function GrokTTSEditor({
   useEffect(() => {
     charactersLimitRef.current = charactersLimit;
     enforceCharactersLimitRef.current = enforceCharactersLimit;
-  }, [charactersLimit, enforceCharactersLimit]);
+    onChangeRef.current = onChange;
+  }, [charactersLimit, enforceCharactersLimit, onChange]);
 
   const editor = useEditor({
     content: plainTextToDoc(value),
@@ -373,15 +404,19 @@ export function GrokTTSEditor({
     },
     onUpdate: ({ editor: nextEditor }) => {
       const fullText = grokTipTapDocToText(nextEditor.getJSON());
-      const text = enforceCharactersLimitRef.current
-        ? fullText.slice(0, charactersLimitRef.current + 10)
+      // Clamps user input only, mirroring `maxLength` on the other limited
+      // textareas. Text arriving from the parent is applied as given — see the
+      // content synchronization effect below.
+      const clampedText = enforceCharactersLimitRef.current
+        ? fullText.slice(0, charactersLimitRef.current + CHARACTERS_LIMIT_GRACE)
         : fullText;
+      let text = fullText;
 
-      if (text !== fullText) {
-        nextEditor.commands.setContent(plainTextToDoc(text));
-        const resetSelection = moveEditorSelectionToEnd(nextEditor);
-        lastSelectionRef.current = resetSelection;
-        contentResetSelectionRef.current = resetSelection;
+      if (clampedText !== fullText) {
+        const applied = applyEditorContent(nextEditor, clampedText);
+        lastSelectionRef.current = applied.selection;
+        contentResetSelectionRef.current = applied.selection;
+        text = applied.text;
       }
 
       setCurrentLength(text.length);
@@ -400,11 +435,32 @@ export function GrokTTSEditor({
       return;
     }
 
-    editor.commands.setContent(plainTextToDoc(value));
-    const resetSelection = moveEditorSelectionToEnd(editor);
-    lastSelectionRef.current = resetSelection;
-    contentResetSelectionRef.current = resetSelection;
-    setCurrentLength(value.length);
+    // Applied as given, deliberately not clamped. `useEditor`'s initial
+    // `content` above cannot clamp either, and `audio-generator.tsx` shares one
+    // `text` state between this editor and the non-Grok one, so switching from
+    // a higher-limit voice mounts this editor with over-limit text. Clamping
+    // here would truncate that text on the sync path but not on mount, and
+    // would silently destroy input the user can still see. Over-limit text is
+    // surfaced by the red counter and blocks generation through
+    // `textIsOverLimit` in the parent.
+    const applied = applyEditorContent(editor, value);
+    lastSelectionRef.current = applied.selection;
+    contentResetSelectionRef.current = applied.selection;
+    setCurrentLength(applied.text.length);
+
+    // `applyEditorContent` suppresses the update that used to push the applied
+    // text back out, so reconcile here instead: when the editor clamps or
+    // normalizes what it was handed, the parent would otherwise keep a value
+    // that no longer matches the visible document. `applied.text` was read back
+    // from the editor, so the next pass hits the early return above and this
+    // settles after one extra render.
+    //
+    // Read through the ref rather than depending on `onChange`, so an inline
+    // parent callback cannot make this effect re-run — and reset the document
+    // and caret — on renders where `value` did not change.
+    if (applied.text !== value) {
+      onChangeRef.current(applied.text);
+    }
   }, [editor, value]);
 
   const insertInstantTag = (tag: InstantTagDef) => {
diff --git a/apps/web/components/non-grok-editor.tsx b/apps/web/components/non-grok-editor.tsx
index ce059a2d5..8e714810f 100644
--- a/apps/web/components/non-grok-editor.tsx
+++ b/apps/web/components/non-grok-editor.tsx
@@ -4,6 +4,7 @@ import { Crown, Loader2, Maximize2, Minimize2, Sparkles } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 import { cn } from '@/lib/utils';
 import { AnimatedPromptTextarea } from './audio-generator';
 import { Button } from './ui/button';
@@ -62,7 +63,7 @@ export function NonGrokPromptEditor({
         maxLength={
           textareaMaxLength === null
             ? undefined
-            : (textareaMaxLength ?? charactersLimit + 10)
+            : (textareaMaxLength ?? charactersLimit + CHARACTERS_LIMIT_GRACE)
         }
         onChange={(e) => onTextChange(e.target.value)}
         placeholder={t('textAreaPlaceholder')}
diff --git a/apps/web/components/voice-selector.tsx b/apps/web/components/voice-selector.tsx
index c6f065a14..72f6a0a95 100644
--- a/apps/web/components/voice-selector.tsx
+++ b/apps/web/components/voice-selector.tsx
@@ -20,6 +20,7 @@ import {
 import { VoiceSelect } from '@/components/voice-select';
 import { getEmotionTags, getGeminiStyleCharacterLimit } from '@/lib/ai';
 import { resizeTextarea } from '@/lib/react-textarea-autosize';
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 import { capitalizeFirstLetter, cn, getTtsProvider } from '@/lib/utils';
 import { AudioPlayerWithContext } from './audio-player-with-context';
 import { GrokTaggedText } from './grok-tagged-text';
@@ -163,7 +164,7 @@ export function VoiceSelector({
             <Textarea
               className="textarea-1 pr-10 transition-[height] duration-200 ease-in-out"
               data-testid="generate-style-textarea"
-              maxLength={styleCharacterLimit + 30}
+              maxLength={styleCharacterLimit + CHARACTERS_LIMIT_GRACE}
               onChange={(e) => setSelectedStyle(e.target.value)}
               placeholder={t('voiceSelector.selectStyleTextareaPlaceholder')}
               ref={textareaRef}
diff --git a/apps/web/lib/ui-constants.ts b/apps/web/lib/ui-constants.ts
index 3eaf64bae..70f31c07a 100644
--- a/apps/web/lib/ui-constants.ts
+++ b/apps/web/lib/ui-constants.ts
@@ -1 +1,14 @@
 export const TOAST_DURATION = 6000;
+
+/**
+ * Extra characters accepted above a text field's character limit before input
+ * is cut off. Every limited textarea on the generate and clone pages uses this
+ * one value, so the experience does not change with the selected TTS model or
+ * the clone language.
+ *
+ * The grace window exists so going over the limit is visible and fixable: the
+ * character counter turns red at the limit while the text stays editable,
+ * instead of the field silently refusing keystrokes at the exact boundary.
+ * Generation is still blocked at the real limit, which the API also enforces.
+ */
+export const CHARACTERS_LIMIT_GRACE = 30;
diff --git a/apps/web/tests/components/audio-generator.test.tsx b/apps/web/tests/components/audio-generator.test.tsx
index 5d6e20429..bc671d78f 100644
--- a/apps/web/tests/components/audio-generator.test.tsx
+++ b/apps/web/tests/components/audio-generator.test.tsx
@@ -12,6 +12,7 @@ import { NextIntlClientProvider } from 'next-intl';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { AudioGenerator } from '@/components/audio-generator';
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 
 const mockToastFn = vi.hoisted(() =>
   Object.assign(vi.fn(), {
@@ -623,7 +624,7 @@ describe('AudioGenerator', () => {
     ).toBeDisabled();
     expect(
       screen.getByPlaceholderText(baseDict.textAreaPlaceholder),
-    ).toHaveAttribute('maxlength', '510');
+    ).toHaveAttribute('maxlength', String(500 + CHARACTERS_LIMIT_GRACE));
   });
 
   it('removes the paid non-Grok character limit when split audios is enabled', async () => {
@@ -634,7 +635,10 @@ describe('AudioGenerator', () => {
     });
 
     const input = screen.getByPlaceholderText(baseDict.textAreaPlaceholder);
-    expect(input).toHaveAttribute('maxlength', '1010');
+    expect(input).toHaveAttribute(
+      'maxlength',
+      String(1000 + CHARACTERS_LIMIT_GRACE),
+    );
 
     await user.click(
       screen.getByRole('checkbox', {
diff --git a/apps/web/tests/components/grok-tts-editor.test.tsx b/apps/web/tests/components/grok-tts-editor.test.tsx
index 2c5fea277..dc87054a7 100644
--- a/apps/web/tests/components/grok-tts-editor.test.tsx
+++ b/apps/web/tests/components/grok-tts-editor.test.tsx
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import '@testing-library/jest-dom/vitest';
 import {
+  act,
   fireEvent,
   render,
   screen,
@@ -9,9 +10,12 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { NextIntlClientProvider } from 'next-intl';
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { GrokTTSEditor } from '@/components/grok-tts-editor';
+import { GROK_EMPTY_WRAPPING_TEXT } from '@/lib/tts-editor';
+import { CHARACTERS_LIMIT_GRACE } from '@/lib/ui-constants';
 import messages from '@/messages/en.json';
 
 const UNSUPPORTED_GROK_TAG_HIGHLIGHT_CLASSES = [
@@ -23,6 +27,12 @@ const UNSUPPORTED_GROK_TAG_HIGHLIGHT_CLASSES = [
 const SUPPORTED_GROK_TAG_CHIP_SELECTOR =
   '[data-grok-instant-tag], [data-grok-wrapper-boundary-node]';
 
+const TEST_LIMIT = 5;
+// Where `onUpdate` cuts user input, and the threshold over-limit text must
+// clear for the no-clamping assertions to mean anything.
+const CLAMP_THRESHOLD = TEST_LIMIT + CHARACTERS_LIMIT_GRACE;
+const OVER_LIMIT_TEXT = 'A'.repeat(CLAMP_THRESHOLD + 5);
+
 function findEditor() {
   return screen.findByText(
     (_, element) => element?.classList.contains('ProseMirror') ?? false,
@@ -42,6 +52,34 @@ function getSuggestionDecoration(editor: HTMLElement) {
   return editor.querySelector('[data-decoration-content="Filter..."]');
 }
 
+interface EditorProps {
+  charactersLimit?: number;
+  enforceCharactersLimit?: boolean;
+  onChange?: (text: string) => void;
+  placeholder?: string;
+  selectedGrokLanguage?: string;
+  setSelectedGrokLanguage?: (text: string) => void;
+  value?: string;
+}
+
+type ResolvedEditorProps = Required<EditorProps>;
+
+function editorTree(props: ResolvedEditorProps) {
+  return (
+    <NextIntlClientProvider locale="en" messages={messages}>
+      <GrokTTSEditor
+        charactersLimit={props.charactersLimit}
+        enforceCharactersLimit={props.enforceCharactersLimit}
+        onChange={props.onChange}
+        placeholder={props.placeholder}
+        selectedGrokLanguage={props.selectedGrokLanguage}
+        setSelectedGrokLanguage={props.setSelectedGrokLanguage}
+        value={props.value}
+      />
+    </NextIntlClientProvider>
+  );
+}
+
 function renderEditor({
   charactersLimit = 500,
   enforceCharactersLimit = true,
@@ -50,27 +88,70 @@ function renderEditor({
   selectedGrokLanguage = 'auto',
   setSelectedGrokLanguage = vi.fn(),
   value = '',
+}: EditorProps = {}) {
+  const props: ResolvedEditorProps = {
+    charactersLimit,
+    enforceCharactersLimit,
+    onChange,
+    placeholder,
+    selectedGrokLanguage,
+    setSelectedGrokLanguage,
+    value,
+  };
+  const rendered = render(editorTree(props));
+
+  return {
+    ...rendered,
+    // Re-renders against the same resolved props as the initial render, so a
+    // test can change one prop without silently dropping the others.
+    rerenderWith: (nextProps: EditorProps) =>
+      rendered.rerender(editorTree({ ...props, ...nextProps })),
+  };
+}
+
+// `waitFor` resolves on the first matching call, so it cannot prove a value was
+// emitted only once. Settling pending effects first makes the follow-up
+// `toHaveBeenCalledTimes` assertion catch a duplicate arriving a tick later.
+async function settleEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+/**
+ * A controlled parent that stores whatever the editor emits, the way
+ * `audio-generator.tsx` does. The other tests pass a bare mock that never
+ * feeds the value back, so only this harness can show that the editor's
+ * reconciliation reaches a fixed point instead of driving the parent in a
+ * loop — the failure mode this component's `emitUpdate: false` exists to stop.
+ */
+function ControlledEditorHarness({
+  externalValue,
+  onChange,
 }: {
-  charactersLimit?: number;
-  enforceCharactersLimit?: boolean;
-  onChange?: (text: string) => void;
-  placeholder?: string;
-  selectedGrokLanguage?: string;
-  setSelectedGrokLanguage?: (text: string) => void;
-  value?: string;
-} = {}) {
-  return render(
+  externalValue: string;
+  onChange: (text: string) => void;
+}) {
+  const [value, setValue] = useState('');
+
+  return (
     <NextIntlClientProvider locale="en" messages={messages}>
       <GrokTTSEditor
-        charactersLimit={charactersLimit}
-        enforceCharactersLimit={enforceCharactersLimit}
-        onChange={onChange}
-        placeholder={placeholder}
-        selectedGrokLanguage={selectedGrokLanguage}
-        setSelectedGrokLanguage={setSelectedGrokLanguage}
+        charactersLimit={500}
+        onChange={(text) => {
+          onChange(text);
+          setValue(text);
+        }}
+        placeholder={messages.generate.textAreaPlaceholder}
+        selectedGrokLanguage="auto"
+        setSelectedGrokLanguage={vi.fn()}
         value={value}
       />
-    </NextIntlClientProvider>,
+      <button onClick={() => setValue(externalValue)} type="button">
+        set external value
+      </button>
+      <output data-testid="parent-value">{value}</output>
+    </NextIntlClientProvider>
   );
 }
 
@@ -191,6 +272,138 @@ describe('GrokTTSEditor', () => {
     expect(screen.getByText('17 / 500')).toBeInTheDocument();
   });
 
+  it('synchronizes an external value without emitting onChange', async () => {
+    const onChange = vi.fn();
+    const rendered = renderEditor({ onChange, value: 'Initial value' });
+    const editor = await findEditor();
+
+    onChange.mockClear();
+    rendered.rerenderWith({ value: 'External value' });
+
+    await waitFor(() => {
+      expect(editor).toHaveTextContent('External value');
+      expect(screen.getByText('14 / 500')).toBeInTheDocument();
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports the normalized text when an external value does not survive the editor round trip', async () => {
+    const onChange = vi.fn();
+    // Serialization strips GROK_EMPTY_WRAPPING_TEXT wherever it appears, so
+    // this 11-character value renders as a 10-character document.
+    const externalValue = `Hello${GROK_EMPTY_WRAPPING_TEXT}world`;
+    const rendered = renderEditor({ onChange, value: 'Initial value' });
+
+    await findEditor();
+    onChange.mockClear();
+    rendered.rerenderWith({ value: externalValue });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith('Helloworld');
+    });
+    await settleEffects();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('generate-character-count')).toHaveTextContent(
+      '10 / 500',
+    );
+  });
+
+  it('settles after one emission when a controlled parent stores the result', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <ControlledEditorHarness
+        externalValue={`Hello${GROK_EMPTY_WRAPPING_TEXT}world`}
+        onChange={onChange}
+      />,
+    );
+
+    await findEditor();
+    await user.click(
+      screen.getByRole('button', { name: 'set external value' }),
+    );
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith('Helloworld');
+    });
+    await settleEffects();
+
+    // The parent now holds exactly what the editor contains, so the next pass
+    // takes the `current === value` early return rather than emitting again.
+    // A second emission here would mean the reconciliation never converges.
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('parent-value')).toHaveTextContent('Helloworld');
+    expect(screen.getByTestId('generate-character-count')).toHaveTextContent(
+      '10 / 500',
+    );
+  });
+
+  // The character limit guards what the user types or pastes; it never rewrites
+  // text handed down from the parent. These two cases must agree, because
+  // audio-generator.tsx shares one `text` state across voices, so over-limit
+  // text can arrive either on mount or through a prop change. Both values are
+  // past the clamp threshold, so a regression that clamps them would show up.
+  it('mounts with an over-limit value without clamping it', async () => {
+    const onChange = vi.fn();
+
+    renderEditor({
+      charactersLimit: TEST_LIMIT,
+      onChange,
+      value: OVER_LIMIT_TEXT,
+    });
+
+    const editor = await findEditor();
+    await settleEffects();
+
+    expect(editor).toHaveTextContent(OVER_LIMIT_TEXT);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByTestId('generate-character-count')).toHaveTextContent(
+      `${OVER_LIMIT_TEXT.length} / ${TEST_LIMIT}`,
+    );
+  });
+
+  it('applies an over-limit external value without clamping it', async () => {
+    const onChange = vi.fn();
+    const rendered = renderEditor({
+      charactersLimit: TEST_LIMIT,
+      onChange,
+      value: '',
+    });
+    const editor = await findEditor();
+
+    onChange.mockClear();
+    rendered.rerenderWith({ value: OVER_LIMIT_TEXT });
+
+    await waitFor(() => {
+      expect(editor).toHaveTextContent(OVER_LIMIT_TEXT);
+    });
+    await settleEffects();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByTestId('generate-character-count')).toHaveTextContent(
+      `${OVER_LIMIT_TEXT.length} / ${TEST_LIMIT}`,
+    );
+  });
+
+  it('emits one clamped value when pasted text exceeds the character limit', async () => {
+    const onChange = vi.fn();
+    const pastedText = OVER_LIMIT_TEXT;
+    const clampedText = 'A'.repeat(CLAMP_THRESHOLD);
+
+    renderEditor({ charactersLimit: TEST_LIMIT, onChange });
+
+    const editor = await findEditor();
+    onChange.mockClear();
+    pasteIntoEditor(editor, pastedText);
+
+    await waitFor(() => {
+      expect(editor).toHaveTextContent(clampedText);
+      expect(onChange).toHaveBeenCalledWith(clampedText);
+    });
+    await settleEffects();
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
   it('opens the effects popover and shows available effect actions', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -322,18 +535,7 @@ describe('GrokTTSEditor', () => {
     const editor = await findEditor();
     selectEditorText(editor, 'world');
 
-    rendered.rerender(
-      <NextIntlClientProvider locale="en" messages={messages}>
-        <GrokTTSEditor
-          charactersLimit={500}
-          onChange={onChange}
-          placeholder={messages.generate.textAreaPlaceholder}
-          selectedGrokLanguage="auto"
-          setSelectedGrokLanguage={vi.fn()}
-          value="Hi"
-        />
-      </NextIntlClientProvider>,
-    );
+    rendered.rerenderWith({ value: 'Hi' });
 
     await waitFor(() => {
       expect(editor).toHaveTextContent('Hi');