@runtypelabs/persona 4.32.2 → 4.34.0

package/src/components/user-message-collapse.ts

@@ -0,0 +1,117 @@
+import type { AgentWidgetConfig } from "../types";
+import { createNode } from "../utils/dom";
+
+/**
+ * Long user message collapse ("Show more" / "Show less").
+ *
+ * The default user bubble wraps its content (attachments, mention chips and
+ * text) in a clip region. ui.ts measures the region's real rendered height
+ * after each morph and decides whether it overflows; the bubble is then
+ * re-rendered from that state, so morphs and cached wrappers always agree
+ * with the live DOM. The full text stays in the DOM in every state (no nested
+ * scroller), so find-in-page, selection, copy and screen readers still reach it.
+ */
+
+/**
+ * Default collapsed height. A bubble line is ~22–24px (0.875rem at
+ * leading-relaxed/1.75), so 240px shows about ten lines: enough to recognise
+ * the message, while leaving most of a ~640px panel for the reply that
+ * anchor-top streams in beneath it.
+ */
+export const DEFAULT_USER_MESSAGE_COLLAPSE_MAX_HEIGHT = 240;
+
+/**
+ * Content within this many px (about two lines) of the limit stays expanded,
+ * so the toggle never hides just a line or two behind a button of its own size.
+ */
+export const USER_MESSAGE_COLLAPSE_SLACK = 48;
+
+/**
+ * - `fit`: not measured yet, or short enough; no toggle.
+ * - `live`: an interim voice transcript; expanded so the speaker can watch it.
+ * - `settling`: the transcript's first final render, still expanded; the
+ *   post-morph measurement settles it in the same pass, holding the viewport.
+ * - `collapsed` / `expanded`: overflowing, with the toggle.
+ */
+export type UserMessageCollapseState = "fit" | "live" | "settling" | "collapsed" | "expanded";
+
+export type UserMessageCollapseRender = {
+  state: UserMessageCollapseState;
+  maxHeight: number;
+  showMoreLabel: string;
+  showLessLabel: string;
+};
+
+export const USER_COLLAPSE_REGION_ATTR = "data-persona-user-collapse";
+export const USER_COLLAPSE_TOGGLE_ATTR = "data-persona-user-collapse-toggle";
+
+export const isUserMessageCollapseEnabled = (config: AgentWidgetConfig): boolean =>
+  config.features?.userMessageCollapse?.enabled === true;
+
+export const resolveUserMessageCollapseMaxHeight = (config: AgentWidgetConfig): number => {
+  const value = config.features?.userMessageCollapse?.maxHeight;
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? value
+    : DEFAULT_USER_MESSAGE_COLLAPSE_MAX_HEIGHT;
+};
+
+export const resolveUserMessageCollapseLabels = (
+  config: AgentWidgetConfig
+): Pick<UserMessageCollapseRender, "showMoreLabel" | "showLessLabel"> => ({
+  showMoreLabel: config.copy?.showMoreLabel?.trim() || "Show more",
+  showLessLabel: config.copy?.showLessLabel?.trim() || "Show less",
+});
+
+/** Whether a measured natural content height warrants collapsing. */
+export const userMessageOverflows = (naturalHeight: number, maxHeight: number): boolean =>
+  naturalHeight > maxHeight + USER_MESSAGE_COLLAPSE_SLACK;
+
+const regionId = (messageId: string) => `persona-user-collapse-${messageId}`;
+
+export const createUserCollapseRegion = (
+  messageId: string,
+  maxHeight: number
+): HTMLElement => {
+  const region = createNode("div", {
+    className: "persona-user-collapse-region",
+    attrs: { id: regionId(messageId), [USER_COLLAPSE_REGION_ATTR]: "fit" },
+  });
+  region.style.setProperty("--persona-user-collapse-max-height", `${maxHeight}px`);
+  return region;
+};
+
+/**
+ * Apply a state to a region and its sibling toggle. Used both while building a
+ * fresh bubble and to patch the live bubble in place on a toggle or a new
+ * measurement, so the toggle keeps its identity (and focus) across states.
+ */
+export const applyUserCollapseState = (
+  bubble: HTMLElement,
+  region: HTMLElement,
+  messageId: string,
+  render: UserMessageCollapseRender
+): void => {
+  const { state } = render;
+  region.setAttribute(USER_COLLAPSE_REGION_ATTR, state);
+  region.style.setProperty("--persona-user-collapse-max-height", `${render.maxHeight}px`);
+  let toggle = bubble.querySelector<HTMLButtonElement>(`button[${USER_COLLAPSE_TOGGLE_ATTR}]`);
+  if (state !== "collapsed" && state !== "expanded") {
+    toggle?.remove();
+    return;
+  }
+  if (!toggle) {
+    toggle = createNode("button", {
+      className: "persona-user-collapse-toggle",
+      attrs: {
+        type: "button",
+        id: `persona-user-collapse-toggle-${messageId}`,
+        [USER_COLLAPSE_TOGGLE_ATTR]: "",
+        "aria-controls": regionId(messageId),
+      },
+    }) as HTMLButtonElement;
+    region.after(toggle);
+  }
+  const expanded = state === "expanded";
+  toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
+  toggle.textContent = expanded ? render.showLessLabel : render.showMoreLabel;
+};

