@runtypelabs/persona 3.29.1 → 3.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +15 -2547
  2. package/dist/animations/glyph-cycle.d.cts +1 -1
  3. package/dist/animations/glyph-cycle.d.ts +1 -1
  4. package/dist/animations/{types-B_Qazlm4.d.cts → types-quh7NmYD.d.cts} +9 -0
  5. package/dist/animations/{types-B_Qazlm4.d.ts → types-quh7NmYD.d.ts} +9 -0
  6. package/dist/animations/wipe.d.cts +1 -1
  7. package/dist/animations/wipe.d.ts +1 -1
  8. package/dist/codegen.cjs +6 -6
  9. package/dist/codegen.js +4 -4
  10. package/dist/index.cjs +50 -50
  11. package/dist/index.cjs.map +1 -1
  12. package/dist/index.d.cts +164 -7
  13. package/dist/index.d.ts +164 -7
  14. package/dist/index.global.js +60 -60
  15. package/dist/index.global.js.map +1 -1
  16. package/dist/index.js +49 -49
  17. package/dist/index.js.map +1 -1
  18. package/dist/launcher.global.js +2 -2
  19. package/dist/launcher.global.js.map +1 -1
  20. package/dist/plugin-kit.cjs +1 -0
  21. package/dist/plugin-kit.d.cts +98 -0
  22. package/dist/plugin-kit.d.ts +98 -0
  23. package/dist/plugin-kit.js +1 -0
  24. package/dist/smart-dom-reader.d.cts +157 -4
  25. package/dist/smart-dom-reader.d.ts +157 -4
  26. package/dist/theme-editor.cjs +40 -40
  27. package/dist/theme-editor.d.cts +161 -6
  28. package/dist/theme-editor.d.ts +161 -6
  29. package/dist/theme-editor.js +40 -40
  30. package/dist/theme-reference.cjs +1 -1
  31. package/dist/theme-reference.d.cts +2 -0
  32. package/dist/theme-reference.d.ts +2 -0
  33. package/dist/theme-reference.js +1 -1
  34. package/dist/widget.css +19 -0
  35. package/package.json +8 -2
  36. package/src/client.ts +6 -0
  37. package/src/components/approval-bubble.test.ts +320 -0
  38. package/src/components/approval-bubble.ts +190 -20
  39. package/src/components/launcher.ts +6 -3
  40. package/src/components/panel.ts +7 -1
  41. package/src/components/tool-bubble.test.ts +39 -0
  42. package/src/components/tool-bubble.ts +4 -0
  43. package/src/defaults.ts +14 -0
  44. package/src/generated/runtype-openapi-contract.ts +4 -0
  45. package/src/index-core.ts +1 -0
  46. package/src/plugin-kit.test.ts +230 -0
  47. package/src/plugin-kit.ts +294 -0
  48. package/src/plugins/types.ts +49 -2
  49. package/src/session.test.ts +161 -0
  50. package/src/session.ts +41 -3
  51. package/src/styles/widget.css +19 -0
  52. package/src/theme-editor/preview-utils.test.ts +10 -0
  53. package/src/theme-editor/preview-utils.ts +29 -1
  54. package/src/theme-editor/sections.test.ts +17 -0
  55. package/src/theme-editor/sections.ts +31 -0
  56. package/src/theme-reference.ts +2 -2
  57. package/src/types/theme.ts +2 -0
  58. package/src/types.ts +109 -2
  59. package/src/ui.approval-plugin.test.ts +204 -0
  60. package/src/ui.scroll.test.ts +383 -0
  61. package/src/ui.ts +539 -56
  62. package/src/utils/auto-follow.test.ts +91 -0
  63. package/src/utils/auto-follow.ts +68 -0
  64. package/src/utils/theme.test.ts +6 -2
  65. package/src/utils/theme.ts +0 -8
  66. package/src/utils/tokens.ts +6 -1
  67. package/src/webmcp-bridge.test.ts +66 -0
  68. package/src/webmcp-bridge.ts +49 -0
@@ -306,6 +306,8 @@ interface ApprovalTokens {
306
306
  background: TokenReference<'color'>;
307
307
  border: TokenReference<'color'>;
308
308
  text: TokenReference<'color'>;
309
+ /** Box-shadow for the approval bubble (token ref or raw CSS, e.g. `none`). */
310
+ shadow: string;
309
311
  };
