{% extends "base.html" %}
{% block title %}Connections · Memoreei{% endblock %}
{% block main %}
<header class="page-head">
  <div>
    <h1>Connections</h1>
    <p>Everything that can read your messages, and how it reaches this computer.</p>
  </div>
  {% if ready %}
  {% set s = tunnel.state or "connecting" %}
  <span class="pill big {{ '' if s == 'online' else ('off' if s in ('revoked', 'replaced') else 'warn') }}"><span class="dot"></span>{{ {"online": "Online", "connecting": "Connecting", "offline": "Offline", "blocked": "Blocked", "relay": "Retrying", "revoked": "Removed", "replaced": "Stepped aside", "unpaid": "Disconnected"}.get(s, s|capitalize) }}</span>
  {% elif custom %}
  <span class="pill big"><span class="dot"></span>Your own setup</span>
  {% endif %}
</header>

{% if message %}<p role="status">{{ message }}</p>{% endif %}

{% if password_offer and not connecting %}
<section class="bubble" aria-label="A password">
  <div><b>Manage memoreei and connect chatbots from anywhere.</b> Set a password, and you can open this dashboard
  from your phone, and approve a chatbot from wherever you add it, instead of coming back to this computer.
  <span class="caption">Optional. Without one, nothing changes.</span></div>
  <div class="row">
    <a class="button" href="/admin/security#password">Set a password</a>
    <form method="post" action="/admin/security/skip-offer"><button class="quiet">Skip</button></form>
  </div>
  <svg class="tail" width="22" height="14" viewBox="0 0 22 14" aria-hidden="true"><path d="M0 0H22L4 14V0Z"/></svg>
</section>
{% elif (device or custom) and account.password_hash and not account.remote %}
<p class="caption">This dashboard answers only on this computer. To open it from anywhere, switch that on in <a href="/admin/security#remote">Security</a>.</p>
{% endif %}

{% if connecting %}
{% include "_cloud_connecting.html" %}

{% elif custom %}
<section class="card">
  <h2>Your own tunnel or proxy</h2>
  <p>This memoreei is set up for your own tunnel or proxy (<code>MEMOREEI_PUBLIC_PORT</code>), so Memoreei Cloud isn't used.</p>
  <dl class="facts">
    <dt>Listening on</dt><dd class="mono">{{ live.port or "?" }} (loopback unless MEMOREEI_PUBLIC_HOST says otherwise)</dd>
    <dt>Address</dt><dd class="mono">{{ live.url or "not set (MEMOREEI_PUBLIC_MCP_URL)" }}</dd>
    <dt>Sign-in</dt><dd>{% if live.issuer %}Chatbots sign in at <span class="mono">{{ live.issuer }}</span> and you approve them here{% else %}<span class="mono">mem_</span> keys only: set MEMOREEI_PUBLIC_MCP_URL for chatbots to sign in{% endif %}</dd>
  </dl>
  {% if live.error %}<p class="bad" role="alert">{{ live.error }}</p>{% endif %}
  {% include "_awake.html" %}
</section>