package/src/defaults-parity.test.ts

@@ -160,6 +160,20 @@ describe("4.22.0 defaults parity (flag off)", () => {
       expect(actual.themeCssVariables[key], key).toBe(value);
       delete resolvedActual.themeCssVariables[key];
     }
+    // Operator bubbles only render for messages that use the operator role,
+    // so every token they emit is additive and none may exist in the baseline.
+    const additivePrefixes = [
+      "--persona-components-message-operator-",
+      "--persona-message-operator-",
+    ];
+    expect(actual.themeCssVariables["--persona-components-message-operator-background"]).toBe(
+      "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))"
+    );
+    for (const key of Object.keys(resolvedActual.themeCssVariables)) {
+      if (!additivePrefixes.some((prefix) => key.startsWith(prefix))) continue;
+      expect(baseline.themeCssVariables).not.toHaveProperty(key);
+      delete resolvedActual.themeCssVariables[key];
+    }
     // Deliberately lengthen hover timing in both V4 and V5 without rewriting
     // the historical fixture. Keyboard focus and the scan window are unchanged.
     expect(baseline.mergedDefaultConfig.tooltip.delayMs).toBe(200);

package/src/defaults.ts

@@ -266,6 +266,9 @@ export const DEFAULTS_V5: Partial<AgentWidgetConfig> = {
   features: {
     artifacts: { enabled: true },
     scrollToBottom: { streamingIndicator: "dots", transition: "fade", scrollBehavior: "smooth" },
+    // Long sent messages (pasted text, voice transcripts) would otherwise fill
+    // the viewport under the anchor-top pin and push the reply out of view.
+    userMessageCollapse: { enabled: true },
     toolCallDisplay: DEFAULT_TOOL_CALL_DISPLAY_V5,
     reasoningDisplay: DEFAULT_REASONING_DISPLAY_V5,
   },
@@ -382,6 +385,8 @@ export function mergeWithDefaults(
       const csa = config.features?.streamAnimation;
       const dau = defaults.features?.askUserQuestion;
       const cau = config.features?.askUserQuestion;
+      const duc = defaults.features?.userMessageCollapse;
+      const cuc = config.features?.userMessageCollapse;
       const dh = defaults.features?.history;
       const ch = config.features?.history;
       const mergedArtifacts =
@@ -459,6 +464,7 @@ export function mergeWithDefaults(
         ...(mergedStreamAnimation !== undefined ? { streamAnimation: mergedStreamAnimation } : {}),
         ...(mergedAskUserQuestion !== undefined ? { askUserQuestion: mergedAskUserQuestion } : {}),
         ...(mergedHistory !== undefined ? { history: mergedHistory } : {}),
+        ...(duc !== undefined || cuc !== undefined ? { userMessageCollapse: { ...duc, ...cuc } } : {}),
       };
     })(),
     suggestionChips: config.suggestionChips ?? defaults.suggestionChips,

package/src/index-core.ts

@@ -5,6 +5,9 @@ import {
 } from "./runtime/init";
 
 export type {
+  AgentWidgetMessageAuthor,
+  AgentWidgetModelMessageTransform,
+  AgentWidgetModelMessageProjection,
   AgentWidgetDictationConfig,
   DictationProviderConfig,
   DictationPhase,
@@ -46,6 +49,8 @@ export type {
   ArtifactConfigPayload,
   AgentWidgetInitOptions,
   AgentWidgetMessage,
+  AgentWidgetMessageRole,
+  AgentWidgetModelMessageRole,
   AgentWidgetTurnActivity,
   AgentWidgetTurnActivityConfig,
   AgentWidgetLauncherConfig,
@@ -594,6 +599,8 @@ export type {
   SemanticSpacing,
   SemanticTypography,
   ComponentTokens,
+  MessageTokens,
+  MessageGeometryTokens,
   ComposerOverflowMenuTokens,
   TextStyleTokens,
   AttachmentTokens,

package/src/session.resubmit-from.test.ts

@@ -327,3 +327,30 @@ describe("resubmitFrom retry payload fidelity per transport", () => {
     expect(bodies[0].submitMode).toBeUndefined();
   });
 });
+
+describe("human operator resubmission boundary", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    global.fetch = vi.fn(async () => streamResponse()) as unknown as typeof fetch;
+  });
+  it.each(["retry", "edit"] as const)("refuses %s before a human contribution without cancelling or truncating", reason => {
+    const { session, emits } = makeSession();
+    seedTurn(session);
+    session.injectMessage({ id: "human", role: "operator", content: "Refund confirmed", author: { id: "sam", displayName: "Sam", kind: "human" } });
+    const snapshot = session.getMessages();
+    const cancel = vi.spyOn(session, "cancel");
+    emits.length = 0;
+    expect(session.resubmitFrom("u1", { reason, ...(reason === "edit" && { replacement: { text: "Changed", mentionRefs: [], options: {} } }) })).toBe(false);
+    expect(session.getMessages()).toEqual(snapshot);
+    expect(cancel).not.toHaveBeenCalled();
+    expect(emits).toHaveLength(0);
+  });
+
+  it("allows a fresh user turn after the human contribution", () => {
+    const { session } = makeSession();
+    session.injectMessage({ id: "human", role: "operator", content: "Refund confirmed" });
+    session.injectUserMessage({ id: "after", content: "When will it arrive?" });
+    expect(session.resubmitFrom("after", { reason: "retry" })).toBe(true);
+    expect(session.getMessages().some(message => message.id === "human")).toBe(true);
+  });
+});

