@tidegap/cli 0.0.0-stage → 0.18.0

package/ui/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="referrer" content="no-referrer">
+  <meta name="color-scheme" content="light dark">
+  <title>Tidegap</title>
+  <link rel="icon" href="data:,">
+  <link rel="stylesheet" href="tokens.css">
+  <link rel="stylesheet" href="app.css">
+  <script type="module" src="app.js"></script>
+</head>
+<body>
+  <a class="skip" href="#view">Skip to tasks</a>
+  <header class="top">
+    <a class="brand" href="#/agenda" aria-label="Tidegap, Agenda"><span class="brand-mark" aria-hidden="true"></span>Tidegap</a>
+    <nav class="tabs" aria-label="Views">
+      <a href="#/agenda" id="nav-agenda" class="tab"><span class="tab-glyph" aria-hidden="true">&#9776;</span><span class="tab-label">Agenda</span></a>
+      <a href="#/timeline" id="nav-timeline" class="tab"><span class="tab-glyph" aria-hidden="true">&#8767;</span><span class="tab-label">Timeline</span></a>
+      <a href="#/journal" id="nav-journal" class="tab"><span class="tab-glyph" aria-hidden="true">&#10003;</span><span class="tab-label">Journal</span><span class="count" id="unread-count" hidden></span></a>
+    </nav>
+    <div class="top-end">
+      <button type="button" class="pill dispatcher" id="dispatcher-pill" data-state="unknown"><span class="pill-dot" aria-hidden="true"></span><span id="dispatcher-text">Dispatcher</span></button>
+      <button type="button" class="icon-btn" id="help-btn" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)">?</button>
+    </div>
+  </header>
+  <div id="banner" class="banner" hidden></div>
+  <div id="conn" class="conn" role="status" hidden>Disconnected, retrying&hellip;</div>
+  <div id="drop-dock" class="drop-dock" aria-hidden="true" hidden></div>
+  <main id="view" class="view" tabindex="-1" aria-live="off"></main>
+  <div id="scrim" class="scrim" hidden></div>
+  <aside id="drawer" class="drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title" hidden></aside>
+  <div id="toasts" class="toasts"></div>
+  <dialog id="dialog" class="dialog" aria-labelledby="dialog-title"></dialog>
+</body>
+</html>

package/ui/journal.js

