Fix bulk actions, create chats lazily, rework the UI

Seven reported problems.

**Bulk model actions 404'd.** /admin/models/{model_id} was registered
before /admin/models/bulk, and FastAPI matches in registration order, so
"bulk" was parsed as a model id. Moved above the parameterised route,
with a comment saying why, and a regression test.

**Empty chats piled up.** There is now no endpoint that creates one.
"New chat" is a link to /chat, which renders a composer with no row
behind it, and POST /api/chats/start writes the chat together with its
first message. Opening one and walking away leaves nothing.

**Pinning meant two different things.** The picker is now always in the
administrator's position order; pinned models get shortcuts in the chat
sidebar and nothing else. A picker whose order silently differs from the
admin screen is just confusing.

**Model images were missing in chat.** Assistant bubbles now show the
avatar of the model that actually wrote the turn -- which is not always
the model the chat is set to now -- falling back to the LLeMbas mark.
The picker shows it too.

**No global or per-model system prompt.** Three layers now: instance
(Admin -> General), model (Admin -> Models), chat. Precedence, not
concatenation: most specific wins outright. Stacking them reads well in
a settings screen and badly in practice, because two layers that
disagree give the model contradictory instructions and nobody can tell
which is losing. The chat panel shows the inherited prompt as
placeholder text so "leave empty to inherit" is not a guess.

**Alignment and button sizing.** Added --control-h and friends to
tokens.css; every button, input and select takes its height from them,
so a mixed row is flush by construction rather than by per-instance
nudging. Icon buttons are square at that height. Added .btn-row,
.card__header/.card__footer and .grid so pages stop carrying inline
styles, and moved every admin page onto them.

**Settings needed structure.** The user settings page is now tabbed
(Account / Models / Appearance / Security) using radio inputs and
sibling selectors -- no JavaScript, and the browser keeps the chosen tab
across a re-render.

Caught while checking: the chat.css surgery had deleted the attachment,
chip and dropzone rules. Restored, and there is now a check that every
literal class used in a template has a CSS rule.

197 tests, ruff clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/lembas/web/templates/admin/_connection_row.html

@@ -7,7 +7,7 @@
 #}
 <section class="card connection" id="connection-{{ connection.id }}">
   <form method="post" action="/admin/connections/{{ connection.id }}" class="form-grid">
-    <div class="connection__head">
+    <div class="card__header">
       <div class="row" style="gap: var(--sp-2); min-width: 0">
         <span class="status-dot {{ 'is-ok' if connection.enabled and not connection.last_error
                                     else 'is-bad' if connection.last_error else 'is-off' }}"
@@ -21,7 +21,7 @@
         {% endif %}
       </div>
 
-      <div class="row" style="gap: var(--sp-2)">
+      <div class="btn-row">
         <button class="btn btn--sm" type="submit"
                 hx-post="/admin/connections/{{ connection.id }}/test"
                 hx-target="#connection-{{ connection.id }}" hx-swap="outerHTML"
@@ -80,7 +80,7 @@
       </label>
     </div>
 
-    <div class="connection__footer">
+    <div class="card__footer">
       <span class="text-xs faint">
         {% if connection.last_checked_at %}
           Last checked {{ connection.last_checked_at.strftime("%Y-%m-%d %H:%M") }} UTC

src/lembas/web/templates/admin/connections.html

@@ -18,7 +18,7 @@
 
 <section class="card">
   <h2 class="card__title">Add a connection</h2>
-  <form method="post" action="/admin/connections" class="form-grid">
+  <form method="post" action="/admin/connections" >
     <div class="field">
       <label class="field__label" for="new-name">Name</label>
       <input class="input" id="new-name" name="name" required placeholder="Local LM Studio">
@@ -43,7 +43,7 @@
       </p>
     </div>
 
-    <div class="field field--actions">
+    <div class="btn-row" style="margin-top: var(--sp-5)">
       <button class="btn btn--primary" type="submit">
         {{ icon("plus", "icon--sm") }} Add and load models
       </button>

src/lembas/web/templates/admin/general.html

@@ -26,6 +26,21 @@
     </div>
   </section>
 