310
312
  approve: ComponentTokenSet;
311
313
  deny: ComponentTokenSet;
@@ -628,13 +630,59 @@ interface AgentWidgetPlugin {
628
630
  config: AgentWidgetConfig;
629
631
  }) => HTMLElement | null;
630
632
  /**
631
- * Custom renderer for approval bubbles
632
- * Return null to use default renderer
633
+ * Custom renderer for approval bubbles.
634
+ *
635
+ * Return an `HTMLElement` to fully own the approval UI, `defaultRenderer()`
636
+ * to render (or wrap) the built-in bubble, or `null` to fall through to the
637
+ * default. Unlike the built-in bubble — whose Approve/Deny buttons are wired
638
+ * via delegation — a fully custom element resolves the approval by calling
639
+ * the `approve`/`deny` callbacks. Both route through the same path the
640
+ * built-in buttons use (optimistic update, `onDecision`, in-place anchoring).
641
+ *
642
+ * An approval is a single binary gate, so there are exactly two outcomes.
643
+ * Pass `{ remember: true }` to flag a "remember this" affordance (e.g. an
644
+ * "Always allow" button); the current approval resolves identically, but the
645
+ * flag is forwarded to `config.approval.onDecision` so you can persist a
646
+ * don't-ask-again policy for future approvals.
647
+ *
648
+ * `renderApproval` is called again whenever the approval's status changes, so
649
+ * branch on `message.approval?.status` to render the resolved state (and tear
650
+ * down any global listeners you added while pending).
651
+ *
652
+ * @example
653
+ * ```typescript
654
+ * // An alternative prompt: "Always allow" / "Allow once" / "Deny".
655
+ * renderApproval: ({ message, approve, deny }) => {
656
+ * const approval = message.approval;
657
+ * if (!approval || approval.status !== "pending") return null; // default renders resolved state
658
+ * const root = document.createElement("div");
659
+ * root.textContent = `${approval.toolName} requires approval`;
660
+ *
661
+ * const always = document.createElement("button");
662
+ * always.textContent = "Always allow";
663
+ * always.addEventListener("click", () => approve({ remember: true }));
664
+ *
665
+ * const once = document.createElement("button");
666
+ * once.textContent = "Allow once";
667
+ * once.addEventListener("click", () => approve());
668
+ *
669
+ * const no = document.createElement("button");
670
+ * no.textContent = "Deny";
671
+ * no.addEventListener("click", () => deny());
672
+ *
673
+ * root.append(always, once, no);
674
+ * return root;
675
+ * }
676
+ * ```
633
677
  */
634
678
  renderApproval?: (context: {
635
679
  message: AgentWidgetMessage;
636
680
  defaultRenderer: () => HTMLElement;
637
681
  config: AgentWidgetConfig;
682
+ /** Resolve this approval as approved. Pass `{ remember: true }` for an "Always allow" affordance. */
683
+ approve: (options?: AgentWidgetApprovalDecisionOptions) => void;
684
+ /** Resolve this approval as denied. Pass `{ remember: true }` for an "Always deny" affordance. */
685
+ deny: (options?: AgentWidgetApprovalDecisionOptions) => void;
638
686
  }) => HTMLElement | null;
639
687
  /**
640
688
  * Custom renderer for loading indicator
@@ -844,6 +892,7 @@ type RuntypeAgentSSEEvent = {
844
892
  };
845
893
  iteration?: number;
846
894
  parameters?: Record<string, unknown>;
895
+ reason?: string;
847
896
  seq: number;
848
897
  startedAt: string;
849
898
  timeout: number;
@@ -1115,6 +1164,7 @@ type RuntypeFlowSSEEvent = {
1115
1164
  when: string;
1116
1165
  } | {
1117
1166
  executionId?: string;
1167
+ reason?: string;
1118
1168
  seq?: number;
1119
1169
  type: "step_await";
1120
1170
  [key: string]: unknown;
@@ -1446,6 +1496,12 @@ type WebMcpConfirmInfo = {
1446
1496
  toolName: string;
1447
1497
  args: unknown;
1448
1498
  description?: string;
1499
+ /**
1500
+ * Display title the tool declared via the WebMCP spec's
1501
+ * `ToolDescriptor.title` (e.g. `"Add to Cart"`). Absent when the tool
1502
+ * didn't declare one.
1503
+ */
1504
+ title?: string;
1449
1505
  annotations?: {
1450
1506
  readOnlyHint?: boolean;
1451
1507
  untrustedContentHint?: boolean;
@@ -1888,6 +1944,29 @@ type AgentWidgetArtifactsFeature = {
1888
1944
  defaultRenderer: () => HTMLElement;
1889
1945
  }) => HTMLElement | null;
