@runtypelabs/persona 1.48.0 → 2.0.0

package/src/components/composer-builder.ts

@@ -66,26 +66,28 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
 
   const footer = createElement(
     "div",
-    "tvw-widget-footer tvw-border-t-cw-divider tvw-bg-cw-surface tvw-px-6 tvw-py-4"
+    "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4"
   );
 
   const suggestions = createElement(
     "div",
-    "tvw-mb-3 tvw-flex tvw-flex-wrap tvw-gap-2"
+    "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2"
   );
 
   // Composer form uses column layout: textarea on top, actions row below
   const composerForm = createElement(
     "form",
-    `tvw-widget-composer tvw-flex tvw-flex-col tvw-gap-2 tvw-rounded-2xl tvw-border tvw-border-gray-200 tvw-bg-cw-input-background tvw-px-4 tvw-py-3`
+    `persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-gray-200 persona-bg-persona-input-background persona-px-4 persona-py-3`
   ) as HTMLFormElement;
+  composerForm.setAttribute("data-persona-composer-form", "");
   // Prevent form from getting focus styles
   composerForm.style.outline = "none";
 
   const textarea = createElement("textarea") as HTMLTextAreaElement;
+  textarea.setAttribute("data-persona-composer-input", "");
   textarea.placeholder = config?.copy?.inputPlaceholder ?? "Type your message…";
   textarea.className =
-    "tvw-w-full tvw-min-h-[24px] tvw-resize-none tvw-border-none tvw-bg-transparent tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-none tvw-composer-textarea";
+    "persona-w-full persona-min-h-[24px] persona-resize-none persona-border-none persona-bg-transparent persona-text-sm persona-text-persona-primary focus:persona-outline-none focus:persona-border-none persona-composer-textarea";
   textarea.rows = 1;
 
   // Apply font family and weight from config
@@ -146,16 +148,17 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   const textColor = sendButtonConfig.textColor;
 
   // Create wrapper for tooltip positioning
-  const sendButtonWrapper = createElement("div", "tvw-send-button-wrapper");
+  const sendButtonWrapper = createElement("div", "persona-send-button-wrapper");
 
   const sendButton = createElement(
     "button",
     useIcon
-      ? "tvw-rounded-button tvw-flex tvw-items-center tvw-justify-center disabled:tvw-opacity-50 tvw-cursor-pointer"
-      : "tvw-rounded-button tvw-bg-cw-accent tvw-px-4 tvw-py-2 tvw-text-sm tvw-font-semibold disabled:tvw-opacity-50 tvw-cursor-pointer"
+      ? "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
+      : "persona-rounded-button persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold disabled:persona-opacity-50 persona-cursor-pointer"
   ) as HTMLButtonElement;
 
   sendButton.type = "submit";
+  sendButton.setAttribute("data-persona-composer-submit", "");
 
   if (useIcon) {
     // Icon mode: circular button
@@ -186,7 +189,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
         if (textColor) {
           sendButton.style.color = textColor;
         } else {
-          sendButton.classList.add("tvw-text-white");
+          sendButton.classList.add("persona-text-white");
         }
       }
     } else {
@@ -194,14 +197,14 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
       if (textColor) {
         sendButton.style.color = textColor;
       } else {
-        sendButton.classList.add("tvw-text-white");
+        sendButton.classList.add("persona-text-white");
       }
     }
 
     if (backgroundColor) {
       sendButton.style.backgroundColor = backgroundColor;
     } else {
-      sendButton.classList.add("tvw-bg-cw-primary");
+      sendButton.classList.add("persona-bg-persona-primary");
     }
   } else {
     // Text mode: existing behavior
@@ -209,7 +212,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     if (textColor) {
       sendButton.style.color = textColor;
     } else {
-      sendButton.classList.add("tvw-text-white");
+      sendButton.classList.add("persona-text-white");
     }
   }
 
