synabun 2.0.9 → 2.1.0

package/neural-interface/public/shared/ui-automation-studio.js

@@ -1,3 +1,6 @@
+import { migrateStoredTools } from './tool-list-storage.js';
+import { wireDropdowns } from './cc-dropdown.js';
+import { configureToolPickerTranslation, toolPickerHTML, readToolPicker, updateToolPicker, taskToolHost as strictToolHost, toolWord } from './tool-list-picker.js';
 // ═══════════════════════════════════════════
 // SynaBun Neural Interface — Automation Studio
 // Browse, configure, launch, and track loop automations.
@@ -9,6 +12,7 @@ import { storage } from './storage.js';
 import { initI18n, isReady as i18nReady, t } from './i18n.js';
 import { fetchStyleGuideProjects, fetchStyleGuideSummary } from './api.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
+import { registerLaunchPrefetch } from './launch-prefetch.js';
 import {
   getNativeLoopRouterClaimToken,
   getNativeLoopRouterWindowId,
@@ -17,7 +21,8 @@ import {
 import {
   CLI_PROFILES,
   ensureModelsForProfile,
-  fetchMcpProfilePresets,
+  fetchToolCatalog,
+  getCachedToolCatalog,
   fetchCodexAccounts,
   getCachedCodexAccounts,
   getEffortLevelsForProfile,
@@ -67,6 +72,7 @@ import {
   cancelQuickTimer,
   triggerQuickTimerNow,
 } from './api.js';
+import { centeredInFrame, placementArea } from './app-frame.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -90,6 +96,9 @@ let _prevLoopActive = false;
 
 // Cleanup: stored references for document-level listeners so closePanel() can remove them
 let _docListeners = [];
+// What the last read found (templates, folders, the active loop, agents): a later open paints from it at once
+// and reads it again behind it.
+let _keptData = null;
 
 // Detail/editor state
 let _metaDirty = false;
@@ -176,7 +185,6 @@ const AS_ICONS = {
   claude:     `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" fill-rule="evenodd"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>`,
   openai:     `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" fill-rule="evenodd"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg>`,
   gemini:     `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" fill-rule="evenodd"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg>`,
-  leonardo:   `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M9.5 2l1.5 3.5L14.5 7l-3.5 1.5L9.5 12l-1.5-3.5L4.5 7l3.5-1.5L9.5 2zM19 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2zM5 17l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg>`,
   pin:        _s('<path d="M8 14v-3"/><path d="M4 11h8"/><path d="M10.5 2.5l3 3-2 2 .5 2-4.5.5.5-4.5 2-.5z"/>'),
 
   // UI chrome
@@ -207,10 +215,10 @@ let _launchContextMode = _initialLaunchSelection.contextMode || 'default';
 storage.setItem('as-launch-model', _launchModel || '');
 storage.setItem('as-launch-context-mode', _launchContextMode);
 let _launchEffort = storage.getItem('as-launch-effort') || 'off';
-let _launchMcpProfile = storage.getItem('as-launch-mcp-profile') || 'full';
+let _launchTools = (() => { try { return JSON.parse(storage.getItem('as-launch-tools') || 'null'); } catch { return null; } })();
 let _launchAccount = storage.getItem('as-launch-account') || 'default'; // Codex ChatGPT account (CODEX_HOME)
 let _qtAccountsRequested = false; // lazy-fetch guard for quick-timer account chips
-let _mcpProfilePresets = null; // cached presets from API
+let _dropdownAbort = null;
 
 // Render the Codex account selector chips (one button per saved ChatGPT account).
 function renderAccountChips(selectedId) {
@@ -260,34 +268,17 @@ function loadLaunchAccounts(root) {
   }).catch(() => {});
 }
 
-async function fetchMcpProfiles() {
-  if (_mcpProfilePresets) return _mcpProfilePresets;
-  try {
-    const presets = await fetchMcpProfilePresets();
-    if (presets && Object.keys(presets).length) {
-      _mcpProfilePresets = presets;
-      return _mcpProfilePresets;
-    }
-  } catch {}
-  return {};
-}
-
-function renderMcpProfileChips(presets, selected) {
-  const entries = Object.entries(presets);
-  if (entries.length > 5) {
-    const options = entries.map(([id, p]) => ({
-      id,
-      label: p.label || id,
-      desc: `${p.tools} tools`,
-    }));
-    return renderLaunchSelect('mcp', options, selected);
-  }
-  return entries.map(([id, p]) => `
-    <button class="as-launch-mcp-profile${id === selected ? ' active' : ''}" data-mcp-profile="${id}">
-      <span class="as-launch-mcp-profile-name">${p.label || id}</span>
-      <span class="as-launch-mcp-profile-tools">${p.tools} tools</span>
-    </button>
-  `).join('');
+async function renderLaunchToolPicker(root, provider) {
+  let catalog = await fetchToolCatalog(false, { cwd: _pendingLaunchParams?.cwd || '' });
+  if (_launchMode === 'agent' && !root.querySelector('#as-agent-synabun')?.checked && catalog) catalog = { ...catalog, defaultTools: [] };
+  const container = root.querySelector('#as-launch-tools');
+  if (!container) return;
+  container.innerHTML = strictToolHost(provider) ? toolPickerHTML('as-launch-tool-list', _launchTools, { catalog, provider, inheritLabel: toolWord('default'), usesBrowser: !!_pendingLaunchParams?.usesBrowser }) : toolWord('focus');
+  container.querySelector('#as-launch-tool-list')?.addEventListener('change', (event) => {
+    _launchTools = readToolPicker(event.target);
+    storage.setItem('as-launch-tools', JSON.stringify(_launchTools));
+    updateToolPicker(event.target, _launchTools, { inheritLabel: toolWord('default'), usesBrowser: !!_pendingLaunchParams?.usesBrowser });
+  });
 }
 
 // ── Preset Templates with Wizard Steps ──
@@ -890,7 +881,7 @@ function showLaunchInline(params) {
   if (params.usesBrowser && (!params.context || !params.context.includes('BROWSER REQUIRED'))) {
     params.context = BROWSER_CONTEXT;
   }
-  // Apply template-preset launch defaults (CLI / model / effort / MCP profile)
+  // Apply template-preset launch defaults (CLI / model / effort / tool list)
   if (params.profile) {
     if (params.profile !== _launchProfile && !params.model) {
       _launchModel = null;
@@ -906,7 +897,7 @@ function showLaunchInline(params) {
     storage.setItem('as-launch-model', _launchModel || '');
   }
   if (params.effort)  { _launchEffort = params.effort; storage.setItem('as-launch-effort', _launchEffort); }
-  if (params.mcpProfile) { _launchMcpProfile = params.mcpProfile; storage.setItem('as-launch-mcp-profile', _launchMcpProfile); }
+  if (params.tools !== undefined) { _launchTools = params.tools; storage.setItem('as-launch-tools', JSON.stringify(_launchTools)); }
   if (params.codexAccountId) { _launchAccount = params.codexAccountId; storage.setItem('as-launch-account', _launchAccount); }
   _pendingLaunchParams = params;
   _launchPanelActive = true;
@@ -981,11 +972,9 @@ function showLaunchInline(params) {
             ${renderEffortChips(profile, _launchEffort)}
           </div>
         </div>
-        <div class="as-launch-section" id="as-launch-mcp-section" style="${profile !== 'claude-code' ? '' : 'display:none'}">
-          <label class="as-launch-label">MCP Profile</label>
-          <div class="as-launch-mcp-profiles" id="as-launch-mcp-profiles">
-            <span class="as-launch-mcp-loading">Loading profiles...</span>
-          </div>
+        <div class="as-launch-section" id="as-launch-tools-section">
+          <label class="as-launch-label">${toolWord('label')}</label>
+          <div id="as-launch-tools">${strictToolHost(profile) ? '' : toolWord('focus')}</div>
         </div>
         <div class="as-launch-section" id="as-launch-account-section" style="${profile === 'codex' ? '' : 'display:none'}">
           <label class="as-launch-label">OpenAI Account</label>
@@ -1052,16 +1041,7 @@ function showLaunchInline(params) {
 
   wireLaunchInline(contentEl);
 
-  // Async-load MCP profiles for codex/gemini
-  if (profile !== 'claude-code') {
-    fetchMcpProfiles().then(presets => {
-      const container = contentEl.querySelector('#as-launch-mcp-profiles');
-      if (container && presets && Object.keys(presets).length) {
-        container.innerHTML = renderMcpProfileChips(presets, _launchMcpProfile);
-        wireMcpProfileChips(contentEl);
-      }
-    });
-  }
+  void renderLaunchToolPicker(contentEl, profile);
 
   // Async-load dynamic models and re-render chips when ready.
   // Retries a couple of times in case OpenCode is still booting.
@@ -1187,9 +1167,9 @@ function renderModelChips(profileId, selectedModel) {
     return renderLaunchSelect('model', models, selectedModel, { groupByDesc: profileId === 'opencode' });
   }
   return models.map(m => `
-    <button class="as-launch-model${modelMatchesSelector(m, selectedModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-model="${modelSelectorValue(m)}">
-      <span class="as-launch-model-name">${m.label}</span>
-      <span class="as-launch-model-desc">${m.desc}</span>
+    <button class="as-launch-model${modelMatchesSelector(m, selectedModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-model="${_escLaunch(modelSelectorValue(m))}">
+      <span class="as-launch-model-name">${_escLaunch(m.label)}</span>
+      <span class="as-launch-model-desc">${_escLaunch(m.desc)}</span>
     </button>
   `).join('');
 }
@@ -1299,7 +1279,10 @@ function wireLaunchSelect(root, type, onChange) {
       });
     });
 
-    document.addEventListener('click', e => { if (!sel.contains(e.target)) close(); });
+    // Outside click closes it; removed with the panel (closePanel) like the studio's other document listeners.
+    const onOutside = e => { if (!sel.contains(e.target)) close(); };
+    document.addEventListener('click', onOutside);
+    _docListeners.push(['click', onOutside]);
   });
 }
 
@@ -1340,6 +1323,7 @@ function wireLaunchInline(container) {
   const root = container.querySelector('.as-launch-inline');
   if (!root) return;
   applyAgentModeGating(root, _launchProfile);
+  root.querySelector('#as-agent-synabun')?.addEventListener('change', () => { void renderLaunchToolPicker(root, _launchProfile); });
 
   // Mode toggle (Loop vs Agent)
   root.querySelectorAll('.as-launch-mode').forEach(btn => {
@@ -1353,6 +1337,7 @@ function wireLaunchInline(container) {
       if (agentFields) agentFields.style.display = _launchMode === 'agent' ? '' : 'none';
       const confirmBtn = root.querySelector('#as-launch-confirm-btn');
       if (confirmBtn) confirmBtn.textContent = _launchMode === 'agent' ? 'Launch Agent' : 'Launch';
+      void renderLaunchToolPicker(root, _launchProfile);
     });
   });
 
@@ -1412,20 +1397,7 @@ function wireLaunchInline(container) {
         }
       }
       applyAgentModeGating(root, profileId);
-      // Show/hide MCP profile section (Codex/Gemini only — Claude Code has tool search)
-      const mcpSection = root.querySelector('#as-launch-mcp-section');
-      if (mcpSection) {
-        mcpSection.style.display = profileId !== 'claude-code' ? '' : 'none';
-        if (profileId !== 'claude-code') {
-          fetchMcpProfiles().then(presets => {
-            const container = root.querySelector('#as-launch-mcp-profiles');
-            if (container && presets && Object.keys(presets).length) {
-              container.innerHTML = renderMcpProfileChips(presets, _launchMcpProfile);
-              wireMcpProfileChips(root);
-            }
-          });
-        }
-      }
+      void renderLaunchToolPicker(root, profileId);
       // Show/hide OpenAI account section (Codex only — selects which ChatGPT login the loop runs under)
       const accountSection = root.querySelector('#as-launch-account-section');
       if (accountSection) {
@@ -1489,21 +1461,6 @@ function wireEffortChips(container) {
   });
 }
 
