From bb84366046c9bbc628eb5e567da019249dff47a3 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 13 Oct 2026 16:14:46 +0200
Subject: [PATCH] feat(messages): typing indicator and message editing

Both are plain XMPP, so neither daily-api nor skirnir changes.

Typing uses XEP-0085 chat states. The composer sends `composing` when a
draft gets text, repeats it every 5s while typing goes on, and `paused`
4s after the last keystroke, on clearing the draft, or on leaving the
thread; the message itself ends it. The receiver shows a dots bubble
under the newest message, drops it on `paused`, on the peer's message,
or after 10s without a repeat, so a peer whose tab closed never looks
busy. Standalone chat states aren't archived or held offline by
ejabberd, and our own sessions' states arrive as carbons and are
ignored. The state lives in the query cache (never fetched, reset on
reconnect) so it survives thread remounts and needs no new store.

Editing uses XEP-0308 corrections: a new message with a `<replace>`
pointing at the original. Only the sender's own message is changed,
and a correction of a message outside the loaded page is dropped with
it, so a peer can't rewrite our bubbles and nothing shows up as a
duplicate. The archive stores the original and the correction as
separate items; loading folds them, keeping the original's time,
reactions and comment reference. An edit is tracked through stream
management like a message but never reported as sent, so it doesn't
bump the peer's unread count or push. The inline editor replaces the
bubble's text; images in the message stay as they are and are
reattached in the composer's shape on save. Arrow up in an empty
composer edits the viewer's last message.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../components/ConversationThread.spec.tsx    |  94 +++++++++++-
 .../components/ConversationThread.tsx         | 111 +++++++++++++-
 .../messages/components/MessageComposer.tsx   |  17 +++
 .../messages/components/MessageEditor.tsx     | 105 +++++++++++++
 .../messages/components/TypingIndicator.tsx   |  32 ++++
 .../features/messages/hooks/useEditMessage.ts |  50 +++++++
 .../messages/hooks/useMessagesLiveUpdates.ts  |  58 +++++++-
 .../messages/hooks/useTypingNotifier.ts       |  83 +++++++++++
 .../shared/src/features/messages/media.ts     |  17 +++
 .../src/features/messages/mockTransport.ts    |  32 +++-
 .../shared/src/features/messages/queries.ts   |  61 ++++++++
 .../src/features/messages/stanzas.spec.ts     |  67 +++++++++
 .../shared/src/features/messages/stanzas.ts   |  68 ++++++++-
 .../shared/src/features/messages/transport.ts |   4 +
 .../shared/src/features/messages/types.ts     |  30 ++++
 .../features/messages/xmppTransport.spec.ts   | 105 +++++++++++++
 .../src/features/messages/xmppTransport.ts    | 140 ++++++++++++++++--
 packages/shared/src/lib/log.ts                |   1 +
 18 files changed, 1046 insertions(+), 29 deletions(-)
 create mode 100644 packages/shared/src/features/messages/components/MessageEditor.tsx
 create mode 100644 packages/shared/src/features/messages/components/TypingIndicator.tsx
 create mode 100644 packages/shared/src/features/messages/hooks/useEditMessage.ts
 create mode 100644 packages/shared/src/features/messages/hooks/useTypingNotifier.ts

diff --git a/packages/shared/src/features/messages/components/ConversationThread.spec.tsx b/packages/shared/src/features/messages/components/ConversationThread.spec.tsx
index 21aa75e419..b07a80ff33 100644
--- a/packages/shared/src/features/messages/components/ConversationThread.spec.tsx
+++ b/packages/shared/src/features/messages/components/ConversationThread.spec.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConversationThread } from './ConversationThread';
-import { dmThreadQueryKey } from '../queries';
+import { dmThreadQueryKey, dmTypingQueryOptions } from '../queries';
 import { DirectMessageAccess } from '../graphql';
 import type { DmMessage, DmPeer } from '../types';
 import { DmMessageStatus } from '../types';