@@ -0,0 +1,207 @@
+// Journal: every finished task (completed, failed, cancelled), newest
+// first, grouped by day. Filters live in the hash query
+// (#/journal?status=failed&provider=openai&kind=repeating). A row expands
+// to the result's first lines, the receipt state and the carbon figure.
+
+import { api, SessionExpired } from "./api.js";
+import {
+  bandChip,
+  bandOf,
+  dayLabel,
+  dayStart,
+  grams,
+  h,
+  hm,
+  isUnread,
+  parse,
+  relDay,
+  taskHref,
+} from "./dom.js";
+import { joinMeta, taskRow } from "./row.js";
+import { finishedTasks, notify, state } from "./state.js";
+import { emptyState, errorCard, skeletonRows } from "./views.js";
+
+const STATUS_GLYPH = { completed: "✓", failed: "✕", cancelled: "⊘" };
+const RESULT_LINES = 6;
+
+const expanded = new Set();
+/** task id -> detail body, or {error} */
+const details = new Map();
+
+function journalFilters() {
+  const q = new URLSearchParams(location.hash.split("?")[1] || "");
+  return { status: q.get("status") || "", provider: q.get("provider") || "", kind: q.get("kind") || "" };
+}
+
+function setFilter(name, value) {
+  const f = { ...journalFilters(), [name]: value };
+  const q = new URLSearchParams();
+  for (const [k, v] of Object.entries(f)) if (v) q.set(k, v);
+  const qs = q.toString();
+  location.hash = `#/journal${qs ? `?${qs}` : ""}`;
+}
+
+function matches(t, f) {
+  if (f.status === "unread" ? !isUnread(t) : f.status && t.status !== f.status) return false;
+  if (f.provider && (t.provider || "none") !== f.provider) return false;
+  if (f.kind === "repeating" && !(t.repeat && t.repeat !== "none") && !t.series_id) return false;
+  if (f.kind === "quota_reset" && t.deadline_kind !== "quota_reset") return false;
+  if (f.kind === "absolute" && t.deadline_kind === "quota_reset") return false;
+  return true;
+}
+
+function select(name, label, value, options) {
+  const sel = h("select", { class: "select", name, id: `filter-${name}`, "data-filter": name, onchange: (e) => setFilter(name, e.target.value) },
+    options.map(([v, text]) => h("option", { value: v, selected: v === value ? true : undefined }, text)));
+  return h("label", { class: "filter" }, h("span", { class: "filter-label" }, label), sel);
+}
+
+function finishedAt(t) {
+  const at = parse(t.completed_at);
+  return Number.isFinite(at) ? at : parse(t.scheduled_for);
+}
+
+export function renderJournal(root, { selectedId } = {}) {
+  const head = h("div", { class: "view-head" }, h("h1", { class: "view-title" }, "Journal"));
+  root.append(head);
+  if (!state.loaded) {
+    root.append(state.error ? errorCard("Could not load the journal.") : skeletonRows(6));
+    return;
+  }
+  if (state.error) root.append(errorCard("Could not refresh the journal. Showing the last data."));
+
+  const all = finishedTasks();
+  const f = journalFilters();
+  const providers = [...new Set(all.map((t) => t.provider || "none"))].sort();
+  const unread = all.filter(isUnread).length;
+  const rows = all.filter((t) => matches(t, f)).sort((a, b) => finishedAt(b) - finishedAt(a));
+
+  head.append(h("p", { class: "view-sub" },
+    rows.length === all.length ? `${all.length} tasks` : `${rows.length} of ${all.length} tasks`,
+    unread ? ` · ${unread} unread` : ""));
+
+  if (all.length === 0) {
+    root.append(emptyState({
+      title: "Nothing finished yet.",
+      body: "Completed, failed and cancelled tasks land here with their result and carbon receipt.",
+      link: { href: "#/agenda", text: "Back to the Agenda →" },
+      glyph: "✓",
+    }));
+    return;
+  }
+
+  root.append(h("div", { class: "filters", role: "group", "aria-label": "Journal filters" },
+    select("status", "Status", f.status, [["", "All"], ["completed", "Completed"], ["failed", "Failed"], ["cancelled", "Cancelled"], ["unread", "Unread"]]),
+    select("provider", "Provider", f.provider, [["", "All"], ...providers.map((p) => [p, p === "none" ? "No provider" : p])]),
+    select("kind", "Kind", f.kind, [["", "All"], ["absolute", "Deadline"], ["quota_reset", "Quota reset"], ["repeating", "Repeating"]]),
+    f.status || f.provider || f.kind ? h("a", { class: "btn btn-ghost btn-sm", href: "#/journal" }, "Clear") : null));
+
+  if (rows.length === 0) {
+    root.append(emptyState({ title: "No task matches these filters.", link: { href: "#/journal", text: "Clear filters" }, glyph: "∅" }));
+    return;
+  }
+
+  let day = null;
+  let list = null;
+  for (const t of rows) {
+    const at = finishedAt(t);
+    const d = Number.isFinite(at) ? dayStart(at) : 0;
+    if (d !== day || !list) {
+      day = d;
+      list = h("ul", { class: "rows" });
+      root.append(h("section", { class: "group" },
+        h("div", { class: "day-head" }, h("h2", { class: "day-title" }, d ? relDay(d) : "Unknown day", d && relDay(d) !== dayLabel(d) ? h("span", { class: "day-sub" }, ` · ${dayLabel(d)}`) : null)),
+        list));
+    }
+    const open = expanded.has(t.task_id);
+    const row = taskRow(t, {
+      ctx: "journal",
+      time: `${STATUS_GLYPH[t.status] || ""} ${Number.isFinite(at) ? hm(at) : ""}`,
+      band: t.status === "completed" && bandOf(t.intensity_g_per_kwh) ? { band: bandOf(t.intensity_g_per_kwh), g: t.intensity_g_per_kwh, from: "receipt" } : null,
+      meta: journalMeta(t),
+      selected: t.task_id === selectedId,
+    });
+    const actions = row.querySelector(".row-actions");
+    actions.replaceChildren(h("button", {
+      type: "button",
+      class: ["row-btn", "row-expand", open && "is-open"],
+      "data-action": "expand",
+      "aria-expanded": open ? "true" : "false",
+      "aria-label": open ? "Collapse" : "Expand",
+      tabindex: "-1",
+    }, "›"));
+    list.append(row);
+    if (open) list.append(expansion(t));
+  }
+}
+
+function journalMeta(t) {
+  const parts = [h("span", { class: `tag tag-${t.status}` }, t.status)];
+  if (t.status === "completed" && typeof t.carbon_g === "number") parts.push(h("span", { class: "num" }, grams(t.carbon_g)));
+  if (t.series_id) parts.push("↻ series");
+  if (t.parent_task_id) parts.push("reply");
+  if (t.origin_host) parts.push(t.origin_host);
+  return parts;
+}
+
+export function toggleExpand(id) {
+  if (expanded.has(id)) expanded.delete(id);
+  else {
+    expanded.add(id);
+    if (!details.has(id)) void loadDetail(id);
+  }
+  notify();
+}
+
+async function loadDetail(id) {
+  try {
+    details.set(id, await api.task(id));
+  } catch (err) {
+    if (err instanceof SessionExpired) state.expired = true;
+    else details.set(id, { error: err.message || "Could not load" });
+  }
+  notify();
+}
+
+/** Forget cached expansions for changed tasks. */
+export function invalidateJournal(ids) {
+  for (const id of ids) {
+    details.delete(id);
+    if (expanded.has(id)) void loadDetail(id);
+  }
+}
+
+function expansion(t) {
+  const d = details.get(t.task_id);
+  const box = h("li", { class: "expand", "data-expand-for": t.task_id });
+  if (!d) {
+    box.append(h("span", { class: "sk sk-line" }), h("span", { class: "sk sk-line sk-short" }));
+    return box;
+  }
+  if (d.error && !d.task_id) {
+    box.append(h("p", { class: "muted" }, "Could not load this task."));
+    return box;
+  }
+  const text = d.result_text ?? d.error ?? (d.status === "cancelled" ? "Cancelled before it ran." : null);
+  if (text) {
+    const lines = String(text).split("\n");
+    const cut = lines.length > RESULT_LINES;
+    box.append(h("pre", { class: ["expand-text", d.status === "failed" && "is-error"] }, lines.slice(0, RESULT_LINES).join("\n") + (cut ? "\n…" : "")));
+  }
+  const r = d.receipt;
+  const facts = [];
+  if (r) {
+    facts.push(h("span", { class: ["tag", r.signature ? "tag-completed" : "tag-muted"] }, r.signature ? "receipt signed ✓" : "receipt unsigned"));
+    const g = r.actualCarbonGCo2 ?? r.estimatedCarbonGCo2;
+    if (typeof g === "number") {
+      facts.push(h("span", { class: "num" }, `${grams(g)} CO2e`, typeof r.intensityGCo2PerKwh === "number" ? ` at ${Math.round(r.intensityGCo2PerKwh)} g/kWh` : ""));
+      const band = bandOf(r.intensityGCo2PerKwh);
+      if (band) facts.push(bandChip(band));
+    }
+    if (r.gridSource === "mock") facts.push(h("span", { class: "muted" }, "synthetic grid data"));
+  } else if (d.status === "completed") {
+    facts.push(h("span", { class: "muted" }, "no receipt"));
+  }
+  box.append(h("div", { class: "expand-facts" }, joinMeta(facts), h("a", { class: "btn btn-sm", href: taskHref(t.task_id) }, "Open")));
+  return box;
+}

