state-hub/dashboard/src/domains/recently-on-scope.md

title
RecentlyOnScope

import {apiFetch} from "../components/config.js";

const domainsResp = await apiFetch("/domains/?status=all");
const domains = domainsResp.ok ? await domainsResp.json() : [];
const domainOptions = domains.map(d => d.slug).sort();
const defaultDomain = domainOptions.includes("custodian") ? "custodian" : domainOptions[0];

RecentlyOnScope

import {injectTocTop} from "../components/toc-sidebar.js";
import {withDocHelp} from "../components/doc-overlay.js";

const _liveEl = html`<div class="live-indicator">
  <span style="color:${domainsResp.ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
  ${domainsResp.ok
    ? `Live · ${domains.length} domains`
    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/domains");
injectTocTop("live-indicator", _liveEl);

const selectedDomain = view(Inputs.select(domainOptions, {label: "Domain", value: defaultDomain}));
const selectedRange = view(Inputs.text({label: "Range", value: "1h", placeholder: "15m, 1h, 6h, 1d"}));

const generated = view(Inputs.button("Generate", {
  reduce: async () => {
    if (!selectedDomain) return {ok: false, error: "No domain selected"};
    const resp = await apiFetch(`/domains/${encodeURIComponent(selectedDomain)}/recently-on-scope/`, {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({range: selectedRange || "1h"}),
      timeout: 30_000,
    });
    if (!resp.ok) return {ok: false, error: await resp.text()};
    return {ok: true, report: await resp.json()};
  },
}));

if (generated?.ok) {
  display(html`<div class="notice success">Generated <code>${generated.report.id}</code></div>`);
} else if (generated?.error) {
  display(html`<div class="notice error">${generated.error}</div>`);
}

generated;
const reportsResp = selectedDomain
  ? await apiFetch(`/domains/${encodeURIComponent(selectedDomain)}/recently-on-scope/`)
  : {ok: false};
const reports = reportsResp.ok ? await reportsResp.json() : [];

Reports

function fmtDate(value) {
  if (!value) return "—";
  return new Date(value).toLocaleString();
}

if (!selectedDomain) {
  display(html`<p class="dim">No domains registered.</p>`);
} else if (reports.length === 0) {
  display(html`<p class="dim">No reports for <code>${selectedDomain}</code>.</p>`);
} else {
  display(html`<div class="report-list">${reports.map(report => html`<article class="report-row">
    <div>
      <a class="report-id" href=${`#${report.id}`}>${report.id}</a>
      <div class="report-window">${fmtDate(report.since)} -> ${fmtDate(report.until)}</div>
    </div>
    <div class="report-counts">
      <span>${report.source_counts.progress_events} progress</span>
      <span>${report.source_counts.decisions} decisions</span>
      <span>${report.source_counts.tasks} tasks</span>
      <span>${report.source_counts.attention_items} attention</span>
    </div>
  </article>`)}</div>`);
}

const reportIds = reports.map(report => report.id);
const selectedReport = reportIds.length > 0
  ? view(Inputs.select(reportIds, {label: "Preview", value: reportIds[0]}))
  : null;

if (selectedDomain && selectedReport) {
  const markdownResp = await apiFetch(`/domains/${encodeURIComponent(selectedDomain)}/recently-on-scope/${encodeURIComponent(selectedReport)}`);
  const markdown = markdownResp.ok ? await markdownResp.text() : "";
  display(html`<pre class="markdown-preview">${markdown}</pre>`);
}