+  <section class="card">
+    <h2 class="card__title">Default system prompt</h2>
+    <p class="card__lede">
+      Applied to every chat that does not have a prompt of its own. A model's
+      prompt overrides this, and a chat's prompt overrides both — most specific
+      wins outright rather than the three being stacked together.
+    </p>
+    <div class="field">
+      <label class="field__label visually-hidden" for="system-prompt">System prompt</label>
+      <textarea class="textarea" id="system-prompt" name="system_prompt" rows="5"
+                placeholder="You are a helpful assistant.">{{ values.system_prompt }}</textarea>
+      <p class="field__hint">Leave empty to send no system prompt at all.</p>
+    </div>
+  </section>
+
   <section class="card">
     <h2 class="card__title">
       Registration
@@ -69,6 +84,6 @@
     </p>
   </section>
 
-  <button class="btn btn--primary" type="submit">Save settings</button>
+  <div class="btn-row"><button class="btn btn--primary" type="submit">Save settings</button></div>
 </form>
 {% endblock %}

src/lembas/web/templates/admin/groups.html

@@ -40,7 +40,7 @@
       {% endfor %}
     </div>
     {% endfor %}
-    <button class="btn btn--primary" type="submit">Save baseline</button>
+    <div class="btn-row"><button class="btn btn--primary" type="submit">Save baseline</button></div>
   </form>
 </section>
 
@@ -49,7 +49,7 @@
 </h2>
 
 <section class="card">
-  <form method="post" action="/admin/groups" class="row" style="gap: var(--sp-2)">
+  <form method="post" action="/admin/groups" class="btn-row">
     <input class="input" name="name" placeholder="New group name" required
            aria-label="New group name">
     <button class="btn btn--primary" type="submit">
@@ -71,7 +71,7 @@
 {% for group in groups %}
 <section class="card">
   <form method="post" action="/admin/groups/{{ group.id }}">
-    <div class="row row--between" style="margin-bottom: var(--sp-4)">
+    <div class="card__header">
       <strong>{{ group.name }}</strong>
       <span class="text-xs faint">
         {{ group.users|length }} member{{ '' if group.users|length == 1 else 's' }},
@@ -150,10 +150,12 @@
       {% endif %}
     </div>
 
-    <button class="btn btn--primary" type="submit">Save {{ group.name }}</button>
+    <div class="btn-row">
+      <button class="btn btn--primary" type="submit">Save {{ group.name }}</button>
+    </div>
   </form>
 
-  <div class="connection__footer">
+  <div class="card__footer">
     <span class="text-xs faint">Deleting a group leaves its members alone.</span>
     <form method="post" action="/admin/groups/{{ group.id }}/delete"
           onsubmit="return confirm('Delete the group “{{ group.name }}”?')">

src/lembas/web/templates/admin/models.html

@@ -8,8 +8,9 @@
 {% block admin_content %}
 <p class="admin-lede">
   Every model discovered across your connections. The order here is the order
-  users see. Pinned models are offered first, and the default is what a new chat
-  starts with.
+  users see in the picker. <strong>Pinning</strong> does not reorder anything —
+  it puts a shortcut in the chat sidebar. The <strong>default</strong> is what a
+  new chat starts with.
 </p>
 
 {% if saved %}
@@ -26,12 +27,14 @@
 </div>
 {% else %}
 
-<form method="post" action="/admin/models/bulk" class="bulk-bar">
-  <span class="text-sm muted">With selected:</span>
-  <button class="btn btn--sm" name="action" value="enable" type="submit">Enable</button>
-  <button class="btn btn--sm" name="action" value="disable" type="submit">Disable</button>
-  <button class="btn btn--sm" name="action" value="public" type="submit">Make public</button>
-  <button class="btn btn--sm" name="action" value="private" type="submit">Restrict</button>
+<form method="post" action="/admin/models/bulk">
+  <div class="bulk-bar">
+    <span class="bulk-bar__label">With selected:</span>
+    <button class="btn btn--sm" name="action" value="enable" type="submit">Enable</button>
+    <button class="btn btn--sm" name="action" value="disable" type="submit">Disable</button>
+    <button class="btn btn--sm" name="action" value="public" type="submit">Make public</button>
+    <button class="btn btn--sm" name="action" value="private" type="submit">Restrict</button>
+  </div>
 
   <div class="model-rows">
     {% for model in models %}
@@ -82,7 +85,7 @@
 
 {% for model in models %}
 <section class="card" id="model-{{ model.id }}">