1890
1946
  };
1947
+ /**
1948
+ * How the transcript scrolls while an assistant response streams in.
1949
+ *
1950
+ * - `"follow"` (default): keep the newest content pinned to the bottom of the
1951
+ * viewport, pausing when the user scrolls up and resuming when they return
1952
+ * to the bottom.
1953
+ * - `"anchor-top"`: on send, scroll the user's message near the top of the
1954
+ * viewport and hold it there while the response streams in beneath it
1955
+ * (ChatGPT-style). The transcript never auto-scrolls during streaming.
1956
+ * - `"none"`: never auto-scroll; the scroll-to-bottom affordance is the only
1957
+ * way back to the latest content.
1958
+ */
1959
+ type AgentWidgetScrollMode = "follow" | "anchor-top" | "none";
1960
+ type AgentWidgetScrollBehaviorFeature = {
1961
+ /** Scroll behavior during streamed responses. @default "follow" */
1962
+ mode?: AgentWidgetScrollMode;
1963
+ /**
1964
+ * Gap (px) kept between the anchored user message and the top of the
1965
+ * viewport in `"anchor-top"` mode.
1966
+ * @default 16
1967
+ */
1968
+ anchorTopOffset?: number;
1969
+ };
1891
1970
  type AgentWidgetScrollToBottomFeature = {
1892
1971
  /**
1893
1972
  * When true, Persona shows a scroll-to-bottom affordance when the user breaks
@@ -2151,6 +2230,8 @@ type AgentWidgetFeatureFlags = {
2151
2230
  composerHistory?: boolean;
2152
2231
  /** Shared transcript + event stream scroll-to-bottom affordance. */
2153
2232
  scrollToBottom?: AgentWidgetScrollToBottomFeature;
2233
+ /** Transcript scroll behavior during streamed responses. */
2234
+ scrollBehavior?: AgentWidgetScrollBehaviorFeature;
2154
2235
  /** Collapsed transcript behavior for tool call rows. */
2155
2236
  toolCallDisplay?: AgentWidgetToolCallDisplayFeature;
2156
2237
  /** Collapsed transcript behavior for reasoning rows. */
@@ -2807,6 +2888,22 @@ type TextToSpeechConfig = {
2807
2888
  /** Speech pitch (0 - 2). Default: 1 */
2808
2889
  pitch?: number;
2809
2890
  };
2891
+ /**
2892
+ * Extra context for an approval decision, surfaced to `onDecision` and to the
2893
+ * `approve`/`deny` callbacks passed to the `renderApproval` plugin hook.
2894
+ */
2895
+ type AgentWidgetApprovalDecisionOptions = {
2896
+ /**
2897
+ * The user chose a "remember this" affordance (e.g. an "Always allow"
2898
+ * button) rather than a one-time decision. The widget resolves the *current*
2899
+ * approval identically whether or not this is set — an approval bubble is a
2900
+ * single binary gate (`approved`/`denied`). Persisting a don't-ask-again
2901
+ * policy for *future* approvals (auto-resolving them, or not surfacing them)
2902
+ * is the integrator's responsibility, typically inside `onDecision`.
2903
+ * Defaults to absent/`false`.
2904
+ */
2905
+ remember?: boolean;
2906
+ };
2810
2907
  /**
2811
2908
  * Configuration for tool approval bubbles.
2812
2909
  * Controls styling, labels, and behavior of the approval UI.
@@ -2816,6 +2913,8 @@ type AgentWidgetApprovalConfig = {
2816
2913
  backgroundColor?: string;
2817
2914
  /** Border color of the approval bubble */
2818
2915
  borderColor?: string;
2916
+ /** Box-shadow for the approval bubble; pass `"none"` to remove it. Overrides the default `persona-shadow-sm`. */
2917
+ shadow?: string;
2819
2918
  /** Color for the title text */
2820
2919
  titleColor?: string;
2821
2920
  /** Color for the description text */
@@ -2838,20 +2937,67 @@ type AgentWidgetApprovalConfig = {
2838
2937
  approveLabel?: string;
2839
2938
  /** Label for the deny button */
2840
2939
  denyLabel?: string;
2940
+ /**
2941
+ * Color for the agent-authored reason line (the agent's per-call
2942
+ * justification, shown attributed below the summary when present).
2943
+ */
2944
+ reasonColor?: string;
2945
+ /**
2946
+ * Label prefix for the agent-authored reason line.
2947
+ * Defaults to "Agent's stated reason:".
2948
+ */
2949
+ reasonLabel?: string;
2950
+ /**
2951
+ * How the technical details (the tool's agent-facing description and the
2952
+ * raw parameters JSON) are presented:
2953
+ * - `"collapsed"` (default) — hidden behind a "Show details" toggle
2954
+ * - `"expanded"` — visible, with the toggle available to hide them
2955
+ * - `"hidden"` — never rendered
2956
+ */
2957
+ detailsDisplay?: "collapsed" | "expanded" | "hidden";
2958
+ /** Label for the toggle that reveals the technical details */
2959
+ showDetailsLabel?: string;
2960
+ /** Label for the toggle that hides the technical details */
2961
+ hideDetailsLabel?: string;
2962
+ /**
2963
+ * Build the user-facing summary line for an approval request. Overrides the
2964
+ * default "The assistant wants to use “Tool name”." copy. Return a falsy
2965
+ * value to fall back to the default for that approval. `displayTitle` is
2966
+ * the display name the tool declared via the WebMCP spec's
2967
+ * `ToolDescriptor.title`, when one exists.
2968
+ */
2969
+ formatDescription?: (approval: {
2970
+ toolName: string;
2971
+ toolType?: string;
2972
+ description: string;
2973
+ parameters?: unknown;
2974
+ displayTitle?: string;
2975
+ /**
2976
+ * Agent-authored justification for this specific call, when the agent
2977
+ * provided one. It is the agent's own claim — if you fold it into the
2978
+ * summary, keep it attributed to the agent.
2979
+ */
2980
+ reason?: string;
2981
+ }) => string | undefined;
2841
2982
  /**
2842
2983
  * Custom handler for approval decisions.
2843
2984
  * Return void to let the SDK auto-resolve via the API,
2844
2985
  * or return a Response/ReadableStream for custom handling.
2986
+ *
2987
+ * `options.remember` is `true` when the decision came from a "remember this"
2988
+ * affordance (e.g. an "Always allow" button in a custom `renderApproval`
2989
+ * plugin). Use it to persist a don't-ask-again policy for future approvals;
2990
+ * the current approval resolves the same way regardless.
2845
2991
  */
2846
2992
  onDecision?: (data: {
2847
2993
  approvalId: string;
2848
2994
  executionId: string;
2849
2995
  agentId: string;
2850
2996
  toolName: string;
2851
- }, decision: 'approved' | 'denied') => Promise<Response | ReadableStream<Uint8Array> | void>;
2997
+ }, decision: 'approved' | 'denied', options?: AgentWidgetApprovalDecisionOptions) => Promise<Response | ReadableStream<Uint8Array> | void>;
2852
2998
  };
