@abot-ai/runtime 1.1.0 → 1.3.0

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

@@ -0,0 +1,24 @@
+import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
+
+export declare function createConversationRoleCards(options?: {
+  documentRoot?: Document;
+}): {
+  createSummaryNode(
+    cards: ReturnType<typeof buildConversationRoleCards>,
+  ): HTMLElement | null;
+  createNode(input: {
+    requestId: string;
+    cards: ReturnType<typeof buildConversationRoleCards>;
+    timeline: HTMLElement;
+    hasTimeline: boolean;
+    onViewChange?: () => void;
+  }): HTMLElement;
+  isTimeline(requestId: string): boolean;
+  bindScroll(input: {
+    requestId: string;
+    body: HTMLElement;
+    details: HTMLDetailsElement;
+  }): () => boolean;
+  forget(requestId: string): void;
+  reset(): void;
+};

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

@@ -0,0 +1,237 @@
+import { createConversationTools } from "./conversation-tools.js";
+
+const ROLE_INITIALS = {
+  supervisor: "S",
+  planner: "P",
+  worker: "W",
+  researcher: "Rs",
+  reviewer: "R",
+};
+
+export function createConversationRoleCards({ documentRoot = document } = {}) {
+  const timelineRequests = new Set();
+  const timelineToggles = new Map();
+  const cardsScroll = new Map();
+  const toolsByRequest = new Map();
+  let panelSequence = 0;
+
+  function element(tag, className, text = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text;
+    return node;
+  }
+
+  function textElement(tag, className, text) {
+    const node = element(tag, className, text);
+    node.setAttribute("dir", "auto");
+    return node;
+  }
+
+  function roleAvatar(role) {
+    const avatar = element(
+      "span",
+      "conversation-role-avatar",
+      ROLE_INITIALS[role] || "•",
+    );
+    avatar.setAttribute("aria-hidden", "true");
+    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);
+    const existing = cards.get(cardId);
+    if (existing) return existing;
+    const tools = createConversationTools({ documentRoot });
+    cards.set(cardId, tools);
+    return tools;
+  }
+
+  function discardMissingCardTools(requestId, cards) {
+    const renderers = toolsByRequest.get(requestId);
+    if (!renderers) return;
+    const cardIds = new Set(cards.map((card) => card.id));
+    for (const [cardId, tools] of renderers) {
+      if (cardIds.has(cardId)) continue;
+      tools.reset();
+      renderers.delete(cardId);
+    }
+  }
+
+  function renderCard(requestId, card) {
+    const row = element("li", `conversation-role-card is-${card.tone}`);
+    row.dataset.role = card.role;
+    row.dataset.cardId = card.id;
+    row.appendChild(roleAvatar(card.role));
+    const content = element("div", "conversation-role-content");
+    const header = element("div", "conversation-role-header");
+    header.appendChild(
+      textElement("span", "conversation-role-title", card.title),
+    );
+    if (card.active) {
+      const active = element("span", "conversation-role-active");
+      active.setAttribute("role", "img");
+      active.setAttribute("aria-label", "Active role");
+      header.appendChild(active);
+    }
+    header.appendChild(
+      textElement(
+        "span",
+        "conversation-role-responsibility",
+        card.responsibility,
+      ),
+    );
+    const hasActivityError = card.tone === "failed";
+    if (hasActivityError) {
+      header.appendChild(
+        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);
+    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);
+    }
+    const tools = toolsForCard(requestId, card.id).createNode({
+      requestId,
+      actions: card.toolActions || [],
+      embedded: true,
+    });
+    if (tools) {
+      tools.setAttribute("aria-label", `${card.title} tool activity`);
+      content.appendChild(tools);
+    }
+    row.appendChild(content);
+    return row;
+  }
+
+  function isTimeline(requestId) {
+    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,
+    timeline,
+    hasTimeline,
+    onViewChange = () => {},
+  }) {
+    discardMissingCardTools(requestId, cards);
+    timelineToggles.delete(requestId);
+    if (!hasTimeline) timelineRequests.delete(requestId);
+    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"));
+    const toggle = element("button", "conversation-role-toggle");
+    toggle.type = "button";
+    timelineToggles.set(requestId, toggle);
+    if (hasTimeline) toolbar.appendChild(toggle);
+    const panel = element("div", "conversation-role-panel");
+    panel.id = `conversation-role-panel-${++panelSequence}`;
+    toggle.setAttribute("aria-controls", panel.id);
+    const list = element("ol", "conversation-role-list");
+    list.setAttribute("aria-label", "Request agents");
+    for (const card of cards) list.appendChild(renderCard(requestId, card));
+    panel.append(list, timeline);
+    section.append(toolbar, panel);
+
+    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";
+    }
+
+    toggle.addEventListener("click", () => {
+      if (timelineToggles.get(requestId) !== toggle) return;
+      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();
+    });
+    updateView();
+    return section;
+  }
+
+  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);
+  }
+
+  function reset() {
+    timelineRequests.clear();
+    timelineToggles.clear();
+    cardsScroll.clear();
+    for (const tools of toolsByRequest.values()) {
+      tools.forEach((renderer) => renderer.reset());
+    }
+    toolsByRequest.clear();
+  }
+
+  return {
+    createNode,
+    createSummaryNode,
+    isTimeline,
+    bindScroll,
+    forget,
+    reset,
+  };
+}

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