package/ui/keys.js

@@ -0,0 +1,92 @@
+// Keyboard map. Single keys are ignored while focus is in a text field or a
+// dialog is open, and when a modifier is held (browser shortcuts win).
+//
+//   j / k, ↓ / ↑   next / previous row (opens it when the drawer is open)
+//   Enter          open detail          Esc   close drawer
+//   c cancel · C stop series · r reschedule · m move to · n run now
+//   u read/unread · R reply · 1 2 3 views · / Journal filters · ? help
+
+import { typing } from "./dom.js";
+import { dialogOpen } from "./dialog.js";
+
+function rows() {
+  return [...document.querySelectorAll("#view .row[data-task-id]")];
+}
+
+function focusedRow() {
+  const a = document.activeElement;
+  return a instanceof Element ? a.closest("#view .row[data-task-id]") : null;
+}
+
+/**
+ * handlers: {current() -> task id or null, open(id), close(), drawerOpen(),
+ *   act(name, id), view(name), filters(), help()}
+ */
+export function initKeys(handlers) {
+  document.addEventListener("keydown", (e) => {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+    if (dialogOpen()) return;
+    if (e.key === "Escape") {
+      if (handlers.drawerOpen()) {
+        e.preventDefault();
+        handlers.close();
+      }
+      return;
+    }
+    if (typing(e.target)) return;
+
+    const list = rows();
+    const row = focusedRow();
+    const move = (dir) => {
+      // Arrows inside the drawer scroll it; only j/k reach the rows from there.
+      if (e.key.startsWith("Arrow") && !row && document.getElementById("drawer").contains(document.activeElement)) return;
+      e.preventDefault();
+      if (list.length === 0) return;
+      const currentId = row?.dataset.taskId || handlers.current();
+      let i = list.findIndex((r) => r.dataset.taskId === currentId);
+      i = i < 0 ? (dir > 0 ? 0 : list.length - 1) : Math.min(list.length - 1, Math.max(0, i + dir));
+      const next = list[i];
+      next.focus();
+      next.scrollIntoView({ block: "nearest" });
+      if (handlers.drawerOpen()) handlers.open(next.dataset.taskId, { keepFocus: true });
+    };
+
+    switch (e.key) {
+      case "j":
+      case "ArrowDown":
+        return move(1);
+      case "k":
+      case "ArrowUp":
+        return move(-1);
+      case "Enter":
+        if (row && e.target === row) {
+          e.preventDefault();
+          handlers.open(row.dataset.taskId);
+        }
+        return;
+      case "1":
+        return handlers.view("agenda");
+      case "2":
+        return handlers.view("timeline");
+      case "3":
+        return handlers.view("journal");
+      case "/":
+        e.preventDefault();
+        return handlers.filters();
+      case "?":
+        e.preventDefault();
+        return handlers.help();
+    }
+
+    const actions = { c: "cancel", C: "stop-series", r: "reschedule", m: "move", n: "run-now", u: "toggle-read", R: "reply-focus" };
+    const name = actions[e.key];
+    if (!name) return;
+    const id = row?.dataset.taskId || handlers.current();
+    if (!id) return;
+    e.preventDefault();
+    // A held key repeats; an action runs once per press (holding c must not
+    // cancel row after row as focus moves).
+    if (e.repeat) return;
+    handlers.act(name, id);
+  });
+}

