aimeat 1.40.0 → 2.0.0

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

@@ -10,31 +10,44 @@
  *   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.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 +63,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
@@ -123,6 +131,8 @@ import { buildConversationReplyPrompt, buildMessageReplyPrompt, peerLabel } from
 import { peerName, ownerKeyOf, isAgentPeer, buildAnswerSummary } from './inbox-tab/helpers.js';
 import { Composer, PollBuilder, MarkdownViewer, ReplyWithAiPopover } from './inbox-tab/components.js';
 import { ListPanel, ThreadPanel, TrackedPanel, ResultsPanel } from './inbox-tab/panels.js';
+import { useThreadAutoScroll, useMobileComposerKeyboard } from './inbox-tab/use-thread-ux.js';
+import { ContactPicker } from '/components/ContactPicker.js';
 
 export default function InboxTab({ showToast }) {
   const [requests, setRequests] = useState([]);
@@ -154,6 +164,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 +194,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 +
@@ -304,14 +337,15 @@ export default function InboxTab({ showToast }) {
     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.
+        // Key by messageId::attachmentId — per-message ids (at0, at1…) repeat, so a flat a.id map made every message's `at0` share one image.
+        const uk = `${m.id}::${a.id}`;
+        if (prev[uk]) { map[uk] = prev[uk]; return; } // cached → browser won't re-fetch
+        // Inbound: only the recipient's duplicated local copy is fetchable. Outbound: resolve the original.
         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;
+        if (u) map[uk] = u;
       })));
     urlCacheRef.current = { convId: conv.conversationId, map };
     setUrlMap(map);
@@ -319,9 +353,8 @@ export default function InboxTab({ showToast }) {
     if (markRead && !conv.viaAgent) await messages.markConversationRead(conv.conversationId).catch(() => {});
   }, []);
 
-  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,14 @@ 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
+    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();
   };
@@ -464,6 +502,10 @@ export default function InboxTab({ showToast }) {
     setAiReply({ title: t('inbox.ai.replyToMessage'), build: (mode) => buildMessageReplyPrompt(src, mode) });
   };
 
+  // ↩ 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(''); };
   const addBcRecipient = (id) => {
@@ -612,11 +654,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 +680,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 +700,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 +709,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,6 +774,7 @@ 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}

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}>