claudeck 1.1.1 → 1.2.0

package/public/js/ui/messages.js

@@ -297,6 +297,15 @@ export function addStatus(text, isError, pane) {
   scrollToBottom(pane);
 }
 
+export function addSkillUsedMessage(skillName, skillDescription, pane) {
+  pane = pane || getPane(null);
+  const div = document.createElement("div");
+  div.className = "skill-used-message";
+  div.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg><span><span class="skill-used-name">Skill used: ${escapeHtml(skillName)}</span>${skillDescription ? `<span class="skill-used-desc"> — ${escapeHtml(skillDescription)}</span>` : ""}</span>`;
+  pane.messagesDiv.appendChild(div);
+  scrollToBottom(pane);
+}
+
 export function appendCliOutput(data, pane) {
   pane = pane || getPane(null);
   const div = document.createElement("div");
@@ -334,10 +343,20 @@ export function renderMessagesIntoPane(messages, pane) {
     showWhalyPlaceholder(pane);
     return;
   }
+  // Track last assistant message ID for fork button placement
+  let lastAssistantMsgEl = null;
+  let lastAssistantMsgId = null;
+
   for (const msg of messages) {
     const data = JSON.parse(msg.content);
     switch (msg.role) {
       case "user": {
+        // Finalize previous assistant block with fork button
+        if (lastAssistantMsgEl && lastAssistantMsgId) {
+          addForkButton(lastAssistantMsgEl, lastAssistantMsgId);
+          lastAssistantMsgEl = null;
+          lastAssistantMsgId = null;
+        }
         // Extract file paths from saved <file path="..."> blocks
         const filePathMatches = (data.text || "").match(/<file path="([^"]+)">/g);
         const savedFilePaths = filePathMatches
@@ -352,15 +371,35 @@ export function renderMessagesIntoPane(messages, pane) {
       }
       case "assistant":
         appendAssistantText(data.text, pane);
+        // Track this assistant message element for fork button
+        if (pane.currentAssistantMsg) {
+          lastAssistantMsgEl = pane.currentAssistantMsg.closest(".msg-assistant");
+          lastAssistantMsgId = msg.id;
+        }
         break;
       case "tool":
+        // Render "Skill used" indicator for Skill tool_use messages
+        if (data.name === "Skill" && data.input?.skill) {
+          addSkillUsedMessage(data.input.skill, data.input.description || "", pane);
+        }
         appendToolIndicator(data.name, data.input, pane, data.id, false);
+        // Tools are part of assistant turn — update the tracking ID
+        if (!lastAssistantMsgEl) lastAssistantMsgEl = pane.messagesDiv.lastElementChild;
+        lastAssistantMsgId = msg.id;
         break;
       case "tool_result":
         appendToolResult(data.toolUseId, data.content, data.isError, pane);
+        if (!lastAssistantMsgEl) lastAssistantMsgEl = pane.messagesDiv.lastElementChild;
+        lastAssistantMsgId = msg.id;
         break;
       case "result":
         addResultSummary(data, pane);
+        // Result marks end of an assistant turn — add fork button on the assistant msg element
+        if (lastAssistantMsgEl && lastAssistantMsgId) {
+          addForkButton(lastAssistantMsgEl, lastAssistantMsgId);
+        }
+        lastAssistantMsgEl = null;
+        lastAssistantMsgId = null;
         break;
       case "error": {
         const errorParts = [];
@@ -371,11 +410,20 @@ export function renderMessagesIntoPane(messages, pane) {
         addStatus(errorParts.join(" \u00b7 ") || "Error", true, pane);
         break;
       }
+      case "skill":
+        addSkillUsedMessage(data.skill || data.name || "", data.description || "", pane);
+        break;
       case "aborted":
         addStatus("Aborted", true, pane);
         break;
     }
   }
+
+  // Add fork button to last assistant message if conversation ends with one
+  if (lastAssistantMsgEl && lastAssistantMsgId) {
+    addForkButton(lastAssistantMsgEl, lastAssistantMsgId);
+  }
+
   pane.currentAssistantMsg = null;
   // Hide token counter and reset — loading saved messages shouldn't show streaming stats
   setState("streamingCharCount", 0);
@@ -385,3 +433,13 @@ export function renderMessagesIntoPane(messages, pane) {
   addCopyButtons(pane.messagesDiv);
   renderMermaidBlocks(pane.messagesDiv);
 }
+
+function addForkButton(msgEl, messageId) {
+  if (!msgEl || msgEl.querySelector(".fork-btn")) return;
+  const btn = document.createElement("button");
+  btn.className = "fork-btn";
+  btn.dataset.messageId = messageId;
+  btn.title = "Fork conversation from here";
+  btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>`;
+  msgEl.appendChild(btn);
+}

