{% extends "settings_base.html" %}{% block title %}tokens{% endblock %}
{% block heading %}API tokens{% endblock %}
{% block lede %}A token is how a program reaches this workspace — the MCP server, a
scheduled skill, a script. Only the hash is stored, so a token is shown exactly once
and revoking is the only recovery.{% endblock %}

{% block settings %}
<div class="panel">
  <div class="panel-body">
    <div class="row">
      <input id="name" placeholder="what will use it" value="default" size="24">
      <button class="primary" onclick="mint()">Mint token</button>
    </div>
    <div id="fresh" style="display:none;margin-top:16px">
      <p class="section-title" style="margin-bottom:8px">Copy it now</p>
      <pre id="fresh-token"></pre>
      <p class="faint" style="font-size:13px;margin:0">This is the only time it is
        ever displayed. If you lose it, revoke it and mint another.</p>
    </div>
  </div>
  <div class="scroll" style="border-top:1px solid var(--divider)">
    <table><thead><tr><th>name</th><th>created</th><th>status</th><th></th></tr></thead>
    <tbody id="rows"></tbody></table>
  </div>
</div>

<script>
async function pageInit() {
  const rows = await api("/v1/tokens");
  document.getElementById("rows").innerHTML = rows.map(t => `
    <tr><td>${esc(t.name)}</td>
        <td class="stamp">${esc(t.created_at.slice(0, 10))} · ${ago(t.created_at)}</td>
        <td>${t.revoked_at ? tag("bad", "revoked") : tag("ok", "active")}</td>
        <td style="text-align:right">${t.revoked_at ? "" :
          `<button onclick="revoke('${t.id}')">revoke</button>`}</td></tr>`).join("")
    || `<tr><td colspan="4"><div class="empty"><div class="big">no tokens yet</div>
        <p>Mint one to connect the MCP server, or anything else that reads this
           workspace without a browser.</p></div></td></tr>`;
}
async function mint() {
  const r = await api("/v1/tokens?name=" +
    encodeURIComponent(document.getElementById("name").value), {method: "POST"});
  document.getElementById("fresh").style.display = "block";
  document.getElementById("fresh-token").textContent = r.token;
  await pageInit();
}
async function revoke(id) {
  if (!confirm("Revoke this token? Anything using it stops working immediately.")) return;
  await api(`/v1/tokens/${id}/revoke`, {method: "POST"});
  await pageInit();
}
</script>
{% endblock %}