clementine-agent 1.18.79 → 1.18.81

package/dist/cli/dashboard.js

@@ -15124,6 +15124,44 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     0%, 100% { opacity: 0.4; transform: scale(0.85); }
     50% { opacity: 1; transform: scale(1); }
   }
+  /* PRD Phase 1.3a: inner config-tab strip — switches which Configure
+     section blocks are visible without changing the outer Configure /
+     What-will-run / Last-run tabs. Visual: pill chips along the top of
+     the Configure pane. */
+  .cron-config-tabs {
+    display: flex;
+    gap: 4px;
+    margin: 0 0 14px;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0;
+  }
+  .cron-config-tab-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 12px;
+    font-weight: 500;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    margin-bottom: -1px;
+  }
+  .cron-config-tab-btn:hover { color: var(--text-primary); }
+  .cron-config-tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+  }
+  /* Sections are tagged with data-config-tab; the active tab attr on the
+     Configure pane controls visibility. .force-show overrides for power-user
+     "show everything" later. */
+  #cron-tab-configure[data-active-config-tab="basics"]   [data-config-tab]:not([data-config-tab="basics"]),
+  #cron-tab-configure[data-active-config-tab="prompt"]   [data-config-tab]:not([data-config-tab="prompt"]),
+  #cron-tab-configure[data-active-config-tab="tools"]    [data-config-tab]:not([data-config-tab="tools"]),
+  #cron-tab-configure[data-active-config-tab="scope"]    [data-config-tab]:not([data-config-tab="scope"]),
+  #cron-tab-configure[data-active-config-tab="limits"]   [data-config-tab]:not([data-config-tab="limits"]) {
+    display: none;
+  }
   /* ── Trick capability strip (skills + MCP + tools at a glance) ─── */
   .task-cap-strip {
     border-top: 1px solid var(--border-light);
@@ -16318,14 +16356,18 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
 
     <!-- ═══ Tasks Page — single unified surface ═══ -->
     <div class="page" id="page-build">
-      <!-- Sub-tabs hidden by default. Cron is the single surface; multi-step
-           workflows (formerly "Tricks") are still accessible via deep-link
-           ?tab=workflows or by toggling .show-workflows-tabs on the page. -->
-      <div id="build-tabs" style="display:none;gap:4px;padding:8px 18px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0">
+      <!-- PRD Phase 2: top-level tab strip within the Tasks domain.
+           Tasks (default) + Tools & MCP catalog. Workflows still reachable
+           via deep-link ?tab=workflows for power users with existing
+           multi-step workflows. -->
+      <div id="build-tabs" style="display:flex;gap:4px;padding:8px 18px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0">
         <button class="build-tab-btn active" data-build-tab="crons" onclick="switchBuildTab('crons')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
           <span style="margin-right:6px">📅</span>Tasks <span id="build-tab-cron-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
         </button>
-        <button class="build-tab-btn" data-build-tab="workflows" onclick="switchBuildTab('workflows')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
+        <button class="build-tab-btn" data-build-tab="toolsmcp" onclick="switchBuildTab('toolsmcp')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
+          <span style="margin-right:6px">🧰</span>Tools &amp; MCP <span id="build-tab-toolsmcp-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
+        </button>
+        <button class="build-tab-btn" data-build-tab="workflows" onclick="switchBuildTab('workflows')" style="display:none;padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
           <span style="margin-right:6px">🔧</span>Workflows <span id="build-tab-workflows-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
         </button>
       </div>
@@ -16337,6 +16379,12 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       <div id="build-tab-crons" style="display:none;flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
         <div id="panel-cron"><div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading scheduled tasks…</div></div>
       </div>
+      <!-- ── PRD Phase 2: Tools & MCP catalog ────────────────────────────────
+           Read-only foundation in 1.18.81. Future slices: per-tool bindings,
+           Reconnect/Toggle/Edit actions, Approval Mode + Max-auto-runs config. -->
+      <div id="build-tab-toolsmcp" style="display:none;flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
+        <div id="panel-toolsmcp"><div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading Tools &amp; MCP catalog…</div></div>
+      </div>
       <!-- Tricks (workflows) tab — existing RoutinesUI surface ─────────────────── -->
       <div id="build-tab-workflows" style="display:none;flex:1;min-height:0;display:flex;flex-direction:column">
       <!-- Toolbar -->
@@ -19912,12 +19960,24 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     </div>
     <div class="modal-body">
       <!-- ── Tab: Configure ─────────────────────────────────────────── -->
-      <div class="cron-tab-pane active" id="cron-tab-configure">
+      <!-- PRD §5.1 right-inspector pattern lives here as inner tabs (1.3a).
+           data-active-config-tab controls which section blocks render via
+           CSS — no JS show/hide needed beyond setting the attribute. -->
+      <div class="cron-tab-pane active" id="cron-tab-configure" data-active-config-tab="basics">
         <!-- Legacy / mismatch banner (populated by openEditCronModal) -->
         <div id="cron-legacy-banner-host"></div>
 
+        <!-- Inner tab strip — pill nav swapping which section blocks show -->
+        <div class="cron-config-tabs" role="tablist">
+          <button type="button" class="cron-config-tab-btn active" data-config-tab-btn="basics" onclick="switchCronConfigTab('basics')">Basics</button>
+          <button type="button" class="cron-config-tab-btn" data-config-tab-btn="prompt" onclick="switchCronConfigTab('prompt')">Prompt</button>
+          <button type="button" class="cron-config-tab-btn" data-config-tab-btn="tools" onclick="switchCronConfigTab('tools')">Tools &amp; MCP</button>
+          <button type="button" class="cron-config-tab-btn" data-config-tab-btn="scope" onclick="switchCronConfigTab('scope')">Scope</button>
+          <button type="button" class="cron-config-tab-btn" data-config-tab-btn="limits" onclick="switchCronConfigTab('limits')">Limits</button>
+        </div>
+
         <!-- Identity: name + category + tags -->
-        <div class="cron-section-card">
+        <div class="cron-section-card" data-config-tab="basics">
           <h4>Identity</h4>
           <p class="cron-section-desc">A unique name and optional grouping for the dashboard.</p>
           <div class="form-group">
@@ -19933,7 +19993,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
         </div>
 
         <!-- Schedule -->
-        <div class="cron-section-card">
+        <div class="cron-section-card" data-config-tab="basics">
           <h4>Schedule</h4>
           <p class="cron-section-desc">When this task fires. Pick a frequency or write a cron expression.</p>
           <div class="form-group" style="margin:0">
@@ -20022,7 +20082,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
         </div>
 
         <!-- What it does: prompt + context + reference files -->
-        <div class="cron-section-card">
+        <div class="cron-section-card" data-config-tab="prompt">
           <h4>What it does</h4>
           <p class="cron-section-desc">The instruction the agent receives. Long prompts are fine — drag the corner to resize.</p>
           <div class="form-group">
@@ -20050,7 +20110,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
              The single most important new field set. Without one of these, a
              run "finished"; with one, a run "accomplished what it was meant
              to". Banner warns (does not block) when neither is set. -->
-        <div class="cron-section-card">
+        <div class="cron-section-card" data-config-tab="prompt">
           <h4>Goal <span style="color:var(--text-muted);font-weight:normal;font-size:12px">— how do you know this task succeeded?</span></h4>
           <p class="cron-section-desc">Optional but strongly recommended. Use plain English (an evaluator agent grades the run) or a JSON Schema (validated against the agent's structured output).</p>
           <div id="cron-goal-warning" style="display:none;margin-bottom:12px;padding:10px 12px;border-radius:6px;background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.30);color:var(--yellow);font-size:12px">
@@ -20073,7 +20133,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
         </div>
 
         <!-- Skills & tools: pinned skills + MCP + tools + tags -->
-        <div class="cron-section-card">
+        <div class="cron-section-card" data-config-tab="tools">
           <h4>Skills &amp; tools</h4>
           <p class="cron-section-desc">Pin the skills and tools this task should use. Switch to the <strong>What will run</strong> tab to see exactly what the agent receives.</p>
 
@@ -20124,85 +20184,90 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           </div>
         </div>
 
-        <!-- Advanced: tier + workdir + mode + max-hours + retries + after -->
-        <details class="cron-section-card" style="padding:0">
-          <summary style="padding:14px 16px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between">
-            <span><strong style="font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px">Advanced</strong> <span style="color:var(--text-muted);font-size:11px;margin-left:6px">tier, mode, retries, project context</span></span>
-            <span style="color:var(--text-muted);font-size:11px">▾</span>
-          </summary>
-          <div style="padding:0 16px 14px">
-            <div class="form-row">
-              <div class="form-group">
-                <label class="form-label">Tier</label>
-                <select id="cron-tier">
-                  <option value="1">Tier 1 — Read-only (vault, search, web)</option>
-                  <option value="2">Tier 2 — Read + Write (Bash, files, sub-agents)</option>
-                  <option value="3">Tier 3 — Full access (use with caution)</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label class="form-label">Project Context <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
-                <select id="cron-workdir">
-                  <option value="">None — runs in default context</option>
-                </select>
-                <div class="form-hint">Run inside a project directory. Agent gets that project's CLAUDE.md.</div>
-              </div>
+        <!-- ── Scope: where the task can read/write ── -->
+        <div class="cron-section-card" data-config-tab="scope">
+          <h4>Scope</h4>
+          <p class="cron-section-desc">Where the agent runs and what files it can read.</p>
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">Project Context <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
+              <select id="cron-workdir">
+                <option value="">None — runs in default context</option>
+              </select>
+              <div class="form-hint">Run inside a project directory. Agent gets that project's CLAUDE.md.</div>
             </div>
-            <!-- PRD Phase 1: read scope beyond cwd. One absolute path per line. -->
-            <div class="form-row">
-              <div class="form-group" style="flex:1">
-                <label class="form-label">Additional read directories <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
-                <textarea id="cron-add-dirs" rows="2" placeholder="/Users/me/notes&#10;/Users/me/clients/acme" style="font-family:'JetBrains Mono',monospace;font-size:11px"></textarea>
-                <div class="form-hint">One absolute path per line. The agent gets read access to these in addition to the Project Context cwd.</div>
-              </div>
+          </div>
+          <!-- PRD Phase 1: read scope beyond cwd. One absolute path per line. -->
+          <div class="form-row">
+            <div class="form-group" style="flex:1">
+              <label class="form-label">Additional read directories <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
+              <textarea id="cron-add-dirs" rows="2" placeholder="/Users/me/notes&#10;/Users/me/clients/acme" style="font-family:'JetBrains Mono',monospace;font-size:11px"></textarea>
+              <div class="form-hint">One absolute path per line. The agent gets read access to these in addition to the Project Context cwd.</div>
             </div>
-            <div class="form-row">
-              <div class="form-group">
-                <label class="form-label">Mode</label>
-                <select id="cron-mode" onchange="toggleUnleashedOptions()">
-                  <option value="standard">Standard</option>
-                  <option value="unleashed">Unleashed (long-running)</option>
-                </select>
-                <div class="form-hint">Unleashed runs in phases with checkpointing for hour-scale tasks.</div>
-              </div>
-              <div class="form-group" id="cron-maxhours-group" style="display:none">
-                <label class="form-label">Max Hours</label>
-                <select id="cron-maxhours">
-                  <option value="1">1 hour</option>
-                  <option value="2">2 hours</option>
-                  <option value="4">4 hours</option>
-                  <option value="6" selected>6 hours (default)</option>
-                  <option value="8">8 hours</option>
-                  <option value="12">12 hours</option>
-                  <option value="24">24 hours</option>
-                </select>
-              </div>
+          </div>
+        </div>
+
+        <!-- ── Limits: budgets, mode, retries, chain triggers ── -->
+        <div class="cron-section-card" data-config-tab="limits">
+          <h4>Limits</h4>
+          <p class="cron-section-desc">Permission level, runtime mode, and retry/chain rules.</p>
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">Tier</label>
+              <select id="cron-tier">
+                <option value="1">Tier 1 — Read-only (vault, search, web)</option>
+                <option value="2">Tier 2 — Read + Write (Bash, files, sub-agents)</option>
+                <option value="3">Tier 3 — Full access (use with caution)</option>
+              </select>
+              <div class="form-hint">Permission level. Higher tiers can do more but require trust.</div>
             </div>
-            <div class="form-row">
-              <div class="form-group">
-                <label class="form-label">Max Retries <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
-                <select id="cron-max-retries">
-                  <option value="">Auto (based on error history)</option>
-                  <option value="0">0 — No retries</option>
-                  <option value="1">1</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="5">5</option>
-                </select>
-                <div class="form-hint">Override automatic retry count for transient errors.</div>
-              </div>
-              <div class="form-group">
-                <label class="form-label">After Job <span style="color:var(--text-muted);font-weight:normal">(chain)</span></label>
-                <select id="cron-after">
-                  <option value="">None — runs on schedule</option>
-                </select>
-                <div class="form-hint">Trigger after another job succeeds (ignores schedule).</div>
-              </div>
+            <div class="form-group">
+              <label class="form-label">Mode</label>
+              <select id="cron-mode" onchange="toggleUnleashedOptions()">
+                <option value="standard">Standard</option>
+                <option value="unleashed">Unleashed (long-running)</option>
+              </select>
+              <div class="form-hint">Unleashed runs in phases with checkpointing for hour-scale tasks.</div>
             </div>
           </div>
-        </details>
+          <div class="form-row">
+            <div class="form-group" id="cron-maxhours-group" style="display:none">
+              <label class="form-label">Max Hours</label>
+              <select id="cron-maxhours">
+                <option value="1">1 hour</option>
+                <option value="2">2 hours</option>
+                <option value="4">4 hours</option>
+                <option value="6" selected>6 hours (default)</option>
+                <option value="8">8 hours</option>
+                <option value="12">12 hours</option>
+                <option value="24">24 hours</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Max Retries <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
+              <select id="cron-max-retries">
+                <option value="">Auto (based on error history)</option>
+                <option value="0">0 — No retries</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="5">5</option>
+              </select>
+              <div class="form-hint">Override automatic retry count for transient errors.</div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">After Job <span style="color:var(--text-muted);font-weight:normal">(chain)</span></label>
+              <select id="cron-after">
+                <option value="">None — runs on schedule</option>
+              </select>
+              <div class="form-hint">Trigger after another job succeeds (ignores schedule).</div>
+            </div>
+          </div>
+        </div>
 
-        <!-- Training Chat -->
+        <!-- Training Chat — visible across all config tabs (it's a tool, not a field group) -->
         <div class="form-group" id="cron-training-section" style="display:none">
           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
             <label class="form-label" style="margin:0">Training Chat</label>
@@ -21093,12 +21158,27 @@ function switchBuildTab(tab) {
   var workPane = document.getElementById('build-tab-workflows');
   var cronPane = document.getElementById('build-tab-crons');
   var tplPane = document.getElementById('build-tab-templates');
+  var toolsmcpPane = document.getElementById('build-tab-toolsmcp');
   var headerStrip = document.getElementById('build-header-strip');
   var usagePanel = document.getElementById('build-usage-panel');
   var newBtn = document.getElementById('builder-new-btn');
   // Always close any open workflow when changing tabs — switching context
   // is a clean slate, not a stale node hanging on the canvas.
   if (typeof closeBuilderCanvas === 'function') closeBuilderCanvas();
+  // Default: hide the Tools & MCP pane unless we're explicitly on it.
+  if (toolsmcpPane && tab !== 'toolsmcp') toolsmcpPane.style.display = 'none';
+  if (tab === 'toolsmcp') {
+    // PRD Phase 2: Tools & MCP catalog. Read-only foundation in 1.18.81.
+    if (workPane) workPane.style.display = 'none';
+    if (cronPane) cronPane.style.display = 'none';
+    if (tplPane) tplPane.style.display = 'none';
+    if (toolsmcpPane) toolsmcpPane.style.display = 'block';
+    if (headerStrip) headerStrip.style.display = 'none';
+    if (usagePanel) usagePanel.style.display = 'none';
+    if (newBtn) newBtn.style.display = 'none';
+    if (typeof refreshToolsMcpCatalog === 'function') refreshToolsMcpCatalog();
+    return;
+  }
   if (tab === 'templates') {
     if (workPane) workPane.style.display = 'none';
     if (cronPane) cronPane.style.display = 'none';
@@ -23477,6 +23557,156 @@ function renderRunningCard(item) {
     + '</div></div>';
 }
 
+// ── PRD Phase 2: Tools & MCP catalog ──────────────────────────────────
+// Read-only foundation in 1.18.81. Renders the four-card taxonomy:
+//   • Built-in       — Claude SDK native tools (Read/Write/Bash/etc.)
+//   • Custom MCP     — in-process SDK MCP servers
+//   • Shell command  — CLI wrappers
+//   • External MCP   — stdio / sse / http MCP servers
+// Pulls from /api/mcp-status (live status) + /api/mcp-servers (config).
+// Future slices wire Reconnect/Toggle/Edit + the McpToolBinding modal.
+async function refreshToolsMcpCatalog() {
+  var panel = document.getElementById('panel-toolsmcp');
+  if (!panel) return;
+  panel.innerHTML = '<div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading Tools &amp; MCP catalog…</div>';
+  var statusMap = {};
+  var servers = [];
+  try {
+    var sR = await apiFetch('/api/mcp-status');
+    var statusJson = await sR.json();
+    statusMap = statusJson || {};
+  } catch (e) { /* status is optional — servers still render without it */ }
+  try {
+    var lR = await apiFetch('/api/mcp-servers');
+    var lJson = await lR.json();
+    servers = (lJson && lJson.servers) || [];
+  } catch (e) {
+    panel.innerHTML = '<div class="empty-state" style="padding:24px;color:var(--red)">Failed to load MCP servers: ' + esc(String(e)) + '</div>';
+    return;
+  }
+  var tabCount = document.getElementById('build-tab-toolsmcp-count');
+  if (tabCount) {
+    tabCount.textContent = servers.length;
+    tabCount.style.display = servers.length > 0 ? '' : 'none';
+  }
+  // Bucket servers into the four PRD categories. The existing
+  // ManagedMcpServer type doesn't have an explicit "kind" field, so we
+  // infer: stdio with a known shell binary → 'shell', stdio bundled with
+  // clementine → 'builtin', stdio external command → 'external_stdio',
+  // http/sse → 'external_remote'. The bucket keys map to the PRD's four
+  // taxonomy cards.
+  var buckets = { builtin: [], custom: [], shell: [], external: [] };
+  for (var i = 0; i < servers.length; i++) {
+    var s = servers[i];
+    var name = s.name || '';
+    var type = s.type || 'stdio';
+    var cmd = s.command || '';
+    var kind;
+    // The clementine-tools server is an in-process bundle
+    if (name === 'clementine-tools' || name === 'kernel') kind = 'builtin';
+    else if (type === 'http' || type === 'sse') kind = 'external';
+    else if (/^(sf|gh|gcloud|kubectl|docker|aws|az|terraform)$/.test(cmd) || /\\b(sf|gh|gcloud|kubectl)$/.test(cmd)) kind = 'shell';
+    else kind = 'external';  // default for stdio external MCP
+    buckets[kind].push(s);
+  }
+  var html = '';
+  // Header strip
+  html += '<div style="margin-bottom:18px"><h2 style="margin:0 0 4px;font-size:18px;font-weight:600;color:var(--text-primary)">Tools &amp; MCP catalog</h2>'
+    +    '<div style="font-size:12px;color:var(--text-muted)">'+ esc(servers.length) +' MCP server' + (servers.length === 1 ? '' : 's') + ' configured. Click any task in the Tasks tab to bind specific tools to that task.</div></div>';
+  // Four-card taxonomy. Each section is a labeled bucket of cards.
+  var sections = [
+    { key: 'builtin',  label: 'Built-in',                desc: 'Claude SDK native tools — always available to every task at the agent profile\\x27s permission tier.' },
+    { key: 'custom',   label: 'Custom in-process MCP',   desc: 'MCP servers defined in clementine\\x27s code, loaded inside the daemon process.' },
+    { key: 'shell',    label: 'Shell commands',          desc: 'Local CLI binaries (sf, gh, gcloud…) wrapped as MCP servers.' },
+    { key: 'external', label: 'External MCP servers',    desc: 'Third-party MCP servers reached over stdio, SSE, or HTTP.' },
+  ];
+  for (var k = 0; k < sections.length; k++) {
+    var sec = sections[k];
+    var bucket = buckets[sec.key] || [];
+    html += '<div style="margin-bottom:24px">';
+    html += '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:10px">'
+      +      '<h3 style="margin:0;font-size:14px;font-weight:600;color:var(--text-primary)">' + esc(sec.label) + '</h3>'
+      +      '<span style="font-size:11px;color:var(--text-muted);font-weight:500">' + bucket.length + '</span>'
+      +    '</div>';
+    html += '<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">' + esc(sec.desc) + '</div>';
+    if (bucket.length === 0) {
+      html += '<div class="empty-state" style="padding:14px;color:var(--text-muted);font-size:12px;background:var(--bg-secondary);border:1px dashed var(--border);border-radius:6px">No servers in this bucket.</div>';
+    } else {
+      html += '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px">';
+      for (var b = 0; b < bucket.length; b++) html += renderMcpCatalogCard(bucket[b], statusMap);
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+  panel.innerHTML = html;
+}
+
+// Render one MCP server card. Status pill colors mirror the PRD's five
+// states (connected / failed / needs-auth / pending / disabled). The
+// statusMap shape comes from gw.getMcpStatus() — varies a bit between
+// SDK versions; we defensively probe for connected/healthy fields.
+function renderMcpCatalogCard(server, statusMap) {
+  var name = server.name || '(unnamed)';
+  var transport = server.type || 'stdio';
+  var enabled = server.enabled !== false;
+  var status = statusMap && statusMap[name];
+  var statusKind, statusLabel, statusColor;
+  if (!enabled) { statusKind = 'disabled'; statusLabel = 'disabled'; statusColor = 'var(--text-muted)'; }
+  else if (status && (status.connected === true || status.status === 'connected' || status.healthy === true)) { statusKind = 'connected'; statusLabel = 'connected'; statusColor = 'var(--green)'; }
+  else if (status && (status.needsAuth === true || status.status === 'needs-auth')) { statusKind = 'needsauth'; statusLabel = 'needs auth'; statusColor = 'var(--yellow)'; }
+  else if (status && (status.connected === false || status.status === 'failed' || status.error)) { statusKind = 'failed'; statusLabel = 'failed'; statusColor = 'var(--red)'; }
+  else { statusKind = 'pending'; statusLabel = 'pending'; statusColor = 'var(--text-muted)'; }
+  var toolCount = (status && (status.toolCount != null ? status.toolCount : (Array.isArray(status.tools) ? status.tools.length : null))) || (Array.isArray(server.exposedTools) ? server.exposedTools.length : null);
+  var lastChecked = status && (status.lastCheckedAt || status.checkedAt || status.updatedAt);
+  var src = server.source === 'auto-detected' ? 'auto-detected' : 'user-configured';
+  var lastError = status && status.error;
+  var html = ''
+    + '<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px">'
+    +   '<div style="display:flex;align-items:center;gap:8px">'
+    +     '<div style="font-size:13px;font-weight:600;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + esc(name) + '">' + esc(name) + '</div>'
+    +     '<span style="display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:500;color:' + statusColor + ';background:' + statusColor + '20;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:0.04em">'
+    +       '<span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:' + statusColor + '"></span>' + esc(statusLabel)
+    +     '</span>'
+    +   '</div>'
+    +   '<div style="display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted)">'
+    +     '<span style="text-transform:uppercase;letter-spacing:0.04em">' + esc(transport) + '</span>'
+    +     '<span>·</span>'
+    +     '<span>' + esc(src) + '</span>'
+    +     (toolCount != null ? '<span>·</span><span>' + esc(toolCount) + ' tool' + (toolCount === 1 ? '' : 's') + '</span>' : '')
+    +   '</div>'
+    + (server.description ? '<div style="font-size:12px;color:var(--text-secondary);line-height:1.45">' + esc(String(server.description).slice(0, 240)) + '</div>' : '')
+    + (lastError ? '<div style="font-size:11px;color:var(--red);background:rgba(239,68,68,0.06);padding:6px 8px;border-radius:4px;word-break:break-word">' + esc(String(lastError).slice(0, 200)) + '</div>' : '')
+    + (lastChecked ? '<div style="font-size:11px;color:var(--text-muted)">Checked ' + esc(timeAgo(lastChecked)) + '</div>' : '')
+    +   '<div style="display:flex;gap:6px;margin-top:4px">'
+    +     '<button class="btn-sm" onclick="toggleMcpServerEnabled(\\x27' + jsStr(name) + '\\x27,' + (enabled ? 'false' : 'true') + ')" title="' + (enabled ? 'Disable this MCP server for all tasks' : 'Enable this MCP server') + '">' + (enabled ? 'Disable' : 'Enable') + '</button>'
+    +     '<button class="btn-sm" disabled title="Edit + Reconnect coming in the next slice" style="opacity:0.55;cursor:not-allowed">Edit</button>'
+    +   '</div>'
+    + '</div>';
+  return html;
+}
+
+// PUT helper for the Toggle button. Lazy: re-fetches the catalog after
+// the round-trip so the new state is reflected. Future slice will swap
+// to optimistic update + rollback on error.
+async function toggleMcpServerEnabled(name, nextEnabled) {
+  try {
+    var r = await apiFetch('/api/mcp-servers/' + encodeURIComponent(name), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: nextEnabled }),
+    });
+    var d = await r.json();
+    if (!r.ok || d.error) {
+      toast('Toggle failed: ' + (d.error || 'unknown'), 'error');
+      return;
+    }
+    toast(name + ' is now ' + (nextEnabled ? 'enabled' : 'disabled'), 'success');
+    refreshToolsMcpCatalog();
+  } catch (e) {
+    toast('Toggle failed: ' + String(e), 'error');
+  }
+}
+
 async function refreshCron() {
   try {
     // Fetch operations + cross-job recent runs in parallel for the three-zone
@@ -24809,6 +25039,18 @@ async function loadCronPreviewIntoTab(jobName) {
 // Mark the preview as stale (call after save so next tab visit refetches).
 function markCronPreviewDirty() { _cronPreviewLoadedFor = null; }
 
+// PRD Phase 1.3a: inner Configure pane tabs. Sets the data-active-config-tab
+// attribute on #cron-tab-configure; CSS handles section visibility via
+// data-config-tab attributes on each section. JS-light by design.
+function switchCronConfigTab(tab) {
+  var pane = document.getElementById('cron-tab-configure');
+  if (!pane) return;
+  pane.setAttribute('data-active-config-tab', tab);
+  document.querySelectorAll('.cron-config-tab-btn').forEach(function(b) {
+    b.classList.toggle('active', b.getAttribute('data-config-tab-btn') === tab);
+  });
+}
+
 // ── PRD Phase 1.2: "Run task once" — inline run + Last run tab ───────────
 // Tracks an in-flight run triggered FROM the modal so the SSE listeners
 // know when a cron_complete event belongs to "the run I just kicked off"
@@ -25098,6 +25340,7 @@ function openCreateCronModal(agentSlug) {
   var schedLink = document.getElementById('sched-cron-link');
   if (schedLink) schedLink.style.display = '';
   switchCronTab('configure');
+  switchCronConfigTab('basics');  // PRD 1.3a: always start on Basics for new tasks
   onPredictableChange();
   document.getElementById('cron-modal').classList.add('show');
   // Snapshot AFTER all defaults are populated so an immediate close with no
@@ -25196,6 +25439,7 @@ function openEditCronModal(jobName) {
   // dead empty pane). The pane updates live when Run task once fires.
   renderCronLastRunPane(job);
   switchCronTab('configure');
+  switchCronConfigTab('basics');  // PRD 1.3a: always start on Basics
   document.getElementById('cron-modal').classList.add('show');
   setTimeout(captureCronModalSnapshot, 0);
 }
@@ -25542,26 +25786,34 @@ async function saveCronJob() {
   // Field-specific validation. Toasting one message per problem is more
   // actionable than the old "Please fill in all fields" — and we bail before
   // hitting the API so the user sees the issue without a round-trip.
-  if (!name) { toast('Task name is required', 'error'); document.getElementById('cron-name').focus(); return; }
+  // Helper: focus a field on a possibly-hidden inner config tab. Switches
+  // to the tab that owns the field first so the user sees the cursor land.
+  function focusOnConfigTab(fieldId, configTab) {
+    if (typeof switchCronConfigTab === 'function') switchCronConfigTab(configTab);
+    var el = document.getElementById(fieldId);
+    if (el) el.focus();
+  }
+  if (!name) { toast('Task name is required', 'error'); focusOnConfigTab('cron-name', 'basics'); return; }
   if (!/^[a-z][a-z0-9-]{0,63}$/.test(name)) {
     toast('Task name must start with a lowercase letter and contain only a–z, 0–9, and hyphens (max 64 chars)', 'error');
-    document.getElementById('cron-name').focus();
+    focusOnConfigTab('cron-name', 'basics');
     return;
   }
   if (!editingCronJob && Array.isArray(cronJobsData)) {
     var dup = cronJobsData.find(function(j) { return String(j.name || '').toLowerCase() === name.toLowerCase(); });
-    if (dup) { toast('A task named "' + name + '" already exists', 'error'); document.getElementById('cron-name').focus(); return; }
+    if (dup) { toast('A task named "' + name + '" already exists', 'error'); focusOnConfigTab('cron-name', 'basics'); return; }
   }
-  if (!schedule) { toast('Schedule is required', 'error'); return; }
+  if (!schedule) { toast('Schedule is required', 'error'); switchCronConfigTab('basics'); return; }
   // Light client-side cron sanity check — server uses real cron-parser.
   // Catches obvious garbage like "foo bar" without making a round-trip.
   // Note: the hyphen sits at the END of the character class to avoid being
   // interpreted as a range. \\\\s in source → \\s in served JS → \s in regex.
   if (!/^([0-9*/, -]+|@(yearly|annually|monthly|weekly|daily|hourly|reboot))$/i.test(schedule) && schedule.split(/\\s+/).length < 5) {
     toast('Schedule does not look like a valid cron expression', 'error');
+    switchCronConfigTab('basics');
     return;
   }
-  if (!prompt) { toast('Prompt is required — tell the agent what to do', 'error'); document.getElementById('cron-prompt').focus(); return; }
+  if (!prompt) { toast('Prompt is required — tell the agent what to do', 'error'); focusOnConfigTab('cron-prompt', 'prompt'); return; }
 
   // PRD Phase 1 goal fields. successCriteriaText is freeform; successSchema
   // is parsed JSON. Validate JSON early so the user gets a clean error before
@@ -25574,12 +25826,12 @@ async function saveCronJob() {
       successSchema = JSON.parse(successSchemaRaw);
       if (!successSchema || typeof successSchema !== 'object' || Array.isArray(successSchema)) {
         toast('Success schema must be a JSON object', 'error');
-        document.getElementById('cron-success-schema').focus();
+        focusOnConfigTab('cron-success-schema', 'prompt');
         return;
       }
     } catch (e) {
       toast('Success schema is not valid JSON: ' + (e.message || String(e)), 'error');
-      document.getElementById('cron-success-schema').focus();
+      focusOnConfigTab('cron-success-schema', 'prompt');
       return;
     }
   }

package/package.json

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