@tidegap/cli 0.0.0-stage → 0.19.0

package/ui/state.js

@@ -0,0 +1,412 @@
+// Page state: the task lists, dispatcher status, forecasts and series
+// projections, plus optimistic writes.
+//
+// A write is an "op": its patch is applied to the task at read time, so a
+// refresh that lands before the server has the change cannot flash the old
+// state back. The op is confirmed when the change stream names the task and
+// a re-fetch shows the new state; a 4xx/5xx removes the patch (rollback)
+// and shows the server's message. Cancel is a delayed commit: the POST is
+// sent after the 5 s Undo window, or on pagehide.
+
+import { api, ApiError, postKeepalive, request, SessionExpired, tasksPath } from "./api.js";
+import { FINISHED, PENDING, title } from "./dom.js";
+import { errorToast, toast } from "./toast.js";
+
+const FORECAST_TTL_MS = 10 * 60_000;
+const CONFIRM_FALLBACK_MS = 5_000;
+const UNDO_MS = 5_000;
+
+export const state = {
+  loaded: false,
+  error: null,
+  expired: false,
+  connected: true,
+  pending: [],
+  finished: [],
+  status: null,
+  /** region -> {at, points, source, error} */
+  forecasts: new Map(),
+  /** series id -> /api/series body */
+  series: new Map(),
+  /** task id -> op */
+  ops: new Map(),
+};
+
+const listeners = new Set();
+const taskListeners = new Set();
+
+/** Re-render hook: called after every state change. */
+export function subscribe(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+/** Called with the ids of every change-stream event (after the re-fetch). */
+export function onTaskEvent(fn) {
+  taskListeners.add(fn);
+  return () => taskListeners.delete(fn);
+}
+
+let notifyQueued = false;
+export function notify() {
+  if (notifyQueued) return;
+  notifyQueued = true;
+  queueMicrotask(() => {
+    notifyQueued = false;
+    for (const fn of listeners) fn();
+  });
+}
+
+// ── reads ───────────────────────────────────────────────────────────────
+
+/** Every known task with optimistic patches applied, keyed by id. */
+function allTasks() {
+  const out = new Map();
+  for (const t of [...state.finished, ...state.pending]) out.set(t.task_id, t);
+  for (const [id, op] of state.ops) {
+    const t = out.get(id);
+    if (t) out.set(id, { ...t, ...op.patch, _op: op });
+  }
+  return out;
+}
+
+export function pendingTasks() {
+  return [...allTasks().values()].filter((t) => PENDING.includes(t.status));
+}
+
+export function finishedTasks() {
+  return [...allTasks().values()].filter((t) => FINISHED.includes(t.status));
+}
+
+export function findTask(id) {
+  return allTasks().get(id);
+}
+
+let seq = 0;
+
+/** Re-fetch lists and status. Older answers that land late are dropped. */
+export async function refresh() {
+  const mine = ++seq;
+  try {
+    const [p, f, st] = await Promise.all([
+      api.list(`status=${PENDING.join(",")}`),
+      api.list(`status=${FINISHED.join(",")}&limit=1000`),
+      api.status(),
+    ]);
+    if (mine !== seq) return false;
+    state.pending = p.tasks;
+    state.finished = f.tasks;
+    state.status = st;
+    state.loaded = true;
+    state.error = null;
+    notify();
+    void loadSeries();
+    void loadForecasts();
+    return true;
+  } catch (err) {
+    if (mine !== seq) return false;
+    if (err instanceof SessionExpired) state.expired = true;
+    else state.error = err;
+    notify();
+    return false;
+  }
+}
+
+export async function refreshStatus() {
+  try {
+    state.status = await api.status();
+    notify();
+  } catch (err) {
+    if (err instanceof SessionExpired) {
+      state.expired = true;
+      notify();
+    }
+  }
+}
+
+/** series id -> signature of its pending rows when the projection was fetched */
+const seriesSig = new Map();
+
+async function loadSeries() {
+  const sigs = new Map();
+  for (const t of state.pending) {
+    if (!t.series_id || !t.repeat || t.repeat === "none") continue;
+    sigs.set(t.series_id, `${sigs.get(t.series_id) || ""}|${JSON.stringify(t)}`);
+  }
+  for (const id of [...state.series.keys()]) {
+    if (!sigs.has(id)) {
+      state.series.delete(id);
+      seriesSig.delete(id);
+    }
+  }
+  // One request per series whose pending rows changed, not one per series on
+  // every stream event.
+  const stale = [...sigs].filter(([id, sig]) => seriesSig.get(id) !== sig || !state.series.has(id));
+  if (stale.length === 0) return;
+  await Promise.all(
+    stale.map(async ([id, sig]) => {
+      try {
+        state.series.set(id, await api.series(id));
+        seriesSig.set(id, sig);
+      } catch {
+        state.series.delete(id);
+        seriesSig.delete(id);
+      }
+    }),
+  );
+  notify();
+}
+
+/** Regions with pending work, plus the default region. */
+function regions() {
+  const out = new Set(state.pending.map((t) => t.region).filter(Boolean));
+  if (state.status?.default_region) out.add(state.status.default_region);
+  return [...out];
+}
+
+async function loadForecasts() {
+  const now = Date.now();
+  const todo = regions().filter((r) => {
+    const f = state.forecasts.get(r);
+    return !f || now - f.at > FORECAST_TTL_MS;
+  });
+  if (todo.length === 0) return;
+  await Promise.all(
+    todo.map(async (region) => {
+      try {
+        const f = await api.forecast(region, 72);
+        state.forecasts.set(region, { at: now, points: f.points, source: f.source, region: f.region, error: null });
+      } catch (err) {
+        state.forecasts.set(region, { at: now, points: [], source: null, region, error: err });
+      }
+    }),
+  );
+  notify();
+}
+
+/** Forecast point covering `ms` for `region`, or undefined. */
+export function forecastAt(region, ms) {
+  const f = state.forecasts.get(region);
+  if (!f || !Number.isFinite(ms)) return undefined;
+  const hour = Math.floor(ms / 3_600_000);
+  return f.points.find((p) => Math.floor(Date.parse(p.t) / 3_600_000) === hour);
+}
+
+// ── writes ──────────────────────────────────────────────────────────────
+
+/**
+ * Run one optimistic write.
+ *   id       task id
+ *   patch    fields applied to the row at once
+ *   label    pending text shown in the row ("Moving…")
+ *   send     () => Promise (the POST)
+ *   confirm  (freshTask) => toast text once the stream confirms
+ * Returns the POST result, or undefined when it failed.
+ */
+export async function perform({ id, patch, label, send, confirm, action }) {
+  const op = { id, patch: patch || {}, label, confirm, action, posted: false, timer: null };
+  state.ops.set(id, op);
+  notify();
+  return commit(op, send);
+}
+
+async function commit(op, send) {
+  try {
+    const out = await send();
+    op.posted = true;
+    op.result = out;
+    // The stream normally confirms within a second; if it is down, a plain
+    // re-fetch confirms instead.
+    // The server emits before it answers, so the event may already be here.
+    if (op.seen) void confirmOps([op.id]);
+    else op.timer = setTimeout(() => confirmOps([op.id]), CONFIRM_FALLBACK_MS);
+    return out;
+  } catch (err) {
+    state.ops.delete(op.id);
+    notify();
+    if (err instanceof SessionExpired) {
+      state.expired = true;
+      notify();
+    } else {
+      // 409 carries the core's one-line refusal; other statuses (500 "action
+      // failed", 400 validation) say only that the server did not apply it.
+      const msg = !(err instanceof ApiError)
+        ? "Network error; nothing changed."
+        : err.status === 409 || err.status === 400
+          ? err.message
+          : "the server could not apply it; nothing changed.";
+      errorToast(`${capital(op.action || "Action")} failed: ${msg}`);
+      void refresh();
+    }
+    return undefined;
+  }
+}
+
+const CONFIRM_RETRIES = 5;
+
+async function confirmOps(ids) {
+  const ready = ids.map((id) => state.ops.get(id)).filter((op) => op && op.posted);
+  if (ready.length === 0) return;
+  if (!(await refresh())) {
+    // A failed or superseded refresh says nothing about the write: keep the
+    // optimistic patch and try again, so the old state never flashes back.
+    for (const op of ready) {
+      if (state.ops.get(op.id) !== op) continue;
+      op.tries = (op.tries || 0) + 1;
+      clearTimeout(op.timer);
+      if (op.tries < CONFIRM_RETRIES) op.timer = setTimeout(() => confirmOps([op.id]), 1000);
+      else state.ops.delete(op.id);
+    }
+    if (ready.some((op) => !state.ops.has(op.id))) notify();
+    return;
+  }
+  for (const op of ready) {
+    if (state.ops.get(op.id) !== op) continue;
+    clearTimeout(op.timer);
+    state.ops.delete(op.id);
+    const fresh = findTask(op.id) || op.result;
+    if (op.confirm) {
+      const msg = op.confirm(fresh);
+      if (msg) toast(msg.text || msg, msg.action ? { action: msg.action } : {});
+    }
+  }
+  notify();
+}
+
+function capital(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+/** Delayed cancels: id -> {op, toast, series} */
+const delayed = new Map();
+
+/**
+ * Cancel with Undo (KTD12). The row looks cancelled at once; the POST goes
+ * out when the toast expires. Undo drops the patch and sends nothing.
+ */
+export function cancelWithUndo(task, { series = false } = {}) {
+  if (delayed.has(task.task_id)) return;
+  const id = task.task_id;
+  const op = {
+    id,
+    patch: { status: "cancelled", completed_at: new Date().toISOString(), repeat: series ? "none" : task.repeat },
+    label: "Cancelling…",
+    action: series ? "stop series" : "cancel",
+    posted: false,
+    timer: null,
+    delayed: true,
+    confirm: () => (series ? `Series stopped: “${title(task)}”` : `Cancelled “${title(task)}”`),
+  };
+  state.ops.set(id, op);
+  notify();
+  const t = toast(series ? `Stopping series “${title(task)}”` : `Cancelled “${title(task)}”`, {
+    timeout: UNDO_MS,
+    countdown: true,
+    action: {
+      label: "Undo",
+      run: () => {
+        delayed.delete(id);
+        state.ops.delete(id);
+        notify();
+        toast(`Kept “${title(task)}”`);
+      },
+    },
+    onTimeout: () => {
+      if (!delayed.has(id)) return;
+      delayed.delete(id);
+      op.delayed = false;
+      op.label = "Cancelling…";
+      void commit(op, () => api.cancel(id, series));
+    },
+  });
+  delayed.set(id, { op, toast: t, series });
+}
+
+/** True while a cancel for `id` waits in its Undo window. */
+export function cancelPending(id) {
+  return delayed.has(id);
+}
+
+/** Send every delayed cancel now (the page is going away). */
+export function flushDelayed() {
+  if (delayed.size === 0) return;
+  for (const [id, d] of delayed) {
+    postKeepalive(tasksPath(id, "cancel"), d.series ? { series: true } : {});
+    // The cancel is sent: a page restored from the back/forward cache must
+    // not offer Undo for it or keep the row in its pending look.
+    d.toast.element.remove();
+    state.ops.delete(id);
+  }
+  delayed.clear();
+  notify();
+  void refresh();
+}
+
+// ── change stream (SSE read over fetch so the bearer header applies) ─────
+
+export async function stream() {
+  let delay = 1000;
+  let reconnect = false;
+  while (!state.expired) {
+    try {
+      const res = await request("/api/events");
+      if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
+      state.connected = true;
+      notify();
+      delay = 1000;
+      const reader = res.body.getReader();
+      const dec = new TextDecoder();
+      let buf = "";
+      for (;;) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, { stream: true });
+        let i;
+        while ((i = buf.indexOf("\n\n")) >= 0) {
+          const msg = buf.slice(0, i);
+          buf = buf.slice(i + 2);
+          handleEvent(msg, reconnect);
+        }
+      }
+    } catch (err) {
+      if (err instanceof SessionExpired) {
+        state.expired = true;
+        notify();
+        return;
+      }
+    }
+    state.connected = false;
+    notify();
+    reconnect = true;
+    await new Promise((r) => setTimeout(r, delay));
+    delay = Math.min(delay * 2, 30_000);
+  }
+}
+
+function handleEvent(msg, reconnect) {
+  const event = /^event: (.+)$/m.exec(msg)?.[1];
+  const data = /^data: (.*)$/m.exec(msg)?.[1];
+  if (event === "hello") {
+    // Changes made while the stream was down produce no event of their own.
+    if (reconnect) void refresh().then(() => emitTaskEvent([]));
+    return;
+  }
+  if (event !== "tasks") return;
+  let ids = [];
+  try {
+    ids = JSON.parse(data || "{}").ids || [];
+  } catch {
+    ids = [];
+  }
+  for (const id of ids) {
+    const op = state.ops.get(id);
+    if (op && !op.posted) op.seen = true;
+  }
+  const mine = ids.filter((id) => state.ops.get(id)?.posted);
+  const work = mine.length ? confirmOps(mine) : refresh();
+  void work.then(() => emitTaskEvent(ids));
+}
+
+function emitTaskEvent(ids) {
+  for (const fn of taskListeners) fn(ids);
+}

