@runtypelabs/persona 4.17.0 → 4.18.0

package/src/components/history-view/grouping.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  formatGroupLabel,
+  formatMessageCount,
+  formatRelativeTime,
+  groupConversations,
+  resolveGroupKey,
+} from "./grouping";
+import { HISTORY_VIEW_COPY_DEFAULTS as COPY } from "./copy";
+import type { HistoryConversationSummary } from "../../internal/history-provider";
+
+const NOW = new Date(2026, 2, 15, 12, 0, 0).getTime();
+const MIN = 60_000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+const at = (offsetMs: number): string => new Date(NOW - offsetMs).toISOString();
+
+const summary = (
+  id: string,
+  offsetMs: number
+): HistoryConversationSummary => ({
+  id,
+  title: id,
+  targetId: "t1",
+  preview: null,
+  messageCount: 2,
+  createdAt: at(offsetMs),
+  updatedAt: at(offsetMs),
+});
+
+describe("history grouping", () => {
+  it("resolves calendar-relative group keys", () => {
+    expect(resolveGroupKey(at(30 * MIN), NOW)).toBe("today");
+    expect(resolveGroupKey(at(26 * HOUR), NOW)).toBe("yesterday");
+    expect(resolveGroupKey(at(4 * DAY), NOW)).toBe("previous-7-days");
+    expect(resolveGroupKey(at(20 * DAY), NOW)).toBe("previous-30-days");
+    expect(resolveGroupKey(at(100 * DAY), NOW)).toMatch(/^month:\d{4}-\d{1,2}$/);
+  });
+
+  it("treats future and unparseable timestamps as today", () => {
+    expect(resolveGroupKey(at(-5 * MIN), NOW)).toBe("today");
+    expect(resolveGroupKey("not-a-date", NOW)).toBe("today");
+  });
+
+  it("keeps server order and opens a group only when the key changes", () => {
+    const groups = groupConversations(
+      [
+        summary("a", 10 * MIN),
+        summary("b", 2 * HOUR),
+        summary("c", 26 * HOUR),
+        summary("d", 4 * DAY),
+      ],
+      NOW,
+      COPY
+    );
+    expect(groups.map((group) => group.key)).toEqual([
+      "today",
+      "yesterday",
+      "previous-7-days",
+    ]);
+    expect(groups[0].items.map((item) => item.id)).toEqual(["a", "b"]);
+    expect(groups[0].label).toBe("Today");
+  });
+
+  it("folds the time buckets into one flat group with grouping none", () => {
+    const groups = groupConversations(
+      [
+        summary("a", 10 * MIN),
+        summary("b", 26 * HOUR),
+        summary("c", 100 * DAY),
+      ],
+      NOW,
+      COPY,
+      "none"
+    );
+    expect(groups.map((group) => group.key)).toEqual(["recent"]);
+    expect(groups[0].items.map((item) => item.id)).toEqual(["a", "b", "c"]);
+    // The label exists for the list's accessible name; the view renders it
+    // sr-only under the identical list heading.
+    expect(groups[0].label).toBe("Conversations");
+  });
+
+  it("keeps the pinned starred group with grouping none", () => {
+    const groups = groupConversations(
+      [
+        summary("a", 10 * MIN),
+        { ...summary("pinned", 26 * HOUR), starred: true },
+        summary("b", 4 * DAY),
+      ],
+      NOW,
+      COPY,
+      "none"
+    );
+    expect(groups.map((group) => group.key)).toEqual(["starred", "recent"]);
+    expect(groups[0].items.map((item) => item.id)).toEqual(["pinned"]);
+    expect(groups[1].items.map((item) => item.id)).toEqual(["a", "b"]);
+  });
+
+  it("returns only the starred group when every row is pinned under grouping none", () => {
+    const groups = groupConversations(
+      [{ ...summary("pinned", 26 * HOUR), starred: true }],
+      NOW,
+      COPY,
+      "none"
+    );
+    expect(groups.map((group) => group.key)).toEqual(["starred"]);
+  });
+
+  it("does not reorder rows that arrive out of recency order", () => {
+    const groups = groupConversations(
+      [summary("old", 4 * DAY), summary("new", 10 * MIN)],
+      NOW,
+      COPY
+    );
+    expect(groups.map((group) => group.key)).toEqual([
+      "previous-7-days",
+      "today",
+    ]);
+  });
+
+  it("labels month groups from the item timestamp", () => {
+    const key = resolveGroupKey(at(100 * DAY), NOW);
+    const label = formatGroupLabel(key, at(100 * DAY), NOW, COPY);
+    expect(label).toMatch(/^[A-Za-z]+ \d{4}$/);
+  });
+
+  it("formats short unwrapped relative time", () => {
+    expect(formatRelativeTime(at(20_000), NOW, COPY)).toBe("now");
+    expect(formatRelativeTime(at(12 * MIN), NOW, COPY)).toBe("12m");
+    expect(formatRelativeTime(at(2 * HOUR), NOW, COPY)).toBe("2h");
+    expect(formatRelativeTime(at(3 * DAY), NOW, COPY)).toBe("3d");
+    expect(formatRelativeTime(at(20 * DAY), NOW, COPY)).toBe("2w");
+    expect(formatRelativeTime(at(800 * DAY), NOW, COPY)).toBe("2y");
+  });
+
+  it("pluralizes the message count", () => {
+    expect(formatMessageCount(1, COPY)).toBe("1 message");
+    expect(formatMessageCount(4, COPY)).toBe("4 messages");
+  });
+});