2853
2999
  type AgentWidgetToolCallConfig$1 = {
2854
- /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
3000
+ /** Box-shadow for tool-call bubbles; pass `"none"` to remove it. Overrides the `components.toolBubble.shadow` token / `--persona-tool-bubble-shadow`. */
2855
3001
  shadow?: string;
2856
3002
  /** Background color of the tool call bubble container. */
2857
3003
  backgroundColor?: string;
@@ -4641,6 +4787,13 @@ type AgentWidgetApproval = {
4641
4787
  toolName: string;
4642
4788
  toolType?: string;
4643
4789
  description: string;
4790
+ /**
4791
+ * Agent-authored justification for this specific call (the agent's own
4792
+ * claim about its intent, extracted server-side from the reserved
4793
+ * `_approvalReason` parameter). Render it attributed to the agent and as
4794
+ * plain text — it is approver context, not a system statement.
4795
+ */
4796
+ reason?: string;
4644
4797
  parameters?: unknown;
4645
4798
  resolvedAt?: number;
4646
4799
  };
@@ -5337,8 +5490,10 @@ type Controller = {
5337
5490
  * Programmatically resolve a pending approval.
5338
5491
  * @param approvalId - The approval ID to resolve
5339
5492
  * @param decision - "approved" or "denied"
5493
+ * @param options - Optional decision context (e.g. `{ remember: true }`),
5494
+ * forwarded to `config.approval.onDecision`.
5340
5495
  */
5341
- resolveApproval: (approvalId: string, decision: 'approved' | 'denied') => Promise<void>;
5496
+ resolveApproval: (approvalId: string, decision: 'approved' | 'denied', options?: AgentWidgetApprovalDecisionOptions) => Promise<void>;
5342
5497
  };
5343
5498
  type AgentWidgetController = Controller;
5344
5499
 
@@ -5385,7 +5540,7 @@ declare const MOCK_WORKSPACE_CONTENT = "\n <div class=\"preview-workspace-con
5385
5540
  */
5386
5541
  declare function buildSrcdoc(mountId: string, shellMode: 'light' | 'dark', docked: boolean, widgetCssPath: string): string;
5387
5542
  type PreviewScene = 'home' | 'conversation' | 'minimized' | 'artifact';
5388
- type PreviewTranscriptEntryPreset = 'user-message' | 'assistant-message' | 'assistant-code-block' | 'assistant-markdown-table' | 'assistant-image' | 'reasoning-streaming' | 'reasoning-complete' | 'tool-running' | 'tool-complete';
5543
+ type PreviewTranscriptEntryPreset = 'user-message' | 'assistant-message' | 'assistant-code-block' | 'assistant-markdown-table' | 'assistant-image' | 'reasoning-streaming' | 'reasoning-complete' | 'tool-running' | 'tool-complete' | 'approval-request';
5389
5544
  declare function getPreviewTranscriptPresetLabel(preset: PreviewTranscriptEntryPreset): string;
5390
5545
  declare function createPreviewTranscriptEntry(preset: PreviewTranscriptEntryPreset, index?: number): AgentWidgetMessage;
5391
5546
  declare function appendPreviewTranscriptEntry(messages: AgentWidgetMessage[], preset: PreviewTranscriptEntryPreset): AgentWidgetMessage[];
@@ -306,6 +306,8 @@ interface ApprovalTokens {
306
306
  background: TokenReference<'color'>;
307
307
  border: TokenReference<'color'>;
308
308
  text: TokenReference<'color'>;
309
+ /** Box-shadow for the approval bubble (token ref or raw CSS, e.g. `none`). */
310
+ shadow: string;
309
311
  };
310
312
  approve: ComponentTokenSet;
311
313
  deny: ComponentTokenSet;
@@ -628,13 +630,59 @@ interface AgentWidgetPlugin {
628
630
  config: AgentWidgetConfig;
629
631
  }) => HTMLElement | null;
