From 3127bf17f3fa7eade7d7c97ff7e314c364acde9e Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 9 Nov 2026 10:01:01 -0800
Subject: [PATCH] feat(react): support compact message action icons

---
 .../api/react/chat/MessageAction-ui79k6.json  |  85 ++++-
 .../api/react/chat/MessageActions-szwf67.json |   4 +-
 .../chat/MessageActionsProps-e1ki9v.json      |  12 +-
 .../react/chat/components/chat-message.mdx    |  33 +-
 .../native/e2e/inline-source-previews.spec.ts |  12 +
 .../chat/native/e2e/message-actions.spec.ts   |  39 +++
 .../native/e2e/message-presentation.spec.ts   |  39 +++
 .../native/react/src/copy-answer.spec.tsx     |  31 ++
 .../chat/native/react/src/copy-answer.tsx     |  22 +-
 .../runtime/message-action-types.tsx          |  55 +++
 .../react-message-action-icons-styled.tsx     |   2 +
 .../runtime/react-message-action-icons.tsx    |  50 +++
 libs/react/README.md                          |  61 +++-
 libs/react/src/chat/message-actions.spec.tsx  | 328 ++++++++++++++++++
 libs/react/src/chat/message-actions.tsx       |  47 ++-
 .../src/chat/message-actions.type-test.tsx    |  94 ++++-
 libs/react/src/chat/styles.css                |  28 ++
 .../src/markdown/inline-preview.spec.tsx      | 127 +++++++
 libs/react/src/markdown/inline-preview.tsx    |  33 +-
 scripts/react-parity/baseline.json            |  22 +-
 scripts/react-parity/dispositions.json        |  20 +-
 scripts/react-parity/runtime-consumer.mjs     | 187 +++++++++-
 .../react-parity/runtime-consumer.spec.mjs    |  20 +-
 .../verify-langgraph-candidate.mjs            |  10 +-
 24 files changed, 1280 insertions(+), 81 deletions(-)
 create mode 100644 fixtures/react-parity/runtime/message-action-types.tsx
 create mode 100644 fixtures/react-parity/runtime/react-message-action-icons-styled.tsx
 create mode 100644 fixtures/react-parity/runtime/react-message-action-icons.tsx

diff --git a/apps/website/content/api/react/chat/MessageAction-ui79k6.json b/apps/website/content/api/react/chat/MessageAction-ui79k6.json
index 322bcfd8b..eaa41d831 100644
--- a/apps/website/content/api/react/chat/MessageAction-ui79k6.json
+++ b/apps/website/content/api/react/chat/MessageAction-ui79k6.json
@@ -60,7 +60,80 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 8
+            "line": 10
+          },
+          "isReadonly": true,
+          "isOptional": true
+        },
+        {
+          "name": "icon",
+          "kind": "PropertySignature",
+          "canonicalReference": "@threadplane/react!MessageAction#icon:member",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "readonly icon?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ReactNode",
+              "canonicalReference": "@types/react!React.ReactNode:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "docs": {
+            "summary": "App-authored noninteractive decorative content; nullish and boolean values omit the icon.",
+            "remarks": "",
+            "deprecated": "",
+            "returns": "",
+            "examples": [],
+            "see": [],
+            "params": [],
+            "typeParams": []
+          },
+          "members": [],
+          "source": {
+            "path": "libs/react/src/chat/message-actions.tsx",
+            "line": 12
+          },
+          "isReadonly": true,
+          "isOptional": true
+        },
+        {
+          "name": "iconOnly",
+          "kind": "PropertySignature",
+          "canonicalReference": "@threadplane/react!MessageAction#iconOnly:member",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "readonly iconOnly?: "
+            },
+            {
+              "kind": "Content",
+              "text": "boolean"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "docs": {
+            "summary": "Visually hides the label with opt-in styles when true and an icon is supplied.",
+            "remarks": "",
+            "deprecated": "",
+            "returns": "",
+            "examples": [],
+            "see": [],
+            "params": [],
+            "typeParams": []
+          },
+          "members": [],
+          "source": {
+            "path": "libs/react/src/chat/message-actions.tsx",
+            "line": 14
           },
           "isReadonly": true,
           "isOptional": true
@@ -96,7 +169,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 5
+            "line": 7
           },
           "isReadonly": true,
           "isOptional": false
@@ -132,7 +205,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 6
+            "line": 8
           },
           "isReadonly": true,
           "isOptional": false
@@ -168,7 +241,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 7
+            "line": 9
           },
           "isReadonly": true,
           "isOptional": false
@@ -176,12 +249,12 @@
       ],
       "source": {
         "path": "libs/react/src/chat/message-actions.tsx",
-        "line": 4
+        "line": 6
       }
     }
   ],
   "source": {
     "path": "libs/react/src/chat/message-actions.tsx",
-    "line": 4
+    "line": 6
   }
 }
diff --git a/apps/website/content/api/react/chat/MessageActions-szwf67.json b/apps/website/content/api/react/chat/MessageActions-szwf67.json
index 0b1a6ac79..4ab64ad4c 100644
--- a/apps/website/content/api/react/chat/MessageActions-szwf67.json
+++ b/apps/website/content/api/react/chat/MessageActions-szwf67.json
@@ -58,7 +58,7 @@
       "members": [],
       "source": {
         "path": "libs/react/src/chat/message-actions.tsx",
-        "line": 20
+        "line": 26
       },
       "overloadIndex": 1,
       "parameters": [
@@ -87,6 +87,6 @@
   ],
   "source": {
     "path": "libs/react/src/chat/message-actions.tsx",
-    "line": 20
+    "line": 26
   }
 }
diff --git a/apps/website/content/api/react/chat/MessageActionsProps-e1ki9v.json b/apps/website/content/api/react/chat/MessageActionsProps-e1ki9v.json
index 52a0b2cd9..bc0b3c7cf 100644
--- a/apps/website/content/api/react/chat/MessageActionsProps-e1ki9v.json
+++ b/apps/website/content/api/react/chat/MessageActionsProps-e1ki9v.json
@@ -70,7 +70,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 13
+            "line": 19
           },
           "isReadonly": true,
           "isOptional": false
@@ -106,7 +106,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 16
+            "line": 22
           },
           "isReadonly": true,
           "isOptional": true
@@ -142,7 +142,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 14
+            "line": 20
           },
           "isReadonly": true,
           "isOptional": true
@@ -178,7 +178,7 @@
           "members": [],
           "source": {
             "path": "libs/react/src/chat/message-actions.tsx",
-            "line": 15
+            "line": 21
           },
           "isReadonly": true,
           "isOptional": true
@@ -186,12 +186,12 @@
       ],
       "source": {
         "path": "libs/react/src/chat/message-actions.tsx",
-        "line": 12
+        "line": 18
       }
     }
   ],
   "source": {
     "path": "libs/react/src/chat/message-actions.tsx",
-    "line": 12
+    "line": 18
   }
 }
