clementine-agent 1.18.97 → 1.18.99

package/dist/cli/dashboard.js

@@ -24598,10 +24598,43 @@ var _runListState = {
   filterStatus: 'all',     // 'all' | 'failed' | 'ok'
   filterWindow: '24h',     // '24h' | '7d' | 'all'
   filterCategory: 'all',   // 'all' | <one of the 11 PRD failure categories>
+  filterTrigger: 'all',    // 'all' | manual | scheduled | after | api | webhook (PRD §6 Run.trigger)
   filterText: '',          // free-text task name match
+  activeView: 'failures-24h', // PRD §5.3: which Saved View chip is lit
   data: [],                // raw runs from /api/cron/runs
 };
 
+// PRD §5.3 / 1.18.99: built-in saved views shipped with the dashboard. Users
+// can layer their own on top via "Save current view" — those live in
+// localStorage under runListSavedViews. activeView tracks which chip is lit;
+// "custom" means the user manually edited filters since picking a view.
+var _runListBuiltinViews = [
+  { id: 'failures-24h', label: 'Failures · 24h', desc: 'Errored / timed-out / lost runs in the last 24h — the triage queue.',
+    filters: { filterStatus: 'failed', filterWindow: '24h', filterCategory: 'all', filterTrigger: 'all', filterText: '' } },
+  { id: 'failures-7d', label: 'Failures · 7d', desc: 'All failures across the week — spot recurring categories.',
+    filters: { filterStatus: 'failed', filterWindow: '7d', filterCategory: 'all', filterTrigger: 'all', filterText: '' } },
+  { id: 'all-24h', label: 'All · 24h', desc: 'Every run from the last 24h regardless of status.',
+    filters: { filterStatus: 'all', filterWindow: '24h', filterCategory: 'all', filterTrigger: 'all', filterText: '' } },
+  { id: 'manual-24h', label: 'Manual · 24h', desc: 'Only runs you fired by hand.',
+    filters: { filterStatus: 'all', filterWindow: '24h', filterCategory: 'all', filterTrigger: 'manual', filterText: '' } },
+  { id: 'ok-7d', label: 'OK · 7d', desc: 'Successful runs only — verify a task is healthy.',
+    filters: { filterStatus: 'ok', filterWindow: '7d', filterCategory: 'all', filterTrigger: 'all', filterText: '' } },
+];
+
+function _runListLoadSavedViews() {
+  try {
+    var raw = localStorage.getItem('runListSavedViews');
+    if (!raw) return [];
+    var parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (e) { return []; }
+}
+
+function _runListPersistSavedViews(views) {
+  try { localStorage.setItem('runListSavedViews', JSON.stringify(views)); }
+  catch (e) { /* quota or disabled — non-fatal */ }
+}
+
 function _runListLoadDefaultView() {
   // First-time visit: PRD §5.3 — default Saved View is "Failures (last 24h)".
   try {
@@ -24611,15 +24644,18 @@ function _runListLoadDefaultView() {
       _runListState.filterStatus = saved.filterStatus || 'all';
       _runListState.filterWindow = saved.filterWindow || '24h';
       _runListState.filterCategory = saved.filterCategory || 'all';
+      _runListState.filterTrigger = saved.filterTrigger || 'all';
       _runListState.filterText = saved.filterText || '';
+      _runListState.activeView = saved.activeView || 'custom';
       return;
     }
   } catch (e) { /* ignore */ }
-  // Default: failures, last 24h, all categories.
   _runListState.filterStatus = 'failed';
   _runListState.filterWindow = '24h';
   _runListState.filterCategory = 'all';
+  _runListState.filterTrigger = 'all';
   _runListState.filterText = '';
+  _runListState.activeView = 'failures-24h';
 }
 
 function _runListSaveView() {
@@ -24628,11 +24664,71 @@ function _runListSaveView() {
       filterStatus: _runListState.filterStatus,
       filterWindow: _runListState.filterWindow,
       filterCategory: _runListState.filterCategory,
+      filterTrigger: _runListState.filterTrigger,
       filterText: _runListState.filterText,
+      activeView: _runListState.activeView,
     }));
   } catch (e) { /* ignore */ }
 }
 