package/src/components/history-view/grouping.ts

@@ -0,0 +1,142 @@
+/**
+ * Client-side time grouping and relative-time formatting for the Messages list.
+ *
+ * Grouping never reorders: it walks the server order and opens a new group
+ * whenever the resolved key changes, so an appended page merges into the
+ * trailing group when its first item shares that group's key.
+ */
+
+import { fillTemplate, type ResolvedHistoryViewCopy } from "./copy";
+import type { HistoryConversationSummary } from "../../internal/history-provider";
+
+export type HistoryGroupKey =
+  | "starred"
+  | "today"
+  | "yesterday"
+  | "previous-7-days"
+  | "previous-30-days"
+  /** `month:<year>-<zero-based month>` */
+  | `month:${string}`
+  /** The single flat group `grouping: "none"` folds the time buckets into. */
+  | "recent";
+
+/** `features.history.grouping`. Starred rows keep their pinned group in both. */
+export type HistoryGroupingMode = "time" | "none";
+
+export interface HistoryGroup {
+  key: HistoryGroupKey;
+  label: string;
+  items: HistoryConversationSummary[];
+}
+
+const DAY_MS = 86_400_000;
+
+function startOfLocalDay(ms: number): number {
+  const date = new Date(ms);
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+}
+
+/** Unparseable timestamps sort into the newest group rather than disappearing. */
+function parse(timestamp: string, fallback: number): number {
+  const ms = Date.parse(timestamp);
+  return Number.isFinite(ms) ? ms : fallback;
+}
+
+export function resolveGroupKey(
+  updatedAt: string,
+  nowMs: number
+): HistoryGroupKey {
+  const ms = parse(updatedAt, nowMs);
+  const today = startOfLocalDay(nowMs);
+  if (ms >= today) return "today";
+  if (ms >= today - DAY_MS) return "yesterday";
+  if (ms >= today - 7 * DAY_MS) return "previous-7-days";
+  if (ms >= today - 30 * DAY_MS) return "previous-30-days";
+  const date = new Date(ms);
+  return `month:${date.getFullYear()}-${date.getMonth()}`;
+}
+
+export function formatGroupLabel(
+  key: HistoryGroupKey,
+  updatedAt: string,
+  nowMs: number,
+  copy: ResolvedHistoryViewCopy
+): string {
+  if (key === "today") return copy.groupToday;
+  if (key === "yesterday") return copy.groupYesterday;
+  if (key === "previous-7-days") return copy.groupPrevious7Days;
+  if (key === "previous-30-days") return copy.groupPrevious30Days;
+  const date = new Date(parse(updatedAt, nowMs));
+  return fillTemplate(copy.groupMonthYear, {
+    month: date.toLocaleString(undefined, { month: "long" }),
+    year: date.getFullYear(),
+  });
+}
+
+export function groupConversations(
+  items: readonly HistoryConversationSummary[],
+  nowMs: number,
+  copy: ResolvedHistoryViewCopy,
+  grouping: HistoryGroupingMode = "time"
+): HistoryGroup[] {
+  // Starred rows pin into one leading group (server order preserved within
+  // it); everything else keeps the time grouping.
+  const starred = items.filter((item) => item.starred);
+  const groups: HistoryGroup[] =
+    starred.length > 0
+      ? [{ key: "starred", label: copy.groupStarred, items: starred }]
+      : [];
+  if (grouping === "none") {
+    // One flat group. Its label exists for the list's accessible name only:
+    // the view renders it sr-only, since the list heading directly above
+    // already says the same thing.
+    const rest = items.filter((item) => !item.starred);
+    if (rest.length > 0) {
+      groups.push({ key: "recent", label: copy.conversationsTitle, items: rest });
+    }
+    return groups;
+  }
+  for (const item of items) {
+    if (item.starred) continue;
+    const key = resolveGroupKey(item.updatedAt, nowMs);
+    const current = groups[groups.length - 1];
+    if (current && current.key === key) {
+      current.items.push(item);
+      continue;
+    }
+    groups.push({
+      key,
+      label: formatGroupLabel(key, item.updatedAt, nowMs, copy),
+      items: [item],
+    });
+  }
+  return groups;
+}
+
+/** Short, unwrapped, ambient form: "now", "12m", "2h", "3d", "5w", "2y". */
+export function formatRelativeTime(
+  updatedAt: string,
+  nowMs: number,
+  copy: ResolvedHistoryViewCopy
+): string {
+  const elapsed = Math.max(0, nowMs - parse(updatedAt, nowMs));
+  const minutes = Math.floor(elapsed / 60_000);
+  if (minutes < 1) return copy.relativeNow;
+  if (minutes < 60) return fillTemplate(copy.relativeMinutes, { value: minutes });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return fillTemplate(copy.relativeHours, { value: hours });
+  const days = Math.floor(hours / 24);
+  if (days < 7) return fillTemplate(copy.relativeDays, { value: days });
+  const weeks = Math.floor(days / 7);
+  if (days < 365) return fillTemplate(copy.relativeWeeks, { value: weeks });
+  return fillTemplate(copy.relativeYears, { value: Math.floor(days / 365) });
+}
+
+export function formatMessageCount(
+  count: number,
+  copy: ResolvedHistoryViewCopy
+): string {
+  if (count === 1) return copy.messageCountLabelOne;
+  return fillTemplate(copy.messageCountLabel, { count });
+}

