{% extends "base.html" %}{% block title %}connectors{% endblock %}
{% block content %}
<div class="phead">
  <div class="kicker">Connectors</div>
  <h1>Where your raw memory comes from</h1>
  <p class="lede">A connector holds the credential; the sources under it hold the
    position. Setup, current state and the last runs live together here — you cannot
    tell whether a connector is healthy from any one of them alone.</p>
</div>

<div id="catalogue"></div>

<template id="form-tpl">
  <form onsubmit="return connect(event)">
    <p class="row"><input class="key" type="password" size="40" placeholder="grn_…" required>
       <button class="primary">Connect</button> <span class="msg"></span></p>
    <p class="row"><input class="domains" size="52"
              placeholder="your email domains, comma-separated (optional)"></p>
    <p class="faint" style="font-size:13px;max-width:56ch;margin:6px 0 0">
      Meetings whose attendees are only from these domains are yours, not a
      customer's — they skip customer routing entirely.</p>
  </form>
</template>

<script>
// One entry per connector we can build. Sources are grouped underneath their kind,
// so a connector with no source reads as "not connected" rather than as absence.
const CATALOGUE = [{
  kind: "granola", name: "Granola",
  blurb: "Meeting notes and transcripts, pulled verbatim — nothing is reformatted " +
         "or summarised on the way in.",
}];

async function pageInit() {
  const sources = await api("/v1/console/sources");
  const el = document.getElementById("catalogue");
  el.innerHTML = CATALOGUE.map(c => {
    const mine = sources.filter(s => s.kind === c.kind);
    return mine.length ? connected(c, mine) : disconnected(c);
  }).join("");

  document.querySelectorAll(".form-slot").forEach(slot =>
    slot.appendChild(document.getElementById("form-tpl").content.cloneNode(true)));
  for (const s of sources) loadRuns(s.id);
}

function health(s) {
  if (s.last_error) return tag("bad", "failing");
  if (!s.last_clean_drain_at) return tag("warn", "never drained");
  return tag("ok", "healthy");
}

function connected(c, sources) {
  return `<section class="panel">
    <div class="panel-head">
      <div><h2>${esc(c.name)}</h2>
        <div class="stamp">${sources.length} source${sources.length === 1 ? "" : "s"}
             · credential stored</div></div>
      <span class="spacer"></span>${health(sources[0])}
    </div>
    ${sources.map(sourceBlock).join("")}
    <div class="panel-body" style="border-top:1px solid var(--divider)">
      <details><summary>Replace API key</summary>
        <p class="muted" style="margin-top:0">Only needed if the key was rotated or
           revoked. The new key is checked against ${esc(c.name)} before it replaces
           the old one.</p>
        <div class="form-slot"></div></details>
    </div>
  </section>`;
}

function disconnected(c) {
  return `<section class="panel">
    <div class="panel-head">
      <div><h2>${esc(c.name)}</h2><div class="stamp">not connected</div></div>
      <span class="spacer"></span>${tag("", "off")}
    </div>
    <div class="panel-body">
      <p class="muted" style="max-width:60ch">${esc(c.blurb)} Your key is checked
         against ${esc(c.name)} before it is saved, kept in a secrets vault, and
         never displayed again.</p>
      <div class="form-slot"></div>
    </div>
  </section>`;
}

function sourceBlock(s) {
  return `<div class="panel-body" style="border-top:1px solid var(--divider)">
    <div class="row" style="justify-content:space-between;align-items:flex-start">
      <div>
        <h3 class="mono">${esc(s.kind)}/${esc(s.name)}</h3>
        <div class="stamp">${s.container_count} containers · watermark
          ${esc(s.watermark ? s.watermark.slice(0, 16).replace("T", " ") : "none")}
          · clean drain ${ago(s.last_clean_drain_at)}</div>
        ${s.last_error ? `<div class="err mono" style="margin-top:6px">${esc(s.last_error)}</div>` : ""}
      </div>
      <div class="row">
        <button onclick="sync('${s.id}', this)">sync now</button>
        <button onclick="resync('${s.id}', this)"
                title="Clear the watermark so the next sync re-reads every record">re-read all</button>
      </div>
    </div>
    <div style="margin-top:16px">
      <p class="section-title" style="margin-bottom:8px">Recent runs</p>
      <div class="scroll" id="runs-${s.id}"><p class="faint mono">loading…</p></div>
    </div>
  </div>`;
}

async function loadRuns(sourceId) {
  const runs = await api(`/v1/console/sources/${sourceId}/runs`);
  const el = document.getElementById(`runs-${sourceId}`);
  if (!el) return;
  if (!runs.length) {
    el.innerHTML = `<p class="faint" style="font-size:13px;margin:0">
      No runs recorded yet. Trigger one with <b>sync now</b>, or wait for the
      schedule.</p>`;
    return;
  }
  el.innerHTML = `<table><thead><tr>
      <th>started</th><th>trigger</th><th class="num">drained</th>
      <th class="num">pages</th><th>took</th><th>result</th></tr></thead>
    <tbody>${runs.map(r => `<tr>
      <td class="stamp">${ago(r.started_at)}</td>
      <td class="faint mono">${esc(r.trigger)}</td>
      <td class="num">${r.drained}</td>
      <td class="num">${r.pages}</td>
      <td class="stamp">${duration(r)}</td>
      <td>${r.status === "ok" ? tag("ok", "clean")
           : r.status === "running" ? tag("info", "running")
           : `${tag("bad", "failed")}<div class="err mono"
                style="margin-top:5px;max-width:34ch">${esc(r.error || "")}</div>`}</td>
    </tr>`).join("")}</tbody></table>`;
}

function duration(r) {
  if (!r.finished_at) return "—";
  const s = (new Date(r.finished_at) - new Date(r.started_at)) / 1000;
  return s < 1 ? "<1s" : s < 60 ? `${s.toFixed(1)}s` : `${Math.round(s / 60)}m`;
}

async function sync(id, btn) {
  btn.disabled = true; btn.textContent = "draining…";
  try { await api(`/v1/console/sources/${id}/sync`, {method: "POST"}); }
  finally { await pageInit(); }
}

async function resync(id, btn) {
  if (!confirm("Re-read every record from this source? Unchanged content is " +
               "skipped; corrected content lands as a new version.")) return;
  btn.disabled = true; btn.textContent = "resetting…";
  await api(`/v1/console/sources/${id}/resync`, {method: "POST"});
  await sync(id, btn);
}

async function connect(e) {
  e.preventDefault();
  const f = e.target, msg = f.querySelector(".msg");
  msg.textContent = "checking…";
  try {
    await api("/v1/granola/connect", {method: "POST", body: JSON.stringify({
      api_key: f.querySelector(".key").value.trim(),
      own_domains: f.querySelector(".domains").value
        .split(",").map(s => s.trim()).filter(Boolean),
    })});
    location.reload();
  } catch (err) {
    let d = "could not connect";
    try { d = JSON.parse(err.body).detail ?? d; } catch {}
    msg.innerHTML = `<span class="err">${esc(d)}</span>`;
  }
  return false;
}
</script>
{% endblock %}