package/ui/row.js

@@ -0,0 +1,153 @@
+// One task row, shared by Agenda, Journal and the Timeline list.
+//
+// [dot][time][band][title + badges / second line][provider · model][actions]
+//
+// Buttons carry data-action; app.js handles them for every view through one
+// delegated listener, so rows hold no closures over task data.
+
+import {
+  by,
+  bandChip,
+  dayLabel,
+  bandOf,
+  h,
+  hm,
+  isUnread,
+  parse,
+  providerModel,
+  REPEAT_LABEL,
+  taskHref,
+  title,
+  when,
+} from "./dom.js";
+import { forecastAt } from "./state.js";
+
+/** Band for a task: forecast at its scheduled hour, else the receipt intensity. */
+function taskBand(t) {
+  const at = parse(t.scheduled_for);
+  if (t.status !== "completed" && Number.isFinite(at)) {
+    const p = forecastAt(t.region, at);
+    if (p) return { band: p.band, g: p.g, from: "forecast" };
+  }
+  const band = bandOf(t.intensity_g_per_kwh);
+  return band ? { band, g: t.intensity_g_per_kwh, from: "receipt" } : null;
+}
+
+const REPEAT_SHORT = { daily: "daily", weekly: "weekly", quota_reset: "every reset" };
+
+/** Badges after the title: repeat rule and quota reset. */
+export function badges(t) {
+  const out = [];
+  if (t.repeat && t.repeat !== "none") {
+    out.push(h("span", { class: "badge badge-repeat", title: REPEAT_LABEL[t.repeat] }, `↻ ${REPEAT_SHORT[t.repeat] || t.repeat}`));
+  }
+  if (t.deadline_kind === "quota_reset") {
+    out.push(h("span", { class: "badge badge-quota", title: `Runs before the ${t.quota_provider || ""} quota resets` }, `⏱ ${t.quota_provider ? `${t.quota_provider} reset` : "quota reset"}`));
+  }
+  return out;
+}
+
+function iconButton(action, label, glyph, extra = {}) {
+  return h("button", { type: "button", class: "row-btn", "data-action": action, "aria-label": label, title: label, tabindex: "-1", ...extra }, glyph);
+}
+
+/** Action buttons for a row, from the server's `actions` (KTD2). */
+function rowActions(t, ctx) {
+  const a = t.actions || {};
+  const out = [];
+  if (ctx === "attention" && t.status === "failed") {
+    if (a.markRead) out.push(h("button", { type: "button", class: "btn btn-sm", "data-action": "read", tabindex: "-1" }, "Dismiss"));
+    out.push(h("a", { class: "btn btn-sm", href: taskHref(t.task_id), tabindex: "-1" }, "Open"));
+    out.push(iconButton("menu", "More actions", "⋯", { class: "row-btn row-more", "aria-haspopup": "dialog" }));
+    return out;
+  }
+  if (ctx === "attention") {
+    if (a.runNow) out.push(h("button", { type: "button", class: "btn btn-sm btn-primary", "data-action": "run-now", tabindex: "-1" }, "Run now"));
+    out.push(iconButton("menu", "More actions", "⋯", { class: "row-btn row-more", "aria-haspopup": "dialog" }));
+    return out;
+  }
+  const hover = [];
+  if (a.runNow) hover.push(iconButton("run-now", "Run now (n)", "▶"));
+  if (a.reschedule) hover.push(iconButton("move", "Move to… (m)", "↦"));
+  if (a.cancel) hover.push(iconButton("cancel", "Cancel (c)", "✕", { class: "row-btn row-btn-danger" }));
+  if (hover.length) out.push(h("span", { class: "row-hover" }, hover));
+  out.push(iconButton("menu", "More actions", "⋯", { class: "row-btn row-more", "aria-haspopup": "dialog" }));
+  return out;
+}
+
+/**
+ * Build one row.
+ *   ctx: "agenda" | "attention" | "journal" | "timeline"
+ *   time: text for the time column (default: scheduled hour)
+ *   meta: second-line parts (strings or nodes)
+ */
+export function taskRow(t, { ctx = "agenda", time, meta = [], band = taskBand(t), selected = false } = {}) {
+  const op = t._op;
+  const draggable = ctx !== "journal" && t.actions?.reschedule && !op;
+  const unread = isUnread(t);
+  const li = h("li", {
+    class: [
+      "row",
+      `row-${t.status}`,
+      op && "row-pending",
+      selected && "row-selected",
+      unread && "row-unread",
+    ],
+    "data-task-id": t.task_id,
+    tabindex: "0",
+    draggable: draggable ? "true" : undefined,
+    "aria-label": `${title(t)}, ${t.status}`,
+  });
+  li.append(
+    h("span", { class: "row-dot", "aria-hidden": "true" }),
+    h("span", { class: "row-time" }, time ?? hm(parse(t.scheduled_for))),
+    h("span", { class: "row-band" }, band ? bandChip(band.band, { title: `${Math.round(band.g)} gCO2/kWh (${band.from})` }) : null),
+    h("span", { class: "row-main" },
+      h("span", { class: "row-line1" },
+        h("a", { class: "row-title", href: taskHref(t.task_id), tabindex: "-1", draggable: "false" }, title(t)),
+        badges(t)),
+      h("span", { class: "row-line2" }, joinMeta(op ? [h("span", { class: "row-op" }, op.label || "Saving…"), ...meta] : meta))),
+    h("span", { class: "row-pm" }, providerModel(t)),
+    h("span", { class: "row-actions" }, op ? h("span", { class: "spinner", role: "img", "aria-label": op.label || "Saving" }) : rowActions(t, ctx)),
+  );
+  if (unread) li.querySelector(".row-dot").setAttribute("title", "Unread");
+  return li;
+}
+
+/** Projected (not yet existing) occurrence of a series. */
+export function projectedRow(series, ms, showDay = false) {
+  const head = series.head;
+  return h("li", { class: "row row-projected", "aria-label": `${title(head)}, projected occurrence` },
+    h("span", { class: "row-dot", "aria-hidden": "true" }),
+    h("span", { class: "row-time" }, showDay ? shortDay(ms) : `~${hm(ms - 3_600_000)}`),
+    h("span", { class: "row-band" }),
+    h("span", { class: "row-main" },
+      h("span", { class: "row-line1" },
+        h("span", { class: "row-title" }, title(head)),
+        h("span", { class: "badge badge-repeat" }, `↻ ${REPEAT_SHORT[series.repeat] || series.repeat}`)),
+      h("span", { class: "row-line2", title: "Created when the previous run finishes" }, joinMeta(["projected", by(ms)]))),
+    h("span", { class: "row-pm" }, providerModel(head)),
+    h("span", { class: "row-actions" }),
+  );
+}
+
+/** "Thu 22" */
+export function shortDay(ms) {
+  return dayLabel(ms).split(" ").slice(0, 2).join(" ");
+}
+
+/** Join second-line parts with a middle dot. */
+export function joinMeta(parts) {
+  const out = [];
+  for (const p of parts.filter((x) => x !== undefined && x !== null && x !== false && x !== "")) {
+    if (out.length) out.push(h("span", { class: "sep", "aria-hidden": "true" }, " · "));
+    out.push(p);
+  }
+  return out;
+}
+
+/** Status word with its tone, for second lines. */
+export function statusTag(t) {
+  const label = { submitted: "in provider batch", running: "running" }[t.status] || t.status;
+  return h("span", { class: `tag tag-${t.status}` }, label);
+}