@@ -44,6 +50,13 @@ jest.mock('../hooks/useSendMessage', () => ({
 jest.mock('../hooks/useReactToMessage', () => ({
   useReactToMessage: () => jest.fn(),
 }));
+const mockEdit = jest.fn();
+jest.mock('../hooks/useEditMessage', () => ({
+  useEditMessage: () => mockEdit,
+}));
+jest.mock('../hooks/useTypingNotifier', () => ({
+  useTypingNotifier: () => ({ onDraftChange: jest.fn(), onSent: jest.fn() }),
+}));
 jest.mock('../hooks/useMarkThreadRead', () => ({
   useMarkThreadRead: jest.fn(),
 }));
@@ -108,6 +121,7 @@ const message = (senderId: string, createdAt = new Date()): DmMessage => {
 
 const renderThread = async () => {
   const client = new QueryClient();
+  mockEdit.mockReset();
   render(
     <QueryClientProvider client={client}>
       <ConversationThread peerId={mockPeer.id} />
@@ -129,7 +143,7 @@ const renderThread = async () => {
     fireEvent.scroll(list);
   };
 
-  return { list, receive, scrollTo };
+  return { list, receive, scrollTo, client };
 };
 
 beforeEach(() => {
@@ -225,3 +239,77 @@ describe('ConversationThread intro and days', () => {
     expect(screen.getByRole('separator', { name: 'Today' })).toBeVisible();
   });
 });
+
+describe('ConversationThread typing', () => {
+  it('shows the peer typing under the newest message and follows it', async () => {
+    const { list, client } = await renderThread();
+    list.scrollTop = 0;
+
+    act(() => {
+      client.setQueryData(
+        dmTypingQueryOptions(viewer, mockPeer.id).queryKey,
+        true,
+      );
+    });
+
+    expect(
+      await screen.findByRole('status', { name: '@ada is typing' }),
+    ).toBeInTheDocument();
+    expect(list.scrollTop).toBe(scrollHeight);
+
+    act(() => {
+      client.setQueryData(
+        dmTypingQueryOptions(viewer, mockPeer.id).queryKey,
+        false,
+      );
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
+    );
+  });
+});
+
+describe('ConversationThread editing', () => {
+  it('edits the text of the viewer’s message and keeps its images', async () => {
+    const mine = {
+      ...message('me'),
+      body: 'typo here\n\n![pic](https://media.daily.dev/pic.png)',
+    };
+    mockThread = [message('ada'), mine];
+    await renderThread();
+
+    expect(screen.getAllByLabelText('Edit message')).toHaveLength(1);
+    fireEvent.click(screen.getByLabelText('Edit message'));
+    const editor = screen.getByLabelText('Edit message');
+    expect(editor).toHaveValue('typo here');
+
+    fireEvent.change(editor, { target: { value: 'fixed here' } });
+    fireEvent.keyDown(editor, { key: 'Enter' });
+
+    expect(mockEdit).toHaveBeenCalledWith(
+      mine,
+      'fixed here\n\n![pic](https://media.daily.dev/pic.png)',
+    );
+  });
+
+  it('cancels with Escape without saving', async () => {
+    mockThread = [message('me')];
+    await renderThread();
+
+    fireEvent.click(screen.getByLabelText('Edit message'));
+    const editor = screen.getByLabelText('Edit message');
+    fireEvent.change(editor, { target: { value: 'changed' } });
+    fireEvent.keyDown(editor, { key: 'Escape' });
+
+    expect(mockEdit).not.toHaveBeenCalled();
+    expect(screen.getByText(mockThread[0].body)).toBeInTheDocument();
+  });
+
+  it('marks an edited message', async () => {
+    mockThread = [{ ...message('me'), editedAt: new Date().toISOString() }];
+    await renderThread();
+
+    expect(screen.getByText('(edited)')).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/messages/components/ConversationThread.tsx b/packages/shared/src/features/messages/components/ConversationThread.tsx
index 1e0fb4a40a..9531050a5e 100644
--- a/packages/shared/src/features/messages/components/ConversationThread.tsx
+++ b/packages/shared/src/features/messages/components/ConversationThread.tsx
@@ -33,6 +33,7 @@ import {
 } from '../../../components/buttons/Button';
 import { ArrowIcon } from '../../../components/icons/Arrow';
 import { BlockIcon } from '../../../components/icons/Block';
+import { EditIcon } from '../../../components/icons/Edit';
 import { Tooltip } from '../../../components/tooltip/Tooltip';
 import { IconSize } from '../../../components/Icon';
 import { ShellPage } from '../../../components/shell/ShellPageContext';
@@ -49,12 +50,15 @@ import {
   dmPeerQueryOptions,
   dmConversationQueryOptions,
   dmThreadQueryOptions,
+  dmTypingQueryOptions,
 } from '../queries';
 import { DirectMessageAccess } from '../graphql';
 import { DmAccess, getDmAccess } from '../access';
 import { useDmSettings } from '../hooks/useDmSettings';
 import { useSendMessage } from '../hooks/useSendMessage';
 import { useReactToMessage } from '../hooks/useReactToMessage';
+import { useEditMessage } from '../hooks/useEditMessage';
+import { useTypingNotifier } from '../hooks/useTypingNotifier';
 import { useMarkThreadRead } from '../hooks/useMarkThreadRead';
 import type { DmMessage } from '../types';
 import { DmMessageStatus } from '../types';
@@ -65,7 +69,9 @@ import { MessageRequestResponse } from './MessageRequestResponse';
 import { DmContextCard } from './DmContextCard';
 import { MessageCommentRef } from './MessageCommentRef';
 import { AddReactionButton, MessageReactions } from './MessageReactions';
-import { parseMessageBody } from '../media';
+import { MessageEditor } from './MessageEditor';
+import { TypingIndicator } from './TypingIndicator';
+import { getEditableText, parseMessageBody, withEditedText } from '../media';
 import { findPostIdInText, splitLinks } from '../messageLinks';
 import { getMessagesUrl } from '../urls';
 import type { DmOrigin } from '../urls';
@@ -120,6 +126,10 @@ const DaySeparator = ({ date }: { date: Date }): ReactElement => {
   );
 };
 
+// Shown on hover with a mouse; always there on touch screens.
+const hoverActionClassName =
+  'mouse:invisible mouse:group-focus-within:visible mouse:group-hover:visible';
+
 const MessageText = ({ text }: { text: string }): ReactElement => (
   <>
     {splitLinks(text).map((segment, index) =>
@@ -146,22 +156,32 @@ const MessageBubble = ({
   message,
   isMine,
   isGroupEnd,
+  isEditing,
   peerUsername,
   viewerId,
   onRetry,
   onReact,
+  onEdit,
+  onSaveEdit,
+  onCancelEdit,
   onMediaLoad,
 }: {
   message: DmMessage;
   isMine: boolean;
   isGroupEnd: boolean;
+  isEditing: boolean;
   peerUsername: string;
   viewerId: string;
   onRetry: (message: DmMessage) => void;
   onReact?: (message: DmMessage, emoji: string) => void;
+  // Missing when the message isn't the viewer's to change.
+  onEdit?: (message: DmMessage) => void;
+  onSaveEdit: (message: DmMessage, body: string) => void;
+  onCancelEdit: () => void;
   onMediaLoad: () => void;
 }): ReactElement => {
   const parts = parseMessageBody(message.body);
+  const lastTextIndex = parts.map((part) => part.type).lastIndexOf('text');
   const postId = findPostIdInText(
     parts.map((part) => (part.type === 'text' ? part.text : '')).join('\n'),
   );
@@ -196,9 +216,24 @@ const MessageBubble = ({
           className={classNames(
             'min-w-0 max-w-[85%] gap-1 tablet:max-w-[30rem]',
             isMine ? 'items-end' : 'items-start',
+            isEditing && 'w-full',
           )}
         >
+          {isEditing && (
+            <MessageEditor
+              initialValue={getEditableText(message.body)}
+              onSave={(text) =>
+                onSaveEdit(message, withEditedText(message.body, text))
+              }
+              onCancel={onCancelEdit}
+            />
+          )}
           {parts.map((part, index) => {
+            // The text is in the editor; images stay in view.
+            if (isEditing && part.type === 'text') {
+              return null;
+            }
+
             const isLast = index === parts.length - 1;
             const shape = classNames(
               isMine && isGroupEnd && isLast && 'rounded-br-4',
@@ -246,6 +281,14 @@ const MessageBubble = ({
                 )}
               >
                 <MessageText text={part.text} />
+                {message.editedAt && index === lastTextIndex && (
+                  <span
+                    title={formatDateTime(message.editedAt)}
+                    className="ml-1 text-text-quaternary typo-caption2"
+                  >
+                    (edited)
+                  </span>
+                )}
               </div>
             );
           })}
@@ -257,11 +300,21 @@ const MessageBubble = ({
             />
           )}
         </FlexCol>
-        {react && (
-          <AddReactionButton
-            onReact={react}
-            className="mouse:invisible mouse:group-focus-within:visible mouse:group-hover:visible"
-          />
+        {!isEditing && onEdit && (
+          <Tooltip content="Edit">
+            <Button
+              type="button"
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.XSmall}
+              icon={<EditIcon />}
+              aria-label="Edit message"
+              className={hoverActionClassName}
+              onClick={() => onEdit(message)}
+            />
+          </Tooltip>
+        )}
+        {!isEditing && react && (
+          <AddReactionButton onReact={react} className={hoverActionClassName} />
         )}
       </div>
       {Object.keys(reactions).length > 0 && (
@@ -392,6 +445,11 @@ export const ConversationThread = ({
   const { allowsMessages } = useDmSettings();
   const { send, retry } = useSendMessage(peer);
   const react = useReactToMessage(peer);
+  const edit = useEditMessage(peer);
+  const [editingId, setEditingId] = useState<string>();
+  const { data: isPeerTyping = false } = useQuery(
+    dmTypingQueryOptions(user, peerId),
+  );
 
   const isBlockedByMe = preference?.status === ContentPreferenceStatus.Blocked;
   const access = getDmAccess({
@@ -400,6 +458,21 @@ export const ConversationThread = ({
     peerAccess: peer?.access ?? DirectMessageAccess.Open,
     hasIncomingRequest,
   });
+  const typing = useTypingNotifier(peer, access === DmAccess.Allowed);
+  // Only a delivered message of the viewer's, with text to change, can be
+  // edited; the request note lives in the API, not the chat archive.
+  const canEdit = (message: DmMessage): boolean =>
+    access === DmAccess.Allowed &&
+    message.senderId === user?.id &&
+    message.status === DmMessageStatus.Sent &&
+    archived.includes(message) &&
+    !!getEditableText(message.body);
+  const editLast = () => {
+    const last = [...archived].reverse().find(canEdit);
+    if (last) {
+      setEditingId(last.id);
+    }
+  };
   useMarkThreadRead({
     peerId,
     lastIncomingId: [...archived]
@@ -446,6 +519,15 @@ export const ConversationThread = ({
     setUnseenCount((count) => count + arrived);
   }, [messages.length, peerId, user?.id]);
 
+  // The indicator appears under the newest message, where a reader at the
+  // bottom expects to see it.
+  useLayoutEffect(() => {
+    const container = scrollRef.current;
+    if (isPeerTyping && container && isAtBottomRef.current) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [isPeerTyping]);
+
   const jumpToLatest = () => {
     const container = scrollRef.current;
     container?.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
@@ -625,17 +707,31 @@ export const ConversationThread = ({
                       next.senderId !== message.senderId ||
                       !isSameDay(message.createdAt, next.createdAt)
                     }
+                    isEditing={message.id === editingId}
                     peerUsername={peer?.username ?? ''}
                     viewerId={user?.id ?? ''}
                     onRetry={retry}
                     // A blocked peer or DMs turned off would bounce the
                     // reaction.
                     onReact={access === DmAccess.Allowed ? react : undefined}
+                    onEdit={
+                      canEdit(message)
+                        ? ({ id }) => setEditingId(id)
+                        : undefined
+                    }
+                    onSaveEdit={(target, body) => {
+                      setEditingId(undefined);
+                      edit(target, body);
+                    }}
+                    onCancelEdit={() => setEditingId(undefined)}
                     onMediaLoad={onMediaLoad}
                   />
                 </React.Fragment>
               );
             })}
+            {isPeerTyping && peer && (
+              <TypingIndicator username={peer.username} />
+            )}
           </FlexCol>
         </div>
         {showJump && (
@@ -683,11 +779,14 @@ export const ConversationThread = ({
               // picked first neither takes nor clears it.
               onSendGif={(body) => send(body)}
               onSend={(body) => {
+                typing.onSent();
                 send(body, pendingContext);
                 if (pendingContext) {
                   clearContext();
                 }
               }}
+              onDraftChange={typing.onDraftChange}
+              onEditLast={editLast}
             />
           </div>
         ) : (
diff --git a/packages/shared/src/features/messages/components/MessageComposer.tsx b/packages/shared/src/features/messages/components/MessageComposer.tsx
index 50976cf6fd..f6b3bdfcf2 100644
--- a/packages/shared/src/features/messages/components/MessageComposer.tsx
+++ b/packages/shared/src/features/messages/components/MessageComposer.tsx
@@ -50,11 +50,17 @@ export const MessageComposer = ({
   attachment,
   onSend,
   onSendGif,
+  onDraftChange,
+  onEditLast,
 }: {
   username: string;
   attachment?: ReactNode;
   onSend: (body: string) => void;
   onSendGif: (body: string) => void;
+  // Whether the draft has text, on every change, for the typing indicator.
+  onDraftChange?: (hasText: boolean) => void;
+  // Arrow up in an empty composer edits the viewer's last message.
+  onEditLast?: () => void;
 }): ReactElement => {
   const [value, setValue] = useState('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
@@ -88,6 +94,11 @@ export const MessageComposer = ({
     inputRef.current?.focus({ preventScroll: true });
   }, []);
 
+  // Covers typing, picked emojis and the clear after sending alike.
+  useEffect(() => {
+    onDraftChange?.(!!value.trim());
+  }, [onDraftChange, value]);
+
   const removeAttachment = (id: string) =>
     setAttachments((current) =>
       current.filter((item) => {
@@ -178,6 +189,12 @@ export const MessageComposer = ({
     ) {
       event.preventDefault();
       onSubmit();
+      return;
+    }
+
+    if (event.key === 'ArrowUp' && !value && onEditLast) {
+      event.preventDefault();
+      onEditLast();
     }
   };
 
diff --git a/packages/shared/src/features/messages/components/MessageEditor.tsx b/packages/shared/src/features/messages/components/MessageEditor.tsx
new file mode 100644
index 0000000000..c9a54c380f
--- /dev/null
+++ b/packages/shared/src/features/messages/components/MessageEditor.tsx
@@ -0,0 +1,105 @@
+import type { KeyboardEvent, ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { DM_MAX_LENGTH } from '../types';
+
+const maxEditorHeight = 160;
+
+// Replaces a bubble while its text is being corrected. Enter saves, Escape
+// cancels, like the composer.
+export const MessageEditor = ({
+  initialValue,
+  onSave,
+  onCancel,
+}: {
+  initialValue: string;
+  onSave: (value: string) => void;
+  onCancel: () => void;
+}): ReactElement => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const trimmed = value.trim();
+  const canSave = !!trimmed && trimmed !== initialValue;
+
+  const resize = () => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+
+    input.style.height = 'auto';
+    input.style.height = `${Math.min(input.scrollHeight, maxEditorHeight)}px`;
+  };
+
+  useEffect(() => {
+    const input = inputRef.current;
+    input?.focus({ preventScroll: true });
+    input?.setSelectionRange(input.value.length, input.value.length);
+    resize();
+  }, []);
+
+  const save = () => {
+    if (canSave) {
+      onSave(trimmed);
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onCancel();
+      return;
+    }
+
+    if (
+      event.key === 'Enter' &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      event.preventDefault();
+      save();
+    }
+  };
+
+  return (
+    <FlexCol className="w-full gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-2">
+      <textarea
+        ref={inputRef}
+        rows={1}
+        aria-label="Edit message"
+        maxLength={DM_MAX_LENGTH}
+        value={value}
+        className="block min-h-8 w-full resize-none bg-transparent px-1 py-1.5 text-text-primary outline-none typo-body tablet:typo-callout"
+        onChange={(event) => {
+          setValue(event.target.value);
+          resize();
+        }}
+        onKeyDown={onKeyDown}
+      />
+      <FlexRow className="items-center justify-end gap-2">
+        <Button
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          size={ButtonSize.XSmall}
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.XSmall}
+          disabled={!canSave}
+          onClick={save}
+        >
+          Save
+        </Button>
+      </FlexRow>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/messages/components/TypingIndicator.tsx b/packages/shared/src/features/messages/components/TypingIndicator.tsx
new file mode 100644
index 0000000000..1fc939956a
--- /dev/null
+++ b/packages/shared/src/features/messages/components/TypingIndicator.tsx
@@ -0,0 +1,32 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+
+const dotDelays = [
+  '[animation-delay:0ms]',
+  '[animation-delay:150ms]',
+  '[animation-delay:300ms]',
+];
+
+// Sits where the peer's next bubble will appear.
+export const TypingIndicator = ({
+  username,
+}: {
+  username: string;
+}): ReactElement => (
+  <div
+    role="status"
+    aria-label={`@${username} is typing`}
+    className="flex w-fit items-center gap-1 rounded-16 rounded-bl-4 border border-border-subtlest-tertiary px-3 py-3"
+  >
+    {dotDelays.map((delay) => (
+      <span
+        key={delay}
+        className={classNames(
+          'size-1.5 animate-bounce rounded-full bg-text-tertiary',
+          delay,
+        )}
+      />
+    ))}
+  </div>
+);
diff --git a/packages/shared/src/features/messages/hooks/useEditMessage.ts b/packages/shared/src/features/messages/hooks/useEditMessage.ts
new file mode 100644
index 0000000000..169d47aef0
--- /dev/null
+++ b/packages/shared/src/features/messages/hooks/useEditMessage.ts
@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { LogEvent } from '../../../lib/log';
+import { getDmTransport } from '../transport';
+import { patchDmMessage } from '../queries';
+import type { DmMessage, DmPeer } from '../types';
+
+export const useEditMessage = (
+  peer: DmPeer | null | undefined,
+): ((message: DmMessage, body: string) => void) => {
+  const { user } = useAuthContext();
+  const queryClient = useQueryClient();
+  const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
+
+  return useCallback(
+    (message: DmMessage, body: string) => {
+      if (!user || !peer || body === message.body) {
+        return;
+      }
+
+      const apply = (next: Pick<DmMessage, 'body' | 'editedAt'>) =>
+        patchDmMessage(queryClient, user, peer.id, message.id, (current) => ({
+          ...current,
+          ...next,
+        }));
+
+      apply({ body, editedAt: new Date().toISOString() });
+
+      getDmTransport(user.id)
+        .edit(peer, message.id, body)
+        .then(() =>
+          logEvent({
+            event_name: LogEvent.EditDirectMessage,
+            target_id: peer.id,
+          }),
+        )
+        .catch(() => {
+          // Never left the client, so the original is still what both sides
+          // have.
+          apply({ body: message.body, editedAt: message.editedAt });
+          displayToast("Couldn't save your edit. Try again.");
+        });
+    },
+    [displayToast, logEvent, peer, queryClient, user],
+  );
+};
diff --git a/packages/shared/src/features/messages/hooks/useMessagesLiveUpdates.ts b/packages/shared/src/features/messages/hooks/useMessagesLiveUpdates.ts
index 74c362149d..53eac93138 100644
--- a/packages/shared/src/features/messages/hooks/useMessagesLiveUpdates.ts
+++ b/packages/shared/src/features/messages/hooks/useMessagesLiveUpdates.ts
@@ -5,15 +5,21 @@ import { useToastNotification } from '../../../hooks/useToastNotification';
 import { generateQueryKey, RequestKey } from '../../../lib/query';
 import { getDmTransport } from '../transport';
 import {
+  applyEditToConversations,
   dmConversationsQueryKey,
   dmThreadQueryKey,
+  dmTypingQueryOptions,
   upsertConversationMessage,
 } from '../queries';
-import { applyReaction } from '../stanzas';
+import { applyEdit, applyReaction } from '../stanzas';
 import type { DmMessage } from '../types';
 import { DmMessageStatus } from '../types';
 
 const peerUnavailableCopy = "This user isn't accepting messages";
+// A peer who stops typing without saying so (closed the tab, lost the
+// connection) shouldn't look busy forever. Their client repeats `composing`
+// well within this while they keep typing.
+const typingTimeoutMs = 10 * 1000;
 
 // Feeds incoming messages into the query cache. Mount it once per surface that
 // shows messages; the shared transport fans one connection out to all of them.
@@ -27,6 +33,22 @@ export const useMessagesLiveUpdates = (enabled: boolean): void => {
       return undefined;
     }
 
+    const typingTimers = new Map<string, ReturnType<typeof setTimeout>>();
+    const setTyping = (peerId: string, isTyping: boolean) => {
+      clearTimeout(typingTimers.get(peerId));
+      typingTimers.delete(peerId);
+      queryClient.setQueryData<boolean>(
+        dmTypingQueryOptions(user, peerId).queryKey,
+        isTyping,
+      );
+      if (isTyping) {
+        typingTimers.set(
+          peerId,
+          setTimeout(() => setTyping(peerId, false), typingTimeoutMs),
+        );
+      }
+    };
+
     const setStatus = (
       peerId: string,
       messageId: string,
@@ -40,7 +62,30 @@ export const useMessagesLiveUpdates = (enabled: boolean): void => {
           ),
       );
 
-    return getDmTransport(user.id).subscribe((event) => {
+    const unsubscribe = getDmTransport(user.id).subscribe((event) => {
+      if (event.type === 'chatState') {
+        setTyping(event.peerId, event.state === 'composing');
+        return;
+      }
+
+      if (event.type === 'edit') {
+        queryClient.setQueryData<DmMessage[]>(
+          dmThreadQueryKey(user, event.edit.peerId),
+          (messages) => messages && applyEdit(messages, event.edit),
+        );
+        applyEditToConversations(queryClient, user, event.edit);
+        return;
+      }
+
+      // The optimistic copy is wrong; the archive has what went through.
+      if (event.type === 'editRejected') {
+        displayToast("Couldn't save your edit. Try again.");
+        queryClient.invalidateQueries({
+          queryKey: dmThreadQueryKey(user, event.peerId),
+        });
+        return;
+      }
+
       if (event.type === 'reconnected') {
         // Anything that arrived while offline is only in the archive; thread
         // refetches keep unsent bubbles, see dmThreadQueryOptions.
@@ -94,6 +139,10 @@ export const useMessagesLiveUpdates = (enabled: boolean): void => {
       }
 
       const { message } = event;
+      // Their message is what they were typing.
+      if (message.senderId !== user.id) {
+        setTyping(message.peerId, false);
+      }
       queryClient.setQueryData<DmMessage[]>(
         dmThreadQueryKey(user, message.peerId),
         // An unloaded thread stays unloaded, or it would open without history.
@@ -119,5 +168,10 @@ export const useMessagesLiveUpdates = (enabled: boolean): void => {
         });
       }
     });
+
+    return () => {
+      unsubscribe();
+      typingTimers.forEach((timer) => clearTimeout(timer));
+    };
   }, [displayToast, enabled, queryClient, user]);
 };
diff --git a/packages/shared/src/features/messages/hooks/useTypingNotifier.ts b/packages/shared/src/features/messages/hooks/useTypingNotifier.ts
new file mode 100644
index 0000000000..fc23422007
--- /dev/null
+++ b/packages/shared/src/features/messages/hooks/useTypingNotifier.ts
@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { getDmTransport } from '../transport';
+import type { DmChatState, DmPeer } from '../types';
+
+// How long after the last keystroke the peer sees the typing stop.
+const pauseAfterMs = 4 * 1000;
+// Resent while typing continues, so the peer's own timeout never fires on a
+// long message. Keep it well under useMessagesLiveUpdates' typingTimeoutMs.
+const repeatComposingMs = 5 * 1000;
+
+type TypingNotifier = {
+  // Call on every change to the draft with whether it has text.
+  onDraftChange: (hasText: boolean) => void;
+  // The message itself tells the peer the typing is over.
+  onSent: () => void;
+};
+
+// Sends XEP-0085 chat states for the composer. Best effort: a lost state only
+// leaves the peer's indicator to time out.
+export const useTypingNotifier = (
+  peer: DmPeer | null | undefined,
+  enabled: boolean,
+): TypingNotifier => {
+  const { user } = useAuthContext();
+  const isComposingRef = useRef(false);
+  const composingSentAtRef = useRef(0);
+  const pauseTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const send = useCallback(
+    (state: DmChatState) => {
+      if (!user || !peer || !enabled) {
+        return;
+      }
+
+      getDmTransport(user.id)
+        .sendChatState(peer, state)
+        .catch(() => undefined);
+    },
+    [enabled, peer, user],
+  );
+
+  const stop = useCallback(
+    (notify: boolean) => {
+      clearTimeout(pauseTimerRef.current);
+      pauseTimerRef.current = undefined;
+      if (isComposingRef.current && notify) {
+        send('paused');
+      }
+      isComposingRef.current = false;
+    },
+    [send],
+  );
+
+  const onDraftChange = useCallback(
+    (hasText: boolean) => {
+      if (!hasText || !enabled) {
+        stop(true);
+        return;
+      }
+
+      const now = Date.now();
+      if (
+        !isComposingRef.current ||
+        now - composingSentAtRef.current >= repeatComposingMs
+      ) {
+        send('composing');
+        composingSentAtRef.current = now;
+      }
+      isComposingRef.current = true;
+      clearTimeout(pauseTimerRef.current);
+      pauseTimerRef.current = setTimeout(() => stop(true), pauseAfterMs);
+    },
+    [enabled, send, stop],
+  );
+
+  const onSent = useCallback(() => stop(false), [stop]);
+
+  // Leaving the thread mid-draft reads as stopping.
+  useEffect(() => () => stop(true), [stop]);
+
+  return { onDraftChange, onSent };
+};
diff --git a/packages/shared/src/features/messages/media.ts b/packages/shared/src/features/messages/media.ts
index 6c1e221066..d11efc3f5e 100644
--- a/packages/shared/src/features/messages/media.ts
+++ b/packages/shared/src/features/messages/media.ts
@@ -83,6 +83,23 @@ const cleanAlt = (alt: string): string => alt.replace(/[[\]\n]/g, ' ').trim();
 export const toImageMarkdown = (url: string, alt: string): string =>
   `![${cleanAlt(alt)}](${url})`;
 
+// Only the typed text of a message is edited; its images ride along, in the
+// shape the composer builds (text first, then one image per paragraph).
+export const getEditableText = (body: string): string =>
+  parseMessageBody(body)
+    .flatMap((part) => (part.type === 'text' ? [part.text] : []))
+    .join('\n\n');
+
+export const withEditedText = (body: string, text: string): string =>
+  [
+    text,
+    ...parseMessageBody(body).flatMap((part) =>
+      part.type === 'image' ? [toImageMarkdown(part.url, part.alt)] : [],
+    ),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+
 // The inbox summary, cut to what fits a push body. Images and GIFs stay as
 // their labels, so a photo-only message still reads as something.
 export const getMessagePushPreview = (body: string): string =>
diff --git a/packages/shared/src/features/messages/mockTransport.ts b/packages/shared/src/features/messages/mockTransport.ts
index 0dfef2a0c0..9ebd61c9d7 100644
--- a/packages/shared/src/features/messages/mockTransport.ts
+++ b/packages/shared/src/features/messages/mockTransport.ts
@@ -7,7 +7,7 @@ import type {
   DmTransport,
 } from './types';
 import { DmMessageStatus } from './types';
-import { applyReaction } from './stanzas';
+import { applyEdit, applyReaction } from './stanzas';
 import { DirectMessageAccess } from './graphql';
 
 // In-memory stand-in for ejabberd until the backend exists. It persists to
@@ -24,6 +24,7 @@ type Store = Record<string, StoredConversation>;
 
 const storageVersion = 1;
 const sendDelayMs = 400;
+const typingDelayMs = 600;
 const replyDelayMs = 1800;
 
 const cannedReplies = [
@@ -151,6 +152,11 @@ export const createMockTransport = (userId: string): DmTransport => {
   };
 
   const scheduleReply = (peer: DmPeer) => {
+    setTimeout(() => {
+      listeners.forEach((listener) =>
+        listener({ type: 'chatState', peerId: peer.id, state: 'composing' }),
+      );
+    }, typingDelayMs);
     setTimeout(() => {
       const message: DmMessage = {
         id: `mock-${Date.now()}-${peer.id}`,
@@ -218,6 +224,30 @@ export const createMockTransport = (userId: string): DmTransport => {
       };
       persist();
     },
+    edit: async (peer, messageId, body) => {
+      await wait(sendDelayMs);
+      const existing = store[peer.id];
+      if (!existing) {
+        return;
+      }
+
+      store = {
+        ...store,
+        [peer.id]: {
+          ...existing,
+          messages: applyEdit(existing.messages, {
+            peerId: peer.id,
+            senderId: userId,
+            messageId,
+            body,
+            editedAt: new Date().toISOString(),
+          }),
+        },
+      };
+      persist();
+    },
+    // The canned reply types on its own schedule.
+    sendChatState: async () => undefined,
     markRead: async (peerId) => {
       if (!store[peerId]?.unreadCount) {
         return;
diff --git a/packages/shared/src/features/messages/queries.ts b/packages/shared/src/features/messages/queries.ts
index 9d42a71b06..e25e4db13d 100644
--- a/packages/shared/src/features/messages/queries.ts
+++ b/packages/shared/src/features/messages/queries.ts
@@ -17,10 +17,12 @@ import type { DirectMessageConversation } from './graphql';
 import type {
   DmCommentContext,
   DmConversation,
+  DmEdit,
   DmMessage,
   DmPeer,
   DmPostPreview,
 } from './types';
+import { applyEdit } from './stanzas';
 import { DM_CONTEXT_SNIPPET_LENGTH, DmMessageStatus } from './types';
 
 type QueryUser = Pick<LoggedUser, 'id'> | undefined;
@@ -268,6 +270,65 @@ export const upsertConversationMessage = (
   return true;
 };
 
+// Changes one message wherever the cache shows it: the thread and, when it's
+// the latest, the inbox row.
+export const patchDmMessage = (
+  client: QueryClient,
+  user: QueryUser,
+  peerId: string,
+  messageId: string,
+  patch: (message: DmMessage) => DmMessage,
+): void => {
+  client.setQueryData<DmMessage[]>(dmThreadQueryKey(user, peerId), (messages) =>
+    messages?.map((message) =>
+      message.id === messageId ? patch(message) : message,
+    ),
+  );
+  client.setQueryData<DmConversation[]>(
+    dmConversationsQueryKey(user),
+    (conversations) =>
+      conversations?.map((conversation) =>
+        conversation.peer.id === peerId &&
+        conversation.lastMessage.id === messageId
+          ? { ...conversation, lastMessage: patch(conversation.lastMessage) }
+          : conversation,
+      ),
+  );
+};
+
+// An edit keeps the conversation where it is; only its preview changes.
+export const applyEditToConversations = (
+  client: QueryClient,
+  user: QueryUser,
+  edit: DmEdit,
+): void => {
+  client.setQueryData<DmConversation[]>(
+    dmConversationsQueryKey(user),
+    (conversations) =>
+      conversations?.map((conversation) =>
+        conversation.lastMessage.id === edit.messageId
+          ? {
+              ...conversation,
+              lastMessage: applyEdit([conversation.lastMessage], edit)[0],
+            }
+          : conversation,
+      ),
+  );
+};
+
+// Whether the peer is typing right now. Live updates set it and nothing
+// fetches it, so it starts false and only a reconnect resets it.
+export const dmTypingQueryOptions = (user: QueryUser, peerId: string) =>
+  queryOptions<boolean>({
+    queryKey: generateQueryKey(RequestKey.DirectMessages, user, 'typing', {
+      peerId,
+    }),
+    queryFn: () => false,
+    initialData: false,
+    staleTime: Infinity,
+    enabled: !!user?.id && !!peerId,
+  });
+
 // A peer we already talk to comes from the conversation; anyone else, such as
 // a profile's "Message" button, is looked up as a regular daily.dev user.
 export const dmPeerQueryOptions = (user: QueryUser, peerId: string) =>
diff --git a/packages/shared/src/features/messages/stanzas.spec.ts b/packages/shared/src/features/messages/stanzas.spec.ts
index b0af83cdcd..a59f5144df 100644
--- a/packages/shared/src/features/messages/stanzas.spec.ts
+++ b/packages/shared/src/features/messages/stanzas.spec.ts
@@ -1,11 +1,14 @@
 import type { DmMessage } from './types';
 import { DmMessageStatus } from './types';
 import {
+  applyEdit,
   applyReaction,
   decodeJidLocal,
   encodeJidLocal,
   jidForUser,
   parseChatMessage,
+  parseChatState,
+  parseCorrection,
   parseMamResult,
   parseReaction,
   sanitizeReactionEmojis,
@@ -291,3 +294,67 @@ describe('reactions', () => {
     ).toEqual({ '🔥': ['peer'] });
   });
 });
+
+describe('corrections', () => {
+  const correction = xml(`<message xmlns="jabber:client" type="chat" id="e1"
+    from="peer@chat.daily.dev/web" to="${own}/web">
+    <body>hey there, fixed</body>
+    <replace xmlns="urn:xmpp:message-correct:0" id="abc"/>
+    <delay xmlns="urn:xmpp:delay" stamp="2026-10-06T10:05:00Z"/>
+  </message>`);
+
+  it('is not read as a new message', () => {
+    expect(parseChatMessage(correction, { ownBareJid: own })).toBeNull();
+    expect(parseCorrection(correction, { ownBareJid: own })).toEqual({
+      peerId: 'peer',
+      senderId: 'peer',
+      messageId: 'abc',
+      body: 'hey there, fixed',
+      editedAt: '2026-10-06T10:05:00Z',
+    });
+  });
+
+  it('changes only the sender’s own message', () => {
+    const edit = parseCorrection(correction, { ownBareJid: own })!;
+    const base: DmMessage = {
+      id: 'abc',
+      peerId: 'peer',
+      senderId: 'me',
+      body: 'mine',
+      createdAt: '2026-10-06T10:00:00Z',
+      status: DmMessageStatus.Sent,
+    };
+
+    expect(applyEdit([base], edit)).toEqual([base]);
+    expect(applyEdit([{ ...base, senderId: 'peer' }], edit)[0]).toMatchObject({
+      body: 'hey there, fixed',
+      editedAt: '2026-10-06T10:05:00Z',
+      createdAt: '2026-10-06T10:00:00Z',
+    });
+  });
+});
+
+describe('parseChatState', () => {
+  it('reads a standalone state from the peer', () => {
+    expect(
+      parseChatState(
+        xml(`<message xmlns="jabber:client" type="chat" from="peer@chat.daily.dev/web" to="${own}">
+          <composing xmlns="http://jabber.org/protocol/chatstates"/>
+        </message>`),
+        own,
+      ),
+    ).toEqual({ peerId: 'peer', senderId: 'peer', state: 'composing' });
+  });
+
+  it('ignores a state riding on a message', () => {
+    expect(
+      parseChatState(
+        xml(`<message xmlns="jabber:client" type="chat" from="peer@chat.daily.dev">
+          <body>hi</body>
+          <active xmlns="http://jabber.org/protocol/chatstates"/>
+        </message>`),
+        own,
+      ),
+    ).toBeNull();
+  });
+});
diff --git a/packages/shared/src/features/messages/stanzas.ts b/packages/shared/src/features/messages/stanzas.ts
index d37305ffbb..a74e06937c 100644
--- a/packages/shared/src/features/messages/stanzas.ts
+++ b/packages/shared/src/features/messages/stanzas.ts
@@ -1,5 +1,7 @@
 import type {
+  DmChatState,
   DmCommentContext,
+  DmEdit,
   DmMessage,
   DmReaction,
   DmReactions,
@@ -15,6 +17,8 @@ export const NS_SID = 'urn:xmpp:sid:0';
 export const NS_CARBONS = 'urn:xmpp:carbons:2';
 export const NS_REACTIONS = 'urn:xmpp:reactions:0';
 export const NS_HINTS = 'urn:xmpp:hints';
+export const NS_CORRECT = 'urn:xmpp:message-correct:0';
+export const NS_CHAT_STATES = 'http://jabber.org/protocol/chatstates';
 // Agreed with the skirnir owner; bump the trailing version on breaking changes.
 export const NS_COMMENT_REF = 'urn:daily:chat:comment-ref:0';
 
@@ -109,7 +113,9 @@ export const parseChatMessage = (
   const body = textOf(message, 'body');
   const parties = body && getParties(message, ownBareJid);
 
-  if (!parties) {
+  // A correction (XEP-0308) changes an earlier message instead of adding one;
+  // parseCorrection reads it.
+  if (!parties || childOf(message, 'replace', NS_CORRECT)) {
     return null;
   }
 
@@ -189,6 +195,66 @@ export const parseReaction = (
   };
 };
 
+// XEP-0308. The replacement carries a full body, so it would otherwise read
+// as a new message.
+export const parseCorrection = (
+  message: Element,
+  { ownBareJid, stamp }: ParseOptions,
+): DmEdit | null => {
+  const messageId = childOf(message, 'replace', NS_CORRECT)?.getAttribute('id');
+  const body = textOf(message, 'body');
+  const parties = messageId && body && getParties(message, ownBareJid);
+
+  if (!parties) {
+    return null;
+  }
+
+  return {
+    ...parties,
+    messageId,
+    body,
+    editedAt:
+      stamp ??
+      childOf(message, 'delay', NS_DELAY)?.getAttribute('stamp') ??
+      new Date().toISOString(),
+  };
+};
+
+// Only the sender may correct a message, so a peer can't rewrite ours. A
+// correction of a message that isn't loaded is dropped with it.
+export const applyEdit = (
+  messages: DmMessage[],
+  { messageId, senderId, body, editedAt }: DmEdit,
+): DmMessage[] =>
+  messages.map((message) =>
+    message.id === messageId && message.senderId === senderId
+      ? { ...message, body, editedAt }
+      : message,
+  );
+
+const chatStates: DmChatState[] = [
+  'active',
+  'composing',
+  'paused',
+  'inactive',
+  'gone',
+];
+
+// XEP-0085, standalone only: a state riding on a message is implied by the
+// message itself.
+export const parseChatState = (
+  message: Element,
+  ownBareJid: string,
+): { peerId: string; senderId: string; state: DmChatState } | null => {
+  const state = chatStates.find((name) =>
+    childOf(message, name, NS_CHAT_STATES),
+  );
+  const parties =
+    state && !textOf(message, 'body') && getParties(message, ownBareJid);
+
+  return parties ? { ...parties, state } : null;
+};
+
 export const applyReaction = (
   messages: DmMessage[],
   { messageId, senderId, emojis }: DmReaction,
diff --git a/packages/shared/src/features/messages/transport.ts b/packages/shared/src/features/messages/transport.ts
index 64b7be3ff7..99ecfb2fa8 100644
--- a/packages/shared/src/features/messages/transport.ts
+++ b/packages/shared/src/features/messages/transport.ts
@@ -36,6 +36,10 @@ const lazyTransport = (load: () => Promise<DmTransport>): DmTransport => {
       (await get()).send(peer, body, context, options),
     react: async (peer, messageId, emojis) =>
       (await get()).react(peer, messageId, emojis),
+    edit: async (peer, messageId, body) =>
+      (await get()).edit(peer, messageId, body),
+    sendChatState: async (peer, state) =>
+      (await get()).sendChatState(peer, state),
     markRead: async (peerId) => (await get()).markRead(peerId),
     subscribe: (listener: (event: DmEvent) => void) => {
       let unsubscribe: (() => void) | undefined;
diff --git a/packages/shared/src/features/messages/types.ts b/packages/shared/src/features/messages/types.ts
index 48fa4b51b9..0516f2a563 100644
--- a/packages/shared/src/features/messages/types.ts
+++ b/packages/shared/src/features/messages/types.ts
@@ -61,8 +61,29 @@ export type DmMessage = {
   status: DmMessageStatus;
   context?: DmCommentContext;
   reactions?: DmReactions;
+  // When the sender last corrected it (XEP-0308).
+  editedAt?: string;
 };
 
+// A correction replaces the body of an earlier message by the same sender;
+// everything else about it (time, context, reactions) stays.
+export type DmEdit = {
+  peerId: string;
+  senderId: string;
+  messageId: string;
+  body: string;
+  editedAt: string;
+};
+
+// XEP-0085. Only `composing` and `paused` go over the wire here; the rest is
+// what a peer's client may still send.
+export type DmChatState =
+  | 'active'
+  | 'composing'
+  | 'paused'
+  | 'inactive'
+  | 'gone';
+
 // XEP-0444: each reaction stanza carries the sender's full set for a message,
 // so an empty set clears it.
 export type DmReaction = {
@@ -80,7 +101,11 @@ export type DmConversation = {
 
 export type DmEvent =
   | { type: 'message'; message: DmMessage }
+  | { type: 'edit'; edit: DmEdit }
   | { type: 'reaction'; reaction: DmReaction }
+  | { type: 'chatState'; peerId: string; state: DmChatState }
+  // The server bounced an edit, or never acked it; the archive has the truth.
+  | { type: 'editRejected'; peerId: string; messageId: string }
   // The server bounced one of our reactions, so the optimistic copy is wrong.
   | { type: 'reactionRejected'; peerId: string }
   // The server acknowledged a message we sent (XEP-0198), so it can't be lost.
@@ -109,6 +134,11 @@ export interface DmTransport {
   ) => Promise<DmMessage>;
   // Replaces the viewer's reactions on a message with `emojis`.
   react: (peer: DmPeer, messageId: string, emojis: string[]) => Promise<void>;
+  // Replaces the body of a message the viewer sent.
+  edit: (peer: DmPeer, messageId: string, body: string) => Promise<void>;
+  // Tells the peer whether the viewer is typing. Best effort: nothing waits
+  // on it and nothing retries it.
+  sendChatState: (peer: DmPeer, state: DmChatState) => Promise<void>;
   markRead: (peerId: string) => Promise<void>;
   subscribe: (listener: (event: DmEvent) => void) => () => void;
   // Ends the session for good, e.g. on logout.
diff --git a/packages/shared/src/features/messages/xmppTransport.spec.ts b/packages/shared/src/features/messages/xmppTransport.spec.ts
index 7c347903a2..de977a5f3d 100644
--- a/packages/shared/src/features/messages/xmppTransport.spec.ts
+++ b/packages/shared/src/features/messages/xmppTransport.spec.ts
@@ -432,6 +432,111 @@ describe('createXmppTransport', () => {
     });
   });
 
+  it('folds corrections into the messages they replace', async () => {
+    const transport = createXmppTransport({ userId: 'me', url: 'wss://x' });
+    transport.subscribe(() => undefined);
+    const connection = await connected();
+    const archived = (queryId: string, id: string, inner: string) =>
+      `<message xmlns="jabber:client">
+        <result xmlns="urn:xmpp:mam:2" queryid="${queryId}" id="${id}">
+          <forwarded xmlns="urn:xmpp:forward:0">
+            <delay xmlns="urn:xmpp:delay" stamp="2026-10-07T10:00:0${id}Z"/>
+            <message xmlns="jabber:client" type="chat"
+              from="peer@chat.daily.dev" to="me@chat.daily.dev">${inner}</message>
+          </forwarded>
+        </result>
+      </message>`;
+    connection.archivePages.push((queryId) => [
+      archived(
+        queryId,
+        '1',
+        '<body>helo</body><origin-id xmlns="urn:xmpp:sid:0" id="m1"/>',
+      ),
+      archived(
+        queryId,
+        '2',
+        '<body>hello</body><replace xmlns="urn:xmpp:message-correct:0" id="m1"/>',
+      ),
+      archived(
+        queryId,
+        '3',
+        '<body>lost</body><replace xmlns="urn:xmpp:message-correct:0" id="older"/>',
+      ),
+    ]);
+
+    const messages = await transport.getMessages('peer');
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({
+      id: 'm1',
+      body: 'hello',
+      createdAt: '2026-10-07T10:00:01Z',
+      editedAt: '2026-10-07T10:00:02Z',
+    });
+  });
+
+  it('sends an edit without counting it as a new message for the peer', async () => {
+    const events: DmEvent[] = [];
+    const transport = createXmppTransport({ userId: 'me', url: 'wss://x' });
+    transport.subscribe((event) => events.push(event));
+    const connection = await connected();
+
+    await transport.edit(peer, 'm1', 'fixed');
+    connection.ackAll();
+
+    expect(connection.sent).toHaveLength(1);
+    expect(events).toEqual([]);
+    expect(markDirectMessageSent).not.toHaveBeenCalled();
+  });
+
+  it('reports an edit the server bounced', async () => {
+    const events: DmEvent[] = [];
+    const transport = createXmppTransport({ userId: 'me', url: 'wss://x' });
+    transport.subscribe((event) => events.push(event));
+    const connection = await connected();
+
+    await transport.edit(peer, 'm1', 'fixed');
+    connection.bounce(connection.sent[0]);
+
+    expect(events).toEqual([
+      { type: 'editRejected', peerId: 'peer', messageId: 'm1' },
+    ]);
+  });
+
+  it('relays the peer’s typing but not our other sessions’', async () => {
+    const events: DmEvent[] = [];
+    const transport = createXmppTransport({ userId: 'me', url: 'wss://x' });
+    transport.subscribe((event) => events.push(event));
+    const connection = await connected();
+    const deliver = (source: string) =>
+      connection.handlers
+        .filter(({ name, type }) => name === 'message' && !type)
+        .forEach(({ callback }) =>
+          callback(
+            new DOMParser().parseFromString(source, 'text/xml').documentElement,
+          ),
+        );
+
+    deliver(`<message xmlns="jabber:client" type="chat"
+      from="peer@chat.daily.dev/web" to="me@chat.daily.dev/web">
+      <composing xmlns="http://jabber.org/protocol/chatstates"/>
+    </message>`);
+    deliver(`<message xmlns="jabber:client" from="me@chat.daily.dev" to="me@chat.daily.dev/web">
+      <sent xmlns="urn:xmpp:carbons:2">
+        <forwarded xmlns="urn:xmpp:forward:0">
+          <message xmlns="jabber:client" type="chat"
+            from="me@chat.daily.dev/other" to="peer@chat.daily.dev">
+            <composing xmlns="http://jabber.org/protocol/chatstates"/>
+          </message>
+        </forwarded>
+      </sent>
+    </message>`);
+
+    expect(events).toEqual([
+      { type: 'chatState', peerId: 'peer', state: 'composing' },
+    ]);
+  });
+
   it('reports a bounced reaction', async () => {
     const events: DmEvent[] = [];
     const transport = createXmppTransport({ userId: 'me', url: 'wss://x' });
diff --git a/packages/shared/src/features/messages/xmppTransport.ts b/packages/shared/src/features/messages/xmppTransport.ts
index b1f21471cc..26df5f8708 100644
--- a/packages/shared/src/features/messages/xmppTransport.ts
+++ b/packages/shared/src/features/messages/xmppTransport.ts
@@ -13,18 +13,23 @@ import { getMessagePushPreview } from './media';
 import { createStreamManagementStorage } from './streamManagementStorage';
 import {
   NS_CARBONS,
+  NS_CHAT_STATES,
   NS_COMMENT_REF,
+  NS_CORRECT,
   NS_DATA,
   NS_HINTS,
   NS_MAM,
   NS_REACTIONS,
   NS_RSM,
   NS_SID,
+  applyEdit,
   applyReaction,
   bareJid,
   isMamResult,
   jidForUser,
   parseChatMessage,
+  parseChatState,
+  parseCorrection,
   parseMamResult,
   parseReaction,
   unwrapCarbon,
@@ -45,9 +50,12 @@ type Session = {
 
 type PendingAck = {
   peerId: string;
-  preview: string;
   failTimer: ReturnType<typeof setTimeout>;
-};
+} & (
+  | { kind: 'message'; preview: string }
+  // An edit of `messageId`; the stanza id is the key.
+  | { kind: 'edit'; messageId: string }
+);
 
 const NS_SM = 'urn:xmpp:sm:3';
 const historyPageSize = 50;
@@ -99,13 +107,30 @@ export const createXmppTransport = ({
       const carbon = unwrapCarbon(stanza, ownBareJid);
       const payload = carbon === undefined ? stanza : carbon;
       const message = payload && parseChatMessage(payload, { ownBareJid });
+      const edit =
+        payload && !message && parseCorrection(payload, { ownBareJid });
       const reaction =
-        payload && !message && parseReaction(payload, ownBareJid);
+        payload && !message && !edit && parseReaction(payload, ownBareJid);
+      const chatState =
+        payload &&
+        !message &&
+        !edit &&
+        !reaction &&
+        parseChatState(payload, ownBareJid);
 
       if (message) {
         emit({ type: 'message', message });
+      } else if (edit) {
+        emit({ type: 'edit', edit });
       } else if (reaction) {
         emit({ type: 'reaction', reaction });
+      } else if (chatState && chatState.senderId !== userId) {
+        // Our other sessions' typing arrives as carbons; it isn't the peer's.
+        emit({
+          type: 'chatState',
+          peerId: chatState.peerId,
+          state: chatState.state,
+        });
       }
 
       // Returning true keeps the handler registered.
@@ -121,17 +146,26 @@ export const createXmppTransport = ({
       ),
     );
 
-    pendingAcks.forEach(({ peerId, preview, failTimer }, messageId) => {
-      if (!unacked.has(messageId)) {
-        clearTimeout(failTimer);
-        pendingAcks.delete(messageId);
-        emit({ type: 'sent', peerId, messageId });
-        // Feeds the peer's unread count and push. Losing one only leaves a
-        // badge a message short, so it isn't retried.
-        markDirectMessageSent(peerId, preview || undefined).catch(
-          () => undefined,
-        );
+    pendingAcks.forEach((pending, stanzaId) => {
+      if (unacked.has(stanzaId)) {
+        return;
+      }
+
+      clearTimeout(pending.failTimer);
+      pendingAcks.delete(stanzaId);
+
+      // An edit changes nothing the peer hasn't been told about, so it
+      // neither counts as unread nor pushes.
+      if (pending.kind === 'edit') {
+        return;
       }
+
+      emit({ type: 'sent', peerId: pending.peerId, messageId: stanzaId });
+      // Feeds the peer's unread count and push. Losing one only leaves a
+      // badge a message short, so it isn't retried.
+      markDirectMessageSent(pending.peerId, pending.preview || undefined).catch(
+        () => undefined,
+      );
     });
 
     return true;
@@ -142,6 +176,7 @@ export const createXmppTransport = ({
   const watchAck = (messageId: string, peerId: string, preview: string) => {
     clearTimeout(pendingAcks.get(messageId)?.failTimer);
     pendingAcks.set(messageId, {
+      kind: 'message',
       peerId,
       preview,
       failTimer: setTimeout(
@@ -151,6 +186,20 @@ export const createXmppTransport = ({
     });
   };
 
+  // An edit that isn't acked in time is reported as rejected: the optimistic
+  // copy goes, and if the queued stanza still lands after a resume the
+  // archive shows it on the next load.
+  const watchEditAck = (stanzaId: string, peerId: string, messageId: string) =>
+    pendingAcks.set(stanzaId, {
+      kind: 'edit',
+      peerId,
+      messageId,
+      failTimer: setTimeout(() => {
+        pendingAcks.delete(stanzaId);
+        emit({ type: 'editRejected', peerId, messageId });
+      }, ackTimeoutMs),
+    });
+
   const scheduleReconnect = () => {
     // After the cap the next user action (opening messages, sending) tries
     // again instead of retrying in the background forever.
@@ -314,13 +363,22 @@ export const createXmppTransport = ({
             stanzaId: result.stanzaId,
             stamp: result.stamp,
           });
-        // Results arrive oldest first, so a reaction always finds its
-        // message unless that one is older than this page.
+        // Results arrive oldest first, so a correction or reaction always
+        // finds its message unless that one is older than this page.
+        const edit =
+          result &&
+          !message &&
+          parseCorrection(result.message, { ownBareJid, stamp: result.stamp });
         const reaction =
-          result && !message && parseReaction(result.message, ownBareJid);
+          result &&
+          !message &&
+          !edit &&
+          parseReaction(result.message, ownBareJid);
 
         if (message) {
           messages.push(message);
+        } else if (edit) {
+          messages = applyEdit(messages, edit);
         } else if (reaction) {
           messages = applyReaction(messages, reaction);
         }
@@ -560,6 +618,56 @@ export const createXmppTransport = ({
 
       connection.send(stanza);
     },
+    edit: async (peer, messageId, body) => {
+      const { strophe, connection, domain } = await ensureSession();
+      const { $msg } = strophe;
+      const id = connection.getUniqueId('edit');
+      const stanza = $msg({
+        to: jidForUser(peer.id, domain),
+        type: 'chat',
+        id,
+      })
+        .c('body')
+        .t(body)
+        .up()
+        .c('replace', { xmlns: NS_CORRECT, id: messageId })
+        .up()
+        .c('origin-id', { xmlns: NS_SID, id });
+
+      const errorHandler = connection.addHandler(
+        () => {
+          const pending = pendingAcks.get(id);
+          if (pending) {
+            clearTimeout(pending.failTimer);
+            pendingAcks.delete(id);
+          }
+          emit({ type: 'editRejected', peerId: peer.id, messageId });
+          return false;
+        },
+        null,
+        'message',
+        'error',
+        id,
+      );
+      setTimeout(() => connection.deleteHandler(errorHandler), errorWatchMs);
+
+      if (connection.sm?.isTracking()) {
+        watchEditAck(id, peer.id, messageId);
+      }
+
+      connection.send(stanza);
+    },
+    sendChatState: async (peer, state) => {
+      const { strophe, connection, domain } = await ensureSession();
+      const { $msg } = strophe;
+      // Standalone chat states are neither archived nor held for offline
+      // peers; ejabberd treats them as transient on its own.
+      connection.send(
+        $msg({ to: jidForUser(peer.id, domain), type: 'chat' }).c(state, {
+          xmlns: NS_CHAT_STATES,
+        }),
+      );
+    },
     markRead: (peerId) => markDirectMessagesRead(peerId),
     subscribe: (listener) => {
       listeners.add(listener);
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index c7e9f726e6..c8f0c0b86e 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -539,6 +539,7 @@ export enum LogEvent {
   SendDirectMessage = 'send direct message',
   ReactDirectMessage = 'react direct message',
   RemoveDirectMessageReaction = 'remove direct message reaction',
+  EditDirectMessage = 'edit direct message',
   ToggleDirectMessages = 'toggle direct messages',
   SendDirectMessageRequest = 'send direct message request',
   AcceptDirectMessageRequest = 'accept direct message request',