aimeat 1.25.0 → 1.26.0

package/dist/public/views/profile/landing-page.js

@@ -15,6 +15,8 @@
  *     AppStrip — home/section sub-components
  *   - LandingPage — main orchestrator (default export)
  * @version-history
+ *   v3.3.0 — 2026-06-19 — Add the PresenceControl card to the home dashboard (own availability:
+ *     auto/manual status + who-can-see visibility), previewing the shared <PresenceDot>.
  *   v3.2.0 — 2026-06-10 — Sidebar reorg: groups follow the information-refinement pipeline
  *     (Information / Automation / Activity / Build & Share / Account / Infrastructure) —
  *     Daily/Personal/Technical are gone. Pinned section under Home (pin-on-hover 📌, max 5,
@@ -65,7 +67,9 @@ import * as orgService from '/js/services/organisms.js';
 import { listRecents } from '/js/recents.js';
 import { getMemory, createMemory } from '/js/services/memory.js';
 import { listInbox } from '/js/services/messages.js';
+import { getMyPresence, setMyPresence } from '/js/services/presence.js';
 import { Spinner } from './shared.js';
+import { PresenceDot } from '/components/PresenceDot.js';
 import { minidenticon } from '/lib/minidenticons.min.js';
 
 /* ───── Small time helpers (reuse the organisms rel-time keys) ───── */
@@ -515,6 +519,88 @@ function AgentsCard({ owner }) {
   `;
 }
 
+/* "Presence" — the owner's own availability control: status source (auto/manual),
+ * chosen status, and who-can-see visibility. One self-contained card; the dot it
+ * previews is the same <PresenceDot> rendered next to people everywhere else. */
+function PresenceControl() {
+  const [cfg, setCfg] = useState(null);
+  const [status, setStatus] = useState('unknown');
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await getMyPresence();
+      if (r?.data) { setCfg(r.data.config); setStatus(r.data.status || 'unknown'); }
+    } catch { /* control stays hidden until it loads */ }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const save = async (partial) => {
+    if (!cfg) return;
+    const optimistic = { ...cfg, ...partial };
+    setCfg(optimistic);
+    setSaving(true);
+    try {
+      const r = await setMyPresence(partial);
+      if (r?.data) { setCfg(r.data.config); setStatus(r.data.status || 'unknown'); }
+    } catch { setCfg(cfg); /* revert */ }
+    setSaving(false);
+  };
+
+  if (!cfg) return null;
+
+  return html`
+    <div class="pf-presence-card">
+      <div class="pf-presence-head">
+        <div>
+          <div class="section-title">${t('presence.control.title')}</div>
+          <div class="section-desc">${t('presence.control.desc')}</div>
+        </div>
+        <${PresenceDot} status=${status} size="md" label=${true} />
+      </div>
+
+      <div class="pf-presence-row">
+        <label class="pf-presence-label">${t('presence.control.modeLabel')}</label>
+        <div class="pf-presence-modes">
+          <button class=${'pf-presence-pill' + (cfg.mode === 'auto' ? ' pf-presence-pill--on' : '')}
+            disabled=${saving} onClick=${() => save({ mode: 'auto' })}>${t('presence.control.modeAuto')}</button>
+          <button class=${'pf-presence-pill' + (cfg.mode === 'manual' ? ' pf-presence-pill--on' : '')}
+            disabled=${saving} onClick=${() => save({ mode: 'manual' })}>${t('presence.control.modeManual')}</button>
+        </div>
+      </div>
+
+      ${cfg.mode === 'auto' ? html`
+        <div class="pf-presence-hint">${t('presence.control.modeAutoHint')}</div>
+      ` : html`
+        <div class="pf-presence-row">
+          <label class="pf-presence-label" for="pf-presence-status">${t('presence.control.statusLabel')}</label>
+          <select id="pf-presence-status" class="pf-edit-select" value=${cfg.status} disabled=${saving}
+            onChange=${(e) => save({ status: e.target.value })}>
+            <option value="available">${t('presence.status.available')}</option>
+            <option value="busy">${t('presence.status.busy')}</option>
+            <option value="away">${t('presence.status.away')}</option>
+            <option value="invisible">${t('presence.status.invisible')}</option>
+          </select>
+        </div>
+      `}
+
+      <div class="pf-presence-row">
+        <label class="pf-presence-label" for="pf-presence-vis">${t('presence.control.visibilityLabel')}</label>
+        <select id="pf-presence-vis" class="pf-edit-select" value=${cfg.visibility} disabled=${saving}
+          onChange=${(e) => save({ visibility: e.target.value })}>
+          <option value="everyone">${t('presence.control.visEveryone')}</option>
+          <option value="contacts">${t('presence.control.visContacts')}</option>
+          <option value="nobody">${t('presence.control.visNobody')}</option>
+        </select>
+      </div>
+      <div class="pf-presence-hint">
+        ${cfg.visibility === 'everyone' ? t('presence.control.visEveryoneHint')
+          : cfg.visibility === 'contacts' ? t('presence.control.visContactsHint') : ''}
+      </div>
+    </div>
+  `;
+}
+
 /* ───── Sub-components ───── */
 
 function ProfileCard({ tier, stats, session, onEditProfile, switchTab }) {
@@ -771,6 +857,7 @@ const SIDEBAR_GROUPS = [
   { titleKey: 'profile.landing.menuInformation', items: [   // raw → curated → governed
     { id: 'organisms', icon: '\u{1F3E2}', labelKey: 'profile.tabs.organisms' },
     { id: 'memory', icon: '\u{1F9E0}', labelKey: 'profile.tabs.memory' },
+    { id: 'notebook', icon: '\u{1F4D3}', labelKey: 'profile.tabs.notebook' },
     { id: 'knowledge', icon: '\u{1F4DA}', labelKey: 'knowledge.tabLabel' },
     { id: 'boards', icon: '\u{1F4CB}', labelKey: 'profile.tabs.boards' },
   ] },
@@ -1035,6 +1122,7 @@ export default function LandingPage({ tier, stats, session, navigate, showToast,
           <${ProfileCard} tier=${tier} stats=${stats} session=${session}
             onEditProfile=${() => setEditOpen(true)}
             switchTab=${(id) => open(id, 'main')} />
+          <${PresenceControl} />
           ${isNew ? html`<${HeroOnboarding} switchTab=${(id) => open(id, 'main')} />` : null}
           ${(isNew || isActive) ? html`<${KnowledgeCallout} switchTab=${() => open('knowledge', 'main')} />` : null}
           ${isNew ? html`<${GhostTiles} switchTab=${() => open('packages', 'main')} />` : null}

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

@@ -33,6 +33,7 @@
  *     group-share brought into Memory; "Create a group →" when none exist). Plus bulk edit:
  *     per-row checkboxes + a bulk bar (change visibility incl. group / delete with confirm /
  *     clear). The detail-row select and edit-modal select remain as alternate paths.
+ *   v2.2.1 — 2026-06-19 — JSDoc type annotations for frontend type-checking
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
@@ -279,7 +280,7 @@ export default function MemoryTab({ session, showToast, onStats }) {
   function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
-      reader.onload = () => resolve(reader.result.split(',')[1]);
+      reader.onload = () => resolve(/** @type {string} */ (reader.result).split(',')[1]);
       reader.onerror = reject;
       reader.readAsDataURL(file);
     });
@@ -287,13 +288,13 @@ export default function MemoryTab({ session, showToast, onStats }) {
 
   async function handleDownloadFile(key) {
     try {
-      const headers = {};
+      const headers = /** @type {Record<string,string>} */ ({});
       if (window.AIMEAT?.auth?.hasSession) {
         const session = window.AIMEAT.auth.getSession();
         if (session?.jwt) headers['Authorization'] = 'Bearer ' + session.jwt;
       }
       const resp = await fetch(`${NODE_URL}/v1/memory/files/${encodeURIComponent(key)}`, { headers });
-      if (!resp.ok) throw new Error(resp.status);
+      if (!resp.ok) throw new Error(String(resp.status));
       const blob = await resp.blob();
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
@@ -433,9 +434,9 @@ export default function MemoryTab({ session, showToast, onStats }) {
     const sorted = [...entries];
     switch (sortBy) {
       case 'updated':
-        return sorted.sort((a, b) => new Date(b.updated_at || 0) - new Date(a.updated_at || 0));
+        return sorted.sort((a, b) => +new Date(b.updated_at || 0) - +new Date(a.updated_at || 0));
       case 'created':
-        return sorted.sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0));
+        return sorted.sort((a, b) => +new Date(b.created_at || 0) - +new Date(a.created_at || 0));
       case 'alpha':
         return sorted.sort((a, b) => a.key.localeCompare(b.key));
       default:

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

@@ -0,0 +1,500 @@
+/**
+ * @file notebook-tab.js
+ * @description Profile "Notebook" tab — slice A: free-text CAPTURE (saved to the notebook inbox) +
+ *   the LIBRARIAN read-head (GET /v1/librarian/search, ranked full-text across every organism you
+ *   have contributed to plus your personal notes). Classify → disambiguate → materialize-document
+ *   is slice B. See docs/internal/design-organism-notebook-and-librarian.md.
+ * @structure
+ *   - NotebookTab (default export) — capture box, inbox list, librarian search
+ * @usage html`<${NotebookTab} session=${session} showToast=${showToast} onStats=${onStats} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Initial: capture + librarian search (slice A).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import * as memoryService from '/js/services/memory.js';
+import { classifyNote, materializeDocument } from '/js/services/notebook.js';
+import { listOrganisms } from '/js/services/organisms.js';
+import { useConfirm } from '/components/Modal.js';
+import { Markdown } from '/components/Markdown.js';
+import { OpenRouterSettings } from './generator-settings.js';
+
+const NEW = '__new__';
+
+// Stages shown while the (slow) AI classify call runs, so the user sees what is happening. The
+// timer advances to (and dwells on) the AI step — that is genuinely where the wait is spent.
+const NB_STEPS = ['profile.notebook.step1', 'profile.notebook.step2'];
+
+const INBOX_PREFIX = 'notebook.inbox.';
+
+function relTime(iso) {
+  if (!iso) return '';
+  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+  if (mins < 1) return t('profile.memory.timeJustNow') || 'just now';
+  if (mins < 60) return (t('profile.memory.timeMinsAgo') || '{n}m ago').replace('{n}', String(mins));
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return (t('profile.memory.timeHoursAgo') || '{n}h ago').replace('{n}', String(hrs));
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return (t('profile.memory.timeDaysAgo') || '{n}d ago').replace('{n}', String(days));
+  return new Date(iso).toLocaleDateString();
+}
+
+/** First non-empty line of a note (markdown heading marks stripped), for the collapsed one-line view. */
+function firstLine(text) {
+  const line = (text || '').split('\n').map(l => l.trim()).find(Boolean) || '';
+  return line.replace(/^#{1,6}\s+/, '').replace(/[*_`>#]/g, '').slice(0, 160);
+}
+
+/** Best-effort plain text of a note value for the inbox preview. */
+function noteText(value) {
+  if (typeof value === 'string') return value;
+  if (value && typeof value === 'object') {
+    if (typeof value.text === 'string') return value.text;
+    return JSON.stringify(value);
+  }
+  return String(value ?? '');
+}
+
+export default function NotebookTab({ session, showToast, onStats }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [draft, setDraft] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [inbox, setInbox] = useState(null);
+  const [orgNames, setOrgNames] = useState({});
+  const [inboxFilter, setInboxFilter] = useState('');
+  const [inboxSort, setInboxSort] = useState('new');      // 'new' | 'old'
+  const [noteView, setNoteView] = useState({});           // noteKey → 'line' | 'peek' | 'full' (default 'peek')
+
+  const [query, setQuery] = useState('');
+  const [hits, setHits] = useState(null);   // null = not searched yet
+  const [searching, setSearching] = useState(false);
+  const [searchScope, setSearchScope] = useState('own');   // 'own' | 'public'
+
+  // Slice B — placement suggestion for one note at a time.
+  const [sortingKey, setSortingKey] = useState(null);   // note key being classified (loading)
+  const [sortStep, setSortStep] = useState(0);          // progress stage index during classify
+  const [sortError, setSortError] = useState(null);     // { noteKey, message } — persistent inline error
+  const [suggest, setSuggest] = useState(null);         // { noteKey, result, edit }
+  const [materializing, setMaterializing] = useState(false);
+  const stepTimer = useRef(null);
+  function stopStepTimer() { if (stepTimer.current) { clearInterval(stepTimer.current); stepTimer.current = null; } }
+  useEffect(() => stopStepTimer, []);
+
+  useEffect(() => { if (session) { loadInbox(); loadOrgNames(); } }, [session]);
+
+  // Re-fetch the inbox on live updates (a capture elsewhere, a sync) — Rule from the frontend guide.
+  const liveRef = useRef(() => loadInbox());
+  liveRef.current = () => loadInbox();
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function loadInbox() {
+    try {
+      const all = await memoryService.listMemories();
+      const notes = (Array.isArray(all) ? all : [])
+        .filter(m => typeof m.key === 'string' && m.key.startsWith(INBOX_PREFIX))
+        .sort((a, b) => +new Date(b.updated_at || b.created_at || 0) - +new Date(a.updated_at || a.created_at || 0));
+      setInbox(notes);
+      onStats?.({ notebook: notes.length });
+    } catch { setInbox([]); }
+  }
+
+  async function loadOrgNames() {
+    try {
+      const resp = await listOrganisms({ member: session.owner });
+      const map = {};
+      for (const o of (resp?.data?.organisms || [])) map[o.id] = o.name;
+      setOrgNames(map);
+    } catch { /* names are a nicety — ids still render */ }
+  }
+
+  async function handleCapture() {
+    const text = draft.trim();
+    if (!text || saving) return;
+    setSaving(true);
+    try {
+      const key = INBOX_PREFIX + Date.now();
+      const resp = await memoryService.createMemory(key, { text, capturedAt: new Date().toISOString() }, 'private');
+      if (resp?.ok === false) { showToast(resp.error?.message || t('profile.notebook.saveFailed'), true); return; }
+      showToast(t('profile.notebook.saved'));
+      setDraft('');
+      await loadInbox();
+    } catch (e) {
+      showToast(e.message || t('profile.notebook.saveFailed'), true);
+    } finally { setSaving(false); }
+  }
+
+  function handleDelete(key) {
+    confirm(t('profile.notebook.deleteConfirm'), async () => {
+      const resp = await memoryService.deleteMemory(key);
+      if (resp?.ok === false) { showToast(resp.error?.message || t('profile.error'), true); return; }
+      showToast(t('profile.notebook.deleted'));
+      loadInbox();
+    }, { danger: true });
+  }
+
+  async function runSearch(q, scope) {
+    if (!q) { setHits(null); return; }
+    setSearching(true);
+    try {
+      setHits(await memoryService.librarianSearch(q, 50, scope));
+    } catch (e) {
+      showToast(e.message || t('profile.error'), true);
+      setHits([]);
+    } finally { setSearching(false); }
+  }
+  function handleSearch() { runSearch(query.trim(), searchScope); }
+  function pickScope(scope) {
+    setSearchScope(scope);
+    if (query.trim()) runSearch(query.trim(), scope);   // re-run so the toggle shows immediately
+  }
+
+  function hitDocId(hit) {
+    const prefix = `organism.${hit.organismId}.w.${hit.workspaceId}.${hit.space}.`;
+    return hit.space && hit.key.startsWith(prefix) ? hit.key.slice(prefix.length).split('.')[0] : null;
+  }
+  /** Whether a hit has a place to open (so the button is shown). */
+  function canOpen(hit) {
+    if (hit.kind === 'knowledge') return !!hit.packageId;
+    if (hit.organismId && hit.workspaceId) return true;
+    return searchScope !== 'public';   // personal memory only has an in-app home in your own scope
+  }
+  // Open a hit at its real home. Knowledge → the public knowledge viewer; an organism document →
+  // the in-app workspace doc (your own) or the public no-auth workspace viewer (public scope); a
+  // personal entry → the Memory tab.
+  function openHit(hit) {
+    if (hit.kind === 'knowledge' && hit.packageId) {
+      window.open(`/v1/publicknowledgeviewer?id=${encodeURIComponent(hit.packageId)}`, '_blank', 'noopener');
+      return;
+    }
+    if (hit.organismId && hit.workspaceId) {
+      const docId = hitDocId(hit);
+      if (searchScope === 'public') {
+        let u = `/v1/publicworkspaceviewer?org=${encodeURIComponent(hit.organismId)}&ws=${encodeURIComponent(hit.workspaceId)}`;
+        if (hit.space && docId) u += `&type=${encodeURIComponent(hit.space)}&id=${encodeURIComponent(docId)}`;
+        window.open(u, '_blank', 'noopener');
+        return;
+      }
+      try {
+        sessionStorage.setItem('aimeat.ws.openId', hit.organismId);
+        sessionStorage.setItem('aimeat.ws.openWs', hit.workspaceId);
+        if (docId) sessionStorage.setItem(`aimeat.ws.${hit.organismId}.${hit.workspaceId}.openDoc`, JSON.stringify({ namespace: hit.space, id: docId }));
+      } catch { /* noop */ }
+      window.dispatchEvent(new CustomEvent('aimeat-open-tab', { detail: { tabId: 'organisms' } }));
+      return;
+    }
+    if (searchScope !== 'public') window.dispatchEvent(new CustomEvent('aimeat-open-tab', { detail: { tabId: 'memory' } }));
+  }
+
+  /** Short producer label for a public hit: agent#owner or owner (drop the @node). */
+  function producerLabel(gaii) {
+    return String(gaii || '').split('@')[0];
+  }
+
+  // Collapse cycle for an inbox note: one line → peek → full → one line.
+  const cycleView = (key) => setNoteView(v => {
+    const cur = v[key] || 'peek';
+    const next = cur === 'line' ? 'peek' : cur === 'peek' ? 'full' : 'line';
+    return { ...v, [key]: next };
+  });
+
+  // Filter (text) + sort (date) the inbox for display.
+  function visibleInbox() {
+    const ft = inboxFilter.trim().toLowerCase();
+    const filtered = (inbox || []).filter(n => !ft || noteText(n.value).toLowerCase().includes(ft));
+    return filtered.sort((a, b) => {
+      const da = +new Date(a.updated_at || a.created_at || 0), db = +new Date(b.updated_at || b.created_at || 0);
+      return inboxSort === 'old' ? da - db : db - da;
+    });
+  }
+
+  // ── Slice B: classify → suggestion → materialize ──
+
+  /** Build the initial editable plan from a classify result. */
+  function initEdit(result) {
+    const s = result.suggestion || {};
+    const cn = result.createNew || {};
+    const organismId = s.organismId || (cn.suggest ? NEW : NEW);
+    const workspaceId = organismId === NEW ? NEW : (s.workspaceId || NEW);
+    return {
+      organismId,
+      organismName: cn.organismName || '',
+      workspaceId,
+      workspaceName: cn.workspaceName || '',
+      space: workspaceId === NEW ? '' : (s.space || ''),
+      title: s.title || '',
+      markdown: s.markdown || '',
+    };
+  }
+
+  async function handleSuggest(note) {
+    setSuggest(null);
+    setSortError(null);
+    setSortingKey(note.key);
+    setSortStep(0);
+    stopStepTimer();
+    // Walk the user through the expected stages while the AI thinks (the call can take ~30s).
+    stepTimer.current = setInterval(() => setSortStep(s => Math.min(s + 1, NB_STEPS.length - 1)), 2500);
+    try {
+      const result = await classifyNote(noteText(note.value));
+      if (!result) throw new Error(t('profile.error'));
+      setSuggest({ noteKey: note.key, result, edit: initEdit(result) });
+    } catch (e) {
+      setSortError({ noteKey: note.key, message: e.message || t('profile.error'), code: e.code });
+    } finally { stopStepTimer(); setSortingKey(null); }
+  }
+
+  function patchEdit(patch) {
+    setSuggest(s => s ? { ...s, edit: { ...s.edit, ...patch } } : s);
+  }
+
+  function onOrganismChange(organismId) {
+    if (organismId === NEW) { patchEdit({ organismId: NEW, workspaceId: NEW, space: '' }); return; }
+    const org = suggest.result.context.organisms.find(o => o.id === organismId);
+    const firstWs = org?.workspaces?.[0];
+    patchEdit({ organismId, workspaceId: firstWs ? firstWs.id : NEW, space: firstWs?.documentSpaces?.[0]?.namespace || '' });
+  }
+
+  function onWorkspaceChange(workspaceId) {
+    if (workspaceId === NEW) { patchEdit({ workspaceId: NEW, space: '' }); return; }
+    const org = suggest.result.context.organisms.find(o => o.id === suggest.edit.organismId);
+    const ws = org?.workspaces?.find(w => w.id === workspaceId);
+    patchEdit({ workspaceId, space: ws?.documentSpaces?.[0]?.namespace || '' });
+  }
+
+  function applyAlternative(alt) {
+    const org = suggest.result.context.organisms.find(o => o.id === alt.organismId);
+    const ws = org?.workspaces?.find(w => w.id === alt.workspaceId);
+    patchEdit({
+      organismId: alt.organismId || NEW,
+      workspaceId: alt.workspaceId || NEW,
+      space: alt.space || ws?.documentSpaces?.[0]?.namespace || '',
+    });
+  }
+
+  async function handleMaterialize() {
+    if (!suggest) return;
+    const e = suggest.edit;
+    if (!e.title.trim()) { showToast(t('profile.notebook.titleRequired'), true); return; }
+    if (e.organismId === NEW && !e.organismName.trim()) { showToast(t('profile.notebook.orgNameRequired'), true); return; }
+    setMaterializing(true);
+    try {
+      await materializeDocument({
+        organismId: e.organismId === NEW ? null : e.organismId,
+        organismName: e.organismName,
+        workspaceId: (e.organismId === NEW || e.workspaceId === NEW) ? null : e.workspaceId,
+        workspaceName: e.workspaceName,
+        space: (e.organismId === NEW || e.workspaceId === NEW || !e.space) ? null : e.space,
+        title: e.title.trim(),
+        markdown: e.markdown,
+        sourceKey: suggest.noteKey,
+      });
+      showToast(t('profile.notebook.materialized'));
+      setSuggest(null);
+      await loadInbox();
+      loadOrgNames();   // a just-created organism's name should resolve in subsequent search badges
+    } catch (err) {
+      showToast(err.message || t('profile.error'), true);
+    } finally { setMaterializing(false); }
+  }
+
+  const renderSuggestPanel = () => {
+    const { result, edit } = suggest;
+    const orgs = result.context?.organisms || [];
+    const org = orgs.find(o => o.id === edit.organismId);
+    const workspaces = org?.workspaces || [];
+    const ws = workspaces.find(w => w.id === edit.workspaceId);
+    const docSpaces = ws?.documentSpaces || [];
+    const conf = result.suggestion ? Math.round((result.suggestion.confidence || 0) * 100) : null;
+    return html`
+      <div class="pf-nb-suggest">
+        ${result.suggestion?.reason && html`<div class="text-meta-sm pf-nb-suggest-reason">${escHtml(result.suggestion.reason)}${conf !== null ? ` · ${conf}%` : ''}</div>`}
+
+        <label class="pf-nb-suggest-label">${t('profile.notebook.fieldOrganism')}</label>
+        <select class="input-field" value=${edit.organismId} onChange=${e => onOrganismChange(e.target.value)}>
+          ${orgs.map(o => html`<option key=${o.id} value=${o.id}>${escHtml(o.name)}</option>`)}
+          <option value=${NEW}>➕ ${t('profile.notebook.newOrganism')}</option>
+        </select>
+        ${edit.organismId === NEW && html`
+          <input type="text" class="input-field" placeholder=${t('profile.notebook.newOrgNamePlaceholder')}
+            value=${edit.organismName} onInput=${e => patchEdit({ organismName: e.target.value })} />`}
+
+        ${edit.organismId !== NEW && html`
+          <label class="pf-nb-suggest-label">${t('profile.notebook.fieldWorkspace')}</label>
+          <select class="input-field" value=${edit.workspaceId} onChange=${e => onWorkspaceChange(e.target.value)}>
+            ${workspaces.map(w => html`<option key=${w.id} value=${w.id}>${escHtml(w.name)}</option>`)}
+            <option value=${NEW}>➕ ${t('profile.notebook.newWorkspace')}</option>
+          </select>`}
+        ${(edit.organismId === NEW || edit.workspaceId === NEW) && html`
+          <input type="text" class="input-field" placeholder=${t('profile.notebook.newWsNamePlaceholder')}
+            value=${edit.workspaceName} onInput=${e => patchEdit({ workspaceName: e.target.value })} />`}
+
+        ${edit.organismId !== NEW && edit.workspaceId !== NEW && docSpaces.length > 0 && html`
+          <label class="pf-nb-suggest-label">${t('profile.notebook.fieldSpace')}</label>
+          <select class="input-field" value=${edit.space} onChange=${e => patchEdit({ space: e.target.value })}>
+            ${docSpaces.map(s => html`<option key=${s.namespace} value=${s.namespace}>${escHtml(s.name)}</option>`)}
+          </select>`}
+
+        ${result.alternatives?.length > 0 && html`
+          <div class="pf-nb-suggest-alts">
+            <span class="text-meta-sm">${t('profile.notebook.alternatives')}</span>
+            ${result.alternatives.map((alt, i) => html`
+              <button key=${i} class="btn-ghost btn-sm" onClick=${() => applyAlternative(alt)}>
+                ${escHtml(alt.organismName || '?')}${alt.workspaceName ? ` ▸ ${escHtml(alt.workspaceName)}` : ''}
+              </button>`)}
+          </div>`}
+
+        <label class="pf-nb-suggest-label">${t('profile.notebook.fieldTitle')}</label>
+        <input type="text" class="input-field" value=${edit.title} onInput=${e => patchEdit({ title: e.target.value })} />
+        <label class="pf-nb-suggest-label">${t('profile.notebook.fieldBody')}</label>
+        <textarea class="input-field pf-nb-suggest-body" rows="6" value=${edit.markdown}
+          onInput=${e => patchEdit({ markdown: e.target.value })}></textarea>
+
+        <div class="pf-nb-suggest-actions">
+          <button class="btn-primary" disabled=${materializing} onClick=${handleMaterialize}>
+            ${materializing ? '…' : t('profile.notebook.materializeBtn')}
+          </button>
+          <button class="btn-ghost btn-sm" onClick=${() => setSuggest(null)}>${t('profile.notebook.cancelBtn')}</button>
+        </div>
+      </div>
+    `;
+  };
+
+  const renderHit = (hit) => html`
+    <div class="pf-nb-hit" key=${hit.key}>
+      <div class="pf-nb-hit-head">
+        <span class="pf-nb-hit-title">${escHtml(hit.title || hit.key)}</span>
+        ${hit.kind === 'knowledge'
+          ? html`<span class="badge badge-success">${t('profile.notebook.kindKnowledge')}${hit.contentType ? ` · ${escHtml(hit.contentType)}` : ''}</span>`
+          : hit.organismId
+            ? html`<span class="badge badge-info">${escHtml(orgNames[hit.organismId] || hit.organismId)}</span>`
+            : html`<span class="badge">${t('profile.notebook.personalNote')}</span>`}
+      </div>
+      ${searchScope === 'public' && html`<div class="text-meta-sm pf-nb-hit-producer">${t('profile.notebook.producer')}: ${escHtml(producerLabel(hit.producer))}</div>`}
+      ${hit.snippet && html`<div class="pf-nb-hit-snippet">${escHtml(hit.snippet)}</div>`}
+      <div class="pf-nb-hit-foot">
+        <span class="text-meta-sm pf-nb-hit-key" title=${hit.key}>${escHtml(hit.key)}</span>
+        ${canOpen(hit) && html`<button class="btn-ghost btn-sm" onClick=${() => openHit(hit)}>${t('profile.notebook.openInMemory')}</button>`}
+      </div>
+    </div>
+  `;
+
+  return html`
+    ${ConfirmUI}
+    <div class="section-title">${t('profile.notebook.title')}</div>
+    <div class="section-desc">${t('profile.notebook.desc')}</div>
+
+    <div class="pf-nb-capture">
+      <textarea class="input-field pf-nb-textarea" rows="4"
+        placeholder=${t('profile.notebook.capturePlaceholder')}
+        value=${draft} onInput=${e => setDraft(e.target.value)}></textarea>
+      <div class="pf-nb-capture-actions">
+        <button class="btn-primary" disabled=${!draft.trim() || saving} onClick=${handleCapture}>
+          ${saving ? '…' : t('profile.notebook.captureBtn')}
+        </button>
+        <span class="text-meta-sm">${t('profile.notebook.captureHint')}</span>
+      </div>
+    </div>
+
+    <div class="section-title pf-nb-section">${t('profile.notebook.librarianTitle')}</div>
+    <div class="section-desc">${t('profile.notebook.librarianDesc')}</div>
+    <div class="sub-tabs pf-nb-scope">
+      <button class="sub-tab ${searchScope === 'own' ? 'active' : ''}" onClick=${() => pickScope('own')}>${t('profile.notebook.scopeOwn')}</button>
+      <button class="sub-tab ${searchScope === 'public' ? 'active' : ''}" onClick=${() => pickScope('public')}>${t('profile.notebook.scopePublic')}</button>
+    </div>
+    <div class="action-bar">
+      <div class="search-bar pf-nb-search">
+        <input type="text" class="input-field" placeholder=${t('profile.notebook.searchPlaceholder')}
+          value=${query} onInput=${e => setQuery(e.target.value)}
+          onKeyDown=${e => e.key === 'Enter' && handleSearch()} />
+        <button class="btn-primary" onClick=${handleSearch}>${t('profile.notebook.searchBtn')}</button>
+      </div>
+    </div>
+    ${searching && html`<${Spinner} text=${t('profile.notebook.searching')} />`}
+    ${!searching && hits !== null && html`
+      ${hits.length === 0
+        ? html`<div class="empty">${t('profile.notebook.noHits')}</div>`
+        : html`
+          <div class="text-meta-sm mb-half">${(t('profile.notebook.hitsCount') || '{n} results').replace('{n}', String(hits.length))}</div>
+          <div class="pf-nb-hits">${hits.map(renderHit)}</div>
+        `}
+    `}
+
+    <div class="section-title pf-nb-section">${t('profile.notebook.inboxTitle')}</div>
+    ${inbox === null
+      ? html`<${Spinner} text=${t('profile.notebook.inboxLoading')} />`
+      : inbox.length === 0
+        ? html`<div class="empty">${t('profile.notebook.inboxEmpty')}</div>`
+        : html`
+          <div class="action-bar pf-nb-inbox-bar">
+            <div class="search-bar pf-nb-search">
+              <input type="text" class="input-field" placeholder=${t('profile.notebook.filterPlaceholder')}
+                value=${inboxFilter} onInput=${e => setInboxFilter(e.target.value)} />
+              ${inboxFilter && html`<button class="btn-ghost btn-sm" onClick=${() => setInboxFilter('')}>✕</button>`}
+            </div>
+            <select class="input-field pf-nb-sort" value=${inboxSort} onChange=${e => setInboxSort(e.target.value)}>
+              <option value="new">${t('profile.notebook.sortNew')}</option>
+              <option value="old">${t('profile.notebook.sortOld')}</option>
+            </select>
+          </div>
+          ${visibleInbox().length === 0
+            ? html`<div class="empty">${t('profile.notebook.noMatch')}</div>`
+            : html`<div class="pf-nb-inbox">
+            ${visibleInbox().map(note => { const view = noteView[note.key] || 'peek'; return html`
+              <div class="pf-nb-note" key=${note.key}>
+                <div class="pf-nb-note-text pf-nb-note-text--${view}">
+                  ${view === 'line'
+                    ? html`<span class="pf-nb-note-line">${escHtml(firstLine(noteText(note.value)))}</span>`
+                    : html`<${Markdown} text=${noteText(note.value)} />`}
+                </div>
+                <div class="pf-nb-note-foot">
+                  <div class="pf-nb-note-meta">
+                    <button class="btn-ghost btn-sm pf-nb-view-btn" title=${t('profile.notebook.toggleView')}
+                      onClick=${() => cycleView(note.key)}>${view === 'full' ? '⌃' : '⌄'}</button>
+                    <span class="text-meta-sm">${relTime(note.updated_at || note.created_at)}</span>
+                  </div>
+                  <div class="pf-nb-note-btns">
+                    <button class="btn-primary btn-sm" disabled=${sortingKey === note.key}
+                      onClick=${() => handleSuggest(note)}>
+                      ${sortingKey === note.key ? t('profile.notebook.sorting') : t('profile.notebook.suggestBtn')}
+                    </button>
+                    <button class="btn-danger btn-sm" onClick=${() => handleDelete(note.key)}>${t('profile.notebook.deleteBtn')}</button>
+                  </div>
+                </div>
+                ${sortingKey === note.key && html`
+                  <div class="pf-nb-suggest pf-nb-progress">
+                    <${Spinner} text=${t(NB_STEPS[sortStep])} />
+                    <ol class="pf-nb-steps">
+                      ${NB_STEPS.map((s, i) => html`
+                        <li key=${i} class="pf-nb-step ${i < sortStep ? 'done' : i === sortStep ? 'active' : ''}">
+                          ${i < sortStep ? '✓' : i === sortStep ? '→' : '·'} ${t(s)}
+                        </li>`)}
+                    </ol>
+                  </div>`}
+                ${sortError?.noteKey === note.key && html`
+                  <div class="pf-nb-suggest pf-nb-progress">
+                    <div class="alert alert-warning"><span class="alert-msg">${t('profile.notebook.sortErrorTitle')}: ${escHtml(sortError.message)}</span></div>
+                    ${sortError.code === 'NO_OPENROUTER_KEY' && html`
+                      <div class="text-meta-sm">${t('profile.notebook.needKey')}</div>
+                      <${OpenRouterSettings} onSettingsChange=${() => {}} />`}
+                    <div class="pf-nb-suggest-actions">
+                      <button class="btn-primary btn-sm" onClick=${() => handleSuggest(note)}>${t('profile.notebook.tryAgain')}</button>
+                      <button class="btn-ghost btn-sm" onClick=${() => setSortError(null)}>${t('profile.notebook.dismiss')}</button>
+                    </div>
+                  </div>`}
+                ${suggest?.noteKey === note.key && renderSuggestPanel()}
+              </div>
+            `; })}
+          </div>`}
+        `
+    }
+  `;
+}