@abot-ai/runtime 1.2.0 → 1.3.0

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 };
+}

package/dist/src/web-ui/app/components/message-link-previews.d.ts

@@ -0,0 +1,16 @@
+import type { createMessageLinkPreviewClient } from "../services/message-link-preview-client.js";
+
+export declare function createMessageLinkPreviews(options?: {
+  documentRoot?: Document;
+  viewport?: Window & { IntersectionObserver?: typeof IntersectionObserver };
+  scrollRoot?: Element | null;
+  onLayoutChange?: () => void;
+  client?: ReturnType<typeof createMessageLinkPreviewClient>;
+}): {
+  createNode(message: {
+    role?: string;
+    text?: string;
+    streaming?: boolean;
+  }): HTMLElement | null;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/message-link-previews.js

@@ -0,0 +1,179 @@
+import { extractMessageLinks } from "../lib/message-markdown.js";
+import { parseWebSourceUrl } from "../lib/source-url-policy.js";
+import { createMessageLinkPreviewClient } from "../services/message-link-preview-client.js";
+
+function previewElement(documentRoot, tag, className, text = "") {
+  const node = documentRoot.createElement(tag);
+  node.className = className;
+  node.textContent = text;
+  return node;
+}
+
+function previewText(value, limit) {
+  if (typeof value !== "string") return "";
+  return value.trim().slice(0, limit);
+}
+
+function sameOriginPreviewImage(value, baseHref) {
+  if (typeof value !== "string" || !value || !baseHref) return "";
+  try {
+    const base = new URL(baseHref);
+    const image = new URL(value, base);
+    if (image.protocol !== "http:" && image.protocol !== "https:") return "";
+    if (image.origin !== base.origin) return "";
+    if (image.username || image.password) return "";
+    if (image.pathname !== "/web-link-preview/image") return "";
+    if (!/^[a-f\d-]{36}$/iu.test(image.searchParams.get("id") || "")) return "";
+    return image.href;
+  } catch {
+    return "";
+  }
+}
+
+function createPreviewCard(documentRoot, link) {
+  const url = parseWebSourceUrl(link.url);
+  if (!url) return null;
+  const card = previewElement(documentRoot, "a", "message-link-preview");
+  card.href = url.href;
+  card.target = "_blank";
+  card.rel = "noopener noreferrer";
+  const image = previewElement(
+    documentRoot,
+    "img",
+    "message-link-preview-image",
+  );
+  image.hidden = true;
+  image.alt = "";
+  image.loading = "lazy";
+  image.decoding = "async";
+  image.referrerPolicy = "same-origin";
+  image.addEventListener("error", () => {
+    image.hidden = true;
+  });
+  const content = previewElement(
+    documentRoot,
+    "span",
+    "message-link-preview-content",
+  );
+  const domain = previewElement(
+    documentRoot,
+    "span",
+    "message-link-preview-domain",
+    url.hostname,
+  );
+  domain.dir = "ltr";
+  const label = link.label === link.url ? url.hostname : link.label;
+  const title = previewElement(
+    documentRoot,
+    "span",
+    "message-link-preview-title",
+    label || url.hostname,
+  );
+  title.dir = "auto";
+  card.title = `${title.textContent}\n${url.href}`;
+  card.setAttribute("aria-label", card.title);
+  content.append(domain, title);
+  card.append(image, content);
+  return { card, image, title, url: url.href };
+}
+
+function applyPreviewMetadata(card, preview, baseHref) {
+  if (!preview) return;
+  const title = previewText(preview.title, 300);
+  if (title) card.title.textContent = title;
+  const description = previewText(preview.description, 500);
+  card.card.title = [card.title.textContent, description, card.url]
+    .filter(Boolean)
+    .join("\n");
+  card.card.setAttribute("aria-label", card.card.title);
+  const imageUrl = sameOriginPreviewImage(preview.imageUrl, baseHref);
+  if (!imageUrl) return;
+  card.image.src = imageUrl;
+  card.image.hidden = false;
+}
+
+export function createMessageLinkPreviews({
+  documentRoot = document,
+  viewport = window,
+  scrollRoot = null,
+  onLayoutChange = () => {},
+  client = createMessageLinkPreviewClient({
+    fetchImpl: viewport.fetch?.bind(viewport) ?? null,
+  }),
+} = {}) {
+  let observer = null;
+  let renderVersion = 0;
+  const observedCards = new Map();
+
+  function notifyCurrentLayout(version) {
+    if (version !== renderVersion) return;
+    onLayoutChange();
+  }
+
+  function hydrateCard(card, version) {
+    void client.get(card.url).then((preview) => {
+      if (version !== renderVersion) return;
+      applyPreviewMetadata(card, preview, documentRoot.baseURI);
+      if (preview) notifyCurrentLayout(version);
+    });
+  }
+
+  function reset() {
+    renderVersion += 1;
+    observer?.disconnect();
+    observer = null;
+    observedCards.clear();
+    client.cancelQueued();
+  }
+
+  function ensureObserver() {
+    if (observer) return observer;
+    if (typeof viewport.IntersectionObserver !== "function") return null;
+    const version = renderVersion;
+    observer = new viewport.IntersectionObserver(
+      (entries) => {
+        if (version !== renderVersion) return;
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const card = observedCards.get(entry.target);
+          if (!card) continue;
+          observedCards.delete(entry.target);
+          observer.unobserve(entry.target);
+          hydrateCard(card, version);
+        }
+      },
+      { root: scrollRoot, rootMargin: "240px" },
+    );
+    return observer;
+  }
+
+  function createNode(message) {
+    if (message?.streaming) return null;
+    const links = extractMessageLinks(message?.text);
+    if (links.length === 0) return null;
+    const container = previewElement(
+      documentRoot,
+      "div",
+      "message-link-previews",
+    );
+    container.setAttribute("aria-label", "Link previews");
+    for (const link of links) {
+      const card = createPreviewCard(documentRoot, link);
+      if (!card) continue;
+      container.appendChild(card.card);
+      const version = renderVersion;
+      card.image.addEventListener("load", () => notifyCurrentLayout(version));
+      card.image.addEventListener("error", () => notifyCurrentLayout(version));
+      const intersectionObserver = ensureObserver();
+      if (intersectionObserver) {
+        observedCards.set(card.card, card);
+        intersectionObserver.observe(card.card);
+        continue;
+      }
+      hydrateCard(card, renderVersion);
+    }
+    return container;
+  }
+
+  return { createNode, reset };
+}