{% extends "base.html" %}{% block title %}home{% endblock %}
{% block content %}
<div class="phead">
  <div class="kicker">Workspace</div>
  <h1>What your memory has worked out</h1>
  <p class="lede">Connectors bring raw memory in verbatim. Artifacts are what gets
    written back out of it — an account brief, a breach alert, a product signal —
    each one versioned, so you can see what changed and when.</p>
  <div class="stats" id="stats" style="margin-top:24px"></div>
</div>

<section>
  <p class="section-title">Published artifacts</p>
  <div id="artifacts"></div>
</section>

<section>
  <p class="section-title">Routing <a href="/console/routing">open queue →</a></p>
  <div id="routing"></div>
</section>

<script>
async function pageInit() {
  const [arts, sources, queue, customers] = await Promise.all([
    api("/v1/console/artifacts"),
    api("/v1/console/sources"),
    api("/v1/console/unrouted?limit=200"),
    api("/v1/console/customers"),
  ]);
  const containers = sources.reduce((n, s) => n + s.container_count, 0);
  document.getElementById("stats").innerHTML = [
    ["artifacts", arts.length, true],
    ["customers", customers.length, false],
    ["in raw memory", containers, false],
    ["unrouted", queue.items.length, false],
  ].map(([l, n, a]) =>
    `<div class="stat"><div class="n${a ? " accent" : ""}">${n}</div>
     <div class="l">${l}</div></div>`).join("");

  renderArtifacts(arts);
  renderRouting(queue, customers);
}

function renderArtifacts(arts) {
  const el = document.getElementById("artifacts");
  if (!arts.length) {
    el.innerHTML = `<div class="panel"><div class="empty">
      <div class="big">nothing published yet</div>
      <p>Artifacts arrive from an agent reading your memory over MCP. Publish one
         with <code>publish_artifact</code> and it lands here, versioned.</p>
      <p class="faint" style="font-size:13px">Scheduled skills will write these on
         their own — until then this page fills up by hand.</p></div></div>`;
    return;
  }
  el.innerHTML = arts.map((a, i) => `
    <article class="panel">
      <div class="panel-head">
        <div>
          <h2>${esc(a.title)}</h2>
          <div class="stamp">${esc(a.slug)} · v${a.version} · ${esc(a.produced_by)}
               · ${ago(a.created_at)}</div>
        </div>
        <span class="spacer"></span>
        ${a.customer_slug ? tag("info", a.customer_name || a.customer_slug) : ""}
        ${a.version > 1 ? tag("warn", `${a.version} versions`) : ""}
      </div>
      <div class="panel-body">
        ${a.summary ? `<p class="muted">${esc(a.summary)}</p>` : ""}
        <div class="md" id="md-${i}"></div>
      </div>
    </article>`).join("");
  arts.forEach((a, i) => { document.getElementById(`md-${i}`).innerHTML = md(a.body); });
}

function renderRouting(queue, customers) {
  const el = document.getElementById("routing");
  const n = queue.items.length;
  if (!n) {
    el.innerHTML = `<div class="panel"><div class="empty">
      <div class="big">queue is clear</div>
      <p>Every meeting in memory is attributed to a customer.</p></div></div>`;
    return;
  }
  // A count plus the three oldest is the whole point of a summary: enough to know
  // whether it needs attention, not enough to start working here.
  const preview = queue.items.slice(0, 3);
  el.innerHTML = `<div class="panel">
    <div class="panel-head">
      <h2>${n} meeting${n === 1 ? "" : "s"} waiting on a customer</h2>
      <span class="spacer"></span>
      ${tag("warn", `${customers.length} customers known`)}
    </div>
    <div class="scroll"><table><tbody>${preview.map(u => `
      <tr><td>${esc(u.name)}</td>
          <td class="stamp">${esc((u.occurred_at || "").slice(0, 10))}</td>
          <td class="faint mono">${esc(((u.hints && u.hints.email_domains) || [])
              .join(", ") || "no external attendees")}</td></tr>`).join("")}
    </tbody></table></div>
    ${n > 3 ? `<div class="panel-body"><a href="/console/routing">Resolve all
       ${n} →</a></div>` : ""}
  </div>`;
}

/* Artifacts are prose a person reviews, so they render as prose. A deliberately
   small subset of Markdown — headings, lists, emphasis, code, rules — kept inline
   rather than pulling a parser onto the page for documents this simple. */
function md(src) {
  const inline = t => esc(t)
    .replace(/`([^`]+)`/g, "<code>$1</code>")
    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    .replace(/(^|[^*])\*([^*]+)\*/g, "$1<em>$2</em>")
    .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2">$1</a>');
  const out = [];
  let list = null, fence = null;
  const closeList = () => { if (list) { out.push(`</${list}>`); list = null; } };
  for (const line of (src || "").split("\n")) {
    if (/^```/.test(line)) {
      if (fence === null) { closeList(); fence = []; }
      else { out.push(`<pre><code>${esc(fence.join("\n"))}</code></pre>`); fence = null; }
      continue;
    }
    if (fence !== null) { fence.push(line); continue; }
    const h = line.match(/^(#{1,4})\s+(.*)$/);
    if (h) { closeList(); const n = Math.min(h[1].length + 1, 4);
             out.push(`<h${n}>${inline(h[2])}</h${n}>`); continue; }
    if (/^\s*[-*]\s+/.test(line)) {
      if (list !== "ul") { closeList(); out.push("<ul>"); list = "ul"; }
      out.push(`<li>${inline(line.replace(/^\s*[-*]\s+/, ""))}</li>`); continue;
    }
    if (/^\s*\d+\.\s+/.test(line)) {
      if (list !== "ol") { closeList(); out.push("<ol>"); list = "ol"; }
      out.push(`<li>${inline(line.replace(/^\s*\d+\.\s+/, ""))}</li>`); continue;
    }
    if (/^\s*(---|\*\*\*)\s*$/.test(line)) { closeList();
      out.push('<hr style="border:0;border-top:1px solid var(--divider);margin:18px 0">');
      continue; }
    if (!line.trim()) { closeList(); continue; }
    closeList();
    out.push(`<p>${inline(line)}</p>`);
  }
  closeList();
  if (fence !== null) out.push(`<pre><code>${esc(fence.join("\n"))}</code></pre>`);
  return out.join("");
}
</script>
<style>
  /* An artifact is a document a person reads, so it is set as one: display
     serif throughout, the same treatment Hey gives a proposal body. */
  .md{font-family:var(--serif); font-size:15.5px; line-height:1.65; color:var(--ink-2);}
  .md h2,.md h3,.md h4{font-family:var(--serif); font-weight:500; color:var(--ink);
                       margin:var(--s5) 0 var(--s2);}
  .md h3{font-size:18px} .md h4{font-size:16px}
  .md h2:first-child,.md h3:first-child{margin-top:0}
  .md p{margin:0 0 var(--s3); max-width:68ch}
  .md ul,.md ol{margin:0 0 var(--s3); padding-left:22px}
  .md li{margin:var(--s1) 0; max-width:66ch}
  .md code,.md pre{font-family:var(--mono)}
</style>
{% endblock %}