{% elif device %}
<section class="card">
  <div class="row" style="justify-content:space-between">
    <h2>Memoreei Cloud</h2>
    <button class="danger small" hx-post="/admin/cloud/disconnect" hx-confirm="Disconnect this computer? Chatbot connectors using it stop working.">Disconnect</button>
  </div>
  {% if billing %}
  <div class="billing {{ billing.tone }}" role="status">
    <div><b>{{ billing.title }}</b>{% if billing.caption %}<span class="caption">{{ billing.caption }}</span>{% endif %}</div>
    <a class="button {{ '' if billing.tone else 'quiet' }} small" href="{{ manage_url }}" rel="noreferrer">Manage billing</a>
  </div>
  {% endif %}
  {% if tunnel.message and tunnel.state not in ("online", "unpaid") %}<p class="{{ 'bad' if tunnel.state in ('blocked', 'revoked') else '' }}" role="status">{{ tunnel.message }}</p>{% endif %}
  {% if not ready %}<p class="bad">It has no certificate yet, so it can't go online.</p>
  <form method="post" action="/admin/cloud/connect"><button>Finish connecting</button></form>{% endif %}
  {% if live.error %}<p class="bad" role="alert">{{ live.error }}</p>{% endif %}
  <h3>Add this address as a connector</h3>
  <div class="copyable">
    <pre id="cloud-url" class="key">{{ device.mcp_url }}</pre>
    <button type="button" data-copy="cloud-url">Copy</button>
  </div>
  <p class="caption">In Claude.ai: Customize → Connectors → add a custom connector. In ChatGPT: Settings → Plugins.
  It asks this computer for permission, with a code: approve it here. Your messages stay on this computer.</p>
  <dl class="facts">
    <dt>Name</dt><dd>{{ device.name }}</dd>
    <dt>Hostname</dt><dd class="mono">{{ device.hostname }}</dd>
    {% if certificate %}<dt>Certificate</dt><dd>Valid until {{ certificate.not_after|date }}; renews itself from {{ certificate.renews_at|date }}{% if live.certificate and live.certificate.last_error %}<br><span class="bad">Last renewal failed: {{ live.certificate.last_error }}</span>{% endif %}</dd>{% endif %}
    <dt>Last call</dt><dd>{{ live.last_call_at|ago|capitalize }}</dd>
  </dl>
  {% include "_awake.html" %}
  <p class="caption">While this computer sleeps or is offline, chatbots can't reach it, and they'll say so.
  {% if not billing or not billing.tone %}Thanks for supporting memoreei.{% endif %}{% if not billing %} <a href="{{ manage_url }}" rel="noreferrer">Manage billing</a>{% endif %}</p>
</section>

{% endif %}

{% include "_chatbot_requests.html" %}

{#- Neither Cloud nor the person's own address yet: offer both, side by side. -#}
{% set paths = offer and not (connecting or custom or device) %}

{%- macro key_row() -%}
<details class="key-row">
  <summary>
    <span><b>An app on this computer</b>
      <span class="caption">Claude Code, Claude Desktop, a script. One key each; no relay needed.</span></span>
    <span class="button quiet">Make a key</span>
  </summary>
  <form class="new-key" hx-post="/admin/keys" hx-target="#created" hx-swap="innerHTML">
    <div class="field">
      <label for="name">New key for</label>
      <input id="name" name="name" placeholder="e.g. laptop" required pattern="[A-Za-z0-9][A-Za-z0-9._\-]{0,63}" autocomplete="off">
    </div>
    <button>Create key</button>
  </form>
  <p class="caption">Lose a laptop? Revoke its key; nothing else changes.</p>
</details>
<div id="created"></div>
{%- endmacro %}

{% if connections %}
{% if paths %}<section class="card">{% include "_reach.html" %}</section>{% endif %}
<section class="card">
  <h2>Connected</h2>
  {% include "_connection_list.html" %}
  {{ key_row() }}
{% else %}
<section class="card empty">
  <div class="empty-head" id="empty-head">
    <div class="typing still" aria-hidden="true"><span></span><span></span><span></span>
      <svg class="tail" width="22" height="14" viewBox="0 0 22 14"><path d="M0 0H22L4 14V0Z"/></svg></div>
    <div>
      <h2>Nothing's connected yet</h2>
      <p class="muted">Your memories are ready. Give a chatbot or an app a way to ask.</p>
    </div>
  </div>
  {% if paths %}{% include "_reach.html" %}{% endif %}
  {% set in_empty_card = true %}{% include "_connection_list.html" %}
  {{ key_row() }}
{% endif %}
  {% if calls %}
  <details>
    <summary>The last {{ calls|length }} calls from outside this computer</summary>
    <div class="table-scroll"><table>
      <thead><tr><th scope="col">When</th><th scope="col">Client</th><th scope="col">What</th><th scope="col">From</th><th scope="col">Answer</th></tr></thead>
      <tbody>
      {% for c in calls %}
      <tr><td>{{ c.at|ago|capitalize }}</td><td class="mono">{{ c.client }}</td><td>{{ c.tool or c.method or "?" }}</td><td class="mono">{{ c.peer or "?" }}</td><td>{{ c.status }}</td></tr>
      {% endfor %}
      </tbody>
    </table></div>
  </details>
  {% endif %}
</section>
{% endblock %}