{#- Settings → Integrations: Claude Code on this machine. Expects: plan, remove_plan, mode,
    modes, message, error, checks, unlinked. Nothing is written until a button is pressed. -#}
{%- set d = plan.detection %}
<div id="integrations" class="integrations">
  {% if message %}<p class="form-ok" role="status">{{ message }}</p>{% endif %}
  {% if error %}<p class="form-error" role="alert">{{ error }}</p>{% endif %}

  <section class="panel">
    <h2>Claude Code on this machine</h2>
    <dl class="fields">
      <dt>claude</dt>
      <dd>{% if d.claude_path %}<code>{{ d.claude_path }}</code> <span class="muted">{{ d.claude_version or ("version unknown: " ~ d.version_error) }}</span>{% else %}<span class="muted">not found on PATH</span>{% endif %}</dd>
      <dt>Desktop app</dt>
      <dd>{% if d.desktop_app %}<code>{{ d.desktop_app }}</code>{% else %}<span class="muted">not found</span>{% endif %}</dd>
      <dt>http hooks</dt>
      <dd>{{ "supported" if d.http_hooks else "not confirmed" }}</dd>
      <dt>User settings</dt>
      <dd><code>{{ plan.paths.settings }}</code></dd>
    </dl>
  </section>

  <section class="panel">
    <h2>Plan</h2>
    <form class="integrations-mode" method="get" action="/settings/integrations">
      <label>Hook type
        <select name="mode">
          {% for m in modes %}<option value="{{ m }}"{% if m == mode %} selected{% endif %}>{{ m }}</option>{% endfor %}
        </select>
      </label>
      <button type="submit" class="btn">Show plan</button>
    </form>
    <p>Hooks: <strong>{{ plan.mode }}</strong> <span class="muted">({{ plan.mode_reason }})</span></p>
    {% if plan.error %}
    <p class="form-error">{{ plan.error }}. Nothing will be written.</p>
    {% elif plan.hooks %}
    <p class="muted">{{ plan.hooks.summary }}</p>
    {% set diff = plan.hooks.diff() %}
    {% if diff %}<pre class="diff">{{ diff }}</pre>{% endif %}
    {% endif %}
    {% for note in plan.notes %}<p class="form-warning">{{ note }}</p>{% endfor %}
    <h3>MCP server</h3>
    {% if plan.mcp_ok %}
    <p>{{ plan.mcp_detail }}</p>
    {% else %}
    <p class="muted">{{ plan.mcp_detail }}. Claude Code registers it itself; run this in a terminal (<code>relaybay token</code> prints it with the token filled in):</p>
    <pre class="diff">{{ plan.mcp_command }}</pre>
    {% endif %}
    <div class="form-actions">
      <form method="post" action="/settings/integrations/apply"
            hx-post="/settings/integrations/apply" hx-target="#integrations" hx-swap="outerHTML"
            hx-confirm="Write relaybay's hooks into {{ plan.paths.settings }}? A backup is made first.">
        <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}">
        <input type="hidden" name="mode" value="{{ mode }}">
        <input type="hidden" name="expect" value="{{ plan.hooks.plan_hash if plan.hooks else '' }}">
        <button type="submit" class="btn primary"{% if plan.error or not (plan.hooks and plan.hooks.changed) %} disabled{% endif %}>Apply</button>
      </form>
      <form method="post" action="/settings/integrations/remove"
            hx-post="/settings/integrations/remove" hx-target="#integrations" hx-swap="outerHTML"
            hx-confirm="Remove relaybay's hooks from {{ plan.paths.settings }}? A backup is made first; other hooks stay.">
        <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}">
        <input type="hidden" name="mode" value="{{ mode }}">
        <input type="hidden" name="expect" value="{{ remove_plan.hooks.plan_hash if remove_plan.hooks else '' }}">
        <button type="submit" class="btn danger"{% if remove_plan.error or not (remove_plan.hooks and remove_plan.hooks.changed) %} disabled{% endif %}>Remove</button>
      </form>
      <form method="post" action="/settings/integrations/check"
            hx-post="/settings/integrations/check" hx-target="#integrations" hx-swap="outerHTML">
        <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}">
        <input type="hidden" name="mode" value="{{ mode }}">
        <button type="submit" class="btn">Run check</button>
      </form>
    </div>
  </section>

  {% if checks %}
  <section class="panel">
    <h2>Check</h2>
    <ul class="checks">
      {% for c in checks %}<li class="check {{ 'ok' if c.ok else 'fail' }}"><strong>{{ "ok" if c.ok else "fail" }}</strong> {{ c.name }} <span class="muted">— {{ c.detail }}</span></li>{% endfor %}
    </ul>
  </section>
  {% endif %}

  <section class="panel">
    <h2>Unlinked hook sessions</h2>
    {% if unlinked %}
    <p class="muted">Hook events whose session could not be matched to one relaybay session. They link exactly once the agent passes its <code>hook_session</code> on a write.</p>
    <ol class="history">
      {% for s in unlinked %}
      <li>
        <span class="history-name">{{ s.name }}</span>
        {% if s.status %}<span class="session-status status-{{ s.status }}">{{ s.status }}</span>{% endif %}
        <span class="muted">{{ s.unlinked_reason }} · <code>{{ s.cwd or "" }}</code> · seen <time datetime="{{ s.last_seen_at }}" data-age>{{ s.last_seen_at|age }}</time></span>
        <div class="muted mono">{{ s.cc_session_id }}</div>
      </li>
      {% endfor %}
    </ol>
    {% else %}
    <p class="muted">None.</p>
    {% endif %}
  </section>
</div>