skills/orchestrator/templates/page-inbox.js

  async function submit(entries, label) {
    ui.busy = true;
    const signed = await proofFor(entries, label);
    if (signed === null) {
      ui.busy = false;
      await load();
      return false;
    }
    const result = await sendJson("/api/inbox/approve", {items: entries, proof: signed.proof});
    ui.busy = false;
    if (!result.ok || !result.data) {
      toast(`${label}: not possible`, fail(result), false);
      await load();
      return false;
    }
    known.batches.add(result.data.id);
    ui.selected.clear();
    undoToast(result.data, label);
    await load();
    return true;
  }

  function undoToast(batch, label) {
    const left = h("span", {class: "muted"});
    const button = h("button", {type: "button", class: "btn small", ...named("Undo")}, icon("bi-arrow-counterclockwise"), "Undo");
    const box = h("div", {class: "toast wait", role: "status"}, h("strong", {}, label), h("div", {class: "undo-row"}, left, h("span", {class: "spacer"}), button));
    let timer = 0;
    const count = () => {
      const rest = Math.ceil(batch.due - nowSeconds());
      if (rest <= 0) {
        window.clearInterval(timer);
        box.remove();
        load();
        return;
      }
      left.textContent = `takes effect in ${rest} s`;
    };
    timer = window.setInterval(count, 250);
    button.addEventListener("click", async () => {
      window.clearInterval(timer);
      button.disabled = true;
      const result = await send(`/api/inbox/undo/${encodeURIComponent(batch.id)}`, "", "application/json");
      box.remove();
      toast(result.ok ? `Undone: ${label}` : "Too late: already in effect", result.ok ? [] : [`${result.status} ${result.text}`.trim()], result.ok);
      await load();
    });
    document.getElementById("toasts").append(box);
    count();
  }

  function approveOne(item) {
    if (item.kind === "rule") {
      return acceptRule(item);
    }
    if (item.kind === "decision") {
      if (!item.recommended) {
        openItem(item);
        return null;
      }
      return submit([entryOf(item, "approve", item.recommended)], `Decision: ${item.recommended}`);
    }
    return submit([entryOf(item, "approve", "")], `${item.kind === "operator" ? "Run" : "Grant"}: ${short(item.title)}`);
  }

  const rejectOne = (item) => submit([entryOf(item, "reject", "")], `Denial: ${short(item.title)}`);
  const chooseOne = (item, label) => submit([entryOf(item, "approve", label)], `Decision: ${label}`);

  function bulk(items, label) {
    const usable = items.filter(selectable);
    if (!usable.length) {
      toast(`${label}: nothing to grant`, [], false);
      return;
    }
    const rows = usable.map((item) => h("li", {},
      h("div", {class: "row"}, pill(ITEM_LABELS[item.kind], KIND_TONES[item.kind]), item.kind === "decision" ? h("span", {class: "muted"}, `→ ${item.recommended}`) : null),
      h("strong", {}, item.title),
      item.kind === "operator" ? h("div", {class: "command"}, h("code", {}, item.command)) : null,
      item.kind === "operator" ? h("span", {class: "muted"}, `in ${item.directory}`) : null,
      item.kind === "ask" ? h("div", {class: "command"}, h("code", {}, item.command)) : null));
    const confirm = h("button", {type: "button", class: "btn primary"}, `Grant ${usable.length}`);
    confirm.addEventListener("click", () => {
      closeSheet();
      submit(usable.map((item) => entryOf(item, "approve", item.kind === "decision" ? item.recommended : "")), `${label}: ${usable.length} entries`);
    });
    openSheet(label, [h("p", {class: "muted"}, "Every entry and every full command that gets granted. After the click the passkey signs the whole selection once; then 3 s remain to undo."), h("ul", {class: "mini"}, rows), h("div", {class: "actions"}, h("span", {class: "spacer"}), btn("Cancel", "btn ghost", closeSheet), confirm)], false);
    confirm.focus();
  }

  async function mark(item, until, pinned) {
    const result = await sendJson("/api/inbox/mark", {kind: item.kind, id: item.id, until, pinned});
    if (!result.ok) {
      toast("Marking failed", [`${result.status} ${result.text}`.trim()], false);
    }
    await load();
  }

  function tomorrow() {
    const date = new Date();
    date.setDate(date.getDate() + 1);
    date.setHours(8, 0, 0, 0);
    return date.getTime() / 1000;
  }

  function toggle(item) {
    if (!item || !selectable(item)) {
      return;
    }
    const key = keyOf(item);
    if (ui.selected.has(key)) {
      ui.selected.delete(key);
    } else {
      ui.selected.add(key);
    }
    drawInbox();
  }

  function actionsFor(item) {
    if (item.held) {
      return [h("span", {class: "muted"}, "takes effect …")];
    }
    const buttons = [];
    if (item.kind === "review") {
      buttons.push(iconBtn("bi-check-lg", "Grant", "btn small primary", () => approveOne(item)), iconBtn("bi-x-lg", "Deny", "btn small danger", () => rejectOne(item)));
    } else if (item.kind === "ask") {
      buttons.push(iconBtn("bi-check-lg", "Grant", "btn small primary", () => approveOne(item)));
    } else if (item.kind === "decision" && item.recommended) {
      buttons.push(h("button", {type: "button", class: "btn small primary", ...named(`Recommendation: ${item.recommended}`), on: {click: () => approveOne(item)}}, icon("bi-check-lg"), item.recommended));
    } else if (item.kind === "operator" && item.runnable) {
      buttons.push(iconBtn("bi-play-fill", "Run", "btn small primary", () => approveOne(item)));
    } else if (item.kind === "rule") {
      buttons.push(h("button", {type: "button", class: "btn small primary", ...named("Accept", "Accept: the passkey signs exactly this rule, then it applies"), on: {click: () => approveOne(item)}}, icon("bi-shield-check"), "Accept"));
    }
    if (item.deniable) {
      buttons.push(denySplit(item));
    }
    if (item.job && !jobOpen(item.job)) {
      buttons.push(iconBtn("bi-x-circle", "Close", "btn small ghost", () => dismissJob(item.job), "Close: hide the console; a done row disappears with it"));
    }
    return buttons;
  }

  function inboxItem(item, index) {
    const red = item.kind === "review" && item.gate !== "pass";
    const classes = ["item", isGreen(item) ? "green" : "", red ? "red" : "", item.held ? "held" : "", index === ui.cursor ? "cursor" : ""].filter(Boolean).join(" ");
    const box = h("input", {type: "checkbox", "aria-label": `Select ${item.title}`, checked: ui.selected.has(keyOf(item)), disabled: !selectable(item), on: {change: () => toggle(item)}});
    return h("li", {class: classes, "data-index": index},
      box,
      h("div", {},
        h("div", {class: "head-row"},
          pill(ITEM_LABELS[item.kind], KIND_TONES[item.kind]),
          item.kind === "review" ? pill(item.gate === "pass" ? "Gate green" : "Gate red", item.gate === "pass" ? "ok" : "bad") : null,
          item.warnings.map((warning) => pill(warning, "bad")),
          item.pinned ? pill("pinned", "violet") : null,
          item.until ? pill(`until ${absolute.format(stampOf(item.until))}`, "neutral") : null,
          h("span", {class: "spacer"}), when(item.ts)),
        h("button", {type: "button", class: "linkish", title: "Open", on: {click: () => openItem(item)}}, item.title),
        item.agent ? h("div", {class: "muted"}, "from ", person(item.agent)) : null,
        item.kind === "review" ? h("div", {class: "muted"}, item.detail, item.score ? ` · ${item.score}` : "") : null,
        item.kind === "operator" && item.title !== item.command ? h("div", {class: "command"}, h("code", {}, item.command)) : null,
        item.kind === "operator" ? h("div", {class: "muted"}, `in ${dash(item.directory)}`, item.detail && item.detail !== "-" ? ` · ${item.detail}` : "") : null,
        item.job ? consoleOf(item.job) : null,
        item.kind === "rule" ? ruleRequestBody(item) : null,
        item.kind === "ask" ? h("div", {class: "muted"}, `in ${dash(item.directory)}`) : null,
        item.kind === "decision" ? h("div", {class: "options"}, item.options.map((option) => h("button", {
          type: "button", class: `option${option.label === item.recommended ? " recommended" : ""}`, disabled: item.held, on: {click: () => chooseOne(item, option.label)},
        }, h("strong", {}, option.label), option.description ? h("span", {}, option.description) : null))) : null),
      h("div", {class: "item-actions"},
        actionsFor(item),
        item.kind === "operator" ? copyButton(item.command) : null,
        h("span", {class: "spacer"}),
        iconBtn("bi-hourglass-split", "1 h", "btn small ghost", () => mark(item, nowSeconds() + 3600, item.pinned), "1 h: snooze for one hour"),
        iconBtn("bi-sunrise", "tomorrow", "btn small ghost", () => mark(item, tomorrow(), item.pinned), "tomorrow: snooze until 8 am tomorrow"),
        item.until ? iconBtn("bi-alarm", "wake", "btn small ghost", () => mark(item, 0, item.pinned), "wake: show again") : null,
        iconBtn(item.pinned ? "bi-pin-angle-fill" : "bi-pin-angle", item.pinned ? "unpin" : "pin", "btn small ghost", () => mark(item, item.until, !item.pinned))));
  }

  function inboxScreen() {
    inboxDom = h("div", {class: "inbox"});
    return inboxDom;
  }

  function drawInbox() {
    if (!inboxDom) {
      return;
    }
    const items = visibleInbox();
    ui.cursor = Math.min(ui.cursor, Math.max(items.length - 1, 0));
    const present = new Set(items.map(keyOf));
    for (const key of [...ui.selected]) {
      if (!present.has(key)) {
        ui.selected.delete(key);
      }
    }
    const sig = JSON.stringify([items.map(withoutOutput), [...ui.selected], ui.cursor, ui.snoozed, ui.busy, Math.floor(nowSeconds() / 60)]);
    if (sig === inboxSig) {
      repaintConsoles(items);
      return;
    }
    inboxSig = sig;
    const green = items.filter(isGreen);
    const chosen = items.filter((item) => ui.selected.has(keyOf(item)));
    const hidden = state.inbox.length - waitingCount();
    const snoozed = h("input", {type: "checkbox", checked: ui.snoozed, on: {change: (event) => {
      ui.snoozed = event.target.checked;
      drawInbox();
    }}});
    const choose = h("button", {type: "button", class: "btn small soft", ...named(`Grant selection (${chosen.length})`), disabled: !chosen.length || ui.busy, on: {click: () => bulk(chosen, "Grant selection")}}, icon("bi-check2-square"), String(chosen.length));
    const all = h("button", {type: "button", class: "btn small primary", ...named(`Grant all green (${green.length})`), disabled: !green.length || ui.busy, on: {click: () => bulk(green, "Grant all green")}}, icon("bi-check2-all"), String(green.length));
    inboxDom.replaceChildren(
      h("div", {class: "inbox-head"}, h("h2", {class: "group-title"}, "Inbox", counter(waitingCount())), h("span", {class: "spacer"}),
        hidden ? h("label", {class: "check"}, snoozed, `${hidden} snoozed`) : null),
      h("div", {class: "inbox-actions"}, choose, all),
      onLocalhost() ? "" : h("p", {class: "muted"}, "The passkey signs grants only under ", localLink()),
      items.length ? h("ol", {class: "inbox-list"}, items.map(inboxItem)) : emptyState("All done", "Nothing is waiting for you right now."));
    settleConsoles(items);
    const current = inboxDom.querySelector(`.item[data-index="${ui.cursor}"]`);
    if (current && document.activeElement === document.body) {
      current.scrollIntoView({block: "nearest"});
    }
  }

  function openItem(item) {
    if (!item) {
      return;
    }
    if (item.kind === "review") {
      reviewSheet(item.id);
      return;
    }
    const body = [
      h("div", {class: "who"}, pill(ITEM_LABELS[item.kind], KIND_TONES[item.kind]), item.agent ? face(item.agent, false) : null, item.agent ? person(item.agent) : null, when(item.ts)),
      h("p", {class: "text"}, item.title),
      item.command ? h("div", {class: "command"}, h("code", {}, item.command), copyButton(item.command)) : null,
      item.kind === "rule" ? ruleRequestBody(item) : null,
      meta([["Directory", item.directory], ["Warnings", item.warnings.join(", ")], ["Id", item.id]]),
      item.kind === "decision" ? h("div", {class: "options"}, item.options.map((option) => h("button", {
        type: "button", class: `option${option.label === item.recommended ? " recommended" : ""}`, disabled: item.held, on: {click: () => {
          closeSheet();
          chooseOne(item, option.label);
        }},
      }, h("strong", {}, option.label), option.description ? h("span", {}, option.description) : null))) : null,
      h("div", {class: "actions"}, h("span", {class: "spacer"}), actionsFor(item).map((node) => {
        node.addEventListener("click", closeSheet);
        return node;
      })),
    ];
    openSheet(ITEM_LABELS[item.kind], body, false);
  }