@abot-ai/runtime 1.1.0 → 1.3.0

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

@@ -0,0 +1,246 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { SCHEDULE_WEEKDAYS } from "../../lib/schedule-presentation.js";
+import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+
+function deviceDateTime(instant) {
+  if (!instant) return "";
+  const date = new Date(instant);
+  if (!Number.isFinite(date.getTime())) return "";
+  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+  return local.toISOString().slice(0, 16);
+}
+
+function options(items, selected) {
+  return items
+    .map(
+      ({ value, label }) =>
+        `<option value="${escapeHtml(value)}" ${value === selected ? "selected" : ""}>${escapeHtml(label)}</option>`,
+    )
+    .join("");
+}
+
+function scheduleFields(job = {}) {
+  const schedule = job.schedule || { kind: "once" };
+  const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const seconds = formatDurationSeconds(
+    schedule.everyMs ?? schedule.delayMs ?? 3600000,
+  );
+  return `
+    <label>Repeat<select name="kind">${options(
+      [
+        { value: "once", label: "Once" },
+        { value: "timer", label: "After a delay" },
+        { value: "interval", label: "At a fixed interval" },
+        { value: "daily", label: "Every day" },
+        { value: "weekly", label: "Selected weekdays" },
+        { value: "monthly", label: "Every month" },
+      ],
+      schedule.kind,
+    )}</select></label>
+    <label data-schedule-kind="once">Date and time (${escapeHtml(zone)})<input name="onceAt" type="datetime-local" value="${deviceDateTime(schedule.at)}"></label>
+    <label data-schedule-kind="timer interval">Duration in seconds<input name="seconds" type="number" min="1" step="0.001" required value="${seconds}"><small>At least 1 second. Decimal values support milliseconds.</small></label>
+    <label data-schedule-kind="interval">First run (${escapeHtml(zone)})<input name="anchorAt" type="datetime-local" value="${deviceDateTime(schedule.anchorAt)}"><small>Leave empty to start one interval after saving.</small></label>
+    <label data-schedule-kind="daily weekly monthly">Time<input name="time" type="time" value="${escapeHtml(schedule.at?.slice(0, 5) || "09:00")}"></label>
+    <fieldset data-schedule-kind="weekly" class="schedule-weekdays"><legend>Weekdays</legend>${SCHEDULE_WEEKDAYS.map((day, index) => `<label><input name="weekdays" type="checkbox" value="${index}" ${schedule.weekdays?.includes(index) ? "checked" : ""}><span title="${day}">${day.slice(0, 3)}</span></label>`).join("")}</fieldset>
+    <label data-schedule-kind="monthly">Day of month<input name="dayOfMonth" type="number" min="1" max="31" value="${schedule.dayOfMonth || 1}"></label>
+    <label>Schedule time zone<input name="timeZone" required value="${escapeHtml(job.timeZone || zone)}" placeholder="Asia/Jerusalem"><small>Daily, weekly and monthly times use this zone.</small></label>`;
+}
+
+export function createScheduleForm({
+  documentRoot,
+  job,
+  initialValues,
+  sessions,
+  models,
+  modes,
+  currentSessionId,
+  onSave,
+  onCancel,
+}) {
+  const form = documentRoot.createElement("form");
+  form.className = "schedule-editor";
+  const values = job || initialValues || {};
+  const createsConversation = !job && values.newConversation === true;
+  const sessionOptions = sessions.map((session) => ({
+    value: session.id,
+    label: session.title || session.id,
+  }));
+  const modelOptions = models.map((model) => ({
+    value: model.id,
+    label: model.label || model.name || model.id,
+  }));
+  if (createsConversation) {
+    sessionOptions.unshift({ value: "__new_conversation__", label: "New dedicated conversation" });
+  }
+  if (
+    job?.modelProfileId &&
+    !modelOptions.some((model) => model.value === job.modelProfileId)
+  ) {
+    modelOptions.unshift({
+      value: job.modelProfileId,
+      label: `${job.modelProfileId} (unavailable)`,
+    });
+  }
+  form.innerHTML = `
+    <div class="schedule-section-heading"><h3>${job ? "Edit schedule" : "New schedule"}</h3></div>
+    <label>Title<input name="title" required maxlength="200" value="${escapeHtml(values.title || "")}" placeholder="Give this task a name" dir="auto"></label>
+    <label>Conversation<select name="sessionId" required ${job ? "disabled" : ""}><option value="">Choose a conversation</option>${options(sessionOptions, createsConversation ? "__new_conversation__" : values.sessionId || currentSessionId)}</select></label>
+    <label>Task prompt<textarea name="prompt" rows="5" required dir="auto" placeholder="What should ABot do when this schedule runs?">${escapeHtml(values.prompt || "")}</textarea></label>
+    <div class="schedule-form-grid">${scheduleFields(values)}</div>
+    <div class="schedule-form-grid"><label>Model<select name="modelProfileId" required><option value="">Choose a model</option>${options(modelOptions, values.modelProfileId)}</select></label>
+    <label>Mode<select name="agentMode">${options(
+      modes
+        .filter((mode) => mode !== "auto")
+        .map((mode) => ({ value: mode, label: mode })),
+      values.agentMode || "reasoning",
+    )}</select></label></div>
+    <p class="schedule-permission-note"><strong>Full tool access</strong> · This task runs in its conversation using the saved model and mode.</p>
+    <p class="schedule-form-feedback" role="alert" hidden></p>
+    <div class="schedule-action-row"><button type="submit" class="primary-button">${job ? "Save changes" : "Create schedule"}</button><button type="button" data-cancel>Cancel</button></div>`;
+  const fields = form.elements;
+  const feedback = form.querySelector(".schedule-form-feedback");
+
+  function syncKind() {
+    const kind = fields.namedItem("kind").value;
+    for (const group of form.querySelectorAll("[data-schedule-kind]")) {
+      group.hidden = !group.dataset.scheduleKind.split(" ").includes(kind);
+      for (const field of group.querySelectorAll("input"))
+        field.disabled = group.hidden;
+    }
+  }
+
+  let initialInput;
+  form.querySelector("[data-cancel]").addEventListener("click", onCancel);
+  fields.namedItem("kind").addEventListener("change", syncKind);
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    feedback.hidden = true;
+    try {
+      const currentInput = scheduleFormInput(new FormData(form), job?.schedule);
+      const input = job
+        ? scheduleUpdateInput(currentInput, initialInput)
+        : currentInput;
+      await onSave(input);
+    } catch (error) {
+      feedback.textContent = scheduleErrorMessage(error);
+      feedback.hidden = false;
+      submit.disabled = false;
+    }
+  });
+  syncKind();
+  if (job) initialInput = scheduleFormInput(new FormData(form), job.schedule);
+  const initialFields = JSON.stringify([...new FormData(form)]);
+  function trackScheduleDraft() {
+    form.dataset.dirty = String(
+      JSON.stringify([...new FormData(form)]) !== initialFields,
+    );
+  }
+  form.addEventListener("input", trackScheduleDraft);
+  form.addEventListener("change", trackScheduleDraft);
+  trackScheduleDraft();
+  return form;
+}
+
+export function scheduleFormInput(data, originalSchedule) {
+  const value = (key) => String(data.get(key) || "").trim();
+  const kind = value("kind");
+  const schedule = { kind };
+  if (kind === "once") {
+    if (!value("onceAt")) throw new Error("Choose an exact date and time.");
+    schedule.at = parseDeviceScheduleInstant(value("onceAt"));
+  }
+  if (kind === "timer")
+    schedule.delayMs = parseDurationMilliseconds(value("seconds"));
+  if (kind === "interval") {
+    schedule.everyMs = parseDurationMilliseconds(value("seconds"));
+    if (value("anchorAt"))
+      schedule.anchorAt = intervalAnchorInput(
+        value("anchorAt"),
+        originalSchedule,
+      );
+  }
+  if (["daily", "weekly", "monthly"].includes(kind)) {
+    if (!value("time")) throw new Error("Choose an exact time.");
+    schedule.at = value("time");
+  }
+  if (kind === "weekly") {
+    schedule.weekdays = data.getAll("weekdays").map(Number);
+    if (!schedule.weekdays.length)
+      throw new Error("Choose at least one weekday.");
+  }
+  if (kind === "monthly") schedule.dayOfMonth = Number(value("dayOfMonth"));
+  const target = value("sessionId") === "__new_conversation__"
+    ? { newConversation: true }
+    : { sessionId: value("sessionId") };
+  return {
+    ...target,
+    title: value("title"),
+    prompt: value("prompt"),
+    modelProfileId: value("modelProfileId"),
+    agentMode: value("agentMode"),
+    timeZone: value("timeZone"),
+    schedule,
+  };
+}
+
+function intervalAnchorInput(wallTime, originalSchedule) {
+  if (hasUnchangedIntervalAnchor(wallTime, originalSchedule))
+    return originalSchedule.anchorAt;
+  return parseDeviceScheduleInstant(wallTime);
+}
+
+function hasUnchangedIntervalAnchor(wallTime, schedule) {
+  if (schedule?.kind !== "interval") return false;
+  if (!schedule.anchorAt) return false;
+  return deviceDateTime(schedule.anchorAt) === wallTime;
+}
+
+function formatDurationSeconds(milliseconds) {
+  const duration = BigInt(milliseconds);
+  const whole = String(duration / 1000n);
+  const fraction = String(duration % 1000n)
+    .padStart(3, "0")
+    .replace(/0+$/, "");
+  if (!fraction) return whole;
+  return `${whole}.${fraction}`;
+}
+
+function parseDurationMilliseconds(seconds) {
+  const decimal = /^(\d+)(?:\.(\d+))?$/.exec(seconds);
+  if (!decimal)
+    throw new Error("Enter at least 1 second, in whole milliseconds.");
+  const fraction = decimal[2] || "";
+  if (/[1-9]/.test(fraction.slice(3)))
+    throw new Error("Enter at least 1 second, in whole milliseconds.");
+  const milliseconds =
+    BigInt(decimal[1]) * 1000n + BigInt(fraction.slice(0, 3).padEnd(3, "0"));
+  if (milliseconds < 1000n)
+    throw new Error("Enter at least 1 second, in whole milliseconds.");
+  if (milliseconds > BigInt(Number.MAX_SAFE_INTEGER))
+    throw new Error("Enter at least 1 second, in whole milliseconds.");
+  return Number(milliseconds);
+}
+
+function parseDeviceScheduleInstant(value) {
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime()))
+    throw new Error("Choose a valid exact date and time.");
+  const instant = date.toISOString();
+  if (deviceDateTime(instant) !== value)
+    throw new Error(
+      "This local time does not exist in your device time zone. Choose another time.",
+    );
+  return instant;
+}
+
+export function scheduleUpdateInput(current, initial) {
+  const patch = {};
+  for (const [key, value] of Object.entries(current)) {
+    if (key === "sessionId") continue;
+    if (JSON.stringify(value) === JSON.stringify(initial[key])) continue;
+    patch[key] = value;
+  }
+  return patch;
+}

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