@@ -240,7 +243,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
 
   // Add tooltip if enabled
   if (showTooltip && tooltipText) {
-    const tooltip = createElement("div", "tvw-send-button-tooltip");
+    const tooltip = createElement("div", "persona-send-button-tooltip");
     tooltip.textContent = tooltipText;
     sendButtonWrapper.appendChild(tooltip);
   }
@@ -263,13 +266,14 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
 
   if (voiceRecognitionEnabled && hasVoiceInput) {
-    micButtonWrapper = createElement("div", "tvw-send-button-wrapper");
+    micButtonWrapper = createElement("div", "persona-send-button-wrapper");
     micButton = createElement(
       "button",
-      "tvw-rounded-button tvw-flex tvw-items-center tvw-justify-center disabled:tvw-opacity-50 tvw-cursor-pointer"
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
     ) as HTMLButtonElement;
 
     micButton.type = "button";
+    micButton.setAttribute("data-persona-composer-mic", "");
     micButton.setAttribute("aria-label", "Start voice recognition");
 
     const micIconName = voiceRecognitionConfig.iconName ?? "mic";
@@ -309,14 +313,14 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     if (micBackgroundColor) {
       micButton.style.backgroundColor = micBackgroundColor;
     } else {
-      micButton.classList.add("tvw-bg-cw-primary");
+      micButton.classList.add("persona-bg-persona-primary");
     }
 
     // Apply icon/text color
     if (micIconColor) {
       micButton.style.color = micIconColor;
     } else if (!micIconColor && !textColor) {
-      micButton.classList.add("tvw-text-white");
+      micButton.classList.add("persona-text-white");
     }
 
     // Apply border styling
@@ -345,7 +349,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
       voiceRecognitionConfig.tooltipText ?? "Start voice recognition";
     const showMicTooltip = voiceRecognitionConfig.showTooltip ?? false;
     if (showMicTooltip && micTooltipText) {
-      const tooltip = createElement("div", "tvw-send-button-tooltip");
+      const tooltip = createElement("div", "persona-send-button-tooltip");
       tooltip.textContent = micTooltipText;
       micButtonWrapper.appendChild(tooltip);
     }
@@ -363,7 +367,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     // Create previews container (shown above textarea when attachments are added)
     attachmentPreviewsContainer = createElement(
       "div",
-      "tvw-attachment-previews tvw-flex tvw-flex-wrap tvw-gap-2 tvw-mb-2"
+      "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2"
     );
     attachmentPreviewsContainer.style.display = "none"; // Hidden until attachments added
 
@@ -376,12 +380,12 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     attachmentInput.setAttribute("aria-label", "Attach files");
 
     // Create attachment button wrapper for tooltip
-    attachmentButtonWrapper = createElement("div", "tvw-send-button-wrapper");
+    attachmentButtonWrapper = createElement("div", "persona-send-button-wrapper");
 
     // Create attachment button
     attachmentButton = createElement(
       "button",
-      "tvw-rounded-button tvw-flex tvw-items-center tvw-justify-center disabled:tvw-opacity-50 tvw-cursor-pointer tvw-attachment-button"
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
     ) as HTMLButtonElement;
     attachmentButton.type = "button";
     attachmentButton.setAttribute("aria-label", attachmentsConfig.buttonTooltipText ?? "Attach file");
@@ -400,14 +404,14 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     attachmentButton.style.fontSize = "18px";
     attachmentButton.style.lineHeight = "1";
     attachmentButton.style.backgroundColor = "transparent";
-    attachmentButton.style.color = "var(--cw-primary, #111827)";
+    attachmentButton.style.color = "var(--persona-primary, #111827)";
     attachmentButton.style.border = "none";
     attachmentButton.style.borderRadius = "6px";
     attachmentButton.style.transition = "background-color 0.15s ease";
 
     // Add hover effect via mouseenter/mouseleave
     attachmentButton.addEventListener("mouseenter", () => {
-      attachmentButton!.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+      attachmentButton!.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
     });
     attachmentButton.addEventListener("mouseleave", () => {
       attachmentButton!.style.backgroundColor = "transparent";
@@ -436,7 +440,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
 
     // Add tooltip if configured
     const attachTooltipText = attachmentsConfig.buttonTooltipText ?? "Attach file";
-    const tooltip = createElement("div", "tvw-send-button-tooltip");
+    const tooltip = createElement("div", "persona-send-button-tooltip");
     tooltip.textContent = attachTooltipText;
     attachmentButtonWrapper.appendChild(tooltip);
   }
@@ -477,16 +481,16 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   composerForm.append(textarea);
 
   // Actions row: attachment on left, mic/send on right
-  const actionsRow = createElement("div", "tvw-flex tvw-items-center tvw-justify-between tvw-w-full");
+  const actionsRow = createElement("div", "persona-flex persona-items-center persona-justify-between persona-w-full");
 
   // Left side: attachment button
-  const leftActions = createElement("div", "tvw-flex tvw-items-center tvw-gap-2");
+  const leftActions = createElement("div", "persona-flex persona-items-center persona-gap-2");
   if (attachmentButtonWrapper) {
     leftActions.append(attachmentButtonWrapper);
   }
 
   // Right side: mic and send buttons
-  const rightActions = createElement("div", "tvw-flex tvw-items-center tvw-gap-1");
+  const rightActions = createElement("div", "persona-flex persona-items-center persona-gap-1");
   if (micButtonWrapper) {
     rightActions.append(micButtonWrapper);
   }
@@ -497,8 +501,9 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
 
   const statusText = createElement(
     "div",
-    "tvw-mt-2 tvw-text-right tvw-text-xs tvw-text-cw-muted"
+    "persona-mt-2 persona-text-right persona-text-xs persona-text-persona-muted"
   );
+  statusText.setAttribute("data-persona-composer-status", "");
 
   // Apply status indicator config
   const statusConfig = config?.statusIndicator ?? {};

package/src/components/event-stream-view.ts

@@ -25,16 +25,16 @@ function applyCustomClasses(el: HTMLElement, classes?: string): void {
 // ============================================================================
 
 const DEFAULT_BADGE_COLORS: Record<string, EventStreamBadgeColor> = {
-  flow_: { bg: "#dcfce7", text: "#166534" },
-  step_: { bg: "#dbeafe", text: "#1e40af" },
-  reason_: { bg: "#ffedd5", text: "#9a3412" },
-  tool_: { bg: "#f3e8ff", text: "#6b21a8" },
-  agent_: { bg: "#ccfbf1", text: "#115e59" },
-  error: { bg: "#fecaca", text: "#991b1b" },
+  flow_: { bg: "var(--persona-palette-colors-success-100, #dcfce7)", text: "var(--persona-palette-colors-success-700, #166534)" },
+  step_: { bg: "var(--persona-palette-colors-primary-100, #dbeafe)", text: "var(--persona-palette-colors-primary-700, #1e40af)" },
+  reason_: { bg: "var(--persona-palette-colors-warning-100, #ffedd5)", text: "var(--persona-palette-colors-warning-700, #9a3412)" },
+  tool_: { bg: "var(--persona-palette-colors-purple-100, #f3e8ff)", text: "var(--persona-palette-colors-purple-700, #6b21a8)" },
+  agent_: { bg: "var(--persona-palette-colors-teal-100, #ccfbf1)", text: "var(--persona-palette-colors-teal-700, #115e59)" },
+  error: { bg: "var(--persona-palette-colors-error-100, #fecaca)", text: "var(--persona-palette-colors-error-700, #991b1b)" },
 };
 const DEFAULT_BADGE_COLOR: EventStreamBadgeColor = {
-  bg: "#f3f4f6",
-  text: "#4b5563",
+  bg: "var(--persona-palette-colors-gray-100, #f3f4f6)",
+  text: "var(--persona-palette-colors-gray-600, #4b5563)",
 };
 
 const DEFAULT_DESCRIPTION_FIELDS = [
@@ -181,12 +181,12 @@ function renderInlinePayload(
   function renderDefaultPayload(): HTMLElement {
     const payloadContainer = createElement(
       "div",
-      "tvw-bg-cw-container tvw-border-t tvw-border-cw-divider tvw-px-3 tvw-py-2 tvw-ml-4 tvw-mr-3 tvw-mb-1 tvw-rounded-b tvw-overflow-auto tvw-max-h-[300px]"
+      "persona-bg-persona-container persona-border-t persona-border-persona-divider persona-px-3 persona-py-2 persona-ml-4 persona-mr-3 persona-mb-1 persona-rounded-b persona-overflow-auto persona-max-h-[300px]"
     );
 
     const payloadContent = createElement(
       "pre",
-      "tvw-m-0 tvw-whitespace-pre-wrap tvw-break-all tvw-text-[11px] tvw-text-cw-secondary tvw-font-mono"
+      "persona-m-0 persona-whitespace-pre-wrap persona-break-all persona-text-[11px] persona-text-persona-secondary persona-font-mono"
     );
     payloadContent.textContent = formattedPayload;
 
@@ -212,7 +212,7 @@ function renderEventRow(
   const isExpanded = expandedSet.has(event.id);
   const wrapper = createElement(
     "div",
-    "tvw-border-b tvw-border-cw-divider tvw-text-xs"
+    "persona-border-b persona-border-persona-divider persona-text-xs"
   );
   applyCustomClasses(wrapper, esConfig.classNames?.eventRow);
 
@@ -242,14 +242,14 @@ function renderEventRow(
     // Main row line
     const row = createElement(
       "div",
-      "tvw-flex tvw-items-center tvw-gap-2 tvw-px-3 tvw-py-3 hover:tvw-bg-cw-container tvw-cursor-pointer tvw-group"
+      "persona-flex persona-items-center persona-gap-2 persona-px-3 persona-py-3 hover:persona-bg-persona-container persona-cursor-pointer persona-group"
     );
     row.setAttribute("data-event-id", event.id);
 
     // 1. Chevron (expand/collapse)
     const chevron = createElement(
       "span",
-      "tvw-flex-shrink-0 tvw-text-cw-muted tvw-w-4 tvw-text-center tvw-flex tvw-items-center tvw-justify-center"
+      "persona-flex-shrink-0 persona-text-persona-muted persona-w-4 persona-text-center persona-flex persona-items-center persona-justify-center"
     );
     const chevronIcon = renderLucideIcon(
       isExpanded ? "chevron-down" : "chevron-right",
@@ -262,7 +262,7 @@ function renderEventRow(
     // 2. Timestamp
     const timestamp = createElement(
       "span",
-      "tvw-text-[11px] tvw-text-cw-muted tvw-whitespace-nowrap tvw-flex-shrink-0 tvw-font-mono tvw-w-[70px]"
+      "persona-text-[11px] persona-text-persona-muted persona-whitespace-nowrap persona-flex-shrink-0 persona-font-mono persona-w-[70px]"
     );
     const tsFormat = esConfig.timestampFormat ?? "relative";
     timestamp.textContent =
@@ -275,7 +275,7 @@ function renderEventRow(
     if (esConfig.showSequenceNumbers !== false) {
       seqNum = createElement(
         "span",
-        "tvw-text-[11px] tvw-text-cw-muted tvw-font-mono tvw-flex-shrink-0 tvw-w-[28px] tvw-text-right"
+        "persona-text-[11px] persona-text-persona-muted persona-font-mono persona-flex-shrink-0 persona-w-[28px] persona-text-right"
       );
       seqNum.textContent = String(index + 1);
     }
@@ -284,7 +284,7 @@ function renderEventRow(
     const badgeColor = getBadgeColor(event.type, esConfig.badgeColors);
     const badge = createElement(
       "span",
-      "tvw-inline-flex tvw-items-center tvw-px-2 tvw-py-0.5 tvw-rounded tvw-text-[11px] tvw-font-mono tvw-font-medium tvw-whitespace-nowrap tvw-flex-shrink-0 tvw-border"
+      "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded persona-text-[11px] persona-font-mono persona-font-medium persona-whitespace-nowrap persona-flex-shrink-0 persona-border"
     );
     badge.style.backgroundColor = badgeColor.bg;
     badge.style.color = badgeColor.text;
@@ -299,18 +299,18 @@ function renderEventRow(
     if (desc) {
       descEl = createElement(
         "span",
-        "tvw-text-[11px] tvw-text-cw-secondary tvw-truncate tvw-min-w-0"
+        "persona-text-[11px] persona-text-persona-secondary persona-truncate persona-min-w-0"
       );
       descEl.textContent = desc;
     }
 
     // 6. Spacer
-    const spacer = createElement("div", "tvw-flex-1 tvw-min-w-0");
+    const spacer = createElement("div", "persona-flex-1 persona-min-w-0");
 
     // 7. Copy button
     const copyBtn = createElement(
       "button",
-      "tvw-text-cw-muted hover:tvw-text-cw-primary tvw-cursor-pointer tvw-flex-shrink-0 tvw-border-none tvw-bg-transparent tvw-p-0"
+      "persona-text-persona-muted hover:persona-text-persona-primary persona-cursor-pointer persona-flex-shrink-0 persona-border-none persona-bg-transparent persona-p-0"
     );
     const clipIcon = renderLucideIcon(
       "clipboard",
@@ -426,7 +426,7 @@ export function createEventStreamView(
     const customClasses = esConfig.classNames;
     const container = createElement(
       "div",
-      "tvw-event-stream-view tvw-flex tvw-flex-col tvw-flex-1 tvw-min-h-0"
+      "persona-event-stream-view persona-flex persona-flex-col persona-flex-1 persona-min-h-0"
     );
     applyCustomClasses(container, customClasses?.panel);
 
@@ -468,36 +468,36 @@ export function createEventStreamView(
     function buildDefaultToolbar(): HTMLElement {
       const toolbarOuter = createElement(
         "div",
-        "tvw-flex tvw-flex-col tvw-flex-shrink-0"
+        "persona-flex persona-flex-col persona-flex-shrink-0"
       );
 
       // --- Header bar ---
       const headerBar = createElement(
         "div",
-        "tvw-flex tvw-items-center tvw-gap-2 tvw-px-4 tvw-py-3 tvw-pb-0 tvw-border-cw-divider tvw-bg-cw-surface tvw-overflow-hidden"
+        "persona-flex persona-items-center persona-gap-2 persona-px-4 persona-py-3 persona-pb-0 persona-border-persona-divider persona-bg-persona-surface persona-overflow-hidden"
       );
       applyCustomClasses(headerBar, customClasses?.headerBar);
 
       // Title
       const title = createElement(
         "span",
-        "tvw-text-sm tvw-font-medium tvw-text-cw-primary tvw-whitespace-nowrap"
+        "persona-text-sm persona-font-medium persona-text-persona-primary persona-whitespace-nowrap"
       );
       title.textContent = "Events";
 
       // Count badge
       countBadge = createElement(
         "span",
-        "tvw-text-[11px] tvw-font-mono tvw-bg-cw-container tvw-text-cw-muted tvw-px-2 tvw-py-0.5 tvw-rounded tvw-border tvw-border-cw-border"
+        "persona-text-[11px] persona-font-mono persona-bg-persona-container persona-text-persona-muted persona-px-2 persona-py-0.5 persona-rounded persona-border persona-border-persona-border"
       );
       countBadge.textContent = "0";
 
-      const headerSpacer = createElement("div", "tvw-flex-1");
+      const headerSpacer = createElement("div", "persona-flex-1");
 
       // Filter dropdown
       filterSelect = createElement(
         "select",
-        "tvw-text-xs tvw-bg-cw-surface tvw-border tvw-border-cw-border tvw-rounded tvw-px-2.5 tvw-py-1 tvw-text-cw-primary tvw-cursor-pointer"
+        "persona-text-xs persona-bg-persona-surface persona-border persona-border-persona-border persona-rounded persona-px-2.5 persona-py-1 persona-text-persona-primary persona-cursor-pointer"
       ) as HTMLSelectElement;
       const allOption = createElement("option", "") as HTMLOptionElement;
       allOption.value = "";
@@ -506,7 +506,7 @@ export function createEventStreamView(
 
       // Copy All button
       const iconBtnClass =
-        "tvw-inline-flex tvw-items-center tvw-gap-1.5 tvw-rounded tvw-text-xs tvw-text-cw-muted hover:tvw-bg-cw-container hover:tvw-text-cw-primary tvw-cursor-pointer tvw-border tvw-border-cw-border tvw-bg-cw-surface tvw-flex-shrink-0 tvw-px-2.5 tvw-py-1";
+        "persona-inline-flex persona-items-center persona-gap-1.5 persona-rounded persona-text-xs persona-text-persona-muted hover:persona-bg-persona-container hover:persona-text-persona-primary persona-cursor-pointer persona-border persona-border-persona-border persona-bg-persona-surface persona-flex-shrink-0 persona-px-2.5 persona-py-1";
 
       copyAllBtn = createElement(
         "button",
@@ -523,7 +523,7 @@ export function createEventStreamView(
       if (copyAllIcon) copyAllBtn.appendChild(copyAllIcon);
       const copyAllLabel = createElement(
         "span",
-        "tvw-text-xs"
+        "persona-text-xs"
       );
       copyAllLabel.textContent = "Copy All";
       copyAllBtn.appendChild(copyAllLabel);
@@ -537,7 +537,7 @@ export function createEventStreamView(
       // --- Search bar ---
       const searchBar = createElement(
         "div",
-        "tvw-relative tvw-px-4 tvw-py-2.5 tvw-border-b tvw-border-cw-divider tvw-bg-cw-surface"
+        "persona-relative persona-px-4 persona-py-2.5 persona-border-b persona-border-persona-divider persona-bg-persona-surface"
       );
       applyCustomClasses(searchBar, customClasses?.searchBar);
 
@@ -545,18 +545,18 @@ export function createEventStreamView(
       const searchIcon = renderLucideIcon(
         "search",
         "14px",
-        "var(--cw-muted, #9ca3af)",
+        "var(--persona-muted, #9ca3af)",
         1.5
       );
       const searchIconWrapper = createElement(
         "span",
-        "tvw-absolute tvw-left-6 tvw-top-1/2 tvw--translate-y-1/2 tvw-pointer-events-none tvw-flex tvw-items-center"
+        "persona-absolute persona-left-6 persona-top-1/2 persona--translate-y-1/2 persona-pointer-events-none persona-flex persona-items-center"
       );
       if (searchIcon) searchIconWrapper.appendChild(searchIcon);
 
       searchInput = createElement(
         "input",
-        "tvw-text-sm tvw-bg-cw-surface tvw-border tvw-border-cw-border tvw-rounded-md tvw-pl-8 tvw-pr-3 tvw-py-1 tvw-w-full tvw-text-cw-primary"
+        "persona-text-sm persona-bg-persona-surface persona-border persona-border-persona-border persona-rounded-md persona-pl-8 persona-pr-3 persona-py-1 persona-w-full persona-text-persona-primary"
       ) as HTMLInputElement;
       applyCustomClasses(searchInput, customClasses?.searchInput);
       searchInput.type = "text";
@@ -564,7 +564,7 @@ export function createEventStreamView(
 
       searchClearBtn = createElement(
         "button",
-        "tvw-absolute tvw-right-5 tvw-top-1/2 tvw--translate-y-1/2 tvw-text-cw-muted hover:tvw-text-cw-primary tvw-cursor-pointer tvw-border-none tvw-bg-transparent tvw-p-0 tvw-leading-none"
+        "persona-absolute persona-right-5 persona-top-1/2 persona--translate-y-1/2 persona-text-persona-muted hover:persona-text-persona-primary persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-0 persona-leading-none"
       ) as HTMLButtonElement;
       searchClearBtn.type = "button";
       searchClearBtn.style.display = "none";
@@ -616,7 +616,7 @@ export function createEventStreamView(
 
     const truncationBanner = createElement(
       "div",
-      "tvw-text-xs tvw-text-cw-muted tvw-text-center tvw-py-0.5 tvw-px-4 tvw-bg-cw-container tvw-border-b tvw-border-cw-divider tvw-italic tvw-flex-shrink-0"
+      "persona-text-xs persona-text-persona-muted persona-text-center persona-py-0.5 persona-px-4 persona-bg-persona-container persona-border-b persona-border-persona-divider persona-italic persona-flex-shrink-0"
     );
     truncationBanner.style.display = "none";
 
@@ -626,19 +626,19 @@ export function createEventStreamView(
 
     const eventsListWrapper = createElement(
       "div",
-      "tvw-flex-1 tvw-min-h-0 tvw-relative"
+      "persona-flex-1 persona-min-h-0 persona-relative"
     );
 
     const eventsList = createElement(
       "div",
-      "tvw-event-stream-list tvw-overflow-y-auto tvw-min-h-0"
+      "persona-event-stream-list persona-overflow-y-auto persona-min-h-0"
     );
     eventsList.style.height = "100%";
 
     // Scroll-to-bottom indicator
     const scrollIndicator = createElement(
       "div",
-      "tvw-absolute tvw-bottom-3 tvw-left-1/2 tvw-transform tvw--translate-x-1/2 tvw-bg-cw-accent tvw-text-white tvw-text-xs tvw-px-3 tvw-py-1.5 tvw-rounded-full tvw-cursor-pointer tvw-shadow-md tvw-z-10 tvw-flex tvw-items-center tvw-gap-1"
+      "persona-absolute persona-bottom-3 persona-left-1/2 persona-transform persona--translate-x-1/2 persona-bg-persona-accent persona-text-white persona-text-xs persona-px-3 persona-py-1.5 persona-rounded-full persona-cursor-pointer persona-shadow-md persona-z-10 persona-flex persona-items-center persona-gap-1"
     );
     applyCustomClasses(scrollIndicator, customClasses?.scrollIndicator);
     scrollIndicator.style.display = "none";
@@ -655,7 +655,7 @@ export function createEventStreamView(
     // No matching events message
     const noResultsMsg = createElement(
       "div",
-      "tvw-flex tvw-items-center tvw-justify-center tvw-h-full tvw-text-sm tvw-text-cw-muted"
+      "persona-flex persona-items-center persona-justify-center persona-h-full persona-text-sm persona-text-persona-muted"
     );
     noResultsMsg.style.display = "none";
 
@@ -983,7 +983,7 @@ export function createEventStreamView(
         1.5
       );
       if (icon) copyAllBtn.appendChild(icon);
-      const label = createElement("span", "tvw-text-xs");
+      const label = createElement("span", "persona-text-xs");
       label.textContent = "Copy All";
       copyAllBtn.appendChild(label);
       setTimeout(() => {
@@ -995,7 +995,7 @@ export function createEventStreamView(
           1.5
         );
         if (original) copyAllBtn.appendChild(original);
-        const restoreLabel = createElement("span", "tvw-text-xs");
+        const restoreLabel = createElement("span", "persona-text-xs");
         restoreLabel.textContent = "Copy All";
         copyAllBtn.appendChild(restoreLabel);
         copyAllBtn.disabled = false;