630
632
  /**
631
- * Custom renderer for approval bubbles
632
- * Return null to use default renderer
633
+ * Custom renderer for approval bubbles.
634
+ *
635
+ * Return an `HTMLElement` to fully own the approval UI, `defaultRenderer()`
636
+ * to render (or wrap) the built-in bubble, or `null` to fall through to the
637
+ * default. Unlike the built-in bubble — whose Approve/Deny buttons are wired
638
+ * via delegation — a fully custom element resolves the approval by calling
639
+ * the `approve`/`deny` callbacks. Both route through the same path the
640
+ * built-in buttons use (optimistic update, `onDecision`, in-place anchoring).
641
+ *
642
+ * An approval is a single binary gate, so there are exactly two outcomes.
643
+ * Pass `{ remember: true }` to flag a "remember this" affordance (e.g. an
644
+ * "Always allow" button); the current approval resolves identically, but the
645
+ * flag is forwarded to `config.approval.onDecision` so you can persist a
646
+ * don't-ask-again policy for future approvals.
647
+ *
648
+ * `renderApproval` is called again whenever the approval's status changes, so
649
+ * branch on `message.approval?.status` to render the resolved state (and tear
650
+ * down any global listeners you added while pending).
651
+ *
652
+ * @example
653
+ * ```typescript
654
+ * // An alternative prompt: "Always allow" / "Allow once" / "Deny".
655
+ * renderApproval: ({ message, approve, deny }) => {
656
+ * const approval = message.approval;
657
+ * if (!approval || approval.status !== "pending") return null; // default renders resolved state
658
+ * const root = document.createElement("div");
659
+ * root.textContent = `${approval.toolName} requires approval`;
660
+ *
661
+ * const always = document.createElement("button");
662
+ * always.textContent = "Always allow";
663
+ * always.addEventListener("click", () => approve({ remember: true }));
664
+ *
665
+ * const once = document.createElement("button");
666
+ * once.textContent = "Allow once";
667
+ * once.addEventListener("click", () => approve());
668
+ *
669
+ * const no = document.createElement("button");
670
+ * no.textContent = "Deny";
671
+ * no.addEventListener("click", () => deny());
672
+ *
673
+ * root.append(always, once, no);
674
+ * return root;
675
+ * }
676
+ * ```
633
677
  */
