@runtypelabs/persona 3.34.1 → 3.35.0

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

@@ -815,7 +815,7 @@ describe("createEventStreamView", () => {
       const buffer = createMockBuffer(events);
       const { element, update } = createEventStreamView({ buffer: buffer as any });
 
-      // Initial render (Path A — first render)
+      // Initial render (Path A: first render)
       update();
 
       const eventsList = getEventsList(element);
@@ -825,7 +825,7 @@ describe("createEventStreamView", () => {
       const row1Ref = eventsList.children[0];
       const row2Ref = eventsList.children[1];
 
-      // Add a new event and update (Path C — incremental append)
+      // Add a new event and update (Path C: incremental append)
       vi.advanceTimersByTime(150);
       buffer.push(makeEvent("step_chunk", 3));
       update();
@@ -1173,7 +1173,7 @@ describe("createEventStreamView", () => {
       // Wait past the throttle interval
       vi.advanceTimersByTime(150);
 
-      // Add event and update — should render immediately since 150ms > 100ms
+      // Add event and update: should render immediately since 150ms > 100ms
       buffer.push(makeEvent("flow_complete", 2));
       update();
 
@@ -1223,7 +1223,7 @@ describe("createEventStreamView", () => {
       const filterSelect = getFilterSelect(element);
       const copyAllBtn = getCopyAllBtn(element);
 
-      // Immediately change filter — this should bypass throttle (uses updateNow internally)
+      // Immediately change filter: this should bypass throttle (uses updateNow internally)
       filterSelect.value = "step_chunk";
       filterSelect.__fireEvent("change");
 
@@ -1237,17 +1237,17 @@ describe("createEventStreamView", () => {
       const buffer = createMockBuffer([makeEvent("step_chunk", 1)]);
       const { update, destroy } = createEventStreamView({ buffer: buffer as any });
 
-      // First update — immediate
+      // First update: immediate
       update();
 
       // Schedule a throttled update
       buffer.push(makeEvent("step_chunk", 2));
       update();
 
-      // Destroy before rAF fires — should not throw
+      // Destroy before rAF fires: should not throw
       expect(() => destroy()).not.toThrow();
 
-      // Advancing timers to flush rAF — should not throw even though view is destroyed
+      // Advancing timers to flush rAF: should not throw even though view is destroyed
       vi.advanceTimersByTime(20);
       vi.useRealTimers();
     });

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

@@ -568,7 +568,7 @@ export function createEventStreamView(
         );
         throughputValueEl.textContent = "-- tok/s";
 
-        // Custom hover tooltip — appears instantly (no native title delay).
+        // Custom hover tooltip: appears instantly (no native title delay).
         // Appended to the (non-clipping) toolbar wrapper rather than the header
         // bar, which has overflow-hidden and would clip a dropdown. Position is
         // measured on hover so it sits just under the throughput group.
@@ -899,7 +899,7 @@ export function createEventStreamView(
         expandedSet.add(eventId);
       }
       dirtyExpandId = eventId;
-      // Save scroll position — user-initiated expand/collapse should not auto-scroll
+      // Save scroll position: user-initiated expand/collapse should not auto-scroll
       const savedScrollTop = eventsList.scrollTop;
       const wasAutoFollowing = autoFollow.isFollowing();
       suppressScrollHandler = true;
@@ -993,7 +993,7 @@ export function createEventStreamView(
       const isFirstRender = rowElements.size === 0 && filteredEvents.length > 0;
 
       if (filterChanged || isFirstRender || filteredEvents.length === 0) {
-        // Path A — Full rebuild (filter/search changed, first render, or empty list)
+        // Path A: Full rebuild (filter/search changed, first render, or empty list)
         eventsList.innerHTML = "";
         rowElements.clear();
         const fragment = document.createDocumentFragment();
@@ -1016,7 +1016,7 @@ export function createEventStreamView(
         lastRenderedSearch = searchTerm;
         dirtyExpandId = null;
       } else {
-        // Path B — Single row replace (expand/collapse)
+        // Path B: Single row replace (expand/collapse)
         if (dirtyExpandId !== null) {
           const oldRow = rowElements.get(dirtyExpandId);
           if (oldRow && oldRow.parentNode === eventsList) {
@@ -1043,7 +1043,7 @@ export function createEventStreamView(
           dirtyExpandId = null;
         }
 
-        // Path C — Incremental append (default streaming path)
+        // Path C: Incremental append (default streaming path)
         // Remove evicted rows
         const activeIds = new Set(filteredEvents.map((e) => e.id));
         for (const [id, el] of rowElements) {

package/src/components/header-builder.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 import { createCloseButton, createClearChatButton } from "./header-parts";
@@ -38,15 +38,18 @@ export interface HeaderBuildContext {
 export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const { config, showClose = true } = context;
 
-  const header = createElement(
-    "div",
-    "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5"
-  );
-  header.setAttribute("data-persona-theme-zone", "header");
-  header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
-  header.style.borderBottomColor = 'var(--persona-header-border, var(--persona-divider, #f1f5f9))';
-  header.style.boxShadow = 'var(--persona-header-shadow, none)';
-  header.style.borderBottom = 'var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))';
+  const header = createNode("div", {
+    className:
+      "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5",
+    attrs: { "data-persona-theme-zone": "header" },
+    style: {
+      backgroundColor: "var(--persona-header-bg, var(--persona-surface, #ffffff))",
+      borderBottomColor: "var(--persona-header-border, var(--persona-divider, #f1f5f9))",
+      boxShadow: "var(--persona-header-shadow, none)",
+      borderBottom:
+        "var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))",
+    },
+  });
 
   const launcher = config?.launcher ?? {};
   const headerIconSize = launcher.headerIconSize ?? "48px";
@@ -54,16 +57,16 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const headerIconHidden = launcher.headerIconHidden ?? false;
   const headerIconName = launcher.headerIconName;
 
-  const iconHolder = createElement(
-    "div",
-    "persona-flex persona-items-center persona-justify-center persona-rounded-xl persona-text-xl"
-  );
-  iconHolder.style.height = headerIconSize;
-  iconHolder.style.width = headerIconSize;
-  iconHolder.style.backgroundColor =
-    "var(--persona-header-icon-bg, var(--persona-primary, #0f0f0f))";
-  iconHolder.style.color =
-    "var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff))";
+  const iconHolder = createNode("div", {
+    className:
+      "persona-flex persona-items-center persona-justify-center persona-rounded-xl persona-text-xl",
+    style: {
+      height: headerIconSize,
+      width: headerIconSize,
+      backgroundColor: "var(--persona-header-icon-bg, var(--persona-primary, #0f0f0f))",
+      color: "var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff))",
+    },
+  });
 
   // Render icon based on priority: Lucide icon > iconUrl > agentIconText
   if (!headerIconHidden) {
@@ -93,13 +96,16 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   }
 
   const headerCopy = createElement("div", "persona-flex persona-flex-col persona-flex-1 persona-min-w-0");
-  const title = createElement("span", "persona-text-base persona-font-semibold");
-  title.style.color = HEADER_THEME_CSS.titleColor;
-  title.textContent = config?.launcher?.title ?? "Chat Assistant";
-  const subtitle = createElement("span", "persona-text-xs");
-  subtitle.style.color = HEADER_THEME_CSS.subtitleColor;
-  subtitle.textContent =
-    config?.launcher?.subtitle ?? "Here to help you get answers fast";
+  const title = createNode("span", {
+    className: "persona-text-base persona-font-semibold",
+    text: config?.launcher?.title ?? "Chat Assistant",
+    style: { color: HEADER_THEME_CSS.titleColor },
+  });
+  const subtitle = createNode("span", {
+    className: "persona-text-xs",
+    text: config?.launcher?.subtitle ?? "Here to help you get answers fast",
+    style: { color: HEADER_THEME_CSS.subtitleColor },
+  });
 
   headerCopy.append(title, subtitle);
 

package/src/components/header-layouts.ts

@@ -121,7 +121,7 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   header.style.borderBottom =
     'var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))';
 
-  // Build the title area — either a combo button (titleMenu) or standard title row
+  // Build the title area: either a combo button (titleMenu) or standard title row
   const titleMenuConfig = layoutHeaderConfig?.titleMenu;
   let titleRow: HTMLElement;
   let headerTitle: HTMLElement;

package/src/components/header-parts.test.ts

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { createCloseButton, createClearChatButton } from "./header-parts";
+import type { AgentWidgetConfig } from "../types";
+
+const baseConfig: AgentWidgetConfig = { apiUrl: "/api" };
+
+describe("createCloseButton", () => {
+  it("keeps the default utility classes when no style overrides are set", () => {
+    const { button } = createCloseButton(baseConfig, {});
+    expect(button.tagName).toBe("BUTTON");
+    expect(button.type).toBe("button");
+    expect(button.getAttribute("aria-label")).toBe("Close chat");
+    expect(button.classList.contains("persona-rounded-full")).toBe(true);
+    expect(button.classList.contains("persona-border-none")).toBe(true);
+    expect(button.classList.contains("hover:persona-bg-gray-100")).toBe(true);
+  });
+
+  it("hides the button when showClose is false", () => {
+    const { button } = createCloseButton(baseConfig, { showClose: false });
+    expect(button.style.display).toBe("none");
+  });
+
+  it("drops each default class and sets the inline style for the matching override", () => {
+    const { button } = createCloseButton(
+      {
+        ...baseConfig,
+        launcher: {
+          closeButtonBackgroundColor: "rgb(1, 2, 3)",
+          closeButtonBorderRadius: "4px",
+          closeButtonBorderWidth: "2px",
+          closeButtonBorderColor: "rgb(4, 5, 6)",
+        },
+      },
+      {}
+    );
+    expect(button.classList.contains("hover:persona-bg-gray-100")).toBe(false);
+    expect(button.style.backgroundColor).toBe("rgb(1, 2, 3)");
+    expect(button.classList.contains("persona-rounded-full")).toBe(false);
+    expect(button.style.borderRadius).toBe("4px");
+    expect(button.classList.contains("persona-border-none")).toBe(false);
+    expect(button.style.borderWidth).toBe("2px");
+    expect(button.style.borderStyle).toBe("solid");
+  });
+
+  it("defaults border width to 0px when only border color is provided", () => {
+    const { button } = createCloseButton(
+      { ...baseConfig, launcher: { closeButtonBorderColor: "rgb(7, 8, 9)" } },
+      {}
+    );
+    expect(button.classList.contains("persona-border-none")).toBe(false);
+    expect(button.style.borderWidth).toBe("0px");
+    expect(button.style.borderStyle).toBe("solid");
+  });
+});
+
+describe("createClearChatButton", () => {
+  it("keeps the default utility classes when no style overrides are set", () => {
+    const { button } = createClearChatButton(baseConfig, {});
+    expect(button.type).toBe("button");
+    expect(button.classList.contains("persona-rounded-full")).toBe(true);
+    expect(button.classList.contains("persona-border-none")).toBe(true);
+    expect(button.classList.contains("hover:persona-bg-gray-100")).toBe(true);
+  });
+
+  it("drops each default class and sets the inline style for the matching override", () => {
+    const { button } = createClearChatButton(
+      {
+        ...baseConfig,
+        launcher: {
+          clearChat: {
+            backgroundColor: "rgb(1, 2, 3)",
+            borderRadius: "4px",
+            borderWidth: "2px",
+            borderColor: "rgb(4, 5, 6)",
+          },
+        },
+      },
+      {}
+    );
+    expect(button.classList.contains("hover:persona-bg-gray-100")).toBe(false);
+    expect(button.style.backgroundColor).toBe("rgb(1, 2, 3)");
+    expect(button.classList.contains("persona-rounded-full")).toBe(false);
+    expect(button.style.borderRadius).toBe("4px");
+    expect(button.classList.contains("persona-border-none")).toBe(false);
+    expect(button.style.borderWidth).toBe("2px");
+    expect(button.style.borderStyle).toBe("solid");
+  });
+});

package/src/components/header-parts.ts

@@ -1,4 +1,4 @@
-import { createElement, createElementInDocument } from "../utils/dom";
+import { createElement, createElementInDocument, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 import { PORTALED_OVERLAY_Z_INDEX } from "../utils/constants";
@@ -25,14 +25,14 @@ export interface CreateCloseButtonOptions {
   /**
    * Explicit button-size override that wins over `launcher.closeButtonSize`.
    * Use when the call site has its own opinion about the size that should
-   * take precedence over the global launcher config — e.g. composer-bar's
+   * take precedence over the global launcher config: e.g. composer-bar's
    * minimal close icon, where size is part of the mode's UX, not something
    * that should inherit from the floating launcher's button size.
    */
   buttonSize?: string;
   /**
    * Override the rendered icon size (default: "28px"). Pair with
-   * `buttonSize` when scaling the whole control down — otherwise the
+   * `buttonSize` when scaling the whole control down: otherwise the
    * 28px icon will overflow a smaller button.
    */
   iconSize?: string;
@@ -85,24 +85,41 @@ export const createCloseButton = (
 
   const wrapper = createElement("div", wrapperClassName);
 
-  const button = createElement(
-    "button",
-    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
-  ) as HTMLButtonElement;
-  button.style.height = closeButtonSize;
-  button.style.width = closeButtonSize;
-  button.type = "button";
-
   const closeButtonTooltipText = launcher.closeButtonTooltipText ?? "Close chat";
   const closeButtonShowTooltip = launcher.closeButtonShowTooltip ?? true;
-
-  button.setAttribute("aria-label", closeButtonTooltipText);
-  button.style.display = showClose ? "" : "none";
-
   const closeButtonIconName = launcher.closeButtonIconName ?? "x";
   const closeButtonIconText = launcher.closeButtonIconText ?? "×";
-  button.style.color =
-    launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor;
+  // hover-bg / border-none / rounded-full are default utility classes that
+  // apply only when the matching style override is absent; an override sets
+  // the inline style instead (cx omits the class).
+  const hasCloseBorder = Boolean(
+    launcher.closeButtonBorderWidth || launcher.closeButtonBorderColor
+  );
+
+  const button = createNode("button", {
+    className: cx(
+      "persona-inline-flex persona-items-center persona-justify-center persona-cursor-pointer",
+      !launcher.closeButtonBackgroundColor && "hover:persona-bg-gray-100",
+      !hasCloseBorder && "persona-border-none",
+      !launcher.closeButtonBorderRadius && "persona-rounded-full"
+    ),
+    attrs: { type: "button", "aria-label": closeButtonTooltipText },
+    style: {
+      height: closeButtonSize,
+      width: closeButtonSize,
+      display: showClose ? undefined : "none",
+      color: launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor,
+      backgroundColor: launcher.closeButtonBackgroundColor || undefined,
+      border: hasCloseBorder
+        ? `${launcher.closeButtonBorderWidth || "0px"} solid ${launcher.closeButtonBorderColor || "transparent"}`
+        : undefined,
+      borderRadius: launcher.closeButtonBorderRadius || undefined,
+      paddingLeft: launcher.closeButtonPaddingX || undefined,
+      paddingRight: launcher.closeButtonPaddingX || undefined,
+      paddingTop: launcher.closeButtonPaddingY || undefined,
+      paddingBottom: launcher.closeButtonPaddingY || undefined,
+    },
+  });
 
   // The X glyph's paths occupy only the middle 50% of its 24x24 viewBox
   // (from 6,6 to 18,18), while other header icons (e.g. refresh-cw) span
@@ -118,47 +135,6 @@ export const createCloseButton = (
     button.textContent = closeButtonIconText;
   }
 
-  if (launcher.closeButtonBackgroundColor) {
-    button.style.backgroundColor = launcher.closeButtonBackgroundColor;
-    button.classList.remove("hover:persona-bg-gray-100");
-  } else {
-    button.style.backgroundColor = "";
-    button.classList.add("hover:persona-bg-gray-100");
-  }
-
-  if (launcher.closeButtonBorderWidth || launcher.closeButtonBorderColor) {
-    const borderWidth = launcher.closeButtonBorderWidth || "0px";
-    const borderColor = launcher.closeButtonBorderColor || "transparent";
-    button.style.border = `${borderWidth} solid ${borderColor}`;
-    button.classList.remove("persona-border-none");
-  } else {
-    button.style.border = "";
-    button.classList.add("persona-border-none");
-  }
-
-  if (launcher.closeButtonBorderRadius) {
-    button.style.borderRadius = launcher.closeButtonBorderRadius;
-    button.classList.remove("persona-rounded-full");
-  } else {
-    button.style.borderRadius = "";
-    button.classList.add("persona-rounded-full");
-  }
-
-  if (launcher.closeButtonPaddingX) {
-    button.style.paddingLeft = launcher.closeButtonPaddingX;
-    button.style.paddingRight = launcher.closeButtonPaddingX;
-  } else {
-    button.style.paddingLeft = "";
-    button.style.paddingRight = "";
-  }
-  if (launcher.closeButtonPaddingY) {
-    button.style.paddingTop = launcher.closeButtonPaddingY;
-    button.style.paddingBottom = launcher.closeButtonPaddingY;
-  } else {
-    button.style.paddingTop = "";
-    button.style.paddingBottom = "";
-  }
-
   wrapper.appendChild(button);
 
   if (closeButtonShowTooltip && closeButtonTooltipText) {
@@ -259,15 +235,34 @@ export const createClearChatButton = (
 
   const wrapper = createElement("div", wrapperClassName);
 
-  const button = createElement(
-    "button",
-    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
-  ) as HTMLButtonElement;
-  button.style.height = clearChatSize;
-  button.style.width = clearChatSize;
-  button.type = "button";
-  button.setAttribute("aria-label", clearChatTooltipText);
-  button.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
+  // hover-bg / border-none / rounded-full are default utility classes that
+  // apply only when the matching style override is absent; an override sets
+  // the inline style instead (cx omits the class).
+  const hasClearChatBorder = Boolean(clearChatBorderWidth || clearChatBorderColor);
+
+  const button = createNode("button", {
+    className: cx(
+      "persona-inline-flex persona-items-center persona-justify-center persona-cursor-pointer",
+      !clearChatBgColor && "hover:persona-bg-gray-100",
+      !hasClearChatBorder && "persona-border-none",
+      !clearChatBorderRadius && "persona-rounded-full"
+    ),
+    attrs: { type: "button", "aria-label": clearChatTooltipText },
+    style: {
+      height: clearChatSize,
+      width: clearChatSize,
+      color: clearChatIconColor || HEADER_THEME_CSS.actionIconColor,
+      backgroundColor: clearChatBgColor || undefined,
+      border: hasClearChatBorder
+        ? `${clearChatBorderWidth || "0px"} solid ${clearChatBorderColor || "transparent"}`
+        : undefined,
+      borderRadius: clearChatBorderRadius || undefined,
+      paddingLeft: clearChatPaddingX || undefined,
+      paddingRight: clearChatPaddingX || undefined,
+      paddingTop: clearChatPaddingY || undefined,
+      paddingBottom: clearChatPaddingY || undefined,
+    },
+  });
 
   const iconSvg = renderLucideIcon(clearChatIconName, iconSize, "currentColor", 1);
   if (iconSvg) {
@@ -275,32 +270,6 @@ export const createClearChatButton = (
     button.appendChild(iconSvg);
   }
 
-  if (clearChatBgColor) {
-    button.style.backgroundColor = clearChatBgColor;
-    button.classList.remove("hover:persona-bg-gray-100");
-  }
-
-  if (clearChatBorderWidth || clearChatBorderColor) {
-    const borderWidth = clearChatBorderWidth || "0px";
-    const borderColor = clearChatBorderColor || "transparent";
-    button.style.border = `${borderWidth} solid ${borderColor}`;
-    button.classList.remove("persona-border-none");
-  }
-
-  if (clearChatBorderRadius) {
-    button.style.borderRadius = clearChatBorderRadius;
-    button.classList.remove("persona-rounded-full");
-  }
-
-  if (clearChatPaddingX) {
-    button.style.paddingLeft = clearChatPaddingX;
-    button.style.paddingRight = clearChatPaddingX;
-  }
-  if (clearChatPaddingY) {
-    button.style.paddingTop = clearChatPaddingY;
-    button.style.paddingBottom = clearChatPaddingY;
-  }
-
   wrapper.appendChild(button);
 
   if (clearChatShowTooltip && clearChatTooltipText) {

package/src/components/launcher.test.ts

@@ -5,6 +5,17 @@ import { createLauncherButton } from "./launcher";
 import { DEFAULT_WIDGET_CONFIG } from "../defaults";
 
 describe("createLauncherButton", () => {
+  it("uses the package default subtitle when no subtitle is configured", () => {
+    const { element, update } = createLauncherButton(undefined, () => {});
+    update({});
+    const subtitleEl = element.querySelector("[data-role='launcher-subtitle']");
+    expect(subtitleEl?.textContent).toBe("Here to help you get answers fast");
+    expect(subtitleEl?.getAttribute("title")).toBe(
+      "Here to help you get answers fast"
+    );
+    element.remove();
+  });
+
   it("applies collapsedMaxWidth when set", () => {
     const { element, update } = createLauncherButton(undefined, () => {});
     update({

package/src/components/launcher.ts

@@ -41,7 +41,7 @@ export const createLauncherButton = (
 
     const subtitleEl = button.querySelector("[data-role='launcher-subtitle']");
     if (subtitleEl) {
-      const s = launcher.subtitle ?? "Get answers fast";
+      const s = launcher.subtitle ?? "Here to help you get answers fast";
       subtitleEl.textContent = s;
       subtitleEl.setAttribute("title", s);
     }

package/src/components/message-bubble.test.ts

@@ -155,7 +155,7 @@ describe("resolveStopReasonNoticeText", () => {
   });
 });
 
-describe("createStandardBubble — stopReason notice", () => {
+describe("createStandardBubble: stopReason notice", () => {
   const renderWithStopReason = (
     overrides: Partial<AgentWidgetMessage>,
     widgetConfig?: Partial<AgentWidgetConfig>
@@ -333,7 +333,7 @@ describe("isSafeMediaSrc", () => {
   });
 });
 
-describe("createStandardBubble — audio/video/file content parts", () => {
+describe("createStandardBubble: audio/video/file content parts", () => {
   it("renders an <audio> element with controls for an audio content part", () => {
     const bubble = createStandardBubble(
       makeMessage({
@@ -466,3 +466,75 @@ describe("createStandardBubble — audio/video/file content parts", () => {
     expect(link?.getAttribute("href")).toBe("https://example.com/report.pdf");
   });
 });
+
+describe("createStandardBubble: timestamp position", () => {
+  it("tucks an inline timestamp inside the last content block so it trails the text", () => {
+    const bubble = createStandardBubble(
+      makeMessage({ content: "Hello there" }),
+      ({ text }) => `<p>${text}</p>`,
+      { timestamp: { show: true, position: "inline" } }
+    );
+
+    // Markdown content is block-wrapped; the inline timestamp must live inside
+    // that block (trailing the text), not as a block sibling under the bubble.
+    const inline = bubble.querySelector("p .persona-timestamp-inline");
+    expect(inline).not.toBeNull();
+    expect(inline?.textContent).toMatch(/\d/);
+    expect(Array.from(bubble.children)).not.toContain(inline);
+    // Must be an inline-level <span>; a <div> here is invalid inside a <p>.
+    expect(inline?.tagName).toBe("SPAN");
+  });
+
+  it("uses an inline element that survives an innerHTML re-parse (idiomorph round-trip)", () => {
+    const bubble = createStandardBubble(
+      makeMessage({ content: "Hello there" }),
+      ({ text }) => `<p>${text}</p>`,
+      { timestamp: { show: true, position: "inline" } }
+    );
+    const content = bubble.querySelector(".persona-message-content") as HTMLElement;
+
+    // Re-serializing + re-parsing is what the re-render path does. A <div>
+    // inside a <p> would be auto-closed out to a sibling (leaving an empty
+    // <p>), dropping the timestamp onto its own line; a <span> stays put.
+    const serialized = content.innerHTML;
+    content.innerHTML = serialized;
+
+    expect(content.querySelector("p .persona-timestamp-inline")).not.toBeNull();
+    const emptyParagraphs = Array.from(content.querySelectorAll("p")).filter(
+      (p) => p.textContent === ""
+    );
+    expect(emptyParagraphs.length).toBe(0);
+  });
+
+  it("falls back to the content container for plain-text (non-block) content", () => {
+    const bubble = createStandardBubble(
+      makeMessage({ content: "Hello there" }),
+      ({ text }) => text,
+      { timestamp: { show: true, position: "inline" } }
+    );
+
+    const content = bubble.querySelector(".persona-message-content")!;
+    const inline = content.querySelector(".persona-timestamp-inline");
+    expect(inline).not.toBeNull();
+    expect(content.contains(inline)).toBe(true);
+  });
+
+  it("renders a below timestamp as a block under the content (direct bubble child)", () => {
+    const bubble = createStandardBubble(
+      makeMessage({ content: "Hello there" }),
+      ({ text }) => `<p>${text}</p>`,
+      { timestamp: { show: true, position: "below" } }
+    );
+
+    // "below" must not produce an inline timestamp, and the timestamp block is
+    // appended to the bubble (under the content), not nested in the content.
+    expect(bubble.querySelector(".persona-timestamp-inline")).toBeNull();
+    const below = Array.from(bubble.children).find(
+      (el) =>
+        el.classList.contains("persona-mt-1") &&
+        el.classList.contains("persona-text-xs")
+    );
+    expect(below).toBeDefined();
+    expect(below?.textContent).toMatch(/\d/);
+  });
+});