fix: the message field grows only when the word really wraps (measured without a scrollbar taking its width); the stop button red

internal/server/web/static/ai.js

@@ -792,6 +792,7 @@
   function sendState() {
     const on = !!ac || !!input.value.trim() || attachments.length > 0;
     send.classList.toggle('show', on);
+    send.classList.toggle('stop', !!ac);
     send.tabIndex = on ? 0 : -1;
   }
   input.addEventListener('input', sendState);
@@ -807,7 +808,15 @@
     grow(); sendState();
   }
   // The field grows with the text, up to a few lines.
-  function grow() { input.style.height = '40px'; input.style.height = Math.min(140, input.scrollHeight + 2) + 'px'; }
+  // Measured with no scrollbar: one showing in the squeezed field would take
+  // its width and wrap the last word a character too early.
+  function grow() {
+    input.style.overflowY = 'hidden';
+    input.style.height = '40px';
+    const h = input.scrollHeight + 2;
+    input.style.height = Math.min(140, h) + 'px';
+    input.style.overflowY = h > 140 ? 'auto' : 'hidden';
+  }
   input.addEventListener('input', grow);
   input.addEventListener('keydown', ev => {
     if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) { ev.preventDefault(); q('.ai-form-in').requestSubmit(); }

internal/server/web/static/app.css

@@ -917,6 +917,9 @@ body.touch.term-active .ai-fab { bottom:104px; }
 .ai-send.show { width:36px; margin:0 3px 2px 0; opacity:1; transform:none; pointer-events:auto; }
 .ai-send:hover { color:#7ab6ff; background:#1b222c; }
 .ai-send:active { transform:scale(.9); }
+/* While the answer runs: stop, red. */
+.ai-send.stop { color:var(--danger); }
+.ai-send.stop:hover { color:#ff7b7b; background:#2a1a1d; }
 .ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); }
 .ai-send .ai-plane { display:block; flex:none; transform:translateX(1px); }
 .ai-attachments { display:flex; flex-wrap:wrap; gap:5px; padding:2px 3px 6px; }