634
678
  renderApproval?: (context: {
635
679
  message: AgentWidgetMessage;
636
680
  defaultRenderer: () => HTMLElement;
637
681
  config: AgentWidgetConfig;
682
+ /** Resolve this approval as approved. Pass `{ remember: true }` for an "Always allow" affordance. */
683
+ approve: (options?: AgentWidgetApprovalDecisionOptions) => void;
684
+ /** Resolve this approval as denied. Pass `{ remember: true }` for an "Always deny" affordance. */
685
+ deny: (options?: AgentWidgetApprovalDecisionOptions) => void;
638
686
  }) => HTMLElement | null;
639
687
  /**
640
688
  * Custom renderer for loading indicator
@@ -844,6 +892,7 @@ type RuntypeAgentSSEEvent = {
844
892
  };
845
893
  iteration?: number;
846
894
  parameters?: Record<string, unknown>;
895
+ reason?: string;
847
896
  seq: number;
848
897
  startedAt: string;
849
898
  timeout: number;
@@ -1115,6 +1164,7 @@ type RuntypeFlowSSEEvent = {
1115
1164
  when: string;
1116
1165
  } | {
1117
1166
  executionId?: string;
1167
+ reason?: string;
1118
1168
  seq?: number;
1119
1169
  type: "step_await";
1120
1170
  [key: string]: unknown;
@@ -1446,6 +1496,12 @@ type WebMcpConfirmInfo = {
1446
1496
  toolName: string;
1447
1497
  args: unknown;
1448
1498
  description?: string;
1499
+ /**
1500
+ * Display title the tool declared via the WebMCP spec's
1501
+ * `ToolDescriptor.title` (e.g. `"Add to Cart"`). Absent when the tool
1502
+ * didn't declare one.
1503
+ */
1504
+ title?: string;
1449
1505
  annotations?: {
1450
1506
  readOnlyHint?: boolean;
1451
1507
  untrustedContentHint?: boolean;
@@ -1888,6 +1944,29 @@ type AgentWidgetArtifactsFeature = {
1888
1944
  defaultRenderer: () => HTMLElement;
1889
1945
  }) => HTMLElement | null;
1890
1946
  };
