feat(ui): onboarding suggestion chips with one-tap submit, keyboard access, and mobile scroll row

frontend/assets/app.js

@@ -1,13 +1,14 @@
 /* Brain of Reese — chat shell.
  *
- * Renders suggestions, shows KB health, and runs chat turns against
- * POST /api/chat (SSE, PLAN §4): deltas render live into the Brain bubble,
- * the done event appends source chips (and "Maybe try" chips when the
- * turn was deflected — honesty gate, phase 04), errors surface as a red
- * banner. The full feedback state machine lands with the loading-feedback
- * story; this keeps the "never stale" contract: the button is busy for the
- * whole turn and is always re-enabled at the end.
- * All DOM ids match frontend/index.html.
+ * Renders suggestions (onboarding chips + "Maybe try" deflection chips —
+ * one shared .suggestion-chip component, renderChips below), shows KB
+ * health, and runs chat turns against POST /api/chat (SSE, PLAN §4):
+ * deltas render live into the Brain bubble, the done event appends source
+ * chips (and "Maybe try" chips when the turn was deflected — honesty gate,
+ * phase 04), errors surface as a red banner. The full feedback state
+ * machine lands with the loading-feedback story; this keeps the "never
+ * stale" contract: the button is busy for the whole turn and is always
+ * re-enabled at the end. All DOM ids match frontend/index.html.
  */
 
 const messagesEl = document.querySelector("#messages");
@@ -99,27 +100,51 @@ function removeTyping() {
   document.querySelector("#typing-indicator")?.remove();
 }
 
-/* ---------- suggestions ---------- */
+/* ---------- suggestions (shared chip component, phase 05) ----------
+ *
+ * One component, two homes: the onboarding row in the empty state and the
+ * "Maybe try" row under a deflected answer. The container must be
+ * role="list" with an accessible name ("Suggested questions" / "Maybe
+ * try"); each chip is a real <button type="button"> with role="listitem".
+ * Clicking a chip is one tap → question: it fills the composer, focuses it,
+ * and submits — the same behavior everywhere (submitSuggestion).
+ */
+function submitSuggestion(text) {
+  input.value = text;
+  autoGrow();
+  input.focus();
+  composer.requestSubmit();
+}
+
+function renderChips(container, items, { onSelect } = {}) {
+  // Replace only previous chips; keep any other children (e.g. the
+  // visually-hidden group label inside a "maybe-try" row).
+  container.querySelectorAll(".suggestion-chip").forEach((c) => c.remove());
+  for (const item of items || []) {
+    const text = String(item || "").trim();
+    if (!text) continue;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "suggestion-chip";
+    btn.setAttribute("role", "listitem");
+    btn.textContent = text;
+    btn.addEventListener("click", () => {
+      submitSuggestion(text);
+      if (onSelect) onSelect(text, btn);
+    });
+    container.appendChild(btn);
+  }
+  return container;
+}
+
 async function loadSuggestions() {
   try {
     const r = await fetch("/api/suggestions");
     if (!r.ok) return;
     const { suggestions } = await r.json();
-    suggestionsEl.innerHTML = "";
-    for (const s of suggestions) {
-      const btn = document.createElement("button");
-      btn.type = "button";
-      btn.className = "suggestion-chip";
-      btn.textContent = s;
-      btn.setAttribute("role", "listitem");
-      btn.addEventListener("click", () => {
-        input.value = s;
-        input.focus();
-      });
-      suggestionsEl.appendChild(btn);
-    }
+    renderChips(suggestionsEl, suggestions);
   } catch {
-    /* suggestions are progressive enhancement */
+    /* suggestions are progressive enhancement: no chips, no error spam */
   }
 }
 
@@ -200,11 +225,9 @@ function appendSources(wrap, sources) {
   }
 }
 
-/* "Maybe try:" chips under a deflected bubble (honesty gate, phase 04).
-   Same .suggestion-chip component as onboarding; clicking wires what
-   exists today — fill the input + focus. One-tap submit lands with the
-   phase 05 chip component. The group is accessible (role=list +
-   aria-label) and wraps cleanly at every width. */
+/* "Maybe try:" chips under a deflected bubble (honesty gate, phase 04,
+   shared component + one-tap submit, phase 05). The group is accessible
+   (role=list + aria-label) and wraps cleanly at every width. */
 function appendMaybeTry(wrap, suggestions) {
   if (!suggestions || !suggestions.length) return;
   const body = wrap.querySelector(".msg-body");
@@ -216,19 +239,7 @@ function appendMaybeTry(wrap, suggestions) {
   label.className = "visually-hidden";
   label.textContent = "Maybe try:";
   group.appendChild(label);
-  for (const s of suggestions) {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "suggestion-chip";
-    btn.setAttribute("role", "listitem");
-    btn.textContent = s;
-    btn.addEventListener("click", () => {
-      input.value = s;
-      autoGrow();
-      input.focus();
-    });
-    group.appendChild(btn);
-  }
+  renderChips(group, suggestions);
   body.appendChild(group);
 }