@cremini/skillpack 1.0.8 → 1.0.9-im.1

package/runtime/web/js/main.js

@@ -0,0 +1,47 @@
+import { state, loadConfig } from "./config.js";
+import { initSettings } from "./settings.js";
+import { initChat, showWelcome } from "./chat.js";
+
+async function init() {
+  try {
+    const config = await loadConfig();
+    
+    // Set Pack Name & Description
+    const elName = document.getElementById("pack-name");
+    const elDesc = document.getElementById("pack-desc");
+    if (elName) elName.textContent = config.name || "Skills Pack";
+    if (elDesc) elDesc.textContent = config.description || "";
+    document.title = config.name || "Skills Pack";
+
+    // Set Sidebar Skills list
+    const skillsList = document.getElementById("skills-list");
+    if (skillsList && config.skills) {
+      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 prompt if exactly one
+    if (config.prompts && config.prompts.length === 1) {
+      const input = document.getElementById("user-input");
+      if (input) {
+        input.value = config.prompts[0];
+        input.style.height = "auto";
+        input.style.height = Math.min(input.scrollHeight, 120) + "px";
+      }
+    }
+
+    showWelcome(config);
+  } catch (err) {
+    console.error("Initialization Failed:", err);
+  }
+  
+  initSettings();
+  initChat();
+}
+
+// Start application
+init();

package/runtime/web/js/settings.js

@@ -0,0 +1,132 @@
+import { state } from "./config.js";
+import { saveConfigData } from "./api.js";
+
+// DOM Elements
+let dialog;
+let settingsBtn;
+let closeBtn;
+let saveBtn;
+let providerSelect;
+let apiKeyInput;
+let telegramTokenInput;
+let slackBotTokenInput;
+let slackAppTokenInput;
+let keyStatus;
+
+export function initSettings() {
+  dialog = document.getElementById("settings-dialog");
+  settingsBtn = document.getElementById("open-settings-btn");
+  closeBtn = document.getElementById("close-settings-btn");
+  saveBtn = document.getElementById("save-settings-btn");
+  
+  providerSelect = document.getElementById("provider-select");
+  apiKeyInput = document.getElementById("api-key-input");
+  telegramTokenInput = document.getElementById("telegram-token-input");
+  slackBotTokenInput = document.getElementById("slack-bot-token-input");
+  slackAppTokenInput = document.getElementById("slack-app-token-input");
+  keyStatus = document.getElementById("key-status");
+
+  if (!dialog) return;
+
+  // Open/Close dialog
+  if (settingsBtn) {
+    settingsBtn.addEventListener("click", () => {
+      populateForm();
+      dialog.showModal();
+    });
+  }
+  
+  if (closeBtn) {
+    closeBtn.addEventListener("click", () => {
+      dialog.close();
+      keyStatus.textContent = ""; // clear status on close
+    });
+  }
+
+  // Save Settings
+  if (saveBtn) {
+    saveBtn.addEventListener("click", handleSave);
+  }
+
+  // Placeholder logic
+  if (providerSelect) {
+    providerSelect.addEventListener("change", updatePlaceholder);
+  }
+}
+
+function updatePlaceholder() {
+  const p = providerSelect.value;
+  if (p === "openai") apiKeyInput.placeholder = "sk-proj-...";
+  else if (p === "anthropic") apiKeyInput.placeholder = "sk-ant-api03-...";
+  else apiKeyInput.placeholder = "sk-...";
+}
+
+function populateForm() {
+  const config = state.config;
+  if (!config) return;
+
+  if (config.hasApiKey) {
+    keyStatus.textContent = "API key configured";
+    keyStatus.className = "status-text success";
+  } else {
+    keyStatus.textContent = "";
+  }
+
+  if (config.provider) {
+    providerSelect.value = config.provider;
+  }
+  updatePlaceholder();
+
+  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 = "";
+  }
+}
+
+async function handleSave() {
+  const key = apiKeyInput.value.trim();
+  const provider = providerSelect.value;
+  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 = { provider, adapters };
+  if (key) {
+    updates.key = key;
+  }
+
+  try {
+    const res = await saveConfigData(updates);
+    keyStatus.textContent = "Settings saved";
+    keyStatus.className = "status-text success";
+    apiKeyInput.value = ""; // clear after save
+    
+    // Update local config
+    state.config.provider = res.provider;
+    state.config.adapters = res.adapters;
+    if (key) state.config.hasApiKey = true;
+
+  } catch (err) {
+    keyStatus.textContent = "Save failed: " + err.message;
+    keyStatus.className = "status-text error";
+  }
+}

