@cremini/skillpack 1.0.9-im.5 → 1.1.0

package/README.md

@@ -1,16 +1,16 @@
-# SkillPack.sh - Pack AI Skills into Standalone Apps
+# SkillPack.sh - Pack AI Skills into Local Agents
 
 Skillpack by Cremini is built on the idea of distributed intelligence, much like cremini mushrooms that grow from a vast, interconnected mycelial network.
 
 Go to [skillpack.sh](https://skillpack.sh) to pack skills and try existing skill packs.
 
-One command to orchestrate [Skills](https://skills.sh), tools, mcps into a standalone app users can download and use on their own computer to address a well-defined problem or complete specific tasks!
+One command orchestrates [Skills](https://skills.sh) and tools into a Local Agent that users can download and run it on their own computer to get work done. It can also connect to chat platforms like Slack or Telegram, allowing you to easily send instructions to your local agent team anytime.
 
 ```bash
 npx @cremini/skillpack create
 ```
 
-If skills, tools, and MCPs are like LEGO pieces, a skill pack is the master piece that assembles them into a complete solution.
+If skills and tools are like LEGO pieces, a skill pack is the master piece that assembles them into a complete solution.
 
 Each Skill Pack should organize different skills to address a well-defined problem or complete specific tasks. For example, research a company by gathering information from various sources and create a PowerPoint presentation based on the findings.
 
@@ -92,7 +92,7 @@ skillpack/
 start.bat
 ```
 
-Then open [http://127.0.0.1:26313](http://127.0.0.1:26313), enter your API key, and start working and having fun!!!
+Running start.sh will open [http://127.0.0.1:26313](http://127.0.0.1:26313) in your browser. Just enter your API key to get started and enjoy!
 
 ## Development
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cremini/skillpack",
-  "version": "1.0.9-im.5",
-  "description": "Turn Skills into a Standalone App with UI",
+  "version": "1.1.0",
+  "description": "Pack AI Skills into Local Agents",
   "type": "module",
   "repository": {
     "type": "git",

package/runtime/server/dist/adapters/web.js

@@ -51,6 +51,7 @@ export class WebAdapter {
                 prompts: config.prompts || [],
                 skills: config.skills || [],
                 hasApiKey: !!conf.apiKey,
+                apiKey: conf.apiKey || "",
                 provider: conf.provider || "openai",
                 adapters: conf.adapters || {},
                 runtimeControl: lifecycle.getRuntimeControl(),

package/runtime/server/dist/adapters/web.js.map

@@ -1 +1 @@
-{"version":3,"file":"web.js","sourceRoot":"","sources":["../../src/adapters/web.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"web.js","sourceRoot":"","sources":["../../src/adapters/web.ts"],"names":[],"mappings":"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"}

package/runtime/web/index.html

@@ -19,12 +19,27 @@
         <p id="pack-desc">Loading...</p>
       </div>
 
-      <div class="sidebar-section">
+      <div class="sidebar-actions-group">
+        <button id="open-chatapps-btn" class="action-btn chatapps-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="action-btn-icon">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          <span class="action-btn-label">Connect Chat Apps</span>
+        </button>
+        <button id="open-apikey-btn" class="action-btn apikey-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="action-btn-icon">
+            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
+          </svg>
+          <span class="action-btn-label">Provide Model API Key</span>
+        </button>
+      </div>
+
+      <div class="sidebar-skills-section">
         <h3>Skills</h3>
         <ul id="skills-list"></ul>
       </div>
 
-      <div class="sidebar-section">
+      <div class="sidebar-settings-section">
         <button id="open-settings-btn" class="settings-trigger-btn">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
           Settings
@@ -109,6 +124,74 @@
     </div>
   </dialog>
 
+  <!-- API Key Dialog -->
+  <dialog id="apikey-dialog" class="settings-modal compact-modal">
+    <div class="settings-modal-header">
+      <h2>Model API Key</h2>
+      <button id="close-apikey-btn" class="close-btn" aria-label="Close">
+         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      </button>
+    </div>
+    <div class="settings-modal-body">
+      <div class="settings-sections">
+        <div class="form-group">
+          <label>Provider</label>
+          <div class="provider-select-wrapper">
+            <select id="apikey-provider-select">
+              <option value="openai">OpenAI</option>
+              <option value="anthropic">Anthropic</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>API Key</label>
+          <input type="password" id="apikey-input" placeholder="sk-..." class="form-input" />
+          <p id="apikey-status" class="status-text" style="margin-top: 8px; min-height: 18px;"></p>
+        </div>
+      </div>
+    </div>
+    <div class="settings-modal-footer">
+      <button id="save-apikey-btn" class="primary-btn">Save API Key</button>
+    </div>
+  </dialog>
+
+  <!-- Chat Apps Dialog -->
+  <dialog id="chatapps-dialog" class="settings-modal">
+    <div class="settings-modal-header">
+      <h2>Connect Chat Apps</h2>
+      <button id="close-chatapps-btn" class="close-btn" aria-label="Close">
+         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      </button>
+    </div>
+    <div class="settings-modal-body">
+      <div class="settings-sections">
+        <div class="settings-section">
+          <h3 class="section-title">Telegram</h3>
+          <div class="form-group">
+            <label>Bot Token</label>
+            <input type="password" id="chatapps-telegram-token" placeholder="123456:ABC-DEF..." class="form-input" />
+          </div>
+        </div>
+        <div class="settings-section">
+          <h3 class="section-title">Slack</h3>
+          <div class="form-group">
+            <label>Bot Token</label>
+            <input type="password" id="chatapps-slack-bot-token" placeholder="xoxb-..." class="form-input" />
+          </div>
+          <div class="form-group">
+            <label>App Token</label>
+            <input type="password" id="chatapps-slack-app-token" placeholder="xapp-..." class="form-input" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="settings-modal-footer">
+      <p id="chatapps-status" class="status-text"></p>
+      <button id="restart-chatapps-btn" class="secondary-btn" hidden>Restart Service</button>
+      <button id="save-chatapps-btn" class="primary-btn">Save & Connect</button>
+    </div>
+  </dialog>
+
   <script src="marked.min.js"></script>
   <script type="module" src="js/main.js"></script>
 </body>

package/runtime/web/js/api-key-dialog.js

@@ -0,0 +1,153 @@
+/**
+ * API Key Dialog Module
+ * 
+ * 负责 Model API Key 的配置管理。
+ * 独立的 Dialog，从原 SettingDialog 的 API Key 部分拆分出来。
+ */
+import { state } from "./config.js";
+import { saveConfigData } from "./api.js";
+
+// --- DOM Elements ---
+let dialog;
+let openBtn;
+let closeBtn;
+let saveBtn;
+let providerSelect;
+let apiKeyInput;
+let statusEl;
+
+// --- Public API ---
+
+export function initApiKeyDialog() {
+  dialog = document.getElementById("apikey-dialog");
+  openBtn = document.getElementById("open-apikey-btn");
+  closeBtn = document.getElementById("close-apikey-btn");
+  saveBtn = document.getElementById("save-apikey-btn");
+  providerSelect = document.getElementById("apikey-provider-select");
+  apiKeyInput = document.getElementById("apikey-input");
+  statusEl = document.getElementById("apikey-status");
+
+  if (!dialog) return;
+
+  if (openBtn) {
+    openBtn.addEventListener("click", open);
+  }
+  if (closeBtn) {
+    closeBtn.addEventListener("click", close);
+  }
+  if (saveBtn) {
+    saveBtn.addEventListener("click", handleSave);
+  }
+  if (providerSelect) {
+    providerSelect.addEventListener("change", updatePlaceholder);
+  }
+}
+
+/**
+ * 根据当前连接状态更新按钮外观
+ */
+export function updateApiKeyButton() {
+  if (!openBtn) return;
+  const config = state.config;
+  if (config && config.hasApiKey) {
+    openBtn.classList.add("connected");
+    openBtn.querySelector(".action-btn-label").textContent = "API Key Configured";
+  } else {
+    openBtn.classList.remove("connected");
+    openBtn.querySelector(".action-btn-label").textContent = "Provide Model API Key";
+  }
+}
+
+// --- Internal Helpers ---
+
+function open() {
+  populateForm();
+  dialog.showModal();
+}
+
+function close() {
+  dialog.close();
+  setStatus("", "");
+}
+
+function populateForm() {
+  const config = state.config;
+  if (!config) return;
+
+  // Provider
+  if (config.provider && providerSelect) {
+    providerSelect.value = config.provider;
+  }
+  updatePlaceholder();
+
+  setStatus("", "");
+
+  if (config.hasApiKey && config.apiKey) {
+    apiKeyInput.value = config.apiKey;
+  } else if (config.hasApiKey) {
+    apiKeyInput.value = "***************************************************";
+  } else {
+    apiKeyInput.value = "";
+  }
+}
+
+function updatePlaceholder() {
+  if (!providerSelect || !apiKeyInput) return;
+  const p = providerSelect.value;
+  if (p === "openai") apiKeyInput.placeholder = "sk-proj-...";
+  else if (p === "anthropic") apiKeyInput.placeholder = "sk-ant-api03-...";
+  else apiKeyInput.placeholder = "sk-...";
+}
+
+async function handleSave() {
+  const key = apiKeyInput.value.trim();
+  const provider = providerSelect.value;
+
+  if (!key) {
+    setStatus("Please enter an API key", "error");
+    return;
+  }
+
+  const updates = { provider };
+  if (key !== "***************************************************" && key !== state.config.apiKey) {
+    updates.key = key;
+  }
+
+  try {
+    saveBtn.disabled = true;
+    const res = await saveConfigData(updates);
+
+    state.config.provider = res.provider;
+    if (updates.key) {
+      state.config.hasApiKey = true;
+      state.config.apiKey = updates.key;
+    }
+    
+    if (state.config.hasApiKey && state.config.apiKey) {
+      apiKeyInput.value = state.config.apiKey;
+    } else if (state.config.hasApiKey) {
+      apiKeyInput.value = "***************************************************";
+    } else {
+      apiKeyInput.value = "";
+    }
+    
+    state.config.runtimeControl = res.runtimeControl;
+    state.restartRequired = !!res.requiresRestart;
+
+    setStatus("API key saved successfully", "success");
+    updateApiKeyButton();
+
+    // 延迟关闭让用户看到成功消息
+    setTimeout(() => close(), 1200);
+  } catch (err) {
+    setStatus("Save failed: " + err.message, "error");
+  } finally {
+    saveBtn.disabled = false;
+  }
+}
+
+function setStatus(message, status) {
+  if (!statusEl) return;
+  statusEl.textContent = message;
+  statusEl.className = status ? `status-text ${status}` : "status-text";
+}

package/runtime/web/js/chat-apps-dialog.js

@@ -0,0 +1,192 @@
+/**
+ * Chat Apps (IM Bots) Dialog Module
+ * 
+ * 负责 IM Bots（Telegram / Slack）Token 的配置管理。
+ * 独立的 Dialog，从原 SettingDialog 的 IM Bots 部分拆分出来。
+ */
+import { state } from "./config.js";
+import { saveConfigData, restartRuntime } from "./api.js";
+
+// --- DOM Elements ---
+let dialog;
+let openBtn;
+let closeBtn;
+let saveBtn;
+let restartBtn;
+let telegramTokenInput;
+let slackBotTokenInput;
+let slackAppTokenInput;
+let statusEl;
+
+// --- Public API ---
+
+export function initChatAppsDialog() {
+  dialog = document.getElementById("chatapps-dialog");
+  openBtn = document.getElementById("open-chatapps-btn");
+  closeBtn = document.getElementById("close-chatapps-btn");
+  saveBtn = document.getElementById("save-chatapps-btn");
+  restartBtn = document.getElementById("restart-chatapps-btn");
+  telegramTokenInput = document.getElementById("chatapps-telegram-token");
+  slackBotTokenInput = document.getElementById("chatapps-slack-bot-token");
+  slackAppTokenInput = document.getElementById("chatapps-slack-app-token");
+  statusEl = document.getElementById("chatapps-status");
+
+  if (!dialog) return;
+
+  if (openBtn) {
+    openBtn.addEventListener("click", open);
+  }
+  if (closeBtn) {
+    closeBtn.addEventListener("click", close);
+  }
+  if (saveBtn) {
+    saveBtn.addEventListener("click", handleSave);
+  }
+  if (restartBtn) {
+    restartBtn.addEventListener("click", handleRestart);
+  }
+}
+
+/**
+ * 根据当前连接状态更新按钮外观
+ */
+export function updateChatAppsButton() {
+  if (!openBtn) return;
+  const config = state.config;
+  const adapters = config?.adapters || {};
+  const hasAnyToken =
+    (adapters.telegram && adapters.telegram.token) ||
+    (adapters.slack && (adapters.slack.botToken || adapters.slack.appToken));
+
+  if (hasAnyToken) {
+    openBtn.classList.add("connected");
+    openBtn.querySelector(".action-btn-label").textContent = "Connected to Chat Apps";
+  } else {
+    openBtn.classList.remove("connected");
+    openBtn.querySelector(".action-btn-label").textContent = "Connect Chat Apps";
+  }
+}
+
+// --- Internal Helpers ---
+
+function open() {
+  populateForm();
+  dialog.showModal();
+}
+
+function close() {
+  dialog.close();
+  setStatus("", "");
+}
+
+function populateForm() {
+  const config = state.config;
+  if (!config) return;
+
+  const adapters = config.adapters || {};
+
+  if (adapters.telegram && adapters.telegram.token) {
+    telegramTokenInput.value = adapters.telegram.token;
+  } else {
+    telegramTokenInput.value = "";
+  }
+
+  if (adapters.slack) {
+    slackBotTokenInput.value = adapters.slack.botToken || "";
+    slackAppTokenInput.value = adapters.slack.appToken || "";
+  } else {
+    slackBotTokenInput.value = "";
+    slackAppTokenInput.value = "";
+  }
+
+  // Restart required status
+  if (state.restartRequired) {
+    const canRestart = config.runtimeControl?.canManagedRestart;
+    setStatus(
+      canRestart
+        ? "Settings changed. Restart service to apply."
+        : "Settings changed. Restart the service manually to apply.",
+      "warning",
+    );
+    updateRestartButton(canRestart);
+  } else {
+    setStatus("", "");
+    updateRestartButton(false);
+  }
+}
+
+async function handleSave() {
+  const telegramToken = telegramTokenInput.value.trim();
+  const slackBotToken = slackBotTokenInput.value.trim();
+  const slackAppToken = slackAppTokenInput.value.trim();
+
+  const adapters = {};
+  if (telegramToken) adapters.telegram = { token: telegramToken };
+  if (slackBotToken || slackAppToken) {
+    adapters.slack = {
+      botToken: slackBotToken || undefined,
+      appToken: slackAppToken || undefined,
+    };
+  }
+
+  const updates = { adapters };
+
+  try {
+    saveBtn.disabled = true;
+    const res = await saveConfigData(updates);
+
+    state.config.adapters = res.adapters;
+    state.config.runtimeControl = res.runtimeControl;
+    state.restartRequired = !!res.requiresRestart;
+
+    if (res.requiresRestart) {
+      setStatus(
+        res.runtimeControl?.canManagedRestart
+          ? "Settings saved. Restart service to apply changes."
+          : "Settings saved. Restart the service manually to apply changes.",
+        "warning",
+      );
+      updateRestartButton(!!res.runtimeControl?.canManagedRestart);
+    } else {
+      setStatus("Settings saved", "success");
+      updateRestartButton(false);
+    }
+
+    updateChatAppsButton();
+  } catch (err) {
+    setStatus("Save failed: " + err.message, "error");
+  } finally {
+    saveBtn.disabled = false;
+  }
+}
+
+async function handleRestart() {
+  if (!restartBtn) return;
+
+  restartBtn.disabled = true;
+  if (saveBtn) saveBtn.disabled = true;
+  setStatus("Restarting service...", "warning");
+
+  try {
+    await restartRuntime();
+    setTimeout(() => {
+      window.location.reload();
+    }, 6000);
+  } catch (err) {
+    if (saveBtn) saveBtn.disabled = false;
+    restartBtn.disabled = false;
+    setStatus("Restart failed: " + err.message, "error");
+  }
+}
+
+function updateRestartButton(show) {
+  if (!restartBtn) return;
+  restartBtn.hidden = !show;
+  restartBtn.disabled = false;
+}
+
+function setStatus(message, status) {
+  if (!statusEl) return;
+  statusEl.textContent = message;
+  statusEl.className = status ? `status-text ${status}` : "status-text";
+}

package/runtime/web/js/main.js

@@ -1,5 +1,7 @@
 import { state, loadConfig } from "./config.js";
 import { initSettings } from "./settings.js";
+import { initApiKeyDialog, updateApiKeyButton } from "./api-key-dialog.js";
+import { initChatAppsDialog, updateChatAppsButton } from "./chat-apps-dialog.js";
 import { initChat, showWelcome } from "./chat.js";
 
 async function init() {
@@ -39,8 +41,15 @@ async function init() {
     console.error("Initialization Failed:", err);
   }
   
+  // Initialize all dialog modules
   initSettings();
+  initApiKeyDialog();
+  initChatAppsDialog();
   initChat();
+
+  // Update action button states based on config
+  updateApiKeyButton();
+  updateChatAppsButton();
 }
 
 // Start application

package/runtime/web/js/settings.js

@@ -78,14 +78,19 @@ function populateForm() {
       "warning",
     );
     updateRestartButton(true);
-  } else if (config.hasApiKey) {
-    setStatus("API key configured", "success");
-    updateRestartButton(false);
   } else {
     setStatus("", "");
     updateRestartButton(false);
   }
 
+  if (config.hasApiKey && config.apiKey) {
+    apiKeyInput.value = config.apiKey;
+  } else if (config.hasApiKey) {
+    apiKeyInput.value = "***************************************************";
+  } else {
+    apiKeyInput.value = "";
+  }
+
   if (config.provider) {
     providerSelect.value = config.provider;
   }
@@ -124,19 +129,29 @@ async function handleSave() {
   }
 
   const updates = { provider, adapters };
-  if (key) {
+  if (key && key !== "***************************************************" && key !== state.config.apiKey) {
     updates.key = key;
   }
 
   try {
     const res = await saveConfigData(updates);
-    apiKeyInput.value = ""; // clear after save
     
     // Update local config
     state.config.provider = res.provider;
     state.config.adapters = res.adapters;
     state.config.runtimeControl = res.runtimeControl;
-    if (key) state.config.hasApiKey = true;
+    if (updates.key) {
+      state.config.hasApiKey = true;
+      state.config.apiKey = updates.key;
+    }
+    
+    if (state.config.hasApiKey && state.config.apiKey) {
+      apiKeyInput.value = state.config.apiKey;
+    } else if (state.config.hasApiKey) {
+      apiKeyInput.value = "***************************************************";
+    } else {
+      apiKeyInput.value = "";
+    }
     state.restartRequired = !!res.requiresRestart;
 
     if (res.requiresRestart) {
@@ -169,7 +184,7 @@ async function handleRestart() {
     await restartRuntime();
     setTimeout(() => {
       window.location.reload();
-    }, 3000);
+    }, 6000);
   } catch (err) {
     if (saveBtn) saveBtn.disabled = false;
     restartBtn.disabled = false;

package/runtime/web/styles.css

@@ -55,7 +55,8 @@ body {
 .sidebar-header {
   padding: 24px 20px;
   border-bottom: 1px solid var(--border-color);
-  background: var(--bg-primary);
+  background: transparent;
+  flex-shrink: 0;
 }
 
 .sidebar-header h1 {
@@ -71,12 +72,20 @@ body {
   line-height: 1.4;
 }
 
-.sidebar-section {
+.sidebar-settings-section {
   padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color);
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.sidebar-skills-section {
+  padding: 16px 20px;
+  flex: 1;
+  overflow-y: auto;
 }
 
-.sidebar-section h3 {
+.sidebar-skills-section h3 {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
@@ -85,23 +94,26 @@ body {
   margin-bottom: 10px;
 }
 
-.sidebar-section ul {
+.sidebar-skills-section ul {
   list-style: none;
 }
 
-.sidebar-section li {
-  padding: 8px 12px;
+.sidebar-skills-section li {
+  padding: 12px;
   font-size: 13px;
   color: var(--text-primary);
   background: var(--bg-tertiary);
+  border: 1px solid transparent;
   border-radius: var(--radius-sm);
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   cursor: default;
   transition: all 0.2s;
 }
 
-.sidebar-section li:hover {
-  background: var(--border-color);
+.sidebar-skills-section li:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
 }
 
 .skill-name {
@@ -776,6 +788,92 @@ body {
   margin-bottom: 0;
 }
 
+/* ---- Sidebar Action Buttons ---- */
+.sidebar-actions-group {
+  padding: 24px 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 16px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  font-family: inherit;
+}
+
+/* Default (not connected) state — outline style */
+.action-btn.chatapps-btn {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+.action-btn.chatapps-btn:hover {
+  border-color: var(--accent);
+  background: var(--bg-secondary);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
+  transform: translateY(-1px);
+}
+
+/* Connected state — green filled */
+.action-btn.chatapps-btn.connected {
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  color: #fff;
+  opacity: 0.85;
+}
+.action-btn.chatapps-btn.connected:hover {
+  opacity: 1;
+  box-shadow: 0 4px 16px var(--accent-glow);
+  transform: translateY(-1px);
+}
+.action-btn.chatapps-btn.connected .action-btn-icon {
+  stroke: #fff;
+}
+
+/* API Key button — always outline style */
+.action-btn.apikey-btn {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+.action-btn.apikey-btn:hover {
+  border-color: var(--accent);
+  background: var(--bg-secondary);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
+  transform: translateY(-1px);
+}
+
+/* API Key configured state */
+.action-btn.apikey-btn.connected {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--bg-secondary);
+}
+.action-btn.apikey-btn.connected .action-btn-icon {
+  stroke: var(--accent);
+}
+
+.action-btn-icon {
+  flex-shrink: 0;
+}
+
+/* ---- Compact Modal Variant ---- */
+.compact-modal {
+  width: 440px;
+}
+
 /* ---- Settings Modal ---- */
 .settings-trigger-btn {
   display: flex;
@@ -793,10 +891,7 @@ body {
   transition: all 0.2s ease;
 }
 .settings-trigger-btn:hover {
-  background: var(--bg-secondary);
-  border-color: var(--accent);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
-  transform: translateY(-1px);
+  background: #ebebeb;
 }
 
 .settings-modal {