package/public/js/ui/notification-bell.js

@@ -0,0 +1,240 @@
+// Notification bell — badge, dropdown, read/unread management
+import { on, emit } from '../core/events.js';
+
+const TYPE_ICONS = {
+  session: '\u{1F4AC}',
+  agent: '\u{1F916}',
+  workflow: '\u2699\uFE0F',
+  chain: '\u{1F517}',
+  dag: '\u{1F310}',
+  error: '\u26A0\uFE0F',
+  approval: '\u{1F512}',
+};
+
+let unreadCount = 0;
+let notifications = [];
+let dropdownOpen = false;
+let autoReadTimer = null;
+
+const bellBtn = document.getElementById('notif-bell-btn');
+const badge = document.getElementById('notif-badge');
+const dropdown = document.getElementById('notif-dropdown');
+
+function init() {
+  if (!bellBtn) return;
+  fetchUnreadCount();
+  on('ws:message', handleWsMessage);
+  on('ws:reconnected', fetchUnreadCount);
+  bellBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleDropdown(); });
+  document.addEventListener('click', handleOutsideClick);
+}
+
+async function fetchUnreadCount() {
+  try {
+    const res = await fetch('/api/notifications/unread-count');
+    if (!res.ok) return;
+    const data = await res.json();
+    updateBadge(data.count);
+  } catch { /* network error */ }
+}
+
+function toggleDropdown() {
+  dropdownOpen = !dropdownOpen;
+  if (dropdownOpen) {
+    fetchAndRender();
+    dropdown.classList.remove('hidden');
+  } else {
+    dropdown.classList.add('hidden');
+    clearAutoRead();
+  }
+}
+
+function closeDropdown() {
+  dropdownOpen = false;
+  dropdown.classList.add('hidden');
+  clearAutoRead();
+}
+
+async function fetchAndRender() {
+  try {
+    const res = await fetch('/api/notifications/history?limit=15');
+    if (!res.ok) return;
+    notifications = await res.json();
+    renderDropdown();
+    startAutoRead();
+  } catch { /* network error */ }
+}
+
+function renderDropdown() {
+  if (!notifications.length) {
+    dropdown.innerHTML = `
+      <div class="notif-dropdown-header">Notifications</div>
+      <div class="notif-empty">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+        No notifications yet
+      </div>`;
+    return;
+  }
+
+  const countLabel = unreadCount > 0 ? `<span>${unreadCount} unread</span>` : '';
+  let html = `<div class="notif-dropdown-header">Notifications ${countLabel}</div>`;
+  html += '<div class="notif-list">';
+  for (const n of notifications) {
+    html += renderItem(n);
+  }
+  html += '</div>';
+  html += `<div class="notif-footer">
+    <button class="notif-footer-btn" data-action="mark-all-read">Mark all read</button>
+    <button class="notif-footer-btn" data-action="view-all">View All</button>
+  </div>`;
+
+  dropdown.innerHTML = html;
+
+  // Wire events
+  dropdown.querySelector('[data-action="mark-all-read"]')?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    markAllRead();
+  });
+  dropdown.querySelector('[data-action="view-all"]')?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    closeDropdown();
+    emit('notification:show-history');
+  });
+
+  // Wire individual items
+  for (const el of dropdown.querySelectorAll('.notif-item')) {
+    el.addEventListener('click', () => onNotifClick(el.dataset.id));
+  }
+  for (const el of dropdown.querySelectorAll('.notif-dot')) {
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const id = parseInt(e.target.closest('.notif-item').dataset.id);
+      if (e.target.classList.contains('unread')) markAsRead([id]);
+    });
+  }
+}
+
+function renderItem(n) {
+  const isUnread = !n.read_at;
+  const icon = TYPE_ICONS[n.type] || '\u{1F514}';
+  return `<div class="notif-item ${isUnread ? 'unread' : ''}" data-id="${n.id}" data-session="${n.source_session_id || ''}">
+    <span class="notif-dot ${isUnread ? 'unread' : 'read'}"></span>
+    <span class="notif-icon">${icon}</span>
+    <div class="notif-content">
+      <div class="notif-title">${escapeHtml(n.title)}</div>
+      ${n.body ? `<div class="notif-body">${escapeHtml(n.body)}</div>` : ''}
+    </div>
+    <span class="notif-time">${timeAgo(n.created_at)}</span>
+  </div>`;
+}
+
+function updateBadge(count) {
+  unreadCount = count;
+  if (count > 0) {
+    badge.textContent = count > 99 ? '99+' : count;
+    badge.classList.remove('hidden');
+    bellBtn.classList.add('has-unread');
+  } else {
+    badge.classList.add('hidden');
+    bellBtn.classList.remove('has-unread');
+  }
+}
+
+function handleWsMessage(msg) {
+  if (msg.type === 'notification:new') {
+    updateBadge(msg.unreadCount);
+    if (dropdownOpen) {
+      notifications.unshift(msg.notification);
+      if (notifications.length > 15) notifications.pop();
+      renderDropdown();
+    }
+  } else if (msg.type === 'notification:read') {
+    updateBadge(msg.unreadCount);
+    if (dropdownOpen) {
+      for (const n of notifications) {
+        if (msg.ids.length === 0 || msg.ids.includes(n.id)) {
+          n.read_at = Math.floor(Date.now() / 1000);
+        }
+      }
+      renderDropdown();
+    }
+  }
+}
+
+function handleOutsideClick(e) {
+  if (dropdownOpen && !e.target.closest('.notif-bell')) {
+    closeDropdown();
+  }
+}
+
+// ── Read strategies ──────────────────────────────────────
+async function markAsRead(ids) {
+  try {
+    const res = await fetch('/api/notifications/read', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ids }),
+    });
+    if (!res.ok) return;
+    const data = await res.json();
+    updateBadge(data.unreadCount);
+    for (const n of notifications) {
+      if (ids.includes(n.id)) n.read_at = Math.floor(Date.now() / 1000);
+    }
+    renderDropdown();
+  } catch { /* network error */ }
+}
+
+async function markAllRead() {
+  try {
+    const res = await fetch('/api/notifications/read', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ all: true }),
+    });
+    if (!res.ok) return;
+    const data = await res.json();
+    updateBadge(data.unreadCount);
+    for (const n of notifications) n.read_at = Math.floor(Date.now() / 1000);
+    renderDropdown();
+  } catch { /* network error */ }
+}
+
+function startAutoRead() {
+  clearAutoRead();
+  const unreadIds = notifications.filter(n => !n.read_at).map(n => n.id);
+  if (unreadIds.length === 0) return;
+  autoReadTimer = setTimeout(() => markAsRead(unreadIds), 1500);
+}
+
+function clearAutoRead() {
+  if (autoReadTimer) { clearTimeout(autoReadTimer); autoReadTimer = null; }
+}
+
+function onNotifClick(idStr) {
+  const id = parseInt(idStr);
+  const n = notifications.find(n => n.id === id);
+  if (!n) return;
+  if (!n.read_at) markAsRead([id]);
+  if (n.source_session_id) {
+    closeDropdown();
+    emit('session:switch', n.source_session_id);
+  }
+}
+
+// ── Helpers ──────────────────────────────────────────────
+function timeAgo(unixTs) {
+  const diff = Math.floor(Date.now() / 1000) - unixTs;
+  if (diff < 60) return 'now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d`;
+  return new Date(unixTs * 1000).toLocaleDateString();
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+init();

package/public/js/ui/notification-history.js

@@ -0,0 +1,210 @@
+// Notification history modal — full paginated view with filters
+import { on } from '../core/events.js';
+
+const TYPE_ICONS = {
+  session: '\u{1F4AC}',
+  agent: '\u{1F916}',
+  workflow: '\u2699\uFE0F',
+  chain: '\u{1F517}',
+  dag: '\u{1F310}',
+  error: '\u26A0\uFE0F',
+  approval: '\u{1F512}',
+};
+
+let overlay = null;
+let items = [];
+let offset = 0;
+let hasMore = true;
+let filterType = '';
+let filterStatus = '';
+let selectedIds = new Set();
+
+function init() {
+  on('notification:show-history', openModal);
+}
+
+function openModal() {
+  if (overlay) return;
+  items = [];
+  offset = 0;
+  hasMore = true;
+  filterType = '';
+  filterStatus = '';
+  selectedIds.clear();
+
+  overlay = document.createElement('div');
+  overlay.className = 'notif-history-overlay';
+  overlay.innerHTML = `
+    <div class="notif-history-modal">
+      <div class="notif-history-header">
+        <h2>Notification History</h2>
+        <button class="notif-history-close">&times;</button>
+      </div>
+      <div class="notif-history-filters">
+        <select class="notif-filter-select" id="notif-filter-type">
+          <option value="">All Types</option>
+          <option value="agent">Agent</option>
+          <option value="error">Error</option>
+          <option value="workflow">Workflow</option>
+          <option value="chain">Chain</option>
+          <option value="dag">DAG</option>
+          <option value="session">Session</option>
+          <option value="approval">Approval</option>
+        </select>
+        <select class="notif-filter-select" id="notif-filter-status">
+          <option value="">All</option>
+          <option value="unread">Unread Only</option>
+          <option value="read">Read Only</option>
+        </select>
+        <div class="notif-bulk-actions">
+          <button class="notif-bulk-btn" id="notif-bulk-read">Mark Selected Read</button>
+          <button class="notif-bulk-btn danger" id="notif-bulk-purge">Purge Old</button>
+        </div>
+      </div>
+      <div class="notif-history-list" id="notif-history-list"></div>
+      <div class="notif-load-more" id="notif-load-more" style="display:none">
+        <button class="notif-load-more-btn">Load More</button>
+      </div>
+    </div>`;
+
+  document.body.appendChild(overlay);
+
+  // Wire events
+  overlay.querySelector('.notif-history-close').addEventListener('click', closeModal);
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
+  overlay.querySelector('#notif-filter-type').addEventListener('change', (e) => { filterType = e.target.value; resetAndFetch(); });
+  overlay.querySelector('#notif-filter-status').addEventListener('change', (e) => { filterStatus = e.target.value; resetAndFetch(); });
+  overlay.querySelector('#notif-bulk-read').addEventListener('click', bulkMarkRead);
+  overlay.querySelector('#notif-bulk-purge').addEventListener('click', bulkPurge);
+  overlay.querySelector('#notif-load-more .notif-load-more-btn').addEventListener('click', fetchMore);
+
+  // Keyboard
+  const onKey = (e) => { if (e.key === 'Escape') closeModal(); };
+  document.addEventListener('keydown', onKey);
+  overlay._keyHandler = onKey;
+
+  fetchMore();
+}
+
+function closeModal() {
+  if (!overlay) return;
+  document.removeEventListener('keydown', overlay._keyHandler);
+  overlay.remove();
+  overlay = null;
+}
+
+function resetAndFetch() {
+  items = [];
+  offset = 0;
+  hasMore = true;
+  selectedIds.clear();
+  const list = overlay?.querySelector('#notif-history-list');
+  if (list) list.innerHTML = '';
+  fetchMore();
+}
+
+async function fetchMore() {
+  if (!hasMore) return;
+  const params = new URLSearchParams({ limit: '30', offset: String(offset) });
+  if (filterType) params.set('type', filterType);
+  if (filterStatus === 'unread') params.set('unread_only', 'true');
+
+  try {
+    const res = await fetch(`/api/notifications/history?${params}`);
+    if (!res.ok) return;
+    let batch = await res.json();
+
+    // Client-side filter for "read only"
+    if (filterStatus === 'read') {
+      batch = batch.filter(n => n.read_at);
+    }
+
+    if (batch.length < 30) hasMore = false;
+    offset += batch.length;
+    items.push(...batch);
+    renderList();
+  } catch { /* network error */ }
+}
+
+function renderList() {
+  const list = overlay?.querySelector('#notif-history-list');
+  if (!list) return;
+
+  if (items.length === 0) {
+    list.innerHTML = '<div class="notif-empty" style="padding:40px">No notifications found</div>';
+    toggleLoadMore(false);
+    return;
+  }
+
+  let html = '';
+  for (const n of items) {
+    const isUnread = !n.read_at;
+    const checked = selectedIds.has(n.id) ? 'checked' : '';
+    const icon = TYPE_ICONS[n.type] || '\u{1F514}';
+    html += `<div class="notif-history-item ${isUnread ? 'unread' : ''}" data-id="${n.id}">
+      <input type="checkbox" ${checked} data-id="${n.id}">
+      <span class="notif-icon">${icon}</span>
+      <div class="notif-content">
+        <div class="notif-title">${escapeHtml(n.title)}</div>
+        ${n.body ? `<div class="notif-body">${escapeHtml(n.body)}</div>` : ''}
+      </div>
+      <span class="notif-time">${formatTime(n.created_at)}</span>
+    </div>`;
+  }
+  list.innerHTML = html;
+
+  // Wire checkboxes
+  for (const cb of list.querySelectorAll('input[type="checkbox"]')) {
+    cb.addEventListener('change', (e) => {
+      const id = parseInt(e.target.dataset.id);
+      if (e.target.checked) selectedIds.add(id); else selectedIds.delete(id);
+    });
+  }
+
+  toggleLoadMore(hasMore);
+}
+
+function toggleLoadMore(show) {
+  const el = overlay?.querySelector('#notif-load-more');
+  if (el) el.style.display = show ? 'flex' : 'none';
+}
+
+async function bulkMarkRead() {
+  if (selectedIds.size === 0) return;
+  const ids = [...selectedIds];
+  try {
+    await fetch('/api/notifications/read', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ids }),
+    });
+    for (const n of items) {
+      if (ids.includes(n.id)) n.read_at = Math.floor(Date.now() / 1000);
+    }
+    selectedIds.clear();
+    renderList();
+  } catch { /* network error */ }
+}
+
+async function bulkPurge() {
+  try {
+    await fetch('/api/notifications/old', { method: 'DELETE' });
+    resetAndFetch();
+  } catch { /* network error */ }
+}
+
+function formatTime(unixTs) {
+  const d = new Date(unixTs * 1000);
+  const diff = Math.floor(Date.now() / 1000) - unixTs;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
+    ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+init();

package/public/js/ui/parallel.js

@@ -3,6 +3,7 @@ import { $ } from '../core/dom.js';
 import { getState, setState } from '../core/store.js';
 import { CHAT_IDS } from '../core/constants.js';
 import { handleAutocompleteKeydown, handleSlashAutocomplete } from './commands.js';
+import { handleHistoryKeydown } from '../features/input-history.js';
 
 // Panes map — chatId -> pane state object
 export const panes = new Map();
@@ -94,6 +95,9 @@ export function createChatPane(chatId, index) {
 
   textarea.addEventListener("keydown", (e) => {
     if (handleAutocompleteKeydown(e, state)) return;
+    // Lazy import to avoid circular dependency — getInputHistory is set by chat.js
+    const history = _getInputHistory();
+    if (history && handleHistoryKeydown(e, state, history)) return;
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       sendMessage(state);
@@ -101,6 +105,8 @@ export function createChatPane(chatId, index) {
   });
 
   textarea.addEventListener("input", () => {
+    const history = _getInputHistory();
+    if (history && history.isNavigating) history.reset();
     textarea.style.height = "auto";
     textarea.style.height = Math.min(textarea.scrollHeight, 80) + "px";
     handleSlashAutocomplete(state);
@@ -161,6 +167,11 @@ export function exitParallelMode() {
   }
 }
 
+// Lazy getter for input history to avoid circular dependency
+let _inputHistoryGetter = null;
+export function _setInputHistoryGetter(fn) { _inputHistoryGetter = fn; }
+function _getInputHistory() { return _inputHistoryGetter ? _inputHistoryGetter() : null; }
+
 // Lazy getter for chat.js functions to avoid circular dependency
 let _chatFns = null;
 function _getLazyChatFns() {

package/public/js/ui/tab-sdk.js

@@ -651,7 +651,7 @@ function reorderPluginTabs(enabledNames) {
 }
 
 /** Built-in (hardcoded) tab IDs that are never managed by the marketplace */
-const BUILTIN_TABS = new Set(['files', 'git', 'memory', 'mcp', 'tips', 'assistant', 'tab-sdk', 'architecture', 'adding-features']);
+const BUILTIN_TABS = new Set(['files', 'git', 'memory', 'mcp', 'tips', 'assistant', 'skills', 'tab-sdk', 'architecture', 'adding-features']);
 
 function isPluginTab(tabId) {
   return !BUILTIN_TABS.has(tabId);

package/public/style.css

@@ -33,8 +33,12 @@
 @import url("css/features/agent-monitor.css");
 @import url("css/features/agent-sidebar.css");
 @import url("css/ui/status-bar.css");
+@import url("css/ui/notification-bell.css");
+@import url("css/ui/input-history.css");
+@import url("css/ui/worktree.css");
 @import url("css/panels/memory.css");
 @import url("css/panels/dev-docs.css");
+@import url("css/panels/skills-manager.css");
 @import url("css/features/telegram.css");
 @import url("css/features/voice-input.css");
 @import url("css/features/retro-terminal.css");

package/server/agent-loop.js

@@ -34,6 +34,7 @@ import { sendTelegramNotification } from "./telegram-sender.js";
 import { buildAgentMemoryPrompt } from "./memory-injector.js";
 import { captureMemories } from "./memory-extractor.js";
 import { saveExplicitMemories } from "./memory-injector.js";
+import { logNotification } from "./notification-logger.js";
 
 /**
  * Build the agent system prompt that instructs Claude to work autonomously
@@ -302,6 +303,12 @@ export async function runAgent({
             recordAgentRunComplete(monitorRunId, agentId, 'completed', numTurns, costUsd, durationMs, inputTokens, outputTokens);
           } catch (e) { /* ignore */ }
 
+          // Log notification
+          logNotification('agent', `Agent "${agentDef.title}" completed`,
+            `${numTurns} turns · $${costUsd.toFixed(4)} · ${(durationMs / 1000).toFixed(1)}s`,
+            JSON.stringify({ costUsd, durationMs, inputTokens, outputTokens, turns: numTurns }),
+            resolvedSid, agentId);
+
           // Store agent output as shared context for downstream agents
           if (runId && lastAssistantText) {
             const summary = lastAssistantText.length > 4000
@@ -339,6 +346,12 @@ export async function runAgent({
           try {
             recordAgentRunComplete(monitorRunId, agentId, 'error', numTurns, costUsd, durationMs, inputTokens, outputTokens, errMsg);
           } catch (e) { /* ignore */ }
+
+          // Log error notification
+          logNotification('error', `Agent "${agentDef.title}" failed`,
+            errMsg.slice(0, 200),
+            JSON.stringify({ costUsd, durationMs, error: errMsg }),
+            resolvedSid, agentId);
         }
         continue;
       }

package/server/notification-logger.js

@@ -0,0 +1,27 @@
+import { createNotification, getUnreadNotificationCount } from "../db.js";
+
+let wss = null;
+
+export function setWss(wssInstance) {
+  wss = wssInstance;
+}
+
+function broadcast(payload) {
+  if (!wss) return;
+  const data = JSON.stringify(payload);
+  for (const client of wss.clients) {
+    if (client.readyState === 1) client.send(data);
+  }
+}
+
+export function logNotification(type, title, body = null, metadata = null, sourceSessionId = null, sourceAgentId = null) {
+  const notification = createNotification(type, title, body, metadata, sourceSessionId, sourceAgentId);
+  const unreadCount = getUnreadNotificationCount();
+  broadcast({ type: "notification:new", notification, unreadCount });
+  return notification;
+}
+
+export function broadcastReadUpdate(ids) {
+  const unreadCount = getUnreadNotificationCount();
+  broadcast({ type: "notification:read", ids, unreadCount });
+}