@@ -0,0 +1,59 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+
+export function scheduleWorkspaceState(snapshot) {
+  if (snapshot.editor || snapshot.jobs.length) return null;
+  if (snapshot.loading)
+    return {
+      kind: "loading",
+      title: "Loading schedules",
+      description: "Getting your tasks and conversations…",
+    };
+  if (snapshot.error)
+    return {
+      kind: "error",
+      title: "Schedules are unavailable",
+      description: scheduleErrorMessage(snapshot.error),
+      action: "refresh",
+      actionLabel: "Refresh schedules",
+    };
+  if (snapshot.selectedId)
+    return {
+      kind: "missing",
+      title: "Schedule no longer available",
+      description:
+        "It may have been removed with its conversation. Retained conversation messages keep their original invocation details.",
+      action: "refresh",
+      actionLabel: "Refresh schedules",
+    };
+  if (!snapshot.sessions.length)
+    return {
+      kind: "empty",
+      title: "Start with a conversation",
+      description:
+        "Every schedule belongs to a conversation. Start one, then choose what ABot should do and when it should return.",
+      action: "chat",
+      actionLabel: "Go to chat",
+    };
+  return {
+    kind: "empty",
+    title: "Your next task, right on time",
+    description:
+      "Create a schedule for a reminder, a recurring check or a task. ABot will run it and reply in its conversation.",
+    action: "create",
+    actionLabel: "Create your first schedule",
+  };
+}
+
+export function renderScheduleWorkspaceState({ root, state, actions }) {
+  root.hidden = !state;
+  if (!state) return;
+  root.dataset.state = state.kind;
+  root.setAttribute("role", state.kind === "error" ? "alert" : "status");
+  root.innerHTML = `<div class="schedule-state-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8.5"/><path d="M12 6.5V12l3.5 2"/></svg></div>
+    <div class="schedule-state-copy"><h3>${escapeHtml(state.title)}</h3><p>${escapeHtml(state.description)}</p>
+    ${state.action ? `<button type="button" class="${state.action === "create" ? "primary-button" : ""}" data-state-action>${escapeHtml(state.actionLabel)}</button>` : ""}</div>`;
+  root
+    .querySelector("[data-state-action]")
+    ?.addEventListener("click", () => actions[state.action]());
+}

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

