@cremini/skillpack 1.0.8 → 1.0.9-im.1

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

@@ -11,5 +11,5 @@ if not exist "server\node_modules" (
   echo.
 )
 
-rem Start the server (port detection and browser launch are handled by server\index.js)
-cd server && node index.js
+rem Start the server (port detection and browser launch are handled by server\dist\index.js)
+cd server && node dist/index.js

package/runtime/start.sh

@@ -19,4 +19,4 @@ if [ ! -d "server/node_modules" ]; then
 fi
 
 # Start the server
-cd server && node index.js
+cd server && node dist/index.js

package/runtime/web/index.html

@@ -25,20 +25,10 @@
       </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>
+        <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 +55,61 @@
       </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="save-settings-btn" class="primary-btn">Save Settings</button>
+    </div>
+  </dialog>
+
   <script src="marked.min.js"></script>
-  <script src="app.js"></script>
+  <script type="module" src="js/main.js"></script>
 </body>
 
 </html>

package/runtime/web/js/api.js

@@ -0,0 +1,13 @@
+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();
+}

package/runtime/web/{app.js → js/chat.js}

@@ -1,69 +1,47 @@
-const API_BASE = "";
-let chatHistory = [];
+import { state } from "./config.js";
 
-// Initialize
-async function init() {
-  await loadConfig();
-  setupEventListeners();
-}
-
-async function loadConfig() {
-  try {
-    const res = await fetch(API_BASE + "/api/config");
-    const config = await res.json();
-
-    document.getElementById("pack-name").textContent = config.name;
-    document.getElementById("pack-desc").textContent = config.description;
-    document.title = config.name;
-
-    // Skills
-    const skillsList = document.getElementById("skills-list");
-    skillsList.innerHTML = config.skills
-      .map(
-        (s) =>
-          `<li><div class="skill-name">${s.name}</div><div class="skill-desc">${s.description}</div></li>`,
-      )
-      .join("");
-
-    // Pre-fill when there is exactly one prompt
-    if (config.prompts && config.prompts.length === 1) {
-      const input = document.getElementById("user-input");
-      input.value = config.prompts[0];
-      input.style.height = "auto";
-      input.style.height = Math.min(input.scrollHeight, 120) + "px";
-    }
+export const chatHistory = [];
+let ws = null;
+let currentAssistantMsg = null;
 
-    // API key status and provider
-    const keyStatus = document.getElementById("key-status");
-    if (config.hasApiKey) {
-      keyStatus.textContent = "API key configured";
-      keyStatus.className = "status-text success";
-    }
+export function initChat() {
+  // Send button
+  document.getElementById("send-btn").addEventListener("click", sendMessage);
 
-    const providerSelect = document.getElementById("provider-select");
-    if (providerSelect && config.provider) {
-      providerSelect.value = config.provider;
+  // Send on Enter
+  document.getElementById("user-input").addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
     }
+  });
 
-    const updatePlaceholder = () => {
-      const p = providerSelect.value;
-      const input = document.getElementById("api-key-input");
-      if (p === "openai") input.placeholder = "sk-proj-...";
-      else if (p === "anthropic") input.placeholder = "sk-ant-api03-...";
-      else input.placeholder = "sk-...";
-    };
+  // Auto-resize the input box
+  document.getElementById("user-input").addEventListener("input", (e) => {
+    e.target.style.height = "auto";
+    e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
+  });
 
-    providerSelect.addEventListener("change", updatePlaceholder);
-    updatePlaceholder();
+  // Prompt click (Welcome message prompts)
+  const welcomeContent = document.getElementById("welcome-content");
+  if (welcomeContent) {
+    welcomeContent.addEventListener("click", (e) => {
+      const item = e.target.closest(".prompt-card");
+      if (!item) return;
+      const index = parseInt(item.dataset.index);
 
-    // Show welcome view
-    showWelcome(config);
-  } catch (err) {
-    console.error("Failed to load config:", err);
+      if (state.config && state.config.prompts[index]) {
+        const input = document.getElementById("user-input");
+        input.value = state.config.prompts[index];
+        input.focus();
+        input.style.height = "auto";
+        input.style.height = Math.min(input.scrollHeight, 120) + "px";
+      }
+    });
   }
 }
 
