aimeat 1.40.0 → 2.0.0

package/dist/public/views/profile/generator-tab.js

@@ -60,8 +60,6 @@ import {
   saveInterviewSpec,
   writeProjectLog,
 } from '/js/services/generator.js';
-import { buildBlueprintFixPrompt } from '/js/services/generator-prompts.js';
-
 /** Load blueprint or interview prompt from backend (DB seeds — single source of truth) */
 async function loadGeneratorPrompt(projectId, type = 'blueprint', locale = 'en') {
   const s = window.AIMEAT?.auth?.getSession?.();
@@ -70,6 +68,17 @@ async function loadGeneratorPrompt(projectId, type = 'blueprint', locale = 'en')
   if (!resp.ok) throw new Error(resp.error?.message || 'Failed to load prompt');
   return resp.data?.prompt || '';
 }
+
+/** Build a self-correction prompt (e.g. gen-blueprint-fix) from backend DB templates. */
+async function buildGeneratorPrompt(projectId, promptId, payload = {}) {
+  const s = window.AIMEAT?.auth?.getSession?.();
+  if (!s) throw new Error('Not authenticated');
+  const resp = await s.fetch(`/v1/generator/${projectId}/prompts/build`, {
+    method: 'POST', body: JSON.stringify({ promptId, ...payload }),
+  });
+  if (!resp.ok) throw new Error(resp.error?.message || 'Failed to build prompt');
+  return resp.data?.prompt || '';
+}
 import { validateBlueprint, validateInterviewSpec, validateSpecQuality } from '/js/services/generator-validate.js';
 import { OpenRouterSettings, SettingsCollectionView } from './generator-settings.js';
 import { runWithAi } from './generator-detail.js';
@@ -151,8 +160,22 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
   const [blueprintErrors, setBlueprintErrors] = useState([]);
   const [interviewSpec, setInterviewSpec] = useState('');
   const [interviewErrors, setInterviewErrors] = useState([]);
-  const [interviewParsed, setInterviewParsed] = useState(null);
   const [aiRunning, setAiRunning] = useState(null); // null | 'interview' | 'blueprint'