-function wireMcpProfileChips(container) {
-  container.querySelectorAll('.as-launch-mcp-profile').forEach(btn => {
-    btn.addEventListener('click', () => {
-      container.querySelectorAll('.as-launch-mcp-profile').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      _launchMcpProfile = btn.dataset.mcpProfile;
-      storage.setItem('as-launch-mcp-profile', _launchMcpProfile);
-    });
-  });
-  wireLaunchSelect(container, 'mcp', (value) => {
-    _launchMcpProfile = value;
-    storage.setItem('as-launch-mcp-profile', _launchMcpProfile);
-  });
-}
-
 function closeLaunchInline() {
   _pendingLaunchParams = null;
   _launchPanelActive = false;
@@ -1527,7 +1484,7 @@ async function confirmLaunch() {
     return;
   }
   const effort = normalizeEffortForProfile(_launchProfile, _launchEffort) || undefined;
-  const mcpProfile = _launchProfile !== 'claude-code' ? _launchMcpProfile : undefined;
+  const tools = strictToolHost(_launchProfile) ? _launchTools : undefined;
   const codexAccountId = _launchProfile === 'codex' ? (_launchAccount || 'default') : undefined;
   const params = {
     ..._pendingLaunchParams,
@@ -1535,7 +1492,7 @@ async function confirmLaunch() {
     model: _launchModel,
     contextMode: _launchContextMode,
     effort,
-    mcpProfile,
+    tools,
     codexAccountId,
     sidepanelWindowId: getNativeLoopRouterWindowId(),
     sidepanelClaimToken: getNativeLoopRouterClaimToken(),
@@ -1564,6 +1521,7 @@ async function confirmLaunch() {
         cwd: params.cwd || undefined,
         maxTurns: params.usesBrowser ? 100 : 75,
         withSynabun,
+        tools: tools ?? (withSynabun ? getCachedToolCatalog()?.defaultTools ?? ['mcp:*'] : []),
         browserProfile: (withSynabun && params.usesBrowser) ? true : undefined,
         mode: agentSubmode,
         iterations: agentSubmode === 'loop' ? agentIterations : 1,
@@ -1721,6 +1679,8 @@ function buildTemplateCommand(template) {
 // ═══════════════════════════════════════════
 
 export function initAutomationStudio() {
+  // Launch: the studio's lists are read once the page has painted (launch-prefetch.js), so the first open paints at once.
+  registerLaunchPrefetch('automation-studio', prefetchAutomationStudio, { order: 72 });
   on('automations:open', (opts) => openPanel(opts || {}));
   on('automations:open-wizard', () => { openPanel(); });
   on('automations:import', () => { openPanel().then(() => triggerImport()); });
@@ -1749,25 +1709,71 @@ async function openPanel(opts = {}) {
   document.body.appendChild(_backdrop);
 
   _panel = document.createElement('div');
+  _dropdownAbort?.abort();
+  _dropdownAbort = new AbortController();
+  wireDropdowns(_panel, { signal: _dropdownAbort.signal });
+  _panel.addEventListener('change', event => {
+    if (event.target.id === 'as-qt-tools') {
+      _launchTools = readToolPicker(event.target);
+      storage.setItem('as-launch-tools', JSON.stringify(_launchTools));
+      updateToolPicker(event.target, _launchTools, { inheritLabel: toolWord('templateDefault'), usesBrowser: !!$('as-qt-browser')?.checked });
+    }
+    if (['as-qt-browser', 'as-qt-template', 'as-f-browser'].includes(event.target.id)) queueMicrotask(() => {
+      const detail = event.target.id === 'as-f-browser';
+      const input = $(detail ? 'as-f-mcp' : 'as-qt-tools');
+      updateToolPicker(input, readToolPicker(input, { requested: true }), { inheritLabel: toolWord(detail ? 'default' : 'templateDefault'), usesBrowser: !!$(detail ? 'as-f-browser' : 'as-qt-browser')?.checked });
+    });
+  }, { signal: _dropdownAbort.signal });
+  void fetchToolCatalog();
   _panel.className = 'automation-studio-panel glass resizable';
   _panel.id = 'automation-studio-panel';
   _panel.innerHTML = buildPanelHTML();
   document.body.appendChild(_panel);
 
-  // Always open centered at default size
-  _panel.style.left = Math.max(20, (window.innerWidth - 900) / 2) + 'px';
-  _panel.style.top = Math.max(48, (window.innerHeight - 520) / 2) + 'px';
+  // Always open centered at default size, in the app frame
+  const at = centeredInFrame(900, 520);
+  _panel.style.left = at.left + 'px';
+  _panel.style.top = at.top + 'px';
 
   wirePanel();
-  await loadData();
+  const kept = _keptData;
+  if (kept) {
+    // The studio as last read paints at once; it is read again behind it and the sidebar follows in place.
+    _templates = kept.templates; _folders = kept.folders; _activeLoop = kept.activeLoop; _agents = kept.agents;
+    updateSidebarFooter();
+  } else {
+    await loadData();
+  }
   if (opts.templateId) {
     const tpl = _templates.find(t => t.id === opts.templateId);
     if (tpl) switchToDetail(tpl); else renderView();
   } else {
     renderView();
   }
-  requestAnimationFrame(() => { _backdrop.classList.add('open'); _panel.classList.add('open'); });
+  requestAnimationFrame(() => { _backdrop?.classList.add('open'); _panel?.classList.add('open'); });
   startPolling();
+  if (kept) refreshDataInPlace();
+}
+
+// The data read again behind a studio painted from the kept one: the sidebar list is redrawn when the templates
+// or folders changed (an open template, the wizard and the editors keep what the user is doing).
+async function refreshDataInPlace() {
+  const before = JSON.stringify([_templates, _folders]);
+  await loadData();
+  if (!_panel) return;
+  if (JSON.stringify([_templates, _folders]) === before) return;
+  const list = $('as-template-list');
+  const scroll = list ? list.scrollTop : 0;
+  renderSidebar();
+  const count = $('as-total-count');
+  if (count) count.textContent = `${PRESET_TEMPLATES.length + _templates.length}`;
+  if (list && list.isConnected) list.scrollTop = scroll;
+}
+
+/** Launch prefetch: the studio's data read once, so the first open paints at once (nothing is drawn here). */
+export function prefetchAutomationStudio() {
+  if (_keptData || _panel || (isGuest() && !hasPermission('automations'))) return Promise.resolve();
+  return loadData().catch(() => {});
 }
 
 function closePanel() {
@@ -1777,6 +1783,7 @@ function closePanel() {
   for (const [evt, fn] of _docListeners) document.removeEventListener(evt, fn);
   _docListeners = [];
   if (_backdrop) { _backdrop.remove(); _backdrop = null; }
+  _dropdownAbort?.abort();
   _panel.remove(); _panel = null;
   _templates = []; _activeLoop = null;
   _view = 'welcome'; _selected = null;
@@ -2140,11 +2147,12 @@ function positionFloating(el, x, y) {
   el.style.left = `${x}px`;
   el.style.top = `${y}px`;
   el.style.zIndex = '300010';
-  // Adjust after mounting to keep in viewport
+  // Adjust after mounting to keep in the app frame (the window for a point outside it)
   requestAnimationFrame(() => {
     const r = el.getBoundingClientRect();
-    if (r.right > window.innerWidth - 8) el.style.left = `${Math.max(8, window.innerWidth - r.width - 8)}px`;
-    if (r.bottom > window.innerHeight - 8) el.style.top = `${Math.max(8, window.innerHeight - r.height - 8)}px`;
+    const b = placementArea(x, y);
+    if (r.right > b.right - 8) el.style.left = `${Math.max(b.left + 8, b.right - r.width - 8)}px`;
+    if (r.bottom > b.bottom - 8) el.style.top = `${Math.max(b.top + 8, b.bottom - r.height - 8)}px`;
   });
 }
 
@@ -2326,11 +2334,17 @@ async function promptCreateFolder() {
 // ═══════════════════════════════════════════
 
 async function loadData() {
-  try { _templates = await fetchLoopTemplates(); } catch { _templates = []; }
-  try { _folders = await fetchLoopFolders(); } catch { _folders = []; }
-  try { _activeLoop = await fetchActiveLoop(); } catch { _activeLoop = null; }
+  _launchTools = await migrateStoredTools(storage, 'as-launch-tools', 'as-launch-mcp-profile');
+  await fetchToolCatalog();
+  // One round trip for the three lists (they were asked one after another), then the agents.
+  const [templates, folders, active] = await Promise.allSettled([fetchLoopTemplates(), fetchLoopFolders(), fetchActiveLoop()]);
+  _templates = templates.status === 'fulfilled' ? templates.value : [];
+  _folders = folders.status === 'fulfilled' ? folders.value : [];
+  _activeLoop = active.status === 'fulfilled' ? active.value : null;
   await refreshAgents();
-  updateSidebarFooter();
+  if (_panel) updateSidebarFooter();
+  // Kept only when the templates answered (a failed read must not paint an empty studio next time).
+  if (templates.status === 'fulfilled') _keptData = { templates: _templates, folders: _folders, activeLoop: _activeLoop, agents: _agents };
 }
 
 function startPolling() {
@@ -2679,7 +2693,7 @@ function buildDetailMeta(t, isPreset) {
   const tModel = (t.model && tModelsList.some(m => modelMatchesSelector(m, t.model))) ? normalizeAutomationSelection(tProfile, t.model).model : (modelSelectorValue(tDefaultModel) || '');
   const tContextMode = t.contextMode || normalizeAutomationSelection(tProfile, t.model).contextMode || 'default';
   const tEffort = t.effort || 'off';
-  const tMcp = t.mcpProfile || 'full';
+  const tTools = t.tools ?? null;
   return `
     <div class="as-meta-section">
       <div class="as-field">
@@ -2796,11 +2810,9 @@ function buildDetailMeta(t, isPreset) {
               ${getEffortLevelsForProfile(tProfile).map(e => `<option value="${esc(e.id)}"${e.id === tEffort ? ' selected' : ''}>${esc(e.label)} \u2014 ${esc(e.desc)}</option>`).join('')}
             </select>
           </div>
-          <div class="as-runtime-field" id="as-f-mcp-field" style="${tProfile !== 'claude-code' ? '' : 'display:none'}">
-            <label>MCP</label>
-            <select class="as-input as-select" id="as-f-mcp">
-              <option value="${esc(tMcp)}" selected>${esc(tMcp)} (loading\u2026)</option>
-            </select>
+          <div class="as-runtime-field" id="as-f-mcp-field">
+            <label>${toolWord('label')}</label>
+            ${strictToolHost(tProfile) ? toolPickerHTML('as-f-mcp', tTools, { provider: tProfile, inheritLabel: toolWord('default'), usesBrowser: t.usesBrowser }) : toolWord('focus')}
           </div>
         </div>
       </div>
@@ -2859,7 +2871,7 @@ function wireDetailView(isPreset) {
   wireCategoryPicker(isPreset);
   wireFolderPicker(isPreset);
 
-  // Launch defaults (CLI profile / model / effort / MCP profile)
+  // Launch defaults (CLI profile / model / effort / tool list)
   wireLaunchDefaults(isPreset);
 
   // Markdown toolbar
@@ -3008,7 +3020,7 @@ function wireLaunchDefaults(isPreset) {
   const modelSel = $('as-f-model');
   const contextSel = $('as-f-context');
   const effortSel = $('as-f-effort');
-  const mcpSel = $('as-f-mcp');
+  let mcpSel = $('as-f-mcp');
   const effortField = $('as-f-effort-field');
   const mcpField = $('as-f-mcp-field');
   const templateAccountId = _selected?.codexAccountId || 'default';
@@ -3016,23 +3028,14 @@ function wireLaunchDefaults(isPreset) {
 
   effortSel?.addEventListener('change', () => { if (!isPreset) markDirty(); });
 
-  const loadMcpOptions = () => {
-    if (!mcpSel) return;
-    const current = mcpSel.value || 'full';
-    fetchMcpProfiles().then(presets => {
-      if (!presets || !Object.keys(presets).length) return;
-      const opts = Object.entries(presets).map(([id, p]) => {
-        const label = p.label || id;
-        const tools = p.tools != null ? ` — ${p.tools} tools` : '';
-        const sel = id === current ? ' selected' : '';
-        return `<option value="${esc(id)}"${sel}>${esc(label)}${esc(tools)}</option>`;
-      }).join('');
-      mcpSel.innerHTML = opts;
-      if (!presets[current]) {
-        const first = Object.keys(presets)[0];
-        if (first) mcpSel.value = first;
-      }
-    });
+  const loadToolOptions = async () => {
+    const tools = mcpSel ? readToolPicker(mcpSel) : _selected?.tools ?? null;
+    const catalog = await fetchToolCatalog();
+    if (!mcpField?.isConnected) return;
+    const provider = profileSel.value;
+    mcpField.innerHTML = `<label>${toolWord('label')}</label>${strictToolHost(provider) ? toolPickerHTML('as-f-mcp', tools, { catalog, provider, inheritLabel: toolWord('default'), usesBrowser: !!$('as-f-browser')?.checked }) : toolWord('focus')}`;
+    mcpSel = $('as-f-mcp');
+    mcpSel?.addEventListener('change', () => { if (!isPreset) markDirty(); updateToolPicker(mcpSel, readToolPicker(mcpSel), { inheritLabel: toolWord('default'), usesBrowser: !!$('as-f-browser')?.checked }); });
   };
 
   const renderModelOptions = (profileId, preferredId) => {
@@ -3082,8 +3085,7 @@ function wireLaunchDefaults(isPreset) {
     renderEffortOptions(profileId, 'off');
     if (effortField) effortField.style.display = profileSupportsEffort(profileId) ? '' : 'none';
     if (mcpField) {
-      mcpField.style.display = profileId !== 'claude-code' ? '' : 'none';
-      if (profileId !== 'claude-code') loadMcpOptions();
+      void loadToolOptions();
     }
     if (!isPreset) markDirty();
   });
@@ -3095,7 +3097,7 @@ function wireLaunchDefaults(isPreset) {
   contextSel?.addEventListener('change', () => { if (!isPreset) markDirty(); });
   mcpSel?.addEventListener('change', () => { if (!isPreset) markDirty(); });
 
-  if (profileSel.value !== 'claude-code') loadMcpOptions();
+  void loadToolOptions();
   renderEffortOptions(profileSel.value, effortSel?.value || 'off');
   if (effortField) effortField.style.display = profileSupportsEffort(profileSel.value) ? '' : 'none';
   refreshDynamicModelOptionsIfNeeded(profileSel.value, modelSel?.value || null);
@@ -3133,7 +3135,7 @@ async function saveCurrentTemplate() {
   const model = $('as-f-model')?.value || null;
   const contextMode = $('as-f-context')?.value || 'default';
   const effort = normalizeEffortForProfile(profile || 'claude-code', $('as-f-effort')?.value || null);
-  const mcpProfile = profile && profile !== 'claude-code' ? ($('as-f-mcp')?.value || null) : null;
+  const tools = strictToolHost(profile) ? ($('as-f-mcp') ? readToolPicker($('as-f-mcp')) : _selected?.tools ?? null) : null;
   const folderIdRaw = $('as-f-folder')?.value;
   const folderId = folderIdRaw ? folderIdRaw : null;
 
@@ -3146,7 +3148,7 @@ async function saveCurrentTemplate() {
     showToast('This context window is unavailable for the selected model'); return;
   }
 
-  const payload = { name, icon: iconKey, category, task, context: '', description: description || task.slice(0, 120), iterations, maxMinutes, usesBrowser, profile, model, contextMode, effort, mcpProfile, folderId };
+  const payload = { name, icon: iconKey, category, task, context: '', description: description || task.slice(0, 120), iterations, maxMinutes, usesBrowser, profile, model, contextMode, effort, tools, folderId };
 
   try {
     if (_selected.id) { await updateLoopTemplate(_selected.id, payload); }
@@ -3253,7 +3255,7 @@ async function customizePreset(preset) {
       model: $('as-f-model')?.value || null,
       contextMode: $('as-f-context')?.value || 'default',
       effort: normalizeEffortForProfile($('as-f-profile')?.value || 'claude-code', $('as-f-effort')?.value || null),
-      mcpProfile: ($('as-f-profile')?.value || 'claude-code') !== 'claude-code' ? ($('as-f-mcp')?.value || null) : null,
+      tools: strictToolHost($('as-f-profile')?.value) ? readToolPicker($('as-f-mcp')) : null,
     };
     const result = await createLoopTemplate(payload);
     if (result?.id) {
@@ -3280,13 +3282,13 @@ function handleTestRun() {
   const model = $('as-f-model')?.value || _selected.model || null;
   const contextMode = $('as-f-context')?.value || _selected.contextMode || 'default';
   const effort = normalizeEffortForProfile(profile || 'claude-code', $('as-f-effort')?.value || _selected.effort || null);
-  const mcpProfile = profile && profile !== 'claude-code' ? ($('as-f-mcp')?.value || _selected.mcpProfile || null) : null;
+  const tools = strictToolHost(profile) ? ($('as-f-mcp') ? readToolPicker($('as-f-mcp')) : _selected?.tools ?? null) : null;
   serverLaunchLoop({
     task: cmd,
     context: null,
     iterations: 1, maxMinutes: 10,
     usesBrowser,
-    profile, model, contextMode, effort, mcpProfile,
+    profile, model, contextMode, effort, tools,
   });
 }
 
@@ -3315,12 +3317,12 @@ function proceedWithLaunch() {
   const model = $('as-f-model')?.value || _selected.model || null;
   const contextMode = $('as-f-context')?.value || _selected.contextMode || 'default';
   const effort = normalizeEffortForProfile(profile || 'claude-code', $('as-f-effort')?.value || _selected.effort || null);
-  const mcpProfile = profile && profile !== 'claude-code' ? ($('as-f-mcp')?.value || _selected.mcpProfile || null) : null;
+  const tools = strictToolHost(profile) ? ($('as-f-mcp') ? readToolPicker($('as-f-mcp')) : _selected?.tools ?? null) : null;
   serverLaunchLoop({
     task: cmd,
     context: null,
     iterations, maxMinutes, usesBrowser,
-    profile, model, contextMode, effort, mcpProfile,
+    profile, model, contextMode, effort, tools,
   });
 }
 
@@ -3754,16 +3756,14 @@ async function refreshAgents() {
   try {
     const data = await fetchAgents();
     _agents = data?.agents || [];
-    // Update local output buffers with any text we haven't captured via WebSocket
-    for (const a of _agents) {
-      if (!_agentOutputs[a.id] && a.textLength > 0) {
-        // Fetch full details to get textOutput
-        try {
-          const full = await fetchAgent(a.id);
-          if (full?.textOutput) _agentOutputs[a.id] = full.textOutput;
-        } catch {}
-      }
-    }
+    // Update local output buffers with any text we haven't captured via WebSocket (together, not one by one)
+    await Promise.all(_agents.filter(a => !_agentOutputs[a.id] && a.textLength > 0).map(async (a) => {
+      // Fetch full details to get textOutput
+      try {
+        const full = await fetchAgent(a.id);
+        if (full?.textOutput) _agentOutputs[a.id] = full.textOutput;
+      } catch {}
+    }));
   } catch {}
 }
 
@@ -3920,7 +3920,7 @@ function setupScheduleWebSocket() {
   // Quick timer events
   on('sync:quick-timer:set', (data) => {
     if (data?.timerId && !_quickTimers.some(t => t.id === data.timerId)) {
-      _quickTimers.push({ id: data.timerId, templateName: data.templateName, firesAt: data.firesAt, minutes: data.minutes, profile: data.profile, model: data.model, contextMode: data.contextMode, effort: data.effort, mcpProfile: data.mcpProfile, usesBrowser: data.usesBrowser });
+      _quickTimers.push({ id: data.timerId, templateName: data.templateName, firesAt: data.firesAt, minutes: data.minutes, profile: data.profile, model: data.model, contextMode: data.contextMode, effort: data.effort, tools: data.tools, usesBrowser: data.usesBrowser });
       if (_view === 'schedules') renderSchedulesMain();
     }
   });
@@ -4379,13 +4379,13 @@ async function handlePanelClick(e) {
       if (!automationContextAvailable(qtProfile, qtModel, qtContextMode)) { showToast('This context window is unavailable for the selected model and account'); break; }
       const qtBrowser = !!$('as-qt-browser')?.checked;
       const qtEffort = normalizeEffortForProfile(qtProfile, _launchEffort) || undefined;
-      const qtMcpProfile = qtProfile !== 'claude-code' ? _launchMcpProfile : undefined;
+      const qtTools = strictToolHost(qtProfile) ? readToolPicker($('as-qt-tools')) : undefined;
       const qtAccount = qtProfile === 'codex' ? (_launchAccount || 'default') : undefined;
       try {
-        const result = await createQuickTimer(templateId, mins, { profile: qtProfile, model: qtModel, contextMode: qtContextMode, usesBrowser: qtBrowser, effort: qtEffort, mcpProfile: qtMcpProfile, codexAccountId: qtAccount });
+        const result = await createQuickTimer(templateId, mins, { profile: qtProfile, model: qtModel, contextMode: qtContextMode, usesBrowser: qtBrowser, effort: qtEffort, tools: qtTools, codexAccountId: qtAccount });
         // Guard: WebSocket sync:quick-timer:set may arrive before this HTTP response
         if (!_quickTimers.some(t => t.id === result.timerId)) {
-          _quickTimers.push({ id: result.timerId, templateId, templateName: result.templateName, firesAt: result.firesAt, minutes: result.minutes, profile: result.profile, model: result.model, contextMode: result.contextMode, effort: result.effort, mcpProfile: result.mcpProfile, usesBrowser: result.usesBrowser });
+          _quickTimers.push({ id: result.timerId, templateId, templateName: result.templateName, firesAt: result.firesAt, minutes: result.minutes, profile: result.profile, model: result.model, contextMode: result.contextMode, effort: result.effort, tools: result.tools, usesBrowser: result.usesBrowser });
         }
         _selectedQtMinutes = null;
         _qtUsesBrowser = null;
@@ -4406,7 +4406,7 @@ async function handlePanelClick(e) {
       if (!automationContextAvailable(qtProfile, qtModel, qtContextMode)) { showToast('This context window is unavailable for the selected model and account'); break; }
       const qtBrowser = !!$('as-qt-browser')?.checked;
       const qtEffort = normalizeEffortForProfile(qtProfile, _launchEffort) || undefined;
-      const qtMcpProfile = qtProfile !== 'claude-code' ? _launchMcpProfile : undefined;
+      const qtTools = strictToolHost(qtProfile) ? readToolPicker($('as-qt-tools')) : undefined;
       const qtAccount = qtProfile === 'codex' ? (_launchAccount || 'default') : undefined;
       try {
         const result = await triggerQuickTimerNow(templateId, {
@@ -4415,7 +4415,7 @@ async function handlePanelClick(e) {
           contextMode: qtContextMode,
           usesBrowser: qtBrowser,
           effort: qtEffort,
-          mcpProfile: qtMcpProfile,
+          tools: qtTools,
           codexAccountId: qtAccount,
           sidepanelWindowId: getNativeLoopRouterWindowId(),
           sidepanelClaimToken: getNativeLoopRouterClaimToken(),
@@ -4688,7 +4688,7 @@ function renderSchedulesMain() {
       const profileLabel = CLI_PROFILES.find(p => p.id === qt.profile)?.label || qt.profile || 'Claude Code';
       const modelObj = qt.model ? getModelsForProfile(qt.profile || 'claude-code').find(m => modelMatchesSelector(m, qt.model)) : null;
       const modelLabel = modelObj?.label || (qt.profile === 'opencode' ? qt.model : '');
-      const metaParts = [profileLabel, modelLabel, qt.contextMode && qt.contextMode !== 'default' ? `context:${qt.contextMode}` : '', qt.effort ? `think:${qt.effort}` : '', qt.mcpProfile ? `mcp:${qt.mcpProfile}` : '', qt.usesBrowser ? 'Browser' : ''].filter(Boolean);
+      const metaParts = [profileLabel, modelLabel, qt.contextMode && qt.contextMode !== 'default' ? `context:${qt.contextMode}` : '', qt.effort ? `think:${qt.effort}` : '', qt.tools ? `${toolWord('label')}: ${qt.tools.join(', ')}` : '', qt.usesBrowser ? 'Browser' : ''].filter(Boolean);
       timerCards += `
         <div class="as-qt-active-card">
           <div class="as-qt-active-pulse"></div>
@@ -4742,9 +4742,9 @@ function renderSchedulesMain() {
     ? (qtModels.length > LAUNCH_CHIP_MAX
         ? renderLaunchSelect('qt-model', qtModels, qtCurrentModel, { groupByDesc: qtProfile === 'opencode' })
         : qtModels.map(m => `
-        <button class="as-launch-model${modelMatchesSelector(m, qtCurrentModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-action="qt-model" data-model="${modelSelectorValue(m)}">
-          <span class="as-launch-model-name">${m.label}</span>
-          <span class="as-launch-model-desc">${m.desc}</span>
+        <button class="as-launch-model${modelMatchesSelector(m, qtCurrentModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-action="qt-model" data-model="${_escLaunch(modelSelectorValue(m))}">
+          <span class="as-launch-model-name">${_escLaunch(m.label)}</span>
+          <span class="as-launch-model-desc">${_escLaunch(m.desc)}</span>
         </button>
       `).join(''))
     : `<span class="as-launch-no-models">${esc(dynamicModelEmptyText(qtProfile))}</span>`;
@@ -4794,6 +4794,7 @@ function renderSchedulesMain() {
         <span class="as-launch-label">Think</span>
         <div class="as-launch-efforts" id="as-qt-efforts">${qtEffortChips}</div>
       </div>
+      <div class="as-qt-group"><label>${toolWord('label')}</label>${strictToolHost(qtProfile) ? toolPickerHTML('as-qt-tools', _launchTools, { provider: qtProfile, inheritLabel: toolWord('templateDefault'), usesBrowser: qtBrowserDefault }) : toolWord('focus')}</div>
       <div class="as-qt-group" id="as-qt-account-section" style="${qtProfile === 'codex' ? '' : 'display:none'}">
         <span class="as-launch-label">OpenAI Account</span>
         <div class="as-launch-accounts" id="as-qt-accounts">${qtAccountChips}</div>
@@ -4942,7 +4943,7 @@ function renderScheduleEditorMain() {
     </div>`).join('');
 
   const templateOptions = allTemplates.map(t =>
-    `<option value="${t.id}"${(s?.templateId === t.id) ? ' selected' : ''}>${esc(t.name)} (${t.category})</option>`
+    `<option value="${esc(t.id)}"${(s?.templateId === t.id) ? ' selected' : ''}>${esc(t.name)} (${esc(t.category)})</option>`
   ).join('');
 
   // Reorder: Mon(1)–Sat(6) then Sun(0) so 2-column grid pairs weekdays nicely
@@ -5103,3 +5104,5 @@ function triggerImport() {
   document.body.appendChild(input);
   input.click();
 }
+
+configureToolPickerTranslation(t);