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

package/dist/runtime/overlay/components/ChatOverlay.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Custom socket URL (for tunnel) */
+    socketUrl?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/MarkdownContent.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/MarkdownContent.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { marked } from "marked";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+marked.setOptions({
+  breaks: true,
+  gfm: true
+});
+const renderedContent = computed(() => {
+  if (!props.content) return "";
+  try {
+    return marked.parse(props.content);
+  } catch (e) {
+    console.error("Markdown parsing error:", e);
+    return props.content;
+  }
+});
+</script>
+
+<template>
+  <div
+    class="markdown-content"
+    v-html="renderedContent"
+  />
+</template>
+
+<style>
+.markdown-content{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.625;word-break:break-word}.markdown-content h1{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;margin-top:1rem}.markdown-content h2{font-size:1.125rem;font-weight:700;margin-bottom:.5rem;margin-top:.75rem}.markdown-content h3{font-size:1rem;font-weight:600;margin-bottom:.25rem;margin-top:.5rem}.markdown-content p{margin:.5rem 0}.markdown-content ol,.markdown-content ul{margin:.5rem 0 .5rem 1rem}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin:.25rem 0}.markdown-content code{background:hsla(0,0%,100%,.1);border-radius:4px;font-family:SF Mono,Monaco,Cascadia Code,Consolas,monospace;font-size:.75rem;padding:.125rem .375rem}.markdown-content pre{background:rgba(0,0,0,.3);border-radius:8px;margin:.5rem 0;overflow-x:auto;padding:.75rem}.markdown-content pre code{background:transparent;font-size:.8rem;line-height:1.5;padding:0}.markdown-content blockquote{border-left:4px solid hsla(0,0%,100%,.2);color:var(--claude-text-muted,#a0a0a0);font-style:italic;margin:.5rem 0;padding-left:1rem}.markdown-content a{color:#3b82f6;text-decoration:none}.markdown-content a:hover{text-decoration:underline}.markdown-content table{border-collapse:collapse;font-size:.875rem;margin:.5rem 0;width:100%}.markdown-content td,.markdown-content th{border:1px solid hsla(0,0%,100%,.15);padding:.5rem .75rem;text-align:left}.markdown-content th{background:hsla(0,0%,100%,.05);font-weight:600}.markdown-content tr:nth-child(2n){background:hsla(0,0%,100%,.02)}.markdown-content hr{border:none;border-top:1px solid hsla(0,0%,100%,.15);margin:1rem 0}.markdown-content img{border-radius:8px;height:auto;max-width:100%}.markdown-content>:first-child{margin-top:0}.markdown-content>:last-child{margin-bottom:0}
+</style>

package/dist/runtime/overlay/components/MarkdownContent.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/ToolCallBlock.d.vue.ts

@@ -0,0 +1,8 @@
+import type { ContentBlock } from '../../shared/types.js';
+type __VLS_Props = {
+    block: ContentBlock;
+    result?: ContentBlock;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/ToolCallBlock.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps({
+  block: { type: Object, required: true },
+  result: { type: Object, required: false }
+});
+const isExpanded = ref(false);
+const statusIcon = computed(() => {
+  if (!props.result) return "\u23F3";
+  if (props.result.is_error) return "\u274C";
+  return "\u2713";
+});
+const statusColor = computed(() => {
+  if (!props.result) return "var(--claude-text-muted)";
+  if (props.result.is_error) return "#ef4444";
+  return "#22c55e";
+});
+const resultPreview = computed(() => {
+  if (!props.result?.content) return "";
+  const content = typeof props.result.content === "string" ? props.result.content : JSON.stringify(props.result.content, null, 2);
+  if (content.length > 200) {
+    return content.slice(0, 200) + "...";
+  }
+  return content;
+});
+</script>
+
+<template>
+  <div class="claude-tool-block">
+    <button
+      class="claude-tool-header"
+      @click="isExpanded = !isExpanded"
+    >
+      <span
+        class="claude-tool-icon"
+        :style="{ color: statusColor }"
+      >{{ statusIcon }}</span>
+      <span class="claude-tool-name">{{ block.name }}</span>
+      <span class="claude-tool-expand">{{ isExpanded ? "\u25BC" : "\u25B6" }}</span>
+    </button>
+
+    <div
+      v-if="isExpanded"
+      class="claude-tool-details"
+    >
+      <!-- Input -->
+      <div
+        v-if="block.input"
+        class="claude-tool-section"
+      >
+        <div class="claude-tool-section-title">
+          Input
+        </div>
+        <pre class="claude-tool-code">{{ JSON.stringify(block.input, null, 2) }}</pre>
+      </div>
+
+      <!-- Result -->
+      <div
+        v-if="result"
+        class="claude-tool-section"
+      >
+        <div class="claude-tool-section-title">
+          Result
+          <span
+            v-if="result.is_error"
+            class="claude-tool-error-badge"
+          >Error</span>
+        </div>
+        <pre class="claude-tool-code">{{ resultPreview }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.claude-tool-block{background:rgba(0,0,0,.2);border-radius:6px;margin:8px 0;overflow:hidden}.claude-tool-header{align-items:center;background:transparent;border:none;color:var(--claude-text);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:8px 12px;text-align:left;transition:background .15s;width:100%}.claude-tool-header:hover{background:hsla(0,0%,100%,.05)}.claude-tool-icon{font-size:12px}.claude-tool-name{color:var(--claude-primary);flex:1;font-family:monospace}.claude-tool-expand{color:var(--claude-text-muted);font-size:10px}.claude-tool-details{padding:0 12px 12px}.claude-tool-section{margin-top:8px}.claude-tool-section-title{align-items:center;color:var(--claude-text-muted);display:flex;font-size:11px;gap:8px;margin-bottom:4px}.claude-tool-error-badge{background:#ef4444;border-radius:4px;color:#fff;font-size:10px;padding:1px 6px}.claude-tool-code{background:#0d0d0d;border-radius:4px;font-family:SF Mono,Monaco,monospace;font-size:11px;margin:0;max-height:200px;overflow-x:auto;overflow-y:auto;padding:8px;white-space:pre-wrap;word-break:break-all}
+</style>

package/dist/runtime/overlay/components/ToolCallBlock.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ContentBlock } from '../../shared/types.js';
+type __VLS_Props = {
+    block: ContentBlock;
+    result?: ContentBlock;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/plugin.client.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("#app").Plugin<{
+    claudeOverlay: {};
+}> & import("#app").ObjectPlugin<{
+    claudeOverlay: {};
+}>;
+export default _default;

package/dist/runtime/overlay/plugin.client.js

@@ -0,0 +1,29 @@
+import { createApp, h } from "vue";
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import ChatOverlay from "./components/ChatOverlay.vue";
+export default defineNuxtPlugin((nuxtApp) => {
+  if (import.meta.server) return;
+  const config = useRuntimeConfig();
+  const mountPoint = document.createElement("div");
+  mountPoint.id = "claude-chat-overlay-root";
+  document.body.appendChild(mountPoint);
+  const tunnelOrigin = config.public.claudeDevtools?.tunnelOrigin;
+  const overlayApp = createApp({
+    render() {
+      return h(ChatOverlay, {
+        socketUrl: tunnelOrigin || void 0
+      });
+    }
+  });
+  overlayApp.config.globalProperties = nuxtApp.vueApp.config.globalProperties;
+  overlayApp.mount(mountPoint);
+  nuxtApp.hook("app:beforeMount", () => {
+  });
+  return {
+    provide: {
+      claudeOverlay: {
+        // Could expose methods to control overlay programmatically
+      }
+    }
+  };
+});

package/dist/runtime/server/agents-manager.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownResourceManager } from './base-resource-manager.js';
 export interface Agent {
     name: string;
     description: string;
@@ -9,12 +10,23 @@ export interface Agent {
     permissionMode?: 'default' | 'acceptEdits' | 'dontAsk' | 'bypassPermissions' | 'plan';
     skills?: string[];
     updatedAt: string;
+    /** Source of the agent: 'project' for local .claude/, or plugin name */
+    source?: string;
 }
-export declare class AgentsManager {
-    private agentsDir;
+interface AgentFrontmatter {
+    name?: string;
+    description?: string;
+    tools?: string;
+    disallowedTools?: string;
+    model?: string;
+    permissionMode?: string;
+    skills?: string[];
+}
+export declare class AgentsManager extends MarkdownResourceManager<Agent, AgentFrontmatter> {
     constructor(projectPath: string);
-    private parseFrontmatter;
-    private buildFrontmatter;
+    protected parseYaml(yaml: string): AgentFrontmatter;
+    protected buildFrontmatter(agent: Partial<Agent>): string;
+    protected toResource(name: string, frontmatter: AgentFrontmatter, body: string, rawContent: string, updatedAt: string): Agent;
     getAgents(): Agent[];
     getAgent(name: string): Agent | null;
     saveAgent(agent: {
@@ -29,3 +41,4 @@ export declare class AgentsManager {
     }): Agent;
     deleteAgent(name: string): boolean;
 }
+export {};

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

@@ -1,25 +1,13 @@
-import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, unlinkSync, writeFileSync } from "node:fs";
-import { basename, join } from "node:path";
 import { createLogger } from "../logger.js";
+import { MarkdownResourceManager } from "./base-resource-manager.js";
+import { AGENTS_SUBDIR } from "./constants.js";
 const log = createLogger("agents", { timestamp: true });
-export class AgentsManager {
-  agentsDir;
+export class AgentsManager extends MarkdownResourceManager {
   constructor(projectPath) {
-    this.agentsDir = join(projectPath, ".claude", "agents");
-    if (!existsSync(this.agentsDir)) {
-      mkdirSync(this.agentsDir, { recursive: true });
-      log("Created agents directory", { path: this.agentsDir });
-    }
+    super(projectPath, AGENTS_SUBDIR, log);
   }
-  // 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 = {};
+  parseYaml(yaml) {
+    const result = {};
     let inSkillsArray = false;
     const skillsList = [];
     for (const line of yaml.split("\n")) {
@@ -40,26 +28,26 @@ export class AgentsManager {
       const value = line.slice(colonIndex + 1).trim();
       switch (key) {
         case "name":
-          frontmatter.name = value;
+          result.name = value;
           break;
         case "description":
-          frontmatter.description = value;
+          result.description = value;
           break;
         case "tools":
-          frontmatter.tools = value;
+          result.tools = value;
           break;
         case "disallowedTools":
-          frontmatter.disallowedTools = value;
+          result.disallowedTools = value;
           break;
         case "model":
-          frontmatter.model = value;
+          result.model = value;
           break;
         case "permissionMode":
-          frontmatter.permissionMode = value;
+          result.permissionMode = value;
           break;
         case "skills":
           if (value) {
-            frontmatter.skills = value.split(",").map((s) => s.trim()).filter((s) => s);
+            result.skills = value.split(",").map((s) => s.trim()).filter((s) => s);
           } else {
             inSkillsArray = true;
           }
@@ -67,77 +55,24 @@ export class AgentsManager {
       }
     }
     if (skillsList.length > 0) {
-      frontmatter.skills = skillsList;
+      result.skills = skillsList;
     }
-    return { frontmatter, body: body.trim() };
+    return result;
   }
-  // Build frontmatter string
   buildFrontmatter(agent) {
-    const lines = ["---"];
-    if (agent.name) {
-      lines.push(`name: ${agent.name}`);
-    }
-    if (agent.description) {
-      lines.push(`description: ${agent.description}`);
-    }
-    if (agent.tools && agent.tools.length > 0) {
-      lines.push(`tools: ${agent.tools.join(", ")}`);
-    }
-    if (agent.disallowedTools && agent.disallowedTools.length > 0) {
-      lines.push(`disallowedTools: ${agent.disallowedTools.join(", ")}`);
-    }
-    if (agent.model) {
-      lines.push(`model: ${agent.model}`);
-    }
-    if (agent.permissionMode) {
-      lines.push(`permissionMode: ${agent.permissionMode}`);
-    }
-    if (agent.skills && agent.skills.length > 0) {
-      lines.push("skills:");
-      for (const skill of agent.skills) {
-        lines.push(`  - ${skill}`);
-      }
-    }
-    lines.push("---");
-    return lines.join("\n");
+    return this.buildFrontmatterWithArrays([
+      { key: "name", value: agent.name },
+      { key: "description", value: agent.description },
+      { key: "tools", value: agent.tools },
+      { key: "disallowedTools", value: agent.disallowedTools },
+      { key: "model", value: agent.model },
+      { key: "permissionMode", value: agent.permissionMode },
+      { key: "skills", value: agent.skills, multiline: true }
+    ]);
   }
-  // Get all agents
-  getAgents() {
-    const agents = [];
-    if (!existsSync(this.agentsDir)) return agents;
-    const entries = readdirSync(this.agentsDir);
-    for (const entry of entries) {
-      if (!entry.endsWith(".md")) continue;
-      const fullPath = join(this.agentsDir, entry);
-      const stat = statSync(fullPath);
-      if (stat.isDirectory()) continue;
-      const rawContent = readFileSync(fullPath, "utf-8");
-      const { frontmatter, body } = this.parseFrontmatter(rawContent);
-      agents.push({
-        name: frontmatter.name || basename(entry, ".md"),
-        description: frontmatter.description || "",
-        prompt: body,
-        rawContent,
-        tools: frontmatter.tools ? frontmatter.tools.split(",").map((s) => s.trim()) : void 0,
-        disallowedTools: frontmatter.disallowedTools ? frontmatter.disallowedTools.split(",").map((s) => s.trim()) : void 0,
-        model: frontmatter.model,
-        permissionMode: frontmatter.permissionMode,
-        skills: frontmatter.skills,
-        updatedAt: stat.mtime.toISOString()
-      });
-    }
-    return agents.sort((a, b) => a.name.localeCompare(b.name));
-  }
-  // Get single agent
-  getAgent(name) {
-    const fileName = name.endsWith(".md") ? name : `${name}.md`;
-    const fullPath = join(this.agentsDir, fileName);
-    if (!existsSync(fullPath)) return null;
-    const stat = statSync(fullPath);
-    const rawContent = readFileSync(fullPath, "utf-8");
-    const { frontmatter, body } = this.parseFrontmatter(rawContent);
+  toResource(name, frontmatter, body, rawContent, updatedAt) {
     return {
-      name: frontmatter.name || basename(fileName, ".md"),
+      name: frontmatter.name || name,
       description: frontmatter.description || "",
       prompt: body,
       rawContent,
@@ -146,14 +81,18 @@ export class AgentsManager {
       model: frontmatter.model,
       permissionMode: frontmatter.permissionMode,
       skills: frontmatter.skills,
-      updatedAt: stat.mtime.toISOString()
+      updatedAt
     };
   }
-  // Create or update agent
+  // Public API methods
+  getAgents() {
+    return this.getAll();
+  }
+  getAgent(name) {
+    return this.getOne(name);
+  }
   saveAgent(agent) {
-    const safeName = agent.name.replace(/[^\w-]/g, "-").toLowerCase();
-    const fileName = `${safeName}.md`;
-    const fullPath = join(this.agentsDir, fileName);
+    const safeName = this.sanitizeName(agent.name);
     const frontmatter = this.buildFrontmatter({
       name: safeName,
       description: agent.description,
@@ -163,11 +102,7 @@ export class AgentsManager {
       permissionMode: agent.permissionMode,
       skills: agent.skills
     });
-    const rawContent = `${frontmatter}
-
-${agent.prompt}`;
-    writeFileSync(fullPath, rawContent, "utf-8");
-    log("Saved agent", { name: safeName, path: fullPath });
+    const { rawContent, updatedAt } = this.saveResource(safeName, frontmatter, agent.prompt);
     return {
       name: safeName,
       description: agent.description,
@@ -178,16 +113,10 @@ ${agent.prompt}`;
       model: agent.model,
       permissionMode: agent.permissionMode,
       skills: agent.skills,
-      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      updatedAt
     };
   }
-  // Delete agent
   deleteAgent(name) {
-    const fileName = name.endsWith(".md") ? name : `${name}.md`;
-    const fullPath = join(this.agentsDir, fileName);
-    if (!existsSync(fullPath)) return false;
-    unlinkSync(fullPath);
-    log("Deleted agent", { name });
-    return true;
+    return this.delete(name);
   }
 }

package/dist/runtime/server/base-resource-manager.d.ts

@@ -0,0 +1,90 @@
+type Logger = (message: string, data?: unknown) => void;
+/**
+ * Base interface for all markdown-based resources
+ */
+export interface BaseResource {
+    name: string;
+    rawContent: string;
+    updatedAt: string;
+}
+/**
+ * Configuration for resource storage
+ */
+export interface ResourceStorageConfig {
+    /** Use subdirectories for each resource (like skills: .claude/skills/<name>/SKILL.md) */
+    useSubdirectories?: boolean;
+    /** Filename when using subdirectories (default: SKILL.md) */
+    subdirectoryFilename?: string;
+    /** File extension (default: .md) */
+    extension?: string;
+}
+/**
+ * Base class for managing markdown resources with YAML frontmatter
+ * Handles common file operations, frontmatter parsing, and CRUD operations
+ */
+export declare abstract class MarkdownResourceManager<TResource extends BaseResource, TFrontmatter> {
+    protected readonly resourceDir: string;
+    protected readonly log: Logger;
+    protected readonly config: Required<ResourceStorageConfig>;
+    constructor(projectPath: string, subPath: string, log: Logger, config?: ResourceStorageConfig);
+    /**
+     * Parse YAML frontmatter from markdown content
+     */
+    protected parseFrontmatter(content: string): {
+        frontmatter: TFrontmatter;
+        body: string;
+    };
+    /**
+     * Parse simple YAML - override for complex parsing (arrays, nested objects)
+     */
+    protected parseYaml(yaml: string): TFrontmatter;
+    /**
+     * Build YAML frontmatter string from resource data
+     */
+    protected abstract buildFrontmatter(resource: Partial<TResource>): string;
+    /**
+     * Convert frontmatter + body to resource object
+     */
+    protected abstract toResource(name: string, frontmatter: TFrontmatter, body: string, rawContent: string, updatedAt: string): TResource;
+    /**
+     * Get all resources
+     */
+    getAll(): TResource[];
+    /**
+     * Get single resource by name
+     */
+    getOne(name: string): TResource | null;
+    /**
+     * Save (create or update) a resource
+     */
+    protected saveResource(name: string, frontmatter: string, body: string): {
+        rawContent: string;
+        updatedAt: string;
+    };
+    /**
+     * Delete a resource
+     */
+    delete(name: string): boolean;
+    /**
+     * Sanitize name for filesystem (kebab-case)
+     */
+    protected sanitizeName(name: string): string;
+    /**
+     * Helper to build frontmatter lines
+     */
+    protected buildFrontmatterLines(fields: Array<{
+        key: string;
+        value: unknown;
+    }>): string;
+    /**
+     * Helper to build frontmatter with multiline arrays
+     */
+    protected buildFrontmatterWithArrays(fields: Array<{
+        key: string;
+        value: unknown;
+        multiline?: boolean;
+    }>): string;
+    private readFromFile;
+    private readFromSubdirectory;
+}
+export {};