@runtypelabs/persona 1.48.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "1.48.0",
+  "version": "2.0.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/artifacts-session.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from "vitest";
+import { AgentWidgetSession } from "./session";
+
+describe("AgentWidgetSession artifacts", () => {
+  it("merges artifact_start, delta, complete into markdown state", () => {
+    const onArtifactsState = vi.fn();
+    const session = new AgentWidgetSession(
+      {},
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {},
+        onArtifactsState
+      }
+    );
+
+    session.injectTestEvent({
+      type: "artifact_start",
+      id: "a1",
+      artifactType: "markdown",
+      title: "Doc"
+    });
+    expect(onArtifactsState.mock.calls.length).toBe(1);
+    expect(onArtifactsState.mock.calls[0][0].artifacts[0].markdown).toBe("");
+
+    session.injectTestEvent({
+      type: "artifact_delta",
+      id: "a1",
+      artDelta: "# Hello"
+    });
+    expect(onArtifactsState.mock.calls[1][0].artifacts[0].markdown).toBe("# Hello");
+
+    session.injectTestEvent({ type: "artifact_complete", id: "a1" });
+    expect(onArtifactsState.mock.calls[2][0].artifacts[0].status).toBe("complete");
+  });
+
+  it("clearMessages clears artifacts", () => {
+    const onArtifactsState = vi.fn();
+    const session = new AgentWidgetSession(
+      {},
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {},
+        onArtifactsState
+      }
+    );
+    session.injectTestEvent({
+      type: "artifact_start",
+      id: "x",
+      artifactType: "markdown"
+    });
+    session.injectTestEvent({
+      type: "artifact_delta",
+      id: "x",
+      artDelta: "Hi"
+    });
+    expect(session.getArtifacts().length).toBe(1);
+    session.clearMessages();
+    expect(session.getArtifacts().length).toBe(0);
+    const last = onArtifactsState.mock.calls.pop()?.[0];
+    expect(last?.artifacts.length).toBe(0);
+  });
+
+  it("upsertArtifact adds record", () => {
+    const onArtifactsState = vi.fn();
+    const session = new AgentWidgetSession(
+      {},
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {},
+        onArtifactsState
+      }
+    );
+    session.upsertArtifact({ artifactType: "markdown", content: "C" });
+    expect(session.getArtifacts()).toHaveLength(1);
+    expect(session.getArtifacts()[0].markdown).toBe("C");
+  });
+});

package/src/client.test.ts