+  // Setter only — the parsed interview spec is persisted to the backend (saveInterviewSpec)
+  // and re-read there; the local value is no longer consumed since blueprint-fix moved to the DB.
+  const [, setInterviewParsed] = useState(null);
+  const [blueprintFixPrompt, setBlueprintFixPrompt] = useState(null);
+
+  // Build the blueprint-fix retry prompt from the backend (DB template — keeps service_slug
+  // and every rule the canonical blueprint prompt carries) when the blueprint has errors.
+  useEffect(() => {
+    if (blueprintErrors.length > 0 && project?.projectId) {
+      buildGeneratorPrompt(project.projectId, 'gen-blueprint-fix', { errors: blueprintErrors })
+        .then(setBlueprintFixPrompt).catch(() => setBlueprintFixPrompt(null));
+    } else {
+      setBlueprintFixPrompt(null);
+    }
+  }, [blueprintErrors, project?.projectId]);
 
   async function handleAnalyze() {
     if (!description.trim()) return;
@@ -356,7 +379,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
         const max = orSettings.maxRetries || 3;
         for (let attempt = 1; attempt <= max && !vr.valid; attempt++) {
           showToast?.(t('profile.generator.openrouter.retrying').replace('{current}', attempt).replace('{max}', max));
-          const fixPrompt = buildBlueprintFixPrompt(description, vr.errors, interviewParsed);
+          const fixPrompt = await buildGeneratorPrompt(project.projectId, 'gen-blueprint-fix', { errors: vr.errors });
           content = await runWithAi(project.projectId, fixPrompt);
           setBlueprintResult(content);
           vr = validateBlueprint(content);
@@ -390,9 +413,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
   }
 
   if (phase === 'blueprint') {
-    const fixPrompt = blueprintErrors.length > 0
-      ? buildBlueprintFixPrompt(description, blueprintErrors, interviewParsed)
-      : null;
+    const fixPrompt = blueprintFixPrompt;
     return html`
       <div class="pf-gen-new-project">
         <button class="btn-outline" onClick=${() => setPhase('describe')}>${t('profile.generator.back')}</button>

package/dist/public/views/profile/inbox-tab/components.js

@@ -7,6 +7,21 @@
  *   self-contained (owns its own hooks). Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
  *   v1.0.0 — 2026-07-13 — Extracted from inbox-tab.js (max-file-lines)
+ *   v1.1.0 — 2026-07-14 — Composer: pasted/dropped images route to the file-attachment path (upload +
+ *     shown as an image) instead of Toast UI base64-inlining them into the body (which blew the 50k
+ *     body limit → 400 "Too big"). addImageBlobHook (rich) + onPaste (markdown fallback).
+ *   v1.2.0 — 2026-07-17 — Two paste-image fixes: (1) MessageBubble looks up attachment urls via the new
+ *     `${messageId}::${attachmentId}` composite key so images no longer bleed between messages; (2) pasted
+ *     clipboard images (always named "image.png") get a unique name instead of every paste sharing one.
+ *   v1.3.0 — 2026-07-17 — Reply-to with quote: a ↩ bubble action starts a quoted reply, and a bubble whose
+ *     message carries `replyToId` renders the quoted original (sender + excerpt; click jumps to it).
+ *   v1.3.1 — 2026-07-17 — Composer file chips get a ✕ — a queued (e.g. mis-pasted) attachment can be
+ *     removed before sending instead of being stuck in the outgoing message.
+ *   v1.4.0 — 2026-07-18 — Composer accepts a `focusNonce`: bumping it focuses the editor (rich .focus() or
+ *     the fallback textarea) so clicking ↩ Reply on a bubble drops the cursor straight into the input.
+ *   v1.5.0 — 2026-07-18 — Mobile composer is a plain auto-growing textarea (`mode:'simple'`, no Toast UI
+ *     toolbar/Write-Preview/WYSIWYG — a phone keyboard + heavy WYSIWYG is miserable); ≤760px opens straight
+ *     into it so Toast UI never even loads there. Desktop keeps the rich editor.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
@@ -18,7 +33,7 @@ import { Markdown } from '/components/Markdown.js';
 import { minidenticon } from '/lib/minidenticons.min.js';
 import * as schedules from '/js/services/schedules.js';
 import { MODES } from '/js/services/messages-ai-prompts.js';
-import { loadToastUI, prepareBody, statusTick, timeShort, trackStateLabel, ATTACH_ICO, attachKind, IFORM_OTHER } from './helpers.js';
+import { loadToastUI, prepareBody, quoteSnippet, statusTick, timeShort, trackStateLabel, ATTACH_ICO, attachKind, IFORM_OTHER } from './helpers.js';
 
 export function Avatar({ seed, size = 36 }) {
   const svg = minidenticon(typeof seed === 'string' && seed ? seed : 'user');
@@ -228,15 +243,25 @@ export function PollBuilder({ questions, setQuestions }) {
     </div>`;
 }
 
-export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onPark, onReplyAi, tracked, onOpenMarkdown, answeredWith, onAnswer, submitting }) {
+export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onPark, onReplyAi, onQuote, quoted, quotedName, onJumpTo, domId, tracked, onOpenMarkdown, answeredWith, onAnswer, submitting }) {
   const nonInline = (msg.attachments || []).filter(a => !a.inline);
   const expiredIds = new Set((msg.attachments || []).filter(a => a.expired).map(a => a.id));
+  // urlMap is keyed by `${messageId}::${attachmentId}` because per-message attachment ids (at0, at1…)
+  // aren't unique across messages. Build THIS message's flat { attId → url } view so prepareBody's cid
+  // resolution and the thumbnails only ever see their own message's attachments.
+  const urls = {};
+  for (const a of (msg.attachments || [])) {
+    const u = urlMap[`${msg.id}::${a.id}`];
+    if (u) urls[a.id] = u;
+  }
   const trk = tracked ? trackStateLabel(tracked.state) : null;
   return html`
-    <div class=${`inbox-row ${mine ? 'inbox-row--mine' : 'inbox-row--theirs'}`}>
+    <div id=${domId} class=${`inbox-row ${mine ? 'inbox-row--mine' : 'inbox-row--theirs'}`}>
       ${!mine ? html`<${Avatar} seed=${msg.senderGhii} size=${28} />` : null}
       <div class=${`inbox-bubble ${mine ? 'inbox-bubble--mine' : 'inbox-bubble--theirs'}`}>
         <div class="inbox-bubble-actions">
+          ${onQuote ? html`<button class="inbox-bubble-act" title=${t('inbox.quoteReply')}
+            onClick=${() => onQuote(msg)}>↩</button>` : null}
           <button class=${`inbox-bubble-act${starred ? ' inbox-bubble-act--on' : ''}`} title=${t('inbox.markImportant')}
             onClick=${() => onStar?.(msg)}>${starred ? '⭐' : '☆'}</button>
           <button class=${`inbox-bubble-act${tracked ? ' inbox-bubble-act--on' : ''}`}
@@ -247,7 +272,11 @@ export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onP
           <button class="inbox-bubble-act" title=${t('inbox.ai.replyToMessage')}
             onClick=${() => onReplyAi?.(msg)}>✨</button>
         </div>
-        <div class="inbox-bubble-body"><${Markdown} text=${prepareBody(msg.body, urlMap, expiredIds)} /></div>
+        ${quoted ? html`<button class="inbox-bubble-quote" onClick=${() => onJumpTo?.(quoted.id)} title=${t('inbox.quoteJump')}>
+          <span class="inbox-quote-name">${escHtml(quotedName || '')}</span>
+          <span class="inbox-quote-text">${escHtml(quoteSnippet(quoted.body))}</span>
+        </button>` : null}
+        <div class="inbox-bubble-body"><${Markdown} text=${prepareBody(msg.body, urls, expiredIds)} /></div>
         ${msg.interactive?.role === 'questions' ? (
           answeredWith
             ? html`<${InteractiveAnswered} spec=${msg.interactive} answers=${answeredWith.answers || {}} />`
@@ -256,7 +285,7 @@ export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onP
         ) : null}
         ${nonInline.length > 0 && html`
           <div class="inbox-attach-row">
-            ${nonInline.map(a => html`<${AttachmentItem} key=${a.id} a=${a} url=${urlMap[a.id]} onOpenMarkdown=${onOpenMarkdown} />`)}
+            ${nonInline.map(a => html`<${AttachmentItem} key=${a.id} a=${a} url=${urls[a.id]} onOpenMarkdown=${onOpenMarkdown} />`)}
           </div>`}
         <div class="inbox-bubble-meta">
           ${trk ? html`<span class=${`inbox-track-badge inbox-track-badge--${trk.tone}`} title=${t('inbox.trackResponse')}>🔗 ${trk.text}</span>` : null}
@@ -271,15 +300,20 @@ export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onP
  * markdown-textarea + live-preview fallback if the editor can't load. Owns its own draft + file
  * state; calls onSend(recipient, markdown, files, reset). Remount it (via key) per conversation so
  * the draft doesn't leak between threads. */
-export function Composer({ recipient, sendLabel, sending, onSend, initialText = '', draftKey = '' }) {
+export function Composer({ recipient, sendLabel, sending, onSend, initialText = '', draftKey = '', focusNonce = 0 }) {
   // Restore an in-progress draft for this conversation/compose (localStorage), or the passed initialText.
   const readDraft = () => { try { return draftKey ? (localStorage.getItem(draftKey) || '') : ''; } catch { return ''; } };
   const seeded = initialText || readDraft();   // an explicit suggested reply wins; else restore a draft
-  const [mode, setMode] = useState('rich');     // 'rich' = Toast UI; 'markdown' = fallback textarea
+  // 'rich' = Toast UI (desktop); 'simple' = a plain auto-growing textarea (mobile chat input, no toolbar/
+  // preview — a phone keyboard + heavy WYSIWYG toolbar is miserable); 'markdown' = the textarea+preview
+  // fallback when Toast UI can't load. Mobile opens straight into 'simple' so we never load Toast UI there.
+  const isNarrow = typeof window !== 'undefined' && window.matchMedia?.('(max-width: 760px)').matches;
+  const [mode, setMode] = useState(isNarrow ? 'simple' : 'rich');
   const [md, setMd] = useState(seeded);
   const [files, setFiles] = useState([]);
   const containerRef = useRef(null);
   const editorRef = useRef(null);
+  const taRef = useRef(null);
   const fileRef = useRef(null);
   const saveTimer = useRef(null);
   // Debounced auto-save of the draft (skipped when there's no key). Empty text clears the draft.
@@ -292,6 +326,34 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
   };
   const clearDraft = () => { try { if (draftKey) localStorage.removeItem(draftKey); } catch { /* noop */ } };
 
+  // A pasted / dropped image is added to the SAME file-attachment queue as the 📎 button (uploaded to
+  // storage + rendered as an image on the bubble) — never base64-inlined into the body, which would
+  // blow the server's 50k body limit. Wrap a bare clipboard Blob in a named File so uploadAttachment
+  // (which needs .name) and the file chip both work. Functional setFiles avoids a stale closure in the
+  // editor hook (created once at construction).
+  const addPastedImage = (blob) => {
+    if (!blob) return;
+    const ext = (blob.type && blob.type.split('/')[1]) || 'png';
+    const orig = (blob instanceof File && blob.name) ? blob.name : '';
+    // Clipboard images always arrive as a File generically named "image.png", so every paste would share
+    // that one name (and read as the same file in the thread). Give each pasted image a unique name; keep
+    // a genuine dropped filename as-is.
+    const generic = !orig || orig.toLowerCase() === 'image.png';
+    const name = generic ? `pasted-${Date.now()}-${Math.random().toString(36).slice(2, 7)}.${ext}` : orig;
+    const file = (blob instanceof File && !generic) ? blob : new File([blob], name, { type: blob.type || 'image/png' });
+    setFiles((prev) => [...prev, file]);
+  };
+  // Pull image files out of a clipboard/drop event; returns true if any were handled (caller preventDefaults).
+  const handleImagePaste = (e) => {
+    const items = Array.from(e.clipboardData?.items || e.dataTransfer?.items || []);
+    const imgs = items.filter((it) => it.kind === 'file' && (it.type || '').startsWith('image/'))
+      .map((it) => it.getAsFile()).filter(Boolean);
+    if (imgs.length === 0) return false;
+    e.preventDefault();
+    imgs.forEach(addPastedImage);
+    return true;
+  };
+
   useEffect(() => {
     if (mode !== 'rich') return undefined;
     let inst = null, cancelled = false;
@@ -310,6 +372,9 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
         // editorRef is set only AFTER construction, so the constructor's own change (initialValue) is
         // skipped — only real user edits auto-save the draft.
         events: { change: () => { if (editorRef.current) saveDraft(editorRef.current.getMarkdown()); } },
+        // Intercept pasted / dropped images: queue them as file attachments and DON'T call the callback,
+        // so Toast UI skips its default base64 <img> insertion into the markdown body.
+        hooks: { addImageBlobHook: (blob /* , callback, source */) => { addPastedImage(blob); } },
         toolbarItems: [
           ['bold', 'italic', 'strike'],
           ['ul', 'ol', 'task'],
@@ -338,24 +403,59 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
     }
   }, [mode, initialText]);
 
+  // Focus the composer when the parent bumps focusNonce (e.g. after clicking ↩ Reply on a bubble) so the
+  // user can start typing straight away instead of clicking into the editor. A short delay lets the reply
+  // bar / editor settle first. Skip the initial 0 so a fresh mount never steals focus / pops the keyboard.
+  useEffect(() => {
+    if (!focusNonce) return undefined;
+    const id = setTimeout(() => {
+      try {
+        if (mode === 'rich' && editorRef.current?.focus) editorRef.current.focus();
+        else if (taRef.current) taRef.current.focus();
+      } catch { /* noop */ }
+    }, 60);
+    return () => clearTimeout(id);
+    // Only focusNonce is the trigger; mode/refs are read at fire time.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusNonce]);
+
+  // Auto-grow the simple (mobile) textarea to fit its content, capped so it never eats the thread.
+  const autoGrow = (ta) => { if (!ta) return; ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, 132) + 'px'; };
+  // Size the simple textarea to any seeded draft on mount (and keep it 1 row when empty).
+  useEffect(() => { if (mode === 'simple') autoGrow(taRef.current); }, [mode]);
+
   const getText = () => (mode === 'rich' && editorRef.current) ? editorRef.current.getMarkdown() : md;
   const reset = () => {
     try { editorRef.current?.setMarkdown(''); } catch { /* noop */ }
     setMd(''); setFiles([]); if (fileRef.current) fileRef.current.value = '';
+    if (mode === 'simple' && taRef.current) taRef.current.style.height = 'auto';
     clearDraft();   // a sent message is no longer a draft
   };
   const submit = () => onSend(recipient, getText(), files, reset);
+  // Remove one queued attachment before sending (a mis-paste shouldn't force starting the message over).
+  // Also clear the hidden file input when the last chip goes, so re-picking the same file fires onChange.
+  const removeFile = (idx) => setFiles((prev) => {
+    const next = prev.filter((_, j) => j !== idx);
+    if (next.length === 0 && fileRef.current) fileRef.current.value = '';
+    return next;
+  });
 
   return html`
     <div class="inbox-composer">
       ${files.length > 0 ? html`<div class="inbox-file-chips">
-        ${files.map((f, i) => html`<span class="inbox-file-chip" key=${i}>📎 ${escHtml(f.name)}</span>`)}
+        ${files.map((f, i) => html`<span class="inbox-file-chip" key=${f.name + i}>📎 ${escHtml(f.name)}
+          <button class="inbox-bc-chip-x" title=${t('inbox.attachmentRemove')} onClick=${() => removeFile(i)}>✕</button></span>`)}
       </div>` : null}
       ${mode === 'rich'
         ? html`<div class="inbox-editor" ref=${containerRef}></div>`
+        : mode === 'simple'
+        ? html`<textarea class="inbox-textarea inbox-textarea--chat" rows="1" ref=${taRef} placeholder=${t('inbox.bodyPlaceholder')}
+            value=${md} onPaste=${handleImagePaste}
+            onInput=${(e) => { setMd(e.target.value); saveDraft(e.target.value); autoGrow(e.target); }}></textarea>`
         : html`<div class="inbox-md-fallback">
-            <textarea class="inbox-textarea" rows="3" placeholder=${t('inbox.bodyPlaceholder')}
-              value=${md} onInput=${(e) => { setMd(e.target.value); saveDraft(e.target.value); }}></textarea>
+            <textarea class="inbox-textarea" rows="3" ref=${taRef} placeholder=${t('inbox.bodyPlaceholder')}
+              value=${md} onPaste=${handleImagePaste}
+              onInput=${(e) => { setMd(e.target.value); saveDraft(e.target.value); }}></textarea>
             <div class="inbox-md-preview"><${Markdown} text=${md} /></div>
           </div>`}
       <div class="inbox-composer-bar">

package/dist/public/views/profile/inbox-tab/helpers.js

@@ -5,6 +5,7 @@
  *   pixel defense), tracked-state labels, attachment classification, the interactive-answer summary +
  *   poll tally, and the lazy Toast UI editor loader. Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.1.0 — 2026-07-17 — quoteSnippet(): one-line plain-text excerpt of a message body for reply-quotes.
  *   v1.0.0 — 2026-07-13 — Extracted from inbox-tab.js (max-file-lines)
  */
 import { t, getLocale } from '/js/i18n.js';