diff --git a/apps/website/content/docs/react/chat/components/chat-message.mdx b/apps/website/content/docs/react/chat/components/chat-message.mdx
index c7e702a2b..9f2c63710 100644
--- a/apps/website/content/docs/react/chat/components/chat-message.mdx
+++ b/apps/website/content/docs/react/chat/components/chat-message.mdx
@@ -11,6 +11,7 @@ This experimental, private React source-build component presents one message. It
 import type { MessageRow } from '@threadplane/content/messages';
 import {
   ChatMessage,
+  MessageActions,
   MessageList,
   Reasoning,
   Citations,
@@ -19,7 +20,10 @@ import {
 import { Markdown } from '@threadplane/react/markdown';
 import '@threadplane/react/chat/styles.css';
 
-export function StandaloneMessage({ onCopy }: { readonly onCopy: () => void }) {
+export function StandaloneMessage({ onCopy, copyPending = false }: {
+  readonly onCopy: () => void;
+  readonly copyPending?: boolean;
+}) {
   return (
     <ChatMessage
       role="assistant"
@@ -28,9 +32,22 @@ export function StandaloneMessage({ onCopy }: { readonly onCopy: () => void }) {
       beforeContent={<p>Message context</p>}
       afterContent={<aside aria-label="Sources">Source details</aside>}
       controls={
-        <button type="button" onClick={onCopy}>
-          Copy
-        </button>
+        <MessageActions
+          disabled={copyPending}
+          actions={[{
+            id: 'copy',
+            label: 'Copy answer',
+            onSelect: onCopy,
+            iconOnly: true,
+            icon: (
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none"
+                stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false">
+                <rect x="9" y="9" width="11" height="11" rx="2" />
+                <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+              </svg>
+            ),
+          }]}
+        />
       }
     >
       <p>שלום עולם — content chooses its own direction.</p>
@@ -97,3 +114,11 @@ Children render once in `.tp-chat-message__body` with `dir="auto"`, independentl
 This wrapper does not suppress streaming controls: current streaming assistant controls stay usable, and historical streaming controls follow the same reveal conditions. Non-assistant controls, standalone `MessageActions` and nested rich-content controls retain their existing behavior. The consumer owns each handler, status, disabled state and clipboard operation. Rendering, updating and unmounting do not activate controls, move focus or announce a live status.
 
 The component exposes no session, message snapshot, render callback or raw element props. MessageList keeps its existing custom renderer bypass and scroll policy. Its readonly `MessageListRowContext.current` identifies the final supplied row, even when that row is user, system or tool; optional readonly `prevRole` comes from `rows[index - 1]?.role`, rather than the message payload or DOM. The ten positional combinations reuse frozen context objects. Replacing a preceding immutable row with a different projected role updates the following row even if its own reference is unchanged; unrelated historical rows remain memoized. Appending also rerenders the former final row because `current` changes. Stable one-argument renderers remain compatible, and Chat forwards the same two-argument contract. Full ChatMessage/T23 parity remains deferred.
+
+`MessageActions` can supply the controls, as in the local copy SVG above. `MessageAction` has exactly six readonly fields: required unique `id`, literal string `label` and argumentless `onSelect`, plus optional `disabled`, `icon` and `iconOnly`. `MessageActionsProps` keeps four readonly fields: required `actions` and optional `disabled`, `label` and `className`. The default group label is **Message actions**; empty actions render nothing. Both group and per-action disabled states default to false; either disables the native button.
+
+`icon` accepts app-authored decorative, noninteractive ReactNode content inside an `aria-hidden` wrapper. `iconOnly` defaults to false; only `true` with a supplied icon enables compact presentation. Exactly `null`, `undefined` and booleans omit the icon and keep a visible label even with `iconOnly: true`. Zero, strings (including empty strings), arrays (including empty arrays), fragments and components that render nothing follow normal ReactNode semantics. There is no child inspection; compact callers must supply a meaningful visible, noninteractive glyph.
+
+The literal string label always provides the button's accessible name. The opt-in chat stylesheet visually hides only the effective compact label, sets a minimum 36px square target and sizes direct SVG glyphs to 16px. Compact markup supplies the same literal label as a native `title` tooltip independently of CSS. Without the stylesheet, both icon and label remain visible in normal DOM presentation. Omit `iconOnly` for an icon beside a visible label; omit `icon` for a text button.
+
+Same-ID compatible updates and reordering preserve the native button and its focus where native disabled behavior permits. Pointer, Enter and Space activation call the current argumentless callback. Rendering, updating and unmounting do not activate actions. The application owns clipboard admission and writes, pending state, feedback, async completion and errors; it must handle promise rejections itself. No automatic ratings or regeneration commands are provided. This bounded private presentation feature does not complete T28 or establish public release parity.
diff --git a/examples/chat/native/e2e/inline-source-previews.spec.ts b/examples/chat/native/e2e/inline-source-previews.spec.ts
index 02d8092f9..58fe4bef7 100644
--- a/examples/chat/native/e2e/inline-source-previews.spec.ts
+++ b/examples/chat/native/e2e/inline-source-previews.spec.ts
@@ -133,6 +133,11 @@ test('installed inline previews bridge keyboard focus, transfer hover and retire
     await page.keyboard.press('Escape');
     await expect(trigger).toBeFocused();
     await expect(dialog).toHaveCount(0);
+    // Observe beyond the 120ms hover timer with the pointer stationary: layout
+    // boundary events after Escape must not reopen the dismissed portal.
+    await page.waitForTimeout(150);
+    await expect(dialog).toHaveCount(0);
+    await expect(trigger).toBeFocused();
     await page.keyboard.press('Control+Enter');
     await expect(dialog).toHaveCount(0);
     await page.keyboard.press('Enter');
@@ -353,6 +358,13 @@ test('installed inline previews bridge keyboard focus, transfer hover and retire
         await sheets.dispose();
       }
       await page.keyboard.press('Escape');
+      await expect(trigger).toBeFocused();
+      await expect(dialog).toHaveCount(0);
+      // Restoring styles can expose the stationary pointer over the trigger.
+      // Observe beyond its original 120ms hover delay before the next width.
+      await page.waitForTimeout(150);
+      await expect(dialog).toHaveCount(0);
+      await expect(trigger).toBeFocused();
       await preserved();
     }
     // The literal long-type fixture needs room above both anchor positions.
diff --git a/examples/chat/native/e2e/message-actions.spec.ts b/examples/chat/native/e2e/message-actions.spec.ts
index e117a2b37..8cbeabbc8 100644
--- a/examples/chat/native/e2e/message-actions.spec.ts
+++ b/examples/chat/native/e2e/message-actions.spec.ts
@@ -121,6 +121,37 @@ test('installed React message actions copy only explicit answer text without con
     });
     const copy = list.getByRole('button', { name: 'Copy answer', exact: true });
     await expect(copy).toHaveCount(1);
+    const compactCopy = async () => {
+      await expect(copy).toHaveAccessibleName('Copy answer');
+      await expect(copy).toHaveAttribute('title', 'Copy answer');
+      await expect(copy).toHaveClass(/tp-message-actions__action--icon-only/);
+      await expect(copy.locator('.tp-message-actions__label')).toHaveText(
+        'Copy answer'
+      );
+      const icon = copy.locator('.tp-message-actions__icon');
+      await expect(icon).toHaveAttribute('aria-hidden', 'true');
+      const svg = icon.locator('svg');
+      await expect(svg).toHaveAttribute('aria-hidden', 'true');
+      await expect(svg).toHaveAttribute('focusable', 'false');
+      await expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+      await expect(svg).toHaveAttribute('stroke', 'currentColor');
+      await expect(svg.locator('rect')).toHaveAttribute('width', '11');
+      await expect(svg.locator('path')).toHaveAttribute(
+        'd',
+        'M5 15V5a2 2 0 0 1 2-2h10'
+      );
+      const bounds = await copy.boundingBox();
+      expect(bounds!.width).toBeGreaterThanOrEqual(36);
+      expect(bounds!.height).toBeGreaterThanOrEqual(36);
+      const glyph = await svg.boundingBox();
+      expect(glyph!.width).toBe(16);
+      expect(glyph!.height).toBe(16);
+      await expect(copy.locator('.tp-message-actions__label')).toHaveCSS(
+        'clip-path',
+        'inset(50%)'
+      );
+    };
+    await compactCopy();
     await expect(
       list.getByRole('group', { name: 'Message actions' })
     ).toHaveClass(/tp-message-actions/);
@@ -176,11 +207,19 @@ test('installed React message actions copy only explicit answer text without con
     await expect(controls).toHaveCSS('opacity', '0');
     await copy.focus();
     await expect(copy).toBeFocused();
+    // Real keyboard traversal selects the browser's focus-visible modality.
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(copy).toBeFocused();
+    await expect(copy).toHaveCSS('outline-style', 'solid');
+    await expect(copy).toHaveCSS('outline-width', '2px');
+    await expect(copy).toHaveCSS('outline-offset', '3px');
     await expect(controls).toHaveCSS('opacity', '1');
     await expect(controls).toHaveCSS('pointer-events', 'auto');
     expect(await messageBounds(copy)).toEqual(copyBounds);
     expect(await writes()).toEqual([]);
     const stableControls = async () => {
+      await compactCopy();
       expect(
         await controls.evaluate(
           (el, original) => el === original,
diff --git a/examples/chat/native/e2e/message-presentation.spec.ts b/examples/chat/native/e2e/message-presentation.spec.ts
index 4b777cbd2..524cf33e6 100644
--- a/examples/chat/native/e2e/message-presentation.spec.ts
+++ b/examples/chat/native/e2e/message-presentation.spec.ts
@@ -380,7 +380,45 @@ test('installed React ChatMessage preserves roles, direction, controls and readi
     const copy = answer
       .locator('.tp-chat-message__controls')
       .getByRole('button', { name: 'Copy answer', exact: true });
+    const compactCopy = async (button: Locator) => {
+      await expect(button).toHaveAccessibleName('Copy answer');
+      await expect(button).toHaveAttribute('title', 'Copy answer');
+      await expect(button).toHaveClass(/tp-message-actions__action--icon-only/);
+      await expect(button.locator('.tp-message-actions__label')).toHaveText(
+        'Copy answer'
+      );
+      await expect(button.locator('.tp-message-actions__label')).toHaveCSS(
+        'clip-path',
+        'inset(50%)'
+      );
+      const icon = button.locator('.tp-message-actions__icon');
+      await expect(icon).toHaveAttribute('aria-hidden', 'true');
+      const svg = icon.locator('svg');
+      await expect(svg).toHaveAttribute('aria-hidden', 'true');
+      await expect(svg).toHaveAttribute('focusable', 'false');
+      await expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+      await expect(svg).toHaveAttribute('stroke', 'currentColor');
+      await expect(svg.locator('path')).toHaveAttribute(
+        'd',
+        'M5 15V5a2 2 0 0 1 2-2h10'
+      );
+      const bounds = await button.boundingBox();
+      expect(bounds!.width).toBeGreaterThanOrEqual(36);
+      expect(bounds!.height).toBeGreaterThanOrEqual(36);
+      const glyph = await svg.boundingBox();
+      expect(glyph!.width).toBe(16);
+      expect(glyph!.height).toBe(16);
+    };
+    await compactCopy(copy);
     await copy.focus();
+    await expect(copy).toBeFocused();
+    // Real keyboard traversal selects the browser's focus-visible modality.
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(copy).toBeFocused();
+    await expect(copy).toHaveCSS('outline-style', 'solid');
+    await expect(copy).toHaveCSS('outline-width', '2px');
+    await expect(copy).toHaveCSS('outline-offset', '3px');
     await copy.press('Enter');
     await expect(answer.getByRole('status')).toHaveText('Answer copied.');
     expect(await writes()).toEqual([roleMessages[2].content]);
@@ -467,6 +505,7 @@ test('installed React ChatMessage preserves roles, direction, controls and readi
     await expect(currentCopy).toBeEnabled();
     const mountedCopy = await currentCopy.elementHandle();
     const stableCurrentCopy = async () => {
+      await compactCopy(currentCopy);
       expect(
         await currentCopy.evaluate(
           (el, original) => el === original,
diff --git a/examples/chat/native/react/src/copy-answer.spec.tsx b/examples/chat/native/react/src/copy-answer.spec.tsx
index 9f59b303f..48f1ffd8e 100644
--- a/examples/chat/native/react/src/copy-answer.spec.tsx
+++ b/examples/chat/native/react/src/copy-answer.spec.tsx
@@ -28,6 +28,37 @@ function pending() {
   return { write, resolve, reject };
 }
 describe('native CopyAnswer', () => {
+  it('renders a compact decorative copy glyph with the literal label and tooltip without writing', () => {
+    const attempt = pending();
+    const view = render(<CopyAnswer text="Answer" generation="a" />);
+    const button = view.getByRole('button', {
+      name: 'Copy answer',
+      exact: true,
+    });
+    expect(button.getAttribute('title')).toBe('Copy answer');
+    expect(
+      button.classList.contains('tp-message-actions__action--icon-only')
+    ).toBe(true);
+    expect(
+      button.querySelector('.tp-message-actions__label')?.textContent
+    ).toBe('Copy answer');
+    const icon = button.querySelector('.tp-message-actions__icon');
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+    const svg = icon?.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+    expect(svg?.getAttribute('focusable')).toBe('false');
+    expect(svg?.getAttribute('viewBox')).toBe('0 0 24 24');
+    expect(svg?.getAttribute('width')).toBe('16');
+    expect(svg?.getAttribute('height')).toBe('16');
+    expect(svg?.getAttribute('stroke')).toBe('currentColor');
+    expect(svg?.querySelector('rect')?.outerHTML).toBe(
+      '<rect x="9" y="9" width="11" height="11" rx="2"></rect>'
+    );
+    expect(svg?.querySelector('path')?.getAttribute('d')).toBe(
+      'M5 15V5a2 2 0 0 1 2-2h10'
+    );
+    expect(attempt.write).not.toHaveBeenCalled();
+  });
   it('hides empty answers while retaining an admitted pending write through empty corrections', async () => {
     const attempt = pending();
     const view = render(<CopyAnswer text="Old" generation="a" />);
diff --git a/examples/chat/native/react/src/copy-answer.tsx b/examples/chat/native/react/src/copy-answer.tsx
index 27eb3fc26..c59e875eb 100644
--- a/examples/chat/native/react/src/copy-answer.tsx
+++ b/examples/chat/native/react/src/copy-answer.tsx
@@ -48,7 +48,27 @@ export function CopyAnswer({
     <div className="copy-answer">
       <MessageActions
         actions={[
-          { id: 'copy', label: 'Copy answer', onSelect: () => void copy() },
+          {
+            id: 'copy',
+            label: 'Copy answer',
+            iconOnly: true,
+            icon: (
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <rect x="9" y="9" width="11" height="11" rx="2" />
+                <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+              </svg>
+            ),
+            onSelect: () => void copy(),
+          },
         ]}
         disabled={isPending}
       />
diff --git a/fixtures/react-parity/runtime/message-action-types.tsx b/fixtures/react-parity/runtime/message-action-types.tsx
new file mode 100644
index 000000000..5fb1222f5
--- /dev/null
+++ b/fixtures/react-parity/runtime/message-action-types.tsx
@@ -0,0 +1,55 @@
+import { Fragment, type ReactNode } from 'react';
+import { MessageActions, type MessageAction, type MessageActionsProps } from '@threadplane/react/chat';
+
+type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true : false;
+type Assert<T extends true> = T;
+export type ActionKeys = Assert<Equal<keyof MessageAction, 'id' | 'label' | 'onSelect' | 'disabled' | 'icon' | 'iconOnly'>>;
+export type GroupKeys = Assert<Equal<keyof MessageActionsProps, 'actions' | 'label' | 'disabled' | 'className'>>;
+type Mutable<T> = { -readonly [K in keyof T]: T[K] };
+type ReadonlyKeys<T> = { [K in keyof T]-?: Equal<Pick<T, K>, Mutable<Pick<T, K>>> extends true ? never : K }[keyof T];
+export type ReadonlyActionKeys = Assert<Equal<ReadonlyKeys<MessageAction>, keyof MessageAction>>;
+export type ReadonlyGroupKeys = Assert<Equal<ReadonlyKeys<MessageActionsProps>, keyof MessageActionsProps>>;
+
+const icons: readonly ReactNode[] = [<svg key="svg"><title>Decorative</title></svg>, null, undefined, false, true, 0, '', [], <Fragment key="empty" />];
+const actions: readonly MessageAction[] = [
+  { id: 'text', label: '<b>Literal</b>', onSelect: () => undefined },
+  { id: 'labelled', label: 'With icon', icon: <svg />, iconOnly: false, onSelect: () => undefined },
+  ...icons.map((icon, index) => ({ id: String(index), label: `Action ${index}`, icon, iconOnly: true, disabled: false, onSelect: () => undefined })),
+];
+export const views = <><MessageActions actions={actions} /><MessageActions actions={actions} label="Commands" disabled className="owned" /></>;
+
+export function contracts(action: MessageAction, group: MessageActionsProps) {
+  // @ts-expect-error installed action IDs are readonly
+  action.id = 'changed';
+  // @ts-expect-error installed literal labels are readonly
+  action.label = 'changed';
+  // @ts-expect-error installed callbacks are readonly
+  action.onSelect = () => undefined;
+  // @ts-expect-error installed disabled state is readonly
+  action.disabled = false;
+  // @ts-expect-error installed icons are readonly
+  action.icon = <svg />;
+  // @ts-expect-error installed compact flags are readonly
+  action.iconOnly = true;
+  // @ts-expect-error installed action collections are readonly
+  group.actions.push(action);
+  // @ts-expect-error group props remain readonly
+  group.label = 'changed';
+  // @ts-expect-error iconOnly requires boolean
+  const flag: MessageAction = { ...action, iconOnly: 'yes' };
+  // @ts-expect-error arbitrary objects are not ReactNodes
+  const icon: MessageAction = { ...action, icon: { glyph: 'copy' } };
+  // @ts-expect-error labels remain literal strings
+  const label: MessageAction = { ...action, label: <b>Copy</b> };
+  // @ts-expect-error commands cannot require payloads
+  const payload: MessageAction = { ...action, onSelect: (text: string) => text };
+  // @ts-expect-error native button props are not action props
+  const raw: MessageAction = { ...action, onClick: () => undefined };
+  // @ts-expect-error clipboard policy stays app owned
+  const command: MessageAction = { ...action, command: 'copy' };
+  // @ts-expect-error no event payload can be passed
+  action.onSelect(new MouseEvent('click'));
+  // @ts-expect-error no raw root DOM props
+  const rawGroup = <MessageActions actions={actions} onClick={() => undefined} />;
+  return { flag, icon, label, payload, raw, command, rawGroup };
+}
diff --git a/fixtures/react-parity/runtime/react-message-action-icons-styled.tsx b/fixtures/react-parity/runtime/react-message-action-icons-styled.tsx
new file mode 100644
index 000000000..56528e5e7
--- /dev/null
+++ b/fixtures/react-parity/runtime/react-message-action-icons-styled.tsx
@@ -0,0 +1,2 @@
+import '@threadplane/react/chat/styles.css';
+import './react-message-action-icons';
diff --git a/fixtures/react-parity/runtime/react-message-action-icons.tsx b/fixtures/react-parity/runtime/react-message-action-icons.tsx
new file mode 100644
index 000000000..3ddbb286a
--- /dev/null
+++ b/fixtures/react-parity/runtime/react-message-action-icons.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MessageActions, type MessageAction } from '@threadplane/react/chat';
+
+function Glyph({ changed = false }: { changed?: boolean }) {
+  return <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" focusable="false" data-glyph={changed ? 'changed' : 'initial'}><title>Misleading SVG command</title>{changed ? <circle cx="12" cy="12" r="8" /> : <path d="M4 12h16M12 4v16" />}</svg>;
+}
+function EmptyIcon() { return null; }
+
+function MessageActionIconsFixture() {
+  const [changed, setChanged] = useState(false);
+  const [reversed, setReversed] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [rootDisabled, setRootDisabled] = useState(false);
+  const [mounted, setMounted] = useState(true);
+  const [rtl, setRtl] = useState(false);
+  const [calls, setCalls] = useState<Record<string, number>>({});
+  const [argumentCounts, setArgumentCounts] = useState<number[]>([]);
+  const record = (id: string) => (...args: unknown[]) => {
+    setCalls((previous) => ({ ...previous, [id]: (previous[id] ?? 0) + 1 }));
+    setArgumentCounts((previous) => [...previous, args.length]);
+  };
+  const actions: MessageAction[] = [
+    { id: 'text', label: 'Text only', onSelect: record('text') },
+    { id: 'labelled', label: 'Icon and label', icon: <Glyph />, onSelect: record('labelled') },
+    { id: 'compact', label: changed ? 'Changed <em>& command' : 'Copy <b>& "answer"', icon: <Glyph changed={changed} />, iconOnly: !changed, disabled, onSelect: record(changed ? 'compact-current' : 'compact-initial') },
+    ...([undefined, null, false, true] as const).map((icon, index) => ({ id: `absent-${index}`, label: `Absent ${index}`, icon, iconOnly: true, onSelect: record(`absent-${index}`) })),
+    { id: 'zero', label: 'Zero icon', icon: 0, iconOnly: true, onSelect: record('zero') },
+    ...(['', [], <></>, <EmptyIcon />] as const).map((icon, index) => ({ id: `owned-${index}`, label: `Owned empty ${index}`, icon, iconOnly: true, onSelect: record(`owned-${index}`) })),
+  ];
+  return <main dir={rtl ? 'rtl' : 'ltr'}>
+    <h1>Installed message action icons</h1>
+    <nav aria-label="Fixture commands">
+      <button onClick={() => setChanged((value) => !value)}>Update action</button>
+      <button onClick={() => setReversed((value) => !value)}>Reorder actions</button>
+      <button onClick={() => setDisabled((value) => !value)}>Toggle action disabled</button>
+      <button onClick={() => setRootDisabled((value) => !value)}>Toggle group disabled</button>
+      <button onClick={() => setRtl((value) => !value)}>Toggle direction</button>
+      <button onClick={() => setMounted(false)}>Unmount actions</button>
+    </nav>
+    <output data-testid="icon-counts">{JSON.stringify(calls)}</output>
+    <output data-testid="icon-arguments">{JSON.stringify(argumentCounts)}</output>
+    <output data-testid="icon-mounted">{mounted ? 'mounted' : 'unmounted'}</output>
+    <button type="button">Before actions</button>
+    {mounted && <MessageActions actions={reversed ? [...actions].reverse() : actions} label="Icon commands" disabled={rootDisabled} />}
+    <button type="button">After actions</button>
+  </main>;
+}
+
+createRoot(document.getElementById('root')!).render(<MessageActionIconsFixture />);
diff --git a/libs/react/README.md b/libs/react/README.md
index 613120255..18158135e 100644
--- a/libs/react/README.md
+++ b/libs/react/README.md
@@ -344,19 +344,62 @@ host locale and timezone. Compose `CitationCard` to reuse the default local visu
 without changing the literal metadata shown by `CitationPreview`.
 
 `MessageActions` renders a named group of explicitly authored native buttons.
-Supply readonly actions with unique `id`, string `label`, argumentless `onSelect`
-and optional `disabled`. Root `disabled`, `label` and `className` are optional;
-empty actions render nothing. The app owns clipboard writes, async feedback,
-ratings and regeneration commands. Mounting or updating the view invokes no action.
-Callbacks may return promises; the app must handle their completion and errors.
+`MessageAction` has exactly six readonly fields: required unique `id`, literal
+string `label` and argumentless `onSelect`, plus optional `disabled`, `icon` and
+`iconOnly`. `MessageActionsProps` retains four readonly fields: required `actions`
+and optional `disabled`, `label` and `className`. Group and action disabled states
+default to false; either disables the native button. The default group label is
+`Message actions`; empty actions render nothing.
+
+`icon` accepts app-authored decorative, noninteractive ReactNode content.
+`iconOnly` defaults to false; only `true` with a supplied icon enables compact
+presentation. Exactly `null`, `undefined` and booleans omit the icon and fall back
+to the visible label, even with `iconOnly: true`. Zero, strings (including empty
+strings), arrays (including empty arrays), fragments and components that render
+nothing follow normal ReactNode semantics. The library does not inspect children;
+compact callers must supply a visible, noninteractive glyph.
+
+Icons render inside an `aria-hidden` wrapper. The literal string label always
+provides the button's accessible name. With the opt-in chat stylesheet, compact
+actions visually hide that label, use at least 36px square targets and size direct
+SVG glyphs to 16px. The compact button's native `title` is the same literal label,
+independently of CSS. Without the stylesheet, both icon and label remain visible
+in normal DOM presentation. Text-only and icon-plus-label actions keep visible labels.
+
+The app owns clipboard writes, pending state, async feedback and errors; it must
+handle promise completion and rejection itself. No ratings or regeneration
+commands are supplied. Rendering, updating and unmounting invoke no action.
+Compatible same-ID updates and reordering retain each native button and its focus
+where native disabled behavior permits; activation calls the current argumentless
+callback. This private feature does not complete T28 or establish public release parity.
 
 ```tsx
 import { MessageActions } from '@threadplane/react/chat';
+import '@threadplane/react/chat/styles.css';
 
-<MessageActions
-  actions={[{ id: 'copy', label: 'Copy answer', onSelect: () => void copyAnswer() }]}
-  disabled={copyPending}
-/>;
+export function CopyAction({ onCopy, disabled = false }: {
+  readonly onCopy: () => void;
+  readonly disabled?: boolean;
+}) {
+  return (
+    <MessageActions
+      actions={[{
+        id: 'copy',
+        label: 'Copy answer',
+        onSelect: onCopy,
+        iconOnly: true,
+        icon: (
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none"
+            stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false">
+            <rect x="9" y="9" width="11" height="11" rx="2" />
+            <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+          </svg>
+        ),
+      }]}
+      disabled={disabled}
+    />
+  );
+}
 ```
 
 `ApprovalCard` is an inline, named region with an app-authored body and explicit
diff --git a/libs/react/src/chat/message-actions.spec.tsx b/libs/react/src/chat/message-actions.spec.tsx
index e56c28e8b..d73ca7abf 100644
--- a/libs/react/src/chat/message-actions.spec.tsx
+++ b/libs/react/src/chat/message-actions.spec.tsx
@@ -1,4 +1,5 @@
 import { StrictMode } from 'react';
+import { renderToString } from 'react-dom/server';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { MessageActions } from './index';
@@ -76,4 +77,331 @@ describe('MessageActions', () => {
     render(<MessageActions actions={actions} />);
     expect(onSelect).not.toHaveBeenCalled();
   });
+
+  it.each([false, true])(
+    'isolates decorative SVG names with compact=%s',
+    (iconOnly) => {
+      const onSelect = vi.fn();
+      const label = '<b>Copy & "quote"</b>';
+      const view = render(
+        <MessageActions
+          actions={[
+            {
+              id: 'copy',
+              label,
+              onSelect,
+              iconOnly,
+              icon: (
+                <svg>
+                  <title>Delete everything</title>
+                  <path d="M0 0h16" />
+                </svg>
+              ),
+            },
+          ]}
+        />
+      );
+      const button = view.getByRole('button', { name: label });
+      const icon = button.querySelector('.tp-message-actions__icon');
+      const literal = button.querySelector('.tp-message-actions__label');
+      expect(icon?.getAttribute('aria-hidden')).toBe('true');
+      expect(icon?.querySelector('title')?.textContent).toBe(
+        'Delete everything'
+      );
+      expect(literal?.textContent).toBe(label);
+      expect(literal?.hasAttribute('hidden')).toBe(false);
+      expect(literal?.hasAttribute('aria-hidden')).toBe(false);
+      expect(literal?.getAttribute('style')).toBeNull();
+      expect(button.querySelector('b')).toBeNull();
+      expect(
+        button.classList.contains('tp-message-actions__action--icon-only')
+      ).toBe(iconOnly);
+      expect(button.getAttribute('title')).toBe(iconOnly ? label : null);
+      expect(onSelect).not.toHaveBeenCalled();
+      fireEvent.click(button);
+      expect(onSelect.mock.calls).toEqual([[]]);
+    }
+  );
+
+  it.each([null, undefined, false, true])(
+    'falls back to its label for absent icon %s',
+    (icon) => {
+      const view = render(
+        <MessageActions
+          actions={[
+            {
+              id: 'copy',
+              label: 'Copy',
+              onSelect: vi.fn(),
+              icon,
+              iconOnly: true,
+            },
+          ]}
+        />
+      );
+      const button = view.getByRole('button', { name: 'Copy' });
+      expect(button.querySelector('.tp-message-actions__icon')).toBeNull();
+      expect(
+        button.querySelector('.tp-message-actions__label')?.textContent
+      ).toBe('Copy');
+      expect(
+        button.classList.contains('tp-message-actions__action--icon-only')
+      ).toBe(false);
+      expect(button.hasAttribute('title')).toBe(false);
+    }
+  );
+
+  it.each([
+    { name: 'zero', icon: 0, text: '0' },
+    { name: 'string', icon: '*', text: '*' },
+    { name: 'empty string', icon: '', text: '' },
+    {
+      name: 'array',
+      icon: [<span key="one">One</span>, <span key="two">Two</span>],
+      text: 'OneTwo',
+    },
+    { name: 'empty array', icon: [], text: '' },
+    { name: 'fragment', icon: <>Fragment</>, text: 'Fragment' },
+    { name: 'empty fragment', icon: <></>, text: '' },
+    { name: 'null component', icon: <EmptyIcon />, text: '' },
+  ])('preserves ordinary ReactNode semantics for $name', ({ icon, text }) => {
+    const view = render(
+      <MessageActions
+        actions={[
+          {
+            id: 'copy',
+            label: 'Copy',
+            onSelect: vi.fn(),
+            icon,
+            iconOnly: true,
+          },
+        ]}
+      />
+    );
+    const button = view.getByRole('button', { name: 'Copy' });
+    expect(button.querySelector('.tp-message-actions__icon')?.textContent).toBe(
+      text
+    );
+    expect(
+      button.classList.contains('tp-message-actions__action--icon-only')
+    ).toBe(true);
+    expect(button.getAttribute('title')).toBe('Copy');
+  });
+
+  it('requires an explicitly true compact flag', () => {
+    const view = render(
+      <MessageActions
+        actions={[
+          { id: 'default', label: 'Default', onSelect: vi.fn(), icon: <svg /> },
+          {
+            id: 'false',
+            label: 'False',
+            onSelect: vi.fn(),
+            icon: <svg />,
+            iconOnly: false,
+          },
+        ]}
+      />
+    );
+    for (const button of view.getAllByRole('button')) {
+      expect(button.querySelector('.tp-message-actions__icon')).not.toBeNull();
+      expect(
+        button.classList.contains('tp-message-actions__action--icon-only')
+      ).toBe(false);
+      expect(button.hasAttribute('title')).toBe(false);
+    }
+  });
+
+  it('preserves keyed native buttons and focus while updating presentation, order and callbacks', () => {
+    const old = vi.fn(),
+      current = vi.fn(),
+      other = vi.fn();
+    const second = {
+      id: 'second',
+      label: 'Second',
+      onSelect: other,
+      icon: <svg />,
+      iconOnly: true,
+    };
+    const view = render(
+      <MessageActions
+        actions={[
+          {
+            id: 'copy',
+            label: 'Old',
+            onSelect: old,
+            icon: <svg />,
+            iconOnly: true,
+          },
+          second,
+        ]}
+      />
+    );
+    const button = view.getByRole('button', { name: 'Old' });
+    const otherButton = view.getByRole('button', { name: 'Second' });
+    button.focus();
+    view.rerender(
+      <MessageActions
+        actions={[
+          second,
+          {
+            id: 'copy',
+            label: 'Current',
+            onSelect: current,
+            icon: 'New icon',
+            iconOnly: false,
+          },
+        ]}
+      />
+    );
+    expect(view.getAllByRole('button')).toEqual([otherButton, button]);
+    expect(view.getByRole('button', { name: 'Current' })).toBe(button);
+    expect(document.activeElement).toBe(button);
+    expect(button.querySelector('.tp-message-actions__icon')?.textContent).toBe(
+      'New icon'
+    );
+    expect(button.hasAttribute('title')).toBe(false);
+    expect(
+      button.classList.contains('tp-message-actions__action--icon-only')
+    ).toBe(false);
+    expect(old).not.toHaveBeenCalled();
+    expect(current).not.toHaveBeenCalled();
+    expect(other).not.toHaveBeenCalled();
+    fireEvent.click(button);
+    fireEvent.click(button);
+    expect(current.mock.calls).toEqual([[], []]);
+
+    view.rerender(
+      <MessageActions
+        actions={[
+          {
+            id: 'copy',
+            label: 'Current',
+            onSelect: current,
+            icon: <svg />,
+            iconOnly: true,
+            disabled: true,
+          },
+        ]}
+      />
+    );
+    expect(view.getByRole('button', { name: 'Current' })).toBe(button);
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(button);
+    view.rerender(
+      <MessageActions
+        disabled
+        actions={[
+          {
+            id: 'copy',
+            label: 'Current',
+            onSelect: current,
+            icon: <svg />,
+            iconOnly: true,
+          },
+        ]}
+      />
+    );
+    expect(view.getByRole('button', { name: 'Current' })).toBe(button);
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(button);
+    expect(current.mock.calls).toEqual([[], []]);
+    expect(old).not.toHaveBeenCalled();
+    expect(other).not.toHaveBeenCalled();
+  });
+
+  it('does not invoke icon actions during StrictMode updates, removal or unmount', () => {
+    const onSelect = vi.fn();
+    const view = render(
+      <StrictMode>
+        <MessageActions
+          actions={[
+            {
+              id: 'copy',
+              label: 'Copy',
+              onSelect,
+              icon: <svg />,
+              iconOnly: true,
+            },
+          ]}
+        />
+      </StrictMode>
+    );
+    expect(
+      view.getByRole('button', { name: 'Copy' }).getAttribute('title')
+    ).toBe('Copy');
+    view.rerender(
+      <StrictMode>
+        <MessageActions
+          actions={[
+            {
+              id: 'copy',
+              label: 'Updated',
+              onSelect,
+              icon: '*',
+              iconOnly: false,
+            },
+          ]}
+        />
+      </StrictMode>
+    );
+    view.rerender(
+      <StrictMode>
+        <MessageActions actions={[]} />
+      </StrictMode>
+    );
+    expect(view.queryByRole('group')).toBeNull();
+    view.unmount();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('server-renders escaped literal labels and compact tooltips without invoking actions', () => {
+    const onSelect = vi.fn();
+    const label = '<b>Copy & "quote"</b>';
+    const markup = renderToString(
+      <MessageActions
+        actions={[
+          {
+            id: 'compact',
+            label,
+            onSelect,
+            icon: (
+              <svg>
+                <title>Misleading name</title>
+              </svg>
+            ),
+            iconOnly: true,
+          },
+          {
+            id: 'absent',
+            label: 'Fallback <label>',
+            onSelect,
+            icon: null,
+            iconOnly: true,
+          },
+        ]}
+      />
+    );
+    expect(markup).toContain(
+      'class="tp-message-actions__action tp-message-actions__action--icon-only"'
+    );
+    expect(markup).toContain(
+      'title="&lt;b&gt;Copy &amp; &quot;quote&quot;&lt;/b&gt;"'
+    );
+    expect(markup).toContain(
+      '<span class="tp-message-actions__icon" aria-hidden="true"><svg><title>Misleading name</title></svg></span>'
+    );
+    expect(markup).toContain(
+      '<span class="tp-message-actions__label">&lt;b&gt;Copy &amp; &quot;quote&quot;&lt;/b&gt;</span>'
+    );
+    expect(markup).toContain(
+      '<button type="button" class="tp-message-actions__action"><span class="tp-message-actions__label">Fallback &lt;label&gt;</span></button>'
+    );
+    expect(markup).not.toContain('<b>');
+    expect(onSelect).not.toHaveBeenCalled();
+  });
 });
+
+function EmptyIcon() {
+  return null;
+}
diff --git a/libs/react/src/chat/message-actions.tsx b/libs/react/src/chat/message-actions.tsx
index 4ccd4dd0b..695ec3c0f 100644
--- a/libs/react/src/chat/message-actions.tsx
+++ b/libs/react/src/chat/message-actions.tsx
@@ -1,11 +1,17 @@
 'use client';
 
+import type { ReactNode } from 'react';
+
 /** An explicitly authored action; IDs must be unique within the group. */
 export interface MessageAction {
   readonly id: string;
   readonly label: string;
   readonly onSelect: () => void;
   readonly disabled?: boolean;
+  /** App-authored noninteractive decorative content; nullish and boolean values omit the icon. */
+  readonly icon?: ReactNode;
+  /** Visually hides the label with opt-in styles when true and an icon is supplied. */
+  readonly iconOnly?: boolean;
 }
 
 /** Supplies message action buttons, an optional group-wide disabled state, and an accessible group label. */
@@ -30,19 +36,34 @@ export function MessageActions({
       aria-label={label}
       className={['tp-message-actions', className].filter(Boolean).join(' ')}
     >
-      {actions.map((action) => (
-        <button
-          key={action.id}
-          type="button"
-          className="tp-message-actions__action"
-          disabled={disabled || action.disabled}
-          onClick={() => {
-            if (!disabled && !action.disabled) action.onSelect();
-          }}
-        >
-          {action.label}
-        </button>
-      ))}
+      {actions.map((action) => {
+        const hasIcon = action.icon != null && typeof action.icon !== 'boolean';
+        const iconOnly = action.iconOnly === true && hasIcon;
+        return (
+          <button
+            key={action.id}
+            type="button"
+            className={[
+              'tp-message-actions__action',
+              iconOnly && 'tp-message-actions__action--icon-only',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            title={iconOnly ? action.label : undefined}
+            disabled={disabled || action.disabled}
+            onClick={() => {
+              if (!disabled && !action.disabled) action.onSelect();
+            }}
+          >
+            {hasIcon && (
+              <span className="tp-message-actions__icon" aria-hidden="true">
+                {action.icon}
+              </span>
+            )}
+            <span className="tp-message-actions__label">{action.label}</span>
+          </button>
+        );
+      })}
     </div>
   );
 }
diff --git a/libs/react/src/chat/message-actions.type-test.tsx b/libs/react/src/chat/message-actions.type-test.tsx
index 8d1cca7a7..995b7bcbe 100644
--- a/libs/react/src/chat/message-actions.type-test.tsx
+++ b/libs/react/src/chat/message-actions.type-test.tsx
@@ -1,14 +1,106 @@
+import type { ReactNode } from 'react';
 import {
   MessageActions,
   type MessageAction,
   type MessageActionsProps,
 } from './index.js';
-const action: MessageAction = { id: 'copy', label: 'Copy', onSelect: () => true };
+type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B
+  ? 1
+  : 2
+  ? true
+  : false;
+type Assert<T extends true> = T;
+export type ExactAction = Assert<
+  Equal<
+    MessageAction,
+    {
+      readonly id: string;
+      readonly label: string;
+      readonly onSelect: () => void;
+      readonly disabled?: boolean;
+      readonly icon?: ReactNode;
+      readonly iconOnly?: boolean;
+    }
+  >
+>;
+export type ExactGroup = Assert<
+  Equal<
+    MessageActionsProps,
+    {
+      readonly actions: readonly MessageAction[];
+      readonly disabled?: boolean;
+      readonly label?: string;
+      readonly className?: string;
+    }
+  >
+>;
+const action: MessageAction = {
+  id: 'copy',
+  label: 'Copy',
+  onSelect: () => true,
+};
 const props: MessageActionsProps = {
   actions: [action],
   label: 'Answer actions',
 };
 <MessageActions {...props} />;
+const icons: readonly ReactNode[] = [
+  <svg />,
+  0,
+  '',
+  null,
+  undefined,
+  false,
+  true,
+  [],
+  [<span key="glyph">*</span>],
+  <>*</>,
+];
+const iconActions: readonly MessageAction[] = icons.map((icon) => ({
+  ...action,
+  icon,
+  iconOnly: true,
+}));
+const compact: MessageAction = { ...action, icon: <svg />, iconOnly: true };
+const expanded: MessageAction = { ...action, icon: null, iconOnly: false };
+const fallback: MessageAction = { ...action, iconOnly: true };
+<MessageActions actions={[compact, expanded, fallback, ...iconActions]} />;
+// @ts-expect-error Icons are readonly.
+compact.icon = <svg />;
+// @ts-expect-error Compact presentation is readonly.
+compact.iconOnly = false;
+// @ts-expect-error Compact presentation requires a boolean.
+<MessageActions actions={[{ ...action, iconOnly: 'true' }]} />;
+// @ts-expect-error Action IDs are readonly.
+action.id = 'new';
+// @ts-expect-error Labels are readonly.
+action.label = 'New';
+// @ts-expect-error Per-action disabled state is readonly.
+action.disabled = true;
+// @ts-expect-error The action group is readonly.
+props.actions = [];
+// @ts-expect-error Group labels are readonly.
+props.label = 'New';
+// @ts-expect-error Group classes are readonly.
+props.className = 'new';
+// @ts-expect-error Raw action DOM handlers are not accepted.
+<MessageActions actions={[{ ...action, onClick: () => true }]} />;
+// @ts-expect-error Raw action attributes are not accepted.
+<MessageActions actions={[{ ...action, title: 'Override' }]} />;
+// @ts-expect-error Raw action children are not accepted.
+<MessageActions actions={[{ ...action, children: <span /> }]} />;
+// @ts-expect-error Commands remain app-owned.
+<MessageActions actions={[{ ...action, command: 'copy' }]} />;
+// @ts-expect-error Sessions are not supplied to this presentation primitive.
+<MessageActions {...props} session={{}} />;
+// @ts-expect-error Raw group DOM handlers are not accepted.
+<MessageActions {...props} onClick={() => true} />;
+const eventPayload: MessageAction = {
+  ...action,
+  // @ts-expect-error Event payload callbacks are not accepted.
+  onSelect: (event: MouseEvent) => event,
+};
+void eventPayload;
 // @ts-expect-error Actions must be explicitly authored.
 <MessageActions />;
 // @ts-expect-error Action labels must be literal strings.
diff --git a/libs/react/src/chat/styles.css b/libs/react/src/chat/styles.css
index bb18acd24..9bd6303dd 100644
--- a/libs/react/src/chat/styles.css
+++ b/libs/react/src/chat/styles.css
@@ -395,8 +395,36 @@
   margin-block-start: 0.5rem;
 }
 .tp-message-actions__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
   font: inherit;
 }
+.tp-message-actions__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+.tp-message-actions__icon > svg {
+  inline-size: 16px;
+  block-size: 16px;
+}
+.tp-message-actions__action--icon-only {
+  position: relative;
+  min-inline-size: 36px;
+}
+.tp-message-actions__action--icon-only > .tp-message-actions__label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .tp-message-actions__action:disabled {
   cursor: not-allowed;
 }
diff --git a/libs/react/src/markdown/inline-preview.spec.tsx b/libs/react/src/markdown/inline-preview.spec.tsx
index 409068c95..20f5bee54 100644
--- a/libs/react/src/markdown/inline-preview.spec.tsx
+++ b/libs/react/src/markdown/inline-preview.spec.tsx
@@ -30,6 +30,20 @@ function setup() {
     </>
   );
 }
+function mockHover(matches = true) {
+  vi.stubGlobal('matchMedia', () => ({ matches }));
+  // jsdom lacks PointerEvent; preserve pointerType for the touch guard.
+  vi.stubGlobal(
+    'PointerEvent',
+    class extends MouseEvent {
+      readonly pointerType: string;
+      constructor(type: string, init: PointerEventInit = {}) {
+        super(type, init);
+        this.pointerType = init.pointerType ?? '';
+      }
+    }
+  );
+}
 afterEach(() => {
   cleanup();
   vi.useRealTimers();
@@ -264,6 +278,119 @@ describe('inline previews', () => {
     v.rerender(<Markdown snapshot={snapshot('b')} citationPreview />);
     expect(v.queryByRole('dialog')).toBeNull();
   });
+  it.each(['Escape', 'Close'])(
+    'keeps %s dismissal through stationary boundary events until fresh pointer movement',
+    (dismissal) => {
+      vi.useFakeTimers();
+      mockHover();
+      const v = setup();
+      const trigger = v.getAllByRole('button')[0];
+      act(() => trigger.focus());
+      const close = v.getByRole('button', { name: 'Close' });
+      act(() => close.focus());
+      if (dismissal === 'Escape') fireEvent.keyDown(close, { key: 'Escape' });
+      else fireEvent.click(close);
+      expect(document.activeElement).toBe(trigger);
+      expect(v.queryByRole('dialog')).toBeNull();
+      // A stationary pointer can cross boundaries as the portal changes layout.
+      for (let i = 0; i < 3; i++) {
+        fireEvent.pointerLeave(trigger, { pointerType: 'mouse' });
+        fireEvent.pointerEnter(trigger, { pointerType: 'mouse' });
+        act(() => vi.advanceTimersByTime(150));
+        expect(v.queryByRole('dialog')).toBeNull();
+      }
+      fireEvent.focus(trigger);
+      expect(v.queryByRole('dialog')).toBeNull();
+      fireEvent.pointerMove(trigger, { pointerType: 'mouse' });
+      act(() => vi.advanceTimersByTime(60));
+      fireEvent.pointerMove(trigger, { pointerType: 'mouse' });
+      act(() => vi.advanceTimersByTime(59));
+      fireEvent.pointerMove(trigger, { pointerType: 'mouse' });
+      expect(v.queryByRole('dialog')).toBeNull();
+      act(() => vi.advanceTimersByTime(1));
+      expect(v.getByRole('dialog')).toBeTruthy();
+    }
+  );
+  it.each([
+    'departure',
+    'blur',
+    'hidden',
+    'outside pointer',
+    'generation',
+    'unmount',
+  ])(
+    'cancels movement reopening on %s and allows a later fresh hover',
+    (retirement) => {
+      vi.useFakeTimers();
+      mockHover();
+      const v = setup();
+      const trigger = v.getAllByRole('button')[0];
+      act(() => trigger.focus());
+      fireEvent.keyDown(trigger, { key: 'Escape' });
+      fireEvent.pointerMove(trigger, { pointerType: 'mouse' });
+      act(() => vi.advanceTimersByTime(60));
+      expect(vi.getTimerCount()).toBe(1);
+      if (retirement === 'departure') fireEvent.pointerLeave(trigger);
+      else if (retirement === 'blur') fireEvent(window, new Event('blur'));
+      else if (retirement === 'hidden') {
+        vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('hidden');
+        fireEvent(document, new Event('visibilitychange'));
+        vi.restoreAllMocks();
+      } else if (retirement === 'outside pointer')
+        fireEvent.pointerDown(document.body);
+      else if (retirement === 'generation')
+        v.rerender(
+          <Markdown
+            snapshot={snapshot('b')}
+            citations={[source]}
+            citationPreview
+          />
+        );
+      else v.unmount();
+      if (retirement === 'unmount') expect(vi.getTimerCount()).toBe(0);
+      act(() => vi.advanceTimersByTime(500));
+      expect(v.queryByRole('dialog')).toBeNull();
+      if (retirement !== 'unmount') {
+        const current = v.getAllByRole('button')[0];
+        fireEvent.pointerEnter(current, { pointerType: 'mouse' });
+        fireEvent.pointerMove(current, { pointerType: 'mouse' });
+        act(() => vi.advanceTimersByTime(120));
+        expect(v.getByRole('dialog')).toBeTruthy();
+      }
+    }
+  );
+  it.each(['click', 'Enter', ' '])(
+    'allows immediate explicit %s activation after dismissal',
+    (activation) => {
+      vi.useFakeTimers();
+      const v = setup();
+      const trigger = v.getAllByRole('button')[0];
+      act(() => trigger.focus());
+      fireEvent.keyDown(trigger, { key: 'Escape' });
+      if (activation !== 'click') {
+        expect(fireEvent.keyDown(trigger, { key: activation })).toBe(true);
+        expect(fireEvent.keyUp(trigger, { key: activation })).toBe(true);
+      }
+      // Native button activation supplies click after the permitted key events.
+      fireEvent.click(trigger);
+      expect(v.getByRole('dialog')).toBeTruthy();
+    }
+  );
+  it.each([
+    { pointerType: 'touch', matches: true },
+    { pointerType: 'mouse', matches: false },
+  ])('keeps dismissed movement inert for %j', ({ pointerType, matches }) => {
+    vi.useFakeTimers();
+    mockHover(matches);
+    const v = setup();
+    const trigger = v.getAllByRole('button')[0];
+    act(() => trigger.focus());
+    fireEvent.keyDown(trigger, { key: 'Escape' });
+    fireEvent.pointerEnter(trigger, { pointerType });
+    fireEvent.pointerMove(trigger, { pointerType });
+    act(() => vi.advanceTimersByTime(500));
+    expect(v.queryByRole('dialog')).toBeNull();
+  });
 });
 
 it('keeps touch hover inert, contains modified keyboard activation, and dismisses outside without stealing focus', () => {
diff --git a/libs/react/src/markdown/inline-preview.tsx b/libs/react/src/markdown/inline-preview.tsx
index 1b66548f4..03dfdfdd4 100644
--- a/libs/react/src/markdown/inline-preview.tsx
+++ b/libs/react/src/markdown/inline-preview.tsx
@@ -59,6 +59,8 @@ export function InlinePreview({
   const cancel = () => {
     clearTimeout(timers.current.open);
     clearTimeout(timers.current.close);
+    timers.current.open = undefined;
+    timers.current.close = undefined;
   };
   const ownsFocus = () => {
     const active = trigger.current?.ownerDocument.activeElement;
@@ -81,10 +83,22 @@ export function InlinePreview({
     suppressed.current = false;
     setOpen(true);
   };
-  const leave = () => {
-    clearTimeout(timers.current.open);
+  const hover = (event: React.PointerEvent<HTMLButtonElement>) => {
     clearTimeout(timers.current.close);
+    timers.current.close = undefined;
+    if (
+      event.pointerType !== 'touch' &&
+      event.currentTarget.ownerDocument.defaultView?.matchMedia?.(
+        '(hover: hover) and (pointer: fine)'
+      ).matches &&
+      timers.current.open === undefined
+    )
+      timers.current.open = setTimeout(activate, 120);
+  };
+  const leave = () => {
+    cancel();
     timers.current.close = setTimeout(() => {
+      timers.current.close = undefined;
       if (!ownsFocus()) setOpen(false);
     }, 200);
   };
@@ -286,16 +300,11 @@ export function InlinePreview({
             }
           }}
           onPointerEnter={(event) => {
-            clearTimeout(timers.current.close);
-            if (
-              event.pointerType !== 'touch' &&
-              event.currentTarget.ownerDocument.defaultView?.matchMedia?.(
-                '(hover: hover) and (pointer: fine)'
-              ).matches
-            ) {
-              clearTimeout(timers.current.open);
-              timers.current.open = setTimeout(activate, 120);
-            }
+            // Layout can expose a stationary pointer after explicit dismissal.
+            if (!suppressed.current) hover(event);
+          }}
+          onPointerMove={(event) => {
+            if (suppressed.current) hover(event);
           }}
           onPointerLeave={leave}
           onKeyDown={keydown}
diff --git a/scripts/react-parity/baseline.json b/scripts/react-parity/baseline.json
index 5dcc3c410..b0363860e 100644
--- a/scripts/react-parity/baseline.json
+++ b/scripts/react-parity/baseline.json
@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "baselineHead": "4b6ac1a125113591c7abe096318716558ac6d826",
+  "baselineHead": "b3d7b2b5e2e22928c7fa3f8ccd81ca17a9289df8",
   "sourceState": {
     "modified": [
-      "apps/website/content/docs/react/chat/components/chat-message-list.mdx",
       "apps/website/content/docs/react/chat/components/chat-message.mdx",
-      "apps/website/content/docs/react/chat/components/chat.mdx",
       "libs/react/README.md",
-      "libs/react/src/chat/styles.css"
+      "libs/react/src/chat/message-actions.tsx",
+      "libs/react/src/chat/styles.css",
+      "libs/react/src/markdown/inline-preview.tsx"
     ],
     "untracked": []
   },
@@ -855,7 +855,7 @@
       "id": "asset:libs/react/README.md",
       "kind": "asset",
       "path": "libs/react/README.md",
-      "sha256": "762f19cfc7767d02cdd7196117fc57b06468256648587f257d2cbc1a51de4432"
+      "sha256": "71be6dc1a45bd656079a88397d350ba147d1d34cc3128700f390fb892260951c"
     },
     {
       "id": "asset:libs/react/package.json",
@@ -873,7 +873,7 @@
       "id": "asset:libs/react/src/chat/styles.css",
       "kind": "asset",
       "path": "libs/react/src/chat/styles.css",
-      "sha256": "eac8a70357efb8668739855d852300d7fd2b3e9b8b2b90b5ab4249d48073c184"
+      "sha256": "b2848146e7ae4d1c11c413e6f16e17ff9e132986810434a6028135aae7898460"
     },
     {
       "id": "asset:libs/react/src/debug/styles.css",
@@ -3123,7 +3123,7 @@
       "id": "doc:apps/website/content/docs/react/chat/components/chat-message.mdx",
       "kind": "doc",
       "path": "apps/website/content/docs/react/chat/components/chat-message.mdx",
-      "sha256": "94108127aaf06e848012b75e099e0f132756d59c81337db13095c4a571a37cd2"
+      "sha256": "67a402dc5115468070ad879c3b04ada4fa2d8b305ac2cb7a3c7dae373d905a57"
     },
     {
       "id": "doc:apps/website/content/docs/react/chat/components/chat-popup.mdx",
@@ -11626,7 +11626,7 @@
           "path": "libs/react/src/chat/message-actions.tsx",
           "symbol": "MessageAction",
           "syntaxKind": "InterfaceDeclaration",
-          "signature": "export interface MessageAction {\n    readonly id: string;\n    readonly label: string;\n    readonly onSelect: () => void;\n    readonly disabled?: boolean;\n}"
+          "signature": "export interface MessageAction {\n    readonly id: string;\n    readonly label: string;\n    readonly onSelect: () => void;\n    readonly disabled?: boolean;\n    readonly icon?: ReactNode;\n    readonly iconOnly?: boolean;\n}"
         }
       ]
     },
@@ -11640,7 +11640,7 @@
           "path": "libs/react/src/chat/message-actions.tsx",
           "symbol": "MessageActions",
           "syntaxKind": "FunctionDeclaration",
-          "signature": "export function MessageActions({ actions, disabled = false, label = 'Message actions', className, }: MessageActionsProps) {\n    if (!actions.length)\n        return null;\n    return (<div role=\"group\" aria-label={label} className={['tp-message-actions', className].filter(Boolean).join(' ')}>\n      {actions.map((action) => (<button key={action.id} type=\"button\" className=\"tp-message-actions__action\" disabled={disabled || action.disabled} onClick={() => {\n                if (!disabled && !action.disabled)\n                    action.onSelect();\n            }}>\n          {action.label}\n        </button>))}\n    </div>);\n}"
+          "signature": "export function MessageActions({ actions, disabled = false, label = 'Message actions', className, }: MessageActionsProps) {\n    if (!actions.length)\n        return null;\n    return (<div role=\"group\" aria-label={label} className={['tp-message-actions', className].filter(Boolean).join(' ')}>\n      {actions.map((action) => {\n            const hasIcon = action.icon != null && typeof action.icon !== 'boolean';\n            const iconOnly = action.iconOnly === true && hasIcon;\n            return (<button key={action.id} type=\"button\" className={[\n                    'tp-message-actions__action',\n                    iconOnly && 'tp-message-actions__action--icon-only',\n                ]\n                    .filter(Boolean)\n                    .join(' ')} title={iconOnly ? action.label : undefined} disabled={disabled || action.disabled} onClick={() => {\n                    if (!disabled && !action.disabled)\n                        action.onSelect();\n                }}>\n            {hasIcon && (<span className=\"tp-message-actions__icon\" aria-hidden=\"true\">\n                {action.icon}\n              </span>)}\n            <span className=\"tp-message-actions__label\">{action.label}</span>\n          </button>);\n        })}\n    </div>);\n}"
         }
       ]
     },
@@ -16906,7 +16906,7 @@
       "id": "source:libs/react/src/chat/message-actions.tsx",
       "kind": "source",
       "path": "libs/react/src/chat/message-actions.tsx",
-      "sha256": "76ff674493087f4211b01b48d5389ba3efbcdccfcc0ccb78c90004d350e9995d"
+      "sha256": "6c2b8d497e65cb75941e189ca2c67f6fb10f450af9695d296de559e76b94fa85"
     },
     {
       "id": "source:libs/react/src/chat/message-list.tsx",
@@ -17080,7 +17080,7 @@
       "id": "source:libs/react/src/markdown/inline-preview.tsx",
       "kind": "source",
       "path": "libs/react/src/markdown/inline-preview.tsx",
-      "sha256": "b20ae4a22c37da2e3c0419a1f77e92edbc52a35638185178084d08d95b82170c"
+      "sha256": "10c4d1a3b7e908d7fb16f85519fd654e9097dc6208ba73c6d426fe3552db79b8"
     },
     {
       "id": "source:libs/react/src/markdown/markdown-image.tsx",
diff --git a/scripts/react-parity/dispositions.json b/scripts/react-parity/dispositions.json
index f867df8d4..5709e118a 100644
--- a/scripts/react-parity/dispositions.json
+++ b/scripts/react-parity/dispositions.json
@@ -2276,7 +2276,7 @@
       "treatment": "react",
       "status": "in-progress",
       "target": "libs/react/src/chat/message-actions.tsx",
-      "reason": "Private authored MessageActions group dogfooded through app-owned copy with exact answer text, pending and clipboard outcome. Ratings, regeneration and full legacy parity remain separate."
+      "reason": "Private authored MessageActions group adds app-authored decorative icons and explicit compact presentation, dogfooded through app-owned copy with exact answer text, pending and clipboard outcome. Literal labels, native buttons and current argumentless callbacks remain intact. Ratings, regeneration, full T28 and public release parity remain open."
     },
     {
       "id": "component:libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.ts#ChatMessageListComponent",
@@ -5446,7 +5446,7 @@
       "treatment": "react",
       "status": "planned",
       "target": "libs/react/src/chat/message-actions.tsx",
-      "reason": "Native component. Copy/rate/regenerate target identity, clipboard outcome and custom action slots."
+      "reason": "Private React native-button presentation now supports app-authored decorative icons and explicit compact labels, with app-owned copy dogfood. Automatic copy/rate/regenerate commands, richer custom action slots, full legacy parity and public release remain separate."
     },
     {
       "id": "export:libs/chat/src/public-api.ts#ChatMessageComponent",
@@ -14278,7 +14278,7 @@
       ],
       "treatment": "infrastructure",
       "status": "in-progress",
-      "reason": "Private native observer and first plain-text feature surface; this records scoped source and packaging proof, not full chat parity. Bounded private T20/T24 React readiness admission: pure synchronous boolean over owned resolved props, pending fallback without children, successful real-view commit latch and explicit identity/lifetime resets. Direct registrations remain supported. Forms, schema validation, actions, catalog, SSR, public release and full legacy parity remain open.",
+      "reason": "Private native observer and first plain-text feature surface; this records scoped source and packaging proof, not full chat parity. Bounded private T20/T24 React readiness admission: pure synchronous boolean over owned resolved props, pending fallback without children, successful real-view commit latch and explicit identity/lifetime resets. Direct registrations remain supported. Forms, schema validation, actions, catalog, SSR, public release and full legacy parity remain open. MessageActions documentation now covers six readonly action fields, unchanged four group fields, decorative noninteractive ReactNodes, exact absent-icon semantics, opt-in compact styling and real no-CSS labels, with a local SVG copy example and app-owned async errors. Full T28 and public release parity remain open.",
       "note": "Unique-ID readonly text rows, literal rendering and borrowed ownership are verified. Rich content, tools, custom templates, scrolling, SSR, publication and richer legacy migration tasks remain incomplete."
     },
     {
@@ -14300,7 +14300,7 @@
       ],
       "treatment": "infrastructure",
       "status": "in-progress",
-      "reason": "Opt-in chat stylesheet exported as @threadplane/react/chat/styles.css; scoped .tp-chat* classes with --tp-chat-* properties falling back to --ds-* tokens.",
+      "reason": "Opt-in chat stylesheet exported as @threadplane/react/chat/styles.css; scoped .tp-chat* classes with --tp-chat-* properties falling back to --ds-* tokens. Scoped message-action styling adds icon alignment, 16px direct SVG glyphs, at least 36px compact targets and a visually hidden accessible label; native focus outlines, disabled behavior and existing assistant controls reveal policy remain intact.",
       "note": "Shipped by the build assets and package exports; verify-packages.mjs validates the stylesheet export as a static asset whose file exists in the packed tarball (it is not imported by the consumer probe). Visual parity with the Angular chat theme is not claimed."
     },
     {
@@ -15471,7 +15471,7 @@
       ],
       "treatment": "react",
       "status": "in-progress",
-      "reason": "Private authored action group with installed native copy dogfood; callbacks and clipboard feedback belong to the app."
+      "reason": "Private authored action group with decorative icon and explicit compact presentation, literal accessible labels and CSS-independent compact title. Absent icons fall back to visible labels; without chat CSS both icon and label remain visible. Native button identity and current argumentless callbacks are retained; clipboard and feedback remain app-owned. Full T28 and public release parity remain open."
     },
     {
       "id": "export:libs/react/src/chat/index.ts#MessageAction",
@@ -15480,7 +15480,7 @@
       ],
       "treatment": "react",
       "status": "in-progress",
-      "reason": "Readonly explicit action IDs, string labels, argumentless callbacks and authoritative disabled state."
+      "reason": "Exactly six readonly fields: required id, literal string label and argumentless onSelect, plus optional disabled, decorative noninteractive ReactNode icon and boolean iconOnly. Compact defaults false and requires a supplied icon; only null, undefined and booleans are absent. Other ReactNodes remain app-owned without child inspection."
     },
     {
       "id": "export:libs/react/src/chat/index.ts#MessageActionsProps",
@@ -15489,7 +15489,7 @@
       ],
       "treatment": "react",
       "status": "in-progress",
-      "reason": "Readonly authored collection and group presentation props; no inferred backend commands."
+      "reason": "The same four readonly authored collection and group presentation fields remain actions, disabled, label and className; icons are optional per-action fields. No raw DOM props or inferred backend commands are added."
     },
     {
       "id": "source:libs/react/src/chat/message-actions.tsx",
@@ -15498,7 +15498,7 @@
       ],
       "treatment": "react",
       "status": "in-progress",
-      "reason": "Pure native button group with explicit activation and controlled disabled state; no clipboard, timers, session ownership or local rating state."
+      "reason": "Pure keyed native button group with decorative aria-hidden icons, explicit compact presentation, literal labels and markup title, absent-icon label fallback and real no-CSS icon-plus-label presentation. Explicit activation uses current argumentless callbacks and controlled disabled state; clipboard, async feedback, errors and commands remain app-owned. No child introspection, timers, session ownership or local rating state is added."
     },
     {
       "id": "entry:libs/content/src/json/index.ts",
@@ -16758,7 +16758,7 @@
       ],
       "treatment": "react",
       "status": "in-progress",
-      "reason": "Private Markdown source card with local mounted state, 120/200ms fine-pointer timing, keyboard/touch activation, nonmodal focus navigation, safe literal metadata and owner-document portal cleanup. Native assistant rows dogfood the installed runtime; full T26 citation display remains open."
+      "reason": "Private Markdown source card with local mounted state, 120/200ms fine-pointer timing, keyboard/touch activation, nonmodal focus navigation, safe literal metadata and owner-document portal cleanup. Native assistant rows dogfood the installed runtime; full T26 citation display remains open. Escape/Close dismissal prevents reopening from restored focus and stationary-pointer boundary events; fresh eligible pointer movement starts one non-restarting 120ms timer, canceled on departure/retirement/unmount, while explicit activation remains immediate and preview interaction adds no I/O."
     },
     {
       "id": "source:libs/react/src/markdown/preview-position.ts",
@@ -17930,7 +17930,7 @@
       "treatment": "react",
       "status": "in-progress",
       "target": "libs/react/src/chat/chat-message.tsx",
-      "reason": "Eleven readonly props compose a passive role article with a current streaming assistant caret inside the independently directed body, before/after rich chrome and consumer-owned controls. MessageList supplies frozen readonly current/prevRole context from the final-row position and immediately preceding projected row role; default and stable custom renderers forward primitive context, and Chat forwards the callback contract. Explicit assistant-to-user spacing works through wrappers, omitted context retains sibling fallback, and explicit other roles override it; assistant :first-child rules remain DOM-dependent. The opt-in stylesheet reveals direct assistant controls on article hover, focus-within or current state, and always at widths up to 768px or with no hover support. It reserves layout space and keyboard access, uses a 200ms opacity transition disabled with reduced motion, and does not suppress streaming controls. Without CSS, controls use normal DOM presentation. Callbacks, clipboard writes, status and disabled state remain app-owned; non-assistant, standalone MessageActions and nested rich controls retain existing behavior. Full ChatMessage/T23 parity remains deferred."
+      "reason": "Eleven readonly props compose a passive role article with a current streaming assistant caret inside the independently directed body, before/after rich chrome and consumer-owned controls. MessageList supplies frozen readonly current/prevRole context from the final-row position and immediately preceding projected row role; default and stable custom renderers forward primitive context, and Chat forwards the callback contract. Explicit assistant-to-user spacing works through wrappers, omitted context retains sibling fallback, and explicit other roles override it; assistant :first-child rules remain DOM-dependent. The opt-in stylesheet reveals direct assistant controls on article hover, focus-within or current state, and always at widths up to 768px or with no hover support. It reserves layout space and keyboard access, uses a 200ms opacity transition disabled with reduced motion, and does not suppress streaming controls. Without CSS, controls use normal DOM presentation. Callbacks, clipboard writes, status and disabled state remain app-owned; non-assistant, standalone MessageActions and nested rich controls retain existing behavior. Full ChatMessage/T23 parity remains deferred. The existing compiled example now composes a local decorative copy SVG through MessageActions; added documentation covers six readonly action fields, unchanged four group fields, exact absent-icon semantics, literal accessible labels and CSS-independent title, opt-in compact styling and real no-CSS presentation. Clipboard, async feedback and errors remain application-owned; full T28 and public release parity remain open."
     },
     {
       "id": "export:libs/react/src/chat/index.ts#ChatMessage",
diff --git a/scripts/react-parity/runtime-consumer.mjs b/scripts/react-parity/runtime-consumer.mjs
index 706dc75aa..bfc0af0cd 100644
--- a/scripts/react-parity/runtime-consumer.mjs
+++ b/scripts/react-parity/runtime-consumer.mjs
@@ -360,6 +360,7 @@ export function prepareInstalledTypes(root, consumer, kind) {
   cpSync(join(fixture, 'scenarios.ts'), join(consumer, 'scenarios.ts'));
   writeFileSync(join(consumer, 'installed-types.ts'), installedTypeSource(readFileSync(join(fixture, 'installed-types.ts'), 'utf8'), kind));
   if (kind === 'react') {
+    cpSync(join(fixture, 'message-action-types.tsx'), join(consumer, 'message-action-types.tsx'));
     cpSync(join(fixture, 'message-list-types.tsx'), join(consumer, 'message-list-types.tsx'));
     cpSync(join(fixture, 'json-types.ts'), join(consumer, 'json-types.ts'));
     cpSync(join(fixture, 'render-types.tsx'), join(consumer, 'render-types.tsx'));
@@ -367,7 +368,7 @@ export function prepareInstalledTypes(root, consumer, kind) {
   writeFileSync(join(consumer, 'tsconfig.contracts.json'), JSON.stringify({ compilerOptions: {
     target: 'ES2022', module: 'ESNext', moduleResolution: 'Bundler', lib: ['ES2022', 'DOM'], types: [], strict: true, skipLibCheck: false, noEmit: true,
     ...(kind === 'react' ? { jsx: 'react-jsx' } : {}),
-  }, files: ['installed-types.ts', ...(kind === 'react' ? ['message-list-types.tsx', 'json-types.ts', 'render-types.tsx'] : [])] }, null, 2));
+  }, files: ['installed-types.ts', ...(kind === 'react' ? ['message-list-types.tsx', 'json-types.ts', 'render-types.tsx', 'message-action-types.tsx'] : [])] }, null, 2));
 }
 
 /** Typecheck the private source against the *installed* public core declarations,
@@ -424,7 +425,7 @@ export function prepareRuntimeViews(root, consumer, kind) {
   const app = `${kind}-app.${kind === 'react' ? 'tsx' : 'ts'}`;
   cpSync(join(fixture, app), join(destination, app));
   writeFileSync(join(destination, kind === 'react' ? 'main.tsx' : 'main.ts'),
-    (kind === 'react' ? `if (new URLSearchParams(location.search).has('message-controls')) {\n  void import('./react-message-controls');\n} else if (new URLSearchParams(location.search).has('message-spacing')) {\n  void import('./react-message-spacing');\n} else ` : '') +
+    (kind === 'react' ? `if (new URLSearchParams(location.search).has('message-action-icons')) {\n  if (new URLSearchParams(location.search).has('no-styles')) {\n    void import('./react-message-action-icons');\n  } else {\n    void import('./react-message-action-icons-styled');\n  }\n} else if (new URLSearchParams(location.search).has('message-controls')) {\n  void import('./react-message-controls');\n} else if (new URLSearchParams(location.search).has('message-spacing')) {\n  void import('./react-message-spacing');\n} else ` : '') +
     `if (new URLSearchParams(location.search).has('checkpoints')) {\n  void import('./${kind}-checkpoints');\n} else if (new URLSearchParams(location.search).has('threads')) {\n  void import('./${kind}-threads');\n} else {\n  void import('./${kind}-app');\n}\n`);
   if (kind === 'angular') {
     const configPath = join(consumer, 'angular.json');
@@ -435,6 +436,7 @@ export function prepareRuntimeViews(root, consumer, kind) {
     writeFileSync(index, readFileSync(index, 'utf8').replace('<head>', '<head><meta name="viewport" content="width=device-width, initial-scale=1">'));
   }
   if (kind === 'react') {
+    for (const name of ['react-message-action-icons.tsx', 'react-message-action-icons-styled.tsx']) cpSync(join(fixture, name), join(destination, name));
     cpSync(join(fixture, 'react-message-controls.tsx'), join(destination, 'react-message-controls.tsx'));
     cpSync(join(fixture, 'react-message-spacing.tsx'), join(destination, 'react-message-spacing.tsx'));
     cpSync(join(fixture, 'react-overflow-menu.tsx'), join(destination, 'react-overflow-menu.tsx'));
@@ -1166,6 +1168,182 @@ export async function runMessageControlsScenarios(browser, server) {
   console.log('Installed React message controls: desktop hover/Tab/current/streaming, append/remove/reorder, DOM/layout identity, 768px and wide hover:none contexts, RTL, reduced motion, forced colors, exact local actions and no clipboard/backend I/O passed.');
 }
 
+export async function runMessageActionIconScenarios(browser, server) {
+  const counters = () => ({
+    runs: server.requests.length, history: server.historyRequests.length,
+    joins: server.joinRequests.length, status: server.statusRequests.length,
+    threads: server.threads.requests.length, checkpoints: server.checkpoints.requests.length,
+  });
+  const before = counters();
+  const pageErrors = [];
+  const consoleFailures = [];
+  const unexpected = [];
+  for (const mode of ['no-styles', 'desktop', 'narrow', 'rtl', 'forced', 'reduced']) {
+    const context = await browser.newContext({
+      viewport: { width: mode === 'narrow' ? 360 : 1280, height: 1100 },
+      ...(mode === 'forced' ? { forcedColors: 'active' } : {}),
+      ...(mode === 'reduced' ? { reducedMotion: 'reduce' } : {}),
+    });
+    try {
+      await context.addInitScript(() => {
+        window.iconClipboardCalls = 0;
+        Object.defineProperty(navigator, 'clipboard', { value: {
+          writeText: async () => { window.iconClipboardCalls++; },
+          readText: async () => { window.iconClipboardCalls++; return ''; },
+        } });
+      });
+      const page = await context.newPage();
+      page.on('pageerror', (error) => pageErrors.push(error.message));
+      page.on('console', (message) => {
+        if (['warning', 'error'].includes(message.type())) consoleFailures.push(message.text());
+      });
+      page.on('request', (request) => {
+        if (!request.url().startsWith(`${server.url}/`)) unexpected.push(request.url());
+      });
+      await page.goto(`${server.url}/?message-action-icons${mode === 'no-styles' ? '&no-styles' : ''}`);
+      await expect(page.getByRole('heading', { name: 'Installed message action icons' })).toBeVisible();
+      assert.deepEqual(await page.evaluate(() => ({
+        narrow: matchMedia('(max-width: 768px)').matches,
+        forced: matchMedia('(forced-colors: active)').matches,
+        reduced: matchMedia('(prefers-reduced-motion: reduce)').matches,
+      })), { narrow: mode === 'narrow', forced: mode === 'forced', reduced: mode === 'reduced' });
+      const command = (name) => page.getByRole('button', { name, exact: true });
+      const group = page.getByRole('group', { name: 'Icon commands', exact: true });
+      let compactLabel = 'Copy <b>& "answer"';
+      const compact = () => group.getByRole('button', { name: compactLabel, exact: true });
+      const calls = {};
+      const argumentsSeen = [];
+      const expectCalls = async () => {
+        await expect(page.getByTestId('icon-counts')).toHaveText(JSON.stringify(calls));
+        await expect(page.getByTestId('icon-arguments')).toHaveText(JSON.stringify(argumentsSeen));
+      };
+      const activate = async (target, id, key) => {
+        if (key) await page.keyboard.press(key);
+        else await target.click();
+        calls[id] = (calls[id] ?? 0) + 1;
+        argumentsSeen.push(0);
+        await expectCalls();
+      };
+      // Fixture controls are external to the action group. A DOM click lets
+      // presentation updates run while the native action keeps keyboard focus.
+      const updateWithoutFocus = (name) => command(name).evaluate((element) => element.click());
+      if (mode === 'rtl') await command('Toggle direction').click();
+      await expect(group).toHaveCSS('direction', mode === 'rtl' ? 'rtl' : 'ltr');
+      await expectCalls();
+      await expect(group.getByRole('button')).toHaveCount(12);
+      await expect(compact()).toHaveAccessibleName(compactLabel);
+      await expect(compact()).toHaveAttribute('title', compactLabel);
+      await expect(compact().locator('b')).toHaveCount(0);
+      await expect(compact().locator('.tp-message-actions__icon')).toHaveAttribute('aria-hidden', 'true');
+      await expect(compact().locator('svg title')).toHaveText('Misleading SVG command');
+      await expect(group.getByRole('button', { name: 'Misleading SVG command', exact: true })).toHaveCount(0);
+      await expect(command('Text only').locator('.tp-message-actions__icon')).toHaveCount(0);
+      await expect(command('Icon and label').locator('.tp-message-actions__label')).toHaveCSS('position', 'static');
+      for (let index = 0; index < 4; index++) {
+        const absent = command(`Absent ${index}`);
+        await expect(absent.locator('.tp-message-actions__icon')).toHaveCount(0);
+        await expect(absent).not.toHaveAttribute('title');
+        await expect(absent).not.toHaveClass(/--icon-only/);
+        await expect(absent.locator('.tp-message-actions__label')).toHaveCSS('position', 'static');
+        await expect(absent).toHaveAccessibleName(`Absent ${index}`);
+      }
+      await expect(command('Zero icon').locator('.tp-message-actions__icon')).toHaveText('0');
+      for (const name of ['Zero icon', ...Array.from({ length: 4 }, (_, index) => `Owned empty ${index}`)]) {
+        await expect(command(name)).toHaveClass(/--icon-only/);
+        await expect(command(name)).toHaveAttribute('title', name);
+        await expect(command(name).locator('.tp-message-actions__icon')).toHaveCount(1);
+      }
+      if (mode === 'no-styles') {
+        assert.equal(await page.evaluate(() => document.styleSheets.length), 0, 'real CSS-free entry loads no stylesheets');
+        await expect(compact().locator('.tp-message-actions__label')).toBeVisible();
+        await expect(compact().locator('.tp-message-actions__label')).toHaveCSS('position', 'static');
+        await expect(compact().locator('svg')).toBeVisible();
+      } else {
+        assert.ok(await page.evaluate(() => document.styleSheets.length) > 0, 'opt-in packed stylesheet loaded');
+        const label = compact().locator('.tp-message-actions__label');
+        await expect(label).toHaveCSS('position', 'absolute');
+        await expect(label).toHaveCSS('clip-path', 'inset(50%)');
+        await expect(label).toHaveCSS('width', '1px');
+        await expect(label).not.toHaveAttribute('aria-hidden');
+        await expect(compact().locator('svg')).toHaveCSS('width', '16px');
+        await expect(compact().locator('svg')).toHaveCSS('height', '16px');
+        assert.equal(await compact().locator('svg').evaluate((svg) => getComputedStyle(svg).stroke === getComputedStyle(svg.closest('button')).color), true, 'glyph inherits currentColor');
+        const bounds = await compact().boundingBox();
+        assert.ok(bounds.width >= 36 && bounds.height >= 36, `${mode} compact target is at least 36px`);
+        assert.equal(await group.evaluate((element) => element.getBoundingClientRect().right <= innerWidth), true, 'group fits narrow viewport');
+      }
+      await activate(compact(), 'compact-initial');
+      await command('Before actions').focus();
+      await page.keyboard.press('Tab');
+      await expect(command('Text only')).toBeFocused();
+      await activate(command('Text only'), 'text', 'Enter');
+      await page.keyboard.press('Tab');
+      await expect(command('Icon and label')).toBeFocused();
+      await activate(command('Icon and label'), 'labelled', 'Space');
+      await page.keyboard.press('Tab');
+      await expect(compact()).toBeFocused();
+      if (mode !== 'no-styles') {
+        await expect(compact()).toHaveCSS('outline-style', 'solid');
+        await expect(compact()).toHaveCSS('outline-width', '2px');
+        await expect(compact()).toHaveCSS('outline-offset', '3px');
+      }
+      await activate(compact(), 'compact-initial', 'Enter');
+      await activate(compact(), 'compact-initial', 'Space');
+      const retained = await compact().elementHandle();
+      const sameFocusedButton = async () => {
+        assert.equal(await compact().evaluate((element, original) => element === original, retained), true);
+        await expect(compact()).toBeFocused();
+      };
+      await updateWithoutFocus('Update action');
+      compactLabel = 'Changed <em>& command';
+      await expect(compact()).toHaveAccessibleName(compactLabel);
+      await expect(compact()).not.toHaveAttribute('title');
+      await expect(compact()).not.toHaveClass(/--icon-only/);
+      await expect(compact().locator('[data-glyph="changed"]')).toHaveCount(1);
+      await sameFocusedButton();
+      await expectCalls();
+      await updateWithoutFocus('Reorder actions');
+      await sameFocusedButton();
+      await expect(group.getByRole('button').last()).toHaveAccessibleName('Text only');
+      await activate(compact(), 'compact-current', 'Enter');
+      await updateWithoutFocus('Toggle action disabled');
+      await expect(compact()).toBeDisabled();
+      await compact().dispatchEvent('click');
+      await expectCalls();
+      await updateWithoutFocus('Toggle action disabled');
+      await expect(compact()).toBeEnabled();
+      assert.equal(await compact().evaluate((element, original) => element === original, retained), true);
+      await activate(compact(), 'compact-current');
+      await command('Toggle group disabled').click();
+      assert.equal(await group.locator('button:disabled').count(), 12);
+      await compact().dispatchEvent('click');
+      await expectCalls();
+      await command('Before actions').focus();
+      await page.keyboard.press('Tab');
+      await expect(command('After actions')).toBeFocused();
+      await command('Toggle group disabled').click();
+      await expect(compact()).toBeEnabled();
+      await updateWithoutFocus('Update action');
+      compactLabel = 'Copy <b>& "answer"';
+      await expect(compact()).toHaveAttribute('title', compactLabel);
+      assert.equal(await compact().evaluate((element, original) => element === original, retained), true);
+      await activate(compact(), 'compact-initial');
+      await expectCalls();
+      await command('Unmount actions').click();
+      await expect(group).toHaveCount(0);
+      await expect(page.getByTestId('icon-mounted')).toHaveText('unmounted');
+      await expectCalls();
+      assert.equal(await page.evaluate(() => window.iconClipboardCalls), 0);
+      assert.deepEqual(counters(), before, `${mode} icons do not create backend I/O`);
+    } finally { await context.close(); }
+  }
+  assert.deepEqual(pageErrors, []);
+  assert.deepEqual(consoleFailures, []);
+  assert.deepEqual(unexpected, []);
+  assert.deepEqual(counters(), before);
+  console.log('Installed React message action icons: real no-styles entry, styled desktop/narrow/RTL/forced/reduced contexts, literal accessible names and tooltips, decorative glyphs, target/focus geometry, pointer/Enter/Space, current argumentless callbacks, keyed identity, disabled/unmount and zero clipboard/backend I/O passed.');
+}
+
 export async function runRuntimeScenarios(directory, kind) {
   const server = await serveRuntimeConsumer(directory);
   let browser;
@@ -1484,6 +1662,8 @@ export async function runRuntimeScenarios(directory, kind) {
       completed.push('installed message spacing through wrappers and explicit precedence in LTR/RTL');
       await runMessageControlsScenarios(browser, server);
       completed.push('installed assistant controls reveal through hover focus current and device media');
+      await runMessageActionIconScenarios(browser, server);
+      completed.push('installed message action icons with opt-in styles and native app-owned commands');
       await runRenameFormScenarios(page, server.url);
       await runOverflowMenuScenarios(page, server.url);
       await runContextMenuScenarios(page, server.url);
@@ -1493,6 +1673,9 @@ export async function runRuntimeScenarios(directory, kind) {
     assert.deepEqual(pageErrors, []);
     assert.deepEqual(consoleFailures, [], 'browser console has no warnings or errors');
     assert.deepEqual(unexpected, []);
+    const iconsScenario = 'installed message action icons with opt-in styles and native app-owned commands';
+    assert.equal(completed.filter((scenario) => scenario === iconsScenario).length, /react/i.test(kind) ? 1 : 0);
+    assert.equal(completed.length, /react/i.test(kind) ? 30 : 27);
     console.log(`${kind}: ${completed.length} browser scenarios passed (${completed.join('; ')}); main workflow: 3 exact history reads, 10 exact run POSTs, 1 cursor join GET, 2 exact-run status GETs, one tool handler, 7 component submissions, 2 explicit resumes, 1 explicit reconnect; thread workflow: 4 history POSTs, 2 run POSTs, stream/history abort, no implicit selection I/O; no page errors/unexpected requests.`);
     return completed;
   } finally {
diff --git a/scripts/react-parity/runtime-consumer.spec.mjs b/scripts/react-parity/runtime-consumer.spec.mjs
index 888e529f7..16cd384d5 100644
--- a/scripts/react-parity/runtime-consumer.spec.mjs
+++ b/scripts/react-parity/runtime-consumer.spec.mjs
@@ -6,7 +6,7 @@ import test from 'node:test';
 import * as runtime from './runtime-consumer.mjs';
 
 test('installed React contract includes owned JSON types without adding them to core', (t) => {
-  for (const kind of ['react', 'core']) {
+  for (const kind of ['react', 'core', 'angular']) {
     const consumer = mkdtempSync(join(tmpdir(), 'json-type-contract-'));
     t.after(() => rmSync(consumer, { recursive: true, force: true }));
     runtime.prepareInstalledTypes(process.cwd(), consumer, kind);
@@ -15,6 +15,10 @@ test('installed React contract includes owned JSON types without adding them to
     assert.equal(existsSync(join(consumer, 'json-types.ts')), kind === 'react');
     assert.equal(config.files.includes('render-types.tsx'), kind === 'react');
     assert.equal(existsSync(join(consumer, 'render-types.tsx')), kind === 'react');
+    assert.equal(config.compilerOptions.skipLibCheck, false);
+    assert.equal(config.files.includes('message-action-types.tsx'), kind === 'react');
+    assert.equal(existsSync(join(consumer, 'message-action-types.tsx')), kind === 'react');
+    if (kind === 'react') assert.equal(readFileSync(join(consumer, 'message-action-types.tsx'), 'utf8'), readFileSync('fixtures/react-parity/runtime/message-action-types.tsx', 'utf8'));
   }
 });
 
@@ -29,7 +33,15 @@ test('shared view preparation copies the complete views without composing a priv
   assert.match(readFileSync(join(consumer, 'main.tsx'), 'utf8'), /checkpoints/);
   assert.match(readFileSync(join(consumer, 'main.tsx'), 'utf8'), /threads/);
   const entry = readFileSync(join(consumer, 'main.tsx'), 'utf8');
-  assert.match(entry, /^if \(new URLSearchParams\(location.search\).has\('message-controls'\)\) \{\n  void import\('\.\/react-message-controls'\);\n\} else if/);
+  assert.match(entry, /^if \(new URLSearchParams\(location.search\).has\('message-action-icons'\)\) \{/);
+  assert.match(entry, /has\('no-styles'\)\)[\s\S]*import\('\.\/react-message-action-icons'\)[\s\S]*import\('\.\/react-message-action-icons-styled'\)/);
+  for (const name of ['react-message-action-icons.tsx', 'react-message-action-icons-styled.tsx']) {
+    assert.equal(readFileSync(join(consumer, name), 'utf8'), readFileSync(join('fixtures/react-parity/runtime', name), 'utf8'));
+  }
+  assert.doesNotMatch(readFileSync(join(consumer, 'react-message-action-icons.tsx'), 'utf8'), /import[^;]+\.css/);
+  assert.equal(readFileSync(join(consumer, 'react-message-action-icons-styled.tsx'), 'utf8'), "import '@threadplane/react/chat/styles.css';\nimport './react-message-action-icons';\n");
+  assert.ok(entry.indexOf("import('./react-message-action-icons')") < entry.indexOf("import('./react-message-controls')"));
+  assert.ok(entry.indexOf("import('./react-message-controls')") < entry.indexOf("import('./react-message-spacing')"));
   assert.ok(entry.indexOf("import('./react-message-controls')") < entry.indexOf("import('./react-app')"));
   assert.equal(readFileSync(join(consumer, 'react-message-controls.tsx'), 'utf8'), readFileSync('fixtures/react-parity/runtime/react-message-controls.tsx', 'utf8'));
   assert.ok(entry.indexOf("import('./react-message-spacing')") < entry.indexOf("import('./react-app')"));
@@ -46,7 +58,9 @@ test('shared view preparation copies the complete views without composing a priv
   writeFileSync(join(angular, 'src/index.html'), '<head></head>');
   runtime.prepareRuntimeViews(process.cwd(), angular, 'angular');
   assert.equal(existsSync(join(angular, 'src/react-message-controls.tsx')), false);
-  assert.doesNotMatch(readFileSync(join(angular, 'src/main.ts'), 'utf8'), /message-controls|message-spacing|react-app/);
+  assert.equal(existsSync(join(angular, 'src/react-message-action-icons.tsx')), false);
+  assert.equal(existsSync(join(angular, 'src/react-message-action-icons-styled.tsx')), false);
+  assert.doesNotMatch(readFileSync(join(angular, 'src/main.ts'), 'utf8'), /message-action-icons|message-controls|message-spacing|react-app/);
 });
 
 const versions = { react: '19.2.4', 'react-dom': '19.2.4', '@types/react': '19.2.14', '@types/react-dom': '19.2.3', vite: '7.3.1', typescript: '5.9.3' };
diff --git a/scripts/react-parity/verify-langgraph-candidate.mjs b/scripts/react-parity/verify-langgraph-candidate.mjs
index 3a7e2f513..84b91cf7e 100644
--- a/scripts/react-parity/verify-langgraph-candidate.mjs
+++ b/scripts/react-parity/verify-langgraph-candidate.mjs
@@ -324,8 +324,10 @@ export default { ...base, plugins: [...base.plugins, { name: 'candidate-provenan
     'installed message spacing through wrappers and explicit precedence in LTR/RTL';
   const controlsScenario =
     'installed assistant controls reveal through hover focus current and device media';
+  const iconsScenario =
+    'installed message action icons with opt-in styles and native app-owned commands';
   assert.equal(
-    scenarios.filter((scenario) => scenario !== spacingScenario && scenario !== controlsScenario).length,
+    scenarios.filter((scenario) => scenario !== spacingScenario && scenario !== controlsScenario && scenario !== iconsScenario).length,
     27,
     'All original scenarios remain required'
   );
@@ -339,6 +341,12 @@ export default { ...base, plugins: [...base.plugins, { name: 'candidate-provenan
     kind === 'react' ? 1 : 0,
     'Message controls scenario is required exactly once for React only'
   );
+  assert.equal(
+    scenarios.filter((scenario) => scenario === iconsScenario).length,
+    kind === 'react' ? 1 : 0,
+    'Message action icon scenario is required exactly once for React only'
+  );
+  assert.equal(scenarios.length, kind === 'react' ? 30 : 27);
   return {
     kind,
     directory: relative(temporary, directory),