@abot-ai/runtime 1.1.0 → 1.3.0

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

package/dist/src/web-ui/app/components/model-selector.js

@@ -50,7 +50,10 @@ export function createModelSelector({
     button.disabled = select.disabled || options.length === 0;
     button.setAttribute("aria-expanded", open ? "true" : "false");
     button.classList.toggle("open", open);
-    valueLabel.textContent = selected?.label || "No models configured";
+    const label = selected?.label || "No models configured";
+    valueLabel.textContent = label;
+    button.title = `Model: ${label}`;
+    button.setAttribute("aria-label", `Model: ${label}`);
     menu.hidden = !open;
     menu.classList.toggle("open", open);
     menu.setAttribute("role", "menu");

package/dist/src/web-ui/app/components/operations-section.js

@@ -0,0 +1,46 @@
+import { wrappedIndex } from "../ui-behavior.js";
+import { textOf } from "../lib/text-format.js";
+
+export function createOperationsSection({ buttons, pages }) {
+  const availableTabs = new Set(
+    buttons.map((button) => textOf(button.dataset.tab)),
+  );
+
+  function activateTab(tabName) {
+    const normalized = textOf(tabName, "runtime") || "runtime";
+    const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
+    for (const button of buttons) {
+      const active = button.dataset.tab === nextTab;
+      button.classList.toggle("active", active);
+      button.setAttribute("aria-selected", active ? "true" : "false");
+      button.tabIndex = active ? 0 : -1;
+    }
+    for (const page of pages) {
+      const active = page.id === `${nextTab}Tab`;
+      page.classList.toggle("active", active);
+      page.hidden = !active;
+      page.inert = !active;
+    }
+  }
+
+  function navigateTab(event, button) {
+    const isArrowNavigation =
+      event.key === "ArrowLeft" || event.key === "ArrowRight";
+    if (!isArrowNavigation) return;
+    event.preventDefault();
+    const delta = event.key === "ArrowRight" ? 1 : -1;
+    const next =
+      buttons[wrappedIndex(buttons.indexOf(button), delta, buttons.length)];
+    next?.focus();
+    activateTab(next?.dataset.tab);
+  }
+
+  function bind() {
+    for (const button of buttons) {
+      button.addEventListener("click", () => activateTab(button.dataset.tab));
+      button.addEventListener("keydown", (event) => navigateTab(event, button));
+    }
+  }
+
+  return { activateTab, bind };
+}

package/dist/src/web-ui/app/components/schedules/details.js

@@ -0,0 +1,101 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { scheduleTimeLabel } from "../../lib/schedule-message.js";
+import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+import {
+  canManageSchedule,
+  canRunScheduleNow,
+  scheduleDescription,
+} from "../../lib/schedule-presentation.js";
+
+function fact(label, value) {
+  return `<div><dt>${escapeHtml(label)}</dt><dd dir="auto">${escapeHtml(value || "—")}</dd></div>`;
+}
+
+function actionsMarkup(job, busy) {
+  const disabled = busy ? "disabled" : "";
+  const action = (name, label) =>
+    `<button type="button" data-job-action="${name}" ${disabled}>${label}</button>`;
+  const controls = [];
+  if (canManageSchedule(job)) controls.push(action("edit", "Edit"));
+  if (canRunScheduleNow(job)) controls.push(action("run-now", "Run now"));
+  if (job.state === "active") controls.push(action("pause", "Pause"));
+  if (job.state === "paused") controls.push(action("resume", "Resume"));
+  if (canManageSchedule(job))
+    controls.push(action("cancel", "Cancel schedule"));
+  return controls.join("");
+}
+
+function runMarkup(run) {
+  const timeZone = run.timeZone;
+  return `<article class="schedule-run" data-run-id="${escapeHtml(run.id)}">
+    <div class="schedule-run-heading"><strong>${scheduleTimeLabel(run.scheduledAt, timeZone)}</strong><span class="schedule-badge" data-state="${escapeHtml(run.status)}">${escapeHtml(run.status)}</span></div>
+    <div class="schedule-run-meta">${run.trigger === "manual" ? "Manual run" : "Scheduled run"}${run.startedAt ? ` · Started ${scheduleTimeLabel(run.startedAt, timeZone)}` : ""}${run.finishedAt ? ` · Finished ${scheduleTimeLabel(run.finishedAt, timeZone)}` : ""}</div>
+    <dl class="schedule-run-settings">${fact("Model", run.modelProfileId)}${fact("Mode", run.agentMode)}${fact("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
+    ${run.error ? `<p class="schedule-error" dir="auto">${escapeHtml(run.error)}</p>` : ""}
+    ${run.resultText ? `<details class="schedule-result" data-disclosure-id="result:${escapeHtml(run.id)}"><summary>View result</summary><pre dir="auto">${escapeHtml(run.resultText)}</pre></details>` : ""}
+    <details class="schedule-prompt-disclosure" data-disclosure-id="run:${escapeHtml(run.id)}"><summary>View invocation prompt</summary><pre dir="auto">${escapeHtml(run.prompt)}</pre></details>
+    ${run.requestId ? `<button type="button" class="schedule-text-button" data-open-request="${escapeHtml(run.requestId)}">Open in conversation ↗</button>` : ""}
+    <small class="schedule-id">Run ${escapeHtml(run.id)}${run.requestId ? ` · Request ${escapeHtml(run.requestId)}` : ""}</small>
+  </article>`;
+}
+
+function historyNavigation(snapshot) {
+  const latest = snapshot.loadingRuns || !snapshot.runsCursor;
+  const newer = snapshot.loadingRuns || !snapshot.runsPreviousCursors?.length;
+  const older = snapshot.loadingRuns || !snapshot.runsNextCursor;
+  const button = (name, label, disabled) =>
+    `<button type="button" data-run-page="${name}" ${disabled ? "disabled" : ""}>${label}</button>`;
+  return `<nav class="schedule-action-row" aria-label="Run history pages">
+    ${button("latest", "Newest", latest)}${button("newer", "Newer", newer)}${button("older", "Older", older)}
+  </nav>`;
+}
+
+export function renderScheduleDetails({ root, snapshot, actions }) {
+  const job = snapshot.jobs.find((item) => item.id === snapshot.selectedId);
+  if (!job) {
+    root.classList.add("schedule-details-placeholder");
+    root.innerHTML = `<div class="schedule-detail-empty"><span aria-hidden="true">◷</span><h3>${snapshot.selectedId ? "Schedule unavailable" : "Select a schedule"}</h3><p>${snapshot.selectedId ? "This schedule may have been removed with its conversation." : "See when it runs, manage its settings and follow its results here."}</p></div>`;
+    return;
+  }
+  root.classList.remove("schedule-details-placeholder");
+  const session = snapshot.sessions.find((item) => item.id === job.sessionId);
+  root.innerHTML = `<div class="schedule-detail-heading"><span class="schedule-eyebrow">Scheduled task</span><h3 dir="auto">${escapeHtml(job.title)}</h3><span class="schedule-badge" data-state="${job.state}">${job.state}</span></div>
+    <div class="schedule-action-row">${actionsMarkup(job, snapshot.mutation)}</div>
+    <dl class="schedule-facts">${fact("Schedule", scheduleDescription(job))}${fact("Next run", scheduleTimeLabel(job.nextRunAt, job.timeZone))}${fact("Time zone", job.timeZone)}${fact("Model", job.modelProfileId)}${fact("Mode", job.agentMode)}${fact("Tool access", "Full")}${fact("Created", scheduleTimeLabel(job.createdAt, job.timeZone))}${fact("Updated", scheduleTimeLabel(job.updatedAt, job.timeZone))}</dl>
+    <button type="button" class="schedule-conversation-link" data-open-conversation>↗ <span dir="auto">${escapeHtml(session?.title || job.sessionId)}</span></button>
+    <details class="schedule-prompt-disclosure" data-disclosure-id="job:${escapeHtml(job.id)}"><summary>View task prompt</summary><pre dir="auto">${escapeHtml(job.prompt)}</pre></details>
+    <small class="schedule-id">Job ${escapeHtml(job.id)} · Revision ${job.revision}</small>
+    <section class="schedule-history"><div class="schedule-section-heading"><h3>Run history</h3><span>${snapshot.runs.length} runs on this page</span></div>
+      ${historyNavigation(snapshot)}
+      ${snapshot.loadingRuns ? '<p role="status">Loading runs…</p>' : ""}
+      ${snapshot.detailError ? `<p role="alert" class="schedule-error">${escapeHtml(scheduleErrorMessage(snapshot.detailError))}</p>` : ""}
+      ${snapshot.runs.map((run) => runMarkup(run)).join("") || (!snapshot.loadingRuns && !snapshot.detailError ? '<p class="schedule-muted">No recorded runs yet.</p>' : "")}</section>`;
+  for (const button of root.querySelectorAll("[data-job-action]")) {
+    button.addEventListener("click", () => {
+      if (button.dataset.jobAction === "edit") {
+        actions.beginEdit(job.id);
+        return;
+      }
+      void actions.action(job.id, button.dataset.jobAction);
+    });
+  }
+  root
+    .querySelector("[data-open-conversation]")
+    .addEventListener("click", () => actions.openConversation(job.sessionId));
+  for (const button of root.querySelectorAll("[data-open-request]")) {
+    button.addEventListener("click", () =>
+      actions.openConversation(job.sessionId, button.dataset.openRequest),
+    );
+  }
+  const runPageActions = {
+    latest: actions.latestRuns,
+    newer: actions.newerRuns,
+    older: actions.olderRuns,
+  };
+  for (const button of root.querySelectorAll("[data-run-page]")) {
+    button.addEventListener(
+      "click",
+      () => void runPageActions[button.dataset.runPage](),
+    );
+  }
+}

package/dist/src/web-ui/app/components/schedules/form.d.ts

@@ -0,0 +1,13 @@
+import type {
+  SchedulerSchedule,
+} from "../../../../runtime/scheduler/contracts.js";
+import type { CreateWebScheduleJobInput } from "../../../schedule-creation-contract.js";
+
+export declare function scheduleFormInput(
+  data: FormData,
+  originalSchedule?: SchedulerSchedule,
+): CreateWebScheduleJobInput;
+export declare function scheduleUpdateInput(
+  current: Record<string, unknown>,
+  initial: Record<string, unknown>,
+): Record<string, unknown>;