@@ -0,0 +1,165 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { scheduleTimeLabel } from "../../lib/schedule-message.js";
+import {
+  emptyScheduleListMessage,
+  matchesScheduleFilter,
+  scheduleDescription,
+} from "../../lib/schedule-presentation.js";
+import { createScheduleForm } from "./form.js";
+import { renderScheduleDetails } from "./details.js";
+import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+import {
+  scheduleWorkspaceState,
+  renderScheduleWorkspaceState,
+} from "./workspace-state.js";
+
+export function createSchedulesWorkspace({
+  root,
+  actions,
+  getCurrentSessionId,
+  getAgentModes,
+  documentRoot = document,
+  confirmDiscard = (message) => window.confirm(message),
+}) {
+  let editorIdentity = null;
+  root.innerHTML = `<div class="schedules-toolbar"><label class="schedule-search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Search schedules…" aria-label="Search schedules"></label>
+    <select aria-label="Filter schedule status"><option value="current">Active &amp; paused</option><option value="active">Active</option><option value="paused">Paused</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option><option value="all">All statuses</option></select>
+    <button type="button" data-refresh>Refresh</button><button type="button" class="primary-button" data-create>New schedule</button></div>
+    <p class="schedules-feedback" role="status" aria-live="polite"></p>
+    <section class="schedule-workspace-state" aria-live="polite" hidden></section>
+    <div class="schedules-layout"><div class="schedules-list" aria-label="Schedules"></div><section class="schedule-details" aria-label="Schedule details"></section></div>`;
+  const list = root.querySelector(".schedules-list");
+  const details = root.querySelector(".schedule-details");
+  const search = root.querySelector('[type="search"]');
+  const filter = root.querySelector("select");
+  const feedback = root.querySelector(".schedules-feedback");
+  const createButton = root.querySelector("[data-create]");
+  const toolbar = root.querySelector(".schedules-toolbar");
+  const layout = root.querySelector(".schedules-layout");
+  const workspaceState = root.querySelector(".schedule-workspace-state");
+  search.addEventListener("input", applyFilter);
+  filter.addEventListener("change", applyFilter);
+  root.querySelector("[data-refresh]").addEventListener("click", () => {
+    if (prepareLeave()) void actions.load();
+  });
+  createButton.addEventListener("click", () => {
+    if (prepareLeave()) actions.beginEdit();
+  });
+
+  function prepareLeave() {
+    if (!actions.snapshot().editor) return true;
+    if (!canDiscardScheduleDraft()) return false;
+    actions.cancelEdit();
+    return true;
+  }
+
+  function canDiscardScheduleDraft() {
+    const form = details.querySelector(".schedule-editor");
+    if (form?.dataset.dirty !== "true") return true;
+    return confirmDiscard("Discard this unsaved schedule?");
+  }
+
+  function applyFilter() {
+    const query = search.value;
+    const status = filter.value;
+    if (!prepareLeave()) {
+      const snapshot = actions.snapshot();
+      search.value = snapshot.query;
+      filter.value = snapshot.filter;
+      return;
+    }
+    void actions.filter(query, status);
+  }
+
+  function render(snapshot) {
+    search.value = snapshot.query;
+    filter.value = snapshot.filter;
+    const visible = snapshot.jobs.filter((job) =>
+      matchesScheduleFilter(
+        job,
+        snapshot.query,
+        snapshot.filter,
+        snapshot.sessions,
+      ),
+    );
+    const pageState = scheduleWorkspaceState(snapshot);
+    const firstScheduleEditor =
+      Boolean(snapshot.editor) && snapshot.jobs.length === 0;
+    toolbar.hidden = Boolean(pageState) || firstScheduleEditor;
+    layout.hidden = Boolean(pageState);
+    feedback.hidden = Boolean(pageState) || firstScheduleEditor;
+    renderScheduleWorkspaceState({
+      root: workspaceState,
+      state: pageState,
+      actions: {
+        refresh: () => void actions.load(),
+        create: () => actions.beginEdit(),
+        chat: () => actions.openConversation(getCurrentSessionId()),
+      },
+    });
+    feedback.textContent =
+      (snapshot.error ? scheduleErrorMessage(snapshot.error) : "") ||
+      (snapshot.loading
+        ? "Loading schedules…"
+        : `${visible.length} shown · ${snapshot.jobs.length} schedules`);
+    feedback.classList.toggle("schedule-error", Boolean(snapshot.error));
+    root.setAttribute("aria-busy", String(snapshot.loading));
+    createButton.disabled = snapshot.loading || snapshot.sessions.length === 0;
+    createButton.title = snapshot.sessions.length
+      ? "Create a schedule"
+      : "Start a conversation before creating a schedule";
+    if (pageState) return;
+    layout.classList.toggle("schedule-editor-only", snapshot.jobs.length === 0);
+    list.hidden = snapshot.jobs.length === 0;
+    list.innerHTML =
+      visible
+        .map(
+          (
+            job,
+          ) => `<button type="button" class="schedule-list-item${job.id === snapshot.selectedId ? " selected" : ""}" data-job-id="${escapeHtml(job.id)}" aria-pressed="${job.id === snapshot.selectedId}">
+      <span class="schedule-list-top"><strong dir="auto" title="${escapeHtml(job.title)}">${escapeHtml(job.title)}</strong><span class="schedule-badge" data-state="${job.state}">${job.state}</span></span>
+      <span class="schedule-list-meta"><span class="schedule-list-description" title="${escapeHtml(scheduleDescription(job))}">${escapeHtml(scheduleDescription(job))}</span>${job.nextRunAt ? `<span class="schedule-next-run" title="Next run · ${scheduleTimeLabel(job.nextRunAt, job.timeZone)}">${scheduleTimeLabel(job.nextRunAt, job.timeZone)}</span>` : ""}</span></button>`,
+        )
+        .join("") ||
+      `<div class="schedule-list-empty">${escapeHtml(emptyScheduleListMessage(snapshot))}</div>`;
+    for (const button of list.querySelectorAll("[data-job-id]")) {
+      button.addEventListener("click", () => {
+        if (button.dataset.jobId === actions.snapshot().selectedId) return;
+        if (prepareLeave()) void actions.select(button.dataset.jobId);
+      });
+    }
+    if (snapshot.editor) {
+      details.classList.remove("schedule-details-placeholder");
+      if (editorIdentity === snapshot.editor) return;
+      editorIdentity = snapshot.editor;
+      details.replaceChildren(
+        createScheduleForm({
+          documentRoot,
+          job: snapshot.editor.job,
+          initialValues: snapshot.editor.initialValues,
+          sessions: snapshot.sessions,
+          models: snapshot.models,
+          modes: getAgentModes(),
+          currentSessionId: getCurrentSessionId(),
+          onSave: actions.save,
+          onCancel: actions.cancelEdit,
+        }),
+      );
+      details.querySelector('[name="title"]').focus();
+      return;
+    }
+    editorIdentity = null;
+    const openDetails = new Set(
+      [...details.querySelectorAll("details[data-disclosure-id]")]
+        .filter((node) => node.open)
+        .map((node) => node.dataset.disclosureId),
+    );
+    renderScheduleDetails({ root: details, snapshot, actions });
+    for (const node of details.querySelectorAll(
+      "details[data-disclosure-id]",
+    )) {
+      node.open = openDetails.has(node.dataset.disclosureId);
+    }
+  }
+  return { render, prepareLeave };
+}