@abot-ai/runtime 1.2.0 → 1.3.1

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

@@ -0,0 +1,284 @@
+const STATUS_SYMBOLS = {
+  preparing: "◌",
+  running: "◌",
+  awaiting_approval: "○",
+  completed: "✓",
+  failed: "×",
+  empty: "−",
+  unchanged: "−",
+  incomplete: "!",
+};
+
+function text(value) {
+  return typeof value === "string" ? value : "";
+}
+
+function hasKnownToolStatus(status) {
+  return Object.hasOwn(STATUS_SYMBOLS, status);
+}
+
+function canShowToolActivity(requestId, actions) {
+  if (!requestId) return false;
+  return Array.isArray(actions) && actions.length > 0;
+}
+
+function hasToolActionIdentity(action) {
+  return Boolean(text(action?.id));
+}
+
+function hasRecordedFields(fields) {
+  return Array.isArray(fields) && fields.length > 0;
+}
+
+function hasNoDisplayEvidence(fields, blocks) {
+  if (hasRecordedFields(fields)) return false;
+  return blocks.length === 0;
+}
+
+function repeatsActionTarget(field, target) {
+  if (!target || field.value !== target) return false;
+  return ["Path", "Folder", "Memory ID", "Target", "Source", "Query"].includes(
+    field.label,
+  );
+}
+
+function isTextInputField(field) {
+  return field.label === "Content excerpt" || field.label === "Instruction";
+}
+
+function inputBlockLabel(field, executed) {
+  if (field.label === "Instruction") return "Instruction";
+  if (executed) return "Sent content excerpt";
+  return "Prepared content excerpt";
+}
+
+function isRepeatedToolAction(count) {
+  return Number.isSafeInteger(count) && count > 1;
+}
+
+export function createConversationTools({ documentRoot = document } = {}) {
+  const requests = new Map();
+
+  function requestState(requestId) {
+    const existing = requests.get(requestId);
+    if (existing) return existing;
+    const state = {
+      expanded: new Set(),
+      nodes: new Map(),
+    };
+    requests.set(requestId, state);
+    return state;
+  }
+
+  function element(tag, className, value = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text(value);
+    return node;
+  }
+
+  function isolatedText(tag, className, value) {
+    const node = element(tag, className, value);
+    node.setAttribute("dir", "auto");
+    return node;
+  }
+
+  function evidencePanel(title, fields, blocks = []) {
+    if (hasNoDisplayEvidence(fields, blocks)) return null;
+    const panel = element("section", "conversation-tool-evidence");
+    panel.setAttribute("aria-label", title);
+    if (hasRecordedFields(fields)) {
+      const list = element("dl", "conversation-tool-fields");
+      for (const field of fields) {
+        const row = element("div", "conversation-tool-field");
+        const label = isolatedText(
+          "dt",
+          "conversation-tool-field-label",
+          field.label,
+        );
+        const value = element("dd", "conversation-tool-field-value");
+        value.appendChild(isolatedText("bdi", "", field.value));
+        row.append(label, value);
+        list.appendChild(row);
+      }
+      panel.appendChild(list);
+    }
+    for (const block of blocks) {
+      const content = element("div", "conversation-tool-text-block");
+      content.appendChild(
+        element("p", "conversation-tool-preview-label", block.label),
+      );
+      const preview = isolatedText(
+        "pre",
+        "conversation-tool-preview",
+        block.value,
+      );
+      preview.setAttribute("aria-label", block.label);
+      content.appendChild(preview);
+      panel.appendChild(content);
+    }
+    return panel;
+  }
+
+  function evidenceGroups(action) {
+    const input = (action.sent || []).filter(
+      (field) => !repeatsActionTarget(field, action.target),
+    );
+    const labels = action.executed
+      ? ["Sent", "Received"]
+      : ["Prepared input", "Status"];
+    const preview = text(action.preview);
+    const panels = [
+      evidencePanel(
+        labels[0],
+        input.filter((field) => !isTextInputField(field)),
+        input.filter(isTextInputField).map((field) => ({
+          ...field,
+          label: inputBlockLabel(field, action.executed),
+        })),
+      ),
+      evidencePanel(
+        labels[1],
+        action.received,
+        preview
+          ? [
+              {
+                label: action.executed ? "Returned excerpt" : "Status",
+                value: preview,
+              },
+            ]
+          : [],
+      ),
+    ].filter(Boolean);
+    if (panels.length === 0) return null;
+    const groups = element("div", "conversation-tool-panels");
+    groups.append(...panels);
+    return groups;
+  }
+
+  function evidenceNotice(action, groups) {
+    const notices = [];
+    if (action.partial) notices.push("Partial result");
+    if (action.previewTruncated) notices.push("Excerpt shortened");
+    if (action.legacy) notices.push("Limited recorded details");
+    if (!groups && notices.length === 0) {
+      return element(
+        "p",
+        "conversation-tool-unrecorded",
+        "No additional details were recorded.",
+      );
+    }
+    if (notices.length === 0) return null;
+    return element("p", "conversation-tool-notice", notices.join(" · "));
+  }
+
+  function actionTarget(action) {
+    const target = isolatedText(
+      "bdi",
+      "conversation-tool-target",
+      action.target,
+    );
+    target.title = text(action.target);
+    return target;
+  }
+
+  function actionSummary(action, status) {
+    const summary = element("summary", "conversation-tool-summary");
+    const symbol = element(
+      "span",
+      "conversation-tool-symbol",
+      STATUS_SYMBOLS[status],
+    );
+    symbol.setAttribute("aria-hidden", "true");
+    const description = element("span", "conversation-tool-description");
+    description.appendChild(
+      isolatedText("bdi", "conversation-tool-title", action.title),
+    );
+    if (action.target) {
+      description.appendChild(actionTarget(action));
+    }
+    summary.append(symbol, description);
+    if (isRepeatedToolAction(action.count)) {
+      summary.appendChild(
+        element("span", "conversation-tool-count", `×${action.count}`),
+      );
+    }
+    summary.appendChild(
+      isolatedText("span", "conversation-tool-status", action.statusLabel),
+    );
+    const chevron = element("span", "conversation-tool-chevron", "⌄");
+    chevron.setAttribute("aria-hidden", "true");
+    summary.appendChild(chevron);
+    return summary;
+  }
+
+  function isCurrentDisclosure(requestId, request, actionId, details) {
+    if (requests.get(requestId) !== request) return false;
+    return request.nodes.get(actionId) === details;
+  }
+
+  function actionRow(requestId, request, action) {
+    const status = hasKnownToolStatus(action.status)
+      ? action.status
+      : "incomplete";
+    const row = element("li", "conversation-tool-row");
+    const details = element("details", `conversation-tool is-${status}`);
+    details.dataset.actionId = action.id;
+    details.open = request.expanded.has(action.id);
+    request.nodes.set(action.id, details);
+    details.appendChild(actionSummary(action, status));
+    const body = element("div", "conversation-tool-body");
+    if (action.intent) {
+      body.appendChild(
+        isolatedText("p", "conversation-tool-intent", action.intent),
+      );
+    }
+    const groups = evidenceGroups(action);
+    if (groups) body.appendChild(groups);
+    const notice = evidenceNotice(action, groups);
+    if (notice) body.appendChild(notice);
+    details.appendChild(body);
+    details.addEventListener("toggle", () => {
+      if (!isCurrentDisclosure(requestId, request, action.id, details)) return;
+      if (details.open) {
+        request.expanded.add(action.id);
+        return;
+      }
+      request.expanded.delete(action.id);
+    });
+    row.appendChild(details);
+    return row;
+  }
+
+  function createNode({ requestId, actions = [], embedded = false } = {}) {
+    const id = text(requestId);
+    const currentRequest = requests.get(id);
+    currentRequest?.nodes.clear();
+    if (!canShowToolActivity(id, actions)) return null;
+    const validActions = actions.filter(hasToolActionIdentity);
+    if (validActions.length === 0) return null;
+    const request = requestState(id);
+    const section = element("section", "conversation-tools");
+    section.setAttribute("aria-label", "Tool activity");
+    section.dataset.requestId = id;
+    if (!embedded) {
+      section.appendChild(element("h3", "conversation-tools-title", "Tools"));
+    }
+    const list = element("ol", "conversation-tools-list");
+    for (const action of validActions) {
+      list.appendChild(actionRow(id, request, action));
+    }
+    section.appendChild(list);
+    return section;
+  }
+
+  function forget(requestId) {
+    requests.delete(text(requestId));
+  }
+
+  function reset() {
+    requests.clear();
+  }
+
+  return { createNode, forget, reset };
+}

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

