LLeMbas/src/lembas/web/templates/agents/detail.html

{% extends "agents/_layout.html" %}
{% from "_macros.html" import icon %}

{% block title %}{{ "New connection" if is_new else profile.name }} - {{ brand.name }}{% endblock %}
{% block heading %}{{ "New connection" if is_new else profile.name }}{% endblock %}

{% block agents_content %}
<nav class="crumbs">
  <a class="crumbs__back" href="/agents">
    {{ icon("chevron-right", "icon--sm crumbs__icon") }} All connections
  </a>
</nav>

{% if error %}
<div class="alert alert--error">{{ icon("warning", "icon--sm") }} <span>{{ error }}</span></div>
{% endif %}
{% if problem %}
<div class="alert alert--error">{{ icon("warning", "icon--sm") }} <span>{{ problem }}</span></div>
{% endif %}
{# A connection saved before an administrator moved the switch. It is still here
   and still editable -- pointing it at another host is the way out -- but
   nothing will use it, and saying so here is the only place somebody looking at
   this row would find out. #}
{% if refused %}
<div class="alert alert--error">{{ icon("shield", "icon--sm") }} <span>{{ refused }}</span></div>
{% endif %}
{% if saved %}
<div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>{{ saved }}</span></div>
{% endif %}

{% if not is_new %}
<section class="card">
  <h2 class="card__title">{{ t("Check it") }}</h2>
  <p class="field__hint">
    {% if profile.verified %}
      Confirms the host is still the one you accepted, then logs in and runs
      something harmless to see that it works.
    {% else %}
      Looks at this host's key and shows you its fingerprint. Nothing is sent to
      it — not your username, not your credential — until you accept.
    {% endif %}
  </p>

  <div class="btn-row">
    <button class="btn" type="button"
            hx-post="/api/agents/{{ profile.id }}/check"
            hx-target="#check-result">
      {{ icon("refresh", "icon--sm") }} Check
    </button>
  </div>

  <div id="check-result">
    {% if profile.verified %}
    <p class="field__hint">
      Accepted fingerprint: <code>{{ profile.host_fingerprint }}</code>
    </p>
    {% endif %}
  </div>
</section>
{% endif %}

<form method="post" class="form-grid"
      action="{{ '/api/agents' if is_new else '/api/agents/' ~ profile.id }}">

  <section class="card">
    <h2 class="card__title">{{ t("The machine") }}</h2>

    <div class="field">
      <label class="field__label" for="name">{{ t("Name") }}</label>
      <input class="input" id="name" name="name" value="{{ profile.name }}" required
             maxlength="120" placeholder="{{ t('Project container') }}">
      <p class="field__hint">{{ t("What you will pick from when starting an agent chat.") }}</p>
    </div>

    <div class="field">
      <label class="field__label" for="host">{{ t("Host") }}</label>
      <input class="input input--mono" id="host" name="host" value="{{ profile.host }}" required
             maxlength="255" placeholder="127.0.0.1">
    </div>

    <div class="field">
      <label class="field__label" for="port">{{ t("Port") }}</label>
      <input class="input" id="port" name="port" value="{{ profile.port }}" inputmode="numeric">
    </div>

    <div class="field">
      <label class="field__label" for="username">{{ t("Log in as") }}</label>
      <input class="input input--mono" id="username" name="username" required
             value="{{ profile.username }}" maxlength="120" placeholder="{{ t('root') }}">
    </div>

    <div class="field">
      <label class="field__label" for="default_dir">{{ t("Project directory") }}</label>
      <input class="input input--mono" id="default_dir" name="default_dir"
             value="{{ profile.default_dir }}" maxlength="500" placeholder="{{ t('/project') }}">
      <p class="field__hint">{{ t("Where a chat starts by default. Each chat records its own when it is created, so changing this later does not move a conversation already under way.") }}</p>
    </div>

    <div class="field">
      <label class="field__label" for="connect_timeout">{{ t("Connect timeout (seconds)") }}</label>
      <input class="input" id="connect_timeout" name="connect_timeout"
             value="{{ profile.connect_timeout }}" inputmode="numeric">
    </div>
  </section>

  <section class="card">
    <h2 class="card__title">{{ t("How it logs in") }}</h2>

    <div class="field">
      <div class="checkbox-row">
        <label class="checkbox">
          <input type="radio" name="auth" value="key"
                 {{ 'checked' if profile.auth != 'password' }}>
          <span>{{ t("A private key") }}</span>
        </label>
        <label class="checkbox">
          <input type="radio" name="auth" value="password"
                 {{ 'checked' if profile.auth == 'password' }}>
          <span>{{ t("A password") }}</span>
        </label>
      </div>
    </div>

    <div class="field">
      <label class="field__label" for="private_key">{{ t("Private key") }}</label>
      <textarea class="textarea input--mono" id="private_key" name="private_key" rows="5"
                spellcheck="false"
                placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
                >{{ unchanged if has_key else '' }}</textarea>
      <p class="field__hint">
        {% if has_key %}
          A key is saved. Leave the dots alone to keep it, or clear the box to
          remove it.
        {% else %}
          Pasted whole, encrypted at rest, and never shown again.
        {% endif %}
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="key_passphrase">{{ t("Key passphrase") }}</label>
      <input class="input input--mono" id="key_passphrase" name="key_passphrase"
             type="password" autocomplete="off" placeholder="{{ t('If the key has one') }}">
    </div>

    <div class="field">
      <label class="field__label" for="password">{{ t("Password") }}</label>
      <input class="input input--mono" id="password" name="password" type="password"
             autocomplete="off" placeholder="{{ t('No password set') }}"
             value="{{ unchanged if profile.password_encrypted else '' }}">
      <p class="field__hint">
        {% if profile.password_encrypted %}
          Currently <code>{{ masked_password }}</code>. Leave the dots alone to
          keep it, or clear the field to remove it.
        {% else %}
          Only used when this connection logs in with a password.
        {% endif %}
      </p>
    </div>
  </section>

  <section class="card">
    <h2 class="card__title">{{ t("Availability") }}</h2>
    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="enabled" value="true" {{ 'checked' if profile.enabled }}>
        <span>{{ t("Enabled — can be picked when starting an agent chat") }}</span>
      </label>
    </div>
  </section>

  <div class="btn-row">
    <button class="btn btn--primary" type="submit">
      {{ "Add connection" if is_new else "Save changes" }}
    </button>
    <a class="btn btn--ghost" href="/agents">Back to all connections</a>
    {% if not is_new %}
    <button class="btn btn--danger" type="submit" formnovalidate
            formaction="/api/agents/{{ profile.id }}/delete"
            data-confirm-button="Delete the connection “{{ profile.name }}”? Chats that used it keep their transcripts.">{{ t("Delete") }}</button>
    {% endif %}
  </div>
</form>
{% endblock %}