@cremini/skillpack 1.0.2

package/runtime/web/app.js

@@ -0,0 +1,582 @@
+const API_BASE = "";
+let chatHistory = [];
+
+// 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";
+    }
+
+    // API key status and provider
+    const keyStatus = document.getElementById("key-status");
+    if (config.hasApiKey) {
+      keyStatus.textContent = "API key configured";
+      keyStatus.className = "status-text success";
+    }
+
+    const providerSelect = document.getElementById("provider-select");
+    if (providerSelect && config.provider) {
+      providerSelect.value = config.provider;
+    }
+
+    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-...";
+    };
+
+    providerSelect.addEventListener("change", updatePlaceholder);
+    updatePlaceholder();
+
+    // Show welcome view
+    showWelcome(config);
+  } catch (err) {
+    console.error("Failed to load config:", err);
+  }
+}
+
+function showWelcome(config) {
+  const welcomeContent = document.getElementById("welcome-content");
+
+  let promptsHtml = "";
+  if (config.prompts && config.prompts.length > 1) {
+    promptsHtml = `
+      <div class="prompt-cards">
+        ${config.prompts
+          .map(
+            (u, i) => `
+          <div class="prompt-card" data-index="${i}" title="${u}">
+            ${u.length > 60 ? u.substring(0, 60) + "..." : u}
+          </div>
+        `,
+          )
+          .join("")}
+      </div>
+    `;
+  }
+
+  if (welcomeContent) {
+    welcomeContent.innerHTML = `
+      <div class="welcome-message">
+        <h2>Turn Skills into a Standalone App with UI</h2>
+        <p>One command to orchestrate skills into a standalone app users can download and use on their computer</p>
+        ${promptsHtml}
+      </div>
+    `;
+  }
+}
+
+function setupEventListeners() {
+  // Send button
+  document.getElementById("send-btn").addEventListener("click", sendMessage);
+
+  // Send on Enter
+  document.getElementById("user-input").addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  });
+
+  // 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";
+  });
+
+  // Save API key
+  document.getElementById("save-key-btn").addEventListener("click", saveApiKey);
+
+  // 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);
+
+      // 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";
+          }
+        });
+    });
+  }
+}
+
+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;
+  }
+
+  try {
+    const res = await fetch(API_BASE + "/api/config/key", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key, provider }),
+    });
+
+    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";
+    }
+  } catch (err) {
+    status.textContent = "Save failed: " + err.message;
+    status.className = "status-text error";
+  }
+}
+
+let ws = null;
+let currentAssistantMsg = null;
+
+function renderMarkdown(mdText, { renderEmbeddedMarkdown = true } = {}) {
+  if (typeof marked === "undefined") {
+    return escapeHtml(mdText);
+  }
+
+  const html = marked.parse(mdText);
+  if (!renderEmbeddedMarkdown) {
+    return html;
+  }
+
+  return renderEmbeddedMarkdownBlocks(html);
+}
+
+function renderEmbeddedMarkdownBlocks(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+
+  const codeBlocks = template.content.querySelectorAll("pre > code");
+  codeBlocks.forEach((codeEl) => {
+    const languageClass = Array.from(codeEl.classList).find((className) =>
+      className.startsWith("language-"),
+    );
+    const language = languageClass
+      ? languageClass.slice("language-".length)
+      : "";
+
+    if (!/^(markdown|md)$/i.test(language)) {
+      return;
+    }
+
+    const preview = document.createElement("div");
+    preview.className = "embedded-markdown-preview markdown-body";
+    preview.innerHTML = renderMarkdown(codeEl.textContent || "", {
+      renderEmbeddedMarkdown: false,
+    });
+
+    const pre = codeEl.parentElement;
+    if (pre) {
+      pre.replaceWith(preview);
+    }
+  });
+
+  return template.innerHTML;
+}
+
+async function getOrCreateWs() {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    return ws;
+  }
+
+  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";
+
+    // URLSearchParams would be cleaner if more query params are added later
+    const wsUrl = `${protocol}//${window.location.host}${API_BASE}/api/chat?provider=${provider}`;
+
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => resolve(ws);
+    ws.onerror = (err) => {
+      console.error(err);
+      reject(new Error("WebSocket connection failed"));
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const parsed = JSON.parse(event.data);
+        if (parsed.error) {
+          handleError(parsed.error);
+        } else if (parsed.done) {
+          handleDone();
+        } else if (parsed.type) {
+          handleAgentEvent(parsed);
+        }
+      } catch (e) {
+        console.error("Failed to parse message", e);
+      }
+    };
+
+    ws.onclose = () => {
+      ws = null;
+      enableInput();
+    };
+  });
+}
+
+function handleError(errorMsg) {
+  if (!currentAssistantMsg) {
+    appendMessage("assistant", "Error: " + errorMsg).classList.add("error");
+  } else {
+    const errDiv = document.createElement("div");
+    errDiv.className = "content error-text";
+    errDiv.textContent = "Error: " + errorMsg;
+    currentAssistantMsg.appendChild(errDiv);
+    currentAssistantMsg.classList.add("error");
+  }
+  enableInput();
+}
+
+function handleDone() {
+  let fullText = "";
+  if (currentAssistantMsg) {
+    const blocks = currentAssistantMsg.querySelectorAll(".text-block");
+    blocks.forEach((b) => {
+      fullText += b.dataset.mdContent + "\n";
+    });
+  }
+  chatHistory.push({ role: "assistant", content: fullText });
+  enableInput();
+}
+
+function showLoadingIndicator() {
+  if (!currentAssistantMsg) return;
+  let indicator = currentAssistantMsg.querySelector(".loading-indicator");
+  if (!indicator) {
+    indicator = document.createElement("div");
+    indicator.className = "loading-indicator";
+    indicator.innerHTML = `<span></span><span></span><span></span>`;
+    currentAssistantMsg.appendChild(indicator);
+  }
+  indicator.style.display = "flex";
+  scrollToBottom();
+}
+
+function hideLoadingIndicator() {
+  if (!currentAssistantMsg) return;
+  const indicator = currentAssistantMsg.querySelector(".loading-indicator");
+  if (indicator) {
+    indicator.style.display = "none";
+  }
+}
+
+function handleAgentEvent(event) {
+  if (!currentAssistantMsg) return;
+
+  if (
+    ["text_delta", "thinking_delta", "tool_start", "tool_end"].includes(
+      event.type,
+    )
+  ) {
+    hideLoadingIndicator();
+  }
+
+  switch (event.type) {
+    case "agent_start":
+    case "message_start":
+      showLoadingIndicator();
+      break;
+
+    case "agent_end":
+    case "message_end":
+      hideLoadingIndicator();
+      break;
+
+    case "thinking_delta":
+      const thinkingBlock = getOrCreateThinkingBlock();
+      thinkingBlock.dataset.mdContent += event.delta;
+      const contentEl = thinkingBlock.querySelector(".thinking-content");
+      if (typeof marked !== "undefined") {
+        contentEl.innerHTML = renderMarkdown(thinkingBlock.dataset.mdContent);
+      } else {
+        contentEl.textContent = thinkingBlock.dataset.mdContent;
+      }
+      scrollToBottom();
+      break;
+
+    case "text_delta":
+      const textBlock = getOrCreateTextBlock();
+      textBlock.dataset.mdContent += event.delta;
+      if (typeof marked !== "undefined") {
+        textBlock.innerHTML = renderMarkdown(textBlock.dataset.mdContent);
+      } else {
+        textBlock.textContent = textBlock.dataset.mdContent;
+      }
+      scrollToBottom();
+      break;
+
+    case "tool_start":
+      const toolCard = document.createElement("div");
+      toolCard.className = "tool-card running collapsed";
+      const safeInput =
+        typeof event.toolInput === "string"
+          ? event.toolInput
+          : JSON.stringify(event.toolInput, null, 2);
+
+      let inputHtml = "";
+      if (typeof marked !== "undefined") {
+        inputHtml = marked.parse("```json\n" + safeInput + "\n```");
+      } else {
+        inputHtml = escapeHtml(safeInput);
+      }
+
+      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>
+          </span>
+          <span class="tool-icon">🛠️</span>
+          <span class="tool-name">${escapeHtml(event.toolName)}</span>
+          <span class="tool-status spinner"></span>
+        </div>
+        <div class="tool-content">
+          <div class="tool-input markdown-body">${inputHtml}</div>
+          <div class="tool-result markdown-body" style="display: none;"></div>
+        </div>
+      `;
+
+      toolCard.querySelector(".tool-header").addEventListener("click", () => {
+        toolCard.classList.toggle("collapsed");
+      });
+
+      // Insert before loading indicator if exists
+      const toolIndicator =
+        currentAssistantMsg.querySelector(".loading-indicator");
+      if (toolIndicator) {
+        currentAssistantMsg.insertBefore(toolCard, toolIndicator);
+      } else {
+        currentAssistantMsg.appendChild(toolCard);
+      }
+
+      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);
+      if (card) {
+        card.classList.remove("running");
+        card.classList.add(event.isError ? "error" : "success");
+
+        if (event.isError) {
+          card.classList.remove("collapsed");
+        }
+
+        const statusEl = card.querySelector(".tool-status");
+        statusEl.className = "tool-status";
+        statusEl.textContent = event.isError ? "❌" : "✅";
+
+        const resultEl = card.querySelector(".tool-result");
+        resultEl.style.display = "block";
+        const safeResult =
+          typeof event.result === "string"
+            ? event.result
+            : JSON.stringify(event.result, null, 2);
+
+        const mdText =
+          event.result &&
+          typeof event.result === "string" &&
+          (event.result.includes("\n") || event.result.length > 50)
+            ? "```bash\n" + safeResult + "\n```"
+            : "```json\n" + safeResult + "\n```";
+
+        if (typeof marked !== "undefined") {
+          resultEl.innerHTML = marked.parse(mdText);
+        } else {
+          resultEl.textContent = safeResult;
+        }
+      }
+      scrollToBottom();
+
+      showLoadingIndicator();
+      break;
+  }
+}
+
+function getOrCreateThinkingBlock() {
+  const children = Array.from(currentAssistantMsg.children).filter(
+    (c) => !c.classList.contains("loading-indicator"),
+  );
+  let lastChild = children[children.length - 1];
+
+  if (!lastChild || !lastChild.classList.contains("thinking-card")) {
+    lastChild = document.createElement("div");
+    lastChild.className = "tool-card thinking-card collapsed";
+    lastChild.dataset.mdContent = "";
+
+    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>
+        </span>
+        <span class="tool-icon">🧠</span>
+        <span class="tool-name" style="color: var(--text-secondary);">Thinking Process</span>
+      </div>
+      <div class="tool-content thinking-content markdown-body"></div>
+    `;
+
+    lastChild.querySelector(".tool-header").addEventListener("click", () => {
+      lastChild.classList.toggle("collapsed");
+    });
+
+    const indicator = currentAssistantMsg.querySelector(".loading-indicator");
+    if (indicator) {
+      currentAssistantMsg.insertBefore(lastChild, indicator);
+    } else {
+      currentAssistantMsg.appendChild(lastChild);
+    }
+  }
+  return lastChild;
+}
+
+function getOrCreateTextBlock() {
+  const children = Array.from(currentAssistantMsg.children).filter(
+    (c) => !c.classList.contains("loading-indicator"),
+  );
+  let lastChild = children[children.length - 1];
+
+  if (!lastChild || !lastChild.classList.contains("text-block")) {
+    lastChild = document.createElement("div");
+    lastChild.className = "content text-block markdown-body";
+    lastChild.dataset.mdContent = "";
+
+    const indicator = currentAssistantMsg.querySelector(".loading-indicator");
+    if (indicator) {
+      currentAssistantMsg.insertBefore(lastChild, indicator);
+    } else {
+      currentAssistantMsg.appendChild(lastChild);
+    }
+  }
+  return lastChild;
+}
+
+function enableInput() {
+  const sendBtn = document.getElementById("send-btn");
+  if (sendBtn) sendBtn.disabled = false;
+  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");
+  div.className = "message " + role;
+
+  if (role === "user") {
+    div.innerHTML = '<div class="content">' + escapeHtml(text) + "</div>";
+  } else if (text) {
+    const tb = document.createElement("div");
+    tb.className = "content text-block markdown-body";
+    tb.dataset.mdContent = text;
+    tb.innerHTML = renderMarkdown(text);
+    div.appendChild(tb);
+  }
+
+  messages.appendChild(div);
+  scrollToBottom();
+  return div;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function scrollToBottom() {
+  const messages = document.getElementById("messages");
+  messages.scrollTop = messages.scrollHeight;
+}
+
+// Start the app
+init();

package/runtime/web/index.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Skills Pack Chat" />
+  <title>Skills Pack</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+</head>
+
+<body>
+  <div id="app">
+    <aside id="sidebar">
+      <div class="sidebar-header">
+        <h1 id="pack-name">Skills Pack</h1>
+        <p id="pack-desc">Loading...</p>
+      </div>
+
+      <div class="sidebar-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>
+    </aside>
+
+    <main id="chat-area" class="mode-welcome">
+      <div id="welcome-view">
+        <div id="welcome-content"></div>
+      </div>
+      <div id="chat-view">
+        <div id="messages"></div>
+      </div>
+      <div id="input-area">
+        <div class="input-container">
+          <textarea id="user-input" placeholder="Type a message..." rows="1"></textarea>
+          <button id="send-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+            </svg>
+          </button>
+        </div>
+        <p class="powered-by">
+          Powered by
+          <a href="https://skillpack.sh" target="_blank" rel="noopener noreferrer">SkillPack.sh</a>
+        </p>
+      </div>
+    </main>
+  </div>
+  <script src="marked.min.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>