@abot-ai/runtime 1.0.0 → 1.2.0

package/dist/src/web-ui/app/components/conversation-sources.js

@@ -0,0 +1,182 @@
+import {
+  parseWebSourceUrl,
+  webSourceFaviconUrl,
+} from "../lib/source-url-policy.js";
+
+const PRESENTATION_LABELS = {
+  content: { short: "Content", detail: "Content returned" },
+  snippet: { short: "Snippet", detail: "Snippet returned" },
+  reference: { short: "Link", detail: "Reference returned" },
+  omitted: { short: "Omitted", detail: "Omitted from tool output" },
+};
+
+function sourceStatus(source) {
+  if (source.presentation === "unknown") {
+    const label = source.retrieval === "retrieved" ? "Fetched" : "Found";
+    return { short: label, detail: label };
+  }
+  return PRESENTATION_LABELS[source.presentation] || { short: "", detail: "" };
+}
+
+function sourceDescription(source, url, status) {
+  const details = [source.title, url.href, status.detail];
+  if (source.retrieval === "failed") details.push("Fetch failed");
+  if (source.contentTruncated) details.push("Partial content");
+  const requested = parseWebSourceUrl(source.requestedUrl);
+  if (requested && requested.href !== url.href) {
+    details.push(`Requested: ${requested.href}`);
+  }
+  return details.filter(Boolean).join("\n");
+}
+
+function element(documentRoot, tag, className, text = "") {
+  const node = documentRoot.createElement(tag);
+  node.className = className;
+  node.textContent = text;
+  return node;
+}
+
+function sourceIcon(documentRoot, url) {
+  const icon = element(documentRoot, "span", "conversation-source-icon");
+  icon.setAttribute("aria-hidden", "true");
+  const hostname = parseWebSourceUrl(url)?.hostname || "";
+  const initial =
+    hostname
+      .replace(/^www\./u, "")
+      .charAt(0)
+      .toUpperCase() || "↗";
+  const fallback = element(
+    documentRoot,
+    "span",
+    "conversation-source-initial",
+    initial,
+  );
+  icon.appendChild(fallback);
+  const iconUrl = webSourceFaviconUrl(url);
+  if (!iconUrl) return icon;
+  const image = documentRoot.createElement("img");
+  image.className = "conversation-source-favicon";
+  image.alt = "";
+  image.width = 16;
+  image.height = 16;
+  image.loading = "lazy";
+  image.decoding = "async";
+  image.referrerPolicy = "no-referrer";
+  image.addEventListener("load", () => {
+    fallback.hidden = true;
+  });
+  image.addEventListener("error", () => {
+    image.hidden = true;
+    fallback.hidden = false;
+  });
+  image.src = iconUrl;
+  icon.appendChild(image);
+  return icon;
+}
+
+function sourceCard(documentRoot, source) {
+  const url = parseWebSourceUrl(source.url);
+  if (!url) return null;
+  const item = element(documentRoot, "li", "conversation-source-card");
+  const link = element(documentRoot, "a", "conversation-source-link");
+  const status = sourceStatus(source);
+  const description = sourceDescription(source, url, status);
+  link.href = url.href;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.title = description;
+  link.setAttribute("aria-label", description);
+  link.appendChild(sourceIcon(documentRoot, url.href));
+  const domain = element(
+    documentRoot,
+    "span",
+    "conversation-source-domain",
+    url.hostname,
+  );
+  domain.dir = "ltr";
+  link.appendChild(domain);
+  const failed = source.retrieval === "failed";
+  const label = failed ? `${status.short} · failed` : status.short;
+  const badge = element(
+    documentRoot,
+    "span",
+    "conversation-source-status",
+    label,
+  );
+  badge.setAttribute("aria-hidden", "true");
+  if (failed) badge.classList.add("is-failed");
+  link.appendChild(badge);
+  item.appendChild(link);
+  return item;
+}
+
+export function createConversationSources({ documentRoot = document } = {}) {
+  function createNode(groups = []) {
+    if (!Array.isArray(groups) || groups.length === 0) return null;
+    const section = element(documentRoot, "section", "conversation-sources");
+    section.setAttribute("aria-label", "Web sources");
+    const heading = element(
+      documentRoot,
+      "div",
+      "conversation-sources-heading",
+    );
+    heading.appendChild(
+      element(documentRoot, "h3", "conversation-sources-title", "Web sources"),
+    );
+    heading.title = "What the tools returned";
+    section.appendChild(heading);
+
+    groups.forEach((group, index) => {
+      const block = element(documentRoot, "div", "conversation-sources-group");
+      const header = element(
+        documentRoot,
+        "div",
+        "conversation-sources-group-header",
+      );
+      const operation = group.operation === "fetch" ? "Fetch" : "Search";
+      header.appendChild(
+        element(
+          documentRoot,
+          "h4",
+          "conversation-sources-operation",
+          `${operation} · ${index + 1}`,
+        ),
+      );
+      if (group.provider) {
+        const provider = group.provider === "light" ? "Light" : "Brave";
+        header.appendChild(
+          element(
+            documentRoot,
+            "span",
+            "conversation-sources-provider",
+            provider,
+          ),
+        );
+      }
+      const list = element(documentRoot, "ol", "conversation-sources-list");
+      for (const source of group.sources) {
+        const card = sourceCard(documentRoot, source);
+        if (card) list.appendChild(card);
+      }
+      block.append(header, list);
+      if (group.omittedSourceCount > 0) {
+        const notice = element(
+          documentRoot,
+          "p",
+          "conversation-sources-omitted",
+          `${group.omittedSourceCount} additional sources unavailable in this display`,
+        );
+        notice.title =
+          "Source metadata exceeded the result size limit. Tool output was preserved.";
+        notice.setAttribute(
+          "aria-label",
+          `${notice.textContent}. ${notice.title}`,
+        );
+        block.appendChild(notice);
+      }
+      section.appendChild(block);
+    });
+    return section;
+  }
+  return { createNode };
+}

