LLeMbas/src/lembas/web/templates/folders/edit.html

{% extends "base.html" %}
{% from "_macros.html" import icon %}
{#
  What a folder hands to the chats started inside it.

  A page rather than a panel in the sidebar, following the admin convention:
  compact rows, and the full form one click away. A form per folder row in a
  tree that nests eight deep would be unusable, and the sidebar is the one
  place in the application that has to stay scannable.

  The whole form is one PATCH at the route that already existed. Every field is
  clearable, because `update_folder` reads the raw form and checks key presence
  rather than declaring `Form(None)` parameters -- with those, an empty box and
  an absent one are the same request.
#}

{% block title %}{{ folder.name }} - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <h1 class="topbar__title">
        {{ icon("folder", "icon--sm") }}
        <span>{{ folder.name }}</span>
      </h1>
      <span class="spacer"></span>
      <a class="btn btn--sm" href="/chat?folder={{ folder.id }}">
        {{ icon("plus", "icon--sm") }} New chat here
      </a>
    </header>

    <div class="page">
      <form hx-patch="/api/folders/{{ folder.id }}" hx-swap="none">
        <div class="card">
          <h2 class="card__title">Name</h2>
          <div class="field">
            <input class="input" type="text" name="name" maxlength="200"
                   value="{{ folder.name }}" aria-label="Folder name" required>
          </div>
          <div class="field">
            <label class="field__label" for="folder-description">Description</label>
            <input class="input" type="text" id="folder-description" name="description"
                   maxlength="500" value="{{ folder.description }}"
                   placeholder="What this folder is for.">
            <p class="field__hint">
              For you, not for any model. It is never sent anywhere.
            </p>
          </div>
        </div>

        <div class="card">
          <h2 class="card__title">System prompt</h2>
          <p class="card__lede">
            Used by every chat in this folder, and by folders nested inside it,
            unless the chat has a prompt of its own. Read each time a reply is
            built rather than copied when a chat is made, so editing this
            reaches the chats already here.
          </p>
          <div class="field">
            <textarea class="textarea" name="system_prompt" rows="8"
                      aria-label="System prompt"
                      placeholder="Leave empty to fall through to the model's prompt, then the instance's.">{{ folder.system_prompt }}</textarea>
            <p class="field__hint">
              Precedence, not concatenation: chat, then folder, then model, then
              instance. The most specific one wins outright.
            </p>
          </div>
        </div>

        <div class="card">
          <h2 class="card__title">What a new chat starts as</h2>
          <p class="card__lede">
            Seeds, copied onto a chat when it is created and its own from then
            on. Anything chosen on the new-chat screen wins over these.
          </p>

          <div class="field">
            <label class="field__label" for="folder-model">Model</label>
            <select class="select" id="folder-model" name="model_id">
              <option value="">No opinion</option>
              {% for model in models %}
              <option value="{{ model.model_id }}"
                      {{ 'selected' if model.model_id == folder.model_id }}>
                {{ model.label }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="field">
            <label class="field__label" for="folder-kind">Kind</label>
            <select class="select" id="folder-kind" name="kind">
              <option value="" {{ 'selected' if not folder.kind }}>No opinion</option>
              <option value="chat" {{ 'selected' if folder.kind == 'chat' }}>Chat</option>
              <option value="agent" {{ 'selected' if folder.kind == 'agent' }}>Agent chat</option>
            </select>
            <p class="field__hint">
              A folder set to one kind shows on only that side of the sidebar's
              switch, and opens the new-chat screen already on that fork.
            </p>
          </div>

          {% if agent_profiles %}
          {# Only meaningful for an agent chat, and shown regardless of the kind
             above: somebody filling this in is on their way to setting the kind
             too, and a field that appears only once another field is right is a
             field people conclude is missing. #}
          <div class="field">
            <label class="field__label" for="folder-profile">Connection</label>
            <select class="select" id="folder-profile" name="ssh_profile_id">
              <option value="">No opinion</option>
              {% for profile in agent_profiles %}
              <option value="{{ profile.id }}"
                      {{ 'selected' if profile.id == folder.ssh_profile_id }}>
                {{ profile.name }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="field">
            <label class="field__label" for="folder-dir">Project directory</label>
            <input class="input input--mono" type="text" id="folder-dir" name="project_dir"
                   maxlength="1000" value="{{ folder.project_dir }}"
                   placeholder="The connection's own default.">
          </div>

          {% if agent_modes %}
          <div class="field">
            <label class="field__label" for="folder-mode">Approval mode</label>
            <select class="select" id="folder-mode" name="agent_mode">
              <option value="">No opinion</option>
              {% for value, label, hint in agent_modes %}
              <option value="{{ value }}" title="{{ hint }}"
                      {{ 'selected' if value == folder.agent_mode }}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
          {% endif %}
        </div>

        <div class="form-actions">
          <button class="btn btn--primary" type="submit">
            {{ icon("check", "icon--sm") }} Save
          </button>
          <a class="btn" href="/chat">Back</a>
        </div>
      </form>
    </div>
  </main>
</div>
{% endblock %}