package/runtime/web/styles.css

@@ -772,3 +772,174 @@ body {
 .thinking-content p:last-child {
   margin-bottom: 0;
 }
+
+/* ---- Settings Modal ---- */
+.settings-trigger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-weight: 500;
+  cursor: pointer;
+  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);
+}
+
+.settings-modal {
+  margin: auto;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  background: var(--bg-secondary);
+  width: 520px;
+  max-width: 90vw;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px var(--border-color);
+  font-family: inherit;
+  color: var(--text-primary);
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.settings-modal[open] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+.settings-modal::backdrop {
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.settings-modal[open]::backdrop {
+  opacity: 1;
+}
+
+.settings-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 24px 12px 24px;
+  background: transparent;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.settings-modal-header h2 { font-size: 18px; font-weight: 600; margin: 0; color: var(--text-primary); letter-spacing: -0.01em; }
+.close-btn { 
+  background: var(--bg-tertiary); 
+  border: 1px solid var(--border-color); 
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px; 
+  cursor: pointer; 
+  color: var(--text-secondary); 
+  transition: all 0.2s ease;
+}
+.close-btn:hover { 
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.settings-sections {
+  padding: 24px;
+  max-height: calc(85vh - 140px);
+  overflow-y: auto;
+}
+.settings-section {
+  margin-bottom: 28px;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--border-color);
+}
+.settings-section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+
+.form-group { margin-bottom: 16px; }
+.form-group:last-child { margin-bottom: 0; }
+.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }
+.form-input {
+  width: 100%;
+  padding: 12px 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  outline: none;
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+}
+.form-input:focus { 
+  border-color: var(--accent); 
+  background: var(--bg-secondary);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+/* Specific to provider-select in Settings Modal to match form-input */
+.settings-modal .provider-select-wrapper select {
+  padding: 12px 14px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+.settings-modal .provider-select-wrapper select:focus {
+  border-color: var(--accent);
+  background: var(--bg-secondary);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.settings-modal-footer {
+  padding: 16px 24px 24px 24px;
+  background: transparent;
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.primary-btn {
+  padding: 10px 20px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.primary-btn:hover { 
+  background: var(--accent-hover); 
+  box-shadow: 0 4px 12px var(--accent-glow);
+  transform: translateY(-1px);
+}
+.primary-btn:active {
+  transform: translateY(0);
+}
+

package/runtime/server/chat-proxy.js

@@ -1,161 +0,0 @@
-import path from "node:path";
-import {
-  AuthStorage,
-  createAgentSession,
-  ModelRegistry,
-  SessionManager,
-  DefaultResourceLoader,
-} from "@mariozechner/pi-coding-agent";
-
-const DEBUG = true;
-
-const log = (...args) => DEBUG && console.log(...args);
-const write = (data) => DEBUG && process.stdout.write(data);
-
-/**
- * Handle incoming WebSocket connection using pi-coding-agent
- * @param {import("ws").WebSocket} ws
- * @param {object} options
- * @param {string} options.apiKey - OpenAI API Key
- * @param {string} options.rootDir - Pack root directory
- */
-export async function handleWsConnection(
-  ws,
-  { apiKey, rootDir, provider = "openai", modelId = "gpt-5.4" },
-) {
-  try {
-    // Create an in-memory auth storage to avoid touching disk
-    const authStorage = AuthStorage.inMemory({
-      [provider]: { type: "api_key", key: apiKey },
-    });
-    authStorage.setRuntimeApiKey(provider, apiKey);
-
-    const modelRegistry = new ModelRegistry(authStorage);
-    const model = modelRegistry.find(provider, modelId);
-
-    const sessionManager = SessionManager.inMemory();
-
-    const skillsPath = path.resolve(rootDir, "skills");
-    log(`[ChatProxy] Loading additional skills from: ${skillsPath}`);
-
-    const resourceLoader = new DefaultResourceLoader({
-      cwd: rootDir,
-      additionalSkillPaths: [skillsPath], // 手动加载 rootDir/skills
-    });
-    await resourceLoader.reload();
-
-    const { session } = await createAgentSession({
-      cwd: rootDir, // Allow pi-coding-agent to find skills in this pack's directory
-      authStorage,
-      modelRegistry,
-      sessionManager,
-      resourceLoader,
-      model,
-    });
-
-    // Stream agent events to the WebSocket
-    session.subscribe((event) => {
-      switch (event.type) {
-        case "agent_start":
-          log("\n=== [PI-CODING-AGENT SESSION START] ===");
-          log("System Prompt:\n", session.systemPrompt);
-          log("========================================\n");
-          ws.send(JSON.stringify({ type: "agent_start" }));
-          break;
-
-        case "message_start":
-          log(`\n--- [Message Start: ${event.message?.role}] ---`);
-          if (event.message?.role === "user") {
-            log(JSON.stringify(event.message.content, null, 2));
-          }
-          ws.send(
-            JSON.stringify({
-              type: "message_start",
-              role: event.message?.role,
-            }),
-          );
-          break;
-
-        case "message_update":
-          if (event.assistantMessageEvent?.type === "text_delta") {
-            write(event.assistantMessageEvent.delta);
-            ws.send(
-              JSON.stringify({
-                type: "text_delta",
-                delta: event.assistantMessageEvent.delta,
-              }),
-            );
-          } else if (event.assistantMessageEvent?.type === "thinking_delta") {
-            ws.send(
-              JSON.stringify({
-                type: "thinking_delta",
-                delta: event.assistantMessageEvent.delta,
-              }),
-            );
-          }
-          break;
-
-        case "message_end":
-          log(`\n--- [Message End: ${event.message?.role}] ---`);
-          ws.send(
-            JSON.stringify({
-              type: "message_end",
-              role: event.message?.role,
-            }),
-          );
-          break;
-
-        case "tool_execution_start":
-          log(`\n>>> [Tool Execution Start: ${event.toolName}] >>>`);
-          log("Args:", JSON.stringify(event.args, null, 2));
-          ws.send(
-            JSON.stringify({
-              type: "tool_start",
-              toolName: event.toolName,
-              toolInput: event.args,
-            }),
-          );
-          break;
-
-        case "tool_execution_end":
-          log(`<<< [Tool Execution End: ${event.toolName}] <<<`);
-          log(`Error: ${event.isError ? "Yes" : "No"}`);
-          ws.send(
-            JSON.stringify({
-              type: "tool_end",
-              toolName: event.toolName,
-              isError: event.isError,
-              result: event.result,
-            }),
-          );
-          break;
-
-        case "agent_end":
-          log("\n=== [PI-CODING-AGENT SESSION END] ===\n");
-          ws.send(JSON.stringify({ type: "agent_end" }));
-          break;
-      }
-    });
-
-    // Listen for incoming messages from the frontend
-    ws.on("message", async (data) => {
-      try {
-        const payload = JSON.parse(data.toString());
-        if (payload.text) {
-          // Send prompt to the agent, the session will handle message history natively
-          await session.prompt(payload.text);
-          ws.send(JSON.stringify({ done: true }));
-        }
-      } catch (err) {
-        ws.send(JSON.stringify({ error: String(err) }));
-      }
-    });
-
-    ws.on("close", () => {
-      session.dispose();
-    });
-  } catch (err) {
-    ws.send(JSON.stringify({ error: String(err) }));
-    ws.close();
-  }
-}

package/runtime/server/index.js

@@ -1,63 +0,0 @@
-import express from "express";
-import path from "node:path";
-import fs from "node:fs";
-import { fileURLToPath } from "node:url";
-import { createServer } from "node:http";
-import { exec } from "node:child_process";
-import { registerRoutes } from "./routes.js";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const rootDir = process.env.PACK_ROOT || path.join(__dirname, "..");
-
-const webDir = fs.existsSync(path.join(rootDir, "web"))
-  ? path.join(rootDir, "web")
-  : path.join(__dirname, "..", "web");
-
-const app = express();
-app.use(express.json());
-
-// Static file serving
-app.use(express.static(webDir));
-
-const server = createServer(app);
-
-// Register API routes
-registerRoutes(app, server, rootDir);
-
-const HOST = process.env.HOST || "127.0.0.1";
-const DEFAULT_PORT = 26313;
-
-server.once("listening", () => {
-  const address = server.address();
-  const actualPort = typeof address === "string" ? address : address.port;
-  const url = `http://${HOST}:${actualPort}`;
-  console.log(`\n  Skills Pack Server`);
-  console.log(`  Running at ${url}\n`);
-
-  // Open the browser automatically
-  const cmd =
-    process.platform === "darwin"
-      ? `open ${url}`
-      : process.platform === "win32"
-        ? `start ${url}`
-        : `xdg-open ${url}`;
-  exec(cmd, () => {});
-});
-
-function tryListen(port) {
-  server.listen(port, HOST);
-
-  server.once("error", (err) => {
-    if (err.code === "EADDRINUSE") {
-      console.log(`  Port ${port} is in use, trying ${port + 1}...`);
-      server.close();
-      tryListen(port + 1);
-    } else {
-      throw err;
-    }
-  });
-}
-
-const startPort = Number(process.env.PORT) || DEFAULT_PORT;
-tryListen(startPort);

package/runtime/server/routes.js

@@ -1,104 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { WebSocketServer } from "ws";
-
-import { handleWsConnection } from "./chat-proxy.js";
-
-/**
- * Read the skillpack.json config.
- * @param {string} rootDir
- */
-function getPackConfig(rootDir) {
-  const raw = fs.readFileSync(path.join(rootDir, "skillpack.json"), "utf-8");
-  return JSON.parse(raw);
-}
-
-/**
- * Register all API routes.
- * @param {import("express").Express} app
- * @param {import("node:http").Server} server
- * @param {string} rootDir - Root directory containing skillpack.json and skills/
- */
-export function registerRoutes(app, server, rootDir) {
-  // API key and provider are stored in runtime memory
-  let apiKey = "";
-  let currentProvider = "openai";
-
-  if (process.env.OPENAI_API_KEY) {
-    apiKey = process.env.OPENAI_API_KEY;
-    currentProvider = "openai";
-  } else if (process.env.ANTHROPIC_API_KEY) {
-    apiKey = process.env.ANTHROPIC_API_KEY;
-    currentProvider = "anthropic";
-  }
-
-  // Get pack config
-  app.get("/api/config", (req, res) => {
-    const config = getPackConfig(rootDir);
-    res.json({
-      name: config.name,
-      description: config.description,
-      prompts: config.prompts || [],
-      skills: config.skills || [],
-      hasApiKey: !!apiKey,
-      provider: currentProvider,
-    });
-  });
-
-  // Get skills list
-  app.get("/api/skills", (req, res) => {
-    const config = getPackConfig(rootDir);
-    res.json(config.skills || []);
-  });
-
-  // Set API key
-  app.post("/api/config/key", (req, res) => {
-    const { key, provider } = req.body;
-    if (!key) {
-      return res.status(400).json({ error: "API key is required" });
-    }
-    apiKey = key;
-    if (provider) {
-      currentProvider = provider;
-    }
-    res.json({ success: true, provider: currentProvider });
-  });
-
-  // WebSocket chat service
-  const wss = new WebSocketServer({ noServer: true });
-
-  server.on("upgrade", (request, socket, head) => {
-    if (request.url.startsWith("/api/chat")) {
-      wss.handleUpgrade(request, socket, head, (ws) => {
-        wss.emit("connection", ws, request);
-      });
-    } else {
-      socket.destroy();
-    }
-  });
-
-  wss.on("connection", (ws, request) => {
-    const url = new URL(
-      request.url,
-      `http://${request.headers.host || "127.0.0.1"}`,
-    );
-    const reqProvider = url.searchParams.get("provider") || currentProvider;
-
-    if (!apiKey) {
-      ws.send(JSON.stringify({ error: "Please set an API key first" }));
-      ws.close();
-      return;
-    }
-
-    const config = getPackConfig(rootDir);
-
-    const modelId = reqProvider === "anthropic" ? "claude-opus-4-6" : "gpt-5.4";
-
-    handleWsConnection(ws, { apiKey, rootDir, provider: reqProvider, modelId });
-  });
-
-  // Clear session
-  app.delete("/api/chat", (req, res) => {
-    res.json({ success: true });
-  });
-}