-function showWelcome(config) {
+export function showWelcome(config) {
   const welcomeContent = document.getElementById("welcome-content");
 
   let promptsHtml = "";
@@ -94,94 +72,69 @@ function showWelcome(config) {
   }
 }
 
-function setupEventListeners() {
-  // Send button
-  document.getElementById("send-btn").addEventListener("click", sendMessage);
+export async function sendMessage() {
+  const input = document.getElementById("user-input");
+  const text = input.value.trim();
+  if (!text) return;
 
-  // Send on Enter
-  document.getElementById("user-input").addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  });
+  const chatArea = document.getElementById("chat-area");
+  if (chatArea.classList.contains("mode-welcome")) {
+    chatArea.classList.remove("mode-welcome");
+    chatArea.classList.add("mode-chat");
+  }
 
-  // Auto-resize the input box
-  document.getElementById("user-input").addEventListener("input", (e) => {
-    e.target.style.height = "auto";
-    e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
-  });
+  input.value = "";
+  input.style.height = "auto";
 
-  // Save API key
-  document.getElementById("save-key-btn").addEventListener("click", saveApiKey);
+  appendMessage("user", text);
+  chatHistory.push({ role: "user", content: text });
 
-  // Prompt click
-  const welcomeContent = document.getElementById("welcome-content");
-  if (welcomeContent) {
-    welcomeContent.addEventListener("click", (e) => {
-      const item = e.target.closest(".prompt-card");
-      if (!item) return;
-      const index = parseInt(item.dataset.index);
+  const sendBtn = document.getElementById("send-btn");
+  sendBtn.disabled = true;
 
-      // Get the full prompt text
-      fetch(API_BASE + "/api/config")
-        .then((r) => r.json())
-        .then((config) => {
-          if (config.prompts[index]) {
-            const input = document.getElementById("user-input");
-            input.value = config.prompts[index];
-            input.focus();
-            input.style.height = "auto";
-            input.style.height = Math.min(input.scrollHeight, 120) + "px";
-          }
-        });
-    });
+  currentAssistantMsg = appendMessage("assistant", "");
+  showLoadingIndicator();
+
+  try {
+    const socket = await getOrCreateWs();
+    socket.send(JSON.stringify({ text }));
+  } catch (err) {
+    handleError(err.message);
   }
 }
 
-async function saveApiKey() {
-  const input = document.getElementById("api-key-input");
-  const providerSelect = document.getElementById("provider-select");
-  const status = document.getElementById("key-status");
-  const key = input.value.trim();
-  const provider = providerSelect ? providerSelect.value : "openai";
-
-  if (!key) {
-    status.textContent = "Enter an API key";
-    status.className = "status-text error";
-    return;
+export async function sendBotCommand(cmdText) {
+  const chatArea = document.getElementById("chat-area");
+  if (chatArea.classList.contains("mode-welcome")) {
+    chatArea.classList.remove("mode-welcome");
+    chatArea.classList.add("mode-chat");
   }
 
-  try {
-    const res = await fetch(API_BASE + "/api/config/key", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ key, provider }),
-    });
+  appendMessage("user", cmdText);
+  chatHistory.push({ role: "user", content: cmdText });
 
-    if (res.ok) {
-      status.textContent = "API key saved";
-      status.className = "status-text success";
-      input.value = "";
-    } else {
-      status.textContent = "Save failed";
-      status.className = "status-text error";
-    }
+  const sendBtn = document.getElementById("send-btn");
+  sendBtn.disabled = true;
+
+  currentAssistantMsg = appendMessage("assistant", "");
+  showLoadingIndicator();
+
+  try {
+    const socket = await getOrCreateWs();
+    socket.send(JSON.stringify({ text: cmdText }));
   } catch (err) {
-    status.textContent = "Save failed: " + err.message;
-    status.className = "status-text error";
+    handleError(err.message);
   }
 }
 
-let ws = null;
-let currentAssistantMsg = null;
+// ========== Internal Rendering & WS logic ==========
 
 function renderMarkdown(mdText, { renderEmbeddedMarkdown = true } = {}) {
-  if (typeof marked === "undefined") {
+  if (typeof window.marked === "undefined") {
     return escapeHtml(mdText);
   }
 
-  const html = marked.parse(mdText);
+  const html = ensureLinksOpenInNewTab(window.marked.parse(mdText));
   if (!renderEmbeddedMarkdown) {
     return html;
   }
@@ -189,6 +142,18 @@ function renderMarkdown(mdText, { renderEmbeddedMarkdown = true } = {}) {
   return renderEmbeddedMarkdownBlocks(html);
 }
 
+function ensureLinksOpenInNewTab(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+
+  template.content.querySelectorAll("a[href]").forEach((linkEl) => {
+    linkEl.setAttribute("target", "_blank");
+    linkEl.setAttribute("rel", "noopener noreferrer");
+  });
+
+  return template.innerHTML;
+}
+
 function renderEmbeddedMarkdownBlocks(html) {
   const template = document.createElement("template");
   template.innerHTML = html;
@@ -196,11 +161,9 @@ function renderEmbeddedMarkdownBlocks(html) {
   const codeBlocks = template.content.querySelectorAll("pre > code");
   codeBlocks.forEach((codeEl) => {
     const languageClass = Array.from(codeEl.classList).find((className) =>
-      className.startsWith("language-"),
+      className.startsWith("language-")
     );
-    const language = languageClass
-      ? languageClass.slice("language-".length)
-      : "";
+    const language = languageClass ? languageClass.slice("language-".length) : "";
 
     if (!/^(markdown|md)$/i.test(language)) {
       return;
@@ -228,11 +191,9 @@ async function getOrCreateWs() {
 
   return new Promise((resolve, reject) => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const providerSelect = document.getElementById("provider-select");
-    const provider = providerSelect ? providerSelect.value : "openai";
+    const provider = state.config && state.config.provider ? state.config.provider : "openai";
 
-    // URLSearchParams would be cleaner if more query params are added later
-    const wsUrl = `${protocol}//${window.location.host}${API_BASE}/api/chat?provider=${provider}`;
+    const wsUrl = `${protocol}//${window.location.host}${state.API_BASE}/api/chat?provider=${provider}`;
 
     ws = new WebSocket(wsUrl);
 
@@ -315,12 +276,27 @@ function handleAgentEvent(event) {
 
   if (
     ["text_delta", "thinking_delta", "tool_start", "tool_end"].includes(
-      event.type,
+      event.type
     )
   ) {
     hideLoadingIndicator();
   }
 
+  // Handle bot command results injected by the backend WebSocket response
+  if (event.type === "command_result") {
+    const textBlock = getOrCreateTextBlock();
+    let resText = `Command \`${event.command}\` succeeded.`;
+    if (event.errorMessage) {
+      resText = `Command \`${event.command}\` failed: ${event.errorMessage}`;
+    } else if (event.result) {
+      resText = `Command \`${event.command}\` result:\n\n${event.result}`;
+    }
+    textBlock.dataset.mdContent += resText;
+    textBlock.innerHTML = renderMarkdown(textBlock.dataset.mdContent);
+    scrollToBottom();
+    return;
+  }
+
   switch (event.type) {
     case "agent_start":
     case "message_start":
@@ -336,7 +312,7 @@ function handleAgentEvent(event) {
       const thinkingBlock = getOrCreateThinkingBlock();
       thinkingBlock.dataset.mdContent += event.delta;
       const contentEl = thinkingBlock.querySelector(".thinking-content");
-      if (typeof marked !== "undefined") {
+      if (typeof window.marked !== "undefined") {
         contentEl.innerHTML = renderMarkdown(thinkingBlock.dataset.mdContent);
       } else {
         contentEl.textContent = thinkingBlock.dataset.mdContent;
@@ -347,7 +323,7 @@ function handleAgentEvent(event) {
     case "text_delta":
       const textBlock = getOrCreateTextBlock();
       textBlock.dataset.mdContent += event.delta;
-      if (typeof marked !== "undefined") {
+      if (typeof window.marked !== "undefined") {
         textBlock.innerHTML = renderMarkdown(textBlock.dataset.mdContent);
       } else {
         textBlock.textContent = textBlock.dataset.mdContent;
@@ -364,8 +340,10 @@ function handleAgentEvent(event) {
           : JSON.stringify(event.toolInput, null, 2);
 
       let inputHtml = "";
-      if (typeof marked !== "undefined") {
-        inputHtml = marked.parse("```json\n" + safeInput + "\n```");
+      if (typeof window.marked !== "undefined") {
+        inputHtml = ensureLinksOpenInNewTab(
+          window.marked.parse("\`\`\`json\n" + safeInput + "\n\`\`\`")
+        );
       } else {
         inputHtml = escapeHtml(safeInput);
       }
@@ -373,7 +351,7 @@ function handleAgentEvent(event) {
       toolCard.innerHTML = `
         <div class="tool-header">
           <span class="tool-chevron">
-            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+             <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
           </span>
           <span class="tool-icon">🛠️</span>
           <span class="tool-name">${escapeHtml(event.toolName)}</span>
@@ -389,9 +367,7 @@ function handleAgentEvent(event) {
         toolCard.classList.toggle("collapsed");
       });
 
-      // Insert before loading indicator if exists
-      const toolIndicator =
-        currentAssistantMsg.querySelector(".loading-indicator");
+      const toolIndicator = currentAssistantMsg.querySelector(".loading-indicator");
       if (toolIndicator) {
         currentAssistantMsg.insertBefore(toolCard, toolIndicator);
       } else {
@@ -400,17 +376,12 @@ function handleAgentEvent(event) {
 
       toolCard.dataset.toolName = event.toolName;
       scrollToBottom();
-
       showLoadingIndicator();
       break;
 
     case "tool_end":
-      const cards = Array.from(
-        currentAssistantMsg.querySelectorAll(".tool-card.running"),
-      );
-      const card = cards
-        .reverse()
-        .find((c) => c.dataset.toolName === event.toolName);
+      const cards = Array.from(currentAssistantMsg.querySelectorAll(".tool-card.running"));
+      const card = cards.reverse().find((c) => c.dataset.toolName === event.toolName);
       if (card) {
         card.classList.remove("running");
         card.classList.add(event.isError ? "error" : "success");
@@ -434,17 +405,16 @@ function handleAgentEvent(event) {
           event.result &&
           typeof event.result === "string" &&
           (event.result.includes("\n") || event.result.length > 50)
-            ? "```bash\n" + safeResult + "\n```"
-            : "```json\n" + safeResult + "\n```";
+            ? "\`\`\`bash\n" + safeResult + "\n\`\`\`"
+            : "\`\`\`json\n" + safeResult + "\n\`\`\`";
 
-        if (typeof marked !== "undefined") {
-          resultEl.innerHTML = marked.parse(mdText);
+        if (typeof window.marked !== "undefined") {
+          resultEl.innerHTML = ensureLinksOpenInNewTab(window.marked.parse(mdText));
         } else {
           resultEl.textContent = safeResult;
         }
       }
       scrollToBottom();
-
       showLoadingIndicator();
       break;
   }
@@ -452,7 +422,7 @@ function handleAgentEvent(event) {
 
 function getOrCreateThinkingBlock() {
   const children = Array.from(currentAssistantMsg.children).filter(
-    (c) => !c.classList.contains("loading-indicator"),
+    (c) => !c.classList.contains("loading-indicator")
   );
   let lastChild = children[children.length - 1];
 
@@ -464,7 +434,7 @@ function getOrCreateThinkingBlock() {
     lastChild.innerHTML = `
       <div class="tool-header thinking-header">
         <span class="tool-chevron">
-          <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+           <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
         </span>
         <span class="tool-icon">🧠</span>
         <span class="tool-name" style="color: var(--text-secondary);">Thinking Process</span>
@@ -488,7 +458,7 @@ function getOrCreateThinkingBlock() {
 
 function getOrCreateTextBlock() {
   const children = Array.from(currentAssistantMsg.children).filter(
-    (c) => !c.classList.contains("loading-indicator"),
+    (c) => !c.classList.contains("loading-indicator")
   );
   let lastChild = children[children.length - 1];
 
@@ -513,40 +483,6 @@ function enableInput() {
   currentAssistantMsg = null;
 }
 
-async function sendMessage() {
-  const input = document.getElementById("user-input");
-  const text = input.value.trim();
-  if (!text) return;
-
-  const chatArea = document.getElementById("chat-area");
-  if (chatArea.classList.contains("mode-welcome")) {
-    chatArea.classList.remove("mode-welcome");
-    chatArea.classList.add("mode-chat");
-  }
-
-  input.value = "";
-  input.style.height = "auto";
-
-  // Add the user message
-  appendMessage("user", text);
-  chatHistory.push({ role: "user", content: text });
-
-  // Disable input while the agent is responding
-  const sendBtn = document.getElementById("send-btn");
-  sendBtn.disabled = true;
-
-  // Create an assistant message placeholder
-  currentAssistantMsg = appendMessage("assistant", "");
-  showLoadingIndicator();
-
-  try {
-    const socket = await getOrCreateWs();
-    socket.send(JSON.stringify({ text }));
-  } catch (err) {
-    handleError(err.message);
-  }
-}
-
 function appendMessage(role, text) {
   const messages = document.getElementById("messages");
   const div = document.createElement("div");
@@ -577,6 +513,3 @@ function scrollToBottom() {
   const messages = document.getElementById("messages");
   messages.scrollTop = messages.scrollHeight;
 }
-
-// Start the app
-init();

package/runtime/web/js/config.js

@@ -0,0 +1,15 @@
+export const state = {
+  config: null,
+  API_BASE: ""
+};
+
+export async function loadConfig() {
+  try {
+    const res = await fetch(state.API_BASE + "/api/config");
+    state.config = await res.json();
+    return state.config;
+  } catch (err) {
+    console.error("Failed to load config:", err);
+    throw err;
+  }
+}