File attachments: images for vision, PDFs and text into the prompt

Drag, paste or pick a file in the composer. Images go to vision models
as multimodal content parts; PDFs and text files have their content
extracted and placed in the prompt. Verified end to end against
gemma4-e4b-q8 on llama-swap: given a drawing and a text file, it named
the red square and blue circle and read the number out of the document.

Type is decided by inspecting the bytes, never the filename or the
browser's Content-Type -- a .png full of text is stored as text. Images
are downscaled to 1400px and re-encoded: a phone photo is several
megabytes of base64, which is slow and a large slice of the context
window. PDF text is extracted once, at upload, and stored; re-extracting
per request would let a reply change because a parser was upgraded.

Design points worth keeping:

- Images are only sent to models an administrator has marked `vision`.
  This is not graceful degradation -- most endpoints reject the entire
  request rather than ignoring an image part. A plain text turn stays a
  plain string for the same reason: the list form 400s on endpoints that
  do not implement it.
- Images reach the model as base64 data URIs, not links. A local
  endpoint has no route back to LLeMbas, and a hosted one has no
  credentials for it.
- Non-images are served Content-Disposition: attachment with nosniff, so
  an uploaded .html can never execute in this origin. Stored names are
  random; the uploader's name is a label and never a path.
- Uploads are unbound until the message is sent, which is what lets a
  file be removed beforehand. claim() only takes unclaimed rows owned by
  the sender, so a forged id cannot pull in someone else's file.
  Abandoned uploads are swept at startup.
- A scanned PDF says so rather than silently contributing nothing, and
  truncation is declared to the model in the document tag so it can
  admit it did not see page 400.
- "Here, look at this" with no words is a legitimate turn, so a message
  is only empty when it carries neither text nor files.

Also fixes auto-titling, which read message["content"] as a string and
would have broken on the first multimodal turn.

186 tests, ruff clean.

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

src/lembas/web/templates/chat/index.html

@@ -164,16 +164,45 @@
         </div>
       </div>
 
-      <div class="composer">
+      <div class="composer" {% if can.get("files.upload") %}data-dropzone{% endif %}>
+        {% if can.get("files.upload") %}
+        {# Uploads go up as soon as a file is chosen, so the chip (and any
+           rejection) appears immediately rather than at send time. The chips
+           carry hidden inputs, which is how the ids reach the message POST. #}
+        <form id="upload-form" hx-post="/api/files?chat_id={{ chat.id }}"
+              hx-target="#attachments" hx-swap="beforeend"
+              hx-encoding="multipart/form-data"
+              hx-on::after-request="this.reset()">
+          <input class="visually-hidden" type="file" name="file" id="file-input"
+                 multiple accept="image/*,.pdf,.txt,.md,.csv,.json,.py,.js,.ts,.rs,.go,.sh,.sql,.yaml,.yml,.toml,.log"
+                 onchange="window.lembas.uploadFiles(this.files); this.value = ''">
+        </form>
+        {% endif %}
+
+        <div class="composer__attachments" id="attachments"></div>
+
         <form class="composer__form"
               hx-post="/api/chats/{{ chat.id }}/messages"
               hx-target="#thread" hx-swap="beforeend"
               hx-on::after-request="if (event.detail.successful) {
                 this.reset();
+                document.getElementById('attachments').replaceChildren();
                 const t = this.querySelector('textarea');
                 window.lembas.autosize(t);
                 window.lembas.scrollThread(true);
               }">
+          {# The chips live outside this form, so their hidden inputs are pulled
+             in explicitly at submit time. #}
+          <div hx-include="#attachments" hidden></div>
+
+          {% if can.get("files.upload") %}
+          <button class="btn btn--icon composer__attach" type="button"
+                  aria-label="Attach a file" title="Attach a file"
+                  onclick="document.getElementById('file-input').click()">
+            {{ icon("attach") }}
+          </button>
+          {% endif %}
+
           <textarea class="composer__input" name="content" rows="1"
                     data-autosize data-max-height="320" data-composer-input
                     placeholder="Send a message…" aria-label="Message"></textarea>
@@ -181,9 +210,24 @@
             {{ icon("send", "icon--sm") }}
           </button>
         </form>
+
         <p class="composer__hint">
           Enter to send, Shift+Enter for a new line.
+          {% if can.get("files.upload") %}
+            Drag files in, or paste an image.
+            {% if current_model and not current_model.capabilities_json.get("vision") %}
+              <strong>{{ current_model.label }} has no vision</strong>, so images
+              will not be sent — documents still will.
+            {% endif %}
+          {% endif %}
         </p>
+
+        {% if can.get("files.upload") %}
+        <div class="dropzone-overlay" aria-hidden="true">
+          {{ icon("attach", "icon--lg") }}
+          <span>Drop to attach</span>
+        </div>
+        {% endif %}
       </div>
     {% endif %}
   </main>