aimeat 1.40.1 → 2.1.0

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

@@ -6,7 +6,29 @@
  *   chat.commands), SchedulePanel (own-agent scheduler), and ReplyWithAiPopover (TARGET-031). Each is
  *   self-contained (owns its own hooks). Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.8.0 — 2026-07-21 — MessageBubble renders link-preview cards under the body (MessageLinkPreviews),
+ *     gated by the `showLinkPreviews` prop (the persisted thread-head toggle).
  *   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.
+ *   v1.6.0 — 2026-07-19 — Composer gets an expand toggle (⤢/⤡): enlarges the editor to ~60% of the
+ *     viewport so long/formatted drafts are fully visible. Rich mode resizes via Toast UI `setHeight`;
+ *     the markdown fallback + simple textarea grow via the `.inbox-composer--tall` class / lifted cap.
+ *   v1.7.0 — 2026-07-19 — ConversationToNotebookPopover: capture a whole thread (with images) into the
+ *     Notebook via three modes — server-side AI summary (owner's key), copy-prompt (own chat), or raw.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
@@ -15,10 +37,11 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { Markdown } from '/components/Markdown.js';
+import { MessageLinkPreviews } from '/components/LinkPreview.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 +251,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, showLinkPreviews }) {
   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 +280,12 @@ 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>
+        ${showLinkPreviews ? html`<${MessageLinkPreviews} msg=${msg} />` : null}
         ${msg.interactive?.role === 'questions' ? (
           answeredWith
             ? html`<${InteractiveAnswered} spec=${msg.interactive} answers=${answeredWith.answers || {}} />`
@@ -256,7 +294,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 +309,22 @@ 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);
+  // Temporarily enlarge the editor (~60% of the viewport) so long/formatted drafts are fully visible.
+  const [expanded, setExpanded] = useState(false);
   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 +337,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 +383,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,30 +414,85 @@ 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]);
+
+  // Resize the Toast UI editor when the expand toggle flips (rich mode sets its own inline height via
+  // JS, so a CSS class can't reach it — the fallback/simple textareas are sized by `.inbox-composer--tall`
+  // in CSS instead). `160px` matches the construction default.
+  useEffect(() => {
+    if (mode !== 'rich' || !editorRef.current?.setHeight) return;
+    const tall = typeof window !== 'undefined' ? Math.round(window.innerHeight * 0.6) : 400;
+    try { editorRef.current.setHeight(expanded ? tall + 'px' : '160px'); } catch { /* noop */ }
+  }, [expanded, mode]);
+
+  // Auto-grow the simple (mobile) textarea to fit its content, capped so it never eats the thread. When
+  // expanded, the cap lifts to ~60vh so a long draft is fully visible.
+  const autoGrow = (ta) => {
+    if (!ta) return;
+    const cap = expanded && typeof window !== 'undefined' ? Math.round(window.innerHeight * 0.6) : 132;
+    ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, cap) + 'px';
+  };
+  // Size the simple textarea to any seeded draft on mount (and keep it 1 row when empty); re-fit when the
+  // expand cap changes.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { if (mode === 'simple') autoGrow(taRef.current); }, [mode, expanded]);
+
   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">
