@runtypelabs/persona 4.0.0 → 4.2.0

package/src/styles/widget.css

@@ -1621,6 +1621,20 @@
   background-color: rgba(0, 0, 0, 0.02);
 }
 
+/* While a message is still streaming, lock table column widths so incoming rows
+   append without the per-chunk horizontal reflow (Telegram-style space
+   reservation). The class is removed on the final render, relaxing the finished
+   table to natural content-fit widths. overflow-wrap keeps long cell content
+   from spilling past the fixed columns mid-stream. */
+.persona-content-streaming table {
+  table-layout: fixed;
+}
+
+.persona-content-streaming th,
+.persona-content-streaming td {
+  overflow-wrap: break-word;
+}
+
 /* ============================================
    Markdown Horizontal Rule Styles
    ============================================ */
@@ -2391,6 +2405,230 @@
   transform: scale(0.97);
 }
 
+/* ============================================
+   Approval card (default renderer, components/approval-actions.ts)
+   Neutral surface card. Every color is a --persona-* token; the legacy
+   --persona-approval-* shorthands are honored fallback-first so a consumer who
+   themed them still wins, then the new semantic default applies.
+   ============================================ */
+.persona-approval-card {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: var(--persona-approval-bg, var(--persona-surface, #ffffff));
+  border: 0.5px solid var(--persona-approval-border, var(--persona-border, rgba(11, 11, 11, 0.1)));
+  border-radius: 0.75rem;
+  padding: 0.5rem;
+}
+.persona-approval-card.persona-shadow-sm {
+  box-shadow: var(--persona-approval-shadow, 0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.04));
+}
+
+.persona-approval-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: 0.4rem 0.6rem;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: var(--persona-text, #0b0b0b);
+  border-radius: 0.5rem;
+  transition: background 0.12s ease;
+}
+.persona-approval-head:hover { background: var(--persona-container, rgba(11, 11, 11, 0.04)); }
+.persona-approval-head[data-static="true"] { cursor: default; }
+.persona-approval-head[data-static="true"]:hover { background: transparent; }
+
+.persona-approval-logo {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  border: 0.5px solid var(--persona-border, rgba(11, 11, 11, 0.12));
+  border-radius: 6.5px;
+  background: var(--persona-surface, #ffffff);
+  box-shadow: 0 1px 2px 0 rgba(11, 11, 11, 0.08);
+  color: var(--persona-muted, #6b7280);
+  overflow: hidden;
+}
+.persona-approval-logo svg { width: 15px; height: 15px; display: block; }
+
+.persona-approval-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--persona-text, #0b0b0b);
+}
+.persona-approval-title strong { font-weight: 600; }
+
+.persona-approval-toggle {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.25rem;
+  color: var(--persona-muted, #6b7280);
+  vertical-align: middle;
+  transition: transform 0.15s ease;
+}
+.persona-approval-toggle svg { width: 0.85rem; height: 0.85rem; display: block; }
+.persona-approval-head[aria-expanded="false"] .persona-approval-toggle { transform: rotate(-90deg); }
+
+.persona-approval-body {
+  padding: 0.5rem 0.6rem 0.35rem calc(24px + 0.75rem + 0.6rem);
+}
+
+.persona-approval-details {
+  margin: 0 0 0.75rem;
+}
+.persona-approval-details[hidden] { display: none; }
+
+.persona-approval-desc {
+  margin: 0 0 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--persona-muted, #6b7280);
+}
+
+.persona-approval-params {
+  margin: 0;
+  padding: 0.7rem 0.85rem;
+  border-radius: 0.625rem;
+  background: var(--persona-container, rgba(11, 11, 11, 0.04));
+  color: var(--persona-text, #1f2937);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  overflow-x: auto;
+  max-height: 9rem;
+}
+
+.persona-approval-reason {
+  margin: 0 0 0.6rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--persona-muted, #6b7280);
+}
+.persona-approval-reason-label { font-weight: 500; }
+
+.persona-approval-resolved {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0.5rem 0;
+  padding: 0.3rem 0.15rem;
+  font-size: 0.8rem;
+  color: var(--persona-muted, #6b7280);
+}
+.persona-approval-resolved svg { width: 0.95rem; height: 0.95rem; display: block; flex-shrink: 0; }
+.persona-approval-resolved-name { font-weight: 600; }
+
+.persona-approval-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.persona-approval-split { position: relative; display: inline-flex; }
+
+.persona-approval-primary,
+.persona-approval-caret,
+.persona-approval-deny {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  transition: background 0.12s ease, box-shadow 0.12s ease;
+}
+/* Primary anchors to the brand token via the established button-primary pair. */
+.persona-approval-primary {
+  background: var(--persona-approval-approve-bg, var(--persona-button-primary-bg, var(--persona-primary, #111827)));
+  color: var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff));
+  padding: 0 0.75rem;
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+.persona-approval-primary--solo { border-radius: 0.5rem; }
+.persona-approval-caret {
+  position: relative;
+  background: var(--persona-approval-approve-bg, var(--persona-button-primary-bg, var(--persona-primary, #111827)));
+  color: var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff));
+  width: 2rem;
+  justify-content: center;
+  padding: 0;
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+.persona-approval-caret svg { width: 0.95rem; height: 0.95rem; display: block; }
+.persona-approval-caret::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 1px;
+  background: var(--persona-button-primary-fg, #ffffff);
+  opacity: 0.25;
+  transition: opacity 0.12s ease;
+}
+.persona-approval-caret:hover::before,
+.persona-approval-primary:hover + .persona-approval-caret::before { opacity: 0; }
+.persona-approval-primary:hover,
+.persona-approval-caret:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.16); }
+
+.persona-approval-deny {
+  background: var(--persona-approval-deny-bg, var(--persona-container, rgba(11, 11, 11, 0.04)));
+  color: var(--persona-text, #1f2937);
+  padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 0.5px var(--persona-border, rgba(0, 0, 0, 0.1));
+}
+.persona-approval-deny:hover { box-shadow: inset 0 0 0 0.5px var(--persona-border, rgba(0, 0, 0, 0.1)), inset 0 0 0 999px rgba(11, 11, 11, 0.04); }
+
+.persona-approval-menu {
+  width: max-content;
+  max-width: 18rem;
+  box-sizing: border-box;
+  background: var(--persona-surface, #ffffff);
+  border: 0.5px solid var(--persona-border, rgba(11, 11, 11, 0.1));
+  border-radius: 0.625rem;
+  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.12), 0 2px 6px rgba(11, 11, 11, 0.08);
+  padding: 0.25rem;
+  white-space: nowrap;
+}
+.persona-approval-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--persona-text, #1f2937);
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.4rem;
+  text-align: left;
+  transition: background 0.12s ease;
+}
+.persona-approval-menu-item:hover { background: var(--persona-container, rgba(11, 11, 11, 0.06)); }
+.persona-approval-kbd {
+  font-family: inherit;
+  font-size: 0.75rem;
+  line-height: 1;
+  opacity: 0.7;
+  margin-left: 0.25rem;
+}
+.persona-approval-menu-item .persona-approval-kbd { margin-left: auto; }
+
 /* ============================================
    Visibility (Tailwind parity: prefix persona-)
    Shipped widget.css is hand-maintained; these utilities are used in TS but not generated by Tailwind at build time.

package/src/theme-reference.ts

@@ -227,9 +227,9 @@ export const THEME_TOKEN_DOCS = {
     },
     approval: {
       description:
-        'Tool approval bubble styling and behavior. Set to false to disable.',
+        'Tool approval card styling and behavior. Neutral surface card; the primary action anchors to the brand --persona-primary token. Set to false to disable. Set enableAlwaysAllow: true to add the split "Always allow / Allow once" control (needs a backend to persist the policy via onDecision\'s remember).',
       properties:
-        'backgroundColor, borderColor, titleColor, descriptionColor, reasonColor, reasonLabel, approveButtonColor, approveButtonTextColor, denyButtonColor, denyButtonTextColor, parameterBackgroundColor, parameterTextColor, title, approveLabel, denyLabel.',
+        'enableAlwaysAllow, detailsDisplay ("collapsed" | "expanded" | "hidden"), showDetailsLabel, hideDetailsLabel, backgroundColor, borderColor, titleColor, descriptionColor, reasonColor, reasonLabel, approveButtonColor, approveButtonTextColor, denyButtonColor, denyButtonTextColor, parameterBackgroundColor, parameterTextColor, approveLabel, denyLabel, formatDescription. (title no longer renders in the default card; use formatDescription to customize the summary.)',
     },
     copy: {
       description: 'Widget text content.',

package/src/types.ts

@@ -1791,7 +1791,7 @@ export type AgentWidgetStatusIndicatorConfig = {
 export type AgentWidgetVoiceRecognitionConfig = {
   enabled?: boolean;
   pauseDuration?: number;
-  /** Text shown in the user message placeholder while voice is being processed. Default: "🎤 Processing voice..." */
+  /** Text shown in the user message placeholder while voice is being processed. Default: "Processing voice..." */
   processingText?: string;
   /** Text shown in the assistant message if voice processing fails. Default: "Voice processing failed. Please try again." */
   processingErrorText?: string;
@@ -2296,6 +2296,21 @@ export type AgentWidgetApprovalConfig = {
   showDetailsLabel?: string;
   /** Label for the toggle that hides the technical details */
   hideDetailsLabel?: string;
+  /**
+   * Offer an "Always allow" affordance in the default approval bubble.
+   *
+   * Default `false`. When `false`, the bubble shows a single "Allow" (allow
+   * once) plus "Deny". When `true`, the primary action becomes a split control:
+   * "Always allow" (resolves with `{ remember: true }`) with a dropdown for
+   * "Allow once", plus "Deny", and keyboard shortcuts (Enter = Always allow,
+   * Cmd/Ctrl+Enter = Allow once, Esc = Deny).
+   *
+   * Keep this off unless your backend actually persists the don't-ask-again
+   * policy: "Always allow" only resolves the *current* approval — honoring it
+   * for *future* calls is up to your `onDecision` handler (which receives
+   * `options.remember`). Showing it without that wiring would mislead users.
+   */
+  enableAlwaysAllow?: boolean;
   /**
    * Build the user-facing summary line for an approval request. Overrides the
    * default "The assistant wants to use “Tool name”." copy. Return a falsy

package/src/ui.ts

@@ -1,5 +1,6 @@
 import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
 import { resolveSanitizer } from "./utils/sanitize";
+import { stabilizeStreamingTables } from "./utils/streaming-table";
 import { loadMarkdownParsers, getMarkdownParsersSync } from "./markdown-parsers-loader";
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
 import {
@@ -98,6 +99,7 @@ import {
 } from "./suggest-replies-tool";
 import { formatElapsedMs } from "./utils/formatting";
 import { approvalDetailsExpansionState, createApprovalBubble, updateApprovalDetailsUI } from "./components/approval-bubble";
+import { createBuiltInApprovalPlugin } from "./components/approval-actions";
 import { createSuggestions } from "./components/suggestions";
 import { EventStreamBuffer } from "./utils/event-stream-buffer";
 import { EventStreamStore } from "./utils/event-stream-store";
@@ -473,8 +475,12 @@ export const buildPostprocessor = (
       // sanitizer's degraded fallback. Honors `sanitize: false` (pass-through) as before.
       html = sanitize ? sanitize(out) : out;
     } else if (markdownProcessor) {
+      // While streaming, normalize tables-in-progress so they render as a real
+      // <table> from the first row with a stable column count (Telegram-style
+      // space reservation). The final, non-streaming render is left untouched.
+      const source = context.streaming ? stabilizeStreamingTables(nextText) : nextText;
       // Already escapeHtml(text) (single, safe) while parsers are not loaded.
-      const out = markdownProcessor(nextText);
+      const out = markdownProcessor(source);
       html = sanitize && parsersReady ? sanitize(out) : out;
     } else {
       // Plain text: escapeHtml output is inert — never re-sanitize (the second escape).
@@ -537,7 +543,13 @@ export const createAgentExperience = (
 
   // Get plugins for this instance
   const plugins = pluginRegistry.getForInstance(config.plugins);
-  
+
+  // The built-in approval renderer, shaped as a plugin. Resolved as a FALLBACK
+  // (not pushed into `plugins`) so a user `renderApproval` plugin always wins
+  // and a later config-update plugin push can't reorder ahead of it.
+  const { plugin: builtInApprovalPlugin, teardown: teardownBuiltInApprovals } =
+    createBuiltInApprovalPlugin();
+
   // Register components from config
   if (config.components) {
     componentRegistry.registerAll(config.components);
@@ -2738,6 +2750,11 @@ export const createAgentExperience = (
     }
   });
 
+  // Release this widget's pending built-in approval listeners + "Allow once"
+  // popovers if it's destroyed while an approval is still open. Scoped to this
+  // instance's state, so other widgets on the page are unaffected.
+  destroyCallbacks.push(teardownBuiltInApprovals);
+
   // Activate the stream-animation plugin for this widget instance. Plugins
   // with `styles` inject their CSS into the widget root once; plugins with
   // `onAttach` (e.g., glyph-cycle's MutationObserver for real glyph tick
@@ -3413,7 +3430,10 @@ export const createAgentExperience = (
     // interactivity), and idiomorph imports nodes via `document.importNode`,
     // which strips them. So we build the live element, append a stub during
     // morph, and inject the live element afterward.
-    const hasApprovalPlugin = plugins.some((p) => p.renderApproval) && config.approval !== false;
+    // The built-in approval renderer is always available (as a fallback plugin),
+    // so every approval flows through the stub-and-hydrate path whenever
+    // approvals are enabled — a user `renderApproval` plugin just overrides it.
+    const hasApprovalPlugin = config.approval !== false;
     type ApprovalPluginHydrate = {
       messageId: string;
       fingerprint: string;
@@ -3633,7 +3653,8 @@ export const createAgentExperience = (
         // any accordion listeners survive idiomorph's `importNode`. Gate the
         // rebuild on fingerprint so interactive state (e.g. a collapsed
         // accordion) is preserved while the approval stays pending.
-        const approvalPlugin = plugins.find((p) => typeof p.renderApproval === "function");
+        const approvalPlugin =
+          plugins.find((p) => typeof p.renderApproval === "function") ?? builtInApprovalPlugin;
         const lastFp = lastApprovalBubbleFingerprint.get(message.id);
         const needsRebuild = lastFp !== fingerprint;
         let liveBubble: HTMLElement | null = null;

package/src/utils/streaming-table.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import { stabilizeStreamingTables } from "./streaming-table";
+import { createMarkdownProcessor } from "../postprocessors";
+
+describe("stabilizeStreamingTables", () => {
+  it("leaves text without pipes untouched", () => {
+    const md = "# Heading\n\nA paragraph with no tables.";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("does not treat a header-only line as a table (no delimiter yet)", () => {
+    // Ambiguous: could just be inline pipe text. Leave it alone until a
+    // delimiter row starts streaming in.
+    const md = "| Name | Price |";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("completes a partial delimiter row so the table renders immediately", () => {
+    const md = "| Name | Price |\n| --";
+    expect(stabilizeStreamingTables(md)).toBe("| Name | Price |\n| --- | --- |");
+  });
+
+  it("completes a delimiter that is just a leading pipe with one dash", () => {
+    const md = "| A | B | C |\n|-";
+    expect(stabilizeStreamingTables(md)).toBe("| A | B | C |\n| --- | --- | --- |");
+  });
+
+  it("pads a partial trailing row to the header column count", () => {
+    const md = "| Name | Price |\n| --- | --- |\n| Apple";
+    expect(stabilizeStreamingTables(md)).toBe(
+      "| Name | Price |\n| --- | --- |\n| Apple |  |"
+    );
+  });
+
+  it("keeps a complete table stable (idempotent)", () => {
+    const md = "| Name | Price |\n| --- | --- |\n| Apple | $1 |";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+    expect(stabilizeStreamingTables(stabilizeStreamingTables(md))).toBe(md);
+  });
+
+  it("counts columns from a header without outer pipes", () => {
+    const md = "Name | Price\n---";
+    expect(stabilizeStreamingTables(md)).toBe("Name | Price\n| --- | --- |");
+  });
+
+  it("normalizes rows with extra cells down to the header column count", () => {
+    const md = "| A | B |\n| --- | --- |\n| 1 | 2 | 3 |";
+    expect(stabilizeStreamingTables(md)).toBe("| A | B |\n| --- | --- |\n| 1 | 2 |");
+  });
+
+  it("stops the table region at a blank line and leaves following text alone", () => {
+    const md = "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nSome | trailing | text";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("preserves leading prose before a streaming table", () => {
+    const md = "Here you go:\n\n| A | B |\n| -";
+    expect(stabilizeStreamingTables(md)).toBe("Here you go:\n\n| A | B |\n| --- | --- |");
+  });
+
+  it("handles two separate tables in one stream", () => {
+    const md =
+      "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nmiddle\n\n| C | D | E |\n| --";
+    expect(stabilizeStreamingTables(md)).toBe(
+      "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nmiddle\n\n| C | D | E |\n| --- | --- | --- |"
+    );
+  });
+
+  it("preserves alignment-colon delimiters as a valid table start", () => {
+    const md = "| A | B |\n| :-";
+    // Detection accepts colons; the synthesized delimiter normalizes to dashes
+    // (alignment reappears in the untouched final render).
+    expect(stabilizeStreamingTables(md)).toBe("| A | B |\n| --- | --- |");
+  });
+});
+
+describe("stabilizeStreamingTables → marked integration", () => {
+  const md = createMarkdownProcessor();
+
+  it("renders a <table> from a header + partial delimiter that marked alone would not", () => {
+    const partial = "| Name | Price |\n| --";
+
+    // Without stabilization marked sees no complete delimiter → no table.
+    expect(md(partial)).not.toContain("<table");
+
+    const html = md(stabilizeStreamingTables(partial));
+    expect(html).toContain("<table");
+    expect(html).toContain("<th>Name</th>");
+    expect(html).toContain("<th>Price</th>");
+  });
+
+  it("renders a body row for a partial trailing row", () => {
+    const partial = "| Name | Price |\n| --- | --- |\n| Apple";
+    const html = md(stabilizeStreamingTables(partial));
+    expect(html).toContain("<table");
+    expect(html).toContain("<td>Apple</td>");
+    // The padded empty cell keeps the column count stable.
+    expect(html.match(/<td/g)?.length).toBe(2);
+  });
+});

package/src/utils/streaming-table.ts

@@ -0,0 +1,103 @@
+/**
+ * Streaming markdown table stabilizer (Telegram-style space reservation).
+ *
+ * During SSE streaming the full accumulated markdown is re-parsed by `marked`
+ * on every chunk. For GFM tables that produces two jarring jolts:
+ *
+ *  1. The paragraph→table flip. GFM only recognizes a table once the *delimiter*
+ *     row (`| --- | --- |`) has arrived, so a freshly-streamed header line first
+ *     renders as a plain paragraph and then snaps into a `<table>`.
+ *  2. Partial-row flicker. The in-flight last row grows cell-by-cell.
+ *
+ * This module rewrites table-in-progress regions so a real `<table>` renders
+ * from the first row onward with a stable column count: it completes the
+ * delimiter row as soon as it starts streaming and pads the trailing partial
+ * row to the header's column count. Combined with `table-layout: fixed` while
+ * streaming (see `.persona-content-streaming table` in widget.css), columns lock
+ * to even widths so rows append vertically without horizontal reflow.
+ *
+ * It runs ONLY while a message is streaming; the final render uses the real,
+ * untouched `marked` output, so correctness is never affected.
+ */
+
+/**
+ * A GFM delimiter row, full or still streaming in: only delimiter characters
+ * (`-`, `:`, `|`, whitespace) and at least one dash. Matches `|`-led partials
+ * like `| -`, `|--`, `| :--`, and complete rows like `| --- | :--: |`.
+ */
+const DELIMITER_RE = /^\s*\|?[\s:|-]*-[\s:|-]*$/;
+
+/** A candidate table row contains at least one pipe. */
+const hasPipe = (line: string): boolean => line.includes("|");
+
+/** Split a markdown table row into trimmed cell strings, ignoring outer pipes. */
+const splitCells = (line: string): string[] => {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split("|").map((cell) => cell.trim());
+};
+
+/** Render cells back into a normalized, pipe-delimited row. */
+const buildRow = (cells: string[]): string => `| ${cells.join(" | ")} |`;
+
+/** Build a complete delimiter row with the given column count. */
+const buildDelimiter = (cols: number): string =>
+  `| ${Array.from({ length: cols }, () => "---").join(" | ")} |`;
+
+/** Pad (or trim) a row's cells to exactly `cols` columns. */
+const fitCells = (cells: string[], cols: number): string[] => {
+  if (cells.length >= cols) return cells.slice(0, cols);
+  return cells.concat(Array.from({ length: cols - cells.length }, () => ""));
+};
+
+/**
+ * Normalize any streaming-in-progress GFM tables in `markdown` so they render as
+ * complete tables with a stable column count. Returns the input unchanged when
+ * there is nothing to stabilize (cheap fast-path for the common no-table case).
+ */
+export const stabilizeStreamingTables = (markdown: string): string => {
+  if (!markdown || !markdown.includes("|")) return markdown;
+
+  const lines = markdown.split("\n");
+  let changed = false;
+
+  for (let i = 0; i < lines.length - 1; i++) {
+    const header = lines[i];
+    const delimiter = lines[i + 1];
+
+    // A table starts at a header line (has a pipe, is not itself a delimiter)
+    // immediately followed by a delimiter row that is full or still streaming.
+    if (!hasPipe(header) || DELIMITER_RE.test(header)) continue;
+    if (!DELIMITER_RE.test(delimiter)) continue;
+
+    const cols = splitCells(header).length;
+    if (cols < 1) continue;
+
+    // Complete the delimiter to match the header's column count so `marked`
+    // recognizes the table immediately instead of waiting for it to finish.
+    const fullDelimiter = buildDelimiter(cols);
+    if (lines[i + 1] !== fullDelimiter) {
+      lines[i + 1] = fullDelimiter;
+      changed = true;
+    }
+
+    // Normalize body rows (including a partial trailing one) to `cols` columns
+    // so each row occupies its slot instead of growing cell-by-cell. The region
+    // ends at the first blank or pipe-less line.
+    let j = i + 2;
+    for (; j < lines.length; j++) {
+      const row = lines[j];
+      if (row.trim() === "" || !hasPipe(row)) break;
+      const normalized = buildRow(fitCells(splitCells(row), cols));
+      if (lines[j] !== normalized) {
+        lines[j] = normalized;
+        changed = true;
+      }
+    }
+
+    i = j - 1; // resume scanning after this table region
+  }
+
+  return changed ? lines.join("\n") : markdown;
+};

package/src/utils/tokens.ts

@@ -384,22 +384,25 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       icon: 'palette.colors.success.500',
     },
   },
+  // Neutral surface card (components/approval-actions.ts). The primary action
+  // anchors to the brand primary; deny is a neutral tinted button. Consumers who
+  // themed these (or set config.approval.* color overrides) still win.
   approval: {
     requested: {
-      background: 'palette.colors.warning.50',
-      border: 'palette.colors.warning.200',
+      background: 'semantic.colors.surface',
+      border: 'semantic.colors.border',
       text: 'palette.colors.gray.900',
-      shadow: '0 5px 15px rgba(15, 23, 42, 0.08)',
+      shadow: '0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.04)',
     },
     approve: {
-      background: 'palette.colors.success.500',
-      foreground: 'palette.colors.gray.50',
+      background: 'semantic.colors.primary',
+      foreground: 'semantic.colors.textInverse',
       borderRadius: 'palette.radius.md',
       padding: 'semantic.spacing.sm',
     },
     deny: {
-      background: 'palette.colors.error.500',
-      foreground: 'palette.colors.gray.50',
+      background: 'semantic.colors.container',
+      foreground: 'semantic.colors.text',
       borderRadius: 'palette.radius.md',
       padding: 'semantic.spacing.sm',
     },
@@ -681,12 +684,12 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-voice-processing-icon'] = cssVars['--persona-components-voice-processing-icon'] ?? cssVars['--persona-palette-colors-primary-500'];
   cssVars['--persona-voice-speaking-icon'] = cssVars['--persona-components-voice-speaking-icon'] ?? cssVars['--persona-palette-colors-success-500'];
 
-  cssVars['--persona-approval-bg'] = cssVars['--persona-components-approval-requested-background'] ?? cssVars['--persona-palette-colors-warning-50'];
-  cssVars['--persona-approval-border'] = cssVars['--persona-components-approval-requested-border'] ?? cssVars['--persona-palette-colors-warning-200'];
+  cssVars['--persona-approval-bg'] = cssVars['--persona-components-approval-requested-background'] ?? cssVars['--persona-surface'];
+  cssVars['--persona-approval-border'] = cssVars['--persona-components-approval-requested-border'] ?? cssVars['--persona-border'];
   cssVars['--persona-approval-text'] = cssVars['--persona-components-approval-requested-text'] ?? cssVars['--persona-palette-colors-gray-900'];
-  cssVars['--persona-approval-shadow'] = cssVars['--persona-components-approval-requested-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
-  cssVars['--persona-approval-approve-bg'] = cssVars['--persona-components-approval-approve-background'] ?? cssVars['--persona-palette-colors-success-500'];
-  cssVars['--persona-approval-deny-bg'] = cssVars['--persona-components-approval-deny-background'] ?? cssVars['--persona-palette-colors-error-500'];
+  cssVars['--persona-approval-shadow'] = cssVars['--persona-components-approval-requested-shadow'] ?? '0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.04)';
+  cssVars['--persona-approval-approve-bg'] = cssVars['--persona-components-approval-approve-background'] ?? cssVars['--persona-button-primary-bg'];
+  cssVars['--persona-approval-deny-bg'] = cssVars['--persona-components-approval-deny-background'] ?? cssVars['--persona-container'];
 
   cssVars['--persona-attachment-image-bg'] = cssVars['--persona-components-attachment-image-background'] ?? cssVars['--persona-palette-colors-gray-100'];
   cssVars['--persona-attachment-image-border'] = cssVars['--persona-components-attachment-image-border'] ?? cssVars['--persona-palette-colors-gray-200'];