PWA, one send/stop button, audio in and out, web search as a tool

Four pieces of work.

**Installable.** A manifest carrying the instance name, PWA icons rasterised
from the existing mark at design time, a service worker and a themed offline
page. The worker caches the shell only and bails out on /api/, /auth/, /admin/
and anything accepting text/event-stream -- passing a reply stream through a
worker turns it into one delivery at the end, or nothing. It is served from
GET /sw.js rather than the static mount because a worker's scope is the path it
came from.

**Send and Stop are one button.** They were two, and the hidden one was never
hidden: `.btn` is display: inline-flex, which outranks the browser's own
`[hidden] { display: none }`, so Stop sat permanently beside Send. app.css now
forces the attribute to win -- every control toggled with `hidden` depended on
that -- and the composer renders one button carrying both icons, with ui.js
flipping data-composer-action and the type with it.

**Audio.** Speech to text and text to speech against any OpenAI-shaped
/v1/audio/* endpoint: dictate into the composer, have a reply read out.
Instance settings in Admin, per-reader overrides in Settings, with the voice
list discovered from the server where it offers one. Recorded audio is capped
and never written to disk -- it is not an attachment, it has no owner, and
nothing would ever sweep it.

**Web search, as a tool.** This is the tool loop PLAN.md described as the real
work: one reply is now a bounded sequence of requests rather than one. The model
asks, the tool runs, the result goes back and it is asked again, up to three
rounds. Providers are DuckDuckGo (no setup), SearXNG and Firecrawl.

Two decisions worth stating. Tools are only offered to models flagged `tools`,
because an endpoint without support rejects the whole request rather than
ignoring the array -- the same reason images only reach models flagged
`vision`. And tool results are not replayed as context on the next turn, for the
same reasons reasoning is not: the answer already contains what the model made
of them, and replaying stale results into every later request wastes the window
and reliably sends a small model into a search loop. The sources stay visible in
the transcript instead.

Search results are untrusted third-party text and are treated as such: escaped,
and only http/https URLs rendered as links.

338 tests, ruff clean.

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

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

@@ -59,9 +59,35 @@
                   placeholder="{% if chat %}Send a message…{% else %}Ask anything…{% endif %}"
                   aria-label="Message" {{ 'autofocus' if not chat }}></textarea>
 
+        {% if can_dictate %}
+        {# Recording is started and stopped by the same button; audio.js swaps
+           data-mic-state and the icon with it. #}
+        <button class="btn btn--icon composer__btn composer__mic" type="button"
+                data-mic data-mic-state="idle"
+                aria-label="Dictate a message" title="Dictate a message">
+          <span class="composer__icon composer__icon--mic">{{ icon("mic") }}</span>
+          <span class="composer__icon composer__icon--recording" aria-hidden="true">
+            {{ icon("stop-circle") }}
+          </span>
+        </button>
+        {% endif %}
+
+        {#
+          One button, two jobs. While a reply is being written it becomes Stop,
+          because that is where the hand already is and a second button sitting
+          permanently beside Send is clutter that is wrong most of the time.
+
+          ui.js flips data-composer-action, and the type with it: as `submit`
+          the form's own handler sends, as `button` the click handler stops.
+          Both icons are rendered here and chosen in CSS, so the swap costs no
+          layout and cannot flash an empty button.
+        #}
         <button class="btn btn--primary btn--icon composer__btn" type="submit"
-                aria-label="Send">
-          {{ icon("send") }}
+                data-composer-action="send" aria-label="Send">
+          <span class="composer__icon composer__icon--send">{{ icon("send") }}</span>
+          <span class="composer__icon composer__icon--stop" aria-hidden="true">
+            <span class="composer__stop-square"></span>
+          </span>
         </button>
       </div>
     </form>

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

@@ -101,6 +101,12 @@
         <div class="reasoning__body" sse-swap="reasoning" hx-swap="beforeend"></div>
       </details>
 
+      {# Tool activity as it happens. Empty until the model asks for something,
+         and the whole block is replaced each time rather than appended to --
+         a follower attaching late has no earlier fragments to build on. #}
+      <div class="tool-activity-list" id="tools-{{ message.id }}"
+           sse-swap="tools" hx-swap="innerHTML"></div>
+
       {# The server re-renders the answer as Markdown a few times a second and
          replaces this whole block, so formatting appears as the model writes
          rather than snapping into place at the end. #}
@@ -111,7 +117,11 @@
       <div class="msg__waiting">
         <span class="dots"><i></i><i></i><i></i></span>
       </div>
-    {% elif message.reasoning and not message.error %}
+    {% else %}
+      {# Finished. Same order as the live view above -- thinking, then what it
+         looked up, then the answer -- so a reply does not rearrange itself the
+         moment it stops streaming. #}
+      {% if message.reasoning and not message.error %}
       {# Collapsed once finished: the answer is what the reader came for, and
          the thinking is there if they want to audit it. #}
       <details class="reasoning" id="reasoning-{{ message.id }}">
@@ -128,9 +138,19 @@
         </summary>
         <div class="reasoning__body">{{ message.reasoning }}</div>
       </details>
-      <div class="msg__body">{{ body_html|safe }}</div>
+      {% endif %}
 
-    {% elif message.error %}
+      {% if message.tool_calls_json %}
+      {# Kept with the message rather than discarded with the stream, so the
+         sources behind an answer are still there tomorrow. #}
+      <div class="tool-activity-list">
+        {% with tool_events = message.tool_calls_json, live = false %}
+          {% include "chat/_tool_activity.html" %}
+        {% endwith %}
+      </div>
+      {% endif %}
+
+      {% if message.error %}
       <div class="alert alert--error msg__error" role="alert">
         {{ icon("warning", "alert__icon") }}
         <div>
@@ -138,19 +158,21 @@
           <div class="text-sm" style="margin-top: var(--sp-1)">{{ message.error }}</div>
         </div>
       </div>
-      {% if message.content %}
-      <div class="msg__body">{{ body_html|safe }}</div>
       {% endif %}
-    {% elif message.role == "assistant" %}
-      <div class="msg__body">{{ body_html|safe }}</div>
-      {% if message.stopped %}
-      <p class="msg__note">{{ icon("x", "icon--sm") }} Stopped. This reply is cut short.</p>
+
+      {% if message.role == "assistant" %}
+        {% if message.content %}
+        <div class="msg__body">{{ body_html|safe }}</div>
+        {% endif %}
+        {% if message.stopped %}
+        <p class="msg__note">{{ icon("x", "icon--sm") }} Stopped. This reply is cut short.</p>
+        {% endif %}
+      {% elif message.content %}
+        <div class="msg__body msg__body--plain">{{ message.content }}</div>
       {% endif %}
-    {% elif message.content %}
-      <div class="msg__body msg__body--plain">{{ message.content }}</div>
+      {# An attachment-only turn has no text; rendering the bubble anyway would
+         leave an empty box under the file. #}
     {% endif %}
-    {# An attachment-only turn has no text; rendering the bubble anyway would
-       leave an empty box under the file. #}
 
     {% if not streaming %}
     <footer class="msg__actions">
@@ -173,6 +195,21 @@
               aria-label="Regenerate reply">
         {{ icon("refresh", "icon--sm") }}
       </button>
+      {% if can_listen | default(false) and message.content and not message.error %}
+      {# Speech is synthesised on demand rather than stored: the voice can
+         change under the reader between plays, and a reply can be regenerated
+         at the same address. #}
+      {# data-speak-auto is set only on the frame that ends a live stream, never
+         on a page load: reopening a chat must not start reading its last reply
+         out loud again. #}
+      <button class="btn btn--icon btn--sm" type="button"
+              data-speak="/api/audio/speech/{{ chat.id }}/{{ message.id }}"
+              {% if audio_autoplay | default(false) and just_finished | default(false) %}data-speak-auto{% endif %}
+              aria-label="Read this reply aloud">
+        <span class="speak__icon speak__icon--play">{{ icon("speaker", "icon--sm") }}</span>
+        <span class="speak__icon speak__icon--stop">{{ icon("stop-circle", "icon--sm") }}</span>
+      </button>
+      {% endif %}
       {% endif %}
     </footer>
     {# The raw source, so the copy button yields Markdown rather than rendered

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

@@ -0,0 +1,61 @@
+{% from "_macros.html" import icon %}
+{#
+  What the model did before answering.
+
+  Rendered both live (streamed as a whole block, like the reasoning and the
+  answer) and from the stored message afterwards, so the sources behind an
+  answer stay in the transcript rather than vanishing when the stream ends.
+
+  EVERYTHING in here comes from a search provider and is untrusted, exactly as
+  much as model output is. Jinja autoescaping covers the text; the URL is
+  checked separately, because `is_linkable` is the only thing standing between
+  a result carrying a javascript: URL and an anchor pointing at it.
+#}
+{% for event in tool_events %}
+<details class="tool-activity {{ 'tool-activity--error' if event.status == 'error' }}">
+  <summary class="tool-activity__summary">
+    {{ icon("globe", "icon--sm tool-activity__icon") }}
+    <span class="tool-activity__label">
+      {% if event.status == "error" %}
+        Web search failed
+      {% elif event.query %}
+        Searched the web for “{{ event.query }}”
+      {% else %}
+        Searched the web
+      {% endif %}
+      {% if event.results %}
+        <span class="tool-activity__count">
+          · {{ event.results | length }} result{{ '' if event.results | length == 1 else 's' }}
+        </span>
+      {% endif %}
+    </span>
+    {{ icon("chevron-down", "icon--sm reasoning__chevron") }}
+  </summary>
+
+  <div class="tool-activity__body">
+    {% if event.error %}
+    <p class="tool-activity__error">{{ event.error }}</p>
+    {% elif not event.results %}
+    <p class="tool-activity__error">Nothing was found.</p>
+    {% endif %}
+
+    {% for result in event.results %}
+    <div class="tool-result">
+      {% set scheme = result.url.split(":")[0] | lower %}
+      {% if scheme in ("http", "https") %}
+      <a class="tool-result__title" href="{{ result.url }}"
+         target="_blank" rel="noopener noreferrer nofollow">{{ result.title }}</a>
+      {% else %}
+      {# Not a link. A search result is third-party text and its URL is not
+         trusted to be safe to click. #}
+      <span class="tool-result__title">{{ result.title }}</span>
+      {% endif %}
+      <span class="tool-result__host">{{ result.host }}</span>
+      {% if result.snippet %}
+      <p class="tool-result__snippet">{{ result.snippet }}</p>
+      {% endif %}
+    </div>
+    {% endfor %}
+  </div>
+</details>
+{% endfor %}