pinokiod 3.180.0 → 3.182.0

package/server/public/common.js

@@ -1462,10 +1462,56 @@ if (typeof hotkeys === 'function') {
   })
 }
 
+// Stable per-browser device identifier
+(function initPinokioDeviceId() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    const KEY = 'pinokio:device-id';
+    const gen = () => `${Date.now()}-${Math.random().toString(16).slice(2)}-${Math.random().toString(16).slice(2)}`;
+    const get = () => {
+      try {
+        let id = localStorage.getItem(KEY);
+        if (typeof id !== 'string' || id.length < 8) {
+          id = gen();
+          localStorage.setItem(KEY, id);
+        }
+        return id;
+      } catch (_) {
+        // Fallback when localStorage is unavailable
+        if (!window.__pinokioVolatileDeviceId) {
+          window.__pinokioVolatileDeviceId = gen();
+        }
+        return window.__pinokioVolatileDeviceId;
+      }
+    };
+    // Expose helpers
+    if (!window.PinokioGetDeviceId) {
+      window.PinokioGetDeviceId = get;
+    }
+    // Convenience alias
+    window.PinokioDeviceId = get();
+  } catch (_) {
+    // ignore
+  }
+})();
+
 (function initNotificationAudioBridge() {
   if (typeof window === 'undefined') {
     return;
   }
+  // Avoid duplicate audio playback: if this is the top-level layout page, or if the
+  // top window already owns notification playback, skip initialising this bridge.
+  try {
+    const isTop = window.top === window;
+    if (isTop && document.getElementById('layout-root')) {
+      return; // layout shell handles notifications
+    }
+    if (!isTop && window.top && window.top.__pinokioTopNotifyListener) {
+      return; // top-level listener active; avoid duplicates from iframes
+    }
+  } catch (_) {}
   if (window.__pinokioNotificationAudioInitialized) {
     return;
   }
@@ -1478,6 +1524,64 @@ if (typeof hotkeys === 'function') {
   let reconnectTimeout = null;
   let activeAudio = null;
 
+  // Lightweight visual indicator to confirm notification receipt (mobile-friendly)
+  let notifyIndicatorEl = null;
+  let notifyIndicatorStyleInjected = false;
+  const ensureNotifyIndicator = () => {
+    if (!notifyIndicatorStyleInjected) {
+      try {
+        const style = document.createElement('style');
+        style.textContent = `
+.pinokio-notify-indicator{position:fixed;top:12px;right:12px;z-index:2147483647;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,0.92);color:#fff;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
+.pinokio-notify-indicator .bell{font-size:14px}
+.pinokio-notify-indicator.show{display:inline-flex;animation:pinokioNotifyPop 160ms ease-out, pinokioNotifyFade 1600ms ease-in 700ms forwards}
+@keyframes pinokioNotifyPop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
+@keyframes pinokioNotifyFade{to{opacity:0;transform:translateY(-4px)}}
+@media (max-width: 768px){.pinokio-notify-indicator{top:10px;right:10px;padding:7px 9px;font-size:12px}}
+        `;
+        document.head.appendChild(style);
+        notifyIndicatorStyleInjected = true;
+      } catch (_) {}
+    }
+    if (!notifyIndicatorEl) {
+      try {
+        const el = document.createElement('div');
+        el.className = 'pinokio-notify-indicator';
+        const icon = document.createElement('span');
+        icon.className = 'bell';
+        icon.textContent = '🔔';
+        const text = document.createElement('span');
+        text.className = 'text';
+        text.textContent = 'Notification received';
+        el.appendChild(icon);
+        el.appendChild(text);
+        document.body.appendChild(el);
+        notifyIndicatorEl = el;
+      } catch (_) {}
+    }
+  };
+  const flashNotifyIndicator = (payload) => {
+    try {
+      ensureNotifyIndicator();
+      if (!notifyIndicatorEl) return;
+      const text = notifyIndicatorEl.querySelector('.text');
+      if (text) {
+        const msg = (payload && typeof payload.message === 'string' && payload.message.trim()) ? payload.message.trim() : 'Notification received';
+        // Keep it short on mobile
+        text.textContent = msg.length > 80 ? (msg.slice(0, 77) + '…') : msg;
+      }
+      // retrigger animation
+      notifyIndicatorEl.classList.remove('show');
+      // force reflow
+      void notifyIndicatorEl.offsetWidth;
+      notifyIndicatorEl.classList.add('show');
+      // Auto-hide handled by CSS animation; keep element for reuse
+      window.setTimeout(() => {
+        if (notifyIndicatorEl) notifyIndicatorEl.classList.remove('show');
+      }, 2600);
+    } catch (_) {}
+  };
+
   const leaderStorageKey = 'pinokio.notification.leader';
   const leaderHeartbeatMs = 5000;
   const leaderStaleMs = 15000;
@@ -1616,8 +1720,10 @@ if (typeof hotkeys === 'function') {
     }
   };
 
+  const isFalseyString = (value) => typeof value === 'string' && ['false', '0', 'no', 'off'].includes(value.trim().toLowerCase());
+
   const enqueueSound = (url) => {
-    if (!url) {
+    if (!url || url === false || isFalseyString(url)) {
       return;
     }
     pendingSounds.push(url);
@@ -1629,6 +1735,18 @@ if (typeof hotkeys === 'function') {
       return;
     }
     const payload = packet.data || {};
+    // If targeted to a specific device, ignore only when our id exists and mismatches
+    try {
+      const targetId = (typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null;
+      if (targetId) {
+        const myId = (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : null;
+        if (myId && myId !== targetId) {
+          return;
+        }
+      }
+    } catch (_) {}
+    // Visual confirmation regardless of audio outcome (useful on mobile)
+    flashNotifyIndicator(payload);
     if (typeof payload.sound === 'string' && payload.sound) {
       enqueueSound(payload.sound);
     }
@@ -1696,6 +1814,7 @@ if (typeof hotkeys === 'function') {
         {
           method: CHANNEL_ID,
           mode: 'listen',
+          device_id: (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined,
         },
         handlePacket
       );
@@ -1768,6 +1887,127 @@ if (typeof hotkeys === 'function') {
   // Attempt to become leader immediately on load.
   attemptLeadership();
 })();
+
+// Mobile "Tap to connect" curtain to prime audio on the top-level page
+(function initMobileConnectCurtain() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+  try {
+    if (window.__pinokioConnectCurtainInstalled || window.__pinokioConnectCurtainInstalling) {
+      return;
+    }
+  } catch (_) {}
+  try {
+    if (window.top && window.top !== window) {
+      return; // only top-level
+    }
+  } catch (_) {
+    // cross-origin parent; just bail
+    return;
+  }
+  if (window.__pinokioConnectCurtainInstalled) {
+    return;
+  }
+
+  const isLikelyMobile = () => {
+    try {
+      if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
+        if (navigator.userAgentData.mobile) return true;
+      }
+    } catch (_) {}
+    try {
+      const ua = (navigator.userAgent || '').toLowerCase();
+      if (/iphone|ipad|ipod|android|mobile/.test(ua)) return true;
+    } catch (_) {}
+    try {
+      if (navigator.maxTouchPoints && navigator.maxTouchPoints > 1) return true;
+    } catch (_) {}
+    try {
+      if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) return true;
+    } catch (_) {}
+    try {
+      if (window.matchMedia && window.matchMedia('(max-width: 900px)').matches) return true;
+    } catch (_) {}
+    return false;
+  };
+
+  const createCurtain = () => {
+    const style = document.createElement('style');
+    style.textContent = `
+.pinokio-connect-curtain{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483646;background:rgba(15,23,42,0.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}
+.pinokio-connect-msg{user-select:none;-webkit-user-select:none;color:#fff;background:rgba(15,23,42,0.85);padding:14px 18px;border-radius:12px;font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 16px 40px rgba(0,0,0,.38)}
+@media (max-width:768px){.pinokio-connect-msg{font-size:15px;padding:12px 16px}}
+    `;
+    document.head.appendChild(style);
+
+    const overlay = document.createElement('div');
+    overlay.className = 'pinokio-connect-curtain';
+    overlay.setAttribute('role', 'button');
+    overlay.setAttribute('aria-label', 'Tap to connect');
+    overlay.tabIndex = 0;
+    const msg = document.createElement('div');
+    msg.className = 'pinokio-connect-msg';
+    msg.textContent = 'Tap to connect';
+    overlay.appendChild(msg);
+    window.__pinokioConnectCurtainInstalled = true;
+    return overlay;
+  };
+
+  const primeAudio = async () => {
+    try {
+      let a = window.__pinokioChimeAudio;
+      if (!a) {
+        a = new Audio('/chime.mp3');
+        a.preload = 'auto';
+        a.loop = false;
+        a.muted = false;
+        window.__pinokioChimeAudio = a;
+      }
+      a.currentTime = 0;
+      await a.play(); // must be called synchronously in gesture handler
+      try { a.pause(); a.currentTime = 0; } catch (_) {}
+      try { window.__pinokioAudioArmed = true; } catch (_) {}
+      return true;
+    } catch (_) {
+      try { window.__pinokioAudioArmed = true; } catch (_) {}
+      return false;
+    }
+  };
+
+  const setup = () => {
+    let forceParam = false;
+    try {
+      const usp = new URLSearchParams(window.location.search);
+      forceParam = usp.has('connect') || usp.get('connect') === '1';
+    } catch (_) {}
+    if (!(forceParam || isLikelyMobile())) {
+      return;
+    }
+    if (window.__pinokioConnectCurtainInstalled || window.__pinokioConnectCurtainInstalling) {
+      return;
+    }
+    try { window.__pinokioConnectCurtainInstalling = true; } catch (_) {}
+    const overlay = createCurtain();
+    let handled = false;
+    const onTap = async (e) => {
+      if (handled) return;
+      handled = true;
+      try { e.preventDefault(); e.stopPropagation(); } catch (_) {}
+      try { await primeAudio(); } catch (_) {}
+      try { overlay.remove(); } catch (_) {}
+      try { window.__pinokioConnectCurtainInstalled = true; window.__pinokioConnectCurtainInstalling = false; } catch (_) {}
+    };
+    overlay.addEventListener('pointerdown', onTap, { once: true, capture: true });
+    document.body.appendChild(overlay);
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setup, { once: true });
+  } else {
+    setup();
+  }
+})();
 const refreshParent = (e) => {
   let dispatched = false;
   if (typeof window !== 'undefined' && typeof window.PinokioBroadcastMessage === 'function') {
@@ -1967,6 +2207,12 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   if (document.querySelector("#refresh-page")) {
     document.querySelector("#refresh-page").addEventListener("click", (e) => {
+      try {
+        const headerEl = document.querySelector("header.navheader");
+        const isMinimized = !!(headerEl && headerEl.classList.contains("minimized"));
+        const key = `pinokio:header-restore-once:${location.pathname}`;
+        sessionStorage.setItem(key, isMinimized ? "1" : "0");
+      } catch (_) {}
       location.reload()
       /*
       let browserview = document.querySelector(".browserview")
@@ -2289,6 +2535,120 @@ document.addEventListener("DOMContentLoaded", () => {
 
   let createLauncherModalInstance = null;
   let createLauncherKeydownHandler = null;
+  let createLauncherModalPromise = null;
+
+  const createLauncherFallbackTools = [
+    {
+      value: 'claude',
+      label: 'Claude Code',
+      iconSrc: '/asset/plugin/code/claude/claude.png',
+      isDefault: true,
+      href: '/run/plugin/code/claude/pinokio.js',
+      category: 'CLI',
+    },
+    {
+      value: 'codex',
+      label: 'OpenAI Codex',
+      iconSrc: '/asset/plugin/code/codex/openai.webp',
+      isDefault: false,
+      href: '/run/plugin/code/codex/pinokio.js',
+      category: 'CLI',
+    },
+    {
+      value: 'gemini',
+      label: 'Google Gemini CLI',
+      iconSrc: '/asset/plugin/code/gemini/gemini.jpeg',
+      isDefault: false,
+      href: '/run/plugin/code/gemini/pinokio.js',
+      category: 'CLI',
+    },
+  ];
+
+  let cachedCreateLauncherTools = null;
+  let loadingCreateLauncherTools = null;
+
+  function mapPluginMenuToCreateLauncherTools(menu) {
+    if (!Array.isArray(menu)) return [];
+
+    return menu
+      .map((plugin) => {
+        if (!plugin || (!plugin.href && !plugin.link)) {
+          return null;
+        }
+        const href = typeof plugin.href === 'string' ? plugin.href.trim() : '';
+        const label = plugin.title || plugin.text || plugin.name || href || '';
+
+        let slug = '';
+        if (href) {
+          const segments = href.split('/').filter(Boolean);
+          if (segments.length >= 2) {
+            slug = segments[segments.length - 2] || '';
+          }
+          if (!slug && segments.length) {
+            slug = segments[segments.length - 1] || '';
+          }
+          if (slug.endsWith('.js')) {
+            slug = slug.replace(/\.js$/i, '');
+          }
+        }
+        if (!slug && label) {
+          slug = label
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        }
+        const value = slug || href || (typeof plugin.link === 'string' ? plugin.link.trim() : '');
+        if (!value) {
+          return null;
+        }
+        const iconSrc = plugin.image || null;
+        const runs = Array.isArray(plugin.run) ? plugin.run : [];
+        const hasExec = runs.some((step) => step && step.method === 'exec');
+        const category = hasExec ? 'IDE' : 'CLI';
+        return {
+          value,
+          label,
+          iconSrc,
+          isDefault: Boolean(plugin.default === true),
+          href: href || null,
+          category,
+        };
+      })
+      .filter(Boolean);
+  }
+
+  async function getCreateLauncherTools() {
+    if (Array.isArray(cachedCreateLauncherTools) && cachedCreateLauncherTools.length > 0) {
+      return cachedCreateLauncherTools;
+    }
+    if (loadingCreateLauncherTools) {
+      return loadingCreateLauncherTools;
+    }
+
+    loadingCreateLauncherTools = fetch('/api/plugin/menu')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`Failed to load plugin menu: ${res.status}`);
+        }
+        return res.json();
+      })
+      .then((data) => {
+        const menu = data && Array.isArray(data.menu) ? data.menu : [];
+        const tools = mapPluginMenuToCreateLauncherTools(menu);
+        return tools.length > 0 ? tools : createLauncherFallbackTools.slice();
+      })
+      .catch((error) => {
+        console.warn('Falling back to default agents for create launcher modal', error);
+        return createLauncherFallbackTools.slice();
+      })
+      .finally(() => {
+        loadingCreateLauncherTools = null;
+      });
+
+    const tools = await loadingCreateLauncherTools;
+    cachedCreateLauncherTools = tools;
+    return tools;
+  }
 
   function initCreateLauncherFlow() {
     const trigger = document.getElementById('create-launcher-button');
@@ -2305,295 +2665,362 @@ document.addEventListener("DOMContentLoaded", () => {
     requestAnimationFrame(openPendingCreateLauncherModal);
   }
 
-  function ensureCreateLauncherModal() {
+  async function ensureCreateLauncherModal() {
     if (createLauncherModalInstance) {
       return createLauncherModalInstance;
     }
+    if (createLauncherModalPromise) {
+      return createLauncherModalPromise;
+    }
 
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay create-launcher-modal-overlay';
-
-    const modal = document.createElement('div');
-    modal.className = 'create-launcher-modal';
-    modal.setAttribute('role', 'dialog');
-    modal.setAttribute('aria-modal', 'true');
+    createLauncherModalPromise = (async () => {
+      const tools = await getCreateLauncherTools();
 
-    const header = document.createElement('div');
-    header.className = 'create-launcher-modal-header';
+      const overlay = document.createElement('div');
+      overlay.className = 'modal-overlay create-launcher-modal-overlay';
 
-    const iconWrapper = document.createElement('div');
-    iconWrapper.className = 'create-launcher-modal-icon';
+      const modal = document.createElement('div');
+      modal.className = 'create-launcher-modal';
+      modal.setAttribute('role', 'dialog');
+      modal.setAttribute('aria-modal', 'true');
 
-    const headerIcon = document.createElement('i');
-    //headerIcon.className = 'fa-solid fa-magnifying-glass';
-    headerIcon.className = 'fa-solid fa-wand-magic-sparkles'
-    iconWrapper.appendChild(headerIcon);
+      const header = document.createElement('div');
+      header.className = 'create-launcher-modal-header';
 
-    const headingStack = document.createElement('div');
-    headingStack.className = 'create-launcher-modal-headings';
+      const iconWrapper = document.createElement('div');
+      iconWrapper.className = 'create-launcher-modal-icon';
 
-    const title = document.createElement('h3');
-    title.id = 'create-launcher-modal-title';
-    title.textContent = 'Create';
+      const headerIcon = document.createElement('i');
+      headerIcon.className = 'fa-solid fa-wand-magic-sparkles'
+      iconWrapper.appendChild(headerIcon);
 
-    const description = document.createElement('p');
-    description.className = 'create-launcher-modal-description';
-    description.id = 'create-launcher-modal-description';
-    description.textContent = 'Create a reusable and shareable launcher for any task or any app'
+      const headingStack = document.createElement('div');
+      headingStack.className = 'create-launcher-modal-headings';
 
-    modal.setAttribute('aria-labelledby', title.id);
-    modal.setAttribute('aria-describedby', description.id);
+      const title = document.createElement('h3');
+      title.id = 'create-launcher-modal-title';
+      title.textContent = 'Create';
 
-    headingStack.appendChild(title);
-    headingStack.appendChild(description);
-    header.appendChild(iconWrapper);
-    header.appendChild(headingStack);
+      const description = document.createElement('p');
+      description.className = 'create-launcher-modal-description';
+      description.id = 'create-launcher-modal-description';
+      description.textContent = 'Create a reusable and shareable launcher for any task or any app'
 
-    const promptLabel = document.createElement('label');
-    promptLabel.className = 'create-launcher-modal-label';
-    promptLabel.textContent = 'What do you want to do?';
+      modal.setAttribute('aria-labelledby', title.id);
+      modal.setAttribute('aria-describedby', description.id);
 
-    const promptTextarea = document.createElement('textarea');
-    promptTextarea.className = 'create-launcher-modal-textarea';
-    promptTextarea.placeholder = 'Examples: "a 1-click launcher for ComfyUI", "I want to change file format", "I want to clone a website to run locally", etc. (Leave empty to decide later)';
-    promptLabel.appendChild(promptTextarea);
+      headingStack.appendChild(title);
+      headingStack.appendChild(description);
+      header.appendChild(iconWrapper);
+      header.appendChild(headingStack);
 
-    const templateWrapper = document.createElement('div');
-    templateWrapper.className = 'create-launcher-modal-template';
-    templateWrapper.style.display = 'none';
+      const promptLabel = document.createElement('label');
+      promptLabel.className = 'create-launcher-modal-label';
+      promptLabel.textContent = 'What do you want to do?';
 
-    const templateTitle = document.createElement('div');
-    templateTitle.className = 'create-launcher-modal-template-title';
-    templateTitle.textContent = 'Template variables';
+      const promptTextarea = document.createElement('textarea');
+      promptTextarea.className = 'create-launcher-modal-textarea';
+      promptTextarea.placeholder = 'Examples: "a 1-click launcher for ComfyUI", "I want to change file format", "I want to clone a website to run locally", etc. (Leave empty to decide later)';
+      promptLabel.appendChild(promptTextarea);
 
-    const templateDescription = document.createElement('p');
-    templateDescription.className = 'create-launcher-modal-template-description';
-    templateDescription.textContent = 'Fill in each variable below before creating your launcher.';
+      const templateWrapper = document.createElement('div');
+      templateWrapper.className = 'create-launcher-modal-template';
+      templateWrapper.style.display = 'none';
 
-    const templateFields = document.createElement('div');
-    templateFields.className = 'create-launcher-modal-template-fields';
+      const templateTitle = document.createElement('div');
+      templateTitle.className = 'create-launcher-modal-template-title';
+      templateTitle.textContent = 'Template variables';
 
-    templateWrapper.appendChild(templateTitle);
-    templateWrapper.appendChild(templateDescription);
-    templateWrapper.appendChild(templateFields);
+      const templateDescription = document.createElement('p');
+      templateDescription.className = 'create-launcher-modal-template-description';
+      templateDescription.textContent = 'Fill in each variable below before creating your launcher.';
 
-    const folderLabel = document.createElement('label');
-    folderLabel.className = 'create-launcher-modal-label';
-    folderLabel.textContent = 'name';
+      const templateFields = document.createElement('div');
+      templateFields.className = 'create-launcher-modal-template-fields';
 
-    const folderInput = document.createElement('input');
-    folderInput.type = 'text';
-    folderInput.placeholder = 'example: my-launcher';
-    folderInput.className = 'create-launcher-modal-input';
-    folderLabel.appendChild(folderInput);
+      templateWrapper.appendChild(templateTitle);
+      templateWrapper.appendChild(templateDescription);
+      templateWrapper.appendChild(templateFields);
 
+      const folderLabel = document.createElement('label');
+      folderLabel.className = 'create-launcher-modal-label';
+      folderLabel.textContent = 'name';
 
-    const toolWrapper = document.createElement('div');
-    toolWrapper.className = 'create-launcher-modal-tools';
+      const folderInput = document.createElement('input');
+      folderInput.type = 'text';
+      folderInput.placeholder = 'example: my-launcher';
+      folderInput.className = 'create-launcher-modal-input';
+      folderLabel.appendChild(folderInput);
 
-    const toolTitle = document.createElement('div');
-    toolTitle.className = 'create-launcher-modal-tools-title';
-    toolTitle.textContent = 'Choose AI tool';
+      const toolWrapper = document.createElement('div');
+      toolWrapper.className = 'create-launcher-modal-tools';
 
-    const toolOptions = document.createElement('div');
-    toolOptions.className = 'create-launcher-modal-tools-options';
+      const toolTitle = document.createElement('div');
+      toolTitle.className = 'create-launcher-modal-tools-title';
+      toolTitle.textContent = 'Select Agent';
 
-    const tools = [
-      { value: 'claude', label: 'Claude Code', iconSrc: '/asset/plugin/code/claude/claude.png', defaultChecked: true },
-      { value: 'codex', label: 'OpenAI Codex', iconSrc: '/asset/plugin/code/codex/openai.webp', defaultChecked: false },
-      { value: 'gemini', label: 'Google Gemini CLI', iconSrc: '/asset/plugin/code/gemini/gemini.jpeg', defaultChecked: false }
-    ];
+      const toolOptions = document.createElement('div');
+      toolOptions.className = 'create-launcher-modal-tools-options';
 
-    const toolEntries = [];
+      const toolEntries = [];
+      const defaultToolIndex = tools.findIndex((tool) => tool.isDefault);
+      const initialSelectionIndex = defaultToolIndex >= 0 ? defaultToolIndex : (tools.length > 0 ? 0 : -1);
 
-    tools.forEach(({ value, label, iconSrc, defaultChecked }) => {
-      const option = document.createElement('label');
-      option.className = 'create-launcher-modal-tool';
+      const groupedTools = tools.reduce((acc, tool, index) => {
+        const category = tool.category || 'CLI';
+        if (!acc.has(category)) {
+          acc.set(category, []);
+        }
+        acc.get(category).push({ tool, index });
+        return acc;
+      }, new Map());
+
+      const categoryOrder = ['CLI', 'IDE'];
+      const orderedGroups = [];
+      categoryOrder.forEach((cat) => {
+        if (groupedTools.has(cat)) {
+          orderedGroups.push([cat, groupedTools.get(cat)]);
+          groupedTools.delete(cat);
+        }
+      });
+      groupedTools.forEach((value, key) => {
+        orderedGroups.push([key, value]);
+      });
 
-      const radio = document.createElement('input');
-      radio.type = 'radio';
-      radio.name = 'create-launcher-tool';
-      radio.value = value;
-      if (defaultChecked) {
-        radio.checked = true;
-      }
+      orderedGroups.forEach(([category, entries]) => {
+        const group = document.createElement('div');
+        group.className = 'create-launcher-modal-tools-group';
 
-      const badge = document.createElement('span');
-      badge.className = 'create-launcher-modal-tool-label';
-      badge.textContent = label;
-
-      option.appendChild(radio);
-      if (iconSrc) {
-        const icon = document.createElement('img');
-        icon.className = 'create-launcher-modal-tool-icon';
-        icon.src = iconSrc;
-        icon.alt = `${label} icon`;
-        icon.onerror = () => { icon.style.display='none'; }
-        option.appendChild(icon);
-      }
-      option.appendChild(badge);
-      toolOptions.appendChild(option);
-      toolEntries.push({ input: radio, container: option });
-      radio.addEventListener('change', () => {
-        updateToolSelections(toolEntries);
-      });
-    });
+        const heading = document.createElement('div');
+        heading.className = 'create-launcher-modal-tools-group-title';
+        heading.textContent = category;
+        group.appendChild(heading);
 
-    toolWrapper.appendChild(toolTitle);
-    toolWrapper.appendChild(toolOptions);
+        const groupList = document.createElement('div');
+        groupList.className = 'create-launcher-modal-tools-group-options';
 
-    const error = document.createElement('div');
-    error.className = 'create-launcher-modal-error';
+        const sortedEntries = entries.slice().sort((a, b) => {
+          const nameA = (a.tool && a.tool.label ? a.tool.label : '').toLowerCase();
+          const nameB = (b.tool && b.tool.label ? b.tool.label : '').toLowerCase();
+          if (nameA < nameB) return -1;
+          if (nameA > nameB) return 1;
+          return 0;
+        });
 
-    const actions = document.createElement('div');
-    actions.className = 'create-launcher-modal-actions';
-
-    const cancelButton = document.createElement('button');
-    cancelButton.type = 'button';
-    cancelButton.className = 'create-launcher-modal-button cancel';
-    cancelButton.textContent = 'Cancel';
-
-    const confirmButton = document.createElement('button');
-    confirmButton.type = 'button';
-    confirmButton.className = 'create-launcher-modal-button confirm';
-    confirmButton.textContent = 'Create';
-
-    actions.appendChild(cancelButton);
-    actions.appendChild(confirmButton);
-
-    const advancedLink = document.createElement('a');
-    advancedLink.className = 'create-launcher-modal-advanced';
-    advancedLink.href = '/init';
-    advancedLink.textContent = 'Or, try advanced options';
-
-    const bookmarkletLink = document.createElement('a');
-    bookmarkletLink.className = 'create-launcher-modal-advanced secondary';
-    bookmarkletLink.href = '/bookmarklet';
-    bookmarkletLink.target = '_blank';
-    bookmarkletLink.setAttribute("features", "browser")
-    bookmarkletLink.rel = 'noopener';
-    bookmarkletLink.textContent = 'Add 1-click bookmarklet';
-
-    const linkRow = document.createElement('div');
-    linkRow.className = 'create-launcher-modal-links';
-    linkRow.appendChild(advancedLink);
-    linkRow.appendChild(bookmarkletLink);
-
-    modal.appendChild(header);
-    modal.appendChild(promptLabel);
-    modal.appendChild(templateWrapper);
-    modal.appendChild(folderLabel);
-    modal.appendChild(toolWrapper);
-    modal.appendChild(error);
-    modal.appendChild(actions);
-    modal.appendChild(linkRow);
-    overlay.appendChild(modal);
-    document.body.appendChild(overlay);
+        sortedEntries.forEach(({ tool, index }) => {
+          const option = document.createElement('label');
+          option.className = 'create-launcher-modal-tool';
+
+          const radio = document.createElement('input');
+          radio.type = 'radio';
+          radio.name = 'create-launcher-tool';
+          radio.value = tool.value;
+          radio.dataset.agentLabel = tool.label;
+          radio.dataset.agentCategory = category;
+          if (tool.href) {
+            radio.dataset.agentHref = tool.href;
+          }
 
-    let folderEditedByUser = false;
-    let templateValues = new Map();
+          if (index === initialSelectionIndex) {
+            radio.checked = true;
+          }
 
-    function syncTemplateFields(promptText, defaults = {}) {
-      const variableNames = extractTemplateVariableNames(promptText);
-      const previousValues = templateValues;
-      const newValues = new Map();
+          const badge = document.createElement('span');
+          badge.className = 'create-launcher-modal-tool-label';
+          badge.textContent = tool.label;
+
+          option.appendChild(radio);
+          if (tool.iconSrc) {
+            const icon = document.createElement('img');
+            icon.className = 'create-launcher-modal-tool-icon';
+            icon.src = tool.iconSrc;
+            icon.alt = `${tool.label} icon`;
+            icon.onerror = () => { icon.style.display = 'none'; };
+            option.appendChild(icon);
+          }
+          option.appendChild(badge);
+          groupList.appendChild(option);
+          const entry = { input: radio, container: option, meta: tool };
+          toolEntries.push(entry);
+          radio.addEventListener('change', () => {
+            updateToolSelections(toolEntries);
+          });
+        });
 
-      variableNames.forEach((name) => {
-        if (Object.prototype.hasOwnProperty.call(defaults, name) && defaults[name] !== undefined) {
-          newValues.set(name, defaults[name]);
-        } else if (previousValues.has(name)) {
-          newValues.set(name, previousValues.get(name));
-        } else {
-          newValues.set(name, '');
-        }
+        group.appendChild(groupList);
+        toolOptions.appendChild(group);
       });
 
-      templateValues = newValues;
-      templateFields.innerHTML = '';
-
-      if (variableNames.length === 0) {
-        templateWrapper.style.display = 'none';
-        return;
+      if (!toolEntries.length) {
+        const emptyState = document.createElement('div');
+        emptyState.className = 'create-launcher-modal-tools-empty';
+        emptyState.textContent = 'No agents available.';
+        toolOptions.appendChild(emptyState);
       }
 
-      templateWrapper.style.display = 'flex';
+      toolWrapper.appendChild(toolTitle);
+      toolWrapper.appendChild(toolOptions);
+
+      const error = document.createElement('div');
+      error.className = 'create-launcher-modal-error';
+
+      const actions = document.createElement('div');
+      actions.className = 'create-launcher-modal-actions';
+
+      const cancelButton = document.createElement('button');
+      cancelButton.type = 'button';
+      cancelButton.className = 'create-launcher-modal-button cancel';
+      cancelButton.textContent = 'Cancel';
+
+      const confirmButton = document.createElement('button');
+      confirmButton.type = 'button';
+      confirmButton.className = 'create-launcher-modal-button confirm';
+      confirmButton.textContent = 'Create';
+
+      actions.appendChild(cancelButton);
+      actions.appendChild(confirmButton);
+
+      const advancedLink = document.createElement('a');
+      advancedLink.className = 'create-launcher-modal-advanced';
+      advancedLink.href = '/init';
+      advancedLink.textContent = 'Or, try advanced options';
+
+      const bookmarkletLink = document.createElement('a');
+      bookmarkletLink.className = 'create-launcher-modal-advanced secondary';
+      bookmarkletLink.href = '/bookmarklet';
+      bookmarkletLink.target = '_blank';
+      bookmarkletLink.setAttribute('features', 'browser');
+      bookmarkletLink.rel = 'noopener';
+      bookmarkletLink.textContent = 'Add 1-click bookmarklet';
+
+      const linkRow = document.createElement('div');
+      linkRow.className = 'create-launcher-modal-links';
+      linkRow.appendChild(advancedLink);
+      linkRow.appendChild(bookmarkletLink);
+
+      modal.appendChild(header);
+      modal.appendChild(promptLabel);
+      modal.appendChild(templateWrapper);
+      modal.appendChild(folderLabel);
+      modal.appendChild(toolWrapper);
+      modal.appendChild(error);
+      modal.appendChild(actions);
+      modal.appendChild(linkRow);
+      overlay.appendChild(modal);
+      document.body.appendChild(overlay);
+
+      let folderEditedByUser = false;
+      let templateValues = new Map();
+
+      function syncTemplateFields(promptText, defaults = {}) {
+        const variableNames = extractTemplateVariableNames(promptText);
+        const previousValues = templateValues;
+        const newValues = new Map();
+
+        variableNames.forEach((name) => {
+          if (Object.prototype.hasOwnProperty.call(defaults, name) && defaults[name] !== undefined) {
+            newValues.set(name, defaults[name]);
+          } else if (previousValues.has(name)) {
+            newValues.set(name, previousValues.get(name));
+          } else {
+            newValues.set(name, '');
+          }
+        });
 
-      variableNames.forEach((name) => {
-        const field = document.createElement('label');
-        field.className = 'create-launcher-modal-template-field';
+        templateValues = newValues;
+        templateFields.innerHTML = '';
 
-        const labelText = document.createElement('span');
-        labelText.className = 'create-launcher-modal-template-field-label';
-        labelText.textContent = name;
+        if (variableNames.length === 0) {
+          templateWrapper.style.display = 'none';
+          return;
+        }
 
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.className = 'create-launcher-modal-template-input';
-        input.placeholder = `Enter ${name}`;
-        input.value = templateValues.get(name) || '';
-        input.dataset.templateInput = name;
-        input.addEventListener('input', () => {
-          templateValues.set(name, input.value);
+        templateWrapper.style.display = 'flex';
+
+        variableNames.forEach((name) => {
+          const field = document.createElement('label');
+          field.className = 'create-launcher-modal-template-field';
+
+          const labelText = document.createElement('span');
+          labelText.className = 'create-launcher-modal-template-field-label';
+          labelText.textContent = name;
+
+          const input = document.createElement('input');
+          input.type = 'text';
+          input.className = 'create-launcher-modal-template-input';
+          input.placeholder = `Enter ${name}`;
+          input.value = templateValues.get(name) || '';
+          input.dataset.templateInput = name;
+          input.addEventListener('input', () => {
+            templateValues.set(name, input.value);
+          });
+
+          field.appendChild(labelText);
+          field.appendChild(input);
+          templateFields.appendChild(field);
         });
+      }
 
-        field.appendChild(labelText);
-        field.appendChild(input);
-        templateFields.appendChild(field);
+      folderInput.addEventListener('input', () => {
+        folderEditedByUser = true;
       });
-    }
 
-    folderInput.addEventListener('input', () => {
-      folderEditedByUser = true;
-    });
+      promptTextarea.addEventListener('input', () => {
+        syncTemplateFields(promptTextarea.value);
+        if (folderEditedByUser) return;
+        folderInput.value = generateFolderSuggestion(promptTextarea.value);
+      });
 
-    promptTextarea.addEventListener('input', () => {
-      syncTemplateFields(promptTextarea.value);
-      if (folderEditedByUser) return;
-      folderInput.value = generateFolderSuggestion(promptTextarea.value);
-    });
+      cancelButton.addEventListener('click', hideCreateLauncherModal);
+      confirmButton.addEventListener('click', submitCreateLauncherModal);
+      overlay.addEventListener('click', (event) => {
+        if (event.target === overlay) {
+          hideCreateLauncherModal();
+        }
+      });
 
-    cancelButton.addEventListener('click', hideCreateLauncherModal);
-    confirmButton.addEventListener('click', submitCreateLauncherModal);
-    overlay.addEventListener('click', (event) => {
-      if (event.target === overlay) {
+      advancedLink.addEventListener('click', () => {
         hideCreateLauncherModal();
-      }
-    });
+      });
 
-    advancedLink.addEventListener('click', () => {
-      hideCreateLauncherModal();
-    });
+      bookmarkletLink.addEventListener('click', () => {
+        hideCreateLauncherModal();
+      });
 
-    bookmarkletLink.addEventListener('click', () => {
-      hideCreateLauncherModal();
-    });
+      createLauncherModalInstance = {
+        overlay,
+        modal,
+        folderInput,
+        promptTextarea,
+        cancelButton,
+        confirmButton,
+        error,
+        toolEntries,
+        toolOptions,
+        toolWrapper,
+        resetFolderTracking() {
+          folderEditedByUser = false;
+        },
+        syncTemplateFields,
+        getTemplateValues() {
+          return new Map(templateValues);
+        },
+        templateFields,
+        markFolderEdited() {
+          folderEditedByUser = true;
+        }
+      };
 
-    createLauncherModalInstance = {
-      overlay,
-      modal,
-      folderInput,
-      promptTextarea,
-      cancelButton,
-      confirmButton,
-      error,
-      toolEntries,
-//      description,
-      resetFolderTracking() {
-        folderEditedByUser = false;
-      },
-      syncTemplateFields,
-      getTemplateValues() {
-        return new Map(templateValues);
-      },
-      templateFields,
-      markFolderEdited() {
-        folderEditedByUser = true;
-      }
-    };
+      updateToolSelections(toolEntries);
 
-    updateToolSelections(toolEntries);
+      return createLauncherModalInstance;
+    })();
 
-    return createLauncherModalInstance;
+    try {
+      return await createLauncherModalPromise;
+    } finally {
+      createLauncherModalPromise = null;
+    }
   }
 
   async function showCreateLauncherModal(defaults = {}) {
@@ -2607,7 +3034,7 @@ document.addEventListener("DOMContentLoaded", () => {
       return
     }
 
-    const modal = ensureCreateLauncherModal();
+    const modal = await ensureCreateLauncherModal();
 
     modal.error.textContent = '';
     modal.resetFolderTracking();
@@ -2626,8 +3053,10 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     const matchingToolEntry = modal.toolEntries.find((entry) => entry.input.value === tool);
+    const defaultToolEntryIndex = modal.toolEntries.findIndex((entry) => entry.meta && entry.meta.isDefault);
+    const fallbackToolIndex = defaultToolEntryIndex >= 0 ? defaultToolEntryIndex : 0;
     modal.toolEntries.forEach((entry, index) => {
-      entry.input.checked = matchingToolEntry ? entry === matchingToolEntry : index === 0;
+      entry.input.checked = matchingToolEntry ? entry === matchingToolEntry : index === fallbackToolIndex;
     });
     updateToolSelections(modal.toolEntries);
 
@@ -2663,14 +3092,22 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
-  function submitCreateLauncherModal() {
-    const modal = ensureCreateLauncherModal();
+  async function submitCreateLauncherModal() {
+    const modal = await ensureCreateLauncherModal();
     modal.error.textContent = '';
 
     const folderName = modal.folderInput.value.trim();
     const rawPrompt = modal.promptTextarea.value;
     const templateValues = modal.getTemplateValues ? modal.getTemplateValues() : new Map();
-    const selectedTool = modal.toolEntries.find((entry) => entry.input.checked)?.input.value || 'claude';
+    const selectedEntry = modal.toolEntries.find((entry) => entry.input.checked);
+    const defaultToolEntryIndex = modal.toolEntries.findIndex((entry) => entry.meta && entry.meta.isDefault);
+    const fallbackEntry = defaultToolEntryIndex >= 0 ? modal.toolEntries[defaultToolEntryIndex] : modal.toolEntries[0];
+    const selectedTool = (selectedEntry || fallbackEntry)?.input.value || '';
+
+    if (!selectedTool) {
+      modal.error.textContent = 'Please select an agent.';
+      return;
+    }
 
     if (!folderName) {
       modal.error.textContent = 'Please enter a folder name.';