1947
+ /**
1948
+ * How the transcript scrolls while an assistant response streams in.
1949
+ *
1950
+ * - `"follow"` (default): keep the newest content pinned to the bottom of the
1951
+ * viewport, pausing when the user scrolls up and resuming when they return
1952
+ * to the bottom.
1953
+ * - `"anchor-top"`: on send, scroll the user's message near the top of the
1954
+ * viewport and hold it there while the response streams in beneath it
1955
+ * (ChatGPT-style). The transcript never auto-scrolls during streaming.
1956
+ * - `"none"`: never auto-scroll; the scroll-to-bottom affordance is the only
1957
+ * way back to the latest content.
1958
+ */
1959
+ type AgentWidgetScrollMode = "follow" | "anchor-top" | "none";
1960
+ type AgentWidgetScrollBehaviorFeature = {
1961
+ /** Scroll behavior during streamed responses. @default "follow" */
1962
+ mode?: AgentWidgetScrollMode;
1963
+ /**
1964
+ * Gap (px) kept between the anchored user message and the top of the
1965
+ * viewport in `"anchor-top"` mode.
1966
+ * @default 16
1967
+ */
1968
+ anchorTopOffset?: number;
1969
+ };
1891
1970
  type AgentWidgetScrollToBottomFeature = {
1892
1971
  /**
1893
1972
  * When true, Persona shows a scroll-to-bottom affordance when the user breaks
@@ -2151,6 +2230,8 @@ type AgentWidgetFeatureFlags = {
2151
2230
  composerHistory?: boolean;
2152
2231
  /** Shared transcript + event stream scroll-to-bottom affordance. */
2153
2232
  scrollToBottom?: AgentWidgetScrollToBottomFeature;
2233
+ /** Transcript scroll behavior during streamed responses. */
2234
+ scrollBehavior?: AgentWidgetScrollBehaviorFeature;
2154
2235
  /** Collapsed transcript behavior for tool call rows. */
2155
2236
  toolCallDisplay?: AgentWidgetToolCallDisplayFeature;
2156
2237
  /** Collapsed transcript behavior for reasoning rows. */
@@ -2807,6 +2888,22 @@ type TextToSpeechConfig = {
2807
2888
  /** Speech pitch (0 - 2). Default: 1 */
2808
2889
  pitch?: number;
2809
2890
  };
2891
+ /**
2892
+ * Extra context for an approval decision, surfaced to `onDecision` and to the
2893
+ * `approve`/`deny` callbacks passed to the `renderApproval` plugin hook.
2894
+ */
2895
+ type AgentWidgetApprovalDecisionOptions = {
2896
+ /**
2897
+ * The user chose a "remember this" affordance (e.g. an "Always allow"
2898
+ * button) rather than a one-time decision. The widget resolves the *current*
2899
+ * approval identically whether or not this is set — an approval bubble is a
2900
+ * single binary gate (`approved`/`denied`). Persisting a don't-ask-again
2901
+ * policy for *future* approvals (auto-resolving them, or not surfacing them)
2902
+ * is the integrator's responsibility, typically inside `onDecision`.
2903
+ * Defaults to absent/`false`.
2904
+ */
2905
+ remember?: boolean;
2906
+ };
2810
2907
  /**
2811
2908
  * Configuration for tool approval bubbles.
2812
2909
  * Controls styling, labels, and behavior of the approval UI.
@@ -2816,6 +2913,8 @@ type AgentWidgetApprovalConfig = {
2816
2913
  backgroundColor?: string;
2817
2914
  /** Border color of the approval bubble */
2818
2915
  borderColor?: string;
2916
+ /** Box-shadow for the approval bubble; pass `"none"` to remove it. Overrides the default `persona-shadow-sm`. */
2917
+ shadow?: string;
2819
2918
  /** Color for the title text */
2820
2919
  titleColor?: string;
2821
2920
  /** Color for the description text */
@@ -2838,20 +2937,67 @@ type AgentWidgetApprovalConfig = {
2838
2937
  approveLabel?: string;
2839
2938
  /** Label for the deny button */
2840
2939
  denyLabel?: string;
2940
+ /**
2941
+ * Color for the agent-authored reason line (the agent's per-call
2942
+ * justification, shown attributed below the summary when present).
2943
+ */
2944
+ reasonColor?: string;
2945
+ /**
2946
+ * Label prefix for the agent-authored reason line.
2947
+ * Defaults to "Agent's stated reason:".
2948
+ */
2949
+ reasonLabel?: string;
2950
+ /**
2951
+ * How the technical details (the tool's agent-facing description and the
2952
+ * raw parameters JSON) are presented:
2953
+ * - `"collapsed"` (default) — hidden behind a "Show details" toggle
2954
+ * - `"expanded"` — visible, with the toggle available to hide them
2955
+ * - `"hidden"` — never rendered
2956
+ */
2957
+ detailsDisplay?: "collapsed" | "expanded" | "hidden";
2958
+ /** Label for the toggle that reveals the technical details */
2959
+ showDetailsLabel?: string;
2960
+ /** Label for the toggle that hides the technical details */
2961
+ hideDetailsLabel?: string;
2962
+ /**
2963
+ * Build the user-facing summary line for an approval request. Overrides the
2964
+ * default "The assistant wants to use “Tool name”." copy. Return a falsy
2965
+ * value to fall back to the default for that approval. `displayTitle` is
2966
+ * the display name the tool declared via the WebMCP spec's
2967
+ * `ToolDescriptor.title`, when one exists.
2968
+ */
2969
+ formatDescription?: (approval: {
2970
+ toolName: string;
2971
+ toolType?: string;
2972
+ description: string;
2973
+ parameters?: unknown;
2974
+ displayTitle?: string;
2975
+ /**
2976
+ * Agent-authored justification for this specific call, when the agent
2977
+ * provided one. It is the agent's own claim — if you fold it into the
2978
+ * summary, keep it attributed to the agent.
2979
+ */
2980
+ reason?: string;
2981
+ }) => string | undefined;
2841
2982
  /**
2842
2983
  * Custom handler for approval decisions.
2843
2984
  * Return void to let the SDK auto-resolve via the API,
2844
2985
  * or return a Response/ReadableStream for custom handling.
2986
+ *
2987
+ * `options.remember` is `true` when the decision came from a "remember this"
2988
+ * affordance (e.g. an "Always allow" button in a custom `renderApproval`
2989
+ * plugin). Use it to persist a don't-ask-again policy for future approvals;
2990
+ * the current approval resolves the same way regardless.
2845
2991
  */
2846
2992
  onDecision?: (data: {
2847
2993
  approvalId: string;
2848
2994
  executionId: string;
2849
2995
  agentId: string;
2850
2996
  toolName: string;
2851
- }, decision: 'approved' | 'denied') => Promise<Response | ReadableStream<Uint8Array> | void>;
2997
+ }, decision: 'approved' | 'denied', options?: AgentWidgetApprovalDecisionOptions) => Promise<Response | ReadableStream<Uint8Array> | void>;
2852
2998
  };
