@runtypelabs/persona 4.32.1 → 4.33.0

package/src/ui.ts

@@ -112,6 +112,7 @@ import {
   type MessageEditEditor
 } from "./components/message-edit-editor";
 import {
+  canResubmitUserMessage,
   findPrecedingUserMessageId,
   findRetryableAssistantMessageId,
   isEditableUserMessage
@@ -1408,8 +1409,9 @@ export const createAgentExperience = (
   const messageActionCallbacks: MessageActionCallbacks = {
     onCopy: (message: AgentWidgetMessage) => {
       eventBus.emit("message:copy", message);
-      // Send copy feedback to API if in client token mode
-      if (session?.isClientTokenMode()) {
+      // Send copy feedback to API if in client token mode. Operator messages
+      // are host-injected and unknown to the API, so they never report.
+      if (session?.isClientTokenMode() && message.role !== "operator") {
         session.submitMessageFeedback(message.id, 'copy').catch((error) => {
           if (config.debug) {
             // eslint-disable-next-line no-console
@@ -6097,21 +6099,26 @@ export const createAgentExperience = (
     wrapper: HTMLElement,
     role: AgentWidgetMessage["role"]
   ): void => {
+    // Operator rows sit on the assistant's side and share its max width, but
+    // always shrink-wrap: a full-column operator bubble reads as an input.
     const sizingRole = role === "user" ? "user" : "assistant";
     const roleLayout = config.layout?.messages?.[sizingRole];
-    const width = roleLayout?.width ?? "content";
+    const configuredWidth = roleLayout?.width ?? "content";
+    const width = role === "operator" ? "content" : configuredWidth;
     // Only an explicit config value is stamped inline; the 85%/100% defaults
     // live in widget.css so `components.message.<role>.maxWidth` can win.
+    const fullMaxWidth = role === "operator"
+      ? "var(--persona-message-operator-max-width, var(--persona-message-assistant-max-width, 100%))"
+      : `var(--persona-message-${sizingRole}-max-width, 100%)`;
     const maxWidth =
-      roleLayout?.maxWidth ?? (width === "full"
-        ? `var(--persona-message-${sizingRole}-max-width, 100%)`
-        : undefined);
+      roleLayout?.maxWidth ?? (configuredWidth === "full" ? fullMaxWidth : undefined);
 
     wrapper.classList.add("persona-message-row");
     wrapper.classList.remove(
       "persona-message-row-user",
       "persona-message-row-assistant",
       "persona-message-row-system",
+      "persona-message-row-operator",
       "persona-message-width-content",
       "persona-message-width-full"
     );
@@ -6248,6 +6255,10 @@ export const createAgentExperience = (
         ? findRetryableAssistantMessageId(messages)
         : null;
     const editEnabled = actionsCfg?.showEdit === true && actionsCfg.enabled !== false;
+    let lastOperatorIndex = -1;
+    messages.forEach((message, index) => {
+      if (message.role === "operator") lastOperatorIndex = index;
+    });
     const quoteEnabled = actionsCfg?.showQuote === true && actionsCfg.enabled !== false;
     /** The live editor, re-grafted into its morphed wrapper after the pass. */
     let editHydrate: { messageId: string; element: HTMLElement } | null = null;
@@ -6289,7 +6300,7 @@ export const createAgentExperience = (
       );
     };
 
-    messages.forEach((message) => {
+    messages.forEach((message, messageIndex) => {
       if (isDroppedCompletedRow(message)) {
         return;
       }
@@ -6356,7 +6367,7 @@ export const createAgentExperience = (
         isLastAssistant: message.id === lastAssistantId,
         canRegenerate: retryableAssistantId === message.id &&
           (actionsCfg?.showRegenerate === true || message.dispatchError === true),
-        canEdit: editEnabled && isEditableUserMessage(message),
+        canEdit: editEnabled && messageIndex > lastOperatorIndex && isEditableUserMessage(message),
         canQuote:
           quoteEnabled && !message.variant && (message.content?.trim().length ?? 0) > 0,
       };
@@ -6957,10 +6968,23 @@ export const createAgentExperience = (
     // "the assistant is already visibly responding": otherwise the transcript
     // goes blank for the whole tool phase. When those rows are shown, their own
     // bubble carries the loading animation and the standalone dots stay hidden.
+    //
+    // A pending `ask_user_question` call is visible only once its question has
+    // rendered: a plugin bubble mounted for it this pass, or the built-in sheet
+    // mounted for its tool call. Until then (arguments still streaming, a plugin
+    // returning null for a partial payload, the sheet waiting on the pause) it
+    // renders nothing, so it must not hide the dots either.
+    const isUnrenderedAskRow = (msg: AgentWidgetMessage): boolean =>
+      !(msg.toolCall?.id && liveAskToolIds.has(msg.toolCall.id)) &&
+      !askPluginHydrate.some((entry) => entry.messageId === msg.id);
     const isHiddenActivityRow = (msg: AgentWidgetMessage): boolean =>
-      (msg.variant === "tool" && !showToolCalls) ||
-      (msg.variant === "reasoning" && !showReasoning) ||
-      isDroppedCompletedRow(msg);
+      isAskUserQuestionMessage(msg) &&
+      msg.agentMetadata?.askUserQuestionAnswered !== true &&
+      config.features?.askUserQuestion?.enabled !== false
+        ? isUnrenderedAskRow(msg)
+        : (msg.variant === "tool" && !showToolCalls) ||
+          (msg.variant === "reasoning" && !showReasoning) ||
+          isDroppedCompletedRow(msg);
     const hasStreamingAssistantMessage = messages.some(
       (msg) => msg.role === "assistant" && msg.streaming && !isHiddenActivityRow(msg)
     );
@@ -10053,7 +10077,8 @@ export const createAgentExperience = (
   function beginMessageEdit(messageId: string): void {
     if (config.messageActions?.showEdit !== true) return;
     const message = session.getMessages().find((m) => m.id === messageId);
-    if (!message || !isEditableUserMessage(message)) return;
+    if (!message || !isEditableUserMessage(message) ||
+      !canResubmitUserMessage(session.getMessages(), messageId)) return;
     if (editingMessageId === messageId) return;
     cancelMessageEdit();
     editingMessageId = messageId;

package/src/utils/__snapshots__/tokens-parity.test.ts.snap

@@ -120,6 +120,12 @@ exports[`token pipeline parity (golden) > dark + button + input + message compon
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#0044ff",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -670,6 +676,12 @@ exports[`token pipeline parity (golden) > dark + composer model picker closed co
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -1216,6 +1228,12 @@ exports[`token pipeline parity (golden) > dark + composer model picker popover 1
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -1758,6 +1776,12 @@ exports[`token pipeline parity (golden) > dark + composer overlay band + input b
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -2306,6 +2330,12 @@ exports[`token pipeline parity (golden) > dark + composer segmented mode track 1
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -2948,6 +2978,12 @@ exports[`token pipeline parity (golden) > dark + custom conditional aliases (raw
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -3563,6 +3599,12 @@ exports[`token pipeline parity (golden) > dark + custom launcher foreground (sub
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -4171,6 +4213,12 @@ exports[`token pipeline parity (golden) > dark + empty conditional aliases retai
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -4740,6 +4788,12 @@ exports[`token pipeline parity (golden) > dark + explicit header keys beat deriv
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -5283,6 +5337,12 @@ exports[`token pipeline parity (golden) > dark + flat dark surface (white-alpha
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -5823,6 +5883,12 @@ exports[`token pipeline parity (golden) > dark + header background/foreground pa
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -6376,6 +6442,12 @@ exports[`token pipeline parity (golden) > dark + history motion + code block tok
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -6927,6 +6999,12 @@ exports[`token pipeline parity (golden) > dark + intro card kicker typography 1`
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -7475,6 +7553,12 @@ exports[`token pipeline parity (golden) > dark + message geometry + stop button
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-fontFamily": "Georgia, serif",
@@ -8029,6 +8113,12 @@ exports[`token pipeline parity (golden) > dark + non-flat container (hover ancho
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -8561,6 +8651,12 @@ exports[`token pipeline parity (golden) > dark + partial primary palette 1`] = `
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#ff4400",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -9080,6 +9176,12 @@ exports[`token pipeline parity (golden) > dark + radius + typography + spacing p
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "1rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "1rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -9611,6 +9713,12 @@ exports[`token pipeline parity (golden) > default dark theme emits a stable full
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -10148,6 +10256,12 @@ exports[`token pipeline parity (golden) > default light theme emits a stable ful
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -10985,6 +11099,14 @@ exports[`token pipeline parity (golden) > default table exports keep their objec
     },
     "border": "semantic.colors.border",
     "gap": "12px",
+    "operator": {
+      "background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+      "border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+      "borderRadius": "palette.radius.lg",
+      "borderWidth": "1px",
+      "shadow": "palette.shadows.sm",
+      "text": "semantic.colors.text",
+    },
     "user": {
       "background": "palette.colors.primary.500",
       "borderRadius": "palette.radius.lg",
@@ -11244,6 +11366,12 @@ exports[`token pipeline parity (golden) > getActiveTheme layers light overrides
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -11781,6 +11909,12 @@ exports[`token pipeline parity (golden) > light + button + input + message compo
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#0044ff",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -12326,6 +12460,12 @@ exports[`token pipeline parity (golden) > light + composer model picker closed c
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -12867,6 +13007,12 @@ exports[`token pipeline parity (golden) > light + composer model picker popover
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -13404,6 +13550,12 @@ exports[`token pipeline parity (golden) > light + composer overlay band + input
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -13947,6 +14099,12 @@ exports[`token pipeline parity (golden) > light + composer segmented mode track
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -14584,6 +14742,12 @@ exports[`token pipeline parity (golden) > light + custom conditional aliases (ra
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -15194,6 +15358,12 @@ exports[`token pipeline parity (golden) > light + custom launcher foreground (su
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -15797,6 +15967,12 @@ exports[`token pipeline parity (golden) > light + empty conditional aliases reta
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -16361,6 +16537,12 @@ exports[`token pipeline parity (golden) > light + explicit header keys beat deri
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -16899,6 +17081,12 @@ exports[`token pipeline parity (golden) > light + flat dark surface (white-alpha
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -17434,6 +17622,12 @@ exports[`token pipeline parity (golden) > light + header background/foreground p
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -17982,6 +18176,12 @@ exports[`token pipeline parity (golden) > light + history motion + code block to
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -18528,6 +18728,12 @@ exports[`token pipeline parity (golden) > light + intro card kicker typography 1
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -19071,6 +19277,12 @@ exports[`token pipeline parity (golden) > light + message geometry + stop button
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-fontFamily": "Georgia, serif",
@@ -19620,6 +19832,12 @@ exports[`token pipeline parity (golden) > light + non-flat container (hover anch
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -20147,6 +20365,12 @@ exports[`token pipeline parity (golden) > light + partial primary palette 1`] =
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "0.5rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#ff4400",
   "--persona-components-message-user-borderRadius": "0.5rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -20661,6 +20885,12 @@ exports[`token pipeline parity (golden) > light + radius + typography + spacing
   "--persona-components-message-assistant-text": "#111827",
   "--persona-components-message-border": "#e5e7eb",
   "--persona-components-message-gap": "12px",
+  "--persona-components-message-operator-background": "color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "--persona-components-message-operator-border": "color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "--persona-components-message-operator-borderRadius": "1rem",
+  "--persona-components-message-operator-borderWidth": "1px",
+  "--persona-components-message-operator-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "--persona-components-message-operator-text": "#111827",
   "--persona-components-message-user-background": "#171717",
   "--persona-components-message-user-borderRadius": "1rem",
   "--persona-components-message-user-shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -21163,6 +21393,12 @@ exports[`token pipeline parity (golden) > resolveTokens flattens the default the
   "components.message.assistant.text": "color:#111827",
   "components.message.border": "color:#e5e7eb",
   "components.message.gap": "color:12px",
+  "components.message.operator.background": "color:color-mix(in srgb, var(--persona-primary) 6%, var(--persona-container))",
+  "components.message.operator.border": "color:color-mix(in srgb, var(--persona-primary) 20%, var(--persona-container))",
+  "components.message.operator.borderRadius": "color:0.5rem",
+  "components.message.operator.borderWidth": "color:1px",
+  "components.message.operator.shadow": "color:0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "components.message.operator.text": "color:#111827",
   "components.message.user.background": "color:#171717",
   "components.message.user.borderRadius": "color:0.5rem",
   "components.message.user.shadow": "color:0 1px 2px 0 rgb(0 0 0 / 0.05)",