+function applyRunListView(id) {
+  if (id === 'custom') { _runListState.activeView = 'custom'; _runListSaveView(); return; }
+  var view = null;
+  for (var i = 0; i < _runListBuiltinViews.length; i++) {
+    if (_runListBuiltinViews[i].id === id) { view = _runListBuiltinViews[i]; break; }
+  }
+  if (!view) {
+    var saved = _runListLoadSavedViews();
+    for (var j = 0; j < saved.length; j++) {
+      if (saved[j].id === id) { view = saved[j]; break; }
+    }
+  }
+  if (!view) return;
+  _runListState.filterStatus = view.filters.filterStatus || 'all';
+  _runListState.filterWindow = view.filters.filterWindow || '24h';
+  _runListState.filterCategory = view.filters.filterCategory || 'all';
+  _runListState.filterTrigger = view.filters.filterTrigger || 'all';
+  _runListState.filterText = view.filters.filterText || '';
+  _runListState.activeView = view.id;
+  _runListSaveView();
+  if (typeof refreshRunList === 'function') refreshRunList();
+}
+
+function saveCurrentRunListView() {
+  var name = prompt('Name this view:', '');
+  if (!name) return;
+  name = String(name).trim();
+  if (!name) return;
+  var id = 'user-' + name.toLowerCase().replace(/[^a-z0-9]+/g, '-').slice(0, 40);
+  var views = _runListLoadSavedViews();
+  views = views.filter(function(v) { return v.id !== id; });
+  views.push({
+    id: id, label: name, desc: 'User-defined view',
+    filters: {
+      filterStatus: _runListState.filterStatus,
+      filterWindow: _runListState.filterWindow,
+      filterCategory: _runListState.filterCategory,
+      filterTrigger: _runListState.filterTrigger,
+      filterText: _runListState.filterText,
+    },
+  });
+  _runListPersistSavedViews(views);
+  _runListState.activeView = id;
+  _runListSaveView();
+  toast('Saved view "' + name + '"', 'success');
+  if (typeof refreshRunList === 'function') refreshRunList();
+}
+
+function deleteRunListView(id) {
+  var views = _runListLoadSavedViews();
+  var filtered = views.filter(function(v) { return v.id !== id; });
+  if (filtered.length === views.length) return;
+  if (!confirm('Delete this saved view? This cannot be undone.')) return;
+  _runListPersistSavedViews(filtered);
+  if (_runListState.activeView === id) applyRunListView('failures-24h');
+  else if (typeof refreshRunList === 'function') refreshRunList();
+}
+
 function _runListApplyFilters(runs) {
   var now = Date.now();
   var windowMs = _runListState.filterWindow === '24h' ? 24 * 60 * 60 * 1000
@@ -24640,6 +24736,7 @@ function _runListApplyFilters(runs) {
     : Infinity;
   var query = (_runListState.filterText || '').trim().toLowerCase();
   var catFilter = _runListState.filterCategory;
+  var trigFilter = _runListState.filterTrigger;
   return runs.filter(function(r) {
     if (_runListState.filterStatus === 'failed') {
       if (r.status !== 'error' && r.status !== 'timeout' && r.status !== 'lost') return false;
@@ -24649,6 +24746,12 @@ function _runListApplyFilters(runs) {
     if (catFilter && catFilter !== 'all') {
       if (r.failureCategory !== catFilter) return false;
     }
+    // PRD §6 / 1.18.99: trigger filter. Pre-1.18.84 runs lack the field;
+    // they fall through unless the user has explicitly picked a single
+    // trigger (those rows then drop out as "unknown source").
+    if (trigFilter && trigFilter !== 'all') {
+      if ((r.trigger || 'scheduled') !== trigFilter) return false;
+    }
     if (query && String(r.jobName || '').toLowerCase().indexOf(query) === -1) return false;
     if (windowMs !== Infinity && r.startedAt) {
       var age = now - new Date(r.startedAt).getTime();
@@ -24689,6 +24792,37 @@ function renderRunListBody(allRuns) {
   // Header
   html += '<div style="margin-bottom:18px"><h2 style="margin:0 0 4px;font-size:18px;font-weight:600;color:var(--text-primary)">Runs</h2>'
     +    '<div style="font-size:12px;color:var(--text-muted)">'+ filtered.length +' of '+ allRuns.length +' total runs · default view: <strong>Failures (last 24h)</strong></div></div>';
+
+  // PRD §5.3 / 1.18.99: Saved Views row. Built-ins + user-saved chips, with
+  // the active view highlighted. "Save current" persists the active filter
+  // set under a user-supplied name.
+  var userViews = _runListLoadSavedViews();
+  html += '<div style="display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap">';
+  html += '<span style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em;margin-right:4px">View</span>';
+  for (var vbi = 0; vbi < _runListBuiltinViews.length; vbi++) {
+    var bv = _runListBuiltinViews[vbi];
+    var bvActive = _runListState.activeView === bv.id;
+    var bvBg = bvActive ? 'var(--accent)' : 'var(--bg-secondary)';
+    var bvFg = bvActive ? '#fff' : 'var(--text-primary)';
+    html += '<button class="btn-sm" title="' + esc(bv.desc) + '" onclick="applyRunListView(\\x27' + jsStr(bv.id) + '\\x27)" style="font-size:11px;padding:4px 10px;background:' + bvBg + ';color:' + bvFg + ';border:1px solid var(--border);border-radius:999px">' + esc(bv.label) + '</button>';
+  }
+  if (userViews.length > 0) {
+    html += '<span style="display:inline-block;width:1px;height:20px;background:var(--border);margin:0 4px"></span>';
+    for (var uvi = 0; uvi < userViews.length; uvi++) {
+      var uv = userViews[uvi];
+      var uvActive = _runListState.activeView === uv.id;
+      var uvBg = uvActive ? 'var(--accent)' : 'var(--bg-secondary)';
+      var uvFg = uvActive ? '#fff' : 'var(--text-primary)';
+      html += '<span style="display:inline-flex;align-items:center;gap:0">'
+        + '<button class="btn-sm" title="' + esc(uv.desc || 'User-defined view') + '" onclick="applyRunListView(\\x27' + jsStr(uv.id) + '\\x27)" style="font-size:11px;padding:4px 10px;background:' + uvBg + ';color:' + uvFg + ';border:1px solid var(--border);border-radius:999px 0 0 999px;border-right:none">⭐ ' + esc(uv.label) + '</button>'
+        + '<button class="btn-sm" title="Delete this saved view" onclick="event.stopPropagation();deleteRunListView(\\x27' + jsStr(uv.id) + '\\x27)" style="font-size:11px;padding:4px 8px;background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border);border-radius:0 999px 999px 0">×</button>'
+        + '</span>';
+    }
+  }
+  html += '<span style="flex:1"></span>';
+  html += '<button class="btn-sm" onclick="saveCurrentRunListView()" title="Save the current filter set as a named view" style="font-size:11px;padding:4px 10px">+ Save current</button>';
+  html += '</div>';
+
   // Filter row — saved automatically to localStorage on change.
   html += '<div style="display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap">';
   html += _runListChip('Status', [
@@ -24701,6 +24835,16 @@ function renderRunListBody(allRuns) {
     { value: '7d',  label: 'Last 7 days' },
     { value: 'all', label: 'All time' },
   ], 'filterWindow');
+  // PRD §6 / 1.18.99: trigger filter. Always shown so users can drill into
+  // "what manual ones did I run today" without depending on data.
+  html += _runListChip('Trigger', [
+    { value: 'all',       label: 'Any source' },
+    { value: 'manual',    label: 'Manual' },
+    { value: 'scheduled', label: 'Scheduled' },
+    { value: 'after',     label: 'After-chained' },
+    { value: 'api',       label: 'API' },
+    { value: 'webhook',   label: 'Webhook' },
+  ], 'filterTrigger');
   // PRD §9 / 1.18.87: 11-category failure filter. Build the option list from
   // the categories actually present in the loaded data so the chip row stays
   // compact (don't show buckets that have zero runs).
@@ -24723,11 +24867,30 @@ function renderRunListBody(allRuns) {
     html += '<div class="empty-state" style="padding:36px 24px;text-align:center;color:var(--text-muted)"><div style="font-size:14px;margin-bottom:6px">No runs match the current filter.</div><div style="font-size:12px">Try widening the time window or clearing the task-name filter.</div></div>';
     return html;
   }
+  // PRD §5.3 Phase 5.3c / 1.18.99: column sort. Apply the current
+  // sortBy/sortDir AFTER filtering so users see the natural ordering of
+  // their narrowed dataset. Stable: missing values sort to the end.
+  filtered.sort(_runListComparator(_runListState.sortBy, _runListState.sortDir));
   // Table — same shape as the Recent History list on the Tasks page,
-  // but sortable and with a Trigger + Cost column.
+  // but sortable and with a Trigger + Cost column. Helper renders an
+  // active-state arrow when a column is the current sortBy target.
+  function sortHdr(col, label, title) {
+    var active = _runListState.sortBy === col;
+    var arrow = active ? (_runListState.sortDir === 'asc' ? ' ↑' : ' ↓') : '';
+    var titleAttr = title ? ' title="' + esc(title) + '"' : '';
+    var color = active ? 'var(--text-primary)' : 'var(--text-muted)';
+    return '<div' + titleAttr + ' onclick="setRunListSort(\\x27' + jsStr(col) + '\\x27)" style="cursor:pointer;color:' + color + ';user-select:none">' + esc(label) + esc(arrow) + '</div>';
+  }
   html += '<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)">';
   html += '<div style="display:grid;grid-template-columns:24px 24px minmax(180px,1.2fr) 80px minmax(160px,1fr) 70px 70px auto;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:500">'
-    +    '<div></div><div title="Goal verdict">Goal</div><div>Task</div><div>Trigger</div><div>Started</div><div>Duration</div><div title="Total cost in USD">Cost</div><div></div>'
+    +    '<div></div>'
+    +    '<div title="Goal verdict">Goal</div>'
+    +    sortHdr('jobName', 'Task', 'Click to sort by name')
+    +    '<div>Trigger</div>'
+    +    sortHdr('startedAt', 'Started', 'Click to sort by start time')
+    +    sortHdr('durationMs', 'Duration', 'Click to sort by duration')
+    +    sortHdr('totalCostUsd', 'Cost', 'Click to sort by cost')
+    +    '<div></div>'
     + '</div>';
   for (var i = 0; i < filtered.length; i++) {
     var entry = filtered[i] || {};
@@ -24844,6 +25007,10 @@ function _runListChip(label, options, stateKey) {
 
 function onRunListChipClick(key, value) {
   _runListState[key] = value;
+  // PRD §5.3 / 1.18.99: any manual filter change drops out of the active
+  // saved view — the chip row deselects to make it obvious you're now on
+  // a custom filter set.
+  _runListState.activeView = 'custom';
   _runListSaveView();
   var panel = document.getElementById('panel-runs');
   if (panel) panel.innerHTML = renderRunListBody(_runListState.data);
@@ -24851,6 +25018,7 @@ function onRunListChipClick(key, value) {
 
 function onRunListSearch(value) {
   _runListState.filterText = value;
+  _runListState.activeView = 'custom';
   _runListSaveView();
   // Debounce-by-render: just re-render. Filtering is in-memory + cheap.
   var panel = document.getElementById('panel-runs');
@@ -24858,13 +25026,10 @@ function onRunListSearch(value) {
 }
 
 function resetRunListFilters() {
-  _runListState.filterStatus = 'failed';
-  _runListState.filterWindow = '24h';
-  _runListState.filterCategory = 'all';
-  _runListState.filterText = '';
-  _runListSaveView();
-  var panel = document.getElementById('panel-runs');
-  if (panel) panel.innerHTML = renderRunListBody(_runListState.data);
+  // Reset jumps back to the default Failures · 24h built-in view, which
+  // also lights up that chip again so users see the round-trip.
+  applyRunListView('failures-24h');
+  return;
 }
 
 // Wire the panel's click handler so clicking anywhere on a row opens the
@@ -34035,41 +34200,281 @@ async function loadAgentProjectOptions(selected) {
   } catch(e) { /* projects are optional */ }
 }
 
+// ── Equipment panel ────────────────────────────────────────────────
+// Renders the unified tool/CLI/MCP/Composio/Project picker with type
+// badges, status pills, and category grouping. Status pills surface the
+// connected/installed/blocked flags that the previous renderer dropped,
+// so users can see at a glance whether a tool will actually work for
+// this agent. Local Projects are first-class entries (name format:
+// 'project:/abs/path') so a single check grants the agent access to the
+// project; project-scoped MCP servers appear as their own categories.
+// Composio toolkits are surfaced when isComposioEnabled.
+var _agentToolsState = {
+  filter: 'all',
+  search: '',
+  data: null,        // {categories, composioError}
+  selected: new Set(),
+};
+
 async function loadAgentToolOptions(selectedTools) {
+  var panel = document.getElementById('agent-tools-panel');
+  if (!panel) return;
+  panel.innerHTML = '<div style="color:var(--text-muted);font-size:12px">Loading tools...</div>';
+  _agentToolsState.selected = new Set(selectedTools || []);
   try {
     var r = await apiFetch('/api/available-tools');
     var d = await r.json();
-    var panel = document.getElementById('agent-tools-panel');
-    panel.innerHTML = '';
-    var selected = selectedTools || [];
-    for (var cat in d.categories) {
-      var header = document.createElement('div');
-      header.style.cssText = 'font-weight:600;font-size:11px;color:var(--text-muted);margin:8px 0 4px;cursor:pointer;user-select:none';
-      header.textContent = '▸ ' + cat;
-      header.dataset.category = cat;
-      header.onclick = (function(catName, hdr) { return function() {
-        var cbs = panel.querySelectorAll('.agent-tool-cb[data-cat="' + catName + '"]');
-        var allChecked = Array.from(cbs).every(function(cb) { return cb.checked; });
-        cbs.forEach(function(cb) { cb.checked = !allChecked; });
-      }; })(cat, header);
-      panel.appendChild(header);
-      d.categories[cat].forEach(function(tool) {
-        var toolName = typeof tool === 'string' ? tool : tool.name;
-        var toolLabel = typeof tool === 'string' ? tool : (tool.name + (tool.description ? ' — ' + tool.description : ''));
-        var label = document.createElement('label');
-        label.style.cssText = 'display:block;font-size:12px;padding:2px 0 2px 8px;cursor:pointer';
-        var checked = selected.indexOf(toolName) >= 0 ? ' checked' : '';
-        label.innerHTML = '<input type="checkbox" class="agent-tool-cb" data-cat="' + cat + '" value="' + toolName + '"' + checked + ' style="margin-right:6px">' + toolLabel;
-        panel.appendChild(label);
+    _agentToolsState.data = d;
+    renderAgentToolPanel();
+  } catch(e) {
+    panel.innerHTML = '<div style="color:var(--red);font-size:12px">Failed to load tools: ' + esc(String(e)) + '</div>';
+  }
+}
+
+function renderAgentToolPanel() {
+  var panel = document.getElementById('agent-tools-panel');
+  var summary = document.getElementById('agent-tools-summary');
+  if (!panel) return;
+  var d = _agentToolsState.data;
+  if (!d || !d.categories) { panel.innerHTML = ''; return; }
+
+  panel.innerHTML = '';
+  var totalEnabled = 0;
+  var totalCount = 0;
+  var typeOrder = { 'sdk': 0, 'cli': 1, 'mcp': 2, 'api': 3, 'project-mcp': 4, 'project': 5, 'composio': 6 };
+
+  Object.keys(d.categories).forEach(function(cat) {
+    var entries = d.categories[cat] || [];
+    var catEnabledCount = 0;
+    entries.forEach(function(t) { if (_agentToolsState.selected.has(typeof t === 'string' ? t : t.name)) catEnabledCount++; });
+    totalCount += entries.length;
+    totalEnabled += catEnabledCount;
+
+    var header = document.createElement('div');
+    header.className = 'agent-tool-cat';
+    header.dataset.category = cat;
+    header.innerHTML = '▸ ' + esc(cat) + '<span class="cat-count">' + catEnabledCount + '/' + entries.length + '</span>';
+    header.onclick = (function(catName) { return function() {
+      var rows = panel.querySelectorAll('.agent-tool-cb[data-cat="' + cssAttrEsc(catName) + '"]');
+      var visible = Array.from(rows).filter(function(cb) {
+        return !cb.closest('.agent-tool-row.hidden');
       });
+      var allChecked = visible.length > 0 && visible.every(function(cb) { return cb.checked; });
+      visible.forEach(function(cb) {
+        cb.checked = !allChecked;
+        if (cb.checked) _agentToolsState.selected.add(cb.value);
+        else _agentToolsState.selected.delete(cb.value);
+      });
+      renderAgentToolPanel();
+    }; })(cat);
+    panel.appendChild(header);
+
+    entries.slice().sort(function(a, b) {
+      var ta = typeOrder[a.type]; if (ta === undefined) ta = 9;
+      var tb = typeOrder[b.type]; if (tb === undefined) tb = 9;
+      if (ta !== tb) return ta - tb;
+      return String(a.name || '').localeCompare(String(b.name || ''));
+    }).forEach(function(tool) {
+      panel.appendChild(buildAgentToolRow(cat, tool));
+    });
+  });
+
+  if (summary) {
+    var msg = totalEnabled + ' of ' + totalCount + ' enabled';
+    if (d.composioError) msg += ' · Composio: ' + d.composioError;
+    summary.textContent = msg;
+  }
+
+  filterAgentTools();
+}
+
+function buildAgentToolRow(cat, tool) {
+  var name = typeof tool === 'string' ? tool : tool.name;
+  var description = typeof tool === 'string' ? '' : (tool.description || '');
+  var type = typeof tool === 'string' ? '' : (tool.type || '');
+  var displayName = (typeof tool === 'object' && tool.displayName) ? tool.displayName
+    : (type === 'project' && tool.projectName) ? tool.projectName
+    : name;
+  var checked = _agentToolsState.selected.has(name);
+
+  // Status pill — surfaces the flags the old renderer threw away.
+  var statusClass = 'ready';
+  var statusLabel = 'Ready';
+  var setupTarget = '';
+  if (type === 'cli') {
+    if (tool.blocked) { statusClass = 'blocked'; statusLabel = 'Blocked'; }
+    else if (tool.installed === false) { statusClass = 'not-installed'; statusLabel = 'Not installed'; }
+  } else if (type === 'api' || type === 'composio') {
+    if (tool.connected === false) { statusClass = 'needs-setup'; statusLabel = 'Connect'; setupTarget = 'integrations'; }
+  } else if (type === 'project') {
+    if (tool.connected === false) { statusClass = 'needs-setup'; statusLabel = 'Path missing'; }
+  } else if (type === 'mcp' && tool.connected === false) {
+    statusClass = 'needs-setup'; statusLabel = 'Configure'; setupTarget = 'settings';
+  }
+
+  var row = document.createElement('label');
+  row.className = 'agent-tool-row';
+  row.dataset.cat = cat;
+  row.dataset.search = (name + ' ' + description + ' ' + cat + ' ' + (displayName || '')).toLowerCase();
+  row.dataset.status = statusClass;
+  row.dataset.enabled = checked ? '1' : '0';
+  row.title = description ? (name + ' — ' + description) : name;
+
+  var badgeLabel = type === 'project-mcp' ? 'PROJ-MCP' : type;
+  var badge = type ? '<span class="tt-badge ' + esc(type) + '">' + esc(badgeLabel) + '</span>' : '';
+  var pathHint = (type === 'project' && tool.path) ? ' <span style="color:var(--text-muted);font-size:10px">' + esc(tool.path) + '</span>' : '';
+  var statusEl;
+  if (setupTarget) {
+    statusEl = '<a class="tt-status ' + statusClass + '" href="#" onclick="event.preventDefault();event.stopPropagation();navigateTo(\'' + setupTarget + '\');hideAgentModal();" style="text-decoration:none"><span class="tt-dot"></span>' + esc(statusLabel) + ' →</a>';
+  } else {
+    statusEl = '<span class="tt-status ' + statusClass + '"><span class="tt-dot"></span>' + esc(statusLabel) + '</span>';
+  }
+
+  row.innerHTML =
+    '<input type="checkbox" class="agent-tool-cb" data-cat="' + esc(cat) + '" value="' + esc(name) + '"' + (checked ? ' checked' : '') + ' style="accent-color:var(--blue)">' +
+    badge +
+    '<span class="tt-name">' + esc(displayName) + (description && displayName !== description ? ' <span style="color:var(--text-muted);font-weight:400">— ' + esc(description) + '</span>' : '') + pathHint + '</span>' +
+    statusEl;
+
+  var cb = row.querySelector('.agent-tool-cb');
+  cb.addEventListener('change', function() {
+    if (cb.checked) _agentToolsState.selected.add(name);
+    else _agentToolsState.selected.delete(name);
+    renderAgentToolPanel();
+  });
+  return row;
+}
+
+function setAgentToolsFilter(filter) {
+  _agentToolsState.filter = filter;
+  document.querySelectorAll('.agent-tools-filter').forEach(function(b) {
+    b.classList.toggle('active', b.dataset.filter === filter);
+  });
+  filterAgentTools();
+}
+
+function filterAgentTools() {
+  var searchEl = document.getElementById('agent-tools-search');
+  _agentToolsState.search = searchEl ? searchEl.value.trim().toLowerCase() : '';
+  var f = _agentToolsState.filter;
+  var rows = document.querySelectorAll('#agent-tools-panel .agent-tool-row');
+  var catCounts = {};
+  rows.forEach(function(row) {
+    var matchSearch = !_agentToolsState.search || row.dataset.search.indexOf(_agentToolsState.search) >= 0;
+    var matchFilter =
+      f === 'all' ||
+      (f === 'enabled' && row.dataset.enabled === '1') ||
+      (f === 'ready' && row.dataset.status === 'ready') ||
+      (f === 'needs-setup' && (row.dataset.status === 'needs-setup' || row.dataset.status === 'not-installed' || row.dataset.status === 'blocked'));
+    var visible = matchSearch && matchFilter;
+    row.classList.toggle('hidden', !visible);
+    if (visible) {
+      var cat = row.dataset.cat;
+      catCounts[cat] = (catCounts[cat] || 0) + 1;
     }
-  } catch(e) { /* fallback — panel stays empty */ }
+  });
+  document.querySelectorAll('#agent-tools-panel .agent-tool-cat').forEach(function(hdr) {
+    hdr.classList.toggle('hidden', !catCounts[hdr.dataset.category]);
+  });
 }
 
 function getSelectedTools() {
-  return Array.from(document.querySelectorAll('.agent-tool-cb:checked')).map(function(cb) { return cb.value; });
+  return Array.from(_agentToolsState.selected);
+}
+
+// Split selection into the two persistence buckets the agent schema expects:
+//   - projects[]      : entries that were 'project:/abs/path'
+//   - allowedTools[]  : everything else (composio:slug, mcp__server, sdk/cli/api names)
+function splitAgentToolSelection() {
+  var projects = [];
+  var tools = [];
+  Array.from(_agentToolsState.selected).forEach(function(v) {
+    if (typeof v === 'string' && v.indexOf('project:') === 0) projects.push(v.substring('project:'.length));
+    else tools.push(v);
+  });
+  return { projects: projects, tools: tools };
+}
+
+// Tab switching inside the agent edit modal.
+function switchAgentTab(tab) {
+  document.querySelectorAll('#agent-modal-tabs .agent-tab').forEach(function(b) {
+    b.classList.toggle('active', b.dataset.tab === tab);
+  });
+  document.querySelectorAll('#agent-modal .agent-tab-pane').forEach(function(p) {
+    p.style.display = p.dataset.tabPane === tab ? '' : 'none';
+  });
+  if (tab === 'goals') loadAgentGoalsPanel();
 }
 
+// Goals tab inside the editor — list every goal with a checkbox tied
+// to its owner field. Saving the modal calls PUT /api/goals/:id with
+// the new owner; we collect pending changes in a Map so the user can
+// flip several before saving.
+var _agentGoalsCache = null;
+var _agentGoalsPendingOwners = {}; // goalId -> newOwner
+
+async function loadAgentGoalsPanel() {
+  var panel = document.getElementById('agent-goals-panel');
+  if (!panel) return;
+  var slug = document.getElementById('agent-edit-slug').value;
+  var mode = document.getElementById('agent-edit-mode').value || 'agent';
+  var thisOwner = mode === 'clementine' ? 'clementine' : (slug || '');
+  if (!thisOwner) { panel.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:8px">Save the agent first, then come back to assign goals.</div>'; return; }
+  panel.innerHTML = '<div style="color:var(--text-muted);font-size:12px">Loading goals…</div>';
+  try {
+    var r = await apiFetch('/api/goals/progress');
+    var d = await r.json();
+    _agentGoalsCache = (d && d.goals) || [];
+    _agentGoalsPendingOwners = {};
+    var html = '';
+    if (_agentGoalsCache.length === 0) {
+      html = '<div style="color:var(--text-muted);font-size:12px;padding:8px">No goals yet. Use the Team → Goals tab or call goal_create.</div>';
+    } else {
+      _agentGoalsCache.forEach(function(g) {
+        var assigned = g.owner === thisOwner;
+        var ownerLbl = g.owner ? ('owned by ' + g.owner) : 'unassigned';
+        html += '<label class="agent-tool-row" data-goal-id="' + esc(g.id) + '">' +
+          '<input type="checkbox" class="agent-goal-cb" value="' + esc(g.id) + '"' + (assigned ? ' checked' : '') + ' style="accent-color:var(--blue)">' +
+          '<span class="tt-badge">' + esc(g.status || 'pending') + '</span>' +
+          '<span class="tt-name">' + esc(g.title || g.id) +
+            (g.description ? ' <span style="color:var(--text-muted);font-weight:400">— ' + esc(String(g.description).slice(0, 100)) + '</span>' : '') +
+            ' <span style="color:var(--text-muted);font-size:10px">(' + esc(ownerLbl) + ')</span>' +
+          '</span>' +
+          '</label>';
+      });
+    }
+    panel.innerHTML = html;
+    panel.querySelectorAll('.agent-goal-cb').forEach(function(cb) {
+      cb.addEventListener('change', function() {
+        // Checked → take ownership; unchecked → fall back to Clementine
+        // (the system default owner for orphaned goals).
+        _agentGoalsPendingOwners[cb.value] = cb.checked ? thisOwner : 'clementine';
+      });
+    });
+  } catch(e) {
+    panel.innerHTML = '<div style="color:var(--red);font-size:12px">Failed to load goals: ' + esc(String(e)) + '</div>';
+  }
+}
+
+async function saveAgentGoalsPanel() {
+  var entries = Object.keys(_agentGoalsPendingOwners);
+  for (var i = 0; i < entries.length; i++) {
+    var goalId = entries[i];
+    var newOwner = _agentGoalsPendingOwners[goalId];
+    try {
+      await apiFetch('/api/goals/' + encodeURIComponent(goalId), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ owner: newOwner }),
+      });
+    } catch(e) { /* surfaced via toast in caller */ }
+  }
+  _agentGoalsPendingOwners = {};
+}
+
+// CSS-attribute escape — our category names contain spaces.
+function cssAttrEsc(s) { return String(s).replace(/"/g, '\\"'); }
+
 var _discordChannelsCache = null;
 async function loadDiscordChannels(selectedValues) {
   // Normalize to array
@@ -34144,16 +34549,39 @@ function showAgentCreateModal() {
   document.getElementById('agent-modal-title').textContent = 'Hire a New Team Member';
   document.getElementById('agent-submit-btn').textContent = 'Complete Hiring';
   document.getElementById('agent-edit-slug').value = '';
+  document.getElementById('agent-edit-mode').value = 'agent';
   document.getElementById('agent-form').reset();
   document.getElementById('agent-token-hint').style.display = 'none';
   document.getElementById('agent-token-setup').style.display = 'none';
   document.getElementById('agent-slack-token-hint').style.display = 'none';
   document.getElementById('agent-slack-setup').style.display = 'none';
+  // Hidden fields are visible for hired agents (Clementine hides them).
+  setClementineMode(false);
+  switchAgentTab('identity');
   loadAgentProjectOptions();
   loadAgentToolOptions();
   loadDiscordChannels([]);
 }
 
+// Hide / show fields that don't apply to Clementine herself.
+// Avatar URL, Primary Project select, Security Tier are managed elsewhere
+// for the main agent — surfacing them in the same modal would be misleading.
+function setClementineMode(isClementine) {
+  ['agent-identity-row-2', 'agent-project-row', 'agent-tier-row'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.style.display = isClementine ? 'none' : '';
+  });
+  // Discord/Slack token sections are also Clementine-managed (env-based);
+  // hide them in the Connections tab when editing the main agent.
+  ['discord-section', 'slack-section'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.style.display = isClementine ? 'none' : '';
+  });
+  // Toggle the required attribute on Name — Clementine has a fixed name.
+  var nameEl = document.getElementById('agent-name');
+  if (nameEl) nameEl.readOnly = isClementine;
+}
+
 async function editAgent(slug) {
   try {
     var r = await apiFetch('/api/agents');
@@ -34165,9 +34593,13 @@ async function editAgent(slug) {
     document.getElementById('agent-modal-title').textContent = 'Update Team Member: ' + a.name;
     document.getElementById('agent-submit-btn').textContent = 'Save';
     document.getElementById('agent-edit-slug').value = slug;
+    document.getElementById('agent-edit-mode').value = 'agent';
+    setClementineMode(false);
+    switchAgentTab('identity');
     document.getElementById('agent-name').value = a.name || '';
     document.getElementById('agent-description').value = a.description || '';
     document.getElementById('agent-avatar-url').value = a.avatar || '';
+    document.getElementById('agent-personality').value = a.systemPromptBody || a.personality || '';
     loadDiscordChannels(a.channelName || []);
     document.getElementById('agent-team-chat').checked = a.teamChat || false;
     document.getElementById('agent-respond-all').checked = a.respondToAll || false;
@@ -34175,7 +34607,12 @@ async function editAgent(slug) {
     document.getElementById('agent-tier').value = String(a.tier || 2);
     document.getElementById('agent-canmessage').value = (a.canMessage || []).join(', ');
     loadAgentProjectOptions(a.project || '');
-    loadAgentToolOptions(a.allowedTools || []);
+    // Pre-check both tools and project access — projects are stored as
+    // 'project:/abs/path' inside the same selection set the Equipment panel
+    // tracks, so loadAgentToolOptions's normalizer handles them uniformly.
+    var initialSelection = (a.allowedTools || []).slice();
+    (a.projects || []).forEach(function(p) { initialSelection.push('project:' + p); });
+    loadAgentToolOptions(initialSelection);
     document.getElementById('agent-allowed-users').value = (a.allowedUsers || []).join(', ');
     // Budget
     document.getElementById('agent-budget').value = String(a.budgetMonthlyCents || 0);
@@ -34228,6 +34665,43 @@ function hideAgentModal() {
   document.getElementById('agent-modal').classList.remove('show');
 }
 
+// Open the same tabbed modal in Clementine mode — reads/writes the
+// assistant.profile block of clementine.json instead of an agent.md.
+async function editClementine() {
+  try {
+    var r = await apiFetch('/api/clementine/profile');
+    var d = await r.json();
+    var p = d.profile || {};
+    document.getElementById('agent-modal').classList.add('show');
+    document.getElementById('agent-modal-title').textContent = 'Configure ' + (d.name || 'Clementine');
+    document.getElementById('agent-submit-btn').textContent = 'Save';
+    document.getElementById('agent-edit-slug').value = '__clementine__';
+    document.getElementById('agent-edit-mode').value = 'clementine';
+    setClementineMode(true);
+    switchAgentTab('identity');
+    document.getElementById('agent-name').value = d.name || 'Clementine';
+    document.getElementById('agent-description').value = 'Master delegator and personal assistant';
+    document.getElementById('agent-personality').value = p.systemPrompt || '';
+    document.getElementById('agent-model').value = p.model || '';
+    document.getElementById('agent-canmessage').value = '';
+    document.getElementById('agent-allowed-users').value = (p.allowedUsers || []).join(', ');
+    document.getElementById('agent-budget').value = String(p.budgetMonthlyCents || 0);
+    if (p.sendPolicy) {
+      document.getElementById('agent-send-max-daily').value = String(p.sendPolicy.maxDailyEmails || 50);
+      document.getElementById('agent-send-approval').value = p.sendPolicy.requiresApproval || '';
+      document.getElementById('agent-send-biz-hours').checked = !!p.sendPolicy.businessHoursOnly;
+    } else {
+      document.getElementById('agent-send-max-daily').value = '50';
+      document.getElementById('agent-send-approval').value = '';
+      document.getElementById('agent-send-biz-hours').checked = false;
+    }
+    loadDiscordChannels(p.channels || []);
+    var initial = (p.allowedTools || []).slice();
+    (p.allowedProjects || []).forEach(function(path) { initial.push('project:' + path); });
+    loadAgentToolOptions(initial);
+  } catch(e) { toast('Failed to load Clementine profile: ' + String(e), 'error'); }
+}
+
 var tokenInputDebounce = null;
 function onTokenInput(token) {
   clearTimeout(tokenInputDebounce);
@@ -34273,12 +34747,64 @@ async function submitAgentForm(e) {
 }
 async function _submitAgentFormInner(e) {
   var editSlug = document.getElementById('agent-edit-slug').value;
-  var isEdit = Boolean(editSlug);
+  var modeEl = document.getElementById('agent-edit-mode');
+  var mode = modeEl ? modeEl.value || 'agent' : 'agent';
+  var isClementine = mode === 'clementine';
+  var isEdit = !isClementine && Boolean(editSlug);
 
   var selectedChannels = Array.from(document.querySelectorAll('.agent-channel-cb:checked')).map(function(cb) { return cb.value; });
-  var channelName = selectedChannels.length === 0 ? undefined : selectedChannels.length === 1 ? selectedChannels[0] : selectedChannels;
   var teamChat = document.getElementById('agent-team-chat').checked;
   var respondToAll = document.getElementById('agent-respond-all').checked;
+
+  // Equipment selection — split into the agent schema's two buckets:
+  // a flat allowedTools[] and projects[] of absolute paths.
+  var split = splitAgentToolSelection();
+
+  var au = document.getElementById('agent-allowed-users').value.trim();
+  var allowedUsers = au ? au.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : [];
+
+  var sendApproval = document.getElementById('agent-send-approval').value;
+  var sendPolicy = sendApproval ? {
+    maxDailyEmails: parseInt(document.getElementById('agent-send-max-daily').value) || 50,
+    requiresApproval: sendApproval,
+    businessHoursOnly: document.getElementById('agent-send-biz-hours').checked,
+  } : undefined;
+
+  var budgetVal = parseInt(document.getElementById('agent-budget').value) || 0;
+
+  if (isClementine) {
+    // Clementine path — write the assistant.profile block in clementine.json.
+    var profilePayload = {
+      systemPrompt: document.getElementById('agent-personality').value,
+      model: document.getElementById('agent-model').value || undefined,
+      allowedTools: split.tools,
+      allowedProjects: split.projects,
+      allowedUsers: allowedUsers,
+      channels: selectedChannels,
+      budgetMonthlyCents: budgetVal,
+      sendPolicy: sendPolicy,
+    };
+    try {
+      var rc = await apiFetch('/api/clementine/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(profilePayload),
+      });
+      var dc = await rc.json();
+      if (dc.ok) {
+        await saveAgentGoalsPanel();
+        toast('Saved Clementine profile', 'success');
+        hideAgentModal();
+        refreshTeam();
+      } else {
+        toast(dc.error || 'Failed', 'error');
+      }
+    } catch(err) { toast(String(err), 'error'); }
+    return;
+  }
+
+  // Hired-agent path — same shape as before, plus projects[] from Equipment.
+  var channelName = selectedChannels.length === 0 ? undefined : selectedChannels.length === 1 ? selectedChannels[0] : selectedChannels;
   var payload = {
     name: document.getElementById('agent-name').value.trim(),
     description: document.getElementById('agent-description').value.trim(),
@@ -34288,6 +34814,7 @@ async function _submitAgentFormInner(e) {
     respondToAll: channelName ? respondToAll : undefined,
     model: document.getElementById('agent-model').value || undefined,
     project: document.getElementById('agent-project').value || undefined,
+    projects: split.projects,
     tier: parseInt(document.getElementById('agent-tier').value) || 2,
     avatar: document.getElementById('agent-avatar-url').value.trim() || undefined,
   };
@@ -34295,11 +34822,8 @@ async function _submitAgentFormInner(e) {
   var cm = document.getElementById('agent-canmessage').value.trim();
   if (cm) payload.canMessage = cm.split(',').map(function(s) { return s.trim(); }).filter(Boolean);
 
-  var tools = getSelectedTools();
-  if (tools.length) payload.allowedTools = tools;
-
-  var au = document.getElementById('agent-allowed-users').value.trim();
-  payload.allowedUsers = au ? au.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : [];
+  if (split.tools.length) payload.allowedTools = split.tools;
+  payload.allowedUsers = allowedUsers;
 
   var discordToken = document.getElementById('agent-discord-token').value.trim();
   if (discordToken) payload.discordToken = discordToken;
@@ -34316,18 +34840,7 @@ async function _submitAgentFormInner(e) {
   var slackChannelId = document.getElementById('agent-slack-channel-id').value.trim();
   if (slackChannelId) payload.slackChannelId = slackChannelId;
 
-  // Send policy
-  var sendApproval = document.getElementById('agent-send-approval').value;
-  if (sendApproval) {
-    payload.sendPolicy = {
-      maxDailyEmails: parseInt(document.getElementById('agent-send-max-daily').value) || 50,
-      requiresApproval: sendApproval,
-      businessHoursOnly: document.getElementById('agent-send-biz-hours').checked,
-    };
-  }
-
-  // Budget
-  var budgetVal = parseInt(document.getElementById('agent-budget').value) || 0;
+  if (sendPolicy) payload.sendPolicy = sendPolicy;
   if (budgetVal > 0) payload.budgetMonthlyCents = budgetVal;
 
   // Role template — triggers scaffolding on the backend
@@ -34346,13 +34859,16 @@ async function _submitAgentFormInner(e) {
     });
     var d = await r.json();
     if (d.ok) {
+      // Apply pending goal-owner changes after the agent is persisted —
+      // matters most on Create, when the slug only just became real.
+      await saveAgentGoalsPanel();
       toast((isEdit ? 'Updated' : 'Created') + ' agent: ' + (d.agent?.name || payload.name), 'success');
       hideAgentModal();
       refreshTeam();
     } else {
       toast(d.error || 'Failed', 'error');
     }
-  } catch(e) { toast(String(e), 'error'); }
+  } catch(err) { toast(String(err), 'error'); }
 }
 
 function confirmDeleteAgent(slug, name) { deleteAgent(slug); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clementine-agent",
-  "version": "1.18.97",
+  "version": "1.18.99",
   "description": "Clementine — Personal AI Assistant (TypeScript)",
   "type": "module",
   "main": "dist/index.js",