@runtypelabs/persona 4.4.0 → 4.4.1

package/dist/widget.css

@@ -1586,6 +1586,18 @@
 /* ============================================
    Markdown Table Styles
    ============================================ */
+/* Tables span the full chat column. The assistant bubble is a flex item that
+   sizes to its content, so a width:100% table only fills that shrunk box — and
+   once the streaming `table-layout: fixed` lock is released the table visibly
+   collapses to content width ("renders full-width, then snaps narrow"). When the
+   bubble holds a table, let it grow to fill the row so the table keeps the full
+   column width. */
+.persona-message-bubble:has(table) {
+  width: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+}
+
 .persona-message-bubble table {
   width: 100%;
   border-collapse: collapse;
@@ -4015,3 +4027,15 @@
     animation: none !important;
   }
 }
+
+/* Event stream toolbar: a size container so "Copy All" collapses to icon-only
+ * in a narrow panel before the filter dropdown gets clipped. */
+[data-persona-root] .persona-event-toolbar {
+  container-type: inline-size;
+}
+
+@container (max-width: 390px) {
+  [data-persona-root] .persona-event-copy-all {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "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/components/event-stream-view.test.ts

@@ -223,7 +223,10 @@ async function loadModule() {
 // Helper: navigate the new DOM structure
 // container.children = [toolbarOuter, truncationBanner, eventsListWrapper]
 // toolbarOuter.children = [headerBar, searchBar]
-// headerBar.children = [title, countBadge, spacer, filterSelect, copyAllBtn]
+// headerBar.children = [spacer, filterSelect, copyAllBtn]
+//   (the total event count is shown in the "All events (N)" filter option; an
+//   optional throughput readout is prepended only when a getThroughput option
+//   is passed, which these tests don't)
 // searchBar.children = [searchIconWrapper, searchInput, searchClearBtn]
 // eventsListWrapper.children = [eventsList, noResultsMsg, scrollIndicator]
 
@@ -236,17 +239,15 @@ function getHeaderBar(element: any) {
 function getSearchBar(element: any) {
   return getToolbar(element).children[1]; // searchBar
 }
-function getTitle(element: any) {
-  return getHeaderBar(element).children[0]; // title span
-}
-function getCountBadge(element: any) {
-  return getHeaderBar(element).children[1]; // count badge span
-}
 function getFilterSelect(element: any) {
-  return getHeaderBar(element).children[3]; // filterSelect (after title, badge, spacer)
+  return getHeaderBar(element).children[1]; // filterSelect (after spacer)
 }
 function getCopyAllBtn(element: any) {
-  return getHeaderBar(element).children[4]; // copyAllBtn
+  return getHeaderBar(element).children[2]; // copyAllBtn
+}
+// The total count is carried by the "All events (N)" option, not a badge.
+function getAllEventsOptionText(element: any) {
+  return getFilterSelect(element).options[0].textContent;
 }
 function getSearchInput(element: any) {
   return getSearchBar(element).children[1]; // searchInput (after searchIconWrapper)
@@ -290,7 +291,7 @@ describe("createEventStreamView", () => {
   });
 
   describe("header bar", () => {
-    it("should show 'Event Stream' title and count badge", async () => {
+    it("should carry the total in the All events option (no title or count badge)", async () => {
       const { createEventStreamView } = await loadModule();
       const events = [makeEvent("step_chunk", 1)];
       const buffer = createMockBuffer(events);
@@ -298,11 +299,10 @@ describe("createEventStreamView", () => {
 
       update();
 
-      expect(getTitle(element).textContent).toBe("Events");
-      expect(getCountBadge(element).textContent).toBe("1");
+      expect(getAllEventsOptionText(element)).toBe("All events (1)");
     });
 
-    it("should update count badge when events change", async () => {
+    it("should update the total in the All events option when events change", async () => {
       vi.useFakeTimers();
       const { createEventStreamView } = await loadModule();
       const events = [makeEvent("step_chunk", 1)];
@@ -310,13 +310,13 @@ describe("createEventStreamView", () => {
       const { element, update } = createEventStreamView({ buffer: buffer as any });
 
       update();
-      expect(getCountBadge(element).textContent).toBe("1");
+      expect(getAllEventsOptionText(element)).toBe("All events (1)");
 
       vi.advanceTimersByTime(150);
       buffer.push(makeEvent("step_chunk", 2));
       update();
 
-      expect(getCountBadge(element).textContent).toBe("2");
+      expect(getAllEventsOptionText(element)).toBe("All events (2)");
       vi.useRealTimers();
     });
   });
@@ -336,9 +336,9 @@ describe("createEventStreamView", () => {
 
       const filterSelect = getFilterSelect(element);
 
-      // Should have "All events" + 2 type options
+      // Should have "All events" (with total) + 2 type options
       expect(filterSelect.options.length).toBe(3);
-      expect(filterSelect.options[0].textContent).toBe("All events");
+      expect(filterSelect.options[0].textContent).toBe("All events (3)");
       expect(filterSelect.options[1].textContent).toBe("flow_complete (1)");
       expect(filterSelect.options[2].textContent).toBe("step_chunk (2)");
     });
@@ -353,7 +353,7 @@ describe("createEventStreamView", () => {
       update();
 
       const filterSelect = getFilterSelect(element);
-      expect(filterSelect.options[0].textContent).toBe("All events");
+      expect(filterSelect.options[0].textContent).toBe("All events (1)");
       expect(filterSelect.options[1].textContent).toBe("step_chunk (1)");
 
       // Add another event and advance past throttle window
@@ -361,6 +361,7 @@ describe("createEventStreamView", () => {
       vi.advanceTimersByTime(150);
       update();
 
+      expect(filterSelect.options[0].textContent).toBe("All events (2)");
       expect(filterSelect.options[1].textContent).toBe("step_chunk (2)");
       vi.useRealTimers();
     });
@@ -1073,15 +1074,15 @@ describe("createEventStreamView", () => {
       update();
 
       const filterSelect = getFilterSelect(element);
-      expect(filterSelect.options[0].textContent).toBe("All events");
+      expect(filterSelect.options[0].textContent).toBe("All events (2)");
 
       // Simulate clearChat: buffer.clear() + view.update()
       vi.advanceTimersByTime(150);
       buffer.clear();
       update();
 
-      // Filter should show "All events"
-      expect(filterSelect.options[0].textContent).toBe("All events");
+      // Filter should show "All events" with a zero total
+      expect(filterSelect.options[0].textContent).toBe("All events (0)");
       // No type-specific options remain
       expect(filterSelect.options.length).toBe(1);
       vi.useRealTimers();
@@ -1102,7 +1103,7 @@ describe("createEventStreamView", () => {
       update();
 
       const filterSelect = getFilterSelect(element);
-      expect(filterSelect.options[0].textContent).toBe("All events");
+      expect(filterSelect.options[0].textContent).toBe("All events (0)");
 
       // New events arrive in new session
       vi.advanceTimersByTime(150);

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

@@ -507,7 +507,6 @@ export function createEventStreamView(
 
     // Elements we need references to across functions
     // These are assigned inside buildDefaultToolbar() which always runs
-    let countBadge!: HTMLElement;
     let filterSelect!: HTMLSelectElement;
     let copyAllBtn!: HTMLButtonElement;
     let searchInput!: HTMLInputElement;
@@ -522,7 +521,7 @@ export function createEventStreamView(
     function buildDefaultToolbar(): HTMLElement {
       const toolbarOuter = createElement(
         "div",
-        "persona-relative persona-flex persona-flex-col persona-flex-shrink-0"
+        "persona-event-toolbar persona-relative persona-flex persona-flex-col persona-flex-shrink-0"
       );
 
       // --- Header bar ---
@@ -532,36 +531,20 @@ export function createEventStreamView(
       );
       applyCustomClasses(headerBar, customClasses?.headerBar);
 
-      // Title
-      const title = createElement(
-        "span",
-        "persona-text-sm persona-font-medium persona-text-persona-primary persona-whitespace-nowrap"
-      );
-      title.textContent = "Events";
-
-      // Count badge
-      countBadge = createElement(
-        "span",
-        "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";
+      // The header leads straight into the controls. Context already names
+      // itself: the "All events (N)" filter option carries the total, the search
+      // placeholder names event payloads, and every row is an event.
 
-      // Inline throughput group: "Throughput  146.3 tok/s", grouped with the
-      // Events count. Hover reveals tokens · duration · source via a custom
-      // tooltip (shown instantly, unlike the slow native `title` delay).
+      // Inline throughput value, e.g. "146.3 tok/s". The "tok/s" unit is
+      // self-describing for this developer-facing inspector, so the value stands
+      // alone; its accessible name ("Throughput: <value>") and detailed breakdown
+      // live on the container's aria-label / hover tooltip (see updateThroughputSummary).
       if (getThroughput) {
         throughputContainer = createElement(
           "div",
-          "persona-relative persona-flex persona-items-center persona-gap-1.5 persona-whitespace-nowrap persona-ml-1"
+          "persona-relative persona-flex persona-items-center persona-gap-1.5 persona-whitespace-nowrap"
         );
         throughputContainer.style.cursor = "help";
-        // Label styled to match the "Events" title.
-        const throughputLabel = createElement(
-          "span",
-          "persona-text-sm persona-font-medium persona-text-persona-primary persona-whitespace-nowrap"
-        );
-        throughputLabel.textContent = "Throughput";
-        // Same bounding box + styling as the Events count badge.
         throughputValueEl = createElement(
           "span",
           "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 persona-tabular-nums"
@@ -594,7 +577,6 @@ export function createEventStreamView(
         throughputContainer.addEventListener("mouseenter", showTooltip);
         throughputContainer.addEventListener("mouseleave", hideTooltip);
 
-        throughputContainer.appendChild(throughputLabel);
         throughputContainer.appendChild(throughputValueEl);
       }
 
@@ -607,7 +589,7 @@ export function createEventStreamView(
       ) as HTMLSelectElement;
       const allOption = createElement("option", "") as HTMLOptionElement;
       allOption.value = "";
-      allOption.textContent = "All events";
+      allOption.textContent = "All events (0)";
       filterSelect.appendChild(allOption);
 
       // Copy All button
@@ -629,13 +611,11 @@ export function createEventStreamView(
       if (copyAllIcon) copyAllBtn.appendChild(copyAllIcon);
       const copyAllLabel = createElement(
         "span",
-        "persona-text-xs"
+        "persona-event-copy-all persona-text-xs"
       );
       copyAllLabel.textContent = "Copy All";
       copyAllBtn.appendChild(copyAllLabel);
 
-      headerBar.appendChild(title);
-      headerBar.appendChild(countBadge);
       if (throughputContainer) headerBar.appendChild(throughputContainer);
       headerBar.appendChild(headerSpacer);
       headerBar.appendChild(filterSelect);
@@ -734,20 +714,21 @@ export function createEventStreamView(
     function updateThroughputSummary(): void {
       if (!getThroughput || !throughputValueEl || !throughputContainer) return;
       const metric = getThroughput();
-      throughputValueEl.textContent = formatThroughputValue(metric);
-      // Detailed breakdown is revealed on hover via the custom tooltip; mirror
-      // it into aria-label for assistive tech. When there's nothing to show,
-      // hide the tooltip so an empty box never flashes on hover.
+      const value = formatThroughputValue(metric);
+      throughputValueEl.textContent = value;
+      // There's no visible "Throughput" label, so the accessible name carries it
+      // (plus the value). The detailed breakdown is revealed on hover via the
+      // custom tooltip and appended to the aria-label for assistive tech; when
+      // there's nothing to show, hide the tooltip so an empty box never flashes.
       const meta = formatThroughputMeta(metric);
       if (throughputTooltipEl) {
         throughputTooltipEl.textContent = meta;
         if (!meta) throughputTooltipEl.style.display = "none";
       }
-      if (meta) {
-        throughputContainer.setAttribute("aria-label", meta);
-      } else {
-        throughputContainer.removeAttribute("aria-label");
-      }
+      throughputContainer.setAttribute(
+        "aria-label",
+        meta ? `Throughput: ${value}, ${meta}` : `Throughput: ${value}`
+      );
     }
 
     // ========================================================================
@@ -838,8 +819,10 @@ export function createEventStreamView(
 
       const currentValue = filterSelect.value;
 
-      // Update "All events" option
-      filterSelect.options[0].textContent = `All events`;
+      // Update "All events" option. The total is carried here (like each type
+      // option carries its own count) so a narrow panel can hide the standalone
+      // "Events" label + count badge without losing the total.
+      filterSelect.options[0].textContent = `All events (${allEvents.length})`;
 
       if (typesChanged) {
         while (filterSelect.options.length > 1) {
@@ -940,11 +923,6 @@ export function createEventStreamView(
       const newCount = filteredEvents.length;
       const bufferHasEvents = buffer.getSize() > 0;
 
-      // Update count badge
-      if (countBadge) {
-        countBadge.textContent = String(buffer.getSize());
-      }
-
       // Show/hide no-results message
       if (newCount === 0 && bufferHasEvents && hasActiveFilters()) {
         noResultsMsg.textContent = searchTerm

package/src/styles/widget.css

@@ -1586,6 +1586,18 @@
 /* ============================================
    Markdown Table Styles
    ============================================ */
+/* Tables span the full chat column. The assistant bubble is a flex item that
+   sizes to its content, so a width:100% table only fills that shrunk box — and
+   once the streaming `table-layout: fixed` lock is released the table visibly
+   collapses to content width ("renders full-width, then snaps narrow"). When the
+   bubble holds a table, let it grow to fill the row so the table keeps the full
+   column width. */
+.persona-message-bubble:has(table) {
+  width: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+}
+
 .persona-message-bubble table {
   width: 100%;
   border-collapse: collapse;
@@ -4015,3 +4027,15 @@
     animation: none !important;
   }
 }
+
+/* Event stream toolbar: a size container so "Copy All" collapses to icon-only
+ * in a narrow panel before the filter dropdown gets clipped. */
+[data-persona-root] .persona-event-toolbar {
+  container-type: inline-size;
+}
+
+@container (max-width: 390px) {
+  [data-persona-root] .persona-event-copy-all {
+    display: none;
+  }
+}

package/src/ui.ts

@@ -2408,6 +2408,15 @@ export const createAgentExperience = (
     body.style.cssText = '';
     footer.style.cssText = '';
 
+    // Preserve the event-stream takeover across a layout-mode change. The
+    // cssText reset above wiped the `display: none` that toggleEventStreamOn
+    // set on the messages body, and none of the per-mode reapply branches below
+    // touch `display` — so without this the messages would reappear and stack
+    // above the event panel when the window crosses the fullscreen breakpoint.
+    if (eventStreamVisible) {
+      body.style.display = "none";
+    }
+
     const restoreBodyScrollTop = (): void => {
       if (prevBodyScrollTop <= 0) return;
       const ownerWindow = body.ownerDocument.defaultView ?? window;