@oro.ad/nuxt-claude-devtools 1.2.0 → 1.3.0

package/dist/runtime/server/skills-manager.js

@@ -1,134 +1,28 @@
-import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
 import { createLogger } from "../logger.js";
+import { MarkdownResourceManager } from "./base-resource-manager.js";
+import { SKILL_FILE, SKILLS_SUBDIR } from "./constants.js";
 const log = createLogger("skills", { timestamp: true });
-export class SkillsManager {
-  skillsDir;
+export class SkillsManager extends MarkdownResourceManager {
   constructor(projectPath) {
-    this.skillsDir = join(projectPath, ".claude", "skills");
-    if (!existsSync(this.skillsDir)) {
-      mkdirSync(this.skillsDir, { recursive: true });
-      log("Created skills directory", { path: this.skillsDir });
-    }
-  }
-  // Parse YAML frontmatter from markdown content
-  parseFrontmatter(content) {
-    const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/;
-    const match = content.match(frontmatterRegex);
-    if (!match) {
-      return { frontmatter: {}, body: content.trim() };
-    }
-    const [, yaml, body] = match;
-    const frontmatter = {};
-    for (const line of yaml.split("\n")) {
-      const colonIndex = line.indexOf(":");
-      if (colonIndex === -1) continue;
-      const key = line.slice(0, colonIndex).trim();
-      const value = line.slice(colonIndex + 1).trim();
-      switch (key) {
-        case "name":
-          frontmatter.name = value;
-          break;
-        case "description":
-          frontmatter.description = value;
-          break;
-        case "argument-hint":
-          frontmatter["argument-hint"] = value;
-          break;
-        case "disable-model-invocation":
-          frontmatter["disable-model-invocation"] = value === "true";
-          break;
-        case "user-invocable":
-          frontmatter["user-invocable"] = value === "true";
-          break;
-        case "allowed-tools":
-          frontmatter["allowed-tools"] = value;
-          break;
-        case "model":
-          frontmatter.model = value;
-          break;
-        case "context":
-          frontmatter.context = value;
-          break;
-        case "agent":
-          frontmatter.agent = value;
-          break;
-      }
-    }
-    return { frontmatter, body: body.trim() };
+    super(projectPath, SKILLS_SUBDIR, log, {
+      useSubdirectories: true,
+      subdirectoryFilename: SKILL_FILE
+    });
   }
-  // Build frontmatter string
   buildFrontmatter(skill) {
-    const lines = ["---"];
-    if (skill.name) {
-      lines.push(`name: ${skill.name}`);
-    }
-    if (skill.description) {
-      lines.push(`description: ${skill.description}`);
-    }
-    if (skill.argumentHint) {
-      lines.push(`argument-hint: ${skill.argumentHint}`);
-    }
-    if (skill.disableModelInvocation !== void 0) {
-      lines.push(`disable-model-invocation: ${skill.disableModelInvocation}`);
-    }
-    if (skill.userInvocable !== void 0) {
-      lines.push(`user-invocable: ${skill.userInvocable}`);
-    }
-    if (skill.allowedTools && skill.allowedTools.length > 0) {
-      lines.push(`allowed-tools: ${skill.allowedTools.join(", ")}`);
-    }
-    if (skill.model) {
-      lines.push(`model: ${skill.model}`);
-    }
-    if (skill.context) {
-      lines.push(`context: ${skill.context}`);
-    }
-    if (skill.agent) {
-      lines.push(`agent: ${skill.agent}`);
-    }
-    lines.push("---");
-    return lines.join("\n");
+    return this.buildFrontmatterLines([
+      { key: "name", value: skill.name },
+      { key: "description", value: skill.description },
+      { key: "argument-hint", value: skill.argumentHint },
+      { key: "disable-model-invocation", value: skill.disableModelInvocation },
+      { key: "user-invocable", value: skill.userInvocable },
+      { key: "allowed-tools", value: skill.allowedTools },
+      { key: "model", value: skill.model },
+      { key: "context", value: skill.context },
+      { key: "agent", value: skill.agent }
+    ]);
   }
-  // Get all skills
-  getSkills() {
-    const skills = [];
-    if (!existsSync(this.skillsDir)) return skills;
-    const entries = readdirSync(this.skillsDir);
-    for (const entry of entries) {
-      const skillDir = join(this.skillsDir, entry);
-      const stat = statSync(skillDir);
-      if (!stat.isDirectory()) continue;
-      const skillFile = join(skillDir, "SKILL.md");
-      if (!existsSync(skillFile)) continue;
-      const fileStat = statSync(skillFile);
-      const rawContent = readFileSync(skillFile, "utf-8");
-      const { frontmatter, body } = this.parseFrontmatter(rawContent);
-      skills.push({
-        name: frontmatter.name || entry,
-        description: frontmatter.description || "",
-        content: body,
-        rawContent,
-        argumentHint: frontmatter["argument-hint"],
-        disableModelInvocation: frontmatter["disable-model-invocation"],
-        userInvocable: frontmatter["user-invocable"],
-        allowedTools: frontmatter["allowed-tools"] ? frontmatter["allowed-tools"].split(",").map((s) => s.trim()) : void 0,
-        model: frontmatter.model,
-        context: frontmatter.context === "fork" ? "fork" : void 0,
-        agent: frontmatter.agent,
-        updatedAt: fileStat.mtime.toISOString()
-      });
-    }
-    return skills.sort((a, b) => a.name.localeCompare(b.name));
-  }
-  // Get single skill
-  getSkill(name) {
-    const skillDir = join(this.skillsDir, name);
-    const skillFile = join(skillDir, "SKILL.md");
-    if (!existsSync(skillFile)) return null;
-    const stat = statSync(skillFile);
-    const rawContent = readFileSync(skillFile, "utf-8");
-    const { frontmatter, body } = this.parseFrontmatter(rawContent);
+  toResource(name, frontmatter, body, rawContent, updatedAt) {
     return {
       name: frontmatter.name || name,
       description: frontmatter.description || "",
@@ -141,33 +35,21 @@ export class SkillsManager {
       model: frontmatter.model,
       context: frontmatter.context === "fork" ? "fork" : void 0,
       agent: frontmatter.agent,
-      updatedAt: stat.mtime.toISOString()
+      updatedAt
     };
   }
-  // Get skill names only (for agent skills selector)
+  // Public API methods
+  getSkills() {
+    return this.getAll();
+  }
+  getSkill(name) {
+    return this.getOne(name);
+  }
   getSkillNames() {
-    if (!existsSync(this.skillsDir)) return [];
-    const names = [];
-    const entries = readdirSync(this.skillsDir);
-    for (const entry of entries) {
-      const skillDir = join(this.skillsDir, entry);
-      const stat = statSync(skillDir);
-      if (!stat.isDirectory()) continue;
-      const skillFile = join(skillDir, "SKILL.md");
-      if (existsSync(skillFile)) {
-        names.push(entry);
-      }
-    }
-    return names.sort();
+    return this.getAll().map((s) => s.name).sort();
   }
-  // Create or update skill
   saveSkill(skill) {
-    const safeName = skill.name.replace(/[^\w-]/g, "-").toLowerCase();
-    const skillDir = join(this.skillsDir, safeName);
-    const skillFile = join(skillDir, "SKILL.md");
-    if (!existsSync(skillDir)) {
-      mkdirSync(skillDir, { recursive: true });
-    }
+    const safeName = this.sanitizeName(skill.name);
     const frontmatter = this.buildFrontmatter({
       name: safeName,
       description: skill.description,
@@ -179,11 +61,7 @@ export class SkillsManager {
       context: skill.context,
       agent: skill.agent
     });
-    const rawContent = `${frontmatter}
-
-${skill.content}`;
-    writeFileSync(skillFile, rawContent, "utf-8");
-    log("Saved skill", { name: safeName, path: skillFile });
+    const { rawContent, updatedAt } = this.saveResource(safeName, frontmatter, skill.content);
     return {
       name: safeName,
       description: skill.description,
@@ -196,15 +74,10 @@ ${skill.content}`;
       model: skill.model,
       context: skill.context,
       agent: skill.agent,
-      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      updatedAt
     };
   }
-  // Delete skill
   deleteSkill(name) {
-    const skillDir = join(this.skillsDir, name);
-    if (!existsSync(skillDir)) return false;
-    rmSync(skillDir, { recursive: true });
-    log("Deleted skill", { name });
-    return true;
+    return this.delete(name);
   }
 }

package/dist/runtime/shared/composables/useClaudeChat.d.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { Socket } from 'socket.io-client';
+import type { ContentBlock, Conversation, DocFile, Message, SlashCommand } from '../types.js';
+interface UseChatOptions {
+    onDocsReceived?: (docs: DocFile[]) => void;
+    onCommandsReceived?: (commands: SlashCommand[]) => void;
+    log?: (...args: unknown[]) => void;
+    /** Custom socket URL (for tunnel support) */
+    socketUrl?: string;
+    /** Current user ID for collaborative mode */
+    getCurrentUserId?: () => string | null;
+}
+/** Return type for useClaudeChat composable */
+export interface UseChatReturn {
+    socket: Ref<Socket | null>;
+    messages: Ref<Message[]>;
+    conversations: Ref<Conversation[]>;
+    activeConversationId: Ref<string | null>;
+    isConnected: Ref<boolean>;
+    isSessionActive: Ref<boolean>;
+    isProcessing: Ref<boolean>;
+    isHistoryOpen: Ref<boolean>;
+    statusText: ComputedRef<string>;
+    statusColor: ComputedRef<string>;
+    connectSocket: () => void;
+    disconnect: () => void;
+    newChat: () => void;
+    sendMessage: (content: string, senderId?: string, senderNickname?: string) => void;
+    addMessage: (role: Message['role'], content: string, streaming?: boolean) => Message;
+    toggleHistory: () => void;
+    selectConversation: (id: string) => void;
+    findToolResult: (blocks: ContentBlock[] | undefined, toolUseId: string) => ContentBlock | undefined;
+}
+export declare function useClaudeChat(options?: UseChatOptions): UseChatReturn;
+export {};

package/dist/runtime/shared/composables/useClaudeChat.js

@@ -0,0 +1,264 @@
+import { computed, ref } from "vue";
+import { io } from "socket.io-client";
+import { SOCKET_PATH } from "../constants.js";
+export function useClaudeChat(options = {}) {
+  const { log = () => {
+  }, onDocsReceived, onCommandsReceived, socketUrl, getCurrentUserId } = options;
+  const socket = ref(null);
+  const messages = ref([]);
+  const conversations = ref([]);
+  const activeConversationId = ref(null);
+  const isConnected = ref(false);
+  const isSessionActive = ref(false);
+  const isProcessing = ref(false);
+  const isHistoryOpen = ref(false);
+  const pendingToolCalls = ref(/* @__PURE__ */ new Map());
+  const statusText = computed(() => {
+    if (!isConnected.value) return "Disconnected";
+    if (isProcessing.value) return "Processing...";
+    return "Ready";
+  });
+  const statusColor = computed(() => {
+    if (!isConnected.value) return "red";
+    if (isProcessing.value) return "blue";
+    return "green";
+  });
+  function generateId() {
+    return Math.random().toString(36).substring(2, 9);
+  }
+  function addMessage(role, content, streaming = false) {
+    const message = {
+      id: generateId(),
+      role,
+      content,
+      timestamp: /* @__PURE__ */ new Date(),
+      streaming
+    };
+    messages.value.push(message);
+    return message;
+  }
+  function getSocketUrl() {
+    if (socketUrl) return socketUrl;
+    if (typeof window !== "undefined") {
+      return window.location.origin;
+    }
+    return "";
+  }
+  function connectSocket() {
+    const url = getSocketUrl();
+    log("Connecting to socket at", url);
+    socket.value = io(url, {
+      path: SOCKET_PATH,
+      transports: ["websocket", "polling"],
+      reconnection: true,
+      reconnectionAttempts: 5
+    });
+    socket.value.on("connect", () => {
+      log("Connected to socket");
+      isConnected.value = true;
+      socket.value?.emit("docs:list");
+      socket.value?.emit("commands:list");
+    });
+    socket.value.on("disconnect", () => {
+      log("Disconnected from socket");
+      isConnected.value = false;
+      isSessionActive.value = false;
+      isProcessing.value = false;
+    });
+    socket.value.on("session:status", (status) => {
+      log("Session status:", status);
+      isSessionActive.value = status.active;
+      isProcessing.value = status.processing;
+    });
+    socket.value.on("history:loaded", (conversation) => {
+      log("History loaded:", conversation.id);
+      activeConversationId.value = conversation.id;
+      messages.value = conversation.messages.map((m) => ({
+        ...m,
+        timestamp: new Date(m.timestamp)
+      }));
+    });
+    socket.value.on("history:list", (convs) => {
+      log("Conversations list:", convs.length);
+      conversations.value = convs;
+    });
+    socket.value.on("history:switched", (conversation) => {
+      log("Switched to conversation:", conversation.id);
+      activeConversationId.value = conversation.id;
+      messages.value = conversation.messages.map((m) => ({
+        ...m,
+        timestamp: new Date(m.timestamp)
+      }));
+      isHistoryOpen.value = false;
+    });
+    socket.value.on("docs:list", (files) => {
+      log("Docs list received:", files.length);
+      onDocsReceived?.(files);
+    });
+    socket.value.on("commands:list", (cmds) => {
+      log("Commands list received:", cmds.length);
+      onCommandsReceived?.(cmds);
+    });
+    socket.value.on("stream:message_start", (data) => {
+      log("Message start:", data.id);
+      pendingToolCalls.value.clear();
+      const lastMessage = messages.value[messages.value.length - 1];
+      if (!lastMessage || lastMessage.role !== "assistant" || !lastMessage.streaming) {
+        addMessage("assistant", "", true);
+      }
+      const streamingMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming);
+      if (streamingMessage && !streamingMessage.contentBlocks) {
+        streamingMessage.contentBlocks = [];
+      }
+    });
+    socket.value.on("stream:tool_use", (data) => {
+      log("Tool use:", data.name);
+      const toolBlock = {
+        type: "tool_use",
+        id: data.id,
+        name: data.name,
+        input: data.input
+      };
+      pendingToolCalls.value.set(data.id, toolBlock);
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming) || messages.value.findLast((m) => m.role === "assistant");
+      if (lastMessage) {
+        if (!lastMessage.contentBlocks) {
+          lastMessage.contentBlocks = [];
+        }
+        lastMessage.contentBlocks.push(toolBlock);
+      }
+    });
+    socket.value.on("stream:tool_result", (data) => {
+      log("Tool result:", data.tool_use_id);
+      const resultBlock = {
+        type: "tool_result",
+        tool_use_id: data.tool_use_id,
+        content: data.content,
+        is_error: data.is_error
+      };
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming) || messages.value.findLast((m) => m.role === "assistant");
+      if (lastMessage) {
+        if (!lastMessage.contentBlocks) {
+          lastMessage.contentBlocks = [];
+        }
+        lastMessage.contentBlocks.push(resultBlock);
+      }
+    });
+    socket.value.on("stream:text_delta", (data) => {
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming);
+      if (lastMessage) {
+        lastMessage.content += data.text;
+        if (!lastMessage.contentBlocks) {
+          lastMessage.contentBlocks = [];
+        }
+        const lastBlock = lastMessage.contentBlocks[lastMessage.contentBlocks.length - 1];
+        if (lastBlock && lastBlock.type === "text") {
+          lastBlock.text = (lastBlock.text || "") + data.text;
+        } else {
+          const prefix = lastMessage.contentBlocks.length > 0 ? "\n" : "";
+          lastMessage.contentBlocks.push({
+            type: "text",
+            text: prefix + data.text
+          });
+        }
+      }
+    });
+    socket.value.on("stream:message_complete", (data) => {
+      log("Message complete:", data.id);
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming) || messages.value.findLast((m) => m.role === "assistant");
+      if (lastMessage) {
+        lastMessage.streaming = false;
+        lastMessage.content = data.content;
+        lastMessage.contentBlocks = data.contentBlocks;
+        lastMessage.model = data.model;
+      }
+      pendingToolCalls.value.clear();
+    });
+    socket.value.on("output:error", (error) => {
+      log("Output error:", error);
+      addMessage("system", `Error: ${error}`);
+    });
+    socket.value.on("session:error", (error) => {
+      log("Session error:", error);
+      addMessage("system", `Session error: ${error}`);
+    });
+    socket.value.on("stream:system_message", (data) => {
+      log("System message:", data.message);
+      addMessage("system", data.message);
+    });
+    socket.value.on("stream:user_message", (data) => {
+      const currentUserId = getCurrentUserId?.();
+      log("User message received:", { senderId: data.senderId, currentUserId, isOwn: data.senderId === currentUserId });
+      if (currentUserId && data.senderId === currentUserId) {
+        return;
+      }
+      messages.value.push({
+        ...data,
+        timestamp: new Date(data.timestamp)
+      });
+      addMessage("assistant", "", true);
+    });
+  }
+  function newChat() {
+    if (socket.value) {
+      socket.value.emit("session:reset");
+      messages.value = [];
+      isHistoryOpen.value = false;
+    }
+  }
+  function sendMessage(content, senderId, senderNickname) {
+    if (!content.trim() || isProcessing.value || !isConnected.value) return false;
+    const userMsg = addMessage("user", content);
+    if (senderId) {
+      userMsg.senderId = senderId;
+      userMsg.senderNickname = senderNickname;
+    }
+    addMessage("assistant", "", true);
+    if (socket.value) {
+      socket.value.emit("message:send", senderId ? { message: content, senderId } : content);
+    }
+    return true;
+  }
+  function toggleHistory() {
+    isHistoryOpen.value = !isHistoryOpen.value;
+    if (isHistoryOpen.value && socket.value) {
+      socket.value.emit("history:list");
+    }
+  }
+  function selectConversation(id) {
+    if (socket.value) {
+      socket.value.emit("history:switch", id);
+    }
+  }
+  function disconnect() {
+    if (socket.value) {
+      socket.value.disconnect();
+    }
+  }
+  function findToolResult(blocks, toolUseId) {
+    if (!blocks) return void 0;
+    return blocks.find((b) => b.type === "tool_result" && b.tool_use_id === toolUseId);
+  }
+  return {
+    // State
+    socket,
+    messages,
+    conversations,
+    activeConversationId,
+    isConnected,
+    isSessionActive,
+    isProcessing,
+    isHistoryOpen,
+    statusText,
+    statusColor,
+    // Methods
+    connectSocket,
+    disconnect,
+    newChat,
+    sendMessage,
+    addMessage,
+    toggleHistory,
+    selectConversation,
+    findToolResult
+  };
+}

package/dist/runtime/shared/composables/useShare.d.ts

@@ -0,0 +1,42 @@
+import type { Socket } from 'socket.io-client';
+import type { ShareUser } from '../types.js';
+interface ShareOptions {
+    /** Get tunnel URL for share links */
+    getTunnelUrl?: () => string | null;
+    /** Log function */
+    log?: (...args: unknown[]) => void;
+}
+export declare function useShare(options?: ShareOptions): {
+    userId: import("vue").Ref<string | null, string | null>;
+    nickname: import("vue").Ref<string | null, string | null>;
+    users: import("vue").Ref<{
+        id: string;
+        nickname: string;
+        joinedAt: string;
+        lastSeen: string;
+    }[], ShareUser[] | {
+        id: string;
+        nickname: string;
+        joinedAt: string;
+        lastSeen: string;
+    }[]>;
+    showNicknameModal: import("vue").Ref<boolean, boolean>;
+    nicknameError: import("vue").Ref<string | null, string | null>;
+    isShareMode: import("vue").ComputedRef<boolean>;
+    wasInvited: import("vue").Ref<boolean, boolean>;
+    sharingActiveOnServer: import("vue").Ref<boolean, boolean>;
+    nicknameFromUrl: import("vue").Ref<boolean, boolean>;
+    initShare: () => void;
+    createShareLink: (includeNickname?: boolean) => string;
+    setNickname: (name: string) => void;
+    needsNicknameImmediate: () => boolean;
+    needsNicknameForMessage: () => boolean;
+    needsNicknameForShare: () => boolean;
+    checkSharingStatus: (socket: Socket | null) => void;
+    registerUser: (socket: Socket | null) => void;
+    setupSocketListeners: (socket: Socket) => void;
+    getNicknameById: (id: string) => string | null;
+    isOwnMessage: (senderId?: string) => boolean;
+    copyShareLink: (includeNickname?: boolean) => Promise<boolean>;
+};
+export {};