@@ -0,0 +1,71 @@
+import {
+  normalizeScheduleReference,
+  scheduleTimeLabel,
+} from "../lib/schedule-message.js";
+
+export function createConversationSchedule({
+  documentRoot = document,
+  onOpenJob = () => {},
+  canOpenJob = () => true,
+} = {}) {
+  const expandedRuns = new Set();
+
+  function createNode(message) {
+    if (message.role !== "user") return null;
+    const schedule = normalizeScheduleReference(message.schedule);
+    if (!schedule) return null;
+    const row = documentRoot.createElement("article");
+    row.className = "message-row schedule-message-row";
+    row.dataset.requestId = message.requestId || "";
+    row.setAttribute("aria-label", "Scheduled task invocation");
+    const card = documentRoot.createElement("div");
+    card.className = "schedule-chat-card";
+    card.dataset.jobId = schedule.jobId;
+    card.dataset.runId = schedule.runId;
+    const eyebrow = documentRoot.createElement("div");
+    eyebrow.className = "schedule-eyebrow";
+    eyebrow.textContent =
+      schedule.triggerType === "manual"
+        ? "Run now · Scheduled task"
+        : "Scheduled task";
+    const title = documentRoot.createElement("button");
+    title.type = "button";
+    title.className = "schedule-chat-title";
+    title.dir = "auto";
+    title.textContent = schedule.title;
+    title.setAttribute("aria-label", `View schedule: ${schedule.title}`);
+    title.disabled = !canOpenJob();
+    if (title.disabled)
+      title.title = "Schedules require the local Runtime backend.";
+    title.addEventListener("click", () => {
+      if (!canOpenJob()) return;
+      onOpenJob(schedule.jobId, schedule.runId);
+    });
+    const time = documentRoot.createElement("div");
+    time.className = "schedule-chat-time";
+    time.textContent = scheduleTimeLabel(
+      schedule.scheduledAt || message.createdAt,
+    );
+    const disclosure = documentRoot.createElement("details");
+    disclosure.className = "schedule-prompt-disclosure";
+    disclosure.open = expandedRuns.has(schedule.runId);
+    disclosure.addEventListener("toggle", () => {
+      if (disclosure.open) {
+        expandedRuns.add(schedule.runId);
+        return;
+      }
+      expandedRuns.delete(schedule.runId);
+    });
+    const summary = documentRoot.createElement("summary");
+    summary.textContent = "View invocation prompt";
+    const prompt = documentRoot.createElement("pre");
+    prompt.dir = "auto";
+    prompt.textContent = message.text || "";
+    disclosure.append(summary, prompt);
+    card.append(eyebrow, title, time, disclosure);
+    row.appendChild(card);
+    return row;
+  }
+
+  return { createNode, reset: () => expandedRuns.clear() };
+}

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

@@ -0,0 +1,12 @@
+export const CONVERSATION_SIDEBAR_MEDIA_QUERY = "(min-width: 1260px)";
+
+export function resolveConversationSidebarLayout(workspace, activeSheet, wide) {
+  if (workspace !== "chat") {
+    return { docked: false, drawerOpen: false, visible: false };
+  }
+  if (wide) {
+    return { docked: true, drawerOpen: false, visible: true };
+  }
+  const drawerOpen = activeSheet === "sessions";
+  return { docked: false, drawerOpen, visible: drawerOpen };
+}

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

@@ -0,0 +1,7 @@
+import type { ConversationSourcesGroup } from "../lib/web-sources.js";
+
+export declare function createConversationSources(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(groups?: ConversationSourcesGroup[]): HTMLElement | null;
+};

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-status.js

@@ -0,0 +1,65 @@
+import { buildConversationStatus } from "../lib/conversation-status-model.js";
+
+const SHIMMER_DURATION_MS = 2_800;
+
+function isActiveAssistant(message, activeRequestId) {
+  if (message.role !== "assistant") return false;
+  if (!message.streaming || !message.requestId) return false;
+  return message.requestId === activeRequestId;
+}
+
+/** Updates the activity text without replacing the conversation or its scroll position. */
+export function createConversationStatus({
+  getActiveRequestId,
+  getActivityForMessage,
+  isConnected = () => true,
+  documentRoot = document,
+}) {
+  const entries = new Map();
+
+  function refresh(message, node) {
+    const model = buildConversationStatus({
+      ...getActivityForMessage(message),
+      requestId: message.requestId,
+      streaming: isActiveAssistant(message, getActiveRequestId()),
+      connected: isConnected(),
+    });
+    node.hidden = !model;
+    const label = model?.label || "";
+    if (node.textContent !== label) node.textContent = label;
+    node.classList.toggle("is-animated", Boolean(model?.animate));
+  }
+
+  function createNode(message) {
+    if (!isActiveAssistant(message, getActiveRequestId())) return null;
+    const node = documentRoot.createElement("span");
+    node.className = "conversation-status";
+    node.setAttribute("role", "status");
+    node.setAttribute("aria-live", "polite");
+    node.setAttribute("aria-atomic", "true");
+    node.setAttribute("dir", "ltr");
+    node.setAttribute("lang", "en");
+    node.style.setProperty(
+      "--status-shimmer-duration",
+      `${SHIMMER_DURATION_MS}ms`,
+    );
+    // Keep the light sweep in phase when a streaming render recreates the row.
+    node.style.setProperty(
+      "--status-shimmer-delay",
+      `${-(Date.now() % SHIMMER_DURATION_MS)}ms`,
+    );
+    entries.set(message.id, { message, node });
+    refresh(message, node);
+    return node;
+  }
+
+  function render() {
+    for (const { message, node } of entries.values()) refresh(message, node);
+  }
+
+  function reset() {
+    entries.clear();
+  }
+
+  return { createNode, render, reset };
+}

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

@@ -0,0 +1,13 @@
+import type { ConversationToolAction } from "../lib/tool-activity-model.js";
+
+export declare function createConversationTools(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input?: {
+    requestId?: string;
+    actions?: ConversationToolAction[];
+    embedded?: boolean;
+  }): HTMLElement | null;
+  forget(requestId: unknown): void;
+  reset(): void;
+};