@cremini/skillpack 1.2.7 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cremini/skillpack",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Pack AI Skills into Local Agents",
   "type": "module",
   "repository": {
@@ -28,6 +28,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "check": "tsc --noEmit",
+    "test": "node --import tsx --test tests/*.test.ts",
     "format": "prettier --write .",
     "prepare": "npm run build",
     "create": "tsup && node dist/cli.js create",
@@ -43,11 +44,12 @@
   "author": "CreminiAI",
   "license": "MIT",
   "dependencies": {
-    "@sinclair/typebox": "^0.34.41",
     "@mariozechner/pi-coding-agent": "^0.57.1",
+    "@sinclair/typebox": "^0.34.41",
     "@slack/bolt": "^4.6.0",
     "ajv": "^8.17.1",
     "archiver": "^7.0.1",
+    "better-sqlite3": "^11.10.0",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "express": "^5.1.0",
@@ -58,6 +60,7 @@
   },
   "devDependencies": {
     "@types/archiver": "^7.0.0",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/express": "^5.0.0",
     "@types/inquirer": "^9.0.9",
     "@types/node": "^25.5.0",
@@ -66,6 +69,7 @@
     "@types/ws": "^8.18.0",
     "prettier": "^3.8.1",
     "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   }
 }

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

@@ -5,6 +5,7 @@
  */
 import { state } from "./config.js";
 import { saveConfigData, restartRuntime } from "./api.js";
+import { refreshWebSocketConnectionPreference } from "./chat.js";
 
 // --- DOM Elements ---
 let dialog;
@@ -245,6 +246,7 @@ async function handleSave() {
     populateForm();
     state.restartRequired = !!res.requiresRestart;
     updateApiKeyButton();
+    refreshWebSocketConnectionPreference();
 
     if (res.requiresRestart) {
       setStatus("Settings saved. Restart service to apply changes.", "warning");
@@ -301,6 +303,7 @@ async function handleOAuthLogout() {
     updateOAuthUI(false);
     state.config.oauthConnected = false;
     updateApiKeyButton();
+    refreshWebSocketConnectionPreference();
     setStatus("Logged out successfully", "success");
   } catch (err) {
     setStatus("Logout failed: " + err.message, "error");
@@ -314,6 +317,7 @@ async function checkOAuthStatus() {
     updateOAuthUI(connected);
     state.config.oauthConnected = connected;
     updateApiKeyButton();
+    refreshWebSocketConnectionPreference();
   } catch (err) {
     console.error("Failed to check OAuth status:", err);
   }
@@ -329,6 +333,7 @@ function pollOAuthStatus() {
       state.config.oauthConnected = true;
       state.restartRequired = true;
       updateApiKeyButton();
+      refreshWebSocketConnectionPreference();
       setStatus("Connected successfully!", "success");
       updateRestartButton(true);
     }

package/web/js/api.js

@@ -23,3 +23,33 @@ export async function restartRuntime() {
   }
   return payload;
 }
+
+export async function listConversations() {
+  const res = await fetch(state.API_BASE + "/api/conversations");
+  if (!res.ok) {
+    throw new Error("Load Conversations Failed");
+  }
+  return await res.json();
+}
+
+export async function createConversation() {
+  const res = await fetch(state.API_BASE + "/api/conversations", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+  });
+  if (!res.ok) {
+    throw new Error("Create Conversation Failed");
+  }
+  return await res.json();
+}
+
+export async function getConversationMessages(channelId, limit = 200) {
+  const params = new URLSearchParams({ limit: String(limit) });
+  const res = await fetch(
+    state.API_BASE + `/api/conversations/${encodeURIComponent(channelId)}/messages?${params.toString()}`,
+  );
+  if (!res.ok) {
+    throw new Error("Load Conversation Messages Failed");
+  }
+  return await res.json();
+}

package/web/js/chat.js

@@ -1,10 +1,28 @@
 import { state } from "./config.js";
+import {
+  createConversation,
+  getConversationMessages,
+  listConversations,
+} from "./api.js";
 
 export const chatHistory = [];
+const DEFAULT_WEB_CHANNEL_ID = "web";
 let ws = null;
+let wsConnectPromise = null;
 let currentAssistantMsg = null;
+let currentChannelId = DEFAULT_WEB_CHANNEL_ID;
+const pendingSendFileCalls = new Map();
+const anonymousSendFileCalls = [];
+let reconnectTimer = null;
+let shouldMaintainWs = false;
+
+function hasConfiguredWebAuth() {
+  return Boolean(
+    state.config && (state.config.hasApiKey || state.config.oauthConnected)
+  );
+}
 
-export function initChat() {
+export async function initChat() {
   // Send button
   document.getElementById("send-btn").addEventListener("click", sendMessage);
 
@@ -39,6 +57,12 @@ export function initChat() {
       }
     });
   }
+
+  await initializeConversation();
+  shouldMaintainWs = hasConfiguredWebAuth();
+  if (shouldMaintainWs) {
+    void ensureBackgroundWsConnection();
+  }
 }
 
 export function showWelcome(config) {
@@ -184,30 +208,90 @@ function renderEmbeddedMarkdownBlocks(html) {
   return template.innerHTML;
 }
 
-async function getOrCreateWs() {
+function clearReconnectTimer() {
+  if (reconnectTimer !== null) {
+    window.clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+}
+
+function scheduleReconnect() {
+  if (!shouldMaintainWs || !hasConfiguredWebAuth() || reconnectTimer !== null) {
+    return;
+  }
+
+  reconnectTimer = window.setTimeout(() => {
+    reconnectTimer = null;
+    void ensureBackgroundWsConnection();
+  }, 1000);
+}
+
+async function ensureBackgroundWsConnection() {
+  try {
+    await getOrCreateWs({ background: true });
+  } catch (err) {
+    console.warn("Background WebSocket connection failed:", err);
+  }
+}
+
+export function refreshWebSocketConnectionPreference() {
+  shouldMaintainWs = hasConfiguredWebAuth();
+
+  if (shouldMaintainWs) {
+    void ensureBackgroundWsConnection();
+    return;
+  }
+
+  clearReconnectTimer();
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.close();
+  }
+}
+
+async function getOrCreateWs(options = {}) {
+  const { background = false } = options;
   if (ws && ws.readyState === WebSocket.OPEN) {
     return ws;
   }
 
-  return new Promise((resolve, reject) => {
+  if (wsConnectPromise) {
+    return wsConnectPromise;
+  }
+
+  clearReconnectTimer();
+
+  wsConnectPromise = new Promise((resolve, reject) => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const provider = state.config && state.config.provider ? state.config.provider : "openai";
+    const params = new URLSearchParams({
+      provider,
+      channelId: currentChannelId || DEFAULT_WEB_CHANNEL_ID,
+    });
+    const wsUrl = `${protocol}//${window.location.host}${state.API_BASE}/api/chat?${params.toString()}`;
 
-    const wsUrl = `${protocol}//${window.location.host}${state.API_BASE}/api/chat?provider=${provider}`;
-
-    ws = new WebSocket(wsUrl);
+    const socket = new WebSocket(wsUrl);
+    ws = socket;
 
-    ws.onopen = () => resolve(ws);
-    ws.onerror = (err) => {
+    socket.onopen = () => {
+      shouldMaintainWs = true;
+      wsConnectPromise = null;
+      resolve(socket);
+    };
+    socket.onerror = (err) => {
       console.error(err);
+      wsConnectPromise = null;
       reject(new Error("WebSocket connection failed"));
     };
 
-    ws.onmessage = (event) => {
+    socket.onmessage = (event) => {
       try {
         const parsed = JSON.parse(event.data);
         if (parsed.error) {
-          handleError(parsed.error);
+          if (background && !currentAssistantMsg) {
+            console.warn("Background WebSocket message error:", parsed.error);
+          } else {
+            handleError(parsed.error);
+          }
         } else if (parsed.done) {
           handleDone();
         } else if (parsed.type) {
@@ -218,11 +302,58 @@ async function getOrCreateWs() {
       }
     };
 
-    ws.onclose = () => {
-      ws = null;
+    socket.onclose = () => {
+      if (ws === socket) {
+        ws = null;
+      }
+      wsConnectPromise = null;
       enableInput();
+      scheduleReconnect();
     };
   });
+
+  return wsConnectPromise;
+}
+
+async function initializeConversation() {
+  const channelId = await ensureConversation();
+  currentChannelId = channelId;
+  await loadConversationHistory(channelId);
+}
+
+async function ensureConversation() {
+  const conversations = await listConversations();
+  const existing = conversations.find(
+    (conversation) => conversation.channelId === DEFAULT_WEB_CHANNEL_ID,
+  );
+  if (existing) {
+    return existing.channelId;
+  }
+
+  const created = await createConversation();
+  return created.channelId || DEFAULT_WEB_CHANNEL_ID;
+}
+
+async function loadConversationHistory(channelId) {
+  const messages = await getConversationMessages(channelId, 200);
+  const messagesEl = document.getElementById("messages");
+  const chatArea = document.getElementById("chat-area");
+
+  messagesEl.innerHTML = "";
+  chatHistory.length = 0;
+
+  for (const message of messages) {
+    appendMessage(message.role, message.text, message.toolCalls);
+    chatHistory.push({ role: message.role, content: message.text });
+  }
+
+  if (messages.length > 0) {
+    chatArea.classList.remove("mode-welcome");
+    chatArea.classList.add("mode-chat");
+  } else {
+    chatArea.classList.remove("mode-chat");
+    chatArea.classList.add("mode-welcome");
+  }
 }
 
 function handleError(errorMsg) {
@@ -271,7 +402,28 @@ function hideLoadingIndicator() {
   }
 }
 
+function ensureAssistantMessageForEvent(event) {
+  if (currentAssistantMsg) return;
+
+  if (
+    !["agent_start", "message_start", "text_delta", "thinking_delta", "tool_start"].includes(
+      event.type
+    )
+  ) {
+    return;
+  }
+
+  const chatArea = document.getElementById("chat-area");
+  if (chatArea.classList.contains("mode-welcome")) {
+    chatArea.classList.remove("mode-welcome");
+    chatArea.classList.add("mode-chat");
+  }
+
+  currentAssistantMsg = appendMessage("assistant", "");
+}
+
 function handleAgentEvent(event) {
+  ensureAssistantMessageForEvent(event);
   if (!currentAssistantMsg) return;
 
   if (
@@ -317,6 +469,13 @@ function handleAgentEvent(event) {
       break;
 
     case "tool_start":
+      if (event.toolName === "send_file") {
+        queueSendFileToolCall(event.toolCallId, event.toolInput);
+        scrollToBottom();
+        showLoadingIndicator();
+        break;
+      }
+
       const toolCard = document.createElement("div");
       toolCard.className = "tool-card running collapsed";
       const safeInput =
@@ -360,13 +519,27 @@ function handleAgentEvent(event) {
       }
 
       toolCard.dataset.toolName = event.toolName;
+      toolCard.dataset.toolCallId = event.toolCallId || "";
       scrollToBottom();
       showLoadingIndicator();
       break;
 
     case "tool_end":
+      if (event.toolName === "send_file") {
+        const file = dequeueSendFileToolCall(event.toolCallId);
+        if (!event.isError && file) {
+          appendFileCard(currentAssistantMsg, file.filePath, file.caption);
+        }
+        scrollToBottom();
+        showLoadingIndicator();
+        break;
+      }
+
       const cards = Array.from(currentAssistantMsg.querySelectorAll(".tool-card.running"));
-      const card = cards.reverse().find((c) => c.dataset.toolName === event.toolName);
+      const card = cards.reverse().find((c) =>
+        c.dataset.toolName === event.toolName &&
+        (event.toolCallId ? c.dataset.toolCallId === event.toolCallId : true)
+      );
       if (card) {
         card.classList.remove("running");
         card.classList.add(event.isError ? "error" : "success");
@@ -405,6 +578,100 @@ function handleAgentEvent(event) {
   }
 }
 
+function queueSendFileToolCall(toolCallId, toolInput) {
+  const file = extractSendFileToolInput(toolInput);
+  if (!file) return;
+
+  if (toolCallId) {
+    pendingSendFileCalls.set(toolCallId, file);
+    return;
+  }
+
+  anonymousSendFileCalls.push(file);
+}
+
+function dequeueSendFileToolCall(toolCallId) {
+  if (toolCallId) {
+    const file = pendingSendFileCalls.get(toolCallId) || null;
+    pendingSendFileCalls.delete(toolCallId);
+    return file;
+  }
+
+  return anonymousSendFileCalls.shift() || null;
+}
+
+function extractSendFileToolInput(toolInput) {
+  if (!toolInput || typeof toolInput !== "object") {
+    return null;
+  }
+
+  const filePath =
+    typeof toolInput.filePath === "string" ? toolInput.filePath.trim() : "";
+  const caption =
+    typeof toolInput.caption === "string" ? toolInput.caption.trim() : "";
+
+  if (!filePath) {
+    return null;
+  }
+
+  return {
+    filePath,
+    caption,
+  };
+}
+
+function getVisibleSendFileToolCalls(toolCalls) {
+  if (!Array.isArray(toolCalls)) {
+    return [];
+  }
+
+  return toolCalls.filter((toolCall) =>
+    toolCall &&
+    toolCall.name === "send_file" &&
+    !toolCall.isError &&
+    toolCall.arguments &&
+    typeof toolCall.arguments.filePath === "string" &&
+    toolCall.arguments.filePath
+  );
+}
+
+function appendFileCard(container, filePath, caption) {
+  const fileName = basename(filePath);
+  const title = caption || fileName;
+  const card = document.createElement("a");
+  card.className = "file-card";
+  card.href = buildFileDownloadUrl(filePath);
+  card.title = filePath;
+  card.setAttribute("download", fileName);
+  card.setAttribute("target", "_blank");
+  card.setAttribute("rel", "noopener noreferrer");
+  card.innerHTML = `
+    <div class="file-card-icon">FILE</div>
+    <div class="file-card-copy">
+      <div class="file-card-title">${escapeHtml(title)}</div>
+      <div class="file-card-meta">${escapeHtml(fileName)}</div>
+    </div>
+    <div class="file-card-action">Download</div>
+  `;
+
+  const indicator = container.querySelector(".loading-indicator");
+  if (indicator) {
+    container.insertBefore(card, indicator);
+  } else {
+    container.appendChild(card);
+  }
+}
+
+function basename(filePath) {
+  const normalized = String(filePath).replace(/\\/g, "/");
+  const parts = normalized.split("/").filter(Boolean);
+  return parts[parts.length - 1] || String(filePath);
+}
+
+function buildFileDownloadUrl(filePath) {
+  return `${state.API_BASE}/api/files?path=${encodeURIComponent(filePath)}`;
+}
+
 function getOrCreateThinkingBlock() {
   const children = Array.from(currentAssistantMsg.children).filter(
     (c) => !c.classList.contains("loading-indicator")
@@ -465,10 +732,12 @@ function getOrCreateTextBlock() {
 function enableInput() {
   const sendBtn = document.getElementById("send-btn");
   if (sendBtn) sendBtn.disabled = false;
+  pendingSendFileCalls.clear();
+  anonymousSendFileCalls.length = 0;
   currentAssistantMsg = null;
 }
 
-function appendMessage(role, text) {
+function appendMessage(role, text, toolCalls = []) {
   const messages = document.getElementById("messages");
   const div = document.createElement("div");
   div.className = "message " + role;
@@ -483,6 +752,13 @@ function appendMessage(role, text) {
     div.appendChild(tb);
   }
 
+  if (role === "assistant") {
+    const sendFileCalls = getVisibleSendFileToolCalls(toolCalls);
+    sendFileCalls.forEach((toolCall) => {
+      appendFileCard(div, toolCall.arguments.filePath, toolCall.arguments.caption);
+    });
+  }
+
   messages.appendChild(div);
   scrollToBottom();
   return div;

package/web/js/main.js

@@ -39,13 +39,16 @@ async function init() {
   } catch (err) {
     console.error("Initialization Failed:", err);
   }
-  
-  // Initialize all dialog modules
+
   initApiKeyDialog();
   initChatAppsDialog();
-  initChat();
 
-  // Update action button states based on config
+  try {
+    await initChat();
+  } catch (err) {
+    console.error("Chat initialization failed:", err);
+  }
+
   updateApiKeyButton();
   updateChatAppsButton();
 }

package/web/styles.css

@@ -646,6 +646,71 @@ body {
   color: var(--text-primary);
 }
 
+.file-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  margin: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  background: linear-gradient(135deg, #f9fafb 0%, #f1f4f7 100%);
+  color: inherit;
+  text-decoration: none;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.file-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
+  border-color: rgba(0, 122, 255, 0.24);
+}
+
+.file-card-icon {
+  flex: 0 0 auto;
+  min-width: 46px;
+  height: 46px;
+  padding: 0 10px;
+  border-radius: 12px;
+  background: #0f172a;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.file-card-copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.file-card-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.file-card-meta {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.file-card-action {
+  flex: 0 0 auto;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+
 /* Markdown Specifics */
 .markdown-body pre {
   background: #f8f9fa;