2853
2999
  type AgentWidgetToolCallConfig$1 = {
2854
- /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
3000
+ /** Box-shadow for tool-call bubbles; pass `"none"` to remove it. Overrides the `components.toolBubble.shadow` token / `--persona-tool-bubble-shadow`. */
2855
3001
  shadow?: string;
2856
3002
  /** Background color of the tool call bubble container. */
2857
3003
  backgroundColor?: string;
@@ -4641,6 +4787,13 @@ type AgentWidgetApproval = {
4641
4787
  toolName: string;
4642
4788
  toolType?: string;
4643
4789
  description: string;
4790
+ /**
4791
+ * Agent-authored justification for this specific call (the agent's own
4792
+ * claim about its intent, extracted server-side from the reserved
4793
+ * `_approvalReason` parameter). Render it attributed to the agent and as
4794
+ * plain text — it is approver context, not a system statement.
4795
+ */
4796
+ reason?: string;
4644
4797
  parameters?: unknown;
4645
4798
  resolvedAt?: number;
4646
4799
  };
@@ -5337,8 +5490,10 @@ type Controller = {
5337
5490
  * Programmatically resolve a pending approval.
5338
5491
  * @param approvalId - The approval ID to resolve
5339
5492
  * @param decision - "approved" or "denied"
5493
+ * @param options - Optional decision context (e.g. `{ remember: true }`),
5494
+ * forwarded to `config.approval.onDecision`.
5340
5495
  */
5341
- resolveApproval: (approvalId: string, decision: 'approved' | 'denied') => Promise<void>;
5496
+ resolveApproval: (approvalId: string, decision: 'approved' | 'denied', options?: AgentWidgetApprovalDecisionOptions) => Promise<void>;
5342
5497
  };
5343
5498
  type AgentWidgetController = Controller;
5344
5499
 
@@ -5385,7 +5540,7 @@ declare const MOCK_WORKSPACE_CONTENT = "\n <div class=\"preview-workspace-con
5385
5540
  */
5386
5541
  declare function buildSrcdoc(mountId: string, shellMode: 'light' | 'dark', docked: boolean, widgetCssPath: string): string;
5387
5542
  type PreviewScene = 'home' | 'conversation' | 'minimized' | 'artifact';
5388
- type PreviewTranscriptEntryPreset = 'user-message' | 'assistant-message' | 'assistant-code-block' | 'assistant-markdown-table' | 'assistant-image' | 'reasoning-streaming' | 'reasoning-complete' | 'tool-running' | 'tool-complete';
5543
+ type PreviewTranscriptEntryPreset = 'user-message' | 'assistant-message' | 'assistant-code-block' | 'assistant-markdown-table' | 'assistant-image' | 'reasoning-streaming' | 'reasoning-complete' | 'tool-running' | 'tool-complete' | 'approval-request';
5389
5544
  declare function getPreviewTranscriptPresetLabel(preset: PreviewTranscriptEntryPreset): string;
5390
5545
  declare function createPreviewTranscriptEntry(preset: PreviewTranscriptEntryPreset, index?: number): AgentWidgetMessage;
5391
5546
  declare function appendPreviewTranscriptEntry(messages: AgentWidgetMessage[], preset: PreviewTranscriptEntryPreset): AgentWidgetMessage[];