package/src/session.test.ts

@@ -182,6 +182,16 @@ describe('AgentWidgetSession - Message Injection', () => {
     });
   });
 
+  describe('operator role', () => {
+    it('injects an operator message with its own id prefix', () => {
+      const result = session.injectMessage({ role: 'operator', content: 'Sam from support here.' });
+
+      expect(result.role).toBe('operator');
+      expect(result.id).toMatch(/^operator-/);
+      expect(messages.map((message) => message.role)).toEqual(['operator']);
+    });
+  });
+
   describe('message ordering', () => {
     it('should maintain chronological order', () => {
       session.injectMessage({

package/src/session.ts

@@ -68,7 +68,7 @@ import type {
   ComposerResubmitOptions
 } from "./types";
 import { applyQuoteToContent } from "./utils/composer-quote";
-import { findUserTurnBoundary } from "./utils/resubmit-turn";
+import { canResubmitUserMessage, findUserTurnBoundary } from "./utils/resubmit-turn";
 import { extractComponentDirectiveFromMessage } from "./utils/component-middleware";
 import type { MentionSubmitBundle } from "./utils/context-mention-manager";
 import type { VisitorStore, VisitorStoreChange } from "./utils/visitor-store";
@@ -156,6 +156,7 @@ const CONNECTION_CONFIG_KEYS = [
   "parserType",
   "contextProviders",
   "requestMiddleware",
+  "modelMessageTransform",
   "customFetch",
   "backgroundConversations",
   "parseSSEEvent",
@@ -2500,7 +2501,7 @@ export class AgentWidgetSession {
         ? generateUserMessageId()
         : role === "assistant"
           ? generateAssistantMessageId()
-          : `system-${Date.now()}-${Math.random().toString(16).slice(2)}`);
+          : `${role === "operator" ? "operator" : "system"}-${Date.now()}-${Math.random().toString(16).slice(2)}`);
 
     return {
       id: messageId,
@@ -2515,7 +2516,8 @@ export class AgentWidgetSession {
       ...(voiceProcessing !== undefined && { voiceProcessing }),
       ...(voiceCaption && { voiceCaption }),
       ...(rawContent !== undefined && { rawContent }),
-      ...(options.dispatchError !== undefined && { dispatchError: options.dispatchError })
+      ...(options.dispatchError !== undefined && { dispatchError: options.dispatchError }),
+      ...(options.author !== undefined && { author: { ...options.author } })
     };
 
   }
@@ -3015,14 +3017,15 @@ export class AgentWidgetSession {
    * the new attempt gets fresh message ids.
    *
    * Returns false when the id is unknown, is not a user message, or the rebuilt
-   * turn would carry no content; nothing is truncated in that case.
+   * turn would carry no content, or truncation would remove an operator reply;
+   * nothing is truncated in those cases.
    */
   public resubmitFrom(
     messageId: string,
     options: ComposerResubmitOptions
   ): boolean {
     const boundary = findUserTurnBoundary(this.messages, messageId);
-    if (!boundary) return false;
+    if (!boundary || !canResubmitUserMessage(this.messages, messageId)) return false;
 
     // Operate on the STORED message, never a caller-held object: appendMessage
     // keeps a copy (see `ensureSequence`), so the array entry is the only ref

package/src/styles/widget.css

@@ -2171,6 +2171,13 @@
   );
 }
 
+.persona-message-row[data-message-role="operator"] > * {
+  max-width: var(
+    --persona-message-row-max-width,
+    var(--persona-message-operator-max-width, var(--persona-message-assistant-max-width, 85%))
+  );
+}
+
 .persona-message-row[data-message-width="content"] > * {
   flex: 0 1 auto;
 }
@@ -3086,10 +3093,68 @@
   box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
+/* Operator bubble: a human on the agent's side (role "operator"). Renders on
+   the assistant's side; V4 tints the container with the primary, V5 outlines it. */
+.persona-message-operator-bubble {
+  border-radius: var(--persona-components-message-operator-borderRadius, var(--persona-radius-lg, 0.5rem));
+  border-color: var(--persona-components-message-operator-border, var(--persona-border, #e5e7eb));
+  border-width: var(--persona-components-message-operator-borderWidth, 1px);
+}
+
+[data-persona-root] .persona-message-operator-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-components-message-operator-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
 [data-persona-root] .persona-message-user-bubble.persona-shadow-sm {
   box-shadow: var(--persona-message-user-shadow);
 }
 
+/* Long user message collapse (features.userMessageCollapse). The region clips
+   without becoming a scroller (overflow: clip), so the full text stays in the
+   DOM for find, copy and screen readers with no nested scroll area. The fade
+   is a mask rather than a gradient overlay, so it works on any bubble fill in
+   light and dark schemes; the toggle inherits the bubble's text color. */
+.persona-user-collapse-region[data-persona-user-collapse="collapsed"] {
+  max-height: var(--persona-user-collapse-max-height, 240px);
+  overflow: clip;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--persona-user-collapse-fade-height, 48px)), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--persona-user-collapse-fade-height, 48px)), transparent);
+}
+
+.persona-user-collapse-toggle {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.25rem;
+  padding: 0.125rem 0;
+  border: 0;
+  background: none;
+  color: var(--persona-user-collapse-toggle-fg, inherit);
+  font-family: inherit;
+  font-size: var(--persona-user-collapse-toggle-font-size, 0.8125rem);
+  font-weight: var(--persona-user-collapse-toggle-font-weight, 600);
+  line-height: 1.25rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color 150ms ease;
+}
+
+.persona-user-collapse-toggle:hover {
+  text-decoration-color: currentColor;
+}
+
+.persona-user-collapse-toggle:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .persona-user-collapse-toggle {
+    transition: none;
+  }
+}
+
 [data-persona-root] .persona-tool-bubble.persona-shadow-sm {
   box-shadow: var(--persona-tool-bubble-shadow);
 }
@@ -3244,7 +3309,8 @@
   text-decoration: underline;
 }
 
-[data-persona-root] .persona-message-assistant-bubble a {
+[data-persona-root] .persona-message-assistant-bubble a,
+[data-persona-root] .persona-message-operator-bubble a {
   color: var(--persona-md-link-color, var(--persona-accent, #0f0f0f));
 }
 
@@ -3329,6 +3395,8 @@
 
 .persona-message-assistant-bubble p,
 .persona-message-assistant-bubble li,
+.persona-message-operator-bubble p,
+.persona-message-operator-bubble li,
 .persona-error-detail p,
 .persona-error-detail li {
   color: inherit;
@@ -4847,6 +4915,16 @@
   text-align: center;
 }
 
+/* A pending approval below the fold: the control widens to a labelled pill.
+   Unset approval tokens keep the pill's own colors. */
+[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-approval] {
+  border-color: var(--persona-scroll-to-bottom-approval-border, var(--persona-scroll-to-bottom-border, var(--persona-primary, #111827)));
+  background: var(--persona-scroll-to-bottom-approval-bg, var(--persona-scroll-to-bottom-bg, var(--persona-button-primary-bg, var(--persona-accent, #0f0f0f))));
+  color: var(--persona-scroll-to-bottom-approval-fg, var(--persona-scroll-to-bottom-fg, var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff))));
+  font-weight: var(--persona-scroll-to-bottom-approval-font-weight, 500);
+  white-space: nowrap;
+}
+
 [data-persona-root] .persona-scroll-to-bottom-indicator:hover {
   opacity: 0.92;
 }

package/src/theme-reference.ts

@@ -144,6 +144,8 @@ export const THEME_TOKEN_DOCS = {
         user: 'background, text, borderRadius, shadow.',
         assistant:
           'background, text, borderRadius, border (optional), shadow (optional).',
+        operator:
+          'Human operator bubble (role "operator", e.g. a support takeover), on the assistant side. background (default: container tinted 6% with the primary), text (semantic.colors.text), borderRadius, border (container tinted 20% with the primary), borderWidth (1px), shadow, plus padding, maxWidth, fontSize, fontFamily, lineHeight. V5 outlines it instead: transparent background, semantic.colors.border border.',
       },
       markdown: {
         description: 'Markdown rendering in messages and artifact pane.',
@@ -169,7 +171,7 @@ export const THEME_TOKEN_DOCS = {
       askUserQuestion: 'sheet (background, border, shadow), pill (background, foreground, borderRadius, selectedBackground, selectedForeground), customInput.background. Local features.askUserQuestion.styles still wins; navigation, labels and slide timing remain feature config.',
       attachment: 'image (background, border).',
       scrollToBottom:
-        'Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize.',
+        'Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize; approval (background, foreground, border, fontWeight) for the labelled "Approval needed" state, falling back to the control colors.',
       toolBubble: 'shadow, background, borderColor, borderWidth, borderRadius; header (background, foreground, padding), content (background, foreground, padding), codeBlock (background, foreground, borderColor), toggleForeground, labelForeground, loading (primary, secondary, duration). Applies to card and activity-row variants without changing their distinct defaults. CSS duration uses ms/s; legacy numeric milliseconds must convert explicitly. Theme content.padding precedes activity.bodyPadding/toolBubble.bodyPadding fallbacks; explicit legacy axes override only their axis.',
       scrollbar:
         'Shared scrollbar appearance for every scroller: thumb (default semantic.colors.border), track (default transparent).',
@@ -248,7 +250,7 @@ export const THEME_TOKEN_DOCS = {
       description:
         'Shared transcript + event-stream jump-to-latest affordance.',
       properties:
-        'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only). Defaults: enabled=true, iconName="arrow-down", label="".',
+        'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only), features.scrollToBottom.approvalLabel (shown while a pending approval is below the fold; empty string keeps the regular control). Defaults: enabled=true, iconName="arrow-down", label="", approvalLabel="Approval needed".',
     },
     toolCall: {
       description:
@@ -325,7 +327,7 @@ export const THEME_TOKEN_DOCS = {
       header:
         '"default" | "minimal". Options: showIcon, showTitle, showSubtitle, showCloseButton, showClearChat.',
       messages:
-        '"bubble" | "flat" | "minimal". Options: groupConsecutive, avatar (show, position, userAvatar, assistantAvatar), timestamp (show, position).',
+        '"bubble" | "flat" | "minimal". Options: groupConsecutive, avatar (show, position, userAvatar, assistantAvatar, operatorAvatar), timestamp (show, position, format).',
     },
     statusIndicator: {
       description: 'Status text shown below the composer.',

package/src/types/theme.ts

@@ -530,6 +530,22 @@ export interface MessageActionsTokens {
   borderRadius?: TokenReference<'radius'>;
 }
 
+/**
+ * Long user message collapse (`features.userMessageCollapse`). Every key is
+ * optional; unset, the fade and the toggle follow the user bubble's own text
+ * color and type, so they already work on any fill in light and dark schemes.
+ */
+export interface UserMessageCollapseTokens {
+  /** Height of the bottom fade on a collapsed bubble. @default "48px" */
+  fadeHeight?: string;
+  /** "Show more" / "Show less" text color. Defaults to the user bubble text color. */
+  toggleForeground?: TokenReference<'color'>;
+  /** Toggle label type size. @default "0.8125rem" */
+  toggleFontSize?: string;
+  /** Toggle label weight. @default "600" */
+  toggleFontWeight?: string;
+}
+
 /**
  * Bubble geometry and type, per role. Every key is unset by default and each
  * one falls back to the value the message layout preset already produced, so
@@ -580,6 +596,27 @@ export interface MessageTokens {
     /** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
     shadow?: string;
   };
+  /**
+   * Operator bubble: a human speaking on the agent's side (`role: "operator"`).
+   * Renders on the assistant's side. Defaults tint the container with the
+   * theme primary (`--persona-primary`), so `brand` themes follow without
+   * extra config. Geometry keys fall back to the layout preset, not to the
+   * assistant's geometry.
+   */
+  operator?: MessageGeometryTokens & {
+    /** @default "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))" */
+    background?: TokenReference<'color'>;
+    /** @default semantic.colors.text */
+    text?: TokenReference<'color'>;
+    /** @default palette.radius.lg */
+    borderRadius?: TokenReference<'radius'>;
+    /** @default "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))" */
+    border?: TokenReference<'color'>;
+    /** Border width; set to 0px to drop it. @default "1px" */
+    borderWidth?: string;
+    /** Operator bubble box-shadow (token ref or raw CSS, e.g. `none`). */
+    shadow?: string;
+  };
   /** Border color between messages in the thread. */
   border?: TokenReference<'color'>;
 }
@@ -1286,6 +1323,17 @@ export interface ScrollToBottomTokens extends ComponentTokenSet {
     fontSize?: string;
     fontWeight?: string;
   };
+  /**
+   * The labelled "Approval needed" state shown while a pending approval is
+   * below the fold. Omitted values follow the control's own colors, so it
+   * matches the theme until you give it an accent.
+   */
+  approval?: {
+    background?: TokenReference<'color'>;
+    foreground?: TokenReference<'color'>;
+    border?: TokenReference<'color'>;
+    fontWeight?: string;
+  };
 }
 
 /** Visual tokens shared by one suggestion presentation variant. */
@@ -1336,6 +1384,8 @@ export interface ComponentTokens {
   message: MessageTokens;
   /** Hover-revealed per-message action row (copy, vote, read aloud). */
   messageActions?: MessageActionsTokens;
+  /** Fade and "Show more" toggle on collapsed long user messages. */
+  userMessageCollapse?: UserMessageCollapseTokens;
   /** Welcome / intro card shown above the message list. */
   introCard?: IntroCardTokens;
   /** Markdown surfaces (chat + artifact pane). */