@@ -1,3 +1,5 @@
+import { createConversationSchedule } from "./conversation-schedule.js";
+import { createConversationStatus } from "./conversation-status.js";
 import { isNearScrollEnd, pinScrollToEnd } from "../ui-behavior.js";
 import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
 import { createConversationActivity } from "./conversation-activity.js";
@@ -9,21 +11,36 @@ import {
 } from "./composer-context-window.js";
 import { createMessageAttachments } from "./message-attachments.js";
 import { createMessageTimestamp } from "./message-timestamp.js";
+import { createMessageLinkPreviews } from "./message-link-previews.js";
 
 export function createConversationView({
   dom,
   getMessages,
   getActiveRequestId = () => "",
+  isConnected = () => true,
   getActivityForMessage,
   getPendingApproval,
   createApprovalCard,
   copyText,
   notify,
   resolveAttachmentUrl = () => "",
+  onOpenSchedule = () => {},
+  canOpenSchedule = () => true,
   documentRoot = document,
   viewport = window,
 }) {
+  const conversationSchedule = createConversationSchedule({
+    documentRoot,
+    onOpenJob: onOpenSchedule,
+    canOpenJob: canOpenSchedule,
+  });
   const conversationActivity = createConversationActivity({ documentRoot });
+  const conversationStatus = createConversationStatus({
+    getActiveRequestId,
+    getActivityForMessage,
+    isConnected,
+    documentRoot,
+  });
   const composerContextWindow = createComposerContextWindow({
     container: dom.composerContextWindow,
     documentRoot,
@@ -36,6 +53,14 @@ export function createConversationView({
     documentRoot,
     resolveAttachmentUrl,
   });
+  const messageLinkPreviews = createMessageLinkPreviews({
+    documentRoot,
+    viewport,
+    scrollRoot: dom.messagesList,
+    onLayoutChange: () => {
+      if (viewState.followMessages) scrollToEnd();
+    },
+  });
   const viewState = {
     followMessages: true,
     collapsedThinkingMessageIds: new Set(),
@@ -87,7 +112,10 @@ export function createConversationView({
   }
 
   function createMessageNode(message) {
+    const scheduleNode = conversationSchedule.createNode(message);
+    if (scheduleNode) return scheduleNode;
     const row = documentRoot.createElement("article");
+    row.dataset.requestId = message.requestId || "";
     row.className = `message-row ${message.role === "user" ? "user" : "assistant"}`;
     row.setAttribute(
       "aria-label",
@@ -115,21 +143,11 @@ export function createConversationView({
       value: message.createdAt,
     });
     if (timestamp) meta.appendChild(timestamp);
-    if (message.streaming) {
-      const streaming = documentRoot.createElement("span");
-      streaming.className = "streaming-status";
-      streaming.textContent = "Responding";
-      meta.appendChild(streaming);
-    }
 
     const body = documentRoot.createElement("div");
     body.className = "markdown-body";
     applyTextDirection(body, message.text);
-    body.innerHTML = message.text
-      ? renderMarkdown(message.text)
-      : message.streaming
-        ? '<span class="typing-indicator" aria-label="ABot is working"><i></i><i></i><i></i></span>'
-        : "";
+    body.innerHTML = message.text ? renderMarkdown(message.text) : "";
 
     bubble.appendChild(meta);
     const attachments = messageAttachments.createNode(message.attachments);
@@ -172,6 +190,10 @@ export function createConversationView({
     }
 
     bubble.appendChild(body);
+    const status = conversationStatus.createNode(message);
+    if (status) bubble.appendChild(status);
+    const linkPreviews = messageLinkPreviews.createNode(message);
+    if (linkPreviews) bubble.appendChild(linkPreviews);
     if (message.role !== "user" && message.text && !message.streaming) {
       const actions = documentRoot.createElement("div");
       actions.className = "message-actions";
@@ -215,6 +237,8 @@ export function createConversationView({
     const shouldFollow =
       viewState.followMessages || isNearScrollEnd(dom.messagesList);
     const messages = getMessages();
+    messageLinkPreviews.reset();
+    conversationStatus.reset();
     dom.messagesList.innerHTML = "";
     if (messages.length === 0) {
       renderEmptyState();
@@ -273,8 +297,11 @@ export function createConversationView({
     cancelScheduledMessageRender();
     cancelScheduledThinkingRender();
     conversationActivity.reset();
+    conversationStatus.reset();
+    conversationSchedule.reset();
     composerContextWindow.reset();
     composerPlan.reset();
+    messageLinkPreviews.reset();
   }
 
   function forgetThinkingDisclosure(messageId) {
@@ -298,6 +325,7 @@ export function createConversationView({
     cancelScheduledThinkingRender,
     forgetThinkingDisclosure,
     render,
+    renderActivityStatus: conversationStatus.render,
     renderContextWindow,
     reset,
     scheduleMessageRender,

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

@@ -0,0 +1,61 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import {
+  dashboardTimePresentation,
+  projectDashboardActivity,
+} from "../../lib/dashboard-presentation.js";
+import { dashboardIcon } from "./icons.js";
+
+function activityTime(value) {
+  const time = dashboardTimePresentation(value);
+  if (!time) return "";
+  return `<time class="home-row-time" datetime="${time.dateTime}" title="Scheduled ${escapeHtml(time.title)}">${escapeHtml(time.label)}</time>`;
+}
+
+function hasRecordedRunConversation(run) {
+  if (!run.sessionId) return false;
+  return Boolean(run.requestId);
+}
+
+function activityRow(run) {
+  const action = hasRecordedRunConversation(run) ? "conversation" : "jobs";
+  return `<button type="button" class="home-activity-row" data-dashboard-action="${action}" data-session-id="${escapeHtml(run.sessionId)}" data-request-id="${escapeHtml(run.requestId)}">
+    <span class="home-event-icon" data-tone="${run.tone}">${dashboardIcon(run.tone)}</span>
+    <span class="home-row-copy"><span class="home-row-title" dir="auto">${escapeHtml(run.title)}</span><span class="home-row-detail">${escapeHtml(run.statusLabel)}</span></span>
+    ${activityTime(run.timestamp)}
+  </button>`;
+}
+
+function suggestionRow(template) {
+  return `<button type="button" class="home-job-suggestion" data-dashboard-action="template" data-template-id="${escapeHtml(template.id)}">
+    ${dashboardIcon(template.id)}
+    <span class="home-row-copy"><span class="home-row-title">${escapeHtml(template.title)}</span><span class="home-row-detail">${escapeHtml(template.timingLabel)} · ${escapeHtml(template.description)}</span></span>
+    ${dashboardIcon("arrow")}
+  </button>`;
+}
+
+function activityState({ loading, error, supported, templates }) {
+  if (!supported)
+    return '<div class="home-panel-empty"><strong>Jobs unavailable</strong><p>Choose a Runtime environment to use scheduled jobs.</p></div>';
+  if (loading)
+    return '<p class="home-panel-state" role="status">Loading activity…</p>';
+  if (error)
+    return '<div class="home-panel-state" role="alert"><p>Recent activity could not be loaded.</p><button type="button" class="home-text-button" data-dashboard-action="refresh">Try again</button></div>';
+  return `<p class="home-suggestions-intro">No activity yet. Try a ready-to-use job.</p><div class="home-suggestions">${templates.map(suggestionRow).join("")}</div>`;
+}
+
+export function renderDashboardActivity({
+  runs = [],
+  loading = false,
+  error = "",
+  supported = true,
+  templates = [],
+}) {
+  const activity = projectDashboardActivity(runs);
+  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 });
+  const feedback = error
+    ? '<p class="home-refresh-feedback" role="status">Activity 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 job runs">${activity.map(activityRow).join("")}</div>${feedback}`;
+}

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

@@ -0,0 +1,23 @@
+const paths = {
+  upload: '<path d="M12 16V4m-4 4 4-4 4 4"/><path d="M4 16v4h16v-4"/>',
+  job: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18m-9 3v4m-2-2h4"/>',
+  conversations:
+    '<path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z"/>',
+  configuration:
+    '<path d="M4 7h9m4 0h3M4 17h3m4 0h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/>',
+  arrow: '<path d="M7 17 17 7M7 7h10v10"/>',
+  success: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+  failed: '<circle cx="12" cy="12" r="9"/><path d="M12 7v6m0 4h.01"/>',
+  active: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  neutral: '<circle cx="12" cy="12" r="9"/><path d="M8 12h8"/>',
+  briefing:
+    '<rect x="4" y="4" width="16" height="17" rx="2"/><path d="M8 8h8M8 12h3m3 0h2m-8 4h8"/>',
+  learning:
+    '<path d="M12 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-2-1-6-2-10 1Z"/>',
+  reflection:
+    '<rect x="5" y="3" width="15" height="18" rx="2"/><path d="M3 7h4M3 12h4M3 17h4m5-9h4m-4 4h4"/>',
+};
+
+export function dashboardIcon(name) {
+  return `<svg aria-hidden="true" viewBox="0 0 24 24">${paths[name] || paths.neutral}</svg>`;
+}

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

@@ -0,0 +1,64 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import {
+  dashboardTimePresentation,
+  projectDashboardConversations,
+} from "../../lib/dashboard-presentation.js";
+import { dashboardIcon } from "./icons.js";
+
+function conversationRow(session) {
+  const time = dashboardTimePresentation(session.updatedAt);
+  const metadata = [];
+  if (session.readStateUnavailable) metadata.push("Unread status unavailable");
+  if (session.unreadCount > 0)
+    metadata.push(
+      `${session.unreadCount} new ${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}
+  </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>';
+  if (error)
+    return '<div class="home-panel-state" role="alert"><p>Recent conversations could not be loaded.</p><button type="button" class="home-text-button" data-dashboard-action="refresh">Try again</button></div>';
+  return `<div class="home-panel-empty" role="status">${dashboardIcon("conversations")}<strong>A fresh start.</strong><p>Your conversations will appear here.</p></div>`;
+}
+
+export function renderDashboardConversations({
+  sessions = [],
+  loading = false,
+  error = "",
+}) {
+  const projection = projectDashboardConversations(sessions);
+  const { 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>`;
+  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>`;
+}

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

@@ -0,0 +1,107 @@
+import { getDashboardJobTemplates } from "../../lib/dashboard-job-templates.js";
+import { dashboardIcon } from "./icons.js";
+import { renderDashboardActivity } from "./activity.js";
+import { renderDashboardConversations } from "./recent-conversations.js";
+
+const shortcuts = [
+  {
+    action: "attach",
+    icon: "upload",
+    title: "Upload a file",
+    detail: "Image or document",
+  },
+  {
+    action: "create-job",
+    icon: "job",
+    title: "Create a job",
+    detail: "Schedule an agent task",
+  },
+  {
+    action: "conversations",
+    icon: "conversations",
+    title: "Continue a chat",
+    detail: "Pick up where you left off",
+  },
+  {
+    action: "configuration",
+    icon: "configuration",
+    title: "Configuration",
+    detail: "Models and tools",
+  },
+];
+
+function shortcutMarkup(shortcut) {
+  return `<button type="button" class="home-shortcut" data-dashboard-action="${shortcut.action}">${dashboardIcon(shortcut.icon)}<span><strong>${shortcut.title}</strong><small>${shortcut.detail}</small></span></button>`;
+}
+
+export function createDashboardWorkspace({ root, actions }) {
+  root.classList.add("home-workspace");
+  root.innerHTML = `<div class="home-workspace-body">
+    <div class="home-overview">
+      <section class="home-panel home-activity-panel" aria-label="Recent activity" data-dashboard-activity></section>
+      <section class="home-panel home-recent-panel" aria-label="Recent conversations" data-dashboard-conversations></section>
+    </div>
+    <section class="home-workspace-start" aria-label="Start a new conversation">
+      <div class="home-shortcuts" aria-label="Quick actions">${shortcuts.map(shortcutMarkup).join("")}</div>
+      <div class="home-setup-host" data-dashboard-setup hidden></div>
+      <div class="home-composer-host" data-dashboard-composer></div>
+      <p class="home-composer-note">Starts a new conversation</p>
+    </section>
+  </div>`;
+  const activity = root.querySelector("[data-dashboard-activity]");
+  const conversations = root.querySelector("[data-dashboard-conversations]");
+  const composerHost = root.querySelector("[data-dashboard-composer]");
+  const setupHost = root.querySelector("[data-dashboard-setup]");
+  const composerNote = root.querySelector(".home-composer-note");
+  const handlers = {
+    attach: () => actions.attach(),
+    "create-job": () => actions.createJob(),
+    template: (button) => actions.createJob(button.dataset.templateId),
+    conversations: () => actions.continueConversation(),
+    configuration: () => actions.openConfiguration(),
+    jobs: () => actions.openJobs(),
+    conversation: (button) =>
+      actions.openConversation(
+        button.dataset.sessionId,
+        button.dataset.requestId || undefined,
+      ),
+    refresh: () => actions.refresh(),
+  };
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest("button[data-dashboard-action]");
+    if (!button || !root.contains(button) || button.disabled) return;
+    handlers[button.dataset.dashboardAction]?.(button);
+  });
+
+  function render(snapshot) {
+    activity.innerHTML = renderDashboardActivity({
+      runs: snapshot.runs,
+      loading: snapshot.loadingActivity,
+      error: snapshot.activityError,
+      supported: snapshot.supportsSchedules,
+      templates: getDashboardJobTemplates(),
+    });
+    conversations.innerHTML = renderDashboardConversations({
+      sessions: snapshot.sessions,
+      loading: snapshot.loadingSessions,
+      error: snapshot.sessionsError,
+    });
+    activity.setAttribute(
+      "aria-busy",
+      String(Boolean(snapshot.loadingActivity)),
+    );
+    conversations.setAttribute(
+      "aria-busy",
+      String(Boolean(snapshot.loadingSessions)),
+    );
+    root.querySelector('[data-dashboard-action="attach"]').disabled =
+      snapshot.composerAvailable === false;
+    root.querySelector('[data-dashboard-action="create-job"]').disabled =
+      snapshot.supportsSchedules === false;
+    composerHost.hidden = snapshot.composerAvailable === false;
+    setupHost.hidden = snapshot.composerAvailable !== false;
+    composerNote.hidden = snapshot.composerAvailable === false;
+  }
+
+  return { render, composerHost, setupHost };
+}