@@ -100,6 +101,17 @@ export function prepareBody(body, urlMap, expiredIds) {
   return out;
 }
 
+/** One-line plain-text excerpt of a message body for a reply-quote (images/code/markdown marks stripped). */
+export function quoteSnippet(body, max = 140) {
+  const s = String(body || '')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '🖼')
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/[*_`>#]+/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return s.length > max ? `${s.slice(0, max - 1)}…` : s;
+}
+
 /** Short label + tone for a Tracked Response state (used on the message badge + the list). */
 export function trackStateLabel(state) {
   switch (state) {

package/dist/public/views/profile/inbox-tab/panels.js

@@ -6,6 +6,11 @@
  *   (broadcast/poll results). Each is a presentational component driven entirely by props from InboxTab;
  *   the stateful container keeps all hooks. Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.2.0 — 2026-07-18 — Clicking ↩ Reply on a bubble now focuses the composer (via `onQuoteReply` +
+ *     `composerFocus` bump) so the cursor lands in the input; the ✕ cancel still uses the raw setter.
+ *   v1.1.0 — 2026-07-17 — Reply-to with quote: ThreadPanel resolves each message's `replyToId` to the
+ *     quoted original for its bubble (click scrolls + flashes it) and shows a dismissible "replying to"
+ *     bar above the composer while a quoted reply is being written.
  *   v1.0.0 — 2026-07-13 — Extracted from inbox-tab.js (max-file-lines)
  */
 import { h } from 'preact';
@@ -17,7 +22,7 @@ import { Markdown } from '/components/Markdown.js';
 import { PresenceDot } from '/components/PresenceDot.js';
 import { getSession } from '/js/services/auth.js';
 import { Avatar, MessageBubble, Composer, CommandBar, CommandFill, SchedulePanel } from './components.js';
-import { peerName, ownerKeyOf, isAgentPeer, ownerDisplayName, subThreadLabel, groupConversations, timeShort, dayKey, dayLabel, trackStateLabel, tallyPoll } from './helpers.js';
+import { peerName, ownerKeyOf, isAgentPeer, ownerDisplayName, subThreadLabel, groupConversations, timeShort, dayKey, dayLabel, trackStateLabel, tallyPoll, quoteSnippet } from './helpers.js';
 
 export function ListPanel({ requests, conversations, activeConv, peerDisplay, accept, block, openConversation }) {
   /** One conversation row. `nested` = inside a person group (labelled by the agent/thread, indented). */
@@ -95,8 +100,22 @@ export function ThreadPanel({
   schedOpen, setSchedOpen, cmdFill, agentCommands, sending, draftPrefill, prefillNonce, msgsRef,
   peerDisplay, showToast, toggleImportant, onTrackMsg, onParkMsg, openMessageAi, submitInteractiveAnswers,
   setMdViewer, openConversationAi, insertCommand, setCmdFill, cancelTracked, openRecord, startSuggestedReply, doSend,
+  replyQuote, setReplyQuote, onQuoteReply, composerFocus,
 }) {
   let lastDay = '';
+  // Reply-to quotes: resolve a message's `replyToId` to the original within the loaded page (a parent
+  // outside the page just renders without a quote). The sender label distinguishes you vs the peer.
+  const msgById = {};
+  for (const m of thread) msgById[m.id] = m;
+  const quoteSender = (q) => (q.direction === 'outbound' ? t('inbox.quoteYou') : peerDisplay(activeConv.peerGhii));
+  // Jump to the quoted original: scroll it into view inside the thread + flash it briefly.
+  const jumpTo = (id) => {
+    const el = document.getElementById(`inbox-msg-${id}`);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el.classList.add('inbox-row--flash');
+    setTimeout(() => el.classList.remove('inbox-row--flash'), 1400);
+  };
   // Map each interactive QUESTION message id → the answers reply that fulfils it, so an answered
   // question renders its read-only summary instead of the (already-used) form.
   const answersByQ = {};
@@ -122,7 +141,7 @@ export function ThreadPanel({
           ${viaAgentName ? html`<div class="inbox-thread-via">🤖 ${t('inbox.sentByAgent')} ${escHtml(viaAgentName)}</div>` : null}
           <div class="inbox-sub">${escHtml(activeConv.peerGhii)}</div>
         </div>
-        ${!viaAgentName ? html`<button class="btn-ghost btn-sm inbox-ai-btn" onClick=${openConversationAi} title=${t('inbox.ai.replyWithAi')}>✨ ${t('inbox.ai.replyWithAi')}</button>` : null}
+        ${!viaAgentName ? html`<button class="btn-ghost btn-sm inbox-ai-btn" onClick=${openConversationAi} title=${t('inbox.ai.replyWithAi')}>✨ <span class="inbox-ai-btn-label">${t('inbox.ai.replyWithAi')}</span></button>` : null}
         ${peerIsMyAgent && !viaAgentName ? html`<button class=${`btn-ghost btn-sm inbox-sched-btn${schedOpen ? ' inbox-sched-btn--on' : ''}`}
           onClick=${() => setSchedOpen(o => !o)} title=${t('inbox.schedTitle')}>📅</button>` : null}
       </div>
@@ -131,9 +150,13 @@ export function ThreadPanel({
         ${thread.map(m => {
           const dk = dayKey(m.createdAt);
           const showDay = dk !== lastDay; lastDay = dk;
+          // An interactive answer already summarizes its question in the body — a quote would duplicate it.
+          const quoted = (m.replyToId && m.interactive?.role !== 'answers') ? msgById[m.replyToId] : null;
           return html`
             ${showDay ? html`<div class="inbox-day" key=${'d' + m.id}><span>${dayLabel(m.createdAt)}</span></div>` : null}
             <${MessageBubble} key=${m.id + m.direction} msg=${m} mine=${m.direction === 'outbound'} urlMap=${urlMap}
+              domId=${`inbox-msg-${m.id}`} quoted=${quoted} quotedName=${quoted ? quoteSender(quoted) : ''} onJumpTo=${jumpTo}
+              onQuote=${(onQuoteReply && !activeConv.viaAgent) ? onQuoteReply : null}
               starred=${important.has(m.id)} onStar=${toggleImportant} onTrack=${onTrackMsg} onPark=${onParkMsg} onReplyAi=${openMessageAi} tracked=${trackedByMsg[m.id]}
               answeredWith=${m.interactive?.role === 'questions' ? answersByQ[m.id] : null}
               onAnswer=${submitInteractiveAnswers} submitting=${sending}
@@ -163,9 +186,16 @@ export function ThreadPanel({
         ? html`<div class="inbox-announce-note">🤖 ${(t('inbox.viaAgentReadonly') || 'Sent by your agent {agent} — view only.').replace('{agent}', viaAgentName)}</div>`
         : isAnnouncement
         ? html`<div class="inbox-announce-note">📢 ${t('inbox.announcementNote')}</div>`
-        : html`<${Composer} key=${'c-' + activeConv.conversationId + (draftPrefill ? '-d' + prefillNonce : '')} recipient=${activeConv.peerGhii}
+        : html`${replyQuote ? html`<div class="inbox-replybar">
+            <button class="inbox-replybar-main" onClick=${() => jumpTo(replyQuote.id)}>
+              <span class="inbox-replybar-label">↩ ${t('inbox.replyingTo')} ${escHtml(quoteSender(replyQuote))}</span>
+              <span class="inbox-replybar-text">${escHtml(quoteSnippet(replyQuote.body))}</span>
+            </button>
+            <button class="btn-ghost btn-sm" onClick=${() => setReplyQuote?.(null)} title=${t('inbox.quoteCancel')}>✕</button>
+          </div>` : null}
+          <${Composer} key=${'c-' + activeConv.conversationId + (draftPrefill ? '-d' + prefillNonce : '')} recipient=${activeConv.peerGhii}
             sendLabel=${t('inbox.reply')} sending=${sending} onSend=${doSend} initialText=${draftPrefill}
-            draftKey=${'aimeat.inbox.draft.' + activeConv.conversationId} />`}
+            focusNonce=${composerFocus} draftKey=${'aimeat.inbox.draft.' + activeConv.conversationId} />`}
     </div>`;
 }
 

package/dist/public/views/profile/inbox-tab/use-thread-ux.js

@@ -0,0 +1,104 @@
+/**
+ * @file public/views/profile/inbox-tab/use-thread-ux.js
+ * @description Thread-pane UX hooks for the profile Inbox tab: useThreadAutoScroll (jump to the
+ *   latest message on open / near-bottom follow / a single one-time jump when a NEW message arrives —
+ *   never a sticky pin) and useMobileComposerKeyboard (≤760px: publishes the on-screen keyboard's
+ *   height as --inbox-kb from visualViewport and scrolls the composer into view on focus).
+ *   Extracted from inbox-tab.js to satisfy max-file-lines.
+ * @usage import { useThreadAutoScroll, useMobileComposerKeyboard } from './inbox-tab/use-thread-ux.js';
+ * @version-history
+ *   v1.2.0 — 2026-07-19 — useThreadAutoScroll now suppresses the one-time new-message jump while the
+ *     composer is focused (near-bottom follow still applies). This lets the inbox reload the open thread
+ *     on EVERY 'messages' live-update — so incoming messages render immediately even while you're typing
+ *     a reply — without yanking the scroll/caret (the old fix instead skipped the whole reload).
+ *   v1.0.0 — 2026-07-17 — Extracted from inbox-tab.js (max-file-lines) alongside the new mobile
+ *     keyboard handling + one-time new-message auto-scroll.
+ *   v1.1.0 — 2026-07-18 — Rework useMobileComposerKeyboard(mode): MEASURE available height (body top →
+ *     visualViewport bottom) as `--inbox-avail` instead of the `dvh − keyboard` double-count that collapsed
+ *     the messenger on Android Chrome; drop the composer scrollIntoView(center) that left a dead gap.
+ */
+import { useEffect, useRef } from 'preact/hooks';
+
+/** Auto-scroll policy for the open thread: jump to the latest message when a thread is OPENED, follow
+ *  when the reader is already near the bottom, and when a genuinely NEW message arrives (last message
+ *  id changed) jump down ONCE — a single jump, not a sticky pin, so scrolling back up afterwards is
+ *  never fought. Content-only refreshes (same last message — receipts, url re-resolves) never move the
+ *  scroll. lastScrolledConvRef distinguishes a fresh open from an in-place update, and we wait for
+ *  content (thread.length) so an async load still lands at the bottom on open. */
+export function useThreadAutoScroll(msgsRef, mode, thread, activeConv) {
+  const lastScrolledConvRef = useRef(null);
+  const lastMsgIdRef = useRef(null);
+  useEffect(() => {
+    const el = msgsRef.current;
+    if (mode !== 'thread' || !el || thread.length === 0) return;
+    const convKey = activeConv?.peerGhii ?? activeConv?.id ?? null;
+    const lastId = thread[thread.length - 1]?.id ?? null;
+    const isNewOpen = lastScrolledConvRef.current !== convKey;
+    const hasNewMsg = !isNewOpen && lastMsgIdRef.current !== null && lastId !== lastMsgIdRef.current;
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 160;
+    // While you're typing a reply, a live-updated new message must still RENDER but must not yank the
+    // scroll out from under the caret — so suppress the one-time new-message jump when the composer is
+    // focused (near-bottom follow still applies: if you were already at the bottom you keep following).
+    const ae = typeof document !== 'undefined' ? document.activeElement : null;
+    const composing = ae instanceof HTMLElement && !!ae.closest('.inbox-composer');
+    if (isNewOpen || nearBottom || (hasNewMsg && !composing)) el.scrollTop = el.scrollHeight;
+    lastScrolledConvRef.current = convKey;
+    lastMsgIdRef.current = lastId;
+    // msgsRef is a stable ref object — the content deps below are the real triggers.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [thread, mode, activeConv]);
+}
+
+/** Mobile keyboard ergonomics — the reliable version. Rather than the fragile `dvh − keyboard` math (which
+ *  double-counted on Android Chrome, where dvh ALSO shrinks for the keyboard → the messenger collapsed and
+ *  left a big dead gap above the keyboard), we MEASURE the real space: from the top of `.inbox-body` down to
+ *  the bottom of the visual viewport (which excludes the keyboard on every platform), and publish it as
+ *  `--inbox-avail`. The ≤760px open-panel body height uses that, so the composer sits right on the keyboard
+ *  with the thread filling the rest — no void, no page-scroll jump. We deliberately do NOT scrollIntoView the
+ *  composer (that centered it and created the gap); instead we keep the message list pinned to the bottom.
+ *  Only active on mobile with a thread/compose panel open; otherwise the var is cleared and CSS falls back. */
+export function useMobileComposerKeyboard(mode) {
+  const syncRef = useRef(() => {});
+  useEffect(() => {
+    const vv = window.visualViewport;
+    const root = document.documentElement;
+    const isNarrow = () => window.matchMedia('(max-width: 760px)').matches;
+    const sync = () => {
+      const body = document.querySelector('.inbox-body');
+      if (!vv || !body || !isNarrow() || !body.classList.contains('inbox-body--panel')) {
+        root.style.removeProperty('--inbox-avail');
+        return;
+      }
+      // Distance from the body's top edge to the top of the visible (keyboard-excluded) area, then the
+      // remaining height below it. Clamp so a mid-animation reading can't collapse the pane.
+      const top = body.getBoundingClientRect().top - (vv.offsetTop || 0);
+      const avail = Math.max(220, Math.round(vv.height - top));
+      root.style.setProperty('--inbox-avail', `${avail}px`);
+    };
+    syncRef.current = sync;
+    const onFocusIn = (e) => {
+      if (!isNarrow()) return;
+      const el = e.target;
+      if (!(el instanceof HTMLElement) || !el.closest('.inbox-composer')) return;
+      // The keyboard animates in — re-measure as the viewport settles, then keep the latest messages in view.
+      setTimeout(sync, 120); setTimeout(sync, 360);
+      setTimeout(() => { const m = document.querySelector('.inbox-msgs'); if (m) m.scrollTop = m.scrollHeight; }, 380);
+    };
+    if (vv) { vv.addEventListener('resize', sync); vv.addEventListener('scroll', sync); }
+    window.addEventListener('resize', sync);
+    window.addEventListener('focusin', onFocusIn);
+    sync();
+    return () => {
+      if (vv) { vv.removeEventListener('resize', sync); vv.removeEventListener('scroll', sync); }
+      window.removeEventListener('resize', sync);
+      window.removeEventListener('focusin', onFocusIn);
+      root.style.removeProperty('--inbox-avail');
+    };
+  }, []);
+  // Re-measure when the panel opens/closes (mode change) — no viewport event fires on a pure route switch.
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => syncRef.current());
+    const t = setTimeout(() => syncRef.current(), 220);
+    return () => { cancelAnimationFrame(raf); clearTimeout(t); };
+  }, [mode]);
+}