@runtypelabs/persona 4.19.0 → 4.21.0

package/src/session.ts

@@ -1553,6 +1553,7 @@ export class AgentWidgetSession {
 
   /** Conversation-scoped caches that must not leak across records. */
   private resetConversationScopedState(): void {
+    this.historyInternals.setStoredResumableHandle?.(null);
     this.agentExecution = null;
     this.clearArtifactState();
     this.webMcpInflightKeys.clear();
@@ -3341,9 +3342,16 @@ export class AgentWidgetSession {
     }
 
     try {
-      const response = await this.client.resumeFlow(executionId, {
-        [toolName]: answer,
-      });
+      const response = await this.client.resumeFlow(
+        executionId,
+        { [toolName]: answer },
+        {
+          after:
+            this.resumable?.executionId === executionId
+              ? this.resumable.lastEventId
+              : undefined,
+        },
+      );
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => null);
@@ -3566,10 +3574,12 @@ export class AgentWidgetSession {
   /**
    * Resolve one or more parallel local-tool awaits sharing one paused
    * executionId with a SINGLE `/resume` (core#3878); `resolveWebMcpToolCall`
-   * delegates size-1 resolves here after its guards. Each call is executed
-   * against the page registry concurrently: every gated call renders its own
-   * native approval bubble, and a sibling's confirm Promise never blocks
-   * another's execution. Outputs are keyed by per-call `webMcpToolCallId`
+   * delegates size-1 resolves here after its guards. By default each call is
+   * executed against the page registry concurrently: every gated call renders
+   * its own native approval bubble, and a sibling's confirm Promise never
+   * blocks another's execution. With `webmcp.execution: "sequential"` the
+   * calls run one at a time in emission order instead (see the config docs
+   * for when that matters). Outputs are keyed by per-call `webMcpToolCallId`
    * (server prefers it over tool name; name-keying remains the fallback for
    * legacy single/distinct-tool turns), so two calls to the SAME tool no longer
    * collide. The server is tolerant: any call we omit (declined-after-abort,
@@ -3599,111 +3609,125 @@ export class AgentWidgetSession {
     this.webMcpResolveControllers.add(batchController);
     this.setStreaming(true);
 
-    // Phase 1: execute every pending call concurrently. A null result means
-    // the call was deduped, aborted, or threw; it's omitted from the resume and
-    // (per the tolerant server) re-pauses for retry.
-    const executed = await Promise.all(
-      snapshots.map(async (toolMessage) => {
-        const wireToolName = toolMessage.toolCall?.name;
-        const callId = toolMessage.toolCall?.id;
-        if (!wireToolName || !callId) return null;
-
-        const dedupeKey = `${executionId}:${callId}`;
-        if (
-          this.webMcpInflightKeys.has(dedupeKey) ||
-          this.webMcpResolvedKeys.has(dedupeKey) ||
-          this.isSuggestRepliesAlreadyResolved(toolMessage)
-        ) {
-          return null;
-        }
-        this.webMcpInflightKeys.add(dedupeKey);
-        claimedKeys.push(dedupeKey);
-
-        // Clear the awaiting flag and keep the tool bubble running while the
-        // browser-side WebMCP promise is in flight. The initial `step_await`
-        // only means the server paused for a local tool; it is not completion.
-        const startedAt = this.markWebMcpToolRunning(toolMessage);
-
-        // Per-call id wins for resume keying; fall back to the wire tool name
-        // for legacy servers that don't emit `webMcpToolCallId`.
-        const resumeKey =
-          toolMessage.agentMetadata?.webMcpToolCallId ?? wireToolName;
-
-        // Built-in fire-and-forget tool: no bridge, no confirm gate, no
-        // browser-side execution: the chips render from the message list and
-        // the canned output joins the batch's single /resume.
-        if (wireToolName === SUGGEST_REPLIES_TOOL_NAME) {
-          return {
-            dedupeKey,
-            resumeKey,
-            output: suggestRepliesToolResult(),
-            toolMessage,
-            startedAt,
-            completedAt: Date.now(),
-          };
-        }
+    // Phase 1: execute every pending call. A null result means the call was
+    // deduped, aborted, or threw; it's omitted from the resume and (per the
+    // tolerant server) re-pauses for retry.
+    const executeOne = async (
+      toolMessage: AgentWidgetMessage,
+    ): Promise<ExecutedWebMcpTool | null> => {
+      const wireToolName = toolMessage.toolCall?.name;
+      const callId = toolMessage.toolCall?.id;
+      if (!wireToolName || !callId) return null;
+
+      const dedupeKey = `${executionId}:${callId}`;
+      if (
+        this.webMcpInflightKeys.has(dedupeKey) ||
+        this.webMcpResolvedKeys.has(dedupeKey) ||
+        this.isSuggestRepliesAlreadyResolved(toolMessage)
+      ) {
+        return null;
+      }
+      this.webMcpInflightKeys.add(dedupeKey);
+      claimedKeys.push(dedupeKey);
+
+      // Clear the awaiting flag and keep the tool bubble running while the
+      // browser-side WebMCP promise is in flight. The initial `step_await`
+      // only means the server paused for a local tool; it is not completion.
+      const startedAt = this.markWebMcpToolRunning(toolMessage);
+
+      // Per-call id wins for resume keying; fall back to the wire tool name
+      // for legacy servers that don't emit `webMcpToolCallId`.
+      const resumeKey =
+        toolMessage.agentMetadata?.webMcpToolCallId ?? wireToolName;
+
+      // Built-in fire-and-forget tool: no bridge, no confirm gate, no
+      // browser-side execution: the chips render from the message list and
+      // the canned output joins the batch's single /resume.
+      if (wireToolName === SUGGEST_REPLIES_TOOL_NAME) {
+        return {
+          dedupeKey,
+          resumeKey,
+          output: suggestRepliesToolResult(),
+          toolMessage,
+          startedAt,
+          completedAt: Date.now(),
+        };
+      }
 
-        const execPromise = this.client.executeWebMcpToolCall(
-          wireToolName,
-          toolMessage.toolCall?.args,
-          batchController.signal,
-        );
+      const execPromise = this.client.executeWebMcpToolCall(
+        wireToolName,
+        toolMessage.toolCall?.args,
+        batchController.signal,
+      );
 
-        let output: unknown;
-        if (!execPromise) {
-          output = {
-            isError: true,
-            content: [
-              { type: "text", text: "WebMCP not enabled on this widget." },
-            ],
-          };
-        } else {
-          try {
-            output = await execPromise;
-          } catch (error) {
-            const isAbortError =
-              error instanceof Error &&
-              (error.name === "AbortError" ||
-                error.message.includes("aborted") ||
-                error.message.includes("abort"));
-            if (!isAbortError) {
-              this.callbacks.onError?.(
-                error instanceof Error ? error : new Error(String(error)),
-              );
-            }
-            this.markWebMcpToolComplete(
-              toolMessage,
-              buildWebMcpErrorResult(
-                isAbortError
-                  ? "Aborted by cancel()"
-                  : getWebMcpErrorMessage(error),
-              ),
-              startedAt,
+      let output: unknown;
+      if (!execPromise) {
+        output = {
+          isError: true,
+          content: [
+            { type: "text", text: "WebMCP not enabled on this widget." },
+          ],
+        };
+      } else {
+        try {
+          output = await execPromise;
+        } catch (error) {
+          const isAbortError =
+            error instanceof Error &&
+            (error.name === "AbortError" ||
+              error.message.includes("aborted") ||
+              error.message.includes("abort"));
+          if (!isAbortError) {
+            this.callbacks.onError?.(
+              error instanceof Error ? error : new Error(String(error)),
             );
-            // Release the dedupe claim so a re-emit can retry this call.
-            this.webMcpInflightKeys.delete(dedupeKey);
-            return null;
           }
-        }
-        if (batchController.signal.aborted) {
           this.markWebMcpToolComplete(
             toolMessage,
-            buildWebMcpErrorResult("Aborted by cancel()"),
+            buildWebMcpErrorResult(
+              isAbortError
+                ? "Aborted by cancel()"
+                : getWebMcpErrorMessage(error),
+            ),
             startedAt,
           );
+          // Release the dedupe claim so a re-emit can retry this call.
           this.webMcpInflightKeys.delete(dedupeKey);
           return null;
         }
-        return {
-          dedupeKey,
-          resumeKey,
-          output,
+      }
+      if (batchController.signal.aborted) {
+        this.markWebMcpToolComplete(
           toolMessage,
+          buildWebMcpErrorResult("Aborted by cancel()"),
           startedAt,
-          completedAt: Date.now(),
-        };
-      }),
-    );
+        );
+        this.webMcpInflightKeys.delete(dedupeKey);
+        return null;
+      }
+      return {
+        dedupeKey,
+        resumeKey,
+        output,
+        toolMessage,
+        startedAt,
+        completedAt: Date.now(),
+      };
+    };
+
+    // Parallel (default): a gated sibling's approval never blocks another's
+    // execution. Sequential: one at a time in emission order, so tools that
+    // share page state (a canvas, a form) don't interleave; the next call
+    // starts only once the previous one has settled, approval included.
+    let executed: Array<ExecutedWebMcpTool | null>;
+    if (this.config.webmcp?.execution === "sequential") {
+      executed = [];
+      for (const toolMessage of snapshots) {
+        executed.push(await executeOne(toolMessage));
+      }
+    } else {
+      executed = await Promise.all(snapshots.map(executeOne));
+    }
 
     let ready: ExecutedWebMcpTool[] = [];
     try {
@@ -3720,6 +3744,10 @@ export class AgentWidgetSession {
 
       const response = await this.client.resumeFlow(executionId, toolOutputs, {
         signal: batchController.signal,
+        after:
+          this.resumable?.executionId === executionId
+            ? this.resumable.lastEventId
+            : undefined,
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => null);
@@ -3895,7 +3923,13 @@ export class AgentWidgetSession {
     const response = await this.client.resumeFlow(
       executionId,
       { [resumeKey]: output },
-      { signal: options?.signal },
+      {
+        signal: options?.signal,
+        after:
+          this.resumable?.executionId === executionId
+            ? this.resumable.lastEventId
+            : undefined,
+      },
     );
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
@@ -4323,9 +4357,11 @@ export class AgentWidgetSession {
       if (event.status === "connecting") {
         this.setStreaming(true);
       } else if (event.status === "idle" || event.status === "error") {
-        // Graceful terminal or terminal error: the durable turn is over, so
-        // drop the resume handle (no reconnect should arm after this).
-        this.clearResumable();
+        // A client-tool pause is an intentional stream end but NOT a terminal:
+        // retain its cursor so `/client/resume` can attach after the await
+        // frame instead of replaying the whole turn. Real terminals and
+        // ordinary non-durable idles still clear the handle.
+        if (!this.isAwaitPending()) this.clearResumable();
         // Keep the typing indicator up while a WebMCP resolve is still in
         // flight: in a chained turn the intermediate resume stream ends with an
         // idle status, but the successor tool is still executing. The resolve's

package/src/session.webmcp.test.ts

@@ -13,9 +13,10 @@ const makeSession = (overrides?: {
   resumeOk?: boolean;
   isOperational?: boolean;
   executeImpl?: () => Promise<WebMcpToolResult>;
+  webmcp?: Record<string, unknown>;
 }) => {
   const session = new AgentWidgetSession(
-    { apiUrl: "http://test", webmcp: { enabled: true } },
+    { apiUrl: "http://test", webmcp: { enabled: true, ...overrides?.webmcp } },
     {
       onMessagesChanged: () => undefined,
       onStatusChanged: () => undefined,
@@ -949,6 +950,52 @@ describe("AgentWidgetSession: WebMCP parallel batched resume (core#3878)", () =>
     expect(Object.keys(toolOutputs).sort()).toEqual(["toolu_A", "toolu_B"]);
   });
 
+  it("webmcp.execution: 'sequential' runs siblings one at a time, in emission order", async () => {
+    // Paint-style tools share page state (select tool + color, then draw), so
+    // a multi-call turn must not interleave. The second execute must not even
+    // START until the first has resolved; the batch still posts ONE /resume.
+    let releaseA: (r: WebMcpToolResult) => void = () => undefined;
+    let releaseB: (r: WebMcpToolResult) => void = () => undefined;
+    const pA = new Promise<WebMcpToolResult>((r) => (releaseA = r));
+    const pB = new Promise<WebMcpToolResult>((r) => (releaseB = r));
+    const started: string[] = [];
+
+    const { session, resumeSpy } = makeSession({
+      webmcp: { execution: "sequential" },
+    });
+    const client = (session as unknown as { client: Record<string, unknown> })
+      .client;
+    (client.executeWebMcpToolCall as ReturnType<typeof vi.fn>).mockImplementation(
+      (_name: string, args: { sku: string }) => {
+        started.push(args.sku);
+        return args.sku === "SHOE-001" ? pA : pB;
+      },
+    );
+
+    feed(session, parallelAwait("toolu_A", "SHOE-001"));
+    feed(session, parallelAwait("toolu_B", "SHOE-007"));
+    endStream(session);
+    await flushMicrotasks();
+
+    // Only the first call is in flight; the second waits on it.
+    expect(started).toEqual(["SHOE-001"]);
+    expect(resumeSpy).not.toHaveBeenCalled();
+
+    releaseA({ content: [{ type: "text", text: "a" }] });
+    await flushMicrotasks();
+    expect(started).toEqual(["SHOE-001", "SHOE-007"]);
+    expect(resumeSpy).not.toHaveBeenCalled();
+
+    releaseB({ content: [{ type: "text", text: "b" }] });
+    await flushMicrotasks();
+    expect(resumeSpy).toHaveBeenCalledTimes(1);
+    const toolOutputs = (resumeSpy.mock.calls[0]! as unknown[])[1] as Record<
+      string,
+      unknown
+    >;
+    expect(Object.keys(toolOutputs).sort()).toEqual(["toolu_A", "toolu_B"]);
+  });
+
   it("records elapsed time for each resolved tool in a batched WebMCP resume", async () => {
     vi.useFakeTimers();
     vi.setSystemTime(1_000);

package/src/styles/widget-styles.test.ts

@@ -585,6 +585,38 @@ describe("overflow menu row shading", () => {
     );
     expect(widgetCss).toContain(".persona-composer-overflow-menu__slot:hover");
   });
+
+  it("reads every overflowMenu token as a full path over the stock fallback", () => {
+    const at = widgetCss.indexOf(".persona-composer-overflow-menu {");
+    expect(at, "overflow menu panel rule not found").toBeGreaterThan(-1);
+    const panel = widgetCss.slice(at, widgetCss.indexOf("}", at));
+
+    expect(panel).toContain(
+      "--persona-components-composer-overflowMenu-background,"
+    );
+    expect(panel).toContain("var(--persona-surface, #ffffff)");
+    expect(panel).toContain(
+      "--persona-components-composer-overflowMenu-borderColor,"
+    );
+    expect(panel).toContain("var(--persona-border, #e5e7eb)");
+    expect(panel).toContain(
+      "--persona-components-composer-overflowMenu-borderRadius,"
+    );
+    expect(panel).toContain(
+      "--persona-components-composer-overflowMenu-foreground,"
+    );
+    expect(panel).toContain(
+      "--persona-components-composer-overflowMenu-shadow,"
+    );
+  });
+
+  it("keeps the portaled panel rule unprefixed", () => {
+    // createPopover mounts the panel outside the widget root, so a
+    // `[data-persona-root]` prefix would never match it.
+    expect(widgetCss).not.toContain(
+      "[data-persona-root] .persona-composer-overflow-menu"
+    );
+  });
 });
 
 describe("composer control focus rings", () => {
@@ -658,7 +690,11 @@ describe("model picker chevron", () => {
 
   it("colors the chevron from the theme token, never a baked-in hex", () => {
     const rule = ruleFor(".persona-composer-model-picker-chevron");
-    expect(rule).toContain("background-color: var(--persona-button-ghost-fg");
+    // Same chain as the label, so the glyph and the text never diverge.
+    expect(rule).toContain(
+      "--persona-components-composer-modelPicker-labelColor"
+    );
+    expect(rule).toContain("var(--persona-button-ghost-fg");
     // The mask only needs opaque alpha, so the SVG's own stroke is not a color.
     expect(rule).toContain("mask-image");
     expect(rule).toContain("-webkit-mask-image");
@@ -840,6 +876,52 @@ describe("model picker popover", () => {
   });
 });
 
+describe("model picker closed control surface", () => {
+  const ruleFor = (selector: string): string => {
+    const at = widgetCss.indexOf(selector);
+    expect(at, `selector not found: ${selector}`).toBeGreaterThan(-1);
+    return widgetCss.slice(at, widgetCss.indexOf("}", at));
+  };
+
+  it("reads the surface tokens over the ghost button fallbacks", () => {
+    // One vocabulary for both presentations: the native select and the popover
+    // trigger share this rule, so a page that stays native still themes.
+    const rule = ruleFor("[data-persona-root] .persona-composer-model-picker {");
+    expect(rule).toContain(
+      "--persona-components-composer-modelPicker-background,"
+    );
+    expect(rule).toContain("var(--persona-button-ghost-bg, transparent)");
+    expect(rule).toContain(
+      "--persona-components-composer-modelPicker-borderRadius,"
+    );
+    expect(rule).toContain("var(--persona-button-ghost-radius");
+    expect(rule).toContain(
+      "--persona-components-composer-modelPicker-labelColor,"
+    );
+    expect(rule).toContain("var(--persona-button-ghost-fg");
+  });
+
+  it("draws borderColor as an inset ring so the control never resizes", () => {
+    // A real border would eat 1px of the content box under `border-box` sizing
+    // and shift the label on every theme that leaves the token unset.
+    const rule = ruleFor("[data-persona-root] .persona-composer-model-picker {");
+    expect(rule).toContain("border: none");
+    expect(rule).toContain(
+      "box-shadow: inset 0 0 0 1px\n    var(--persona-components-composer-modelPicker-borderColor, transparent)"
+    );
+  });
+
+  it("keeps hover on its own token so a themed fill survives the pointer", () => {
+    const rule = ruleFor(
+      "[data-persona-root] .persona-composer-model-picker:hover:not(:disabled) {"
+    );
+    expect(rule).toContain(
+      "--persona-components-composer-modelPicker-hoverBackground,"
+    );
+    expect(rule).toContain("var(--persona-button-ghost-hover-bg");
+  });
+});
+
 describe("composer motion", () => {
   /** Every `@media (prefers-reduced-motion: no-preference)` block, joined. */
   const reducedMotionSafeCss = (): string => {

package/src/styles/widget.css

@@ -1371,7 +1371,8 @@
  *
  * The panel is mounted by createPopover next to the widget root (or inside the
  * shadow root), so its rules are deliberately un-prefixed by
- * `[data-persona-root]` and must stand on their own. */
+ * `[data-persona-root]` and must stand on their own. It sits outside the themed
+ * mount, so the menu forwards its configured tokens onto the panel on open. */
 .persona-composer-overflow-menu {
   display: flex;
   flex-direction: column;
@@ -1380,11 +1381,27 @@
   max-height: 320px;
   overflow-y: auto;
   padding: 4px;
-  border-radius: var(--persona-radius-lg, 0.5rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
-  background: var(--persona-surface, #ffffff);
-  color: var(--persona-text, #111827);
-  box-shadow: var(--persona-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
+  border-radius: var(
+    --persona-components-composer-overflowMenu-borderRadius,
+    var(--persona-radius-lg, 0.5rem)
+  );
+  border: 1px solid
+    var(
+      --persona-components-composer-overflowMenu-borderColor,
+      var(--persona-border, #e5e7eb)
+    );
+  background: var(
+    --persona-components-composer-overflowMenu-background,
+    var(--persona-surface, #ffffff)
+  );
+  color: var(
+    --persona-components-composer-overflowMenu-foreground,
+    var(--persona-text, #111827)
+  );
+  box-shadow: var(
+    --persona-components-composer-overflowMenu-shadow,
+    var(--persona-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12))
+  );
   font-family: var(--persona-font-family, inherit);
 }
 
@@ -1598,9 +1615,22 @@
   padding-inline-start: 0.625rem;
   padding-inline-end: 1.75rem;
   border: none;
-  border-radius: var(--persona-button-ghost-radius, var(--persona-radius-md, 0.375rem));
-  background-color: var(--persona-button-ghost-bg, transparent);
-  color: var(--persona-button-ghost-fg, var(--persona-text, #111827));
+  border-radius: var(
+    --persona-components-composer-modelPicker-borderRadius,
+    var(--persona-button-ghost-radius, var(--persona-radius-md, 0.375rem))
+  );
+  background-color: var(
+    --persona-components-composer-modelPicker-background,
+    var(--persona-button-ghost-bg, transparent)
+  );
+  color: var(
+    --persona-components-composer-modelPicker-labelColor,
+    var(--persona-button-ghost-fg, var(--persona-text, #111827))
+  );
+  /* A ring, not a border: `border-box` sizing would pull the label in by 1px on
+     every theme that never sets the token. */
+  box-shadow: inset 0 0 0 1px
+    var(--persona-components-composer-modelPicker-borderColor, transparent);
   font-family: inherit;
   font-size: 0.8125rem;
   cursor: pointer;
@@ -1616,16 +1646,19 @@
   text-align: start;
 }
 
-/* The chevron is a MASK, not a data-URI stroke color: the fill comes from the
-   ghost foreground token, so it themes with every other composer glyph. Same
-   Lucide `chevron-down` geometry as the icon registry draws. */
+/* The chevron is a MASK, not a data-URI stroke color: the fill follows the
+   closed control's own text color, so the glyph and the label never diverge.
+   Same Lucide `chevron-down` geometry as the icon registry draws. */
 .persona-composer-model-picker-chevron {
   justify-self: end;
   margin-inline-end: 0.625rem;
   width: 0.875rem;
   height: 0.875rem;
   pointer-events: none;
-  background-color: var(--persona-button-ghost-fg, var(--persona-text, #111827));
+  background-color: var(
+    --persona-components-composer-modelPicker-labelColor,
+    var(--persona-button-ghost-fg, var(--persona-text, #111827))
+  );
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
@@ -1653,7 +1686,10 @@
 }
 
 [data-persona-root] .persona-composer-model-picker:hover:not(:disabled) {
-  background-color: var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.05));
+  background-color: var(
+    --persona-components-composer-modelPicker-hoverBackground,
+    var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.05))
+  );
 }
 
 [data-persona-root] .persona-composer-model-picker:disabled {

package/src/theme-reference.ts

@@ -173,7 +173,7 @@ export const THEME_TOKEN_DOCS = {
         'Shared scrollbar appearance for every scroller: thumb (default semantic.colors.border), track (default transparent).',
       reasoningBubble: 'shadow: reasoning/thinking row box-shadow.',
       composer:
-        'Message input form: shadow (box-shadow), borderColor, padding (form inset), gap (textarea row to actions row), fontSize and lineHeight (textarea type), controlSize (edge of every icon control in the action row: attachment, mention, mic, action buttons, overflow trigger, icon-mode send; default 40px) and controlIconSize (glyph inside them, default 24px). Per-control config keys (sendButton.size, voiceRecognition.iconSize) override controlSize; coarse-pointer devices floor the hit area at 40px. overlayBand paints the band behind an overlaid footer (composer.placement: "overlay"). segmented styles a segmented mode-group track (trackBackground, trackBorderRadius, padding, activeBackground, activeForeground, activeShadow, inactiveForeground, itemPadding); every key is optional and the stylesheet owns the defaults. modelPicker styles the popover model picker (menuBackground, menuBorderRadius, rowHoverBackground, labelColor, descriptionColor, suffixColor), also all optional.',
+        'Message input form: shadow (box-shadow), borderColor, padding (form inset), gap (textarea row to actions row), fontSize and lineHeight (textarea type), controlSize (edge of every icon control in the action row: attachment, mention, mic, action buttons, overflow trigger, icon-mode send; default 40px) and controlIconSize (glyph inside them, default 24px). Per-control config keys (sendButton.size, voiceRecognition.iconSize) override controlSize; coarse-pointer devices floor the hit area at 40px. overlayBand paints the band behind an overlaid footer (composer.placement: "overlay"). segmented styles a segmented mode-group track (trackBackground, trackBorderRadius, padding, activeBackground, activeForeground, activeShadow, inactiveForeground, itemPadding); every key is optional and the stylesheet owns the defaults. modelPicker styles the model picker (background, hoverBackground, borderColor, borderRadius and labelColor on the closed control, which the native select and the popover trigger share; menuBackground, menuBorderRadius, rowHoverBackground, descriptionColor and suffixColor on the popover only), also all optional. overflowMenu styles the composer overflow "+" menu panel (background, borderColor, borderRadius, foreground, shadow), also all optional.',
       artifact:
         'toolbar (icon styling, copy menu), tab (background, active states), pane (background, toolbarBackground).',
     },