AI tab: full-width auto-growing note editors

Replace the single-line note inputs (which truncated long notes) with
wrapping, auto-growing textareas and a per-note Save/Delete row, so the
whole correction note is readable and editable. Changelog 0.0.4.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project are documented here. Versions are git tags;
 release tags `X.Y.Z` are built and deployed automatically (pre-release tags such
 as `0.0.0a1` are built and staged only).
 
+## [0.0.4] - 2026-06-20
+
+### Changed
+- AI tab: correction notes are now full-width, wrapping, auto-growing textareas
+  (Save/Delete per note) instead of single-line inputs that truncated long notes,
+  so the whole note is readable and editable.
+
 ## [0.0.3] - 2026-06-20
 
 ### Added

internal/web/static/style.css

@@ -202,7 +202,22 @@ form.row {
 form.row input { flex: 1; padding: .4rem; }
 form.row button { padding: .4rem .7rem; }
 .add input { border: 1px solid #137333; }
-form.row button.danger { background: #fce8e6; border: 1px solid #d93025; color: #a50e0e; }
+button.danger { background: #fce8e6; border: 1px solid #d93025; color: #a50e0e; }
+
+/* AI correction notes: full-width, wrapping, auto-growing editors. */
+form.note { margin: .75rem 0 1rem; }
+form.note textarea {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  padding: .5rem;
+  resize: vertical;
+  min-height: 3rem;
+  overflow: hidden;
+}
+form.note.add textarea { border: 1px solid #137333; }
+form.note .note-actions { display: flex; gap: .4rem; margin-top: .35rem; }
+form.note .note-actions button { padding: .4rem .9rem; }
 
 /* AI tab: read-only prompt + miss-review table. */
 pre.prompt {

internal/web/templates/ai.html

@@ -10,18 +10,29 @@
 <h2>Correction notes</h2>
 <p><small>Free-text rules appended to the classifier prompt to fix recurring misreads. Editing a note keeps the old version in history.</small></p>
 {{range .Notes}}
-<form class="row" method="post" action="/ai/notes/edit">
+<form class="note" method="post" action="/ai/notes/edit">
   <input type="hidden" name="id" value="{{.ID}}">
-  <input type="text" name="text" value="{{.Text}}">
-  <button type="submit">Save</button>
-  <button type="submit" formaction="/ai/notes/delete" class="danger">✕</button>
+  <textarea name="text" rows="2">{{.Text}}</textarea>
+  <div class="note-actions">
+    <button type="submit">Save</button>
+    <button type="submit" formaction="/ai/notes/delete" class="danger">Delete</button>
+  </div>
 </form>
 {{end}}
-<form class="row add" method="post" action="/ai/notes">
-  <input type="text" name="text" placeholder="New correction note">
-  <button type="submit">Add</button>
+<form class="note add" method="post" action="/ai/notes">
+  <textarea name="text" rows="2" placeholder="New correction note…"></textarea>
+  <div class="note-actions"><button type="submit">Add note</button></div>
 </form>
 
+<script>
+// Grow each note's textarea to fit its full text, so long notes are readable.
+document.querySelectorAll("form.note textarea").forEach(function (ta) {
+  function fit() { ta.style.height = "auto"; ta.style.height = ta.scrollHeight + "px"; }
+  ta.addEventListener("input", fit);
+  fit();
+});
+</script>
+
 <h2>Review misreads {{if .Misses}}({{len .Misses}}){{end}}</h2>
 {{if not .Misses}}
 <p><small>No misreads to review — the AI matched what you submitted (or nothing has been classified yet).</small></p>