diff --git a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
index 9977e77087..1e5300948f 100644
--- a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
+++ b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
@@ -364,6 +364,92 @@ describe('PreviewMessageController', () => {
     })).resolves.toMatchObject({contentElementId: 1, command: {some: 'COMMAND'}});
   });
 
+  it('selects and highlights a created content element thread in iframe', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        contentElements: [{id: 1, permaId: 10}]
+      })
+    });
+    entry.reviewSession = factories.reviewSession();
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT') {
+          resolve(event.data);
+        }
+      });
+      entry.reviewSession.trigger('create:thread', {
+        id: 7, subjectType: 'ContentElement', subjectId: 10
+      });
+    })).resolves.toMatchObject({
+      type: 'SELECT',
+      payload: {id: 1, type: 'contentElementComments', highlightedThreadId: 7}
+    });
+  });
+
+  it('selects and highlights a created section thread in iframe', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 5, permaId: 50}]
+      })
+    });
+    entry.reviewSession = factories.reviewSession();
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT') {
+          resolve(event.data);
+        }
+      });
+      entry.reviewSession.trigger('create:thread', {
+        id: 3, subjectType: 'Section', subjectId: 50
+      });
+    })).resolves.toMatchObject({
+      type: 'SELECT',
+      payload: {id: 5, type: 'sectionComments', highlightedThreadId: 3}
+    });
+  });
+
+  it('ignores created threads of deleted subjects', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        contentElements: [{id: 1, permaId: 10}]
+      })
+    });
+    entry.reviewSession = factories.reviewSession();
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    // Expecting the SELECT of the known subject to arrive first pins the
+    // absence of one for the deleted subject.
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT') {
+          resolve(event.data);
+        }
+      });
+      entry.reviewSession.trigger('create:thread', {
+        id: 7, subjectType: 'ContentElement', subjectId: 999
+      });
+      entry.reviewSession.trigger('create:thread', {
+        id: 8, subjectType: 'ContentElement', subjectId: 10
+      });
+    })).resolves.toMatchObject({
+      type: 'SELECT',
+      payload: {id: 1, type: 'contentElementComments', highlightedThreadId: 8}
+    });
+  });
+
   it('sends SELECT message to iframe on resetSelection event on model', async () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       entryTypeSeed: normalizeSeed({
diff --git a/entry_types/scrolled/package/spec/editor/views/NewThreadView-spec.js b/entry_types/scrolled/package/spec/editor/views/NewThreadView-spec.js
index 20242acd48..bd7e00cd21 100644
--- a/entry_types/scrolled/package/spec/editor/views/NewThreadView-spec.js
+++ b/entry_types/scrolled/package/spec/editor/views/NewThreadView-spec.js
@@ -8,6 +8,7 @@ import {NewThreadView} from 'editor/views/NewThreadView';
 import {factories, useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
 import {useEditorGlobals} from 'support';
 import {fireEvent} from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
 
 describe('NewThreadView', () => {
   const {createEntry} = useEditorGlobals();
@@ -59,6 +60,42 @@ describe('NewThreadView', () => {
     expect(getByText('Comments')).toBeInTheDocument();
   });
 
+  // Submitting cannot reach the session here: jsdom leaves MessageEvent
+  // source unset for same-window posts, so the handler drops the create
+  // message. NewThreadForm-spec covers the form disabling itself.
+  it('stores the entered text as a draft when the view is closed', async () => {
+    const user = userEvent.setup();
+    const entry = createEntry({});
+    entry.reviewSession = factories.reviewSession();
+    const view = buildView(entry);
+
+    const {getByPlaceholderText} = renderBackboneView(view);
+
+    await user.type(getByPlaceholderText('Add a comment...'), 'Half a thought');
+    view.close();
+
+    expect(entry.reviewSession.drafts).toEqual({
+      'ContentElement:10': {
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        body: 'Half a thought',
+        pending: false
+      }
+    });
+  });
+
+  it('restores the draft stored for the subject', () => {
+    const entry = createEntry({});
+    entry.reviewSession = factories.reviewSession();
+    entry.reviewSession.setDraft({
+      subjectType: 'ContentElement', subjectId: 10, body: 'Half a thought'
+    });
+
+    const {getByPlaceholderText} = renderBackboneView(buildView(entry));
+
+    expect(getByPlaceholderText('Add a comment...')).toHaveValue('Half a thought');
+  });
+
   it('navigates to the comments selection tab when the back link is clicked', () => {
     const entry = createEntry({});
     entry.reviewSession = factories.reviewSession();
diff --git a/entry_types/scrolled/package/spec/review/NewThreadForm-spec.js b/entry_types/scrolled/package/spec/review/NewThreadForm-spec.js
new file mode 100644
index 0000000000..7466a86042
--- /dev/null
+++ b/entry_types/scrolled/package/spec/review/NewThreadForm-spec.js
@@ -0,0 +1,188 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import {act, waitFor} from '@testing-library/react';
+import {useFakeTranslations} from 'pageflow/testHelpers';
+
+import {NewThreadForm} from 'review/NewThreadForm';
+import {postReviewStateDraftsChangeMessage} from 'review/postMessage';
+import {renderWithReviewState} from 'support/renderWithReviewState';
+
+const seed = {
+  sections: [{id: 1, permaId: 1}],
+  contentElements: [{id: 1, permaId: 10, sectionId: 1, typeName: 'textBlock'}]
+};
+
+function draft({body, pending = false}) {
+  return {
+    'ContentElement:10': {
+      subjectType: 'ContentElement', subjectId: 10, body, pending
+    }
+  };
+}
+
+function renderForm(options = {}) {
+  return renderWithReviewState(
+    <NewThreadForm subjectType="ContentElement" subjectId={10} />,
+    {seed, ...options}
+  );
+}
+
+function postDraftsChange(drafts) {
+  act(() => postReviewStateDraftsChangeMessage(window, drafts));
+}
+
+describe('NewThreadForm', () => {
+  // A spy left behind by a failing spec would swallow the simulated
+  // review state messages of the ones after it.
+  afterEach(() => jest.restoreAllMocks());
+
+  useFakeTranslations({
+    'pageflow_scrolled.review.add_comment_placeholder': 'Add a comment...',
+    'pageflow_scrolled.review.send': 'Send',
+    'pageflow_scrolled.review.enter_for_new_line': 'Enter for new line'
+  });
+
+  describe('draft restoring', () => {
+    it('starts out with the stored draft of the subject', () => {
+      const {getByPlaceholderText} = renderForm({
+        drafts: draft({body: 'Half a thought'})
+      });
+
+      expect(getByPlaceholderText('Add a comment...')).toHaveValue('Half a thought');
+    });
+
+    it('starts out empty without a draft', () => {
+      const {getByPlaceholderText} = renderForm();
+
+      expect(getByPlaceholderText('Add a comment...')).toHaveValue('');
+    });
+  });
+
+  describe('draft storing', () => {
+    it('stores the text when the form goes away', async () => {
+      const user = userEvent.setup();
+      const setDraft = jest.fn();
+
+      const {getByPlaceholderText, unmount} = renderForm({setDraft});
+
+      await user.type(getByPlaceholderText('Add a comment...'), 'Half a thought');
+      unmount();
+
+      expect(setDraft).toHaveBeenCalledWith({
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        body: 'Half a thought'
+      });
+    });
+
+    // Blank bodies make the session drop the draft.
+    it('stores a blank text once the input has been cleared', async () => {
+      const user = userEvent.setup();
+      const setDraft = jest.fn();
+
+      const {getByPlaceholderText, unmount} = renderForm({
+        drafts: draft({body: 'Never mind'}), setDraft
+      });
+
+      await user.clear(getByPlaceholderText('Add a comment...'));
+      unmount();
+
+      expect(setDraft).toHaveBeenLastCalledWith(
+        expect.objectContaining({body: ''})
+      );
+    });
+
+    // The form does not render again between the draft being dropped and
+    // the list taking it off screen, so the pending draft is the last one
+    // it saw.
+    it('does not store the text while the session is creating the thread', () => {
+      const setDraft = jest.fn();
+
+      const {unmount} = renderForm({
+        drafts: draft({body: 'Looks good', pending: true}),
+        setDraft
+      });
+
+      unmount();
+
+      expect(setDraft).not.toHaveBeenCalled();
+    });
+
+    it('does not store the text after submitting', async () => {
+      const user = userEvent.setup();
+      const setDraft = jest.fn();
+
+      const {getByPlaceholderText, getByRole, unmount} = renderForm({setDraft});
+
+      await user.type(getByPlaceholderText('Add a comment...'), 'Looks good');
+      await user.click(getByRole('button', {name: 'Send'}));
+
+      unmount();
+
+      expect(setDraft).not.toHaveBeenCalled();
+    });
+
+    it('stores the text again when creating the thread failed', async () => {
+      const user = userEvent.setup();
+      const setDraft = jest.fn();
+
+      const {getByPlaceholderText, getByRole, unmount} = renderForm({setDraft});
+
+      await user.type(getByPlaceholderText('Add a comment...'), 'Looks good');
+      await user.click(getByRole('button', {name: 'Send'}));
+
+      postDraftsChange(draft({body: 'Looks good', pending: false}));
+      await waitFor(() =>
+        expect(getByPlaceholderText('Add a comment...')).not.toBeDisabled()
+      );
+
+      await user.type(getByPlaceholderText('Add a comment...'), ' after all');
+      unmount();
+
+      expect(setDraft).toHaveBeenCalledWith(
+        expect.objectContaining({body: 'Looks good after all'})
+      );
+    });
+  });
+
+  describe('while the thread is being created', () => {
+    it('disables the input and shows a spinner', () => {
+      const {getByPlaceholderText, getByRole, container} = renderForm({
+        drafts: draft({body: 'Looks good', pending: true})
+      });
+
+      expect(getByPlaceholderText('Add a comment...')).toBeDisabled();
+      expect(getByRole('button', {name: 'Send'})).toBeDisabled();
+      expect(container.querySelector('[data-file-name="SvgSpinner"]')).not.toBeNull();
+    });
+
+    it('ignores further submits', async () => {
+      const user = userEvent.setup();
+      const postMessage = jest.spyOn(window.top, 'postMessage').mockImplementation(() => {});
+
+      const {getByRole} = renderForm({
+        drafts: draft({body: 'Looks good', pending: true})
+      });
+
+      await user.click(getByRole('button', {name: 'Send'}));
+
+      expect(postMessage).not.toHaveBeenCalledWith(
+        expect.objectContaining({type: 'CREATE_COMMENT_THREAD'}),
+        expect.anything()
+      );
+
+      postMessage.mockRestore();
+    });
+
+    it('is editable again once the draft is no longer pending', () => {
+      const {getByPlaceholderText, getByRole} = renderForm({
+        drafts: draft({body: 'Looks good', pending: false})
+      });
+
+      expect(getByPlaceholderText('Add a comment...')).not.toBeDisabled();
+      expect(getByRole('button', {name: 'Send'})).toBeEnabled();
+      expect(getByPlaceholderText('Add a comment...')).toHaveValue('Looks good');
+    });
+  });
+});
diff --git a/entry_types/scrolled/package/spec/review/ReplyForm-spec.js b/entry_types/scrolled/package/spec/review/ReplyForm-spec.js
new file mode 100644
index 0000000000..9542d2faac
--- /dev/null
+++ b/entry_types/scrolled/package/spec/review/ReplyForm-spec.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import {act, waitFor} from '@testing-library/react';
+import {useFakeTranslations} from 'pageflow/testHelpers';
+
+import {ReplyForm} from 'review/ReplyForm';
+import {postReviewStateDraftsChangeMessage} from 'review/postMessage';
+import {renderWithReviewState} from 'support/renderWithReviewState';
+
+const seed = {
+  sections: [{id: 1, permaId: 1}],
+  contentElements: [{id: 1, permaId: 10, sectionId: 1, typeName: 'textBlock'}]
+};
+
+function draft({body, pending = false}) {
+  return {'Thread:7': {threadId: 7, body, pending}};
+}
+
+function renderForm(options = {}) {
+  return renderWithReviewState(
+    <ReplyForm threadId={7} subjectType="ContentElement" subjectId={10} />,
+    {seed, ...options}
+  );
+}
+
+function postDraftsChange(drafts) {
+  act(() => postReviewStateDraftsChangeMessage(window, drafts));
+}
+
+describe('ReplyForm', () => {
+  // A spy left behind by a failing spec would swallow the simulated
+  // review state messages of the ones after it.
+  afterEach(() => jest.restoreAllMocks());
+
+  useFakeTranslations({
+    'pageflow_scrolled.review.reply_placeholder': 'Reply...',
+    'pageflow_scrolled.review.send': 'Send',
+    'pageflow_scrolled.review.enter_for_new_line': 'Enter for new line'
+  });
+
+  it('starts out with the stored draft of the thread', () => {
+    const {getByPlaceholderText, getByRole} = renderForm({
+      drafts: draft({body: 'Half a reply'})
+    });
+
+    expect(getByPlaceholderText('Reply...')).toHaveValue('Half a reply');
+    expect(getByRole('button', {name: 'Send'})).toBeInTheDocument();
+  });
+
+  it('starts out empty without a draft', () => {
+    const {getByPlaceholderText, queryByRole} = renderForm();
+
+    expect(getByPlaceholderText('Reply...')).toHaveValue('');
+    expect(queryByRole('button', {name: 'Send'})).toBeNull();
+  });
+
+  it('stores the text as a draft when the form goes away', async () => {
+    const user = userEvent.setup();
+    const setDraft = jest.fn();
+
+    const {getByPlaceholderText, unmount} = renderForm({setDraft});
+
+    await user.type(getByPlaceholderText('Reply...'), 'Half a reply');
+    unmount();
+
+    expect(setDraft).toHaveBeenCalledWith({threadId: 7, body: 'Half a reply'});
+  });
+
+  it('disables the input and shows a spinner while the reply is created', async () => {
+    const user = userEvent.setup();
+
+    const {getByPlaceholderText, getByRole, container} = renderForm();
+
+    await user.type(getByPlaceholderText('Reply...'), 'A reply');
+    await user.click(getByRole('button', {name: 'Send'}));
+
+    expect(getByPlaceholderText('Reply...')).toBeDisabled();
+    expect(getByPlaceholderText('Reply...')).toHaveValue('A reply');
+    expect(container.querySelector('[data-file-name="SvgSpinner"]')).not.toBeNull();
+  });
+
+  // The form stays around for the next reply, unlike the new thread form.
+  it('clears the input once the reply has been created', async () => {
+    const user = userEvent.setup();
+
+    const {getByPlaceholderText, getByRole} = renderForm();
+
+    await user.type(getByPlaceholderText('Reply...'), 'A reply');
+    await user.click(getByRole('button', {name: 'Send'}));
+
+    postDraftsChange({});
+
+    await waitFor(() =>
+      expect(getByPlaceholderText('Reply...')).toHaveValue('')
+    );
+    expect(getByPlaceholderText('Reply...')).not.toBeDisabled();
+  });
+
+  it('keeps the text when creating the reply failed', async () => {
+    const user = userEvent.setup();
+
+    const {getByPlaceholderText, getByRole} = renderForm();
+
+    await user.type(getByPlaceholderText('Reply...'), 'A reply');
+    await user.click(getByRole('button', {name: 'Send'}));
+
+    postDraftsChange(draft({body: 'A reply', pending: false}));
+
+    await waitFor(() =>
+      expect(getByPlaceholderText('Reply...')).not.toBeDisabled()
+    );
+    expect(getByPlaceholderText('Reply...')).toHaveValue('A reply');
+  });
+});
diff --git a/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js b/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
index f9419719d1..4134c66b49 100644
--- a/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
+++ b/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
@@ -6,7 +6,8 @@ function fakeReviewSession() {
   const session = {
     createThread: jest.fn().mockResolvedValue(),
     createComment: jest.fn().mockResolvedValue(),
-    updateThread: jest.fn().mockResolvedValue()
+    updateThread: jest.fn().mockResolvedValue(),
+    setDraft: jest.fn()
   };
 
   Object.assign(session, BackboneEvents);
@@ -135,6 +136,47 @@ describe('ReviewMessageHandler', () => {
     });
   });
 
+  it('calls session.setDraft on SET_COMMENT_DRAFT message from targetWindow', async () => {
+    const session = fakeReviewSession();
+
+    ReviewMessageHandler.create({session, targetWindow: window});
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {
+        type: 'SET_COMMENT_DRAFT',
+        payload: {subjectType: 'CE', subjectId: 10, body: 'Half a thought'}
+      },
+      origin: window.location.origin,
+      source: window
+    }));
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(session.setDraft).toHaveBeenCalledWith({
+      subjectType: 'CE', subjectId: 10, body: 'Half a thought'
+    });
+  });
+
+  it('posts REVIEW_STATE_DRAFTS_CHANGE on change:drafts event', () => {
+    const session = fakeReviewSession();
+    const postMessage = jest.fn();
+    jest.spyOn(window, 'postMessage').mockImplementation(postMessage);
+
+    ReviewMessageHandler.create({session, targetWindow: window});
+
+    const drafts = {
+      'CE:10': {subjectType: 'CE', subjectId: 10, body: 'Half a thought', pending: false}
+    };
+    session.trigger('change:drafts', drafts);
+
+    expect(postMessage).toHaveBeenCalledWith(
+      {type: 'REVIEW_STATE_DRAFTS_CHANGE', payload: drafts},
+      window.location.origin
+    );
+
+    window.postMessage.mockRestore();
+  });
+
   it('ignores messages not from targetWindow', async () => {
     const session = fakeReviewSession();
     const iframeWindow = {};
diff --git a/entry_types/scrolled/package/spec/review/ReviewStateProvider-spec.js b/entry_types/scrolled/package/spec/review/ReviewStateProvider-spec.js
index b0ac76a525..42373d1a3c 100644
--- a/entry_types/scrolled/package/spec/review/ReviewStateProvider-spec.js
+++ b/entry_types/scrolled/package/spec/review/ReviewStateProvider-spec.js
@@ -5,13 +5,18 @@ import {renderHook} from '@testing-library/react-hooks';
 
 import {
   ReviewStateProvider,
+  useCommentDraft,
   useCommentThread,
-  useCommentThreads
+  useCommentThreads,
+  useCreateComment,
+  useCreateCommentThread
 } from 'review/ReviewStateProvider';
 import {
   postReviewStateResetMessage,
-  postReviewStateThreadChangeMessage
+  postReviewStateThreadChangeMessage,
+  postReviewStateDraftsChangeMessage
 } from 'review/postMessage';
+import {renderHookWithReviewState} from 'support/renderWithReviewState';
 
 function wrapper({children}) {
   return <ReviewStateProvider>{children}</ReviewStateProvider>;
@@ -239,4 +244,249 @@ describe('ReviewStateProvider', () => {
       expect(result.current).toBeUndefined();
     });
   });
+
+  describe('useCommentDraft', () => {
+    const draft = {
+      subjectType: 'CE', subjectId: 10, body: 'Half a thought', pending: false
+    };
+
+    function renderDraftHook({initialDrafts, setDraft} = {}) {
+      return renderHook(
+        () => useCommentDraft({subjectType: 'CE', subjectId: 10}),
+        {
+          wrapper: ({children}) => (
+            <ReviewStateProvider initialDrafts={initialDrafts} setDraft={setDraft}>
+              {children}
+            </ReviewStateProvider>
+          )
+        }
+      );
+    }
+
+    it('returns undefined without a draft for the subject', () => {
+      const {result} = renderDraftHook();
+
+      expect(result.current[0]).toBeUndefined();
+    });
+
+    it('returns drafts passed as initial drafts', () => {
+      const {result} = renderDraftHook({initialDrafts: {'CE:10': draft}});
+
+      expect(result.current[0]).toEqual(draft);
+    });
+
+    it('updates on drafts change message', async () => {
+      const {result, waitForNextUpdate} = renderDraftHook();
+
+      act(() => {
+        postReviewStateDraftsChangeMessage(window, {'CE:10': draft});
+      });
+      await waitForNextUpdate();
+
+      expect(result.current[0]).toEqual(draft);
+    });
+
+    it('stores a draft for the subject by posting a message', () => {
+      const postMessage = jest.spyOn(window.top, 'postMessage').mockImplementation(() => {});
+
+      const {result} = renderDraftHook();
+
+      result.current[1]('Half a thought');
+
+      expect(postMessage).toHaveBeenCalledWith(
+        {
+          type: 'SET_COMMENT_DRAFT',
+          payload: {subjectType: 'CE', subjectId: 10, body: 'Half a thought'}
+        },
+        window.location.origin
+      );
+
+      postMessage.mockRestore();
+    });
+
+    it('stores a draft through the function passed to the provider instead', () => {
+      const setDraft = jest.fn();
+
+      const {result} = renderDraftHook({setDraft});
+
+      result.current[1]('Half a thought');
+
+      expect(setDraft).toHaveBeenCalledWith({
+        subjectType: 'CE', subjectId: 10, body: 'Half a thought'
+      });
+    });
+
+    it('keeps drafts on reset message', async () => {
+      const {result, waitForNextUpdate} = renderHook(
+        () => ({
+          draft: useCommentDraft({subjectType: 'CE', subjectId: 10})[0],
+          threads: useCommentThreads()
+        }),
+        {
+          wrapper: ({children}) => (
+            <ReviewStateProvider initialDrafts={{'CE:10': draft}}>
+              {children}
+            </ReviewStateProvider>
+          )
+        }
+      );
+
+      postReset({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: [{id: 1, subjectType: 'CE', subjectId: 10, comments: []}]
+      });
+      await waitForNextUpdate();
+
+      expect(result.current.threads).toHaveLength(1);
+      expect(result.current.draft).toEqual(draft);
+    });
+  });
+
+  describe('useCommentDraft of a thread', () => {
+    const draft = {threadId: 7, body: 'Half a reply', pending: false};
+
+    it('returns the draft stored for the thread', () => {
+      const {result} = renderHook(() => useCommentDraft({threadId: 7}), {
+        wrapper: ({children}) => (
+          <ReviewStateProvider initialDrafts={{'Thread:7': draft}}>
+            {children}
+          </ReviewStateProvider>
+        )
+      });
+
+      expect(result.current[0]).toEqual(draft);
+    });
+
+    it('stores a draft for the thread', () => {
+      const setDraft = jest.fn();
+
+      const {result} = renderHook(() => useCommentDraft({threadId: 7}), {
+        wrapper: ({children}) => (
+          <ReviewStateProvider setDraft={setDraft}>{children}</ReviewStateProvider>
+        )
+      });
+
+      result.current[1]('Half a reply');
+
+      expect(setDraft).toHaveBeenCalledWith({threadId: 7, body: 'Half a reply'});
+    });
+  });
+
+  describe('useCreateComment', () => {
+    const seed = {
+      sections: [{id: 1, permaId: 7}],
+      contentElements: [{id: 1, permaId: 10, sectionId: 1, typeName: 'textBlock'}]
+    };
+
+    function renderCreateHook() {
+      return renderHookWithReviewState(
+        () => ({
+          createComment: useCreateComment({
+            threadId: 7, subjectType: 'ContentElement', subjectId: 10
+          }),
+          draft: useCommentDraft({threadId: 7})[0]
+        }),
+        {seed}
+      );
+    }
+
+    it('marks the draft of the thread pending right away', () => {
+      const {result} = renderCreateHook();
+
+      act(() => result.current.createComment('A reply'));
+
+      expect(result.current.draft).toEqual({
+        threadId: 7, body: 'A reply', pending: true
+      });
+    });
+
+    it('posts a create comment message', () => {
+      const postMessage = jest.spyOn(window.top, 'postMessage').mockImplementation(() => {});
+
+      const {result} = renderCreateHook();
+
+      act(() => result.current.createComment('A reply'));
+
+      expect(postMessage).toHaveBeenCalledWith(
+        {
+          type: 'CREATE_COMMENT',
+          payload: expect.objectContaining({threadId: 7, body: 'A reply'})
+        },
+        window.location.origin
+      );
+
+      postMessage.mockRestore();
+    });
+  });
+
+  // Assembling the payload needs the entry structure the subject lives in.
+  describe('useCreateCommentThread', () => {
+    const seed = {
+      sections: [{id: 1, permaId: 7}],
+      contentElements: [{id: 1, permaId: 10, sectionId: 1, typeName: 'textBlock'}]
+    };
+
+    function renderCreateHook({drafts} = {}) {
+      return renderHookWithReviewState(
+        () => ({
+          createThread: useCreateCommentThread({
+            subjectType: 'ContentElement', subjectId: 10
+          }),
+          draft: useCommentDraft({subjectType: 'ContentElement', subjectId: 10})[0],
+          other: useCommentDraft({subjectType: 'ContentElement', subjectId: 20})[0]
+        }),
+        {seed, drafts}
+      );
+    }
+
+    it('marks the draft of the subject pending right away', () => {
+      const {result} = renderCreateHook();
+
+      act(() => result.current.createThread('Looks good'));
+
+      expect(result.current.draft).toEqual({
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        body: 'Looks good',
+        pending: true
+      });
+    });
+
+    it('posts a create thread message with the section of the subject', () => {
+      const postMessage = jest.spyOn(window.top, 'postMessage').mockImplementation(() => {});
+
+      const {result} = renderCreateHook();
+
+      act(() => result.current.createThread('Looks good'));
+
+      expect(postMessage).toHaveBeenCalledWith(
+        {
+          type: 'CREATE_COMMENT_THREAD',
+          payload: expect.objectContaining({
+            subjectType: 'ContentElement',
+            subjectId: 10,
+            sectionPermaId: 7,
+            body: 'Looks good'
+          })
+        },
+        window.location.origin
+      );
+
+      postMessage.mockRestore();
+    });
+
+    it('keeps drafts of other subjects', () => {
+      const {result} = renderCreateHook({
+        drafts: {
+          'ContentElement:20': {
+            subjectType: 'ContentElement', subjectId: 20, body: 'Elsewhere', pending: false
+          }
+        }
+      });
+
+      act(() => result.current.createThread('Looks good'));
+
+      expect(result.current.other).toMatchObject({body: 'Elsewhere'});
+    });
+  });
 });
diff --git a/entry_types/scrolled/package/spec/review/Thread-spec.js b/entry_types/scrolled/package/spec/review/Thread-spec.js
index 56843ee2d9..942580bc70 100644
--- a/entry_types/scrolled/package/spec/review/Thread-spec.js
+++ b/entry_types/scrolled/package/spec/review/Thread-spec.js
@@ -8,7 +8,11 @@ import {renderWithReviewState} from 'support/renderWithReviewState';
 
 describe('Thread', () => {
   useFakeTranslations({
-    'pageflow_scrolled.review.refers_to_deleted_element': 'Refers to a deleted element'
+    'pageflow_scrolled.review.refers_to_deleted_element': 'Refers to a deleted element',
+    'pageflow_scrolled.review.reply_placeholder': 'Reply...',
+    'pageflow_scrolled.review.reply_count.one': '1 reply',
+    'pageflow_scrolled.review.reply_count.other': '%{count} replies',
+    'pageflow_scrolled.review.toggle_replies': 'Toggle replies'
   });
 
   const thread = {
@@ -16,6 +20,29 @@ describe('Thread', () => {
     comments: [{id: 10, body: 'On the pull quote', creatorName: 'Bob', creatorId: 2}]
   };
 
+  // The reply form is hidden while a thread with replies is collapsed,
+  // which would leave a drafted reply out of reach.
+  it('expands a collapsed thread that has a drafted reply', () => {
+    const threadWithReply = {
+      ...thread,
+      comments: [
+        ...thread.comments,
+        {id: 11, body: 'A first reply', creatorName: 'Alice', creatorId: 1}
+      ]
+    };
+
+    const {getByPlaceholderText} = renderWithReviewState(
+      <Thread thread={threadWithReply} collapsed />,
+      {
+        drafts: {
+          'Thread:1': {threadId: 1, body: 'Half a reply', pending: false}
+        }
+      }
+    );
+
+    expect(getByPlaceholderText('Reply...')).toHaveValue('Half a reply');
+  });
+
   it('renders a deleted-element hint when the thread is orphaned', () => {
     const {getByText} = renderWithReviewState(
       <Thread thread={{...thread, orphaned: true}} interactive={false} />
diff --git a/entry_types/scrolled/package/spec/review/ThreadList-spec.js b/entry_types/scrolled/package/spec/review/ThreadList-spec.js
index e5cf50009f..377e310f2d 100644
--- a/entry_types/scrolled/package/spec/review/ThreadList-spec.js
+++ b/entry_types/scrolled/package/spec/review/ThreadList-spec.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import userEvent from '@testing-library/user-event';
+import {act, waitFor} from '@testing-library/react';
 import {useFakeTranslations} from 'pageflow/testHelpers';
 
 import {ThreadList} from 'review/ThreadList';
+import {
+  postReviewStateDraftsChangeMessage,
+  postReviewStateThreadChangeMessage
+} from 'review/postMessage';
 import {review} from 'review/api';
 import {ScrollHighlightedThreadIntoViewProvider} from 'review/scrollHighlightedThreadIntoView';
 import {renderWithReviewState} from 'support/renderWithReviewState';
@@ -15,8 +20,16 @@ const seed = {
   contentElements: [{id: 1, permaId: 10, sectionId: 1, typeName: 'textBlock'}]
 };
 
-function renderThreadList(ui, {commentThreads = []} = {}) {
-  return renderWithReviewState(ui, {seed, commentThreads});
+function renderThreadList(ui, options = {}) {
+  return renderWithReviewState(ui, {seed, ...options});
+}
+
+function postDraftsChange(drafts) {
+  act(() => postReviewStateDraftsChangeMessage(window, drafts));
+}
+
+function postThreadChange(thread) {
+  act(() => postReviewStateThreadChangeMessage(window, thread));
 }
 
 describe('ThreadList', () => {
@@ -508,6 +521,27 @@ describe('ThreadList', () => {
       expect(getByPlaceholderText('Add a comment...')).toBeInTheDocument();
     });
 
+    // Whether the list starts out with a form is decided when it mounts,
+    // so resolving the last thread does not invite a new one.
+    it('does not open the form when the last thread becomes resolved', async () => {
+      const thread = {
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 10, body: 'Existing', creatorName: 'Bob', creatorId: 2}]
+      };
+
+      const {getByText, queryByPlaceholderText} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} />,
+        {commentThreads: [thread]}
+      );
+
+      postThreadChange({...thread, resolvedAt: '2026-07-31'});
+
+      await waitFor(() => expect(getByText('1 resolved')).toBeInTheDocument());
+      expect(queryByPlaceholderText('Add a comment...')).toBeNull();
+    });
+
     it('shows new topic form when showNewForm is true', () => {
       const {getByPlaceholderText} = renderThreadList(
         <ThreadList subjectType="ContentElement" subjectId={10} showNewForm={true} />,
@@ -587,6 +621,116 @@ describe('ThreadList', () => {
 
       expect(getByPlaceholderText('Add a comment...')).toBeInTheDocument();
     });
+
+    it('shows the form again when a draft exists for the subject', () => {
+      const {getByPlaceholderText} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} />,
+        {
+          commentThreads: [
+            {id: 1, subjectType: 'ContentElement', subjectId: 10, comments: [
+              {id: 10, body: 'Existing', creatorName: 'Bob', creatorId: 2}
+            ]}
+          ],
+          drafts: {
+            'ContentElement:10': {
+              subjectType: 'ContentElement', subjectId: 10, body: 'Half a thought'
+            }
+          }
+        }
+      );
+
+      expect(getByPlaceholderText('Add a comment...')).toHaveValue('Half a thought');
+    });
+
+    it('keeps the form open while the thread is being created', () => {
+      const {getByPlaceholderText} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} />,
+        {
+          drafts: {
+            'ContentElement:10': {
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              body: 'Looks good',
+              pending: true
+            }
+          }
+        }
+      );
+
+      expect(getByPlaceholderText('Add a comment...')).toBeDisabled();
+    });
+
+    // The editor sidebar lists opt out of the form entirely, since new
+    // threads are composed in a view of their own there.
+    it('does not show the form for a draft when showNewForm is false', () => {
+      const {queryByPlaceholderText} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} showNewForm={false} />,
+        {
+          drafts: {
+            'ContentElement:10': {
+              subjectType: 'ContentElement', subjectId: 10, body: 'Half a thought'
+            }
+          }
+        }
+      );
+
+      expect(queryByPlaceholderText('Add a comment...')).toBeNull();
+    });
+
+    it('keeps the form open with the text on submit', async () => {
+      const user = userEvent.setup();
+
+      const {getByPlaceholderText, getByRole} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} />
+      );
+
+      await user.type(getByPlaceholderText('Add a comment...'), 'New thread');
+      await user.click(getByRole('button', {name: 'Send'}));
+
+      expect(getByPlaceholderText('Add a comment...')).toBeDisabled();
+      expect(getByPlaceholderText('Add a comment...')).toHaveValue('New thread');
+    });
+
+    // Storing the text on the way out would bring back the draft the
+    // session has just dropped and reopen the form.
+    it('closes the form for good after the thread has been created', async () => {
+      const user = userEvent.setup();
+      const setDraft = jest.fn();
+
+      const {getByPlaceholderText, queryByPlaceholderText, getByRole} = renderThreadList(
+        <ThreadList subjectType="ContentElement" subjectId={10} />,
+        {setDraft}
+      );
+
+      await user.type(getByPlaceholderText('Add a comment...'), 'New thread');
+      await user.click(getByRole('button', {name: 'Send'}));
+
+      postDraftsChange({
+        'ContentElement:10': {
+          subjectType: 'ContentElement',
+          subjectId: 10,
+          body: 'New thread',
+          pending: true
+        }
+      });
+      await waitFor(() =>
+        expect(getByPlaceholderText('Add a comment...')).toBeDisabled()
+      );
+      setDraft.mockClear();
+
+      postThreadChange({
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 10, body: 'New thread', creatorName: 'Alice', creatorId: 1}]
+      });
+      postDraftsChange({});
+
+      await waitFor(() =>
+        expect(queryByPlaceholderText('Add a comment...')).toBeNull()
+      );
+      expect(setDraft).not.toHaveBeenCalled();
+    });
   });
 
   describe('replies', () => {
diff --git a/entry_types/scrolled/package/spec/support/renderWithReviewState.js b/entry_types/scrolled/package/spec/support/renderWithReviewState.js
index 34ca29dfcb..ad31f6435c 100644
--- a/entry_types/scrolled/package/spec/support/renderWithReviewState.js
+++ b/entry_types/scrolled/package/spec/support/renderWithReviewState.js
@@ -9,25 +9,27 @@ import {LocatedCommentThreadsProvider} from 'review/useLocatedCommentThreads';
 // lives in), so it needs the entry scope just like any other frontend
 // component — review state is layered on top via the entry helper's
 // `wrapper` option.
-export function renderWithReviewState(ui, {commentThreads = [], currentUser = null, seed = {}} = {}) {
+export function renderWithReviewState(ui, {commentThreads = [], currentUser = null, drafts, setDraft, seed = {}} = {}) {
   return renderInEntry(ui, {
     seed,
-    wrapper: reviewStateWrapper({commentThreads, currentUser})
+    wrapper: reviewStateWrapper({commentThreads, currentUser, drafts, setDraft})
   });
 }
 
 // Counterpart for selector hooks that read entry state and review state.
-export function renderHookWithReviewState(hook, {commentThreads = [], currentUser = null, seed = {}} = {}) {
+export function renderHookWithReviewState(hook, {commentThreads = [], currentUser = null, drafts, setDraft, seed = {}} = {}) {
   return renderHookInEntry(hook, {
     seed,
-    wrapper: reviewStateWrapper({commentThreads, currentUser})
+    wrapper: reviewStateWrapper({commentThreads, currentUser, drafts, setDraft})
   });
 }
 
-function reviewStateWrapper({commentThreads = [], currentUser = null} = {}) {
+function reviewStateWrapper({commentThreads = [], currentUser = null, drafts, setDraft} = {}) {
   return function ReviewStateWrapper({children}) {
     return (
-      <ReviewStateProvider initialState={{currentUser, commentThreads}}>
+      <ReviewStateProvider initialState={{currentUser, commentThreads}}
+                           initialDrafts={drafts}
+                           setDraft={setDraft}>
         <LocatedCommentThreadsProvider>
           {children}
         </LocatedCommentThreadsProvider>
diff --git a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
index 5355635100..85b1fb990e 100644
--- a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
+++ b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
@@ -128,6 +128,28 @@ export const PreviewMessageController = Object.extend({
             })
           });
 
+          // Passing the thread id here rather than posting
+          // SELECT_COMMENT_THREAD avoids depending on the preview having
+          // processed the new thread already: that message is dropped for
+          // threads the iframe does not know yet.
+          if (this.entry.reviewSession) {
+            this.listenTo(this.entry.reviewSession, 'create:thread', thread => {
+              const model = modelForSubject(this.entry, thread);
+
+              if (!model) return;
+
+              postMessage({
+                type: 'SELECT',
+                payload: {
+                  id: model.id,
+                  type: thread.subjectType === 'Section' ? 'sectionComments' :
+                                                           'contentElementComments',
+                  highlightedThreadId: thread.id
+                }
+              })
+            });
+          }
+
           this.listenTo(this.entry, 'selectWidget', widget => {
             postMessage({
               type: 'SELECT',
@@ -312,9 +334,13 @@ function selectedCommentsSubjectFor(entry, payload) {
   }
 
   if (type === 'newThread') {
-    const collection = subjectType === 'Section' ? entry.sections : entry.contentElements;
-    return {subjectType, id: collection.findWhere({permaId: subjectId})?.id};
+    return {subjectType, id: modelForSubject(entry, {subjectType, subjectId})?.id};
   }
 
   return undefined;
 }
+
+function modelForSubject(entry, {subjectType, subjectId}) {
+  const collection = subjectType === 'Section' ? entry.sections : entry.contentElements;
+  return collection.findWhere({permaId: subjectId});
+}
diff --git a/entry_types/scrolled/package/src/editor/views/NewThreadView.js b/entry_types/scrolled/package/src/editor/views/NewThreadView.js
index 2cc80348f9..da734ae235 100644
--- a/entry_types/scrolled/package/src/editor/views/NewThreadView.js
+++ b/entry_types/scrolled/package/src/editor/views/NewThreadView.js
@@ -49,14 +49,12 @@ const NewThreadFormView = ReviewView.extend({
   className: styles.form,
 
   renderContent() {
-    const {entry, subjectType, subjectId, subjectRange} = this.options;
-    const leave = () => entry.trigger('resetSelection');
+    const {subjectType, subjectId, subjectRange} = this.options;
 
     return (
       <NewThreadForm subjectType={subjectType}
                      subjectId={subjectId}
-                     subjectRange={subjectRange}
-                     onSubmit={leave} />
+                     subjectRange={subjectRange} />
     );
   }
 });
diff --git a/entry_types/scrolled/package/src/editor/views/ReviewView.js b/entry_types/scrolled/package/src/editor/views/ReviewView.js
index b16145381c..2aa12191be 100644
--- a/entry_types/scrolled/package/src/editor/views/ReviewView.js
+++ b/entry_types/scrolled/package/src/editor/views/ReviewView.js
@@ -19,13 +19,13 @@ import styles from './ReviewView.module.css';
 // Base Marionette view for comment-related sidebar panels. Provides the
 // shared wiring: a container div, a ReviewMessageHandler bridging the
 // session to the preview iframe, a ReviewStateProvider seeded from the
-// current session state, and an EntryStateProvider so the rendered tree
-// can resolve entry structure (e.g. the section a comment subject lives
-// in). Subclasses implement `renderContent(props)` to return the React
-// subtree. Props are produced by `props()` (default: empty) and
-// re-evaluated whenever the subclass calls `rerender()` — useful for
-// re-rendering on backbone change events without requiring React
-// subscription hooks inside the rendered tree.
+// current session state and its drafts, and an EntryStateProvider so the
+// rendered tree can resolve entry structure (e.g. the section a comment
+// subject lives in). Subclasses implement `renderContent(props)` to
+// return the React subtree. Props are produced by `props()` (default:
+// empty) and re-evaluated whenever the subclass calls `rerender()` —
+// useful for re-rendering on backbone change events without requiring
+// React subscription hooks inside the rendered tree.
 export const ReviewView = Marionette.ItemView.extend({
   template: () => `<div class="${styles.container}"></div>`,
 
@@ -41,6 +41,8 @@ export const ReviewView = Marionette.ItemView.extend({
       targetWindow: window
     });
 
+    this.setDraft = draft => session.setDraft(draft);
+
     this.rerender();
   },
 
@@ -52,7 +54,9 @@ export const ReviewView = Marionette.ItemView.extend({
   rerender() {
     const {entry} = this.options;
     ReactDOM.render(
-      <ReviewStateProvider initialState={entry.reviewSession.state}>
+      <ReviewStateProvider initialState={entry.reviewSession.state}
+                           initialDrafts={entry.reviewSession.drafts}
+                           setDraft={this.setDraft}>
         <EntryStateProvider seed={entry.scrolledSeed}>
           <WatchEntryCollections entry={entry} />
           <LocatedCommentThreadsProvider>
diff --git a/entry_types/scrolled/package/src/review/NewThreadForm.js b/entry_types/scrolled/package/src/review/NewThreadForm.js
index bec4dba95e..fbebb9cd5d 100644
--- a/entry_types/scrolled/package/src/review/NewThreadForm.js
+++ b/entry_types/scrolled/package/src/review/NewThreadForm.js
@@ -1,26 +1,24 @@
-import React, {useCallback, useState} from 'react';
-
-import {useSectionPermaIdOfSubject} from 'pageflow-scrolled/entryState';
+import React, {useCallback} from 'react';
 
 import {useI18n} from '../frontend/i18n';
-import {postCreateCommentThreadMessage} from './postMessage';
-import {useSubjectQuote} from './subjectQuote';
+import {useCreateCommentThread} from './ReviewStateProvider';
+import {useDraftedBody} from './useDraftedBody';
 import {autoGrow, autoResize} from './autoGrow';
 import {isSubmitShortcut} from './submitShortcut';
 
 import SendIcon from './images/send.svg';
+import SpinnerIcon from '../frontend/icons/spinner.svg';
 import styles from './NewThreadForm.module.css';
 
 export function NewThreadForm({subjectType, subjectId, subjectRange, onSubmit}) {
   const {t} = useI18n({locale: 'ui'});
-  const [body, setBody] = useState('');
-  const hasText = body.trim().length > 0;
 
-  const sectionPermaId = useSectionPermaIdOfSubject({subjectType, subjectId});
+  const {body, setBody, submitting} = useDraftedBody({subjectType, subjectId});
+  const hasText = body.trim().length > 0;
 
-  // Recorded now since the commented text can change afterwards, leaving the
-  // comment without the wording it referred to.
-  const quote = useSubjectQuote({subjectType, subjectId, subjectRange});
+  const createCommentThread = useCreateCommentThread({
+    subjectType, subjectId, subjectRange
+  });
 
   // preventScroll keeps focus from yanking the page to the top before the
   // portaled popover has been positioned by floating-ui.
@@ -47,33 +45,33 @@ export function NewThreadForm({subjectType, subjectId, subjectRange, onSubmit})
   }
 
   function createThread() {
-    if (!hasText) return;
+    if (!hasText || submitting) return;
 
-    postCreateCommentThreadMessage({
-      subjectType, subjectId, subjectRange, sectionPermaId, body, quote
-    });
-    setBody('');
+    createCommentThread(body);
 
     if (onSubmit) onSubmit();
   }
 
   return (
-    <form className={styles.form} onSubmit={handleSubmit}>
+    <form className={styles.form} onSubmit={handleSubmit} aria-busy={submitting}>
       <textarea className={styles.input}
                 ref={setInputRef}
                 value={body}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 placeholder={t('pageflow_scrolled.review.add_comment_placeholder')}
+                disabled={submitting}
                 rows={3} />
       <div className={styles.actions}>
-        {hasText &&
+        {hasText && !submitting &&
           <span className={styles.hint}>
             {t('pageflow_scrolled.review.enter_for_new_line')}
           </span>}
         <button className={styles.submitButton}
-                type="submit">
-          <SendIcon /> {t('pageflow_scrolled.review.send')}
+                type="submit"
+                disabled={submitting}>
+          {submitting ? <SpinnerIcon className={styles.spinner} /> : <SendIcon />}
+          {t('pageflow_scrolled.review.send')}
         </button>
       </div>
     </form>
diff --git a/entry_types/scrolled/package/src/review/NewThreadForm.module.css b/entry_types/scrolled/package/src/review/NewThreadForm.module.css
index 0bd6f904b7..401412b9f5 100644
--- a/entry_types/scrolled/package/src/review/NewThreadForm.module.css
+++ b/entry_types/scrolled/package/src/review/NewThreadForm.module.css
@@ -42,6 +42,10 @@
   font-size: space(3);
 }
 
+.input:disabled {
+  color: var(--ui-on-surface-color-light);
+}
+
 .submitButton {
   display: flex;
   align-items: center;
@@ -55,3 +59,23 @@
   padding: space(1.5) space(3);
   cursor: pointer;
 }
+
+.submitButton:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/entry_types/scrolled/package/src/review/ReplyForm.js b/entry_types/scrolled/package/src/review/ReplyForm.js
index d7683aa525..9df398c286 100644
--- a/entry_types/scrolled/package/src/review/ReplyForm.js
+++ b/entry_types/scrolled/package/src/review/ReplyForm.js
@@ -1,22 +1,24 @@
-import React, {useState} from 'react';
+import React from 'react';
 
 import {useI18n} from '../frontend/i18n';
-import {postCreateCommentMessage} from './postMessage';
-import {useSubjectQuote} from './subjectQuote';
+import {useCreateComment} from './ReviewStateProvider';
+import {useDraftedBody} from './useDraftedBody';
 import {autoGrow, autoResize} from './autoGrow';
 import {isSubmitShortcut} from './submitShortcut';
 
 import SendIcon from './images/send.svg';
+import SpinnerIcon from '../frontend/icons/spinner.svg';
 import styles from './ReplyForm.module.css';
 
 export function ReplyForm({threadId, subjectType, subjectId, subjectRange}) {
   const {t} = useI18n({locale: 'ui'});
-  const [body, setBody] = useState('');
+
+  const {body, setBody, submitting} = useDraftedBody({threadId});
   const hasText = body.trim().length > 0;
 
-  // Each reply records the wording it responds to, so a thread spanning
-  // several edits keeps every comment next to its own version of the text.
-  const quote = useSubjectQuote({subjectType, subjectId, subjectRange});
+  const createComment = useCreateComment({
+    threadId, subjectType, subjectId, subjectRange
+  });
 
   function handleChange(e) {
     setBody(e.target.value);
@@ -36,30 +38,33 @@ export function ReplyForm({threadId, subjectType, subjectId, subjectRange}) {
   }
 
   function createReply() {
-    if (!hasText) return;
+    if (!hasText || submitting) return;
 
-    postCreateCommentMessage({threadId, body, quote});
-    setBody('');
+    createComment(body);
   }
 
   return (
-    <form className={styles.form} onSubmit={handleSubmit}>
+    <form className={styles.form} onSubmit={handleSubmit} aria-busy={submitting}>
       <textarea className={styles.input}
                 ref={autoResize}
                 value={body}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 placeholder={t('pageflow_scrolled.review.reply_placeholder')}
+                disabled={submitting}
                 rows={1} />
       {hasText &&
         <div className={styles.actions}>
-          <span className={styles.hint}>
-            {t('pageflow_scrolled.review.enter_for_new_line')}
-          </span>
+          {!submitting &&
+            <span className={styles.hint}>
+              {t('pageflow_scrolled.review.enter_for_new_line')}
+            </span>}
           <button className={styles.submitButton}
                   type="submit"
+                  disabled={submitting}
                   aria-label={t('pageflow_scrolled.review.send')}>
-            <SendIcon /> {t('pageflow_scrolled.review.send')}
+            {submitting ? <SpinnerIcon className={styles.spinner} /> : <SendIcon />}
+            {t('pageflow_scrolled.review.send')}
           </button>
         </div>}
     </form>
diff --git a/entry_types/scrolled/package/src/review/ReplyForm.module.css b/entry_types/scrolled/package/src/review/ReplyForm.module.css
index 9231bfaffd..a686b51c1c 100644
--- a/entry_types/scrolled/package/src/review/ReplyForm.module.css
+++ b/entry_types/scrolled/package/src/review/ReplyForm.module.css
@@ -25,11 +25,14 @@
 .actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-top: space(1.5);
 }
 
+/* Pushed left by its own margin rather than by space-between, so that the
+   send button stays in place while submitting hides the hint. */
 .hint {
+  margin-right: auto;
   color: var(--ui-on-surface-color-light);
   font-size: space(3);
 }
@@ -47,3 +50,27 @@
   padding: space(1.5) space(3);
   cursor: pointer;
 }
+
+.input:disabled {
+  color: var(--ui-on-surface-color-light);
+}
+
+.submitButton:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/entry_types/scrolled/package/src/review/ReviewMessageHandler.js b/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
index 81cd63eead..ff12e54a51 100644
--- a/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
+++ b/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
@@ -1,6 +1,7 @@
 import {
   postReviewStateResetMessage,
-  postReviewStateThreadChangeMessage
+  postReviewStateThreadChangeMessage,
+  postReviewStateDraftsChangeMessage
 } from './postMessage';
 
 export const ReviewMessageHandler = {
@@ -20,6 +21,9 @@ export const ReviewMessageHandler = {
       else if (type === 'UPDATE_THREAD') {
         session.updateThread(payload);
       }
+      else if (type === 'SET_COMMENT_DRAFT') {
+        session.setDraft(payload);
+      }
     }
 
     function handleReset(state) {
@@ -30,15 +34,21 @@ export const ReviewMessageHandler = {
       postReviewStateThreadChangeMessage(targetWindow, thread);
     }
 
+    function handleDraftsChange(drafts) {
+      postReviewStateDraftsChangeMessage(targetWindow, drafts);
+    }
+
     window.addEventListener('message', handleMessage);
     session.on('reset', handleReset);
     session.on('change:thread', handleThreadChange);
+    session.on('change:drafts', handleDraftsChange);
 
     return {
       dispose() {
         window.removeEventListener('message', handleMessage);
         session.off('reset', handleReset);
         session.off('change:thread', handleThreadChange);
+        session.off('change:drafts', handleDraftsChange);
       }
     };
   }
diff --git a/entry_types/scrolled/package/src/review/ReviewStateProvider.js b/entry_types/scrolled/package/src/review/ReviewStateProvider.js
index 7969ab0ffc..194eed6539 100644
--- a/entry_types/scrolled/package/src/review/ReviewStateProvider.js
+++ b/entry_types/scrolled/package/src/review/ReviewStateProvider.js
@@ -1,11 +1,23 @@
-import React, {createContext, useContext, useEffect, useMemo, useReducer} from 'react';
+import React, {
+  createContext, useCallback, useContext, useEffect, useMemo, useReducer
+} from 'react';
+
+import {useSectionPermaIdOfSubject} from 'pageflow-scrolled/entryState';
+
+import {
+  postCreateCommentMessage,
+  postCreateCommentThreadMessage,
+  postSetCommentDraftMessage
+} from './postMessage';
+import {useSubjectQuote} from './subjectQuote';
 
 const ReviewStateContext = createContext(null);
+const CommentDraftsContext = createContext(null);
 
-export function ReviewStateProvider({initialState, children}) {
+export function ReviewStateProvider({initialState, initialDrafts, setDraft, children}) {
   const [state, dispatch] = useReducer(
     reducer,
-    initialState,
+    {initialState, initialDrafts},
     initState
   );
 
@@ -21,24 +33,99 @@ export function ReviewStateProvider({initialState, children}) {
       else if (type === 'REVIEW_STATE_THREAD_CHANGE') {
         dispatch({type: 'UPSERT_THREAD', payload});
       }
+      else if (type === 'REVIEW_STATE_DRAFTS_CHANGE') {
+        dispatch({type: 'SET_DRAFTS', payload});
+      }
     }
 
     window.addEventListener('message', handleMessage);
     return () => window.removeEventListener('message', handleMessage);
   }, []);
 
+  // Drafts live in their own context so that storing one does not
+  // invalidate the thread state consumers derive their lists from.
   const value = useMemo(() => ({
     currentUser: state.currentUser,
     commentThreads: Object.values(state.threads)
-  }), [state]);
+  }), [state.currentUser, state.threads]);
+
+  // Marking the draft pending rather than waiting for the session to
+  // report it back keeps the form in one state from the submit onwards:
+  // shown, disabled and holding the text.
+  const createThread = useCallback(payload => {
+    const {subjectType, subjectId, body} = payload;
+
+    dispatch({type: 'SET_DRAFT', payload: {
+      subjectType, subjectId, body, pending: true
+    }});
+
+    postCreateCommentThreadMessage(payload);
+  }, []);
+
+  const createComment = useCallback(payload => {
+    const {threadId, body} = payload;
+
+    dispatch({type: 'SET_DRAFT', payload: {threadId, body, pending: true}});
+
+    postCreateCommentMessage(payload);
+  }, []);
+
+  // The editor sidebar passes a direct write instead of relying on the
+  // message: its ReviewMessageHandler is disposed together with the view,
+  // which would drop the draft stored while the view is going away.
+  const draftsValue = useMemo(() => ({
+    drafts: state.drafts,
+    setDraft: setDraft || postSetCommentDraftMessage,
+    createThread,
+    createComment
+  }), [state.drafts, setDraft, createThread, createComment]);
 
   return (
     <ReviewStateContext.Provider value={value}>
-      {children}
+      <CommentDraftsContext.Provider value={draftsValue}>
+        {children}
+      </CommentDraftsContext.Provider>
     </ReviewStateContext.Provider>
   );
 }
 
+export function useCommentDraft({threadId, subjectType, subjectId}) {
+  const {drafts, setDraft} = useContext(CommentDraftsContext);
+
+  return [
+    drafts[draftKey({threadId, subjectType, subjectId})],
+    useCallback(
+      body => setDraft(threadId ? {threadId, body} : {subjectType, subjectId, body}),
+      [setDraft, threadId, subjectType, subjectId]
+    )
+  ];
+}
+
+export function useCreateCommentThread({subjectType, subjectId, subjectRange}) {
+  const {createThread} = useContext(CommentDraftsContext);
+
+  const sectionPermaId = useSectionPermaIdOfSubject({subjectType, subjectId});
+
+  // Recorded now since the commented text can change afterwards, leaving the
+  // comment without the wording it referred to.
+  const quote = useSubjectQuote({subjectType, subjectId, subjectRange});
+
+  return useCallback(body => createThread({
+    subjectType, subjectId, subjectRange, sectionPermaId, body, quote
+  }), [createThread, subjectType, subjectId, subjectRange, sectionPermaId, quote]);
+}
+
+export function useCreateComment({threadId, subjectType, subjectId, subjectRange}) {
+  const {createComment} = useContext(CommentDraftsContext);
+
+  // Each reply records the wording it responds to, so a thread spanning
+  // several edits keeps every comment next to its own version of the text.
+  const quote = useSubjectQuote({subjectType, subjectId, subjectRange});
+
+  return useCallback(body => createComment({threadId, body, quote}),
+                     [createComment, threadId, quote]);
+}
+
 export function useCommentThread(threadId) {
   const context = useContext(ReviewStateContext);
   return context?.commentThreads.find(t => t.id === threadId);
@@ -69,13 +156,14 @@ export function matchesResolution(thread, resolution) {
          (resolution === 'resolved' && !!thread.resolvedAt);
 }
 
-function initState(initialState) {
+function initState({initialState, initialDrafts}) {
+  const empty = {currentUser: null, threads: {}, drafts: initialDrafts || {}};
+
   if (initialState) {
-    return reducer({currentUser: null, threads: {}},
-                   {type: 'RESET', payload: initialState});
+    return reducer(empty, {type: 'RESET', payload: initialState});
   }
 
-  return {currentUser: null, threads: {}};
+  return empty;
 }
 
 function reducer(state, action) {
@@ -86,11 +174,26 @@ function reducer(state, action) {
       threads[thread.id] = thread;
     });
 
+    // Refetching threads leaves unsent drafts untouched.
     return {
+      ...state,
       currentUser: action.payload.currentUser,
       threads
     };
   }
+  case 'SET_DRAFTS':
+    return {
+      ...state,
+      drafts: action.payload
+    };
+  case 'SET_DRAFT':
+    return {
+      ...state,
+      drafts: {
+        ...state.drafts,
+        [draftKey(action.payload)]: action.payload
+      }
+    };
   case 'UPSERT_THREAD':
     return {
       ...state,
@@ -103,3 +206,8 @@ function reducer(state, action) {
     return state;
   }
 }
+
+// Replies are drafted per thread, new threads per subject.
+function draftKey({threadId, subjectType, subjectId}) {
+  return threadId ? `Thread:${threadId}` : `${subjectType}:${subjectId}`;
+}
diff --git a/entry_types/scrolled/package/src/review/Thread.js b/entry_types/scrolled/package/src/review/Thread.js
index 3cc07c48bc..214a3bc165 100644
--- a/entry_types/scrolled/package/src/review/Thread.js
+++ b/entry_types/scrolled/package/src/review/Thread.js
@@ -5,6 +5,7 @@ import {useI18n} from '../frontend/i18n';
 import {AvatarStack} from './Avatar';
 import {Comment} from './Comment';
 import {ReplyForm} from './ReplyForm';
+import {useCommentDraft} from './ReviewStateProvider';
 import {useSubjectQuote} from './subjectQuote';
 import {commentsWithOutdatedQuote} from './outdatedQuotes';
 import {useScrollHighlightedThreadIntoView} from './scrollHighlightedThreadIntoView';
@@ -14,10 +15,16 @@ import ResolveIcon from './images/resolve.svg';
 import UnresolveIcon from './images/unresolve.svg';
 import styles from './Thread.module.css';
 
-export function Thread({thread, collapsed, onToggle, onResolve, onClick, highlighted, interactive = true}) {
+export function Thread({thread, collapsed: collapsedProp, onToggle, onResolve, onClick, highlighted, interactive = true}) {
   const {t} = useI18n({locale: 'ui'});
   const firstComment = thread.comments[0];
   const replies = thread.comments.slice(1);
+
+  // Collapsing hides the reply form, which would leave a drafted reply
+  // out of reach.
+  const [replyDraft] = useCommentDraft({threadId: thread.id});
+  const collapsed = collapsedProp && !replyDraft;
+
   const repliesCollapsed = collapsed && replies.length > 0;
 
   const currentQuote = useSubjectQuote(thread);
diff --git a/entry_types/scrolled/package/src/review/ThreadList.js b/entry_types/scrolled/package/src/review/ThreadList.js
index 6702bb99e9..e99b41e87f 100644
--- a/entry_types/scrolled/package/src/review/ThreadList.js
+++ b/entry_types/scrolled/package/src/review/ThreadList.js
@@ -2,6 +2,7 @@ import React, {useMemo, useState} from 'react';
 import classNames from 'classnames';
 
 import {useI18n} from '../frontend/i18n';
+import {useCommentDraft} from './ReviewStateProvider';
 import {useLocatedCommentThreadsForSubject} from './useLocatedCommentThreadsForSubject';
 import {Thread} from './Thread';
 import {NewThreadForm} from './NewThreadForm';
@@ -35,16 +36,23 @@ export function ThreadList({subjectType, subjectId, subjectRange, filter, highli
                                   highlightedThreadId.includes(thread.id) :
                                   thread.id === highlightedThreadId;
 
+  const noThreads = activeThreads.length === 0 && resolvedThreads.length === 0;
+
+  const [draft] = useCommentDraft({subjectType, subjectId});
   const [expandedThreadId, setExpandedThreadId] = useState(null);
-  const [formToggled, setFormToggled] = useState(null);
   const [resolvedToggled, setResolvedToggled] = useState(null);
+  const [formToggled, setFormToggled] = useState(
+    showNewFormProp !== undefined ? showNewFormProp :
+    expandResolved ? noThreads : activeThreads.length === 0
+  );
 
   const showResolved = resolvedToggled !== null ? resolvedToggled : !!expandResolved;
 
-  const noThreads = activeThreads.length === 0 && resolvedThreads.length === 0;
-  const showNewForm = formToggled !== null ? formToggled :
-                      showNewFormProp !== undefined ? showNewFormProp :
-                      expandResolved ? noThreads : activeThreads.length === 0;
+  // An unsent draft reopens the form and keeps it open while the thread is
+  // being created. Callers passing showNewForm={false} suppress the form
+  // entirely: the editor sidebar lists compose new threads in a view of
+  // their own.
+  const showNewForm = showNewFormProp !== false && (!!draft || formToggled);
 
   function toggleThread(threadId) {
     setExpandedThreadId(expandedThreadId === threadId ? null : threadId);
diff --git a/entry_types/scrolled/package/src/review/postMessage.js b/entry_types/scrolled/package/src/review/postMessage.js
index 8f1ccef233..ac6d8b45bb 100644
--- a/entry_types/scrolled/package/src/review/postMessage.js
+++ b/entry_types/scrolled/package/src/review/postMessage.js
@@ -17,6 +17,13 @@ export function postCreateCommentMessage({threadId, body, quote}) {
   );
 }
 
+export function postSetCommentDraftMessage(draft) {
+  window.top.postMessage(
+    {type: 'SET_COMMENT_DRAFT', payload: draft},
+    window.location.origin
+  );
+}
+
 export function postUpdateThreadMessage({threadId, resolved}) {
   window.top.postMessage(
     {type: 'UPDATE_THREAD', payload: {threadId, resolved}},
@@ -37,3 +44,10 @@ export function postReviewStateThreadChangeMessage(targetWindow, thread) {
     window.location.origin
   );
 }
+
+export function postReviewStateDraftsChangeMessage(targetWindow, drafts) {
+  targetWindow.postMessage(
+    {type: 'REVIEW_STATE_DRAFTS_CHANGE', payload: drafts},
+    window.location.origin
+  );
+}
diff --git a/entry_types/scrolled/package/src/review/useDraftedBody.js b/entry_types/scrolled/package/src/review/useDraftedBody.js
new file mode 100644
index 0000000000..d0d1534f81
--- /dev/null
+++ b/entry_types/scrolled/package/src/review/useDraftedBody.js
@@ -0,0 +1,49 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {useCommentDraft} from './ReviewStateProvider';
+
+// Storing the draft only once the form goes away is deliberate: whether a
+// draft exists decides whether the thread list keeps the form open, which
+// would otherwise make the form disappear from under a reviewer clearing
+// the text to start over.
+export function useDraftedBody(draftOf) {
+  const [draft, setDraft] = useCommentDraft(draftOf);
+
+  // Read when mounting only: echoing the stored draft back into the
+  // textarea would make its value lag behind typing.
+  const [body, setBody] = useState(() => draft?.body || '');
+  const pending = !!draft?.pending;
+
+  const latest = useRef();
+  latest.current = {body, pending, setDraft};
+
+  const wasPending = useRef(false);
+
+  useEffect(() => {
+    if (pending) {
+      wasPending.current = true;
+    }
+    else if (wasPending.current) {
+      wasPending.current = false;
+
+      // Forms that outlive their submit - the reply form stays around for
+      // the next reply - start over once the session has dropped the
+      // draft it created the comment from. A failed attempt keeps the
+      // draft, and with it the text.
+      if (!draft) setBody('');
+    }
+  }, [pending, draft]);
+
+  useEffect(() => () => {
+    const {body, pending, setDraft} = latest.current;
+
+    // The session drops the draft it created the comment from, so storing
+    // the text of a pending draft here would resurrect it. A failed
+    // attempt leaves a draft that is no longer pending.
+    if (pending) return;
+
+    setDraft(body);
+  }, []);
+
+  return {body, setBody, submitting: pending};
+}
diff --git a/package/spec/review/ReviewSession-spec.js b/package/spec/review/ReviewSession-spec.js
index 4c0383bf32..89d41f53ef 100644
--- a/package/spec/review/ReviewSession-spec.js
+++ b/package/spec/review/ReviewSession-spec.js
@@ -112,6 +112,57 @@ describe('ReviewSession', () => {
     );
   });
 
+  it('emits create:thread after createThread', async () => {
+    const request = jest.fn()
+      .mockResolvedValueOnce({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: []
+      })
+      .mockResolvedValueOnce({
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'Looks good!', creatorId: 42}]
+      });
+
+    const session = new ReviewSession({entryId: 5, request});
+    await session.fetch();
+
+    const listener = jest.fn();
+    session.on('create:thread', listener);
+
+    await session.createThread({
+      subjectType: 'ContentElement',
+      subjectId: 10,
+      body: 'Looks good!'
+    });
+
+    expect(listener).toHaveBeenCalledWith(
+      expect.objectContaining({id: 1, subjectType: 'ContentElement'})
+    );
+  });
+
+  it('does not emit create:thread when updating a thread', async () => {
+    const request = jest.fn()
+      .mockResolvedValueOnce({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: [{id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []}]
+      })
+      .mockResolvedValueOnce({
+        id: 1, subjectType: 'ContentElement', subjectId: 10, resolved: true, comments: []
+      });
+
+    const session = new ReviewSession({entryId: 5, request});
+    await session.fetch();
+
+    const listener = jest.fn();
+    session.on('create:thread', listener);
+
+    await session.updateThread({threadId: 1, resolved: true});
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
   it('includes subject_range in createThread request', async () => {
     const subjectRange = {
       anchor: {path: [0, 0], offset: 5},
@@ -755,4 +806,180 @@ describe('ReviewSession', () => {
       expect(listener).not.toHaveBeenCalled();
     });
   });
+
+  describe('drafts', () => {
+    function setupSession({request} = {}) {
+      return new ReviewSession({
+        entryId: 5,
+        request: request || jest.fn(),
+        initialState: {currentUser: {id: 42, name: 'Alice'}, commentThreads: []}
+      });
+    }
+
+    it('stores a draft per subject and emits change:drafts', () => {
+      const session = setupSession();
+      const listener = jest.fn();
+      session.on('change:drafts', listener);
+
+      session.setDraft({
+        subjectType: 'ContentElement', subjectId: 10, body: 'Half a thought'
+      });
+
+      expect(session.drafts).toEqual({
+        'ContentElement:10': {
+          subjectType: 'ContentElement',
+          subjectId: 10,
+          body: 'Half a thought',
+          pending: false
+        }
+      });
+      expect(listener).toHaveBeenCalledWith(session.drafts);
+    });
+
+    it('keeps drafts of replies separate from those of new threads', () => {
+      const session = setupSession();
+
+      session.setDraft({
+        subjectType: 'ContentElement', subjectId: 10, body: 'A new topic'
+      });
+      session.setDraft({threadId: 10, body: 'A reply'});
+
+      expect(session.drafts).toEqual({
+        'ContentElement:10': expect.objectContaining({body: 'A new topic'}),
+        'Thread:10': {threadId: 10, body: 'A reply', pending: false}
+      });
+    });
+
+    it('discards the draft of a reply when the body is blank', () => {
+      const session = setupSession();
+      session.setDraft({threadId: 10, body: 'A reply'});
+
+      session.setDraft({threadId: 10, body: ''});
+
+      expect(session.drafts).toEqual({});
+    });
+
+    it('shares one draft between the ranges of a subject', () => {
+      const session = setupSession();
+
+      session.setDraft({
+        subjectType: 'ContentElement', subjectId: 10, body: 'About one phrase'
+      });
+      session.setDraft({
+        subjectType: 'ContentElement', subjectId: 10, body: 'About another'
+      });
+
+      expect(Object.keys(session.drafts)).toEqual(['ContentElement:10']);
+      expect(session.drafts['ContentElement:10'].body).toEqual('About another');
+    });
+
+    it('discards the draft when the body is blank', () => {
+      const session = setupSession();
+      session.setDraft({
+        subjectType: 'ContentElement', subjectId: 10, body: 'Half a thought'
+      });
+
+      const listener = jest.fn();
+      session.on('change:drafts', listener);
+
+      session.setDraft({subjectType: 'ContentElement', subjectId: 10, body: '  '});
+
+      expect(session.drafts).toEqual({});
+      expect(listener).toHaveBeenCalledWith({});
+    });
+
+    it('marks the draft pending while the thread is being created', async () => {
+      let respond;
+      const request = jest.fn(() => new Promise(resolve => {respond = resolve}));
+      const session = setupSession({request});
+
+      const promise = session.createThread({
+        subjectType: 'ContentElement', subjectId: 10, body: 'Looks good!'
+      });
+
+      expect(session.drafts['ContentElement:10']).toEqual({
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        body: 'Looks good!',
+        pending: true
+      });
+
+      respond({id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []});
+      await promise;
+
+      expect(session.drafts).toEqual({});
+    });
+
+    it('drops the draft only after announcing the created thread', async () => {
+      const request = jest.fn().mockResolvedValue({
+        id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []
+      });
+      const session = setupSession({request});
+
+      const events = [];
+      session.on('create:thread', () => events.push('create:thread'));
+      session.on('change:drafts', () => events.push('change:drafts'));
+
+      await session.createThread({
+        subjectType: 'ContentElement', subjectId: 10, body: 'Looks good!'
+      });
+
+      expect(events).toEqual(['change:drafts', 'create:thread', 'change:drafts']);
+    });
+
+    it('marks the draft of a reply pending while it is being created', async () => {
+      let respond;
+      const request = jest.fn(() => new Promise(resolve => {respond = resolve}));
+      const session = new ReviewSession({
+        entryId: 5,
+        request,
+        initialState: {
+          currentUser: {id: 42, name: 'Alice'},
+          commentThreads: [{
+            id: 7, subjectType: 'ContentElement', subjectId: 10, comments: []
+          }]
+        }
+      });
+
+      const promise = session.createComment({threadId: 7, body: 'A reply'});
+
+      expect(session.drafts['Thread:7']).toEqual({
+        threadId: 7, body: 'A reply', pending: true
+      });
+
+      respond({id: 100, body: 'A reply'});
+      await promise;
+
+      expect(session.drafts).toEqual({});
+    });
+
+    it('keeps the draft of a reply and clears pending when creating fails', async () => {
+      const error = new Error('500 Internal Server Error');
+      const session = setupSession({request: jest.fn().mockRejectedValue(error)});
+
+      await expect(session.createComment({threadId: 7, body: 'A reply'}))
+        .rejects.toThrow(error);
+
+      expect(session.drafts['Thread:7']).toEqual({
+        threadId: 7, body: 'A reply', pending: false
+      });
+    });
+
+    it('keeps the draft and clears pending when creating fails', async () => {
+      const error = new Error('500 Internal Server Error');
+      const session = setupSession({request: jest.fn().mockRejectedValue(error)});
+
+      await expect(session.createThread({
+        subjectType: 'ContentElement', subjectId: 10, body: 'Looks good!'
+      })).rejects.toThrow(error);
+
+      expect(session.drafts['ContentElement:10']).toEqual({
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        body: 'Looks good!',
+        pending: false
+      });
+      expect(session.state.commentThreads).toEqual([]);
+    });
+  });
 });
diff --git a/package/src/review/ReviewSession.js b/package/src/review/ReviewSession.js
index 79dd05e11e..379338e27f 100644
--- a/package/src/review/ReviewSession.js
+++ b/package/src/review/ReviewSession.js
@@ -5,15 +5,36 @@ export class ReviewSession {
     this._entryId = entryId;
     this._request = request;
     this._state = initialState;
+    this._drafts = {};
   }
 
   get state() {
     return this._state;
   }
 
+  // Unsent comment texts, not keyed by subject range: a draft written
+  // about one phrase of a text block is offered again when commenting on
+  // another phrase of the same block.
+  get drafts() {
+    return this._drafts;
+  }
+
+  setDraft({body, ...of}) {
+    if (body.trim().length) {
+      this._writeDraft({...of, body});
+    }
+    else {
+      this._deleteDraft(of);
+    }
+  }
+
   async createThread({
     subjectType, subjectId, subjectRange, sectionPermaId, body, quote
   }) {
+    // Written even when the form never stored a draft, so that the text
+    // outlives a failed attempt.
+    this._writeDraft({subjectType, subjectId, body, pending: true});
+
     const thread = await this._request({
       url: `/review/entries/${this._entryId}/comment_threads`,
       method: 'POST',
@@ -26,10 +47,20 @@ export class ReviewSession {
           comment: {body, ...(quote && {quote})}
         }
       }
+    }).catch(error => {
+      this._writeDraft({subjectType, subjectId, body, pending: false});
+      // Rethrown so that a failure still shows up as an unhandled
+      // rejection rather than only as a form that became editable again.
+      throw error;
     });
 
     this._upsertThread(thread);
     this.trigger('change:thread', thread);
+    this.trigger('create:thread', thread);
+
+    // Dropped last so that the form closing does not briefly reveal a
+    // list without the thread.
+    this._deleteDraft({subjectType, subjectId});
   }
 
   async updateThread({threadId, resolved}) {
@@ -44,10 +75,15 @@ export class ReviewSession {
   }
 
   async createComment({threadId, body, quote}) {
+    this._writeDraft({threadId, body, pending: true});
+
     const comment = await this._request({
       url: `/review/entries/${this._entryId}/comment_threads/${threadId}/comments`,
       method: 'POST',
       payload: {comment: {body, ...(quote && {quote})}}
+    }).catch(error => {
+      this._writeDraft({threadId, body, pending: false});
+      throw error;
     });
 
     const thread = this._findThread(threadId);
@@ -61,6 +97,8 @@ export class ReviewSession {
       this._upsertThread(updatedThread);
       this.trigger('change:thread', updatedThread);
     }
+
+    this._deleteDraft({threadId});
   }
 
   diffSubjectRangeUpdates(ranges) {
@@ -126,6 +164,26 @@ export class ReviewSession {
     this.trigger('reset', this._state);
   }
 
+  _writeDraft({body, pending = false, ...of}) {
+    this._drafts = {
+      ...this._drafts,
+      [draftKey(of)]: {...of, body, pending}
+    };
+
+    this.trigger('change:drafts', this._drafts);
+  }
+
+  _deleteDraft(of) {
+    const key = draftKey(of);
+
+    if (!(key in this._drafts)) return;
+
+    this._drafts = {...this._drafts};
+    delete this._drafts[key];
+
+    this.trigger('change:drafts', this._drafts);
+  }
+
   _findThread(id) {
     return this._state?.commentThreads.find(t => t.id === id);
   }
@@ -157,6 +215,11 @@ export class ReviewSession {
 
 Object.assign(ReviewSession.prototype, BackboneEvents);
 
+// Replies are drafted per thread, new threads per subject.
+function draftKey({threadId, subjectType, subjectId}) {
+  return threadId ? `Thread:${threadId}` : `${subjectType}:${subjectId}`;
+}
+
 function sameRange(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }