aimeat 1.40.1 → 2.1.0

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

@@ -10,31 +10,51 @@
  *   Re-fetches on SSE updates.
  * @structure InboxTab (default, stateful container) · panels (ListPanel/ThreadPanel/TrackedPanel/ResultsPanel
  *   in ./inbox-tab/panels.js) · sub-components (Composer/MessageBubble/ReplyWithAiPopover/… in
- *   ./inbox-tab/components.js) · pure helpers (./inbox-tab/helpers.js)
+ *   ./inbox-tab/components.js) · pure helpers (./inbox-tab/helpers.js) · thread UX hooks
+ *   (./inbox-tab/use-thread-ux.js)
  * @usage Lazy-loaded profile tab; registered in profile.js TABS as id `messages`.
  * @version-history
+ *   v1.25.0 -- 2026-07-21 -- Thread history is no longer capped at the newest 50: threads open showing
+ *     their FULL history by default (getConversation(all)); a header "Show last 50 / all" toggle
+ *     (threadAll) collapses/expands. loadThread's attachment-URL resolution extracted to
+ *     helpers.resolveThreadAttachmentUrls.
+ *   v1.24.0 -- 2026-07-19 -- Conversation → Notebook (📓 on the thread head next to ✨): summarize the
+ *     whole thread — with its images — and park it into the Notebook for filing/enrichment. Three modes:
+ *     server-side AI summary (owner's OpenRouter key, vision-aware), copy-prompt (own chat), or raw.
+ *   v1.23.1 -- 2026-07-19 -- Fix "badge shows N new but the open thread never updates": a 'messages'
+ *     live-update now ALWAYS reloads the open thread (dropped the isComposingInThread guard that skipped
+ *     the whole reload while an editable was focused, so incoming messages stayed invisible until
+ *     send/reopen). Scroll-yank-while-typing is handled in useThreadAutoScroll instead (css/use-thread-ux v1.2.0).
+ *   v1.23.0 -- 2026-07-18 -- ↩ Reply on a bubble focuses the composer (`composerFocus`→Composer.focusNonce);
+ *     root gets `inbox--panel` so ≤760px drops the section header for a near-full-viewport thread (css v1.4.0).
+ *   v1.22.0 -- 2026-07-17 -- Reply-to with quote (↩ on a bubble quotes the message into the reply via
+ *     `reply_to`; bubbles render their quoted original) + mobile thread ergonomics: the messenger shrinks
+ *     above the on-screen keyboard (visualViewport → --inbox-kb), focusing the composer scrolls it into
+ *     view, and a NEW message auto-scrolls the thread down once (a single jump — scrolling back up is
+ *     never fought). Drops the stale ≤760px `.inbox-msgs{max-height:50vh}` cap from the old stacked layout.
+ *   v1.21.0 -- 2026-07-17 -- Mobile single-pane on ≤760px: shows the list OR an open thread/composer
+ *     full-width (mode!=='idle' ⇒ `.inbox-body--panel`) with a ← Back button. Desktop two-pane unchanged.
+ *   v1.20.1 -- 2026-07-17 -- Fix images bleeding between messages: attachment url map keyed by `msgId::attId` (per-message ids at0/at1… repeat across messages).
+ *   v1.20.0 -- 2026-07-16 -- Compose "to" field is the shared ContactPicker (contacts + directory
+ *     suggestions + email resolve, valueMode 'full'); the datalist remains for the broadcast picker.
+ *   v1.19.0 -- 2026-07-16 -- Mount folds the 6-request fan-out into ONE GET /v1/messages/overview
+ *     (MessagesInboxService composite); interactive refreshes keep the individual loaders. Falls back to
+ *     the per-endpoint loaders if the composite fails. (Phase 4 slice 1 — frontend half.)
  *   v1.18.0 -- 2026-07-13 -- Split for max-file-lines: pure helpers → ./inbox-tab/helpers.js, presentational
  *     sub-components → ./inbox-tab/components.js, and the render panels (list/thread/tracked/results) →
  *     ./inbox-tab/panels.js as prop-driven components. Behavior/hooks unchanged; InboxTab keeps all state.
- *   v1.17.0 -- 2026-07-12 -- Owner-aggregation: the list now also shows conversations one of the owner's
- *     OWN agents had with external people (a DM the agent sent from its own inbox), tagged `viaAgent` and
- *     labelled "via <agent>". These open READ-ONLY (banner + no composer; no read receipt), read under the
- *     agent via GET conversations/:id?agent=<gaii>. Backend aggregates only this owner's agents.
- *   v1.16.0 -- 2026-07-12 -- Peer display names (TARGET-031 part A): thread head, conversation list, group
- *     headers and requests now show the peer's display name with the login handle in parens — "Kalle (kkk)"
- *     — resolved once per peer (agents via /v1/agents/:gaii, humans via /v1/ghii/:ghii, both public) and
- *     cached; federated peers not in the local store keep the bare handle.
- *   v1.15.0 -- 2026-07-12 -- Reply with AI (TARGET-031): a ✨ action on the thread head (whole conversation)
- *     and on every message bubble hands the conversation/message to the user's OWN AI chat via a popover —
- *     COPY mode (a self-contained prompt to paste into any AI chat) or MCP mode (an AI with the AIMEAT MCP
- *     reads the thread via aimeat_dm_thread, researches inside AIMEAT, drafts, and sends via aimeat_dm_send
- *     after approval). Prompt text lives in /js/services/messages-ai-prompts.js.
+ *   v1.17.0 -- 2026-07-12 -- Owner-aggregation: the list also shows conversations one of the owner's OWN
+ *     agents had with external people (tagged `viaAgent`, labelled "via <agent>"), opened READ-ONLY (no
+ *     composer/receipt) via GET conversations/:id?agent=<gaii>.
+ *   v1.16.0 -- 2026-07-12 -- Peer display names (TARGET-031 part A): thread head / list / group headers /
+ *     requests show "display name (handle)" — "Kalle (kkk)" — resolved once per peer (agents via
+ *     /v1/agents/:gaii, humans via /v1/ghii/:ghii) and cached; federated peers keep the bare handle.
+ *   v1.15.0 -- 2026-07-12 -- Reply with AI (TARGET-031): ✨ on the thread head + each bubble hands the
+ *     conversation/message to the user's own AI chat (COPY prompt or MCP mode); prompts in /js/services/messages-ai-prompts.js.
  *   v1.14.0 -- 2026-06-23 -- Per-message 📓 action parks a message straight into the notebook for later
  *     processing (instant copy via parkMessageToNotebook — keeps the source link + reply intent; no AI step).
- *   v1.13.0 -- 2026-06-23 -- Agent capabilities in chat: (A) a peer agent's public `chat.commands` render
- *     as fill-in command chips above the composer — pick one, fill the params, the filled template drops
- *     into the composer to review + send; (B) for the human's OWN agents, a 📅 schedule panel lists the
- *     agent's scheduled tasks and creates a recurring agent_task (node scheduler scoped to the agent).
+ *   v1.13.0 -- 2026-06-23 -- Agent capabilities in chat: (A) a peer agent's `chat.commands` render as
+ *     fill-in command chips above the composer; (B) a 📅 schedule panel for the human's OWN agents (recurring agent_task).
  *   v1.12.1 -- 2026-06-23 -- Operator broadcast audience is now a select: All node users OR All federation
  *     users (genesis operator → every owner across the federation; delegated per-peer fan-out server-side).
  *   v1.12.0 -- 2026-06-23 -- Operator broadcast: an operator sees an "📣 All node users" audience in the
@@ -50,22 +70,17 @@
  *     (questions, options, multi/Other/required) that fans out an interactive AskUserQuestion to the
  *     audience; a Results view aggregates per-option tallies + delivered/read/answered counts. Sent
  *     broadcasts are tracked in localStorage so results stay re-accessible (📊 Results).
- *   v1.8.1 -- 2026-06-23 -- Perf: cache resolved attachment URLs per conversation. A refresh / new message
- *     reused to re-resolve EVERY attachment (fresh presigned URL each time → new <img src> → the whole
- *     image gallery re-downloaded on every send/reply — hundreds of MB on an image-heavy thread). Now only
- *     not-yet-resolved attachments are fetched; existing URLs stay stable so the browser doesn't re-fetch.
+ *   v1.8.1 -- 2026-06-23 -- Perf: cache resolved attachment URLs per conversation so a refresh / new
+ *     message only fetches not-yet-resolved attachments (was re-downloading every image — hundreds of MB).
  *   v1.8.0 -- 2026-06-23 -- Send-to-many (broadcast): a 📢 Broadcast compose with a recipient-chip picker
  *     (+ Share Group audience) and a mode toggle — Message (repliable) vs Announcement (read-only). An
  *     announcement thread hides the reply composer for the recipient.
  *   v1.7.4 -- 2026-06-23 -- Recipient suggestions when composing: the "to" field autocompletes (datalist)
  *     with your own agents (GAIIs, labelled) + everyone you have a thread with — no retyping long GAIIs.
- *   v1.7.3 -- 2026-06-23 -- Show an AGENT's own presence dot on its conversation row (a nested agent row
- *     now renders <PresenceDot> for the agent GAII — connected = available, recently-seen = away, else
- *     offline — instead of nothing). The owner group header still shows the human's presence.
- *   v1.7.2 -- 2026-06-23 -- Delivery ticks now distinguish delivered from sent: delivered = ✓✓ (grey,
- *     "reached the mailbox" — incl. agent threads, which never send a read receipt), read = ✓✓ coloured,
- *     sent = ✓, queued = clock. Previously delivered rendered as a single ✓ identical to sent, so an
- *     agent DM never showed a "got there" confirmation.
+ *   v1.7.3 -- 2026-06-23 -- Show an AGENT's own presence dot on its nested conversation row (connected =
+ *     available, recently-seen = away, else offline); the owner group header still shows the human's.
+ *   v1.7.2 -- 2026-06-23 -- Delivery ticks distinguish delivered (✓✓ grey) / read (✓✓ coloured) / sent (✓)
+ *     / queued (clock) — previously delivered looked identical to sent (agent DMs never send a read receipt).
  *   v1.7.1 -- 2026-06-23 -- Fix thread-splitting: a reply in an open thread now pins to that
  *     conversationId. Without it, replying in a SUBJECT thread fell back to the default per-pair thread,
  *     so the reply spawned a brand-new thread named after the agent (e.g. "concierge") and the subject
@@ -119,10 +134,13 @@ import { firstLine } from './notebook-helpers.js';
 import { apiGet } from '/js/api.js';
 import { getSession } from '/js/services/auth.js';
 import { TrackResponseModal } from './track-response-modal.js';
-import { buildConversationReplyPrompt, buildMessageReplyPrompt, peerLabel } from '/js/services/messages-ai-prompts.js';
-import { peerName, ownerKeyOf, isAgentPeer, buildAnswerSummary } from './inbox-tab/helpers.js';
-import { Composer, PollBuilder, MarkdownViewer, ReplyWithAiPopover } from './inbox-tab/components.js';
+import { peerLabel } from '/js/services/messages-ai-prompts.js';
+import { peerName, ownerKeyOf, isAgentPeer, buildAnswerSummary, resolveThreadAttachmentUrls } from './inbox-tab/helpers.js';
+import { Composer, PollBuilder, MarkdownViewer, ReplyWithAiPopover, ConversationToNotebookPopover } from './inbox-tab/components.js';
+import { buildConversationReplyProps, buildMessageReplyProps, buildConversationNotebookProps } from './inbox-tab/ai-actions.js';
 import { ListPanel, ThreadPanel, TrackedPanel, ResultsPanel } from './inbox-tab/panels.js';
+import { useThreadAutoScroll, useMobileComposerKeyboard, useLinkPreviewToggle } from './inbox-tab/use-thread-ux.js';
+import { ContactPicker } from '/components/ContactPicker.js';
 
 export default function InboxTab({ showToast }) {
   const [requests, setRequests] = useState([]);
@@ -130,8 +148,9 @@ export default function InboxTab({ showToast }) {
   const [activeConv, setActiveConv] = useState(null);     // { conversationId, peerGhii }
   const [thread, setThread] = useState([]);
   const [urlMap, setUrlMap] = useState({});
-  const [mdViewer, setMdViewer] = useState(null);         // { url, name } — open markdown attachment viewer
+  const { showLinkPreviews, toggleLinkPreviews } = useLinkPreviewToggle(); const [mdViewer, setMdViewer] = useState(null); // link-preview toggle (persisted) + markdown viewer state
   const [aiReply, setAiReply] = useState(null);           // { title, build } — Reply with AI popover (TARGET-031)
+  const [nbConv, setNbConv] = useState(null);             // { title, promptText, runServerSummary, parkConversation } — Conversation → Notebook popover
   const [peerNames, setPeerNames] = useState({});         // id (GHII/GAII or owner@node) → resolved display name
   const peerNamesRef = useRef({});                        // dedup bookkeeping: an id present here was already looked up
   const [composeSubject, setComposeSubject] = useState(''); // optional subject → opens a new topic thread
@@ -154,6 +173,8 @@ export default function InboxTab({ showToast }) {
   const [important, setImportant] = useState(new Set());  // message ids flagged important (Tier 1)
   const [trackedList, setTrackedList] = useState([]);     // active Tracked Responses (Tier 2)
   const [trackMsg, setTrackMsg] = useState(null);         // message being tracked (opens modal)
+  const [replyQuote, setReplyQuote] = useState(null);     // message being quoted-replied to (↩)
+  const [composerFocus, setComposerFocus] = useState(0);  // bump → focus the composer (e.g. after ↩ Reply)
   const [draftPrefill, setDraftPrefill] = useState('');   // suggested reply / filled command seeded into the composer
   const [prefillNonce, setPrefillNonce] = useState(0);    // bump to force a composer remount on each insert
   const [agentCommands, setAgentCommands] = useState(null); // peer agent's chat.commands (Phase A)
@@ -182,6 +203,27 @@ export default function InboxTab({ showToast }) {
     setTrackedList(trs.filter(tr => tr.state !== 'cancelled' && !dismissedRef.current.has(tr.id)));
   }, []);
 
+  // Inbox mount: ONE composite call (GET /v1/messages/overview) seeds all six sections — requests +
+  // conversations + important flags + tracked responses + the owner's agents + share groups — instead of
+  // the 6-request fan-out. Interactive refreshes (live-update, post-send) keep using loadLists (the 4
+  // lists); a composite failure falls back to the individual loaders so the inbox still populates.
+  const loadOverview = useCallback(async () => {
+    const r = await apiGet('/v1/messages/overview').catch(() => null);
+    const d = r?.data;
+    if (!d) {
+      loadLists();
+      agentsSvc.listAgents().then(a => setMyAgents(a || [])).catch(() => {});
+      apiGet('/v1/groups').then(gr => setMyGroups(gr?.data?.groups || [])).catch(() => {});
+      return;
+    }
+    setRequests(d.requests || []);
+    setConversations(d.conversations || []);
+    setImportant(new Set(d.important || []));
+    setTrackedList((d.tracked || []).filter(tr => tr.state !== 'cancelled' && !dismissedRef.current.has(tr.id)));
+    setMyAgents(d.agents || []);
+    setMyGroups(d.groups || []);
+  }, [loadLists]);
+
   // Cheap, single-request refresh of ONLY the Tracked Responses list. Used for 'agent-messages'
   // live events: on a busy node 40+ agents emit agent-message changes every second, and those only
   // affect tracked responses — reloading the whole inbox (conversations + flags + open thread +
@@ -291,37 +333,28 @@ export default function InboxTab({ showToast }) {
   // markRead=true ONLY when the user opens the conversation. Marking read POSTs a receipt which itself
   // emits a 'messages' change → SSE → live refresh; doing it on every live refresh creates a
   // self-sustaining request loop. So live refreshes reload the thread WITHOUT marking read.
+  // Per-conversation "show all vs newest 50" mode. Defaults to ALL (show the full history on open so
+  // nothing looks lost); the header toggle collapses to the newest 50. A ref (read at call time) keeps
+  // loadThread []-memoized; the state drives the button. Re-defaults to ALL whenever a thread opens.
+  const [threadAll, setThreadAll] = useState(true);
+  const threadAllRef = useRef(true); threadAllRef.current = threadAll;
   const loadThread = useCallback(async (conv, markRead = false) => {
     if (!conv) return;
-    const msgs = (await messages.getConversation(conv.conversationId, conv.viaAgent).catch(() => [])).slice().reverse();
+    // threadAllRef: false = newest 50 (fast default); true = the FULL history (header "All messages" toggle).
+    const msgs = (await messages.getConversation(conv.conversationId, conv.viaAgent, threadAllRef.current).catch(() => [])).slice().reverse();
     setThread(msgs);
-    // REUSE already-resolved attachment URLs for the SAME conversation: a refresh / new message must NOT
-    // re-resolve (and thus re-download via a fresh presigned URL) every existing image. Only fetch URLs
-    // for attachments we haven't resolved yet. A different conversation starts a fresh cache.
-    const sameConv = urlCacheRef.current.convId === conv.conversationId;
-    const prev = sameConv ? urlCacheRef.current.map : {};
-    const map = {};
-    await Promise.all(msgs.flatMap(m => (m.attachments || [])
-      .filter(a => !a.inline)
-      .map(async a => {
-        if (prev[a.id]) { map[a.id] = prev[a.id]; return; } // keep the stable URL → browser won't re-fetch
-        // Inbound: only the recipient's duplicated local copy is fetchable (after accept). Outbound:
-        // the sender owns the original storage key, so resolve that — you can view/download what you sent.
-        const key = (a.mode === 'duplicate' && a.localKey) ? a.localKey
-          : (m.direction === 'outbound' && a.storageKey) ? a.storageKey : null;
-        if (!key) return;
-        const u = await messages.attachmentUrl(key).catch(() => null);
-        if (u) map[a.id] = u;
-      })));
-    urlCacheRef.current = { convId: conv.conversationId, map };
-    setUrlMap(map);
+    // Reuse already-resolved attachment URLs for the same conversation (a refresh must not re-download
+    // every image); a different conversation starts a fresh cache.
+    const cache = await resolveThreadAttachmentUrls(msgs, conv.conversationId, urlCacheRef.current, messages.attachmentUrl);
+    urlCacheRef.current = cache;
+    setUrlMap(cache.map);
     // Agent-owned ("via <agent>") threads are read-only for the owner — don't post a read receipt as them.
     if (markRead && !conv.viaAgent) await messages.markConversationRead(conv.conversationId).catch(() => {});
   }, []);
+  const toggleThreadAll = () => setThreadAll(v => { const nv = !v; threadAllRef.current = nv; if (activeConv) loadThread(activeConv); return nv; });
 
-  useEffect(() => { loadLists(); }, [loadLists]);
-  // The owner's own agents — recipient suggestions when composing (so you don't retype long GAIIs).
-  useEffect(() => { agentsSvc.listAgents().then(a => setMyAgents(a || [])).catch(() => {}); }, []);
+  // Mount: one composite call seeds all six sections (requests/conversations/important/tracked/agents/groups).
+  useEffect(() => { loadOverview(); }, [loadOverview]);
 
   // Phase A: when the active thread is with an AGENT, read its public `chat.commands` so the composer can
   // offer fill-in command chips. Absent/empty key → no chips (graceful). Reset per-thread UI on switch.
@@ -339,8 +372,6 @@ export default function InboxTab({ showToast }) {
       .catch(() => { /* no commands published — fine */ });
     return () => { cancelled = true; };
   }, [activePeer]);
-  // The owner's Share Groups — reusable broadcast audiences (distribution lists).
-  useEffect(() => { apiGet('/v1/groups').then(r => setMyGroups(r?.data?.groups || [])).catch(() => {}); }, []);
 
   // Recent broadcasts/polls the user sent — tracked in localStorage so results stay re-accessible.
   const BC_STORE = 'aimeat.inbox.broadcasts';
@@ -383,6 +414,12 @@ export default function InboxTab({ showToast }) {
     return [...map.entries()].map(([id, label]) => ({ id, label }));
   })();
 
+  // A 'messages' live-update ALWAYS reloads the open thread so incoming messages render immediately —
+  // even while you're typing a reply (previously the whole reload was skipped when an editable was
+  // focused, so new messages stayed invisible until send/reopen: the "badge shows N new but the thread
+  // never updates" bug). The "don't yank scroll while I write" concern is handled where it belongs —
+  // useThreadAutoScroll suppresses the new-message jump while the composer is focused (near-bottom
+  // follow still applies), so the message list re-renders without stealing the caret or the scroll.
   const liveRef = useRef(null);
   liveRef.current = () => { loadLists(); if (activeConv) loadThread(activeConv); };
   // Selective live refresh. `e.detail.domains` is a Set<string> (or null = "everything changed",
@@ -414,13 +451,15 @@ export default function InboxTab({ showToast }) {
     return () => { window.removeEventListener('aimeat-live-update', handler); if (liveTimerRef.current) clearTimeout(liveTimerRef.current); };
   }, [loadTrackedOnly]);
 
-  useEffect(() => {
-    if (mode === 'thread' && msgsRef.current) msgsRef.current.scrollTop = msgsRef.current.scrollHeight;
-  }, [thread, mode]);
+  // Auto-scroll (open / near-bottom follow / one-time jump on a NEW message) + mobile keyboard
+  // ergonomics (--inbox-kb + composer focus scroll) — extracted to ./inbox-tab/use-thread-ux.js.
+  useThreadAutoScroll(msgsRef, mode, thread, activeConv);
+  useMobileComposerKeyboard(mode);
 
   const openConversation = async (conv) => {
     setActiveConv(conv); setMode('thread');
-    setDraftPrefill(''); setReplyingTrId(null);   // don't leak a suggested reply across threads
+    setThreadAll(true); threadAllRef.current = true;   // each thread opens showing its FULL history
+    setDraftPrefill(''); setReplyingTrId(null); setReplyQuote(null);   // don't leak a suggested reply / quote across threads
     await loadThread(conv, true);                 // mark read only on explicit open (avoids a refresh loop)
     loadLists();
   };
@@ -450,19 +489,15 @@ export default function InboxTab({ showToast }) {
   // "Display name (handle)" for an id, falling back to the bare handle when we have no display name.
   const peerDisplay = (id) => peerLabel(id, peerNames[id]);
 
-  // Reply with AI (TARGET-031): hand the whole open conversation, or one message, to the popover which
-  // renders a copy-paste prompt (any AI chat) or an MCP instruction prompt (aimeat_dm_thread → draft →
-  // aimeat_dm_send after approval). `build(mode)` closes over the current thread/message + peer.
-  const openConversationAi = () => {
-    if (!activeConv) return;
-    const src = { peerGhii: activeConv.peerGhii, subject: activeConv.subject, conversationId: activeConv.conversationId, thread, peerName: peerNames[activeConv.peerGhii] };
-    setAiReply({ title: `${t('inbox.ai.replyTo')} ${peerDisplay(activeConv.peerGhii)}`, build: (mode) => buildConversationReplyPrompt(src, mode) });
-  };
-  const openMessageAi = (msg) => {
-    if (!activeConv) return;
-    const src = { peerGhii: activeConv.peerGhii, subject: activeConv.subject, conversationId: activeConv.conversationId, message: msg, peerName: peerNames[activeConv.peerGhii] };
-    setAiReply({ title: t('inbox.ai.replyToMessage'), build: (mode) => buildMessageReplyPrompt(src, mode) });
-  };
+  // Thread-head AI actions — Reply with AI (TARGET-031) and Conversation → Notebook (summarize the whole
+  // thread + images, park it for filing/enrichment). Config assembly lives in ./inbox-tab/ai-actions.js.
+  const openConversationAi = () => { if (activeConv) setAiReply(buildConversationReplyProps({ activeConv, thread, peerName: peerNames[activeConv.peerGhii], peerDisplayName: peerDisplay(activeConv.peerGhii) })); };
+  const openMessageAi = (msg) => { if (activeConv) setAiReply(buildMessageReplyProps({ activeConv, msg, peerName: peerNames[activeConv.peerGhii] })); };
+  const openConversationNotebook = () => { if (activeConv) setNbConv(buildConversationNotebookProps({ activeConv, thread, urlMap, peerName: peerNames[activeConv.peerGhii], title: `${t('inbox.notebook.toNotebook')} — ${peerDisplay(activeConv.peerGhii)}` })); };
+
+  // ↩ Reply on a bubble: pin the quote AND focus the composer (bump a nonce the Composer watches). Kept
+  // separate from the raw setter so cancelling the quote (✕) doesn't re-pop the keyboard.
+  const startQuoteReply = useCallback((msg) => { setReplyQuote(msg); setComposerFocus(n => n + 1); }, []);
 
   const startCompose = () => { setMode('compose'); setActiveConv(null); setTo(''); setComposeSubject(''); };
   const startBroadcast = () => { setMode('broadcast'); setActiveConv(null); setBcRecipients([]); setBcInput(''); setBcMode('broadcast'); setBcGroupId(''); setBcType('message'); setBcQuestions([]); setBcAudience(''); };
@@ -531,21 +566,21 @@ export default function InboxTab({ showToast }) {
     if (tr.state === 'awaiting-approval') await startSuggestedReply(tr);
   };
 
-  // Open a specific thread when arriving from a notification deep-link (sessionStorage hint set by
-  // the notification bell). 'requests' just lands on the inbox (requests show at the top of the list).
+  // Open a specific thread from a notification deep-link (sessionStorage hint set by the bell).
+  // 'requests' lands on the inbox list; 'req:<id>' (a "wants to message you" request notif) opens the
+  // thread once accepted, else falls back to the list (sender still pending accept/block).
   const consumeDeepLink = useCallback(async () => {
     let target = null;
     try { target = sessionStorage.getItem('aimeat.inbox.open'); } catch { /* noop */ }
     if (!target) return;
     try { sessionStorage.removeItem('aimeat.inbox.open'); } catch { /* noop */ }
     if (target === 'requests') { await loadLists(); return; }
+    const fromRequest = target.startsWith('req:'); if (fromRequest) target = target.slice(4);
     const convs = await messages.listConversations().catch(() => []);
     const conv = convs.find(c => c.conversationId === target);
-    if (conv) openConversation(conv);
-    // openConversation is a non-memoized handler invoked imperatively here with its `conv` argument; it
-    // uses only stable setters/refs, so no stale-closure risk. Keeping it out of deps preserves
-    // consumeDeepLink's stability (loadLists is a []-useCallback) so the two subscribing effects below
-    // don't re-run every render.
+    if (conv) openConversation(conv); else if (fromRequest) await loadLists();
+    // openConversation uses only stable setters/refs (no stale-closure risk); keeping it out of deps
+    // keeps consumeDeepLink stable (loadLists is a []-useCallback) so the two effects below don't re-run.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadLists]);
   useEffect(() => { consumeDeepLink(); }, [consumeDeepLink]);
@@ -612,11 +647,14 @@ export default function InboxTab({ showToast }) {
       // a reply to a subject thread (e.g. "keskustelu") spawned a brand-new thread named after the agent.
       const subject = (mode === 'compose' && composeSubject.trim()) ? composeSubject.trim() : undefined;
       const conversationId = (mode === 'thread' && activeConv) ? activeConv.conversationId : undefined;
-      const resp = await messages.send({ to: recipient, body, attachments, subject, conversationId });
+      // A quoted reply (↩) pins reply_to to the quoted message — the bubble renders the quote from it.
+      const replyTo = (mode === 'thread' && replyQuote) ? replyQuote.id : undefined;
+      const resp = await messages.send({ to: recipient, body, attachments, subject, conversationId, replyTo });
       if (resp?.ok === false) { showToast?.(resp?.error?.message || t('inbox.failed'), true); }
       else {
         reset?.();
         setComposeSubject('');
+        setReplyQuote(null);
         // If this send fulfils a Tracked Response awaiting approval, mark it replied.
         if (replyingTrId) {
           await tracked.markTrackedResponseReplied(replyingTrId, resp?.data?.message?.id).catch(() => {});
@@ -635,7 +673,7 @@ export default function InboxTab({ showToast }) {
 
   /* ── Render ── */
   return html`
-    <div class="inbox">
+    <div class=${`inbox${mode !== 'idle' ? ' inbox--panel' : ''}`}>
       <div class="inbox-head">
         <div>
           <div class="section-title">${t('inbox.title')}</div>
@@ -655,7 +693,8 @@ export default function InboxTab({ showToast }) {
         ${contactOptions.map(c => html`<option value=${c.id} key=${c.id}>${c.label}</option>`)}
       </datalist>
 
-      <div class="inbox-body">
+      <div class=${`inbox-body${mode !== 'idle' ? ' inbox-body--panel' : ''}`}>
+        <button class="inbox-back" onClick=${() => { setMode('idle'); setActiveConv(null); setReplyQuote(null); }}>← ${t('inbox.back')}</button>
         <${ListPanel} requests=${requests} conversations=${conversations} activeConv=${activeConv}
           peerDisplay=${peerDisplay} accept=${accept} block=${block} openConversation=${openConversation} />
 
@@ -663,8 +702,8 @@ export default function InboxTab({ showToast }) {
           <div class="inbox-panel">
             <div class="inbox-thread-head"><div class="inbox-name">${t('inbox.new')}</div></div>
             <div class="inbox-compose-fields">
-              <input class="inbox-input" type="text" placeholder=${t('inbox.toPlaceholder')}
-                list="inbox-contact-suggest" value=${to} onInput=${(e) => setTo(e.target.value)} />
+              <${ContactPicker} value=${to} onChange=${setTo} valueMode="full"
+                placeholder=${t('inbox.toPlaceholder')} />
               <input class="inbox-input" type="text" placeholder=${t('inbox.subjectPlaceholder')}
                 value=${composeSubject} onInput=${(e) => setComposeSubject(e.target.value)} />
             </div>
@@ -728,9 +767,11 @@ export default function InboxTab({ showToast }) {
           awaitingForConv=${awaitingForConv} awaitingDrafts=${awaitingDrafts} schedOpen=${schedOpen} setSchedOpen=${setSchedOpen}
           cmdFill=${cmdFill} agentCommands=${agentCommands} sending=${sending} draftPrefill=${draftPrefill} prefillNonce=${prefillNonce}
           msgsRef=${msgsRef} peerDisplay=${peerDisplay} showToast=${showToast} toggleImportant=${toggleImportant}
+          replyQuote=${replyQuote} setReplyQuote=${setReplyQuote} onQuoteReply=${startQuoteReply} composerFocus=${composerFocus}
           onTrackMsg=${onTrackMsg} onParkMsg=${onParkMsg} openMessageAi=${openMessageAi} submitInteractiveAnswers=${submitInteractiveAnswers}
-          setMdViewer=${setMdViewer} openConversationAi=${openConversationAi} insertCommand=${insertCommand} setCmdFill=${setCmdFill}
-          cancelTracked=${cancelTracked} openRecord=${openRecord} startSuggestedReply=${startSuggestedReply} doSend=${doSend} />` : null}
+          setMdViewer=${setMdViewer} openConversationAi=${openConversationAi} openConversationNotebook=${openConversationNotebook} insertCommand=${insertCommand} setCmdFill=${setCmdFill}
+          cancelTracked=${cancelTracked} openRecord=${openRecord} startSuggestedReply=${startSuggestedReply} doSend=${doSend} showLinkPreviews=${showLinkPreviews} toggleLinkPreviews=${toggleLinkPreviews}
+          threadAll=${threadAll} toggleThreadAll=${toggleThreadAll} />` : null}
 
         ${mode === 'tracked' ? html`<${TrackedPanel} activeTracked=${activeTracked} doneCount=${doneCount}
           openRecord=${openRecord} openTracked=${openTracked} cancelTracked=${cancelTracked} />` : null}
@@ -748,5 +789,8 @@ export default function InboxTab({ showToast }) {
         onClose=${() => setTrackMsg(null)} onDone=${loadLists} showToast=${showToast} />
       ${mdViewer && html`<${MarkdownViewer} url=${mdViewer.url} name=${mdViewer.name} onClose=${() => setMdViewer(null)} />`}
       ${aiReply && html`<${ReplyWithAiPopover} title=${aiReply.title} build=${aiReply.build} showToast=${showToast} onClose=${() => setAiReply(null)} />`}
+      ${nbConv && html`<${ConversationToNotebookPopover} title=${nbConv.title} promptText=${nbConv.promptText}
+        runServerSummary=${nbConv.runServerSummary} parkConversation=${nbConv.parkConversation}
+        showToast=${showToast} onClose=${() => setNbConv(null)} />`}
     </div>`;
 }

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

@@ -0,0 +1,20 @@
+/**
+ * @file knowledge-tab.helpers.js
+ * @description Pure helpers for the Knowledge tab, split out to keep knowledge-tab.js under the file-size
+ *   limit.
+ * @version-history
+ *   v1.0.0 — 2026-07-16 — Extract extractFedConsents from knowledge-tab.js.
+ */
+
+/** Map federation consents on `packages/{id}/*` → { packageId: consentId } (the tab's "is federated" map). */
+export function extractFedConsents(consents) {
+  const map = {};
+  for (const c of (consents || [])) {
+    const pat = c.data_pattern || c.pattern || '';
+    if (c.scope === 'federation' && pat.startsWith('packages/')) {
+      const m = pat.match(/^packages\/([^/]+)\//);
+      if (m) map[m[1]] = c.id || c.consent_id;
+    }
+  }
+  return map;
+}

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

@@ -13,6 +13,8 @@
  *   import KnowledgeTab from './knowledge-tab.js';
  *   html`<${KnowledgeTab} session=${session} showToast=${showToast} onStats=${onStats} />`
  * @version-history
+ *   v1.2.0 — 2026-07-16 — Owner-scoped mount folds packages + consents into GET /v1/knowledge/tab
+ *     (getKnowledgeTab); discovery + organism packages stay separate; individual reads kept as fallback.
  *   v1.1.0 — 2026-06-22 — Drop the per-package /v1/memory/{key} hydration fallback — the memory list
  *     already returns each package's full value inline.
  *   v1.0.0 — 2026-03-17 — Refactor: remove all inline style="" attributes, use CSS
@@ -26,6 +28,7 @@ import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
+import { EmptyState } from '/components/EmptyState.js';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml, copyToClipboard } from '/js/utils.js';
@@ -34,6 +37,7 @@ import { listConsents, grantConsent, revokeConsent } from '/js/services/consent.
 import { Spinner } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
 import * as knowledgeService from '/js/services/knowledge.js';
+import { extractFedConsents } from './knowledge-tab.helpers.js';
 
 export default function KnowledgeTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
@@ -77,28 +81,27 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
     finally { setLoading(false); }
   }, [onStats]);
 
-  useEffect(() => { loadPackages(); }, [loadPackages]);
+  // Mount fold: ONE composite for the owner-scoped data (packages + consents→fedConsents); on failure fall
+  // back to the individual loaders. Discover + organism packages stay separate.
+  useEffect(() => {
+    (async () => {
+      const ov = await knowledgeService.getKnowledgeTab();
+      if (!ov) { loadPackages(); loadFedConsents(); return; }
+      setPackages(ov.packages);
+      onStats?.({ knowledge: ov.packages.length });
+      setFedConsents(extractFedConsents(ov.consents));
+      setLoading(false);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   /* ── Load federation consents for knowledge packages ── */
   const loadFedConsents = useCallback(async () => {
     try {
-      const allConsents = await listConsents();
-      const map = {};
-      for (const c of allConsents) {
-        if (c.scope === 'federation' && (c.data_pattern || c.pattern || '').startsWith('packages/')) {
-          const pat = c.data_pattern || c.pattern || '';
-          // Extract package name from pattern like "packages/{name}/*"
-          const match = pat.match(/^packages\/([^/]+)\//);
-          if (match) {
-            map[match[1]] = c.id || c.consent_id;
-          }
-        }
-      }
-      setFedConsents(map);
+      setFedConsents(extractFedConsents(await listConsents()));
     } catch { /* ignore */ }
   }, []);
 
-  useEffect(() => { loadFedConsents(); }, [loadFedConsents]);
 
   /* ── Toggle federation consent for a package ── */
   const toggleFederation = useCallback(async (pkg) => {
@@ -503,7 +506,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
 
       <!-- IMPORT BOX -->
       <div class="kpkg-import-box">
-        <h3>${t('knowledge.import.title')}</h3>
+        <div class="section-title">${t('knowledge.import.title')}</div>
         <textarea
           class="kpkg-import-textarea"
           placeholder=${t('knowledge.import.placeholder')}
@@ -517,7 +520,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
 
         ${importPreview && html`
           <div class="kpkg-preview">
-            <h4>${t('knowledge.import.preview')}</h4>
+            <div class="card-h3">${t('knowledge.import.preview')}</div>
             <div class="kpkg-preview-meta">
               <span class="kpkg-badge kpkg-badge-type">${t('knowledge.contentTypes.' + (importPreview.pkg.content_type || 'document')) || (importPreview.pkg.content_type || 'document').toUpperCase()}</span>
               <span class="kpkg-badge kpkg-badge-synthesis">${t('knowledge.synthesis.' + (importPreview.pkg.synthesis?.level || 'original'))}</span>
@@ -610,10 +613,10 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
 
       <!-- MY KNOWLEDGE -->
       <div class="kpkg-section">
-        <h3>${t('knowledge.myKnowledge.title')}</h3>
+        <div class="section-title">${t('knowledge.myKnowledge.title')}</div>
         ${loading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!loading && packages.length === 0 && html`
-          <p class="kpkg-empty">${t('knowledge.myKnowledge.empty')}</p>
+          <${EmptyState} text=${t('knowledge.myKnowledge.empty')} />
         `}
         ${!loading && packages.map(pkg => {
           const manifest = pkg.value;
@@ -688,9 +691,9 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
                   </div>
 
                   <div class="kpkg-detail-entries">
-                    <h4>${t('knowledge.myKnowledge.entries').replace('{count}', String(entries.length))}</h4>
+                    <div class="card-h3">${t('knowledge.myKnowledge.entries').replace('{count}', String(entries.length))}</div>
                     ${entries.map((entry, i) => renderEntry(entry, i, pkg))}
-                    ${entries.length === 0 && html`<p class="kpkg-empty">No entries</p>`}
+                    ${entries.length === 0 && html`<${EmptyState} text=${'No entries'} />`}
                   </div>
 
                   ${(() => {
@@ -699,7 +702,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
                     const pkgRefs = manifest.references || [];
                     if (pkgRefs.length > 0 && !hasPerEntryRefs) return html`
                       <div class="kpkg-detail-refs">
-                        <h4>${t('knowledge.myKnowledge.references') || 'References'} (${t('knowledge.myKnowledge.packageLevel') || 'package-level'})</h4>
+                        <div class="card-h3">${t('knowledge.myKnowledge.references') || 'References'} (${t('knowledge.myKnowledge.packageLevel') || 'package-level'})</div>
                         ${pkgRefs.map((ref, i) => html`
                           <div key=${i} class="kpkg-ref pf-ref-row ${ref.verified ? 'kpkg-ref-verified' : 'kpkg-ref-unverified'}">
                             <span class="pf-ref-icon">${ref.verified ? '\u2705' : '\u2753'}</span>
@@ -730,16 +733,16 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
 
       <!-- SHARED WITH ME -->
       <div class="kpkg-section">
-        <h3>${t('knowledge.sharedWithMe.title')}</h3>
-        <p class="kpkg-empty">${t('knowledge.sharedWithMe.empty')}</p>
+        <div class="section-title">${t('knowledge.sharedWithMe.title')}</div>
+        <${EmptyState} text=${t('knowledge.sharedWithMe.empty')} />
       </div>
 
       <!-- KNOWLEDGE ORGANISMS -->
       <div class="kpkg-section">
-        <h3>${t('knowledge.organisms.title')}</h3>
+        <div class="section-title">${t('knowledge.organisms.title')}</div>
         ${organismLoading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!organismLoading && organismPackages.length === 0 && html`
-          <p class="kpkg-empty">${t('knowledge.organisms.empty')}</p>
+          <${EmptyState} text=${t('knowledge.organisms.empty')} />
         `}
         ${!organismLoading && organismPackages.map((pkg, i) => html`
           <div class="kpkg-card" key=${i}>
@@ -756,10 +759,10 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
 
       <!-- DISCOVER -->
       <div class="kpkg-section">
-        <h3>${t('knowledge.discover.title')}</h3>
+        <div class="section-title">${t('knowledge.discover.title')}</div>
         ${discoverLoading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!discoverLoading && discovered.filter(p => p.sharing?.allow_clone !== false).length === 0 && html`
-          <p class="kpkg-empty">${t('knowledge.discover.empty')}</p>
+          <${EmptyState} text=${t('knowledge.discover.empty')} />
         `}
         ${!discoverLoading && discovered.filter(pkg => pkg.sharing?.allow_clone !== false).map(pkg => html`
           <div class="kpkg-card" key=${pkg.package_id}>