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

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

@@ -0,0 +1,350 @@
+import { computed, ref } from "vue";
+import { io } from "socket.io-client";
+import { SOCKET_PATH } from "../constants.js";
+export function useClaudeChatCore(options) {
+  const {
+    getSocketUrl,
+    log = () => {
+    },
+    onDocsReceived,
+    onCommandsReceived,
+    getCurrentUserId,
+    onDisconnected
+  } = 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 connectSocket() {
+    const url = getSocketUrl();
+    log("Connecting to socket at", url);
+    socket.value = io(url, {
+      path: SOCKET_PATH,
+      transports: ["websocket", "polling"],
+      reconnection: true,
+      reconnectionAttempts: 5
+    });
+    setupSocketListeners();
+  }
+  function setupSocketListeners() {
+    if (!socket.value) return;
+    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;
+      onDisconnected?.();
+    });
+    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, conversation.messages.length, "messages");
+      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("history:deleted", (data) => {
+      log("Conversation deleted:", data);
+    });
+    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, data.is_error ? "ERROR" : "OK");
+      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("stream:stopped", (data) => {
+      log("Generation stopped:", data.message);
+      isProcessing.value = false;
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming);
+      if (lastMessage) {
+        lastMessage.streaming = false;
+        if (data.partialContent) {
+          lastMessage.content = data.partialContent + "\n\n*[Generation stopped by user]*";
+        }
+      }
+    });
+    socket.value.on("stream:result", (data) => {
+      log("Result:", data.subtype, "cost:", data.cost_usd, "duration:", data.duration_ms);
+    });
+    socket.value.on("output:chunk", (chunk) => {
+      log("Output chunk:", chunk.length);
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant" && m.streaming);
+      if (lastMessage) {
+        lastMessage.content += chunk;
+      }
+    });
+    socket.value.on("output:complete", () => {
+      log("Output complete");
+      const lastMessage = messages.value.findLast((m) => m.role === "assistant");
+      if (lastMessage) {
+        lastMessage.streaming = false;
+      }
+    });
+    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("session:closed", (data) => {
+      log("Session closed:", data);
+      addMessage("system", `Session ended (exit code: ${data.exitCode})`);
+    });
+    socket.value.on("stream:critical_file_warning", (data) => {
+      log("Critical file warning:", data.file_name);
+      addMessage("system", data.message);
+    });
+    socket.value.on("stream:system_message", (data) => {
+      log("System message:", data.type, data.message);
+      addMessage("system", data.message);
+    });
+    socket.value.on("stream:user_message", (data) => {
+      const currentUserId = getCurrentUserId?.();
+      log("User message from:", data.senderId, "current:", currentUserId, "nickname:", data.senderNickname);
+      if (currentUserId && data.senderId === currentUserId) {
+        return;
+      }
+      const existingById = messages.value.find((m) => m.id === data.id);
+      if (existingById) {
+        return;
+      }
+      const assistantIndex = messages.value.findIndex((m) => m.role === "assistant" && m.streaming);
+      const newMsg = {
+        ...data,
+        timestamp: new Date(data.timestamp)
+      };
+      if (assistantIndex >= 0) {
+        messages.value.splice(assistantIndex, 0, newMsg);
+      } else {
+        messages.value.push(newMsg);
+        addMessage("assistant", "", true);
+      }
+    });
+  }
+  function newChat() {
+    if (socket.value) {
+      socket.value.emit("session:reset");
+      messages.value = [];
+      isHistoryOpen.value = false;
+    }
+  }
+  function sendMessage(content, senderId, senderNickname, attachments) {
+    const hasContent = content.trim().length > 0 || attachments && attachments.length > 0;
+    if (!hasContent || isProcessing.value || !isConnected.value) return false;
+    const userMsg = addMessage("user", content);
+    if (senderId) {
+      userMsg.senderId = senderId;
+      userMsg.senderNickname = senderNickname;
+    }
+    if (attachments && attachments.length > 0) {
+      userMsg.attachments = attachments.map((a) => ({
+        type: "image",
+        path: `pending:${a.id}`,
+        // Will be updated when server responds
+        filename: a.filename,
+        mimeType: a.mimeType
+      }));
+    }
+    addMessage("assistant", "", true);
+    if (socket.value) {
+      const payload = { message: content };
+      if (senderId) {
+        payload.senderId = senderId;
+      }
+      if (attachments && attachments.length > 0) {
+        payload.attachments = attachments;
+      }
+      socket.value.emit("message:send", payload);
+    }
+    return true;
+  }
+  function stopGeneration() {
+    if (!isProcessing.value || !isConnected.value) return false;
+    log("Stopping generation");
+    if (socket.value) {
+      socket.value.emit("message:stop");
+    }
+    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 deleteConversation(id) {
+    if (socket.value) {
+      socket.value.emit("history:delete", 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,
+    stopGeneration,
+    addMessage,
+    toggleHistory,
+    selectConversation,
+    deleteConversation,
+    findToolResult
+  };
+}

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

@@ -0,0 +1,54 @@
+import type { ContextChip, MessageContextData } from '../types.js';
+export interface MessageContextOptions {
+    /**
+     * Get viewport dimensions (context-specific)
+     * For overlay: use window.innerWidth/innerHeight
+     * For DevTools: try host client, window.top, parent windows
+     */
+    getViewport?: () => {
+        width: number;
+        height: number;
+    } | null;
+    /**
+     * Get current route information (context-specific)
+     * For overlay: use window.location
+     * For DevTools: use host app $route
+     */
+    getRoute?: () => RouteInfo | null;
+    /**
+     * Get selected components (DevTools only)
+     */
+    getComponents?: () => string[];
+    /** Log function */
+    log?: (...args: unknown[]) => void;
+}
+export interface RouteInfo {
+    path: string;
+    fullPath?: string;
+    query?: Record<string, string | string[] | undefined>;
+    params?: Record<string, string | string[]>;
+    name?: string;
+    pageComponent?: string;
+}
+export declare function useMessageContext(options?: MessageContextOptions): {
+    contextChips: import("vue").Ref<{
+        id: "viewport" | "user-agent" | "routing";
+        label: string;
+        icon: string;
+        active: boolean;
+    }[], ContextChip[] | {
+        id: "viewport" | "user-agent" | "routing";
+        label: string;
+        icon: string;
+        active: boolean;
+    }[]>;
+    toggleContextChip: (id: ContextChip["id"]) => void;
+    collectContext: () => MessageContextData | null;
+    generateContextBlock: (context: MessageContextData) => string;
+    parseMessageContext: (content: string) => {
+        context: MessageContextData | null;
+        body: string;
+    };
+    collectContextBlock: () => string | null;
+};
+export type { ContextChip, MessageContextData } from '../types.js';

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

@@ -0,0 +1,195 @@
+import { ref } from "vue";
+function defaultGetViewport() {
+  if (typeof window === "undefined") return null;
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+function defaultGetRoute() {
+  if (typeof window === "undefined") return null;
+  return {
+    path: window.location.pathname,
+    fullPath: window.location.pathname + window.location.search,
+    query: window.location.search ? Object.fromEntries(new URLSearchParams(window.location.search)) : void 0
+  };
+}
+function parseUserAgent(ua) {
+  let browser = "Unknown";
+  if (ua.includes("Firefox/")) browser = "Firefox";
+  else if (ua.includes("Edg/")) browser = "Edge";
+  else if (ua.includes("Chrome/")) browser = "Chrome";
+  else if (ua.includes("Safari/") && !ua.includes("Chrome")) browser = "Safari";
+  let os = "Unknown";
+  if (ua.includes("Windows")) os = "Windows";
+  else if (ua.includes("Mac OS")) os = "macOS";
+  else if (ua.includes("Linux")) os = "Linux";
+  else if (ua.includes("Android")) os = "Android";
+  else if (ua.includes("iPhone") || ua.includes("iPad")) os = "iOS";
+  return { browser, os };
+}
+export function useMessageContext(options = {}) {
+  const {
+    getViewport = defaultGetViewport,
+    getRoute = defaultGetRoute,
+    getComponents = () => [],
+    log: _log = () => {
+    }
+  } = options;
+  const contextChips = ref([
+    { id: "viewport", label: "Viewport", icon: "carbon:fit-to-screen", active: false },
+    { id: "user-agent", label: "User Agent", icon: "carbon:application-web", active: false },
+    { id: "routing", label: "Routing", icon: "carbon:location", active: false }
+  ]);
+  function toggleContextChip(id) {
+    const chip = contextChips.value.find((c) => c.id === id);
+    if (chip) {
+      chip.active = !chip.active;
+    }
+  }
+  function collectContext() {
+    const context = {};
+    let hasContext = false;
+    if (contextChips.value.find((c) => c.id === "viewport")?.active) {
+      const viewport = getViewport();
+      if (viewport) {
+        context.viewport = viewport;
+        hasContext = true;
+      }
+    }
+    if (contextChips.value.find((c) => c.id === "user-agent")?.active) {
+      if (typeof navigator !== "undefined") {
+        context.userAgent = navigator.userAgent;
+        hasContext = true;
+      }
+    }
+    if (contextChips.value.find((c) => c.id === "routing")?.active) {
+      const route = getRoute();
+      if (route) {
+        const query = route.query && Object.keys(route.query).length > 0 ? Object.fromEntries(
+          Object.entries(route.query).filter(([_, v]) => v !== void 0).map(([k, v]) => [k, Array.isArray(v) ? v.filter(Boolean).join(",") : v || ""])
+        ) : void 0;
+        const params = route.params && Object.keys(route.params).length > 0 ? Object.fromEntries(
+          Object.entries(route.params).map(([k, v]) => [k, Array.isArray(v) ? v.join("/") : v || ""])
+        ) : void 0;
+        context.routing = {
+          path: route.path,
+          fullPath: route.fullPath,
+          query,
+          params,
+          name: route.name,
+          pageComponent: route.pageComponent
+        };
+        hasContext = true;
+      }
+    }
+    const components = getComponents();
+    if (components.length > 0) {
+      context.components = components;
+      hasContext = true;
+    }
+    return hasContext ? context : null;
+  }
+  function generateContextBlock(context) {
+    const parts = [];
+    if (context.viewport) {
+      parts.push(`viewport: ${context.viewport.width}x${context.viewport.height}`);
+    }
+    if (context.userAgent) {
+      const { browser, os } = parseUserAgent(context.userAgent);
+      parts.push(`browser: ${browser} on ${os}`);
+    }
+    if (context.routing) {
+      parts.push(`route: ${context.routing.path}`);
+      if (context.routing.query && Object.keys(context.routing.query).length > 0) {
+        const queryStr = Object.entries(context.routing.query).map(([k, v]) => `${k}=${Array.isArray(v) ? v.join(",") : v}`).join("&");
+        parts.push(`query: ?${queryStr}`);
+      }
+      if (context.routing.params && Object.keys(context.routing.params).length > 0) {
+        const paramsStr = Object.entries(context.routing.params).map(([k, v]) => `${k}=${v}`).join(", ");
+        parts.push(`params: ${paramsStr}`);
+      }
+      if (context.routing.pageComponent) {
+        parts.push(`page: ${context.routing.pageComponent}`);
+      }
+    }
+    if (context.components && context.components.length > 0) {
+      parts.push(`components: ${context.components.join(", ")}`);
+    }
+    return `[context]
+${parts.join("\n")}
+[/context]`;
+  }
+  function parseMessageContext(content) {
+    const contextBlockRegex = /^\[context\]\n([\s\S]*?)\n\[\/context\]\n?/;
+    const match = content.match(contextBlockRegex);
+    if (!match || !match[1]) {
+      return { context: null, body: content };
+    }
+    const contextContent = match[1];
+    let body = content.slice(match[0].length);
+    body = body.replace(/^(@\S+\s+)+/g, "").trim();
+    try {
+      const context = {};
+      const viewportMatch = contextContent.match(/viewport:\s*(\d+)x(\d+)/);
+      if (viewportMatch && viewportMatch[1] && viewportMatch[2]) {
+        context.viewport = {
+          width: Number.parseInt(viewportMatch[1]),
+          height: Number.parseInt(viewportMatch[2])
+        };
+      }
+      const browserMatch = contextContent.match(/browser:\s*(\w+)\s+on\s+(\w+)/);
+      if (browserMatch && browserMatch[1] && browserMatch[2]) {
+        context.userAgent = `${browserMatch[1]} on ${browserMatch[2]}`;
+      }
+      const routeMatch = contextContent.match(/route:\s*(\S+)/);
+      if (routeMatch && routeMatch[1]) {
+        context.routing = { path: routeMatch[1] };
+        const queryMatch = contextContent.match(/query:\s*\?(.+)/);
+        if (queryMatch && queryMatch[1] && context.routing) {
+          context.routing.query = {};
+          const pairs = queryMatch[1].split("&");
+          for (const pair of pairs) {
+            const [key, value] = pair.split("=");
+            if (key && context.routing.query) context.routing.query[key] = value || "";
+          }
+        }
+        const paramsMatch = contextContent.match(/params:\s*(.+)/);
+        if (paramsMatch && paramsMatch[1] && context.routing) {
+          context.routing.params = {};
+          const pairs = paramsMatch[1].split(",").map((s) => s.trim());
+          for (const pair of pairs) {
+            const [key, value] = pair.split("=");
+            if (key && context.routing.params) context.routing.params[key] = value || "";
+          }
+        }
+        const pageMatch = contextContent.match(/page:\s*(\S+)/);
+        if (pageMatch && pageMatch[1] && context.routing) {
+          context.routing.pageComponent = pageMatch[1];
+        }
+      }
+      const componentsMatch = contextContent.match(/components:\s*(.+)/);
+      if (componentsMatch && componentsMatch[1]) {
+        context.components = componentsMatch[1].split(",").map((s) => s.trim());
+      }
+      return { context: Object.keys(context).length > 0 ? context : null, body };
+    } catch {
+      return { context: null, body: content };
+    }
+  }
+  function collectContextBlock() {
+    const context = collectContext();
+    if (!context) return null;
+    return generateContextBlock(context);
+  }
+  return {
+    // State
+    contextChips,
+    // Methods
+    toggleContextChip,
+    collectContext,
+    generateContextBlock,
+    parseMessageContext,
+    collectContextBlock
+  };
+}

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

@@ -1,8 +1,18 @@
 import type { Socket } from 'socket.io-client';
 import type { ShareUser } from '../types.js';
-interface ShareOptions {
-    /** Get tunnel URL for share links */
-    getTunnelUrl?: () => string | null;
+export interface ShareOptions {
+    /**
+     * Get URL parameter value (context-specific)
+     * For overlay: just check window.location
+     * For DevTools: check window, parent window, host route
+     */
+    getUrlParam?: (param: string) => string | null;
+    /**
+     * Get base URL for share links (context-specific)
+     * For overlay: use tunnel URL or window.location.origin
+     * For DevTools: use tunnel URL, parent window, or window.location.origin
+     */
+    getBaseUrl?: () => string;
     /** Log function */
     log?: (...args: unknown[]) => void;
 }
@@ -33,10 +43,10 @@ export declare function useShare(options?: ShareOptions): {
     needsNicknameForMessage: () => boolean;
     needsNicknameForShare: () => boolean;
     checkSharingStatus: (socket: Socket | null) => void;
+    syncCredentials: (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 {};