+    <div class="inbox-composer ${expanded ? 'inbox-composer--tall' : ''}">
       ${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">
-        <label class="inbox-attach-btn" title=${t('inbox.attach')}>
-          📎<input ref=${fileRef} type="file" multiple hidden onChange=${(e) => setFiles(Array.from(e.target.files || []))} />
-        </label>
+        <div class="inbox-bar-left">
+          <label class="inbox-attach-btn" title=${t('inbox.attach')}>
+            📎<input ref=${fileRef} type="file" multiple hidden onChange=${(e) => setFiles(Array.from(e.target.files || []))} />
+          </label>
+          <button type="button" class="inbox-attach-btn" title=${expanded ? t('inbox.collapse') : t('inbox.expand')}
+            aria-pressed=${expanded} onClick=${() => setExpanded((v) => !v)}>${expanded ? '⤡' : '⤢'}</button>
+        </div>
         <button class="btn-primary btn-sm" disabled=${sending || !recipient} onClick=${submit}>
           ${sending ? t('inbox.sending') : sendLabel}
         </button>
@@ -490,3 +621,87 @@ export function ReplyWithAiPopover({ title, build, onClose, showToast }) {
       </div>
     </div>`;
 }
+
+/* ── Conversation → Notebook — capture a WHOLE thread (with its images) into the notebook for later
+ *    filing/enrichment into a workspace. Three modes, all landing in parkConversationToNotebook:
+ *      ✨ ai   — summarize server-side with the owner's own OpenRouter key (runServerSummary), edit, park.
+ *      📋 copy — copy the summary prompt into the owner's own AI chat, paste the result back, park.
+ *      📥 raw  — park the whole chain (text + images) as-is; enrich it later in the Notebook.
+ *    The parent (InboxTab) owns the async work (AI call + park + toasts) via the passed callbacks. ── */
+export function ConversationToNotebookPopover({ title, promptText, runServerSummary, parkConversation, onClose, showToast }) {
+  const [mode, setMode] = useState('ai');       // 'ai' | 'copy' | 'raw'
+  const [copied, setCopied] = useState(false);
+  const [aiSummary, setAiSummary] = useState('');
+  const [pasted, setPasted] = useState('');
+  const [running, setRunning] = useState(false);
+  const [parking, setParking] = useState(false);
+
+  const copy = async () => {
+    try {
+      if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(promptText);
+      else { const ta = document.createElement('textarea'); ta.value = promptText; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); }
+      setCopied(true); setTimeout(() => setCopied(false), 1800);
+      showToast?.(t('inbox.ai.copied'));
+    } catch { showToast?.(t('inbox.failed'), true); }
+  };
+
+  const genSummary = async () => {
+    setRunning(true);
+    try {
+      const s = await runServerSummary();
+      if (s && s.trim()) setAiSummary(s.trim());
+      else showToast?.(t('inbox.notebook.summaryEmpty'), true);
+    } catch (e) { showToast?.(e?.message || t('inbox.failed'), true); }
+    finally { setRunning(false); }
+  };
+
+  const doPark = async (summary) => {
+    setParking(true);
+    try { await parkConversation({ summary: summary || '' }); showToast?.(t('inbox.notebook.parked')); onClose(); }
+    catch (e) { showToast?.(e?.message || t('inbox.failed'), true); setParking(false); }
+  };
+
+  return html`
+    <div class="inbox-ai-overlay" onClick=${onClose}>
+      <div class="inbox-ai-modal" onClick=${(e) => e.stopPropagation()}>
+        <div class="inbox-ai-head">
+          <span class="inbox-ai-title">📓 ${title}</span>
+          <button class="btn-ghost btn-sm" onClick=${onClose} title=${t('inbox.close')}>✕</button>
+        </div>
+        <div class="inbox-ai-modes">
+          <button class=${`inbox-ai-mode${mode === 'ai' ? ' inbox-ai-mode--on' : ''}`} onClick=${() => setMode('ai')}>✨ ${t('inbox.notebook.modeAi')}</button>
+          <button class=${`inbox-ai-mode${mode === 'copy' ? ' inbox-ai-mode--on' : ''}`} onClick=${() => setMode('copy')}>📋 ${t('inbox.notebook.modeCopy')}</button>
+          <button class=${`inbox-ai-mode${mode === 'raw' ? ' inbox-ai-mode--on' : ''}`} onClick=${() => setMode('raw')}>📥 ${t('inbox.notebook.modeRaw')}</button>
+        </div>
+        ${mode === 'ai' ? html`
+          <div class="inbox-ai-hint">${t('inbox.notebook.hintAi')}</div>
+          ${!aiSummary ? html`
+            <div class="inbox-ai-actions">
+              <button class="btn-primary btn-sm" disabled=${running} onClick=${genSummary}>${running ? '… ' + t('inbox.notebook.summarizing') : '✨ ' + t('inbox.notebook.genSummary')}</button>
+            </div>`
+          : html`
+            <textarea class="inbox-ai-text" rows="12" value=${aiSummary} onInput=${(e) => setAiSummary(e.target.value)}></textarea>
+            <div class="inbox-ai-actions">
+              <button class="btn-ghost btn-sm" disabled=${running} onClick=${genSummary}>${running ? '…' : '↻ ' + t('inbox.notebook.regen')}</button>
+              <button class="btn-primary btn-sm" disabled=${parking} onClick=${() => doPark(aiSummary)}>${parking ? '…' : '📓 ' + t('inbox.notebook.park')}</button>
+            </div>`}
+        ` : mode === 'copy' ? html`
+          <div class="inbox-ai-hint">${t('inbox.notebook.hintCopy')}</div>
+          <textarea class="inbox-ai-text" readOnly rows="8" value=${promptText}></textarea>
+          <div class="inbox-ai-actions">
+            <button class="btn-primary btn-sm" onClick=${copy}>${copied ? '✓ ' + t('inbox.ai.copied') : '📋 ' + t('inbox.ai.copy')}</button>
+          </div>
+          <div class="inbox-ai-hint">${t('inbox.notebook.pasteHint')}</div>
+          <textarea class="inbox-ai-text" rows="8" placeholder=${t('inbox.notebook.pastePh')} value=${pasted} onInput=${(e) => setPasted(e.target.value)}></textarea>
+          <div class="inbox-ai-actions">
+            <button class="btn-primary btn-sm" disabled=${parking || !pasted.trim()} onClick=${() => doPark(pasted)}>${parking ? '…' : '📓 ' + t('inbox.notebook.park')}</button>
+          </div>
+        ` : html`
+          <div class="inbox-ai-hint">${t('inbox.notebook.hintRaw')}</div>
+          <div class="inbox-ai-actions">
+            <button class="btn-primary btn-sm" disabled=${parking} onClick=${() => doPark('')}>${parking ? '…' : '📥 ' + t('inbox.notebook.parkRaw')}</button>
+          </div>
+        `}
+      </div>
+    </div>`;
+}

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

@@ -5,10 +5,37 @@
  *   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.2.0 — 2026-07-21 — resolveThreadAttachmentUrls(): resolve non-inline attachment URLs for a loaded
+ *     thread (reusing the previous conversation's cache), extracted from inbox-tab loadThread.
+ *   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';
 
+/**
+ * Resolve presigned URLs for a thread's non-inline attachments, reusing already-resolved URLs from the
+ * SAME conversation's previous cache (a refresh/new message must not re-download every existing image).
+ * Keyed by `${messageId}::${attachmentId}` (per-message ids repeat across messages). Inbound resolves the
+ * recipient's duplicated local copy; outbound resolves the original. `resolveUrl` = messages.attachmentUrl.
+ * Returns { convId, map } to store as the new cache.
+ */
+export async function resolveThreadAttachmentUrls(msgs, conversationId, prevCache, resolveUrl) {
+  const prev = prevCache?.convId === conversationId ? (prevCache.map || {}) : {};
+  const map = {};
+  await Promise.all(msgs.flatMap(m => (m.attachments || [])
+    .filter(a => !a.inline)
+    .map(async a => {
+      const uk = `${m.id}::${a.id}`;
+      if (prev[uk]) { map[uk] = prev[uk]; return; }
+      const key = (a.mode === 'duplicate' && a.localKey) ? a.localKey
+        : (m.direction === 'outbound' && a.storageKey) ? a.storageKey : null;
+      if (!key) return;
+      const u = await resolveUrl(key).catch(() => null);
+      if (u) map[uk] = u;
+    })));
+  return { convId: conversationId, map };
+}
+
 /* Lazy-load the vendored Toast UI Editor (MIT, /lib/toastui/) — the same editor the workspace
  * document space uses, so composing a message feels like editing a document (Markdown⇄WYSIWYG).
  * ~520KB, so it stays out of the main bundle and loads only when the Inbox composer mounts. */
@@ -100,6 +127,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,16 @@
  *   (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.4.0 — 2026-07-21 — ThreadPanel head: "Show all messages / Last 50" toggle (threadAll/
+ *     toggleThreadAll), shown once a thread has ≥50 messages. Threads default to the full history;
+ *     the toggle collapses to the newest 50.
+ *   v1.3.0 — 2026-07-21 — ThreadPanel: link-preview toggle button in the head (showLinkPreviews /
+ *     toggleLinkPreviews) + passes the flag down to each MessageBubble.
+ *   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 +27,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). */
@@ -94,9 +104,24 @@ export function ThreadPanel({
   activeConv, thread, urlMap, important, trackedByMsg, awaitingForConv, awaitingDrafts,
   schedOpen, setSchedOpen, cmdFill, agentCommands, sending, draftPrefill, prefillNonce, msgsRef,
   peerDisplay, showToast, toggleImportant, onTrackMsg, onParkMsg, openMessageAi, submitInteractiveAnswers,
-  setMdViewer, openConversationAi, insertCommand, setCmdFill, cancelTracked, openRecord, startSuggestedReply, doSend,
+  setMdViewer, openConversationAi, openConversationNotebook, insertCommand, setCmdFill, cancelTracked, openRecord, startSuggestedReply, doSend,
+  replyQuote, setReplyQuote, onQuoteReply, composerFocus, showLinkPreviews, toggleLinkPreviews,
+  threadAll, toggleThreadAll,
 }) {
   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 +147,16 @@ 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}
+        ${!viaAgentName ? html`<button class="btn-ghost btn-sm inbox-ai-btn" onClick=${openConversationNotebook} title=${t('inbox.notebook.toNotebook')}>📓 <span class="inbox-ai-btn-label">${t('inbox.notebook.toNotebookShort')}</span></button>` : null}
+        <button class=${`btn-ghost btn-sm inbox-linkprev-toggle${showLinkPreviews ? ' inbox-linkprev-toggle--on' : ''}`}
+          aria-pressed=${!!showLinkPreviews} onClick=${toggleLinkPreviews}
+          title=${showLinkPreviews ? t('inbox.linkPreview.hideAll') : t('inbox.linkPreview.showAll')}>
+          <span class="inbox-ai-btn-label">${t('inbox.linkPreview.label')}</span></button>
+        ${(thread.length >= 50) ? html`<button class=${`btn-ghost btn-sm inbox-linkprev-toggle${threadAll ? ' inbox-linkprev-toggle--on' : ''}`}
+          aria-pressed=${!!threadAll} onClick=${toggleThreadAll}
+          title=${threadAll ? t('inbox.thread.showRecent') : t('inbox.thread.showAll')}>
+          <span class="inbox-ai-btn-label">${threadAll ? t('inbox.thread.showRecent') : t('inbox.thread.showAll')}</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,12 +165,16 @@ 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}
+              onAnswer=${submitInteractiveAnswers} submitting=${sending} showLinkPreviews=${showLinkPreviews}
               onOpenMarkdown=${(url, name) => setMdViewer({ url, name })} />`;
         })}
       </div>
@@ -163,9 +201,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,121 @@
+/**
+ * @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.3.0 — 2026-07-21 — Add useLinkPreviewToggle: persisted global on/off for the message link-preview
+ *     cards (default ON); the ThreadPanel head button flips it.
+ *   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, useState } from 'preact/hooks';
+
+const LINK_PREVIEWS_KEY = 'aimeat.inbox.linkPreviews';
+
+/** Persisted global toggle for the link-preview cards (default ON). Returns the flag + a toggler that
+ *  writes the choice to localStorage. Per-card dismissal is owned separately by /components/LinkPreview.js. */
+export function useLinkPreviewToggle() {
+  const [showLinkPreviews, setShow] = useState(() => {
+    try { return localStorage.getItem(LINK_PREVIEWS_KEY) !== 'off'; } catch { return true; }
+  });
+  const toggleLinkPreviews = () => setShow((v) => {
+    try { localStorage.setItem(LINK_PREVIEWS_KEY, v ? 'off' : 'on'); } catch { /* quota */ }
+    return !v;
+  });
+  return { showLinkPreviews, toggleLinkPreviews };
+}
+
+/** 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]);
+}