@abot-ai/runtime 1.4.0 → 1.5.0

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

@@ -15,7 +15,6 @@ export function createConversationRoleCards({
 } = {}) {
   const timelineRequests = new Set();
   const timelineToggles = new Map();
-  const cardsScroll = new Map();
   const toolsByRequest = new Map();
   let panelSequence = 0;
 
@@ -42,24 +41,6 @@ export function createConversationRoleCards({
     return avatar;
   }
 
-  function createSummaryNode(cards) {
-    if (cards.length === 0) return null;
-    const strip = element("span", "conversation-role-summary-strip");
-    for (const card of cards) {
-      const item = element(
-        "span",
-        `conversation-role-summary-item is-${card.tone}`,
-      );
-      item.dataset.role = card.role;
-      item.setAttribute("role", "img");
-      item.setAttribute("aria-label", card.title);
-      item.setAttribute("title", card.title);
-      item.appendChild(roleAvatar(card.role));
-      strip.appendChild(item);
-    }
-    return strip;
-  }
-
   function toolsForCard(requestId, cardId) {
     const cards = toolsByRequest.get(requestId) || new Map();
     toolsByRequest.set(requestId, cards);
@@ -96,7 +77,7 @@ export function createConversationRoleCards({
       textElement("span", "conversation-role-title", card.title),
     );
     if (card.active) {
-      const active = element("span", "conversation-role-active");
+      const active = element("span", "conversation-role-active", "Working");
       active.setAttribute("role", "img");
       active.setAttribute("aria-label", "Active role");
       header.appendChild(active);
@@ -114,21 +95,22 @@ export function createConversationRoleCards({
         element("span", "conversation-role-error", "Activity error"),
       );
     }
-    if (card.facts.length > 0) {
-      const facts = element("ul", "conversation-role-facts");
-      for (const fact of card.facts) {
-        facts.appendChild(textElement("li", "conversation-role-fact", fact));
-      }
-      header.appendChild(facts);
-    }
     content.appendChild(header);
+    const message = element("div", "conversation-role-message");
     if (card.summary) {
       const summary = element("p", "conversation-role-summary");
       summary.append(
         element("span", "conversation-role-action-label", "Latest: "),
         textElement("bdi", "conversation-role-action", card.summary),
       );
-      content.appendChild(summary);
+      message.appendChild(summary);
+    }
+    if (card.facts.length > 0) {
+      const facts = element("ul", "conversation-role-facts");
+      for (const fact of card.facts) {
+        facts.appendChild(textElement("li", "conversation-role-fact", fact));
+      }
+      message.appendChild(facts);
     }
     const tools = toolsForCard(requestId, card.id).createNode({
       requestId,
@@ -137,8 +119,9 @@ export function createConversationRoleCards({
     });
     if (tools) {
       tools.setAttribute("aria-label", `${card.title} tool activity`);
-      content.appendChild(tools);
+      message.appendChild(tools);
     }
+    content.appendChild(message);
     row.appendChild(content);
     return row;
   }
@@ -147,28 +130,10 @@ export function createConversationRoleCards({
     return timelineRequests.has(requestId);
   }
 
-  function bindScroll({ requestId, body, details }) {
-    const position = { top: cardsScroll.get(requestId)?.top || 0 };
-    cardsScroll.set(requestId, position);
-    function ownsVisibleCards() {
-      if (cardsScroll.get(requestId) !== position) return false;
-      if (!details.open) return false;
-      return !isTimeline(requestId);
-    }
-    body.addEventListener("scroll", () => {
-      if (!ownsVisibleCards()) return;
-      position.top = body.scrollTop;
-    });
-    return () => {
-      if (!ownsVisibleCards()) return false;
-      body.scrollTop = position.top;
-      return true;
-    };
-  }
-
   function createNode({
     requestId,
     cards,
+    heading,
     timeline,
     hasTimeline,
     onViewChange = () => {},
@@ -179,9 +144,16 @@ export function createConversationRoleCards({
     if (cards.length === 0) return timeline;
     const section = element("div", "conversation-role-view");
     const toolbar = element("div", "conversation-role-toolbar");
-    toolbar.appendChild(element("span", "conversation-role-label", "Agents"));
+    toolbar.appendChild(
+      heading || element("span", "conversation-role-label", "Agents"),
+    );
     const toggle = element("button", "conversation-role-toggle");
     toggle.type = "button";
+    const icon = element("span", "conversation-role-toggle-icon");
+    icon.setAttribute("aria-hidden", "true");
+    icon.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><path d="M3 3v10M7 3h6M7 8h6M7 13h6"/><circle cx="3" cy="3" r="1"/><circle cx="3" cy="8" r="1"/><circle cx="3" cy="13" r="1"/></svg>';
+    const toggleLabel = element("span", "conversation-role-toggle-label");
+    toggle.append(icon, toggleLabel);
     timelineToggles.set(requestId, toggle);
     if (hasTimeline) toolbar.appendChild(toggle);
     const panel = element("div", "conversation-role-panel");
@@ -191,14 +163,15 @@ export function createConversationRoleCards({
     list.setAttribute("aria-label", "Request agents");
     for (const card of cards) list.appendChild(renderCard(requestId, card));
     panel.append(list, timeline);
-    section.append(toolbar, panel);
+    section.append(panel, toolbar);
 
     function updateView() {
       const showTimeline = isTimeline(requestId);
       list.hidden = showTimeline;
       timeline.hidden = !showTimeline;
       section.dataset.view = showTimeline ? "timeline" : "cards";
-      toggle.textContent = showTimeline ? "Show agents" : "Show timeline";
+      toggleLabel.textContent = showTimeline ? "Show agents" : "Show timeline";
+      toggle.setAttribute("aria-pressed", String(showTimeline));
     }
 
     toggle.addEventListener("click", () => {
@@ -206,8 +179,6 @@ export function createConversationRoleCards({
       if (!hasTimeline) return;
       if (isTimeline(requestId)) timelineRequests.delete(requestId);
       else timelineRequests.add(requestId);
-      const position = cardsScroll.get(requestId);
-      if (position) position.top = 0;
       updateView();
       onViewChange();
     });
@@ -218,7 +189,6 @@ export function createConversationRoleCards({
   function forget(requestId) {
     timelineRequests.delete(requestId);
     timelineToggles.delete(requestId);
-    cardsScroll.delete(requestId);
     const tools = toolsByRequest.get(requestId);
     tools?.forEach((renderer) => renderer.reset());
     toolsByRequest.delete(requestId);
@@ -227,7 +197,6 @@ export function createConversationRoleCards({
   function reset() {
     timelineRequests.clear();
     timelineToggles.clear();
-    cardsScroll.clear();
     for (const tools of toolsByRequest.values()) {
       tools.forEach((renderer) => renderer.reset());
     }
@@ -236,9 +205,7 @@ export function createConversationRoleCards({
 
   return {
     createNode,
-    createSummaryNode,
     isTimeline,
-    bindScroll,
     forget,
     reset,
   };

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

@@ -20,7 +20,7 @@ function sourceStatus(source) {
 
 function sourceDescription(source, url, status) {
   const details = [source.title, url.href, status.detail];
-  if (source.retrieval === "failed") details.push("Fetch failed");
+  if (source.retrieval === "failed") details.push("Page content not retrieved");
   if (source.contentTruncated) details.push("Partial content");
   const requested = parseWebSourceUrl(source.requestedUrl);
   if (requested && requested.href !== url.href) {
@@ -96,7 +96,7 @@ function sourceCard(documentRoot, source) {
   domain.dir = "ltr";
   link.appendChild(domain);
   const failed = source.retrieval === "failed";
-  const label = failed ? `${status.short} · failed` : status.short;
+  const label = failed ? `${status.short} · not retrieved` : status.short;
   const badge = element(
     documentRoot,
     "span",

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

@@ -24,10 +24,16 @@ function isTextInputField(field) {
     "Instruction",
     "Command",
     "Command excerpt",
+    "Typed text",
+    "Typed text excerpt",
   ].includes(field.label);
 }
 
 function inputBlockLabel(field, executed) {
+  if (field.label === "Typed text")
+    return executed ? "Sent text" : "Prepared text";
+  if (field.label === "Typed text excerpt")
+    return executed ? "Sent text excerpt" : "Prepared text excerpt";
   if (field.label === "Instruction") return "Instruction";
   if (field.label === "Command")
     return executed ? "Sent command" : "Prepared command";

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

@@ -6,7 +6,7 @@ const STATUS_SYMBOLS = {
   running: "◌",
   awaiting_approval: "○",
   completed: "✓",
-  failed: "×",
+  failed: "−",
   empty: "−",
   unchanged: "−",
   incomplete: "!",

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

@@ -1,5 +1,6 @@
 import { createConversationSchedule } from "./conversation-schedule.js";
 import { createConversationStatus } from "./conversation-status.js";
+import { createConversationReasoning } from "./conversation-reasoning.js";
 import { isNearScrollEnd, pinScrollToEnd } from "../ui-behavior.js";
 import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
 import { createConversationActivity } from "./conversation-activity.js";
@@ -12,6 +13,7 @@ import {
 import { createMessageAttachments } from "./message-attachments.js";
 import { createMessageTimestamp } from "./message-timestamp.js";
 import { createMessageLinkPreviews } from "./message-link-previews.js";
+import { projectApprovalContinuations } from "../lib/request-lifecycle-view.js";
 
 export function createConversationView({
   dom,
@@ -20,6 +22,7 @@ export function createConversationView({
   isConnected = () => true,
   getActivityForMessage,
   getPendingApproval,
+  getPendingApprovals = () => [getPendingApproval?.()].filter(Boolean),
   createApprovalCard,
   copyText,
   notify,
@@ -27,6 +30,7 @@ export function createConversationView({
   onOpenSchedule = () => {},
   canOpenSchedule = () => true,
   filePreview = { reset() {}, syncScope() {}, setWorkspace() {} },
+  sparkActions = { createNode: () => null },
   documentRoot = document,
   viewport = window,
 }) {
@@ -40,6 +44,7 @@ export function createConversationView({
     onOpenFile: filePreview.open,
     canOpenFile: filePreview.canOpen,
   });
+  const conversationReasoning = createConversationReasoning({ documentRoot });
   const conversationStatus = createConversationStatus({
     getActiveRequestId,
     getActivityForMessage,
@@ -68,7 +73,6 @@ export function createConversationView({
   });
   const viewState = {
     followMessages: true,
-    collapsedThinkingMessageIds: new Set(),
     messageRenderTimer: 0,
     thinkingRenderTimer: 0,
     scrollSettleVersion: 0,
@@ -168,31 +172,8 @@ export function createConversationView({
       if (activity) bubble.appendChild(activity);
     }
 
-    if (message.thinkingText) {
-      const thinking = documentRoot.createElement("details");
-      thinking.className = "thinking-card";
-      thinking.open =
-        Boolean(message.streaming) &&
-        !viewState.collapsedThinkingMessageIds.has(message.id);
-      thinking.addEventListener("toggle", () => {
-        if (!message.streaming) return;
-        if (thinking.open) {
-          viewState.collapsedThinkingMessageIds.delete(message.id);
-        } else {
-          viewState.collapsedThinkingMessageIds.add(message.id);
-        }
-      });
-      const summary = documentRoot.createElement("summary");
-      summary.innerHTML = `<span>Reasoning</span><span>${
-        message.streaming ? "Live" : "View"
-      }</span>`;
-      const thinkingBody = documentRoot.createElement("div");
-      thinkingBody.className = "thinking-body";
-      applyTextDirection(thinkingBody, message.thinkingText);
-      thinkingBody.innerHTML = renderMarkdown(message.thinkingText);
-      thinking.append(summary, thinkingBody);
-      bubble.appendChild(thinking);
-    }
+    const thinking = conversationReasoning.createNode(message);
+    if (thinking) bubble.appendChild(thinking);
 
     bubble.appendChild(body);
     const status = conversationStatus.createNode(message);
@@ -215,6 +196,11 @@ export function createConversationView({
       actions.appendChild(copyButton);
       bubble.appendChild(actions);
     }
+    const sparkChoices = sparkActions.createNode(message, { onKept: () => row.focus({ preventScroll: true }) });
+    if (sparkChoices) {
+      row.tabIndex = -1;
+      bubble.appendChild(sparkChoices);
+    }
     row.appendChild(bubble);
     return row;
   }
@@ -242,7 +228,8 @@ export function createConversationView({
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
       viewState.followMessages || isNearScrollEnd(dom.messagesList);
-    const messages = getMessages();
+    const messages = projectApprovalContinuations(getMessages());
+    conversationReasoning.beginRender(messages);
     messageLinkPreviews.reset();
     conversationStatus.reset();
     dom.messagesList.innerHTML = "";
@@ -255,8 +242,7 @@ export function createConversationView({
     for (const message of messages) {
       dom.messagesList.appendChild(createMessageNode(message));
     }
-    const pendingApproval = getPendingApproval();
-    if (pendingApproval) {
+    for (const pendingApproval of getPendingApprovals()) {
       dom.messagesList.appendChild(createApprovalCard(pendingApproval));
     }
     if (shouldFollow) {
@@ -299,11 +285,11 @@ export function createConversationView({
   function reset() {
     filePreview.reset();
     viewState.followMessages = true;
-    viewState.collapsedThinkingMessageIds.clear();
     viewState.scrollSettleVersion += 1;
     cancelScheduledMessageRender();
     cancelScheduledThinkingRender();
     conversationActivity.reset();
+    conversationReasoning.reset();
     conversationStatus.reset();
     conversationSchedule.reset();
     composerContextWindow.reset();
@@ -311,10 +297,6 @@ export function createConversationView({
     messageLinkPreviews.reset();
   }
 
-  function forgetThinkingDisclosure(messageId) {
-    viewState.collapsedThinkingMessageIds.delete(messageId);
-  }
-
   function bind() {
     if (viewState.bound) return;
     viewState.bound = true;
@@ -332,7 +314,6 @@ export function createConversationView({
     bind,
     cancelScheduledMessageRender,
     cancelScheduledThinkingRender,
-    forgetThinkingDisclosure,
     render,
     renderActivityStatus: conversationStatus.render,
     renderContextWindow,

package/dist/src/web-ui/app/components/dashboard/activity.js

@@ -50,7 +50,7 @@ export function renderDashboardActivity({
   supported = true,
   templates = [],
 }) {
-  const activity = projectDashboardActivity(runs);
+  const activity = projectDashboardActivity(runs, 3);
   const header = `<header class="home-panel-header"><h2>Recent activity</h2><button type="button" class="home-text-button" data-dashboard-action="jobs" ${supported ? "" : "disabled"}>View jobs${dashboardIcon("arrow")}</button></header>`;
   if (!activity.length)
     return header + activityState({ loading, error, supported, templates });

package/dist/src/web-ui/app/components/dashboard/approvals.js

@@ -0,0 +1,168 @@
+import { createToolApprovalCard } from "../tool-approval-card.js";
+import { formatEventDetail } from "../../lib/event-presentation.js";
+import { projectToolActivityEvent } from "../../lib/tool-activity-event.js";
+import { textOf } from "../../lib/text-format.js";
+
+const renderedApprovalCards = new WeakMap();
+const renderedApprovalViews = new WeakMap();
+
+export function hasPendingDashboardApprovals(snapshot) {
+  return Boolean(snapshot.approvals?.length);
+}
+
+function hasDashboardApprovalContent(snapshot) {
+  if (hasPendingDashboardApprovals(snapshot)) return true;
+  if (snapshot.supportsToolApprovals === false) return false;
+  return Boolean(snapshot.approvalsError || snapshot.approvalDecisionError);
+}
+
+function approvalConversationTitle(approval, sessions = []) {
+  const session = sessions.find(
+    (candidate) => candidate.id === approval.sessionId,
+  );
+  return textOf(session?.displayName || session?.title || approval.sessionId);
+}
+
+function approvalScopeKey(approval) {
+  return JSON.stringify([
+    approval.environmentId,
+    approval.sessionId,
+    approval.requestId,
+    approval.approvalId,
+  ]);
+}
+
+function createHomeApproval(approval, title, onDecision, documentRoot) {
+  const section = documentRoot.createElement("section");
+  section.className = "home-approval";
+  const conversation = documentRoot.createElement("button");
+  conversation.type = "button";
+  conversation.className = "home-text-button home-approval-conversation";
+  conversation.dataset.dashboardAction = "conversation";
+  conversation.dataset.sessionId = approval.sessionId;
+  conversation.dataset.requestId = approval.requestId;
+  conversation.dir = "auto";
+  conversation.textContent = title;
+  const event = {
+    ...approval.event,
+    summary: formatEventDetail(approval.event),
+    toolActivity: projectToolActivityEvent(approval.event),
+  };
+  const card = createToolApprovalCard({
+    event,
+    submitted: approval.submitted === true,
+    documentRoot,
+    onDecision: (_approvalId, approved) => void onDecision(approval, approved),
+  });
+  card.querySelector(".approval-message-header").appendChild(conversation);
+  section.appendChild(card);
+  return section;
+}
+
+function reconcileApprovalNodes(root, nodes, retainedCards) {
+  const hasMountedCard = retainedCards.some((card) => root.contains(card));
+  if (!hasMountedCard) {
+    root.replaceChildren(...nodes);
+    return;
+  }
+  const nextNodes = new Set(nodes);
+  for (const child of [...root.children]) {
+    if (nextNodes.has(child)) continue;
+    root.removeChild(child);
+  }
+  for (const [index, node] of nodes.entries()) {
+    const current = root.children[index];
+    if (current === node) continue;
+    root.insertBefore(node, current || null);
+  }
+}
+
+export function renderDashboardApprovals({
+  root,
+  snapshot,
+  onDecision,
+  documentRoot = document,
+}) {
+  root.hidden = !hasDashboardApprovalContent(snapshot);
+  if (root.hidden) {
+    root.replaceChildren();
+    renderedApprovalCards.delete(root);
+    renderedApprovalViews.delete(root);
+    return;
+  }
+  const signature = JSON.stringify([
+    snapshot.loadingApprovals,
+    snapshot.supportsToolApprovals,
+    snapshot.approvalDecisionError,
+    snapshot.approvalsError,
+    (snapshot.approvals || []).map((approval) => [
+      approval,
+      approvalConversationTitle(approval, snapshot.sessions),
+    ]),
+  ]);
+  const previousView = renderedApprovalViews.get(root);
+  if (
+    previousView?.signature === signature &&
+    previousView.firstChild === root.firstChild
+  )
+    return;
+  const previousCards = renderedApprovalCards.get(root) || new Map();
+  const nextCards = new Map();
+  const retainedCards = [];
+  const nodes = [];
+  const header = documentRoot.createElement("header");
+  header.className = "home-panel-header";
+  const title = documentRoot.createElement("h2");
+  title.textContent = "Waiting for approval";
+  header.appendChild(title);
+  nodes.push(header);
+
+  function feedback(message, alert = false) {
+    const paragraph = documentRoot.createElement("p");
+    paragraph.className = "home-panel-state";
+    paragraph.setAttribute("role", alert ? "alert" : "status");
+    paragraph.textContent = message;
+    nodes.push(paragraph);
+  }
+
+  function publish() {
+    reconcileApprovalNodes(root, nodes, retainedCards);
+    renderedApprovalCards.set(root, nextCards);
+    renderedApprovalViews.set(root, { signature, firstChild: root.firstChild });
+  }
+
+  root.setAttribute("aria-busy", String(Boolean(snapshot.loadingApprovals)));
+  if (snapshot.supportsToolApprovals === false) {
+    feedback(
+      "Home approvals are unavailable with this connection. Open the conversation to review pending actions.",
+    );
+    publish();
+    return;
+  }
+  if (snapshot.approvalDecisionError)
+    feedback(snapshot.approvalDecisionError, true);
+  if (snapshot.approvalsError)
+    feedback(
+      "Approvals could not be refreshed. " + snapshot.approvalsError,
+      true,
+    );
+  const approvals = snapshot.approvals || [];
+  if (!approvals.length) {
+    publish();
+    return;
+  }
+  for (const approval of approvals) {
+    const key = approvalScopeKey(approval);
+    const title = approvalConversationTitle(approval, snapshot.sessions);
+    const signature = JSON.stringify([approval, title]);
+    const previous = previousCards.get(key);
+    const unchanged = previous?.signature === signature;
+    const node = unchanged
+      ? previous.node
+      : createHomeApproval(approval, title, onDecision, documentRoot);
+    if (unchanged) retainedCards.push(node);
+    nextCards.set(key, { signature, node });
+    nodes.push(node);
+  }
+  publish();
+}

package/dist/src/web-ui/app/components/dashboard/recent-conversations.js

@@ -11,29 +11,14 @@ function conversationRow(session) {
   if (session.readStateUnavailable) metadata.push("Unread status unavailable");
   if (session.unreadCount > 0)
     metadata.push(
-      `${session.unreadCount} new ${session.unreadCount === 1 ? "message" : "messages"}`,
+      `${session.unreadCount} unread ${session.unreadCount === 1 ? "message" : "messages"}`,
     );
   if (time) metadata.push(time.label);
-  const unread =
-    session.unreadCount > 0
-      ? `<span class="home-small-count" aria-label="${session.unreadCount} unread messages">${session.unreadCount}</span>`
-      : "";
   return `<button type="button" class="home-recent-row${session.unreadCount > 0 ? " has-unread" : ""}" data-dashboard-action="conversation" data-session-id="${escapeHtml(session.id)}">
-    <span class="home-row-copy"><span class="home-row-title" dir="auto">${escapeHtml(session.title)}</span><span class="home-row-detail" title="${escapeHtml(time?.title || "")}">${escapeHtml(metadata.join(" · ") || "No messages yet")}</span></span>${unread}
+    <span class="home-row-copy"><span class="home-row-title" dir="auto">${escapeHtml(session.title)}</span><span class="home-row-detail" title="${escapeHtml(time?.title || "")}">${escapeHtml(metadata.join(" · ") || "No messages yet")}</span></span>
   </button>`;
 }
 
-function conversationsSummary({
-  totalCount,
-  unreadCount,
-  hasUnavailableReadState,
-}) {
-  if (hasUnavailableReadState) return "Unread status unavailable";
-  if (unreadCount > 0)
-    return `${totalCount} ${totalCount === 1 ? "conversation" : "conversations"}`;
-  return "All clear. No unread messages.";
-}
-
 function conversationsState({ loading, error }) {
   if (loading)
     return '<p class="home-panel-state" role="status">Loading conversations…</p>';
@@ -42,23 +27,32 @@ function conversationsState({ loading, error }) {
   return `<div class="home-panel-empty" role="status">${dashboardIcon("conversations")}<strong>A fresh start.</strong><p>Your conversations will appear here.</p></div>`;
 }
 
+function unreadAvailabilityNotice({ conversations, hasUnavailableReadState }) {
+  if (!hasUnavailableReadState) return "";
+  if (conversations.some((session) => session.readStateUnavailable)) return "";
+  return '<p class="home-refresh-feedback" role="status">Unread status unavailable</p>';
+}
+
 export function renderDashboardConversations({
   sessions = [],
   loading = false,
   error = "",
 }) {
-  const projection = projectDashboardConversations(sessions);
-  const { conversations, unreadCount, hasUnavailableReadState } = projection;
+  const projection = projectDashboardConversations(sessions, 3);
+  const {
+    recentConversations: conversations,
+    unreadCount,
+    hasUnavailableReadState,
+  } = projection;
   const badge =
     unreadCount > 0 && !hasUnavailableReadState
       ? `<span class="home-unread-count" aria-label="${unreadCount} unread messages">${unreadCount}</span>`
       : "";
-  const header = `<header class="home-panel-header"><h2>Recent conversations</h2>${badge}</header>`;
+  const header = `<header class="home-panel-header"><h2>Recent conversations${badge}</h2><button type="button" class="home-text-button" data-dashboard-action="conversations">Open chats${dashboardIcon("arrow")}</button></header>`;
   if (!conversations.length)
     return header + conversationsState({ loading, error });
-  const summary = conversationsSummary(projection);
   const feedback = error
     ? '<p class="home-refresh-feedback" role="status">Conversations could not be refreshed. <button type="button" class="home-text-button" data-dashboard-action="refresh">Try again</button></p>'
     : "";
-  return `${header}<div class="home-panel-rows" aria-label="Recent conversations including unread">${conversations.map(conversationRow).join("")}</div>${feedback}<footer class="home-panel-footer"><span>${summary}</span><button type="button" class="home-text-button" data-dashboard-action="conversations">Open chats${dashboardIcon("arrow")}</button></footer>`;
+  return `${header}<div class="home-panel-rows" aria-label="Recent conversations including unread">${conversations.map(conversationRow).join("")}</div>${unreadAvailabilityNotice({ conversations, hasUnavailableReadState })}${feedback}`;
 }