{% extends "base.html" %}
{% block title %}MCP - Invincible{% endblock %}
{% block content %}
<style>
  .agent-card {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: var(--radius); padding: 0.85rem 1.05rem;
    margin: 1rem 0;
  }
  .agent-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%;
               background: var(--muted); flex-shrink: 0; }
  .agent-card.online .agent-dot {
    background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim);
    animation: agent-pulse 2s ease infinite;
  }
  .agent-card.offline .agent-dot { background: var(--err); }
  .agent-text { margin: 0; color: var(--muted); font-size: 0.85rem; }
  .agent-card.online .agent-text { color: var(--ink); }
  @keyframes agent-pulse { 50% { opacity: 0.45; } }
</style>

<h2>MCP connections</h2>
<p class="muted">AI clients reach the MCP tool server over OAuth 2.1 + PKCE.
Register a client, approve it in the browser, and its tokens act as
you.</p>

<div class="agent-card" id="agent-card">
  <span class="agent-dot"></span>
  <p id="agent-status" class="agent-text">Agent status: checking&hellip;</p>
</div>
<script>
  // Phase 10 badge: liveness of this account's paired local agent
  // (invincible agent). Pure fetch - no htmx dependency, no assets.
  fetch("/agent/status", {credentials: "same-origin"})
    .then(r => r.ok ? r.json() : null)
    .then(data => {
      const el = document.getElementById("agent-status");
      const card = document.getElementById("agent-card");
      if (!el) return;
      if (!data) { el.textContent = "Agent status: unknown"; return; }
      card.classList.toggle("online", data.agent_online);
      card.classList.toggle("offline", !data.agent_online);
      el.textContent = data.agent_online
        ? "Agent online — your confirmed tool actions run on your machine."
        : "Agent offline — start one on your machine with: invincible agent";
    })
    .catch(() => {
      const el = document.getElementById("agent-status");
      if (el) el.textContent = "Agent status: unknown";
    });
</script>

{% if revoked %}<p class="banner">All tokens for that client were revoked
&mdash; it must reconnect and be approved again.</p>{% endif %}

<h3>Connecting a client</h3>
<ul class="plain">
  <li>Register it: <code>POST /oauth/register</code> (dynamic client
      registration; send <code>redirect_uris</code> and a
      <code>client_name</code>).</li>
  <li>Send the user to <code>GET /oauth/authorize</code> with PKCE
      (<code>S256</code>); consent is granted in the browser.</li>
  <li>Exchange the code at <code>POST /oauth/token</code>; call
      <code>POST /mcp</code> with
      <code>Authorization: Bearer &lt;access_token&gt;</code>.</li>
  <li>Revoking a client's tokens below cuts off its live access
      immediately.</li>
</ul>
<p class="muted">API keys (<code>inv_...</code>) are <strong>not</strong>
accepted on /mcp &mdash; OAuth bearer tokens only (owner decision, Q1).</p>

<h3>Registered clients</h3>
{% if clients %}
<div class="table-scroll">
<table>
  <thead><tr><th>Name</th><th>Client ID</th><th>Redirect URIs</th>
      <th>Active tokens</th><th></th></tr></thead>
  <tbody>
  {% for c in clients %}
  <tr class="mcp-client-row" data-client-id="{{ c.client_id }}">
    <td>{{ c.client_name or '(unnamed)' }}</td>
    <td class="muted"><code>{{ c.client_id }}</code></td>
    <td class="muted">{{ c.redirect_uris | join(', ') }}</td>
    <td>{{ c.active_tokens }}</td>
    <td>
      <button class="linklike revoke-mcp-tokens"
              hx-delete="/dashboard/mcp/clients/{{ c.client_id }}/tokens"
              hx-confirm="Revoke all tokens for {{ c.client_name or c.client_id }}? Its live MCP access stops immediately.">Revoke tokens</button>
    </td>
  </tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p class="muted empty">No MCP clients registered yet. A client registers itself
via <code>POST /oauth/register</code> when it first connects.</p>
{% endif %}
{% endblock content %}