@cremini/skillpack 1.0.9 → 1.1.0

package/runtime/server/package.json

@@ -3,11 +3,21 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "node index.js"
+    "build": "tsc",
+    "start": "node dist/index.js"
   },
   "dependencies": {
-    "express": "^5.1.0",
     "@mariozechner/pi-coding-agent": "^0.57.1",
+    "@slack/bolt": "^4.6.0",
+    "express": "^5.1.0",
+    "node-telegram-bot-api": "^0.66.0",
     "ws": "^8.19.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/node-telegram-bot-api": "^0.64.0",
+    "@types/ws": "^8.18.0",
+    "typescript": "^5.9.3"
   }
-}
+}

package/runtime/start.bat

@@ -1,15 +1,51 @@
 @echo off
 cd /d "%~dp0"
 
+rem Read the pack name
+set "PACK_NAME=Skills Pack"
+where node >nul 2>nul
+if %errorlevel% equ 0 (
+  if exist "skillpack.json" (
+    for /f "delims=" %%i in ('node -e "console.log(JSON.parse(require('fs').readFileSync('skillpack.json','utf-8')).name)" 2^>nul') do set "PACK_NAME=%%i"
+  )
+)
+
 echo.
-echo   Starting Skills Pack...
+echo   Starting %PACK_NAME%...
 echo.
 
+rem Install dependencies
 if not exist "server\node_modules" (
   echo   Installing dependencies...
-  cd server && npm ci --omit=dev && cd ..
+  cd server && npm install --omit=dev && cd ..
   echo.
 )
 
-rem Start the server (port detection and browser launch are handled by server\index.js)
-cd server && node index.js
+rem First-run flag
+set "FIRST_RUN=1"
+
+:loop
+set "SKILLPACK_FIRST_RUN=%FIRST_RUN%"
+set "PACK_ROOT=%~dp0"
+set "NODE_ENV=production"
+node server\dist\index.js
+set "EXIT_CODE=%errorlevel%"
+
+set "FIRST_RUN=0"
+
+rem Only restart on exit code 75 (/restart command)
+if %EXIT_CODE% equ 75 (
+  echo.
+  echo   Restarting...
+  timeout /t 1 /nobreak >nul
+  goto loop
+)
+
+rem All other exit codes → stop
+if %EXIT_CODE% equ 64 (
+  echo.
+  echo   Shutdown complete.
+) else if %EXIT_CODE% neq 0 (
+  echo.
+  echo   Process exited with code %EXIT_CODE%.
+)

package/runtime/start.sh

@@ -18,5 +18,33 @@ if [ ! -d "server/node_modules" ]; then
   echo ""
 fi
 
-# Start the server
-cd server && node index.js
+# First-run flag (controls browser auto-open on first launch only)
+FIRST_RUN=1
+
+while true; do
+  SKILLPACK_FIRST_RUN="$FIRST_RUN" \
+  PACK_ROOT="$(pwd)" \
+  NODE_ENV="production" \
+    node server/dist/index.js
+  EXIT_CODE=$?
+
+  FIRST_RUN=0
+
+  # Only restart on exit code 75 (/restart command)
+  if [ "$EXIT_CODE" -eq 75 ]; then
+    echo ""
+    echo "  Restarting..."
+    sleep 1
+    continue
+  fi
+
+  # All other exit codes (0, 64, crash, Ctrl+C, kill, etc.) → stop
+  if [ "$EXIT_CODE" -eq 64 ]; then
+    echo ""
+    echo "  Shutdown complete."
+  elif [ "$EXIT_CODE" -ne 0 ]; then
+    echo ""
+    echo "  Process exited with code $EXIT_CODE."
+  fi
+  break
+done

package/runtime/web/index.html

@@ -19,26 +19,31 @@
         <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">
-        <h3>API KEYS</h3>
-        <div class="provider-select-wrapper">
-          <select id="provider-select">
-            <option value="openai">OpenAI</option>
-            <option value="anthropic">Anthropic</option>
-          </select>
-        </div>
-        <div class="api-key-form">
-          <input type="password" id="api-key-input" placeholder="sk-..." />
-        </div>
-        <div class="api-key-footer">
-          <p id="key-status" class="status-text"></p>
-          <button id="save-key-btn">Save</button>
-        </div>
+      <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
+        </button>
       </div>
     </aside>
 
@@ -65,8 +70,130 @@
       </div>
     </main>
   </div>
+
+  <!-- Settings Dialog -->
+  <dialog id="settings-dialog" class="settings-modal">
+    <div class="settings-modal-header">
+      <h2>Settings</h2>
+      <button id="close-settings-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">
+        <!-- General Section -->
+        <div class="settings-section">
+          <h3 class="section-title">General</h3>
+          <div class="form-group">
+            <label>Provider</label>
+            <div class="provider-select-wrapper">
+              <select id="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="api-key-input" placeholder="sk-..." class="form-input" />
+            <p id="key-status" class="status-text" style="margin-top: 8px; min-height: 18px;"></p>
+          </div>
+        </div>
+
+        <!-- IM Bots Section -->
+        <div class="settings-section">
+          <h3 class="section-title">IM Bots</h3>
+          <div class="form-group">
+            <label>Telegram Bot Token</label>
+            <input type="password" id="telegram-token-input" placeholder="123456:ABC-DEF..." class="form-input" />
+          </div>
+          <div class="form-group">
+            <label>Slack Bot Token</label>
+            <input type="password" id="slack-bot-token-input" placeholder="xoxb-..." class="form-input" />
+          </div>
+          <div class="form-group">
+            <label>Slack App Token</label>
+            <input type="password" id="slack-app-token-input" placeholder="xapp-..." class="form-input" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="settings-modal-footer">
+      <button id="restart-service-btn" class="secondary-btn" hidden>Restart Service</button>
+      <button id="save-settings-btn" class="primary-btn">Save Settings</button>
+    </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 src="app.js"></script>
+  <script type="module" src="js/main.js"></script>
 </body>
 
-</html>
+</html>

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/api.js

@@ -0,0 +1,25 @@
+import { state } from "./config.js";
+
+export async function saveConfigData(updates) {
+  const res = await fetch(state.API_BASE + "/api/config/update", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(updates),
+  });
+  if (!res.ok) {
+    throw new Error("Save Config Failed");
+  }
+  return await res.json();
+}
+
+export async function restartRuntime() {
+  const res = await fetch(state.API_BASE + "/api/runtime/restart", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+  });
+  const payload = await res.json();
+  if (!res.ok) {
+    throw new Error(payload.message || "Restart Failed");
+  }
+  return payload;
+}

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";
+}