pinokiod 3.297.0 → 3.300.0

package/kernel/index.js

@@ -737,7 +737,57 @@ class Kernel {
       })
     }
   }
+  _readWindowsPath(scope) {
+    try {
+      const cmd = `powershell.exe -NoProfile -Command "[Environment]::GetEnvironmentVariable('Path','${scope}')"`
+      return execSync(cmd, { encoding: "utf-8" }).trim()
+    } catch (e) {
+      return ""
+    }
+  }
+  refreshPath() {
+    if (!this.envs) {
+      return
+    }
+    let pathKey
+    if (this.envs.Path) {
+      pathKey = "Path"
+    } else if (this.envs.PATH) {
+      pathKey = "PATH"
+    }
+    if (!pathKey) {
+      return
+    }
+    let refreshed
+    if (this.platform === "win32") {
+      const machinePath = this._readWindowsPath("Machine")
+      const userPath = this._readWindowsPath("User")
+      const segments = [machinePath, userPath].filter(Boolean)
+      if (segments.length > 0) {
+        refreshed = segments.join(path.delimiter)
+      }
+    } else {
+      try {
+        refreshed = shellPath.sync()
+      } catch (e) {
+        refreshed = null
+      }
+    }
+    if (!refreshed) {
+      return
+    }
+    const current = this.envs[pathKey] || ""
+    if (this.shellpath && current.includes(this.shellpath)) {
+      this.envs[pathKey] = current.replace(this.shellpath, refreshed)
+    } else if (!current) {
+      this.envs[pathKey] = refreshed
+    } else {
+      this.envs[pathKey] = `${refreshed}${path.delimiter}${current}`
+    }
+    this.shellpath = refreshed
+  }
   which(name, pattern) {
+    this.refreshPath()
     if (this.platform === "win32") {
       try {
         const result = execSync(`where ${name}`, { env: this.envs, encoding: "utf-8" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.297.0",
+  "version": "3.300.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -1903,6 +1903,7 @@ class Server {
           let logpath = encodeURIComponent(Util.log_path(filepath, this.kernel))
           const result = {
             portal: this.portal,
+            projectName: (pathComponents.length > 0 ? pathComponents[0] : ''),
             kill_message,
             callback,
             callback_target,

package/server/public/common.js

@@ -52,9 +52,39 @@ function check_ready () {
 
 function check_dev () {
   createLauncherDebugLog('check_dev start');
-  return fetch('/bundle/dev').then((response) => response.json()).then((payload) => {
+  let controller = null;
+  let timeoutId = null;
+  if (typeof AbortController === 'function') {
+    try {
+      controller = new AbortController();
+      timeoutId = setTimeout(() => {
+        try {
+          controller.abort();
+        } catch (_) {}
+      }, 7000);
+    } catch (_) {
+      controller = null;
+    }
+  }
+
+  const fetchPromise = fetch('/bundle/dev', controller ? { signal: controller.signal } : undefined).then((response) => response.json());
+  const timedPromise = controller ? fetchPromise : Promise.race([
+    fetchPromise,
+    new Promise((_, reject) => setTimeout(() => reject(new Error('dev status timeout')), 7000))
+  ]);
+
+  return timedPromise.then((payload) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
     createLauncherDebugLog('check_dev response', payload);
     return payload
+  }).catch((error) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    createLauncherDebugLog('check_dev error', error);
+    return { available: null, transientError: true }
   })
 }
 
@@ -72,15 +102,7 @@ function wait_ready () {
     check_ready().then((ready) => {
       createLauncherDebugLog('wait_ready initial requirements readiness', ready);
       if (ready) {
-        check_dev().then((data) => {
-          const available = !(data && data.available === false)
-          createLauncherDebugLog('wait_ready dev bundle availability (initial)', available, data);
-          if (available) {
-            resolve({ closeModal: null, ready: true })
-          } else {
-            resolve({ closeModal: null, ready: false })
-          }
-        })
+        ensureDevReady().then(resolve)
       } else {
         let loader = createMinimalLoadingSwal();
         let interval = setInterval(() => {
@@ -88,15 +110,7 @@ function wait_ready () {
             createLauncherDebugLog('wait_ready polling requirements readiness', ready);
             if (ready) {
               clearInterval(interval)
-              check_dev().then((data) => {
-                const available = !(data && data.available === false)
-                createLauncherDebugLog('wait_ready dev bundle availability (after poll)', available, data);
-                if (available) {
-                  resolve({ ready: true, closeModal: loader })
-                } else {
-                  resolve({ ready: false, closeModal: loader })
-                }
-              })
+              ensureDevReady(loader, 'after poll').then(resolve)
             }
           })
         }, 500)
@@ -105,6 +119,33 @@ function wait_ready () {
   })
 }
 
+function ensureDevReady(existingLoader = null, label = 'initial') {
+  let loader = existingLoader;
+  const ensureLoader = () => {
+    if (!loader) {
+      loader = createMinimalLoadingSwal();
+    }
+    return loader;
+  };
+
+  return new Promise((resolve) => {
+    const attempt = (contextLabel) => {
+      check_dev().then((data) => {
+        if (data && data.transientError) {
+          createLauncherDebugLog('wait_ready dev bundle transient error', data);
+          ensureLoader();
+          setTimeout(() => attempt('retry'), 500);
+          return;
+        }
+        const available = !(data && data.available === false)
+        createLauncherDebugLog('wait_ready dev bundle availability (' + contextLabel + ')', available, data);
+        resolve({ ready: available, closeModal: loader })
+      })
+    };
+    attempt(label)
+  })
+}
+
 function collectPostMessageTargets(contextWindow) {
   const ctx = contextWindow || window;
   const targets = new Set();
@@ -3215,12 +3256,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
   function initializeCreateLauncherIntegration() {
     const defaults = parseCreateLauncherDefaults();
-    const triggerExists = document.getElementById('create-launcher-button');
+    const createTrigger = document.getElementById('create-launcher-button');
+    const askTriggers = Array.from(document.querySelectorAll('[data-ask-ai-trigger]'));
     createLauncherDebugLog('initializeCreateLauncherIntegration', {
       defaultsPresent: Boolean(defaults),
-      triggerExists: Boolean(triggerExists)
+      triggerExists: Boolean(createTrigger),
+      askTriggerCount: askTriggers.length
     });
-    if (!triggerExists && !defaults) {
+    if (!createTrigger && askTriggers.length === 0 && !defaults) {
       createLauncherDebugLog('initializeCreateLauncherIntegration aborted (no trigger/defaults)');
       return;
     }
@@ -3235,6 +3278,7 @@ document.addEventListener("DOMContentLoaded", () => {
         return;
       }
       initCreateLauncherTrigger(api);
+      initAskAiTrigger(api);
       openPendingCreateLauncherModal(api);
     });
   }
@@ -3288,6 +3332,90 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  function initAskAiTrigger(api) {
+    const triggers = Array.from(document.querySelectorAll('[data-ask-ai-trigger]'));
+    if (triggers.length === 0) {
+      createLauncherDebugLog('initAskAiTrigger: trigger not found');
+      return;
+    }
+    triggers.forEach((trigger) => {
+      if (trigger.dataset.askAiInit === 'true') {
+        return;
+      }
+      trigger.dataset.askAiInit = 'true';
+      createLauncherDebugLog('initAskAiTrigger: binding click handler');
+      trigger.addEventListener('click', () => {
+        const workspace = deriveWorkspaceForAskAi(trigger);
+        const defaults = {
+          variant: 'ask',
+        };
+        if (workspace) {
+          defaults.folder = workspace;
+          defaults.projectName = workspace;
+        }
+        guardCreateLauncher(api, defaults);
+      });
+    });
+  }
+
+  function deriveWorkspaceForAskAi(trigger) {
+    const direct = (trigger && trigger.dataset && typeof trigger.dataset.workspace === 'string')
+      ? trigger.dataset.workspace.trim()
+      : '';
+    if (direct) {
+      return direct;
+    }
+    const bodyWorkspace = document.body && document.body.dataset && typeof document.body.dataset.workspace === 'string'
+      ? document.body.dataset.workspace.trim()
+      : '';
+    if (bodyWorkspace) {
+      return bodyWorkspace;
+    }
+    const workspaceElement = document.querySelector('[data-workspace]');
+    if (workspaceElement) {
+      const attr = workspaceElement.getAttribute('data-workspace');
+      if (attr && attr.trim()) {
+        return attr.trim();
+      }
+    }
+    const pathValue = (window.location && typeof window.location.pathname === 'string')
+      ? window.location.pathname
+      : '';
+    if (!pathValue) {
+      return '';
+    }
+    const patterns = [
+      /\/_api\/([^/]+)/i,
+      /\/api\/([^/]+)/i,
+      /\/p\/([^/]+)/i,
+      /\/pinokio\/fileview\/([^/]+)/i,
+      /\/pinokio\/terminal\/([^/]+)/i,
+      /\/pinokio\/editor\/([^/]+)/i,
+    ];
+    for (let i = 0; i < patterns.length; i += 1) {
+      const match = patterns[i].exec(pathValue);
+      if (match && match[1]) {
+        return safeDecodeURIComponent(match[1]);
+      }
+    }
+    const segments = pathValue.split('/').filter(Boolean);
+    if (segments.length > 0) {
+      return safeDecodeURIComponent(segments[segments.length - 1]);
+    }
+    return '';
+  }
+
+  function safeDecodeURIComponent(value) {
+    if (typeof value !== 'string') {
+      return '';
+    }
+    try {
+      return decodeURIComponent(value);
+    } catch (_) {
+      return value;
+    }
+  }
+
   function openPendingCreateLauncherModal(api) {
     if (!api || !createLauncherState.pendingDefaults) {
       return;

package/server/public/create-launcher.js

@@ -33,6 +33,14 @@
   ];
 
   const CATEGORY_ORDER = ['CLI', 'IDE'];
+  const MODAL_VARIANTS = {
+    CREATE: 'create',
+    ASK: 'ask',
+  };
+  const CREATE_PROMPT_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)';
+  const ASK_PROMPT_PLACEHOLDER = 'Examples: "Fix it", "Can you make this dark theme?", "What does this do?", "How does X feature work?", "What should i do to X".';
+  const CREATE_DESCRIPTION = 'Create a reusable and shareable launcher for any task or any app';
+  const ASK_DESCRIPTION = 'Ask the AI to customize, fix, or explain how the app works.';
 
   let cachedTools = null;
   let loadingTools = null;
@@ -361,6 +369,7 @@
 
     const container = document.createElement('div');
     container.className = isPage ? 'create-launcher-page-card' : 'create-launcher-modal';
+    container.dataset.variant = MODAL_VARIANTS.CREATE;
 
     const header = document.createElement('div');
     header.className = 'create-launcher-modal-header';
@@ -384,7 +393,7 @@
     const description = document.createElement('p');
     description.className = 'create-launcher-modal-description';
     description.id = `${mode}-create-launcher-description`;
-    description.textContent = 'Create a reusable and shareable launcher for any task or any app';
+    description.textContent = CREATE_DESCRIPTION;
 
     headingStack.appendChild(title);
     headingStack.appendChild(description);
@@ -408,7 +417,7 @@
 
     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)';
+    promptTextarea.placeholder = CREATE_PROMPT_PLACEHOLDER;
     promptLabel.appendChild(promptTextarea);
 
     const templateWrapper = document.createElement('div');
@@ -501,7 +510,7 @@
 
     promptTextarea.addEventListener('input', () => {
       templateManager.syncTemplateFields(promptTextarea.value);
-      if (!folderEditedByUser) {
+      if (!folderEditedByUser && container.dataset.variant !== MODAL_VARIANTS.ASK) {
         folderInput.value = generateFolderSuggestion(promptTextarea.value);
       }
     });
@@ -510,8 +519,11 @@
       mode,
       overlay,
       container,
+      title,
+      description,
       promptTextarea,
       folderInput,
+      folderLabel,
       templateWrapper,
       templateFields,
       templateManager,
@@ -522,6 +534,9 @@
       closeButton,
       advancedLink,
       bookmarkletLink,
+      linkRow,
+      currentVariant: MODAL_VARIANTS.CREATE,
+      projectName: '',
       resetFolderTracking() {
         folderEditedByUser = false;
       },
@@ -531,18 +546,48 @@
     };
   }
 
+  function applyVariantToUi(ui, variant = MODAL_VARIANTS.CREATE) {
+    if (!ui) return;
+    const targetVariant = variant === MODAL_VARIANTS.ASK ? MODAL_VARIANTS.ASK : MODAL_VARIANTS.CREATE;
+    const isAsk = targetVariant === MODAL_VARIANTS.ASK;
+    ui.currentVariant = targetVariant;
+    if (ui.container) {
+      ui.container.dataset.variant = targetVariant;
+    }
+    if (ui.title) {
+      ui.title.textContent = isAsk ? 'Ask AI' : 'Create';
+    }
+    if (ui.description) {
+      ui.description.textContent = isAsk ? ASK_DESCRIPTION : CREATE_DESCRIPTION;
+    }
+    if (ui.promptTextarea) {
+      ui.promptTextarea.placeholder = isAsk ? ASK_PROMPT_PLACEHOLDER : CREATE_PROMPT_PLACEHOLDER;
+    }
+    if (ui.folderLabel) {
+      ui.folderLabel.style.display = isAsk ? 'none' : '';
+    }
+    if (ui.linkRow) {
+      ui.linkRow.style.display = isAsk ? 'none' : '';
+    }
+    if (ui.confirmButton) {
+      ui.confirmButton.textContent = isAsk ? 'Ask' : 'Create';
+    }
+  }
+
   function applyDefaultsToUi(ui, defaults = {}) {
     if (!ui) return;
     const promptValue = typeof defaults.prompt === 'string' ? defaults.prompt : '';
+    const projectName = typeof defaults.projectName === 'string' ? defaults.projectName.trim() : '';
     const folderValue = typeof defaults.folder === 'string' && defaults.folder.trim()
       ? defaults.folder.trim()
-      : generateFolderSuggestion(promptValue);
+      : (projectName || generateFolderSuggestion(promptValue));
     const toolValue = typeof defaults.tool === 'string' ? defaults.tool.trim() : '';
     const templateDefaults = defaults.templateValues || {};
 
     ui.promptTextarea.value = promptValue;
     ui.templateManager.syncTemplateFields(promptValue, templateDefaults);
     ui.folderInput.value = folderValue || '';
+    ui.projectName = projectName || '';
     ui.resetFolderTracking();
 
     if (toolValue) {
@@ -590,7 +635,10 @@
     if (!ui) return;
     ui.error.textContent = '';
 
+    const variant = ui.currentVariant || MODAL_VARIANTS.CREATE;
+    const isAskVariant = variant === MODAL_VARIANTS.ASK;
     const folderName = ui.folderInput.value.trim();
+    const targetProject = isAskVariant ? (ui.projectName || folderName) : folderName;
     const rawPrompt = ui.promptTextarea.value;
     const templateValues = readTemplateValues(ui);
     const selectedTool = getSelectedTool(ui);
@@ -600,16 +648,18 @@
       return;
     }
 
-    if (!folderName) {
-      ui.error.textContent = 'Please enter a folder name.';
-      ui.folderInput.focus();
-      return;
-    }
+    if (!isAskVariant) {
+      if (!folderName) {
+        ui.error.textContent = 'Please enter a folder name.';
+        ui.folderInput.focus();
+        return;
+      }
 
-    if (folderName.includes(' ')) {
-      ui.error.textContent = 'Folder names cannot contain spaces.';
-      ui.folderInput.focus();
-      return;
+      if (folderName.includes(' ')) {
+        ui.error.textContent = 'Folder names cannot contain spaces.';
+        ui.folderInput.focus();
+        return;
+      }
     }
 
     let finalPrompt = rawPrompt;
@@ -636,6 +686,17 @@
     }
 
     const prompt = finalPrompt.trim();
+
+    if (isAskVariant) {
+      const params = new URLSearchParams();
+      params.set('plugin', `/plugin/code/${selectedTool}/pinokio.js`);
+      if (prompt) {
+        params.set('prompt', prompt);
+      }
+      window.location.href = `/p/${targetProject}/dev?${params.toString()}`;
+      return;
+    }
+
     const params = new URLSearchParams();
     params.set('name', folderName);
     params.set('message', prompt);
@@ -684,13 +745,18 @@
       return;
     }
 
-    applyDefaultsToUi(ui, defaults);
-    ui.templateManager.syncTemplateFields(ui.promptTextarea.value, defaults.templateValues || {});
+    const options = (defaults && typeof defaults === 'object') ? defaults : {};
+    const { variant, ...restDefaults } = options;
+    applyVariantToUi(ui, variant);
+    applyDefaultsToUi(ui, restDefaults);
+    ui.templateManager.syncTemplateFields(ui.promptTextarea.value, restDefaults.templateValues || {});
 
     requestAnimationFrame(() => {
       ui.overlay.classList.add('is-visible');
       requestAnimationFrame(() => {
-        ui.folderInput.select();
+        if (ui.currentVariant !== MODAL_VARIANTS.ASK && ui.folderInput) {
+          ui.folderInput.select();
+        }
         ui.promptTextarea.focus();
       });
     });

package/server/public/urldropdown.css

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 100000002;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

package/server/views/app.ejs

@@ -13,6 +13,7 @@
 <link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
 <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
 <link href="/style.css" rel="stylesheet"/>
+<link href="/urldropdown.css" rel="stylesheet" />
 <script src="/modalinput.js"></script>
 <script src="/pinokio-touch.js"></script>
 <% if (agent === "electron") { %>
@@ -3042,6 +3043,13 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
               <div class='flexible'></div>
             </div>
           </a>
+          <button type='button' id='ask-ai-tab' class="btn header-item" data-static="ask-ai" data-workspace="<%=name%>" data-ask-ai-trigger="true">
+            <div class='tab'>
+              <i class="fa-solid fa-robot"></i>
+              <div class='display'>Ask AI</div>
+              <div class='flexible'></div>
+            </div>
+          </button>
         </div>
       <% } %>
       <div class='m s temp-menu' data-type='s'>
@@ -3948,14 +3956,14 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     return false
   }
   // Rebuild a navigation container while keeping any active selection intact.
-  const rerenderMenuSection = (container, html) => {
-    const targetContainer = typeof container === 'string' ? document.querySelector(container) : container
-    if (!targetContainer) {
-      return
-    }
-    const staticNodes = Array.from(targetContainer.children || []).filter((node) => {
-      return node && node.dataset && node.dataset.static === 'retain'
-    })
+const rerenderMenuSection = (container, html) => {
+  const targetContainer = typeof container === 'string' ? document.querySelector(container) : container
+  if (!targetContainer) {
+    return
+  }
+  const staticNodes = Array.from(targetContainer.children || []).filter((node) => {
+    return node && node.dataset && node.dataset.static
+  })
     const template = document.createElement('template')
     template.innerHTML = html || ''
     const fragment = template.content

package/server/views/connect/index.ejs

@@ -16,39 +16,117 @@
       <link href="/electron.css" rel="stylesheet"/>
     <% } %>
     <style>
-        body {
+        body[data-page="connect"] {
+            --connect-body-bg: #f8fafc;
+            --connect-text: #0f172a;
+            --connect-heading: #1f2937;
+            --connect-card-bg: #ffffff;
+            --connect-card-border: rgba(15, 23, 42, 0.08);
+            --connect-card-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
+            --connect-user-info-bg: #f0f9ff;
+            --connect-user-info-border: #3b82f6;
+            --connect-status-success-bg: #d1fae5;
+            --connect-status-success-text: #065f46;
+            --connect-status-error-bg: #fee2e2;
+            --connect-status-error-text: #991b1b;
+            --connect-status-warning-bg: #fef3c7;
+            --connect-status-warning-text: #92400e;
+            --connect-loader-overlay: rgba(248, 250, 252, 0.95);
+            --connect-loader-text: #374151;
+            --connect-loader-border: #6b7280;
+            --connect-btn-bg: #000000;
+            --connect-btn-hover-bg: #111827;
+            --connect-btn-text: #ffffff;
+            --connect-secondary-btn-bg: #6b7280;
+            --connect-secondary-btn-hover: #4b5563;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #f8fafc;
-        }
-        /*
-        .container {
-            background: white;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            background: var(--connect-body-bg);
+            color: var(--connect-text);
+            margin: 0;
+            min-height: 100vh;
+            color-scheme: light;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body[data-page="connect"] {
+                --connect-body-bg: #010617;
+                --connect-text: #e2e8f0;
+                --connect-heading: #f8fafc;
+                --connect-card-bg: #0f172a;
+                --connect-card-border: rgba(148, 163, 184, 0.2);
+                --connect-card-shadow: 0 25px 35px rgba(0, 0, 0, 0.65);
+                --connect-user-info-bg: rgba(59, 130, 246, 0.12);
+                --connect-user-info-border: #60a5fa;
+                --connect-status-success-bg: rgba(16, 185, 129, 0.18);
+                --connect-status-success-text: #6ee7b7;
+                --connect-status-error-bg: rgba(248, 113, 113, 0.16);
+                --connect-status-error-text: #fecaca;
+                --connect-status-warning-bg: rgba(251, 191, 36, 0.16);
+                --connect-status-warning-text: #fde68a;
+                --connect-loader-overlay: rgba(2, 6, 23, 0.9);
+                --connect-loader-text: #e2e8f0;
+                --connect-loader-border: rgba(148, 163, 184, 0.7);
+                --connect-btn-bg: #ff6b35;
+                --connect-btn-hover-bg: #e75a2a;
+                --connect-btn-text: #ffffff;
+                --connect-secondary-btn-bg: #475569;
+                --connect-secondary-btn-hover: #334155;
+                color-scheme: dark;
+            }
         }
-        */
-        .container {
-            background: white;
+
+        body.dark[data-page="connect"] {
+            --connect-body-bg: #010617;
+            --connect-text: #e2e8f0;
+            --connect-heading: #f8fafc;
+            --connect-card-bg: #0f172a;
+            --connect-card-border: rgba(148, 163, 184, 0.2);
+            --connect-card-shadow: 0 25px 35px rgba(0, 0, 0, 0.65);
+            --connect-user-info-bg: rgba(59, 130, 246, 0.12);
+            --connect-user-info-border: #60a5fa;
+            --connect-status-success-bg: rgba(16, 185, 129, 0.18);
+            --connect-status-success-text: #6ee7b7;
+            --connect-status-error-bg: rgba(248, 113, 113, 0.16);
+            --connect-status-error-text: #fecaca;
+            --connect-status-warning-bg: rgba(251, 191, 36, 0.16);
+            --connect-status-warning-text: #fde68a;
+            --connect-loader-overlay: rgba(2, 6, 23, 0.9);
+            --connect-loader-text: #e2e8f0;
+            --connect-loader-border: rgba(148, 163, 184, 0.7);
+            --connect-btn-bg: #ff6b35;
+            --connect-btn-hover-bg: #e75a2a;
+            --connect-btn-text: #ffffff;
+            --connect-secondary-btn-bg: #475569;
+            --connect-secondary-btn-hover: #334155;
+            color-scheme: dark;
+        }
+
+        body[data-page="connect"] .container {
+            background: var(--connect-card-bg);
             max-width: 600px;
             margin: 0 auto;
             padding: 30px;
             border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--connect-card-shadow);
+            border: 1px solid var(--connect-card-border);
+            color: var(--connect-text);
         }
-        h1 {
+
+        body[data-page="connect"] header.head h1 {
             text-transform: capitalize;
-            color: #1f2937;
+            color: var(--connect-heading);
             margin: 0;
             font-size: 40px;
             margin-top: 10px;
         }
-        .btn {
+
+        body[data-page="connect"] .btn {
             text-decoration: none;
-            display: inline-block;
-            background: black;
+            display: inline-flex;
+            justify-content: center;
+            background: var(--connect-btn-bg);
             width: 100%;
-            color: white;
+            color: var(--connect-btn-text);
             border: none;
             padding: 12px 24px;
             border-radius: 6px;
@@ -56,48 +134,63 @@
             font-size: 16px;
             box-sizing: border-box;
             text-align: center;
-            /*
-            margin: 10px 5px 10px 0;
-            */
+            transition: background 0.2s ease;
+        }
+
+        body[data-page="connect"] .btn:hover {
+            background: var(--connect-btn-hover-bg);
         }
-        .btn.secondary {
-            background: #6b7280;
+
+        body[data-page="connect"] .btn.secondary {
+            background: var(--connect-secondary-btn-bg);
         }
-        #user-details {
+
+        body[data-page="connect"] .btn.secondary:hover {
+            background: var(--connect-secondary-btn-hover);
+        }
+
+        body[data-page="connect"] #user-details {
           margin-bottom: 20px;
         }
-        .user-info {
-            background: #f0f9ff;
+
+        body[data-page="connect"] .user-info {
+            background: var(--connect-user-info-bg);
             padding: 15px;
-            border-left: 4px solid #3b82f6;
-            /*
-            margin-top: 20px;
-            */
+            border-left: 4px solid var(--connect-user-info-border);
         }
-        #login-section p {
+
+        body[data-page="connect"] #login-section p {
           padding: 5px 0;
         }
-        .user-info h3 {
+
+        body[data-page="connect"] .user-info h3 {
           margin: 0 0 10px;
           font-size: 30px;
+          color: var(--connect-heading);
         }
-        .status {
+
+        body[data-page="connect"] .status {
             padding: 12px;
             margin: 10px 0;
             border-radius: 6px;
             font-weight: 500;
+            background: var(--connect-status-warning-bg);
+            color: var(--connect-status-warning-text);
         }
-        .status.success { background: #d1fae5; color: #065f46; }
-        .status.error { background: #fee2e2; color: #991b1b; }
-        .status.warning { background: #fef3c7; color: #92400e; }
-        .hidden { display: none; }
-        .loader-overlay {
+
+        body[data-page="connect"] .status.success { background: var(--connect-status-success-bg); color: var(--connect-status-success-text); }
+        body[data-page="connect"] .status.error { background: var(--connect-status-error-bg); color: var(--connect-status-error-text); }
+        body[data-page="connect"] .status.warning { background: var(--connect-status-warning-bg); color: var(--connect-status-warning-text); }
+
+        body[data-page="connect"] .hidden { display: none; }
+
+        body[data-page="connect"] .loader-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
-          background: rgba(248, 250, 252, 0.95);
+          background: var(--connect-loader-overlay);
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -105,76 +198,94 @@
           gap: 16px;
           z-index: 999;
         }
-        .loader-overlay.hidden {
+
+        body[data-page="connect"] .loader-overlay.hidden {
           display: none;
         }
-        .loader-spinner {
+
+        body[data-page="connect"] .loader-spinner {
           width: 48px;
           height: 48px;
-          border: 4px solid #e5e7eb;
+          border: 4px solid rgba(229, 231, 235, 0.4);
           border-top: 4px solid #ff6b35;
           border-radius: 50%;
           animation: spin 1s linear infinite;
         }
+
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
-        .loader-message {
+
+        body[data-page="connect"] .loader-message {
           font-size: 16px;
-          color: #374151;
+          color: var(--connect-loader-text);
           text-align: center;
         }
-        .loader-cancel {
+
+        body[data-page="connect"] .loader-cancel {
           background: transparent;
-          border: 1px solid #6b7280;
-          color: #374151;
+          border: 1px solid var(--connect-loader-border);
+          color: var(--connect-loader-text);
           padding: 8px 16px;
           border-radius: 6px;
           cursor: pointer;
         }
-        .profile {
+
+        body[data-page="connect"] .profile {
           width: 400px;
           display: flex;
           gap: 10px;
           font-size: 14px;
           box-sizing: border-box;
+          color: var(--connect-text);
         }
-        .profile img {
+
+        body[data-page="connect"] .profile img {
           width: 100px;
           flex-shrink: 0;
+          border-radius: 8px;
+          border: 1px solid rgba(148, 163, 184, 0.4);
         }
-        .profile td {
+
+        body[data-page="connect"] .profile td {
           font-size: 14px;
           padding: 0 10px 0 0;
         }
-        header {
+
+        body[data-page="connect"] header {
           text-align: center;
           letter-spacing: -1px;
+          color: var(--connect-text);
         }
-        header.head {
+
+        body[data-page="connect"] header.head {
           max-width: 600px;
           margin: 0 auto;
           padding: 50px;
           text-align: center;
         }
-        header.head h1 {
+
+        body[data-page="connect"] header.head h1 {
           justify-content: center;
         }
-        .logos {
+
+        body[data-page="connect"] .logos {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 10px;
           font-size: 30px;
         }
-        .logo {
+
+        body[data-page="connect"] .logo {
           height: 40px;
           font-size: 40px;
           display: flex;
           justify-content: center;
           align-items: center;
         }
-        p {
+
+        body[data-page="connect"] p {
           margin: 5px 0;
           font-size: 14px;
         }
@@ -185,7 +296,7 @@
 <script src="/sweetalert2.js"></script>
 <script src="/nav.js"></script>
 </head>
-<body class='<%=theme%>' data-agent="<%=agent%>">
+<body class='<%=theme%>' data-agent="<%=agent%>" data-page="connect">
     <header class="navheader grabbable">
       <h1>
         <a class="home" href="/home"><img class="icon" src="/pinokio-black.png"></a>

package/server/views/editor.ejs

@@ -36,6 +36,7 @@
 <link href="/css/brands.min.css" rel="stylesheet">
 <link href="/style.css" rel="stylesheet"/>
 <link href="/noty.css" rel="stylesheet"/>
+<link href="/urldropdown.css" rel="stylesheet"/>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -1063,6 +1064,9 @@ const reloadMemory = async () => {
         <div><i class="fa-solid fa-xmark"></i></div>
       </a>
       <div class='flexible'></div>
+      <button type='button' class='btn' data-ask-ai-trigger="true" data-workspace="<%= (typeof projectName !== 'undefined' && projectName) ? projectName : '' %>">
+        <div><i class="fa-solid fa-robot"></i> Ask AI</div>
+      </button>
       <a class='btn' href="<%=portal%>" target="_blank">
         <div><i class="fa-solid fa-question"></i> Ask Community</div>
       </a>

package/server/views/terminal.ejs

@@ -44,6 +44,7 @@
 <link href="/style.css" rel="stylesheet"/>
 <link href="/noty.css" rel="stylesheet"/>
 <link href="/dropzone.css" rel="stylesheet"/>
+<link href="/urldropdown.css" rel="stylesheet"/>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -1970,6 +1971,9 @@ const reloadMemory = async () => {
         <div><i class="fa-solid fa-xmark"></i></div>
       </a>
       <div class='flexible'></div>
+      <button type='button' class='btn' data-ask-ai-trigger="true" data-workspace="<%= (typeof projectName !== 'undefined' && projectName) ? projectName : '' %>">
+        <div><i class="fa-solid fa-robot"></i> Ask AI</div>
+      </button>
       <a class='btn' href="<%=portal%>" target="_blank">
         <div><i class="fa-solid fa-question"></i> Ask Community</div>
       </a>