package/dist/src/web-ui/app/components/conversation-view.js

@@ -1,15 +1,19 @@
 import { isNearScrollEnd, pinScrollToEnd } from "../ui-behavior.js";
 import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
+import { createConversationActivity } from "./conversation-activity.js";
+import { createComposerPlan } from "./composer-plan.js";
+import { buildComposerPlanModel } from "../lib/composer-plan-model.js";
 import {
-  createConversationActivity,
-  createConversationContextWindow,
-} from "./conversation-activity.js";
+  buildComposerContextWindowModel,
+  createComposerContextWindow,
+} from "./composer-context-window.js";
 import { createMessageAttachments } from "./message-attachments.js";
 import { createMessageTimestamp } from "./message-timestamp.js";
 
 export function createConversationView({
   dom,
   getMessages,
+  getActiveRequestId = () => "",
   getActivityForMessage,
   getPendingApproval,
   createApprovalCard,
@@ -20,7 +24,12 @@ export function createConversationView({
   viewport = window,
 }) {
   const conversationActivity = createConversationActivity({ documentRoot });
-  const conversationContextWindow = createConversationContextWindow({
+  const composerContextWindow = createComposerContextWindow({
+    container: dom.composerContextWindow,
+    documentRoot,
+  });
+  const composerPlan = createComposerPlan({
+    container: dom.composerPlan,
     documentRoot,
   });
   const messageAttachments = createMessageAttachments({
@@ -132,8 +141,6 @@ export function createConversationView({
         streaming: Boolean(message.streaming),
         ...getActivityForMessage(message),
       };
-      const contextWindow = conversationContextWindow.createNode(activityInput);
-      if (contextWindow) bubble.appendChild(contextWindow);
       const activity = conversationActivity.createNode(activityInput);
       if (activity) bubble.appendChild(activity);
     }
@@ -185,7 +192,25 @@ export function createConversationView({
     return row;
   }
 
+  function renderContextWindow() {
+    composerContextWindow.render(
+      buildComposerContextWindowModel({
+        messages: getMessages(),
+        activeRequestId: getActiveRequestId(),
+        getActivityForMessage,
+      }),
+    );
+  }
+
   function render() {
+    renderContextWindow();
+    composerPlan.render(
+      buildComposerPlanModel({
+        messages: getMessages(),
+        activeRequestId: getActiveRequestId(),
+        getActivityForMessage,
+      }),
+    );
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
       viewState.followMessages || isNearScrollEnd(dom.messagesList);
@@ -248,6 +273,8 @@ export function createConversationView({
     cancelScheduledMessageRender();
     cancelScheduledThinkingRender();
     conversationActivity.reset();
+    composerContextWindow.reset();
+    composerPlan.reset();
   }
 
   function forgetThinkingDisclosure(messageId) {
@@ -271,6 +298,7 @@ export function createConversationView({
     cancelScheduledThinkingRender,
     forgetThinkingDisclosure,
     render,
+    renderContextWindow,
     reset,
     scheduleMessageRender,
     scheduleThinkingRender,

package/dist/src/web-ui/app/components/long-term-memory/icons.js

@@ -0,0 +1,16 @@
+const MEMORY_ICONS = Object.freeze({
+  add: '<path d="M12 5v14M5 12h14" />',
+  close: '<path d="m6 6 12 12M18 6 6 18" />',
+  delete: '<path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13M10 11v5M14 11v5" />',
+  edit: '<path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z" />',
+  expand: '<path d="m7 10 5 5 5-5" />',
+  refresh:
+    '<path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5" />',
+  search: '<circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" />',
+});
+
+export function renderMemoryIcon(name) {
+  const paths = MEMORY_ICONS[name];
+  if (!paths) return "";
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+}

package/dist/src/web-ui/app/components/long-term-memory/manager.js

@@ -0,0 +1,192 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import {
+  readMemoryEditorInput,
+  renderMemoryRecordEditor,
+} from "./record-editor.js";
+import { renderMemoryIcon } from "./icons.js";
+import { renderMemoryRecordList } from "./record-list.js";
+import {
+  buildMemoryDeleteConfirmation,
+  createMemoryManagerView,
+} from "./view-model.js";
+
+export function createLongTermMemoryManager({
+  actions,
+  confirmDelete = (message) => window.confirm(message),
+}) {
+  let root = null;
+  let view = null;
+  let focusedEditor = "";
+
+  function mount(nextRoot) {
+    if (root === nextRoot) return;
+    unbind();
+    root = nextRoot;
+    root?.addEventListener("click", handleClick);
+    root?.addEventListener("submit", handleSubmit);
+    root?.addEventListener("keydown", handleKeydown);
+    render(actions.snapshot());
+  }
+
+  function unbind() {
+    root?.removeEventListener("click", handleClick);
+    root?.removeEventListener("submit", handleSubmit);
+    root?.removeEventListener("keydown", handleKeydown);
+  }
+
+  function render(snapshot) {
+    view = createMemoryManagerView(snapshot);
+    if (!root) return;
+    root.innerHTML = managerMarkup(view);
+    focusEditorWhenOpened();
+  }
+
+  function handleClick(event) {
+    const button = event.target.closest("[data-memory-management-action]");
+    if (!button) return;
+    const action = button.dataset.memoryManagementAction;
+    const recordId = button.dataset.memoryId || "";
+    if (action === "toggle-content") {
+      toggleMemoryContent(button);
+      return;
+    }
+    if (action === "refresh") void actions.refresh();
+    if (action === "create") actions.beginCreate();
+    if (action === "edit") actions.beginEdit(recordId);
+    if (action === "cancel-edit") actions.cancelEdit();
+    if (action === "clear-search") void actions.search("");
+    if (action === "previous-page") void actions.changePage(-1);
+    if (action === "next-page") void actions.changePage(1);
+    if (action === "delete") confirmAndDelete(recordId);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (event.target.matches("[data-memory-search-form]")) {
+      const input = root.querySelector("[data-memory-search-input]");
+      void actions.search(input?.value || "");
+      return;
+    }
+    if (!event.target.matches("[data-memory-editor]")) return;
+    const input = readMemoryEditorInput(root);
+    if (input) void actions.save(input);
+  }
+
+  function handleKeydown(event) {
+    if (event.key !== "Escape" || !view?.editor || view.mutation) return;
+    actions.cancelEdit();
+  }
+
+  function confirmAndDelete(recordId) {
+    const record = view?.items.find((item) => item.id === recordId);
+    if (!record) return;
+    if (!confirmDelete(buildMemoryDeleteConfirmation(record))) return;
+    void actions.deleteMemory(record.id);
+  }
+
+  function toggleMemoryContent(button) {
+    const record = button.closest("[data-memory-record-id]");
+    if (!record) return;
+    const expanded = record.classList.toggle("expanded");
+    const label = expanded ? "Collapse memory" : "Expand memory";
+    button.setAttribute("aria-expanded", String(expanded));
+    button.setAttribute("aria-label", label);
+    button.setAttribute("title", label);
+  }
+
+  function focusEditorWhenOpened() {
+    const editorKey = view?.editor
+      ? `${view.editor.mode}:${view.editor.recordId}`
+      : "";
+    if (!editorKey) {
+      focusedEditor = "";
+      return;
+    }
+    if (editorKey === focusedEditor) return;
+    focusedEditor = editorKey;
+    queueMicrotask(() =>
+      root?.querySelector("[data-memory-editor-content]")?.focus(),
+    );
+  }
+
+  return Object.freeze({ mount, render });
+}
+
+function managerMarkup(view) {
+  return `
+    <section class="memory-management-card" aria-busy="${view.loading || view.mutation ? "true" : "false"}">
+      <div class="memory-management-heading">
+        <div>
+          <h4>Stored memories</h4>
+          <p>Review and control the information ABot can recall across conversations.</p>
+        </div>
+        <span class="memory-status ${escapeAttribute(view.status.tone)}">${escapeHtml(view.status.label)}</span>
+      </div>
+      ${availabilityMarkup(view)}
+      <div class="memory-management-toolbar">
+        <form class="memory-search" role="search" data-memory-search-form>
+          <label class="sr-only" for="memoryManagementSearch">Search stored memories</label>
+          <div class="memory-search-shell">
+            <span class="memory-search-icon">${renderMemoryIcon("search")}</span>
+            <input
+              id="memoryManagementSearch"
+              data-memory-search-input
+              type="search"
+              value="${escapeAttribute(view.query)}"
+              placeholder="Search memories by meaning"
+              autocomplete="off"
+              ${!view.canWrite || view.busy ? "disabled" : ""}
+            />
+            <button class="memory-search-submit" type="submit" ${!view.canWrite || view.busy ? "disabled" : ""}>Search</button>
+          </div>
+          ${view.query ? `<button class="memory-clear-search" type="button" data-memory-management-action="clear-search" ${view.busy ? "disabled" : ""}>Clear</button>` : ""}
+        </form>
+        <div class="memory-management-primary-actions">
+          <button class="memory-icon-button" type="button" data-memory-management-action="refresh" aria-label="Refresh memories" title="Refresh memories" ${view.busy ? "disabled" : ""}>${renderMemoryIcon("refresh")}</button>
+          <button class="primary-button memory-add-button" type="button" data-memory-management-action="create" ${!view.canWrite || view.mutation ? "disabled" : ""}>${renderMemoryIcon("add")}<span>Add memory</span></button>
+        </div>
+      </div>
+      ${feedbackMarkup(view)}
+      ${detachedEditorMarkup(view)}
+      ${renderMemoryRecordList(view)}
+      ${paginationMarkup(view)}
+    </section>
+  `;
+}
+
+function detachedEditorMarkup(view) {
+  const editorBelongsInList =
+    view.editor?.mode === "edit" && Boolean(view.editorRecord);
+  return editorBelongsInList ? "" : renderMemoryRecordEditor(view);
+}
+
+function availabilityMarkup(view) {
+  if (view.enabled === false) {
+    return '<p class="memory-management-notice">Memory is disabled. You can still review and delete stored memories.</p>';
+  }
+  if (view.available === false) {
+    return '<p class="memory-management-notice error-text">Memory storage or its embedding provider is unavailable. Existing records remain visible when storage can be read.</p>';
+  }
+  return "";
+}
+
+function feedbackMarkup(view) {
+  if (view.error) {
+    return `<p class="memory-management-feedback error-text" role="alert">${escapeHtml(view.error)}</p>`;
+  }
+  return view.message
+    ? `<p class="memory-management-feedback" role="status">${escapeHtml(view.message)}</p>`
+    : '<div class="sr-only" role="status" aria-live="polite"></div>';
+}
+
+function paginationMarkup(view) {
+  return `
+    <div class="memory-pagination" aria-label="Memory pages">
+      <span>${escapeHtml(view.pageLabel)}</span>
+      <div>
+        <button type="button" data-memory-management-action="previous-page" ${!view.hasPreviousPage || view.busy ? "disabled" : ""}>Previous</button>
+        <button type="button" data-memory-management-action="next-page" ${!view.hasNextPage || view.busy ? "disabled" : ""}>Next</button>
+      </div>
+    </div>
+  `;
+}

package/dist/src/web-ui/app/components/long-term-memory/record-editor.d.ts

@@ -0,0 +1,9 @@
+import type { LongTermMemoryManagerView } from "./view-model.js";
+
+export declare function renderMemoryRecordEditor(
+  view: LongTermMemoryManagerView,
+): string;
+export declare function readMemoryEditorInput(root: ParentNode): Readonly<{
+  content: string;
+  tags: readonly string[];
+}> | null;

package/dist/src/web-ui/app/components/long-term-memory/record-editor.js

@@ -0,0 +1,62 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import { renderMemoryIcon } from "./icons.js";
+import { parseMemoryTags } from "./view-model.js";
+
+export function renderMemoryRecordEditor(view) {
+  if (!view.editor) return "";
+  const editing = view.editor.mode === "edit";
+  const record = editing ? view.editorRecord : null;
+  if (editing && !record) {
+    return `
+      <section class="memory-editor-card" role="alert">
+        <p>This memory is no longer in the current result set.</p>
+        <button class="memory-editor-dismiss" type="button" data-memory-management-action="cancel-edit">Close</button>
+      </section>
+    `;
+  }
+  const busy = view.mutation === view.editor.mode;
+  const content = view.editor.draft?.content ?? record?.content ?? "";
+  const tags = view.editor.draft?.tags ?? record?.tags ?? [];
+  return `
+    <form class="memory-editor-card" data-memory-editor>
+      <div class="memory-editor-heading">
+        <div>
+          <h5>${editing ? "Update stored memory" : "Add a memory"}</h5>
+          <p>${editing ? "Refine what ABot should recall." : "Store a fact that should be available in future conversations."}</p>
+        </div>
+        <button class="memory-icon-button" type="button" data-memory-management-action="cancel-edit" aria-label="Close memory editor" title="Close memory editor" ${busy ? "disabled" : ""}>${renderMemoryIcon("close")}</button>
+      </div>
+      <label>
+        <span>What should ABot remember?</span>
+        <textarea data-memory-editor-content rows="3" required ${busy ? "disabled" : ""}>${escapeHtml(content)}</textarea>
+      </label>
+      <label>
+        <span>Tags <small>Separate with commas</small></span>
+        <input data-memory-editor-tags type="text" value="${escapeAttribute(
+          Array.isArray(tags) ? tags.join(", ") : "",
+        )}" ${busy ? "disabled" : ""} />
+      </label>
+      <div class="memory-editor-actions">
+        <button class="primary-button" type="submit" ${busy ? "disabled" : ""}>
+          ${busy ? "Saving…" : editing ? "Save changes" : "Add memory"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+export function readMemoryEditorInput(root) {
+  const contentInput = root.querySelector("[data-memory-editor-content]");
+  const tagsInput = root.querySelector("[data-memory-editor-tags]");
+  const content = String(contentInput?.value ?? "").trim();
+  if (!content) {
+    contentInput?.setCustomValidity("Enter something for ABot to remember.");
+    contentInput?.reportValidity();
+    return null;
+  }
+  contentInput?.setCustomValidity("");
+  return Object.freeze({
+    content,
+    tags: Object.freeze(parseMemoryTags(tagsInput?.value)),
+  });
+}

package/dist/src/web-ui/app/components/long-term-memory/record-list.d.ts

@@ -0,0 +1,5 @@
+import type { LongTermMemoryManagerView } from "./view-model.js";
+
+export declare function renderMemoryRecordList(
+  view: LongTermMemoryManagerView,
+): string;

package/dist/src/web-ui/app/components/long-term-memory/record-list.js

@@ -0,0 +1,97 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import { renderMemoryIcon } from "./icons.js";
+import { renderMemoryRecordEditor } from "./record-editor.js";
+import { formatMemoryTimestamp, memoryOriginLabel } from "./view-model.js";
+
+const MEMORY_CONTENT_PREVIEW_CHARACTER_LIMIT = 120;
+
+export function renderMemoryRecordList(view) {
+  if (view.loading && view.items.length === 0) {
+    return '<div class="memory-management-empty" role="status">Loading memories…</div>';
+  }
+  if (view.items.length === 0) {
+    return `<div class="memory-management-empty">${escapeHtml(view.emptyMessage)}</div>`;
+  }
+  return `<div class="memory-record-list">${view.items
+    .map((record) => renderMemoryRecordWithEditor(record, view))
+    .join("")}</div>`;
+}
+
+function renderMemoryRecordWithEditor(record, view) {
+  const recordMarkup = renderMemoryRecord(record, view);
+  const editorMarkup =
+    view.editor?.mode === "edit" && view.editor.recordId === record.id
+      ? renderMemoryRecordEditor(view)
+      : "";
+  return `${recordMarkup}${editorMarkup}`;
+}
+
+function renderMemoryRecord(record, view) {
+  const editing = view.editor?.recordId === record.id;
+  const deleting = view.mutation === `delete:${record.id}`;
+  const mutationActive = Boolean(view.mutation);
+  return `
+    <article class="memory-record${editing ? " editing" : ""}" data-memory-record-id="${escapeAttribute(record.id)}">
+      <div class="memory-record-copy">
+        ${renderContent(record.content)}
+        <div class="memory-record-details">
+          ${renderTags(record.tags)}
+          <div class="memory-record-meta">
+            <span>${escapeHtml(memoryOriginLabel(record.origin))}</span>
+            <span aria-hidden="true">·</span>
+            <time datetime="${escapeAttribute(record.updatedAt)}" title="Created ${escapeAttribute(formatMemoryTimestamp(record.createdAt))}">
+              Updated ${escapeHtml(formatMemoryTimestamp(record.updatedAt))}
+            </time>
+          </div>
+        </div>
+      </div>
+      <div class="memory-record-actions">
+        <button
+          class="memory-icon-button"
+          type="button"
+          data-memory-management-action="edit"
+          data-memory-id="${escapeAttribute(record.id)}"
+          aria-label="Edit memory"
+          title="Edit memory"
+          ${!view.canWrite || mutationActive ? "disabled" : ""}
+        >${renderMemoryIcon("edit")}</button>
+        <button
+          class="memory-icon-button danger-button"
+          type="button"
+          data-memory-management-action="delete"
+          data-memory-id="${escapeAttribute(record.id)}"
+          aria-label="${deleting ? "Deleting memory" : "Delete memory"}"
+          title="${deleting ? "Deleting memory" : "Delete memory"}"
+          ${mutationActive ? "disabled" : ""}
+        >${renderMemoryIcon("delete")}</button>
+      </div>
+    </article>
+  `;
+}
+
+function renderContent(content) {
+  const collapsible = memoryContentNeedsExpansion(content);
+  return `
+    <div class="memory-record-content${collapsible ? " collapsible" : ""}">
+      <div class="memory-record-content-text">${escapeHtml(content)}</div>
+      ${
+        collapsible
+          ? `<button class="memory-content-toggle" type="button" data-memory-management-action="toggle-content" aria-expanded="false" aria-label="Expand memory" title="Expand memory">${renderMemoryIcon("expand")}</button>`
+          : ""
+      }
+    </div>
+  `;
+}
+
+function memoryContentNeedsExpansion(content) {
+  const value = String(content ?? "");
+  const lineCount = value.split(/\r?\n/u).length;
+  return lineCount > 2 || value.length > MEMORY_CONTENT_PREVIEW_CHARACTER_LIMIT;
+}
+
+function renderTags(tags) {
+  if (!Array.isArray(tags) || tags.length === 0) return "";
+  return `<div class="memory-record-tags" aria-label="Tags">${tags
+    .map((tag) => `<span>${escapeHtml(tag)}</span>`)
+    .join("")}</div>`;
+}