package/src/components/history-view/icons.ts

@@ -0,0 +1,73 @@
+/**
+ * The lucide glyphs the Messages view needs, inlined.
+ *
+ * `utils/icons.ts` would drag the whole ~130-icon registry into this lazy
+ * chunk; the chunk exists to stay small. Path data matches lucide 1:1.
+ */
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+const PATHS = {
+  "arrow-left": ["m12 19-7-7 7-7", "M19 12H5"],
+  plus: ["M5 12h14", "M12 5v14"],
+  // Rendered filled at ~11px, so a plain 5-point polygon beats lucide's long
+  // rounded path byte-for-byte with no visible difference.
+  star: ["m12 2 2.9 6.2 6.8.7-5.1 4.5 1.4 6.6-6-3.4-6 3.4 1.4-6.6-5.1-4.5 6.8-.7z"],
+  x: ["M18 6 6 18", "m6 6 12 12"],
+  // PanelLeft is a rounded rect plus this divider; the rect is added below.
+  "panel-left": ["M9 3v18"],
+  // Monitor is a rounded rect (added below) plus the stand.
+  monitor: ["M8 21h8", "M12 17v4"],
+  ellipsis: [] as string[],
+} as const;
+
+/** The rounded-rect halves of the two-part glyphs above. */
+const RECTS: Partial<Record<keyof typeof PATHS, [number, number, number, number]>> = {
+  "panel-left": [3, 3, 18, 18],
+  monitor: [2, 3, 20, 14],
+};
+
+export type HistoryIconName = keyof typeof PATHS;
+
+export function historyIcon(name: HistoryIconName, size = 20): SVGElement {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+
+  if (name === "ellipsis") {
+    for (const cx of [12, 19, 5]) {
+      const circle = document.createElementNS(SVG_NS, "circle");
+      circle.setAttribute("cx", String(cx));
+      circle.setAttribute("cy", "12");
+      circle.setAttribute("r", "1");
+      svg.appendChild(circle);
+    }
+    return svg;
+  }
+
+  const box = RECTS[name];
+  if (box) {
+    const rect = document.createElementNS(SVG_NS, "rect");
+    rect.setAttribute("x", String(box[0]));
+    rect.setAttribute("y", String(box[1]));
+    rect.setAttribute("width", String(box[2]));
+    rect.setAttribute("height", String(box[3]));
+    rect.setAttribute("rx", "2");
+    svg.appendChild(rect);
+  }
+
+  for (const d of PATHS[name]) {
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}

package/src/components/history-view/rows.ts

@@ -0,0 +1,341 @@
+/**
+ * Conversation row + its overflow menu.
+ *
+ * The row is a whole-row button; the overflow trigger is a SIBLING absolutely
+ * positioned over it, because a button cannot legally nest inside a button.
+ *
+ * Hierarchy: avatar, then title over preview with the relative time aligned to
+ * the title. A conversation without a server title promotes its preview to the
+ * title line rather than rendering an empty one; nothing is derived locally.
+ */
+
+import { createNode, cx } from "../../utils/dom";
+import { historyIcon } from "./icons";
+import { formatMessageCount, formatRelativeTime } from "./grouping";
+import type { ResolvedHistoryViewCopy } from "./copy";
+import type { HistoryConversationSummary } from "../../internal/history-provider";
+
+export type RowPending = "opening" | "deleting" | null;
+
+export interface ConversationRowOptions {
+  conversation: HistoryConversationSummary;
+  active: boolean;
+  pending: RowPending;
+  /** A view-level action is in flight; every row action is inert. */
+  busy: boolean;
+  menuOpen: boolean;
+  /** Row-adjacent, retryable failure text. */
+  error: { message: string; retry: () => void } | null;
+  /** Image URL or glyph for the leading avatar; empty/false omits the block. */
+  avatar: string | false | undefined;
+  /** Row overflow menu (delete). False drops the trigger entirely. */
+  showDelete: boolean;
+  nowMs: number;
+  copy: ResolvedHistoryViewCopy;
+  onOpen: () => void;
+  onToggleMenu: () => void;
+  onCloseMenu: (options?: { restoreFocus?: boolean }) => void;
+  onDelete: () => void;
+}
+
+/** Same source shape as the header icon: a URL renders as an image, else a glyph. */
+const AVATAR_URL = /^(https?:|\/|data:)/i;
+
+function buildAvatar(source: string): HTMLElement {
+  const holder = createNode("span", {
+    className: "persona-history-row-avatar",
+    attrs: { "aria-hidden": "true" },
+  });
+  if (AVATAR_URL.test(source)) {
+    holder.appendChild(
+      createNode("img", { attrs: { src: source, alt: "", loading: "lazy" } })
+    );
+  } else {
+    holder.textContent = source;
+  }
+  return holder;
+}
+
+export const rowFocusKey = (id: string): string => `row:${id}`;
+export const menuFocusKey = (id: string): string => `menu:${id}`;
+export const menuItemFocusKey = (id: string): string => `menu-item:${id}`;
+
+export function buildConversationRow(
+  options: ConversationRowOptions
+): HTMLLIElement {
+  const { conversation, copy, busy, pending } = options;
+  const inert = busy || pending !== null;
+
+  // A placeholder-titled conversation promotes its preview instead of showing
+  // an empty title line above it.
+  const titled = conversation.title.trim().length > 0;
+  // Filled miniature of the chunk's stroke star; sr text reuses the group label.
+  const starMark = conversation.starred
+    ? (() => {
+        const glyph = historyIcon("star", 11);
+        glyph.setAttribute("fill", "currentColor");
+        glyph.setAttribute("stroke-width", "1");
+        return createNode(
+          "span",
+          { className: "persona-history-row-star" },
+          glyph,
+          createNode("span", {
+            className: "persona-history-sr-only",
+            text: copy.groupStarred,
+          })
+        );
+      })()
+    : null;
+
+  const head = createNode(
+    "div",
+    { className: "persona-history-row-head" },
+    createNode("span", {
+      className: "persona-history-row-title persona-history-truncate",
+      text: titled ? conversation.title : (conversation.preview ?? ""),
+    }),
+    starMark,
+    createNode("time", {
+      className: "persona-history-row-time",
+      attrs: { datetime: conversation.updatedAt },
+      text: formatRelativeTime(conversation.updatedAt, options.nowMs, copy),
+    })
+  );
+
+  const preview =
+    titled && conversation.preview
+      ? createNode("span", {
+          className: "persona-history-row-preview persona-history-truncate",
+          text: conversation.preview,
+        })
+      : null;
+
+  const rowButton = createNode(
+    "button",
+    {
+      className: cx(
+        "persona-history-row",
+        options.active && "persona-history-row--active",
+        pending && `persona-history-row--${pending}`
+      ),
+      attrs: {
+        type: "button",
+        "data-persona-history-focus": rowFocusKey(conversation.id),
+        "data-persona-history-conversation": conversation.id,
+        ...(options.active ? { "aria-current": "page" } : {}),
+        ...(inert ? { "aria-disabled": "true" } : {}),
+        ...(pending ? { "aria-busy": "true" } : {}),
+      },
+    },
+    options.avatar ? buildAvatar(options.avatar) : null,
+    createNode(
+      "div",
+      { className: "persona-history-row-body" },
+      head,
+      preview,
+      createNode("span", {
+        className: "persona-history-row-count persona-history-sr-only",
+        text: formatMessageCount(conversation.messageCount, copy),
+      })
+    )
+  );
+  rowButton.addEventListener("click", () => {
+    if (inert) return;
+    options.onOpen();
+  });
+
+  const menuButton = options.showDelete
+    ? buildMenuTrigger({
+        className: "persona-history-row-menu-button",
+        label: `${copy.rowActionsLabel}: ${conversation.title}`,
+        focusKey: menuFocusKey(conversation.id),
+        open: options.menuOpen,
+        inert,
+        onToggle: options.onToggleMenu,
+      })
+    : null;
+
+  const item = createNode(
+    "li",
+    {
+      className: cx(
+        "persona-history-item",
+        !options.showDelete && "persona-history-item--no-menu"
+      ),
+      attrs: { "data-persona-history-item": conversation.id },
+    },
+    rowButton,
+    menuButton,
+    options.menuOpen && options.showDelete ? buildRowMenu(options) : null,
+    options.error ? buildRowError(options.error, copy, conversation.id) : null
+  );
+  return item;
+}
+
+function buildRowMenu(options: ConversationRowOptions): HTMLElement {
+  const { conversation, copy } = options;
+  return buildOverflowMenu({
+    label: `${copy.rowActionsLabel}: ${conversation.title}`,
+    items: [
+      {
+        label: copy.deleteConversationLabel,
+        focusKey: menuItemFocusKey(conversation.id),
+        danger: true,
+        onSelect: options.onDelete,
+      },
+    ],
+    onCloseMenu: options.onCloseMenu,
+  });
+}
+
+export interface MenuTriggerOptions {
+  /** Added to the shared icon-button class. */
+  className: string;
+  label: string;
+  focusKey: string;
+  open: boolean;
+  /** Keeps focus but does not open. Read live, so an owner may re-set it. */
+  inert: boolean;
+  iconSize?: number;
+  onToggle: () => void;
+}
+
+/**
+ * The ellipsis trigger both menus hang off. State is read back from the
+ * element, so an owner that mutates the attributes in place stays consistent.
+ */
+export function buildMenuTrigger(options: MenuTriggerOptions): HTMLElement {
+  const button = createNode("button", {
+    className: cx("persona-history-icon-button", options.className),
+    attrs: {
+      type: "button",
+      "aria-label": options.label,
+      "aria-haspopup": "menu",
+      "aria-expanded": options.open ? "true" : "false",
+      "data-persona-history-focus": options.focusKey,
+      ...(options.inert ? { "aria-disabled": "true" } : {}),
+    },
+  });
+  button.appendChild(historyIcon("ellipsis", options.iconSize));
+  const blocked = (): boolean =>
+    button.getAttribute("aria-disabled") === "true";
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (blocked()) return;
+    options.onToggle();
+  });
+  button.addEventListener("keydown", (event) => {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    event.preventDefault();
+    if (blocked() || button.getAttribute("aria-expanded") === "true") return;
+    options.onToggle();
+  });
+  return button;
+}
+
+export interface HistoryMenuItemSpec {
+  label: string;
+  /** `data-persona-history-focus` value, so a re-render can land focus back. */
+  focusKey: string;
+  /** Destructive (red) styling. Host list actions default to neutral text. */
+  danger?: boolean;
+  onSelect: () => void;
+}
+
+export interface OverflowMenuOptions {
+  /** Accessible name of the menu itself. */
+  label: string;
+  items: HistoryMenuItemSpec[];
+  onCloseMenu: (options?: { restoreFocus?: boolean }) => void;
+}
+
+/**
+ * The one popover shape this view uses: rows and the list-level trigger share
+ * it, so keyboard behaviour is defined once.
+ */
+export function buildOverflowMenu(options: OverflowMenuOptions): HTMLElement {
+  const menu = createNode("div", {
+    className: "persona-history-menu",
+    attrs: { role: "menu", "aria-label": options.label },
+  });
+
+  for (const spec of options.items) {
+    const item = createNode("button", {
+      className: cx(
+        "persona-history-menu-item",
+        spec.danger && "persona-history-menu-item--danger"
+      ),
+      text: spec.label,
+      attrs: {
+        type: "button",
+        role: "menuitem",
+        tabindex: "0",
+        "data-persona-history-focus": spec.focusKey,
+      },
+    });
+    item.addEventListener("click", () => {
+      options.onCloseMenu();
+      spec.onSelect();
+    });
+    menu.appendChild(item);
+  }
+
+  menu.addEventListener("keydown", (event) => {
+    const items = Array.from(
+      menu.querySelectorAll<HTMLElement>('[role="menuitem"]')
+    );
+    if (items.length === 0) return;
+    const index = items.indexOf(document.activeElement as HTMLElement);
+    // Escape is handled at the view root so it can stop propagation before the
+    // shell's own Escape handler sees it.
+    if (event.key === "Tab") {
+      options.onCloseMenu({ restoreFocus: true });
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      items[(index + 1 + items.length) % items.length]?.focus();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      items[(index - 1 + items.length) % items.length]?.focus();
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      items[0]?.focus();
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      items[items.length - 1]?.focus();
+    }
+  });
+  return menu;
+}
+
+function buildRowError(
+  error: { message: string; retry: () => void },
+  copy: ResolvedHistoryViewCopy,
+  conversationId: string
+): HTMLElement {
+  const retry = createNode("button", {
+    className: "persona-history-secondary persona-history-state-action",
+    text: copy.retryLabel,
+    attrs: {
+      type: "button",
+      "data-persona-history-focus": `row-retry:${conversationId}`,
+    },
+  });
+  retry.addEventListener("click", error.retry);
+  return createNode(
+    "div",
+    {
+      className: "persona-history-row-error",
+      attrs: { role: "alert" },
+    },
+    createNode("span", { text: error.message }),
+    retry
+  );
+}