package/ui/timeline.js

@@ -0,0 +1,202 @@
+// Timeline: the forecast curve for the next hours with every pending task
+// placed at its scheduled hour. The area under the curve takes the carbon
+// band colour of each hour. Clicking a marker selects its row in the list
+// under the chart (same row anatomy as the Agenda).
+
+import {
+  by,
+  BAND_LABEL,
+  bandChip,
+  dayLabel,
+  h,
+  hm,
+  nextDayStart,
+  parse,
+  s,
+  title,
+  when,
+} from "./dom.js";
+import { runAt } from "./agenda.js";
+import { statusTag, taskRow } from "./row.js";
+import { notify, pendingTasks, state } from "./state.js";
+import { emptyState, errorCard, skeletonRows } from "./views.js";
+
+const HOUR = 3_600_000;
+let selected = null;
+
+export function selectMarker(id) {
+  selected = id;
+  notify();
+  requestAnimationFrame(() => {
+    const row = document.querySelector(`#view .row[data-task-id="${CSS.escape(id)}"]`);
+    if (row) {
+      row.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      row.focus({ preventScroll: true });
+    }
+  });
+}
+
+function primaryRegion(tasks) {
+  const counts = new Map();
+  for (const t of tasks) counts.set(t.region, (counts.get(t.region) || 0) + 1);
+  let best = state.status?.default_region;
+  let n = 0;
+  for (const [r, c] of counts) if (c > n) [best, n] = [r, c];
+  return best;
+}
+
+export function renderTimeline(root, { selectedId, width } = {}) {
+  root.append(h("div", { class: "view-head" }, h("h1", { class: "view-title" }, "Timeline")));
+  if (!state.loaded) {
+    root.append(state.error ? errorCard("Could not load tasks.") : h("div", { class: "sk sk-chart", "aria-busy": "true", "aria-label": "Loading forecast" }), skeletonRows(3));
+    return;
+  }
+  const tasks = pendingTasks().sort((a, b) => (runAt(a) || 0) - (runAt(b) || 0));
+  const region = primaryRegion(tasks);
+  const f = state.forecasts.get(region);
+  const head = root.firstElementChild;
+  head.append(h("p", { class: "view-sub" }, `${region} · gCO2e per kWh · next ${f?.points?.length || 72} h`));
+
+  if (!f) {
+    root.append(h("div", { class: "sk sk-chart", "aria-busy": "true", "aria-label": "Loading forecast" }));
+  } else if (f.error || f.points.length < 2) {
+    root.append(errorCard("Forecast unavailable. The task list below is still current."));
+  } else {
+    const chartWrap = h("figure", { class: "chart-wrap" });
+    chartWrap.append(chart(f.points, tasks, region, width, selectedId || selected));
+    const inRange = tasks.filter((t) => markerTime(t, f.points) !== null).length;
+    if (inRange === 0) chartWrap.append(h("p", { class: "chart-empty" }, "No tasks in the next 72 h"));
+    chartWrap.append(h("figcaption", { class: "chart-legend" },
+      Object.keys(BAND_LABEL).map((b) => bandChip(b)),
+      h("span", { class: "legend-note" },
+        `source ${f.source}${f.source === "mock" ? " (synthetic, not a measurement)" : ""} · dots are tasks at their scheduled hour, ticks are deadlines`)));
+    root.append(chartWrap);
+  }
+
+  if (tasks.length === 0) {
+    root.append(emptyState({ title: "No pending tasks.", body: "Deferred tasks appear on the curve at the hour tidegap picked.", glyph: "∿" }));
+    return;
+  }
+  const list = h("ul", { class: "rows" });
+  for (const t of tasks) {
+    const at = runAt(t);
+    list.append(taskRow(t, {
+      ctx: "timeline",
+      time: Number.isFinite(at) ? hm(at) : "",
+      meta: [
+        t.status === "running" || t.status === "submitted" ? statusTag(t) : null,
+        Number.isFinite(at) ? when(at) : null,
+        Number.isFinite(parse(t.deadline)) ? by(parse(t.deadline)) : null,
+      ].filter(Boolean),
+      selected: t.task_id === (selectedId || selected),
+    }));
+  }
+  root.append(h("section", { class: "group" }, h("div", { class: "day-head" }, h("h2", { class: "day-title" }, "Pending, by run time"), h("span", { class: "day-count" }, String(tasks.length))), list));
+}
+
+/** Scheduled hour of `t` when the forecast covers it, else null. */
+function markerTime(t, points) {
+  if (t.status === "submitted") return null;
+  const at = runAt(t);
+  const t0 = Date.parse(points[0].t);
+  const t1 = Date.parse(points[points.length - 1].t) + HOUR;
+  return Number.isFinite(at) && at >= t0 && at < t1 ? at : null;
+}
+
+function chart(points, tasks, region, width = 960, selectedId) {
+  const W = Math.max(320, Math.round(width));
+  const H = W < 720 ? 160 : 220;
+  const L = 36, R = 12, T = 18, B = 26;
+  const t0 = Date.parse(points[0].t);
+  const t1 = Date.parse(points[points.length - 1].t) + HOUR;
+  const gMax = Math.max(...points.map((p) => p.g)) * 1.15 || 1;
+  const x = (ms) => L + ((ms - t0) / (t1 - t0)) * (W - L - R);
+  const y = (g) => T + (1 - g / gMax) * (H - T - B);
+  const base = H - B;
+
+  const svg = s("svg", {
+    class: "chart",
+    width: W,
+    height: H,
+    viewBox: `0 0 ${W} ${H}`,
+    role: "img",
+    "aria-label": `Forecast carbon intensity for ${region} with pending tasks at their scheduled hour. The same tasks are listed below the chart.`,
+  });
+
+  // Band thresholds as faint guides.
+  for (const g of [100, 250, 450, 700]) {
+    if (g >= gMax) break;
+    svg.append(s("line", { class: "guide", x1: L, x2: W - R, y1: y(g), y2: y(g) }));
+    svg.append(s("text", { class: "axis-label", x: L - 6, y: y(g) + 4, "text-anchor": "end" }, String(g)));
+  }
+  svg.append(s("text", { class: "axis-label", x: L - 6, y: base + 4, "text-anchor": "end" }, "0"));
+
+  // Band-coloured area, one segment per hour, under a smooth-ish curve.
+  const mids = points.map((p) => ({ x: x(Date.parse(p.t) + HOUR / 2), y: y(p.g), band: p.band }));
+  const pts = [{ x: L, y: mids[0].y, band: mids[0].band }, ...mids, { x: x(t1), y: mids[mids.length - 1].y, band: mids[mids.length - 1].band }];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const a = pts[i], b = pts[i + 1];
+    svg.append(s("path", {
+      class: `area area-${i === 0 ? b.band : a.band}`,
+      d: `M${a.x.toFixed(1)},${base} L${a.x.toFixed(1)},${a.y.toFixed(1)} L${b.x.toFixed(1)},${b.y.toFixed(1)} L${b.x.toFixed(1)},${base} Z`,
+    }));
+  }
+  svg.append(s("path", { class: "curve", d: pts.map((p, i) => `${i ? "L" : "M"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ") }));
+  svg.append(s("line", { class: "axis", x1: L, x2: W - R, y1: base, y2: base }));
+
+  // Day boundaries and hour labels.
+  for (let d = nextDayStart(t0); d < t1; d = nextDayStart(d)) {
+    svg.append(s("line", { class: "day-line", x1: x(d), x2: x(d), y1: T - 6, y2: base }));
+    svg.append(s("text", { class: "day-label", x: x(d) + 4, y: T - 6 }, dayLabel(d)));
+  }
+  const step = W < 720 ? 12 : 6;
+  for (let ms = Math.ceil(t0 / HOUR) * HOUR; ms < t1; ms += HOUR) {
+    const hr = new Date(ms).getHours();
+    if (hr % step !== 0 || hr === 0) continue;
+    svg.append(s("text", { class: "axis-label", x: x(ms), y: H - 8, "text-anchor": "middle" }, hm(ms)));
+  }
+
+  // Now.
+  const now = Date.now();
+  if (now >= t0 && now <= t1) {
+    svg.append(s("line", { class: "now-line", x1: x(now), x2: x(now), y1: T - 6, y2: base }));
+    svg.append(s("text", { class: "now-label", x: x(now) + 4, y: base - 6 }, "now"));
+  }
+
+  // Deadline ticks.
+  for (const t of tasks) {
+    const dl = parse(t.deadline);
+    if (!Number.isFinite(dl) || dl < t0 || dl > t1) continue;
+    svg.append(s("line", { class: "deadline-tick", x1: x(dl), x2: x(dl), y1: base - 8, y2: base + 4 },
+      s("title", {}, `Deadline: ${title(t)} by ${when(dl)}`)));
+  }
+
+  // Task markers, grouped per hour.
+  const slots = new Map();
+  for (const t of tasks) {
+    const at = markerTime(t, points);
+    if (at === null) continue;
+    const slot = Math.floor(at / HOUR);
+    slots.set(slot, [...(slots.get(slot) || []), t]);
+  }
+  for (const [slot, group] of slots) {
+    const p = points.find((q) => Math.floor(Date.parse(q.t) / HOUR) === slot);
+    const cx = x(slot * HOUR + HOUR / 2);
+    const cy = p ? y(p.g) : base;
+    const ids = group.map((t) => t.task_id);
+    const isSel = ids.includes(selectedId);
+    const label = `${group.map(title).join(", ")} at ${hm(slot * HOUR)}${p ? `, ${BAND_LABEL[p.band]}` : ""}`;
+    const g = s("g", {
+      class: ["marker", p && `marker-${p.band}`, isSel && "is-selected"].filter(Boolean).join(" "),
+      tabindex: "0",
+      role: "button",
+      "aria-label": label,
+      "data-select": ids[0],
+    }, s("title", {}, label));
+    g.append(s("circle", { class: "marker-halo", cx, cy, r: group.length > 1 ? 13 : 10 }));
+    g.append(s("circle", { class: "marker-dot", cx, cy, r: group.length > 1 ? 8 : 5 }));
+    if (group.length > 1) g.append(s("text", { class: "marker-count", x: cx, y: cy + 3.5, "text-anchor": "middle" }, String(group.length)));
+    svg.append(g);
+  }
+  return svg;
+}

package/ui/toast.js

@@ -0,0 +1,69 @@
+// Toasts: short confirmations at the bottom of the page. Info toasts use
+// role="status", errors role="alert". A toast may carry one action button
+// (Undo, Start dispatcher, Open).
+
+import { h } from "./dom.js";
+
+const MAX_VISIBLE = 3;
+
+function region() {
+  return document.getElementById("toasts");
+}
+
+/**
+ * Show a toast. Returns `{dismiss}`. `timeout` 0 keeps it until dismissed.
+ * `onTimeout` runs when the toast expires on its own (not on dismiss or
+ * on its action), which is how Undo's delayed commit works.
+ */
+export function toast(message, opts = {}) {
+  const { kind = "info", action, timeout = kind === "error" ? 8000 : 4500, onTimeout, countdown = false } = opts;
+  const root = region();
+  let timer = null;
+  let done = false;
+  const el = h("div", {
+    class: ["toast", `toast-${kind}`, countdown && "toast-countdown"],
+    role: kind === "error" ? "alert" : "status",
+  });
+  const close = (why) => {
+    if (done) return;
+    done = true;
+    clearTimeout(timer);
+    el.classList.add("toast-out");
+    setTimeout(() => el.remove(), 220);
+    if (why === "timeout" && onTimeout) onTimeout();
+  };
+  el.append(h("span", { class: "toast-msg" }, message));
+  if (action) {
+    el.append(
+      h("button", {
+        type: "button",
+        class: "toast-action",
+        onclick: () => {
+          close("action");
+          action.run();
+        },
+      }, action.label),
+    );
+  }
+  el.append(h("button", { type: "button", class: "toast-close", "aria-label": "Dismiss", onclick: () => close("dismiss") }, "×"));
+  if (countdown && timeout > 0) {
+    const bar = h("span", { class: "toast-bar", "aria-hidden": "true" });
+    bar.style.animationDuration = `${timeout}ms`;
+    el.append(bar);
+  }
+  root.append(el);
+  // Evict the oldest toast that carries no pending commit. An Undo toast
+  // stays until it expires (its expiry is the commit), so the stack may grow
+  // past the cap when several cancels wait at once.
+  while (root.children.length > MAX_VISIBLE) {
+    const old = [...root.children].find((c) => !c.classList.contains("toast-countdown"));
+    if (!old) break;
+    old.remove();
+  }
+  if (timeout > 0) timer = setTimeout(() => close("timeout"), timeout);
+  return { dismiss: () => close("dismiss"), expire: () => close("timeout"), element: el };
+}
+
+export function errorToast(message, action) {
+  return toast(message, { kind: "error", action });
+}