-  <div class="row row--between" style="margin-bottom: var(--sp-4)">
+  <div class="card__header">
     <div class="row" style="gap: var(--sp-3); min-width: 0">
       {{ model_avatar(model, cls="model-row__avatar") }}
       <div style="min-width: 0">
@@ -111,6 +114,18 @@
                 placeholder="What is this model good at?">{{ model.description }}</textarea>
     </div>
 
+    <div class="field">
+      <label class="field__label" for="sp-{{ model.id }}">System prompt</label>
+      <textarea class="textarea" id="sp-{{ model.id }}" name="system_prompt" rows="3"
+                placeholder="{{ instance_prompt or 'No instance prompt is set.' }}"
+      >{{ model.system_prompt }}</textarea>
+      <p class="field__hint">
+        Used by chats on this model that have no prompt of their own.
+        {% if instance_prompt %}Leave empty to fall back to the instance prompt.
+        {% else %}Leave empty to send no system prompt.{% endif %}
+      </p>
+    </div>
+
     <div class="field">
       <span class="field__label">Capabilities</span>
       <div class="checkbox-row">
@@ -138,7 +153,7 @@
         </label>
         <label class="checkbox">
           <input type="checkbox" name="pinned" value="true" {{ 'checked' if model.pinned }}>
-          <span>Pinned — offered first in the picker</span>
+          <span>Pinned — shortcut in the chat sidebar</span>
         </label>
       </div>
     </div>
@@ -169,12 +184,14 @@
       {% endif %}
     </div>
 
-    <button class="btn btn--primary" type="submit">Save {{ model.label }}</button>
+    <div class="btn-row">
+      <button class="btn btn--primary" type="submit">Save {{ model.label }}</button>
+    </div>
   </form>
 
-  <div class="connection__footer">
+  <div class="card__footer">
     <form method="post" action="/admin/models/{{ model.id }}/image"
-          enctype="multipart/form-data" class="row" style="gap: var(--sp-2)">
+          enctype="multipart/form-data" class="btn-row">
       <input class="input input--file" type="file" name="image"
              accept="image/png,image/jpeg,image/webp,image/gif" required
              aria-label="Model image">

src/lembas/web/templates/admin/users.html

@@ -16,7 +16,7 @@
 <div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>{{ saved }}</span></div>
 {% endif %}
 
-<form method="get" action="/admin/users" class="row" style="margin-bottom: var(--sp-5)">
+<form method="get" action="/admin/users" class="btn-row" style="margin-bottom: var(--sp-5)">
   <input class="input" type="search" name="q" value="{{ q }}"
          placeholder="Search by name or email" aria-label="Search users">
   <button class="btn" type="submit">{{ icon("search", "icon--sm") }} Search</button>
@@ -50,7 +50,9 @@
         {% endfor %}
       </select>
     </div>
-    <button class="btn btn--primary" type="submit">{{ icon("plus", "icon--sm") }} Create</button>
+    <div class="btn-row">
+      <button class="btn btn--primary" type="submit">{{ icon("plus", "icon--sm") }} Create</button>
+    </div>
   </form>
 </details>
 
@@ -61,7 +63,7 @@
 {% for account in users %}
 <section class="card">
   <form method="post" action="/admin/users/{{ account.id }}">
-    <div class="row row--between" style="margin-bottom: var(--sp-4); flex-wrap: wrap">
+    <div class="card__header">
       <div class="row" style="gap: var(--sp-2); min-width: 0">
         <span class="status-dot {{ 'is-ok' if account.active else 'is-off' }}"></span>
         <strong class="truncate">{{ account.name }}</strong>
@@ -135,12 +137,11 @@
     </div>
     {% endif %}
 
-    <button class="btn btn--primary" type="submit">Save</button>
+    <div class="btn-row"><button class="btn btn--primary" type="submit">Save</button></div>
   </form>
 
-  <div class="connection__footer">
-    <form method="post" action="/admin/users/{{ account.id }}/password" class="row"
-          style="gap: var(--sp-2)">
+  <div class="card__footer">
+    <form method="post" action="/admin/users/{{ account.id }}/password" class="btn-row">
       <input class="input" type="password" name="password" minlength="8"
              placeholder="Set a new password" autocomplete="new-password" required
              aria-label="New password for {{ account.email }}">