aimeat 1.40.1 → 2.1.0

package/dist/public/components/ContactPicker.js

@@ -0,0 +1,145 @@
+/**
+ * @file public/components/ContactPicker.js
+ * @description Shared identity picker: a text input with a suggestion dropdown fed by the owner's
+ *   CONTACTS (address book, lazy-loaded on focus) plus the member DIRECTORY (opt-in name search
+ *   when typing ≥ 2 chars). Free text always passes through (owner names, GHIIs, emails), so any
+ *   host form keeps its existing submit logic — the picker only makes finding the identity easy.
+ *   Typing something email-shaped shows a resolve action (exact-match /v1/contacts/resolve): a
+ *   hit fills in the owner's name; a miss calls onEmailUnresolved so the host can pivot to an
+ *   email invitation.
+ * @structure ContactPicker({ value, onChange, onSubmit, onEmailUnresolved, placeholder, disabled, excludeIds, autofocus })
+ * @usage import { ContactPicker } from '/components/ContactPicker.js';
+ *   <${ContactPicker} value=${who} onChange=${setWho} onSubmit=${submit} />
+ * @version-history
+ *   v1.1.0 — 2026-07-16 — `kinds` prop: hosts narrow suggestions to accepted identity classes
+ *     (member/grant surfaces pass ['ghii'] so agents are never suggested where only owners are valid).
+ *   v1.0.0 — 2026-07-16 — Initial: contacts + directory suggestions, email resolve, freeform passthrough.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import * as contactsService from '/js/services/contacts.js';
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const KIND_ICON = { ghii: '👤', gaii: '🤖', geai: '🧩' };
+
+/**
+ * Identity picker input. Controlled: `value`/`onChange(text)` mirror a plain input, so hosts keep
+ * their own submit logic; `onSubmit(text)` fires on Enter (when no suggestion is highlighted).
+ * `onEmailUnresolved(email)` fires when an email lookup finds no account (host may offer an email
+ * invitation). `excludeIds` hides ids already chosen/present (e.g. current members). `valueMode`
+ * controls what a picked suggestion writes back: 'bare' (default — grant surfaces key on the bare
+ * local owner name) or 'full' (messaging surfaces need the full GHII/GAII). `kinds` narrows the
+ * suggestions to identity classes the host accepts (e.g. ['ghii'] on member/grant surfaces where
+ * only humans are valid — suggesting an agent there just produces an OWNER_NOT_FOUND).
+ */
+export function ContactPicker({ value = '', onChange, onSubmit, onEmailUnresolved, placeholder, disabled, excludeIds = [], autofocus, valueMode = 'bare', kinds }) {
+  const [contacts, setContacts] = useState(null);     // lazy: null until first focus
+  const [dirHits, setDirHits] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [hi, setHi] = useState(-1);                   // highlighted suggestion index
+  const [resolveState, setResolveState] = useState(null); // null | 'busy' | {found, ...}
+  const rootRef = useRef(null);
+  const dirTimer = useRef(0);
+
+  const bare = (id) => String(id || '').split('@')[0];
+  const isEmail = EMAIL_RE.test(value.trim()) && !value.includes('#');
+
+  const loadContacts = useCallback(async () => {
+    if (contacts !== null) return;
+    try { setContacts(await contactsService.listContacts()); } catch { setContacts([]); }
+  }, [contacts]);
+
+  // Directory search (debounced) — only for name-ish input, never for emails/full ids.
+  useEffect(() => {
+    setResolveState(null);
+    if (!open) return undefined;
+    const q = value.trim();
+    if (q.length < 2 || q.includes('@') || q.includes('#')) { setDirHits([]); return undefined; }
+    dirTimer.current = window.setTimeout(async () => {
+      const hits = await contactsService.searchDirectory(q);
+      setDirHits(hits);
+    }, 250);
+    return () => window.clearTimeout(dirTimer.current);
+  }, [value, open]);
+
+  // Close on outside click.
+  useEffect(() => {
+    const close = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, []);
+
+  const q = value.trim().toLowerCase();
+  const excluded = new Set((excludeIds || []).map(x => bare(x)));
+  const kindOk = (k) => !kinds || kinds.includes(k);
+  const fromContacts = (contacts || [])
+    .filter(c => kindOk(c.kind))
+    .filter(c => !excluded.has(bare(c.contact_id)))
+    .filter(c => !q || c.contact_id.toLowerCase().includes(q) || (c.display_name || '').toLowerCase().includes(q))
+    .slice(0, 8)
+    .map(c => ({ id: c.contact_id, label: c.display_name || bare(c.contact_id), kind: c.kind, source: 'contact' }));
+  const seen = new Set(fromContacts.map(s => s.id));
+  const fromDirectory = (dirHits || [])
+    .filter(hHit => hHit.ghii && !seen.has(hHit.ghii) && !excluded.has(bare(hHit.ghii)))
+    .slice(0, 5)
+    .map(hHit => ({ id: hHit.ghii, label: hHit.display_name || bare(hHit.ghii), kind: 'ghii', source: 'directory' }));
+  const suggestions = [...fromContacts, ...fromDirectory];
+
+  const pick = (s) => {
+    onChange?.(valueMode === 'full' ? s.id : bare(s.id));
+    setOpen(false); setHi(-1);
+  };
+
+  const doResolve = async () => {
+    const email = value.trim().toLowerCase();
+    setResolveState('busy');
+    try {
+      const r = await contactsService.resolveEmail(email);
+      setResolveState(r);
+      if (r.found) { onChange?.(r.owner); setOpen(false); }
+      else onEmailUnresolved?.(email);
+    } catch { setResolveState(null); }
+  };
+
+  const onKeyDown = (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setOpen(true); setHi(i => Math.min(i + 1, suggestions.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHi(i => Math.max(i - 1, -1)); }
+    else if (e.key === 'Escape') { setOpen(false); setHi(-1); }
+    else if (e.key === 'Enter') {
+      if (open && hi >= 0 && suggestions[hi]) { e.preventDefault(); pick(suggestions[hi]); }
+      else if (isEmail && resolveState === null) { e.preventDefault(); doResolve(); }
+      else onSubmit?.(value);
+    }
+  };
+
+  return html`
+    <div class="cp-root" ref=${rootRef}>
+      <input class="input-field input-sm cp-input" autofocus=${autofocus} disabled=${disabled}
+        placeholder=${placeholder || (t('contacts.pickerPlaceholder') || 'owner name, email, or pick a contact')}
+        value=${value}
+        onInput=${(e) => { onChange?.(e.target.value); setOpen(true); setHi(-1); }}
+        onFocus=${() => { loadContacts(); setOpen(true); }}
+        onKeyDown=${onKeyDown} />
+      ${open && (suggestions.length || isEmail) ? html`
+        <div class="cp-drop">
+          ${suggestions.map((s, i) => html`
+            <button type="button" class="cp-item ${i === hi ? 'cp-item-hi' : ''}" key=${s.id}
+              onMouseDown=${(e) => { e.preventDefault(); pick(s); }}>
+              <span class="cp-item-icon" aria-hidden="true">${KIND_ICON[s.kind] || '👤'}</span>
+              <span class="cp-item-label">${s.label}</span>
+              <span class="cp-item-id">${s.id}</span>
+              ${s.source === 'directory' ? html`<span class="cp-item-src">${t('contacts.fromDirectory') || 'directory'}</span>` : null}
+            </button>`)}
+          ${isEmail ? html`
+            <button type="button" class="cp-item cp-item-resolve" onMouseDown=${(e) => { e.preventDefault(); doResolve(); }}>
+              <span class="cp-item-icon" aria-hidden="true">${'✉'}</span>
+              <span class="cp-item-label">${resolveState === 'busy' ? (t('contacts.resolving') || 'Looking up…') : (t('contacts.resolveAction') || 'Look up this email')}</span>
+            </button>` : null}
+          ${resolveState && resolveState !== 'busy' && !resolveState.found ? html`
+            <div class="cp-item cp-item-miss">${t('contacts.resolveMiss') || 'No account with that email — you can send an email invitation instead.'}</div>` : null}
+        </div>` : null}
+    </div>`;
+}

package/dist/public/components/EmptyState.js

@@ -1,14 +1,26 @@
 /**
  * @file EmptyState.js
  * @description Canonical empty-state placeholder — a centered muted message with an
- *   optional icon. Replaces the per-view clones (pf-empty / mk-empty / hb-empty /
- *   agd-empty / pkg-empty …) and the bare `<div class="empty">` scattered across the
- *   frontend. Renders the themed `.empty` class so it flips with dark/light mode.
- * @structure EmptyState({ icon?, text, children? })
+ *   optional icon, bold title, and action row. Replaces the per-view clones
+ *   (pf-empty / mk-empty / hb-empty / agd-empty / pkg-empty …) and the bare
+ *   `<div class="empty">` scattered across the frontend. Renders the themed
+ *   `.empty` class so it flips with dark/light mode.
+ * @structure EmptyState({ icon?, title?, text?, action?, children? })
+ *   - icon   — large decorative glyph above the message (.empty-icon)
+ *   - title  — bold non-italic heading line (.empty-title)
+ *   - text   — the muted body line (inherits the italic .empty look)
+ *   - action — a node (button/link) rendered below (.empty-action)
+ *   - children — arbitrary body, rendered as-is (back-compat; use instead of text)
  * @usage import { EmptyState } from '/components/EmptyState.js';
  *   html`<${EmptyState} text=${t('x.empty')} />`
  *   html`<${EmptyState} icon="🎯" text=${t('x.noMatches')} />`
+ *   html`<${EmptyState} icon="🔑" title=${t('x.gateTitle')} text=${t('x.gateDesc')}
+ *          action=${html`<button class="btn-primary btn-sm" onClick=${login}>…</button>`} />`
  * @version-history
+ *   v1.1.0 — 2026-07-17 — Add title + action slots so the richer bespoke empties
+ *     (pkv title+desc, pwv icon+action gates, mk/hb icon+text triads) can fold in
+ *     instead of the single-line placeholder being a downgrade. Back-compat: the
+ *     text/children-only signature renders identically to v1.0.0.
  *   v1.0.0 — 2026-06-02 — Component unification (#9): single empty-state primitive
  *     (themed .empty + optional .empty-icon); admin Empty() delegates to it.
  */
@@ -18,11 +30,14 @@ const html = htm.bind(h);
 
 /**
  * EmptyState — centered muted placeholder.
- * @param {{ icon?: string, text?: any, children?: any }} props
+ * @param {{ icon?: string, title?: any, text?: any, action?: any, children?: any }} props
  */
-export function EmptyState({ icon, text, children }) {
+export function EmptyState({ icon, title, text, action, children }) {
   return html`<div class="empty">
     ${icon ? html`<span class="empty-icon">${icon}</span>` : ''}
-    ${text != null ? text : children}
+    ${title != null ? html`<div class="empty-title">${title}</div>` : ''}
+    ${text != null ? html`<div class="empty-text">${text}</div>` : ''}
+    ${children != null ? children : ''}
+    ${action != null ? html`<div class="empty-action">${action}</div>` : ''}
   </div>`;
 }

package/dist/public/components/LinkPreview.js

@@ -0,0 +1,101 @@
+/**
+ * @file public/components/LinkPreview.js
+ * @description Rich link-preview (unfurl) cards for a pasted URL. `LinkPreview` fetches one URL's
+ *   OpenGraph metadata from the node (`/js/services/unfurl.js`) and renders a card (site · title ·
+ *   description · thumbnail); the thumbnail is pulled through the node's image proxy into a `blob:`
+ *   URL so the SPA's remote-image CSP is satisfied. `MessageLinkPreviews` extracts the URLs from a
+ *   message body and renders a card per link, each with a ✕ that hides it (persisted in localStorage,
+ *   so a dismissed card stays hidden). `extractUrls` is exported for reuse/testing.
+ * @structure extractUrls(text,max) · LinkPreview({url,onDismiss}) · MessageLinkPreviews({msg})
+ * @usage html`<${MessageLinkPreviews} msg=${msg} />`
+ * @version-history
+ *   v1.0.0 — 2026-07-21 — Initial link-preview cards (inbox message threads).
+ */
+import { h } from 'preact';
+import { useState, useEffect } 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 * as unfurl from '/js/services/unfurl.js';
+
+/** Pull up to `max` distinct bare http(s) URLs out of a message body, trimming trailing sentence
+ *  punctuation (mirrors the Markdown autolink trimming so the card links the same target the text does). */
+export function extractUrls(text, max = 3) {
+  const urls = [];
+  if (typeof text !== 'string') return urls;
+  const re = /(?:^|[\s(<[])(https?:\/\/[^\s<>()[\]]+)/gi;
+  let m;
+  while ((m = re.exec(text)) !== null && urls.length < max) {
+    let u = m[1].replace(/[.,;:!?'"]+$/, '');
+    if (u && !urls.includes(u)) urls.push(u);
+  }
+  return urls;
+}
+
+// Dismissed cards persist across reloads: a Set of `${messageId}::${url}` keys in localStorage (capped).
+const DISMISS_KEY = 'aimeat.inbox.linkcard.dismissed';
+function loadDismissed() {
+  try { return new Set(JSON.parse(localStorage.getItem(DISMISS_KEY) || '[]')); } catch { return new Set(); }
+}
+function saveDismissed(set) {
+  try { localStorage.setItem(DISMISS_KEY, JSON.stringify([...set].slice(-500))); } catch { /* quota */ }
+}
+
+/** One preview card. Renders nothing while loading, or if the link has no usable metadata. */
+export function LinkPreview({ url, onDismiss }) {
+  const [meta, setMeta] = useState(undefined); // undefined = loading, null = nothing to show
+  const [imgUrl, setImgUrl] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    let objectUrl = null;
+    setMeta(undefined); setImgUrl(null);
+    (async () => {
+      const m = await unfurl.fetchPreview(url);
+      if (!alive) return;
+      // A card with no title/description/image isn't worth showing (avoid an empty box on a bare domain).
+      if (!m || (!m.title && !m.description && !m.image)) { setMeta(null); return; }
+      setMeta(m);
+      if (m.image) {
+        objectUrl = await unfurl.fetchPreviewImageUrl(m.image);
+        if (!alive) { if (objectUrl) URL.revokeObjectURL(objectUrl); return; }
+        if (objectUrl) setImgUrl(objectUrl);
+      }
+    })();
+    return () => { alive = false; if (objectUrl) URL.revokeObjectURL(objectUrl); };
+  }, [url]);
+
+  if (meta === undefined || meta === null) return null;
+  return html`
+    <div class="inbox-linkcard">
+      <a class="inbox-linkcard-main" href=${meta.resolvedUrl || url} target="_blank" rel="noopener noreferrer nofollow">
+        ${imgUrl ? html`<span class="inbox-linkcard-thumb"><img src=${imgUrl} alt="" loading="lazy" /></span>` : null}
+        <span class="inbox-linkcard-text">
+          ${meta.siteName ? html`<span class="inbox-linkcard-site">${escHtml(meta.siteName)}</span>` : null}
+          ${meta.title ? html`<span class="inbox-linkcard-title">${escHtml(meta.title)}</span>` : null}
+          ${meta.description ? html`<span class="inbox-linkcard-desc">${escHtml(meta.description)}</span>` : null}
+        </span>
+      </a>
+      <button class="inbox-linkcard-x" title=${t('inbox.linkPreview.hide')}
+        onClick=${() => onDismiss?.(url)}>✕</button>
+    </div>`;
+}
+
+/** All preview cards for one message: a card per non-dismissed URL in its body. */
+export function MessageLinkPreviews({ msg }) {
+  const urls = extractUrls(msg?.body || '');
+  const [dismissed, setDismissed] = useState(loadDismissed);
+  if (urls.length === 0) return null;
+  const visible = urls.filter(u => !dismissed.has(`${msg.id}::${u}`));
+  if (visible.length === 0) return null;
+  const dismiss = (u) => {
+    const next = new Set(dismissed);
+    next.add(`${msg.id}::${u}`);
+    setDismissed(next);
+    saveDismissed(next);
+  };
+  return html`<div class="inbox-linkcards">
+    ${visible.map(u => html`<${LinkPreview} key=${u} url=${u} onDismiss=${dismiss} />`)}
+  </div>`;
+}

package/dist/public/components/NotificationBell.js

@@ -15,6 +15,10 @@
  *   v1.0.1 — 2026-06-19 — JSDoc type annotations for frontend type-checking
  *   v1.1.0 — 2026-07-02 — Extract openNotificationLink() so push-notification clicks reuse the
  *     same deep-link translation as bell clicks (supports both '#hash' and '?tab=' forms).
+ *   v1.2.0 — 2026-07-18 — Inline notification actions: reply box (POST /v1/messages) + api buttons
+ *     (approve/deny/accept/decline/reject) that call the action endpoint with the owner's session.
+ *   v1.3.0 — 2026-07-19 — "Clear all" in the dropdown head (DELETE /v1/notifications) — deletes every
+ *     notification for the owner (not just mark-read), optimistic empty + reconcile.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
@@ -42,6 +46,13 @@ function relTime(iso) {
   } catch { return ''; }
 }
 
+// Action id → i18n key (falls back to the server-provided English label) and → button class.
+const ACTION_I18N = {
+  reply: 'notif.action.reply', approve: 'notif.action.approve', deny: 'notif.action.deny',
+  accept: 'notif.action.accept', decline: 'notif.action.decline', reject: 'notif.action.reject',
+};
+const BTN_CLASS = { primary: 'btn-primary', danger: 'btn-danger', default: 'btn-outline' };
+
 /**
  * Deep-link a notification target into the SPA. Handles both notification link vocabularies:
  * the bell's hash form ('/v1/profile#organisms', '/v1/profile#inbox/<conversationId>') and the
@@ -80,17 +91,33 @@ export function openNotificationLink(link, onNavigate) {
 }
 
 export function NotificationBell({ t, onNavigate }) {
-  const tr = (k, fb) => (t ? t(k) : null) || fb;
+  const tr = (k, fb) => (t && k ? t(k) : null) || fb;
   const [items, setItems] = useState([]);
   const [unread, setUnread] = useState(0);
   const [open, setOpen] = useState(false);
+  const [replyFor, setReplyFor] = useState(null);   // notif id whose reply box is open
+  const [replyText, setReplyText] = useState('');
+  const [busyKey, setBusyKey] = useState(null);      // `${notifId}:${actionId}` in flight
+  const [results, setResults] = useState({});        // notifId → { ok, msg }
   const ref = useRef(null);
 
+  const [clearing, setClearing] = useState(false);
+
   const load = useCallback(async () => {
     const r = await api('/v1/notifications');
     if (r && r.data) { setItems(r.data.notifications || []); setUnread(r.data.unread || 0); }
   }, []);
 
+  // "Clear all" — delete every notification for the owner (not just mark read). Optimistic: empty the
+  // list + zero the badge immediately, then reconcile from the server response.
+  const clearAll = useCallback(async () => {
+    setClearing(true);
+    setItems([]); setUnread(0); setReplyFor(null); setResults({});
+    await api('/v1/notifications', { method: 'DELETE', body: JSON.stringify({}) });
+    setClearing(false);
+    load();
+  }, [load]);
+
   useEffect(() => {
     load();
     return onLiveUpdate(['agent-messages', 'agent-tasks', 'notifications', 'workspace-access'], () => load());
@@ -107,6 +134,7 @@ export function NotificationBell({ t, onNavigate }) {
   const toggle = async () => {
     const next = !open;
     setOpen(next);
+    if (!next) { setReplyFor(null); setReplyText(''); }
     if (next && unread > 0) {
       setUnread(0);
       setItems(its => its.map(n => ({ ...n, read: true })));
@@ -118,6 +146,82 @@ export function NotificationBell({ t, onNavigate }) {
     openNotificationLink(n.link, onNavigate);
   };
 
+  const actionLabel = (a) => tr(ACTION_I18N[a.id], a.label || a.id);
+
+  // 'api' action (approve/deny/accept/decline/reject): call the endpoint with the owner's session.
+  const runApi = async (n, a) => {
+    if (a.confirm && !window.confirm(tr('notif.action.confirm', 'Are you sure?'))) return;
+    setBusyKey(`${n.id}:${a.id}`);
+    const r = await api(a.endpoint, { method: a.method || 'POST', body: a.body ? JSON.stringify(a.body) : undefined });
+    setBusyKey(null);
+    const ok = !!(r && r.ok);
+    setResults(s => ({ ...s, [n.id]: { ok, msg: ok ? actionLabel(a) : (r && r.error && r.error.message) || tr('notif.action.failed', 'Action failed') } }));
+    load();
+  };
+
+  // 'reply' action: send the typed text as a DM back to the sender, then close the box.
+  const sendReply = async (n, a) => {
+    const text = replyText.trim();
+    if (!text) return;
+    setBusyKey(`${n.id}:reply`);
+    const r = await api('/v1/messages', { method: 'POST', body: JSON.stringify({
+      to: a.to, body: text, conversation_id: a.conversationId, reply_to: a.replyTo, subject: a.subject,
+    }) });
+    setBusyKey(null);
+    const ok = !!(r && r.ok);
+    if (ok) { setReplyFor(null); setReplyText(''); }
+    setResults(s => ({ ...s, [n.id]: { ok, msg: ok ? tr('notif.action.sent', 'Reply sent') : (r && r.error && r.error.message) || tr('notif.action.failed', 'Action failed') } }));
+    load();
+  };
+
+  const openReply = (n, a) => {
+    setReplyFor(cur => (cur === n.id ? null : n.id));
+    setReplyText('');
+    setResults(s => ({ ...s, [n.id]: undefined }));
+    // Stash so an "AI draft" jump lands in the right thread.
+    if (a.conversationId) { try { sessionStorage.setItem('aimeat.inbox.open', a.conversationId); } catch { /* noop */ } }
+  };
+
+  const renderAction = (n, a) => {
+    const key = `${n.id}:${a.id}`;
+    const busy = busyKey === key;
+    const cls = BTN_CLASS[a.style] || 'btn-outline';
+    if (a.kind === 'reply') {
+      return html`<button class="notif-action-btn ${cls}" key=${a.id} disabled=${busy} onClick=${(e) => { e.stopPropagation(); openReply(n, a); }}>${actionLabel(a)}</button>`;
+    }
+    if (a.kind === 'navigate') {
+      return html`<button class="notif-action-btn ${cls}" key=${a.id} onClick=${(e) => { e.stopPropagation(); setOpen(false); openNotificationLink(a.link, onNavigate); }}>${actionLabel(a)}</button>`;
+    }
+    return html`<button class="notif-action-btn ${cls}" key=${a.id} disabled=${busy} onClick=${(e) => { e.stopPropagation(); runApi(n, a); }}>${busy ? '…' : actionLabel(a)}</button>`;
+  };
+
+  const renderItem = (n) => {
+    const actions = Array.isArray(n.actions) ? n.actions : [];
+    const res = results[n.id];
+    const replyAction = actions.find(a => a.kind === 'reply');
+    return html`
+      <div class="notif-item ${n.read ? '' : 'unread'}" key=${n.id}>
+        <button class="notif-item-main" onClick=${() => clickNotif(n)}>
+          <div class="notif-item-title">${n.title}</div>
+          ${n.body ? html`<div class="notif-item-body">${n.body}</div>` : null}
+          <div class="notif-item-time">${relTime(n.createdAt)}</div>
+        </button>
+        ${actions.length ? html`<div class="notif-actions">${actions.map(a => renderAction(n, a))}</div>` : null}
+        ${replyFor === n.id && replyAction ? html`
+          <div class="notif-reply">
+            <textarea class="notif-reply-input" rows="2" placeholder=${tr('notif.action.replyPlaceholder', 'Write a reply…')}
+              value=${replyText} onInput=${(e) => setReplyText(e.target.value)}></textarea>
+            <div class="notif-reply-row">
+              <button class="notif-action-btn btn-primary" disabled=${busyKey === `${n.id}:reply` || !replyText.trim()} onClick=${() => sendReply(n, replyAction)}>
+                ${busyKey === `${n.id}:reply` ? '…' : tr('notif.action.send', 'Send')}</button>
+              <button class="notif-action-btn btn-ghost" onClick=${() => { setOpen(false); openNotificationLink(n.link, onNavigate); }}>${tr('notif.action.aiDraft', 'Reply with AI')}</button>
+              <button class="notif-action-btn btn-ghost" onClick=${() => { setReplyFor(null); setReplyText(''); }}>${tr('common.cancel', 'Cancel')}</button>
+            </div>
+          </div>` : null}
+        ${res ? html`<div class="notif-result ${res.ok ? 'ok' : 'err'}">${res.ok ? '✓ ' : '⚠ '}${res.msg}</div>` : null}
+      </div>`;
+  };
+
   return html`
     <div class="notif-bell" ref=${ref}>
       <button class="notif-bell-btn" aria-label=${tr('notif.title', 'Notifications')} title=${tr('notif.title', 'Notifications')} onClick=${toggle}>
@@ -125,15 +229,13 @@ export function NotificationBell({ t, onNavigate }) {
       </button>
       ${open ? html`
         <div class="notif-dropdown">
-          <div class="notif-dropdown-head">${tr('notif.title', 'Notifications')}</div>
+          <div class="notif-dropdown-head">
+            <span>${tr('notif.title', 'Notifications')}</span>
+            ${items.length > 0 ? html`<button class="notif-clear-all" disabled=${clearing} onClick=${(e) => { e.stopPropagation(); clearAll(); }}>${clearing ? '…' : tr('notif.clearAll', 'Clear all')}</button>` : null}
+          </div>
           ${items.length === 0
             ? html`<div class="notif-empty">${tr('notif.empty', 'No notifications yet')}</div>`
-            : items.map(n => html`
-              <button class="notif-item ${n.read ? '' : 'unread'}" key=${n.id} onClick=${() => clickNotif(n)}>
-                <div class="notif-item-title">${n.title}</div>
-                ${n.body ? html`<div class="notif-item-body">${n.body}</div>` : null}
-                <div class="notif-item-time">${relTime(n.createdAt)}</div>
-              </button>`)}
+            : items.map(n => renderItem(n))}
         </div>` : null}
     </div>`;
 }