@@ -653,8 +653,7 @@ describe('AgentWidgetClient - Agent Payload Building', () => {
         systemPrompt: 'You are a test assistant.',
         temperature: 0.7,
         loopConfig: {
-          maxIterations: 3,
-          stopCondition: 'auto',
+          maxTurns: 3,
         },
       },
       agentOptions: {
@@ -679,7 +678,7 @@ describe('AgentWidgetClient - Agent Payload Building', () => {
     expect(capturedPayload.agent.name).toBe('Test Agent');
     expect(capturedPayload.agent.model).toBe('openai:gpt-4o-mini');
     expect(capturedPayload.agent.systemPrompt).toBe('You are a test assistant.');
-    expect(capturedPayload.agent.loopConfig.maxIterations).toBe(3);
+    expect(capturedPayload.agent.loopConfig.maxTurns).toBe(3);
     expect(capturedPayload.messages).toHaveLength(1);
     expect(capturedPayload.messages[0].content).toBe('Hello agent');
     expect(capturedPayload.options.streamResponse).toBe(true);
@@ -735,10 +734,10 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 1,
+        executionId: execId, iteration: 1, maxTurns: 1,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('agent_turn_start', {
@@ -801,11 +800,11 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 2, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 2, startedAt: new Date().toISOString(), seq: 1,
       }),
       // Iteration 1
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 2,
+        executionId: execId, iteration: 1, maxTurns: 2,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('agent_turn_start', {
@@ -826,7 +825,7 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
       }),
       // Iteration 2
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 2, maxIterations: 2,
+        executionId: execId, iteration: 2, maxTurns: 2,
         startedAt: new Date().toISOString(), seq: 7,
       }),
       sseEvent('agent_turn_start', {
@@ -891,10 +890,10 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 2, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 2, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 2,
+        executionId: execId, iteration: 1, maxTurns: 2,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('agent_turn_delta', {
@@ -906,7 +905,7 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
         stopConditionMet: false, completedAt: new Date().toISOString(), seq: 4,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 2, maxIterations: 2,
+        executionId: execId, iteration: 2, maxTurns: 2,
         startedAt: new Date().toISOString(), seq: 5,
       }),
       sseEvent('agent_turn_delta', {
@@ -954,10 +953,10 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 1,
+        executionId: execId, iteration: 1, maxTurns: 1,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('agent_tool_start', {
@@ -1026,10 +1025,10 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 1,
+        executionId: execId, iteration: 1, maxTurns: 1,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('agent_turn_delta', {
@@ -1090,7 +1089,7 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_error', {
         executionId: execId, iteration: 1,
@@ -1129,7 +1128,7 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 2, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 2, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_reflection', {
         executionId: execId, iteration: 1,
@@ -1175,7 +1174,7 @@ describe('AgentWidgetClient - Agent Event Streaming', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_ping', {
         executionId: execId, timestamp: new Date().toISOString(), seq: 2,
@@ -1300,10 +1299,10 @@ describe('AgentWidgetClient - Unified Event Names', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 1, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 1, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_iteration_start', {
-        executionId: execId, iteration: 1, maxIterations: 1,
+        executionId: execId, iteration: 1, maxTurns: 1,
         startedAt: new Date().toISOString(), seq: 2,
       }),
       sseEvent('tool_start', {
@@ -1368,7 +1367,7 @@ describe('AgentWidgetClient - Unified Event Names', () => {
     global.fetch = createAgentStreamFetch([
       sseEvent('agent_start', {
         executionId: execId, agentId: 'virtual', agentName: 'Test',
-        maxIterations: 2, startedAt: new Date().toISOString(), seq: 1,
+        maxTurns: 2, startedAt: new Date().toISOString(), seq: 1,
       }),
       sseEvent('agent_reflect', {
         executionId: execId, iteration: 1,

package/src/client.ts

@@ -16,7 +16,8 @@ import {
   ClientInitResponse,
   ClientChatRequest,
   ClientFeedbackRequest,
-  ClientFeedbackType
+  ClientFeedbackType,
+  PersonaArtifactKind
 } from "./types";
 import { 
   extractTextFromJson, 
@@ -25,6 +26,8 @@ import {
   createRegexJsonParser,
   createXmlParser
 } from "./utils/formatting";
+// artifactsSidebarEnabled is used in ui.ts to gate the sidebar pane rendering;
+// artifact events are always processed here regardless of config.
 
 type DispatchOptions = {
   messages: AgentWidgetMessage[];
@@ -468,6 +471,7 @@ export class AgentWidgetClient {
         ...(options.assistantMessageId && { assistantMessageId: options.assistantMessageId }),
         // Include metadata/context from middleware if present (excluding sessionId)
         ...(sanitizedMetadata && Object.keys(sanitizedMetadata).length > 0 && { metadata: sanitizedMetadata }),
+        ...(basePayload.inputs && Object.keys(basePayload.inputs).length > 0 && { inputs: basePayload.inputs }),
         ...(basePayload.context && { context: basePayload.context }),
       };
 
@@ -1110,6 +1114,20 @@ export class AgentWidgetClient {
       }
     };
 
+    // Track tool call IDs for artifact emit tools so we can suppress their UI
+    const artifactToolCallIds = new Set<string>();
+    // Track artifact reference card messages so we can update them on artifact_complete
+    const artifactCardMessages = new Map<string, AgentWidgetMessage>();
+    // Track artifact IDs that already have a reference card (from auto-creation or transcript_insert)
+    const artifactIdsWithCards = new Set<string>();
+    // Accumulate artifact markdown content for embedding in card props on complete
+    const artifactContent = new Map<string, { markdown: string; title?: string }>();
+    const isArtifactEmitToolName = (name: string | undefined): boolean => {
+      if (!name) return false;
+      const normalized = name.replace(/_+/g, "_").replace(/^_|_$/g, "");
+      return normalized === "emit_artifact_markdown" || normalized === "emit_artifact_component";
+    };
+
     const resolveToolId = (
       payload: Record<string, any>,
       allowCreate: boolean
@@ -1346,12 +1364,18 @@ export class AgentWidgetClient {
         } else if (payloadType === "tool_start") {
           const toolId =
             resolveToolId(payload, true) ?? `tool-${nextSequence()}`;
+          const toolName = payload.toolName ?? payload.name;
+          // Suppress tool UI for artifact emit tools — artifacts are handled via artifact_* events
+          if (isArtifactEmitToolName(toolName)) {
+            artifactToolCallIds.add(toolId);
+            continue;
+          }
           const toolMessage = ensureToolMessage(toolId);
           const tool = toolMessage.toolCall ?? {
             id: toolId,
             status: "pending"
           };
-          tool.name = payload.toolName ?? tool.name;
+          tool.name = toolName ?? tool.name;
           tool.status = "running";
           if (payload.args !== undefined) {
             tool.args = payload.args;
@@ -1378,6 +1402,7 @@ export class AgentWidgetClient {
             resolveToolId(payload, false) ??
             resolveToolId(payload, true) ??
             `tool-${nextSequence()}`;
+          if (artifactToolCallIds.has(toolId)) continue;
           const toolMessage = ensureToolMessage(toolId);
           const tool = toolMessage.toolCall ?? {
             id: toolId,
@@ -1408,6 +1433,10 @@ export class AgentWidgetClient {
             resolveToolId(payload, false) ??
             resolveToolId(payload, true) ??
             `tool-${nextSequence()}`;
+          if (artifactToolCallIds.has(toolId)) {
+            artifactToolCallIds.delete(toolId);
+            continue;
+          }
           const toolMessage = ensureToolMessage(toolId);
           const tool = toolMessage.toolCall ?? {
             id: toolId,
@@ -1842,7 +1871,7 @@ export class AgentWidgetClient {
             agentName: payload.agentName ?? '',
             status: 'running',
             currentIteration: 0,
-            maxIterations: payload.maxIterations ?? 1,
+            maxTurns: payload.maxTurns ?? 1,
             startedAt: resolveTimestamp(payload.startedAt)
           };
         } else if (payloadType === "agent_iteration_start") {
@@ -1931,7 +1960,7 @@ export class AgentWidgetClient {
             result: undefined, duration: undefined, startedAt: undefined,
             completedAt: undefined, durationMs: undefined
           };
-          tool.name = payload.toolName ?? tool.name;
+          tool.name = payload.toolName ?? payload.name ?? tool.name;
           tool.status = "running";
           if (payload.parameters !== undefined) {
             tool.args = payload.parameters;
@@ -2106,6 +2135,126 @@ export class AgentWidgetClient {
             };
             emitMessage(existingMessage);
           }
+        } else if (
+          payloadType === "artifact_start" ||
+          payloadType === "artifact_delta" ||
+          payloadType === "artifact_update" ||
+          payloadType === "artifact_complete"
+        ) {
+          if (payloadType === "artifact_start") {
+            const at = payload.artifactType as PersonaArtifactKind;
+            const artId = String(payload.id);
+            const artTitle = typeof payload.title === "string" ? payload.title : undefined;
+            onEvent({
+              type: "artifact_start",
+              id: artId,
+              artifactType: at,
+              title: artTitle,
+              component: typeof payload.component === "string" ? payload.component : undefined
+            });
+            artifactContent.set(artId, { markdown: "", title: artTitle });
+            // Insert inline artifact reference card (skip if already present from transcript_insert)
+            if (!artifactIdsWithCards.has(artId)) {
+              artifactIdsWithCards.add(artId);
+              const cardMsg: AgentWidgetMessage = {
+                id: `artifact-ref-${artId}`,
+                role: "assistant",
+                content: "",
+                createdAt: new Date().toISOString(),
+                streaming: true,
+                sequence: nextSequence(),
+                rawContent: JSON.stringify({
+                  component: "PersonaArtifactCard",
+                  props: { artifactId: artId, title: artTitle, artifactType: at, status: "streaming" },
+                }),
+              };
+              artifactCardMessages.set(artId, cardMsg);
+              emitMessage(cardMsg);
+            }
+          } else if (payloadType === "artifact_delta") {
+            const deltaId = String(payload.id);
+            const deltaText = typeof payload.delta === "string" ? payload.delta : String(payload.delta ?? "");
+            onEvent({
+              type: "artifact_delta",
+              id: deltaId,
+              artDelta: deltaText
+            });
+            const acc = artifactContent.get(deltaId);
+            if (acc) acc.markdown += deltaText;
+          } else if (payloadType === "artifact_update") {
+            const props =
+              payload.props && typeof payload.props === "object" && !Array.isArray(payload.props)
+                ? (payload.props as Record<string, unknown>)
+                : {};
+            onEvent({
+              type: "artifact_update",
+              id: String(payload.id),
+              props,
+              component: typeof payload.component === "string" ? payload.component : undefined
+            });
+          } else if (payloadType === "artifact_complete") {
+            const artCompleteId = String(payload.id);
+            onEvent({ type: "artifact_complete", id: artCompleteId });
+            // Update the inline card to show completed state
+            const refMsg = artifactCardMessages.get(artCompleteId);
+            if (refMsg) {
+              refMsg.streaming = false;
+              try {
+                const parsed = JSON.parse(refMsg.rawContent ?? "{}");
+                if (parsed.props) {
+                  parsed.props.status = "complete";
+                  // Store markdown content in card props so download works after page refresh
+                  const acc = artifactContent.get(artCompleteId);
+                  if (acc?.markdown) {
+                    parsed.props.markdown = acc.markdown;
+                  }
+                }
+                refMsg.rawContent = JSON.stringify(parsed);
+              } catch { /* ignore parse errors */ }
+              artifactContent.delete(artCompleteId);
+              emitMessage(refMsg);
+              artifactCardMessages.delete(artCompleteId);
+            }
+          }
+        } else if (payloadType === "transcript_insert") {
+          const m = payload.message as Record<string, unknown> | undefined;
+          if (!m || typeof m !== "object") {
+            continue;
+          }
+          const id = String(m.id ?? `msg-${nextSequence()}`);
+          const roleRaw = m.role;
+          const role =
+            roleRaw === "user" ? "user" : roleRaw === "system" ? "system" : "assistant";
+          const msg: AgentWidgetMessage = {
+            id,
+            role,
+            content: typeof m.content === "string" ? m.content : "",
+            rawContent: typeof m.rawContent === "string" ? m.rawContent : undefined,
+            createdAt:
+              typeof m.createdAt === "string" ? m.createdAt : new Date().toISOString(),
+            streaming: m.streaming === true,
+            // Omit variant unless the stream specifies it. Do not default to `"assistant"`:
+            // that value is truthy and skips the component-directive branch (`!message.variant` in ui.ts).
+            ...(typeof m.variant === "string"
+              ? { variant: m.variant as AgentWidgetMessage["variant"] }
+              : {}),
+            sequence: nextSequence()
+          };
+          emitMessage(msg);
+          // Detect artifact references in transcript_insert to prevent duplicate auto-cards
+          if (msg.rawContent) {
+            try {
+              const parsed = JSON.parse(msg.rawContent);
+              const refArtId = parsed?.props?.artifactId;
+              if (typeof refArtId === "string") {
+                artifactIdsWithCards.add(refArtId);
+              }
+            } catch { /* not JSON or no artifactId */ }
+          }
+          assistantMessage = null;
+          assistantMessageRef.current = null;
+          streamParsers.delete(id);
+          rawContentBuffers.delete(id);
         } else if (payloadType === "error" && payload.error) {
           onEvent({
             type: "error",

package/src/components/approval-bubble.ts

@@ -26,11 +26,17 @@ export const updateApprovalBubbleUI = (
 
     // Update badge color
     if (approval.status === "approved") {
-      statusBadge.className = "tvw-inline-flex tvw-items-center tvw-px-2 tvw-py-0.5 tvw-rounded-full tvw-text-xs tvw-font-medium tvw-approval-badge-approved";
+      statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
+      statusBadge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
     } else if (approval.status === "denied") {
-      statusBadge.className = "tvw-inline-flex tvw-items-center tvw-px-2 tvw-py-0.5 tvw-rounded-full tvw-text-xs tvw-font-medium tvw-approval-badge-denied";
+      statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
+      statusBadge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
     } else if (approval.status === "timeout") {
-      statusBadge.className = "tvw-inline-flex tvw-items-center tvw-px-2 tvw-py-0.5 tvw-rounded-full tvw-text-xs tvw-font-medium tvw-approval-badge-timeout";
+      statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
+      statusBadge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
     }
     statusBadge.setAttribute("data-approval-status", approval.status);
   }
@@ -42,9 +48,9 @@ export const updateApprovalBubbleUI = (
     const iconName = approval.status === "denied" ? "shield-x"
       : approval.status === "timeout" ? "shield-alert"
       : "shield-check";
-    const iconColor = approval.status === "approved" ? "#16a34a"
-      : approval.status === "denied" ? "#dc2626"
-      : approval.status === "timeout" ? "#ca8a04"
+    const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
+      : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
+      : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
       : (approvalConfig?.titleColor ?? "currentColor");
     const icon = renderLucideIcon(iconName, 20, iconColor, 2);
     if (icon) {
@@ -73,14 +79,12 @@ export const createApprovalBubble = (
   const bubble = createElement(
     "div",
     [
-      "vanilla-message-bubble",
-      "vanilla-approval-bubble",
-      "tvw-w-full",
-      "tvw-max-w-[85%]",
-      "tvw-rounded-2xl",
-      "tvw-border",
-      "tvw-shadow-sm",
-      "tvw-overflow-hidden",
+      "persona-w-full",
+      "persona-max-w-[85%]",
+      "persona-rounded-2xl",
+      "persona-border",
+      "persona-shadow-sm",
+      "persona-overflow-hidden",
     ].join(" ")
   );
 
@@ -88,13 +92,9 @@ export const createApprovalBubble = (
   bubble.id = `bubble-${message.id}`;
   bubble.setAttribute("data-message-id", message.id);
 
-  // Apply styling — only set inline styles when config overrides exist (CSS defaults handle the rest)
-  if (approvalConfig?.backgroundColor) {
-    bubble.style.backgroundColor = approvalConfig.backgroundColor;
-  }
-  if (approvalConfig?.borderColor) {
-    bubble.style.borderColor = approvalConfig.borderColor;
-  }
+  // Apply styling — use semantic tokens with config overrides
+  bubble.style.backgroundColor = approvalConfig?.backgroundColor ?? "var(--persona-approval-bg, #fefce8)";
+  bubble.style.borderColor = approvalConfig?.borderColor ?? "var(--persona-approval-border, #fef08a)";
 
   if (!approval) {
     return bubble;
@@ -103,18 +103,18 @@ export const createApprovalBubble = (
   // Header section with icon, title, and status badge
   const header = createElement(
     "div",
-    "tvw-flex tvw-items-start tvw-gap-3 tvw-px-4 tvw-py-3"
+    "persona-flex persona-items-start persona-gap-3 persona-px-4 persona-py-3"
   );
 
   // Icon container
-  const iconContainer = createElement("div", "tvw-flex-shrink-0 tvw-mt-0.5");
+  const iconContainer = createElement("div", "persona-flex-shrink-0 persona-mt-0.5");
   iconContainer.setAttribute("data-approval-icon", "true");
   const iconName = approval.status === "denied" ? "shield-x"
     : approval.status === "timeout" ? "shield-alert"
     : "shield-check";
-  const iconColor = approval.status === "approved" ? "#16a34a"
-    : approval.status === "denied" ? "#dc2626"
-    : approval.status === "timeout" ? "#ca8a04"
+  const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
+    : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
+    : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
     : (approvalConfig?.titleColor ?? "currentColor");
   const icon = renderLucideIcon(iconName, 20, iconColor, 2);
   if (icon) {
@@ -122,11 +122,11 @@ export const createApprovalBubble = (
   }
 
   // Content area
-  const content = createElement("div", "tvw-flex-1 tvw-min-w-0");
+  const content = createElement("div", "persona-flex-1 persona-min-w-0");
 
   // Title row with status badge
-  const titleRow = createElement("div", "tvw-flex tvw-items-center tvw-gap-2");
-  const title = createElement("span", "tvw-text-sm tvw-font-medium tvw-text-cw-primary");
+  const titleRow = createElement("div", "persona-flex persona-items-center persona-gap-2");
+  const title = createElement("span", "persona-text-sm persona-font-medium persona-text-persona-primary");
   if (approvalConfig?.titleColor) {
     title.style.color = approvalConfig.titleColor;
   }
@@ -135,16 +135,19 @@ export const createApprovalBubble = (
 
   // Status badge (shown when resolved)
   if (!isPending) {
-    const badge = createElement("span", "tvw-inline-flex tvw-items-center tvw-px-2 tvw-py-0.5 tvw-rounded-full tvw-text-xs tvw-font-medium");
+    const badge = createElement("span", "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium");
     badge.setAttribute("data-approval-status", approval.status);
     if (approval.status === "approved") {
-      badge.className += " tvw-approval-badge-approved";
+      badge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
+      badge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
       badge.textContent = "Approved";
     } else if (approval.status === "denied") {
-      badge.className += " tvw-approval-badge-denied";
+      badge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
+      badge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
       badge.textContent = "Denied";
     } else if (approval.status === "timeout") {
-      badge.className += " tvw-approval-badge-timeout";
+      badge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
+      badge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
       badge.textContent = "Timeout";
     }
     titleRow.appendChild(badge);
@@ -153,7 +156,7 @@ export const createApprovalBubble = (
   content.appendChild(titleRow);
 
   // Description
-  const description = createElement("p", "tvw-text-sm tvw-mt-0.5 tvw-text-cw-muted");
+  const description = createElement("p", "persona-text-sm persona-mt-0.5 persona-text-persona-muted");
   if (approvalConfig?.descriptionColor) {
     description.style.color = approvalConfig.descriptionColor;
   }
@@ -164,7 +167,7 @@ export const createApprovalBubble = (
   if (approval.parameters) {
     const paramsPre = createElement(
       "pre",
-      "tvw-mt-2 tvw-text-xs tvw-p-2 tvw-rounded tvw-overflow-x-auto tvw-max-h-32 tvw-bg-cw-container tvw-text-cw-primary"
+      "persona-mt-2 persona-text-xs persona-p-2 persona-rounded persona-overflow-x-auto persona-max-h-32 persona-bg-persona-container persona-text-persona-primary"
     );
     if (approvalConfig?.parameterBackgroundColor) {
       paramsPre.style.backgroundColor = approvalConfig.parameterBackgroundColor;
@@ -180,13 +183,13 @@ export const createApprovalBubble = (
 
   // Action buttons (only shown when pending)
   if (isPending) {
-    const buttonsContainer = createElement("div", "tvw-flex tvw-gap-2 tvw-mt-2");
+    const buttonsContainer = createElement("div", "persona-flex persona-gap-2 persona-mt-2");
     buttonsContainer.setAttribute("data-approval-buttons", "true");
 
     // Approve button
-    const approveBtn = createElement("button", "tvw-inline-flex tvw-items-center tvw-px-3 tvw-py-1.5 tvw-rounded-md tvw-text-xs tvw-font-medium tvw-border-none tvw-cursor-pointer") as HTMLButtonElement;
+    const approveBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-border-none persona-cursor-pointer") as HTMLButtonElement;
     approveBtn.type = "button";
-    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "#16a34a";
+    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "var(--persona-approval-approve-bg, #22c55e)";
     approveBtn.style.color = approvalConfig?.approveButtonTextColor ?? "#ffffff";
     approveBtn.setAttribute("data-approval-action", "approve");
     const approveIcon = renderLucideIcon("shield-check", 14, approvalConfig?.approveButtonTextColor ?? "#ffffff", 2);
@@ -198,13 +201,13 @@ export const createApprovalBubble = (
     approveBtn.appendChild(approveLabel);
 
     // Deny button
-    const denyBtn = createElement("button", "tvw-inline-flex tvw-items-center tvw-px-3 tvw-py-1.5 tvw-rounded-md tvw-text-xs tvw-font-medium tvw-cursor-pointer") as HTMLButtonElement;
+    const denyBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-cursor-pointer") as HTMLButtonElement;
     denyBtn.type = "button";
     denyBtn.style.backgroundColor = approvalConfig?.denyButtonColor ?? "transparent";
-    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "#dc2626";
-    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ?? "#fca5a5"}`;
+    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)";
+    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ? approvalConfig.denyButtonTextColor : "var(--persona-palette-colors-error-200, #fca5a5)"}`;
     denyBtn.setAttribute("data-approval-action", "deny");
-    const denyIcon = renderLucideIcon("shield-x", 14, approvalConfig?.denyButtonTextColor ?? "#dc2626", 2);
+    const denyIcon = renderLucideIcon("shield-x", 14, approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)", 2);
     if (denyIcon) {
       denyIcon.style.marginRight = "4px";
       denyBtn.appendChild(denyIcon);