@code-inspector/core 1.4.1 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-inspector/core",
-  "version": "1.4.1",
+  "version": "2.0.0-beta.1",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "types": "types/index.d.ts",
@@ -41,7 +41,8 @@
     "@vue/compiler-dom": "^3.5.13",
     "chalk": "^4.1.1",
     "dotenv": "^16.1.4",
-    "launch-ide": "1.4.0",
+    "launch-ide": "1.4.2",
+    "marked": "^17.0.1",
     "portfinder": "^1.0.28"
   },
   "devDependencies": {
@@ -49,6 +50,7 @@
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-transform-typescript": "^7.21.3",
+    "@floating-ui/dom": "^1.7.5",
     "@types/node": "^18.14.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/compiler-sfc": "^3.3.4",
@@ -61,6 +63,9 @@
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "volar-service-pug": "^0.0.63"
   },
+  "optionalDependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.29"
+  },
   "scripts": {
     "dev": "vite",
     "build:server": "vite build",

package/types/client/ai.d.ts

@@ -0,0 +1,112 @@
+/**
+ * AI 模块 - 客户端 AI 聊天功能相关类型、模板和样式
+ */
+import { TemplateResult } from 'lit';
+/**
+ * 设置项目根路径（用于将绝对路径转为相对路径）
+ */
+export declare function setProjectRoot(root: string): void;
+/**
+ * 工具调用信息
+ */
+export interface ToolCall {
+    id: string;
+    name: string;
+    input?: Record<string, any>;
+    result?: string;
+    isError?: boolean;
+    isComplete?: boolean;
+}
+/**
+ * 消息内容块
+ */
+export interface ContentBlock {
+    type: 'text' | 'tool';
+    content?: string;
+    tool?: ToolCall;
+}
+/**
+ * 聊天消息类型
+ */
+export interface ChatMessage {
+    role: 'user' | 'assistant';
+    content: string;
+    blocks?: ContentBlock[];
+}
+/**
+ * 聊天上下文信息（当前选中的元素）
+ */
+export interface ChatContext {
+    file: string;
+    line: number;
+    column: number;
+    name: string;
+}
+/**
+ * 聊天状态接口
+ */
+export interface ChatState {
+    showChatModal: boolean;
+    chatMessages: ChatMessage[];
+    chatInput: string;
+    chatLoading: boolean;
+    chatContext: ChatContext | null;
+    currentTools: Map<string, ToolCall>;
+    chatTheme: 'light' | 'dark';
+    turnStatus: 'idle' | 'running' | 'done' | 'interrupt';
+    turnDuration: number;
+    isDragging: boolean;
+    chatModel: string;
+}
+/**
+ * 聊天功能处理器接口
+ */
+export interface ChatHandlers {
+    closeChatModal: () => void;
+    clearChatMessages: () => void;
+    handleChatInput: (e: Event) => void;
+    handleChatKeyDown: (e: KeyboardEvent) => void;
+    sendChatMessage: () => void;
+    toggleTheme: () => void;
+    interruptChat: () => void;
+    handleDragStart: (e: MouseEvent) => void;
+    handleDragMove: (e: MouseEvent) => void;
+    handleDragEnd: () => void;
+    handleOverlayClick: () => void;
+}
+/**
+ * 更新聊天框位置（使用 floating-ui）
+ * @param referenceEl 参考元素（选中的 DOM 元素）
+ * @param floatingEl 浮动元素（聊天框）
+ * @returns cleanup 函数
+ */
+export declare function updateChatModalPosition(referenceEl: HTMLElement | null, floatingEl: HTMLElement | null): (() => void) | null;
+/**
+ * 渲染聊天框模板
+ */
+export declare function renderChatModal(state: ChatState, handlers: ChatHandlers): TemplateResult;
+/**
+ * 聊天框样式 - 命令行风格
+ */
+export declare const chatStyles: import("lit").CSSResult;
+/**
+ * 流式事件处理器
+ */
+export interface StreamHandlers {
+    onText: (content: string) => void;
+    onToolStart: (toolId: string, toolName: string, index: number) => void;
+    onToolInput: (index: number, input: Record<string, any>) => void;
+    onToolResult: (toolUseId: string, content: string, isError?: boolean) => void;
+    onError: (error: Error) => void;
+    onSessionId?: (sessionId: string) => void;
+    onProjectRoot?: (cwd: string) => void;
+    onModel?: (model: string) => void;
+}
+/**
+ * 获取 AI 模型信息
+ */
+export declare function fetchModelInfo(ip: string, port: number): Promise<string>;
+/**
+ * 发送聊天消息到服务器
+ */
+export declare function sendChatToServer(ip: string, port: number, message: string, context: ChatContext | null, history: ChatMessage[], handlers: StreamHandlers, signal?: AbortSignal, sessionId?: string | null): Promise<void>;

package/types/client/index.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
+import { ChatMessage, ChatContext, ToolCall } from './ai';
 interface Position {
     left?: string;
     right?: string;
@@ -42,12 +43,14 @@ export declare class CodeInspectorComponent extends LitElement {
     autoToggle: boolean;
     hideConsole: boolean;
     locate: boolean;
-    copy: boolean | string;
+    copy: boolean | undefined | string;
     target: string;
     targetNode: HTMLElement | null;
     ip: string;
+    ai: boolean;
     private wheelThrottling;
     modeKey: string;
+    defaultAction: string;
     position: {
         top: number;
         right: number;
@@ -101,6 +104,28 @@ export declare class CodeInspectorComponent extends LitElement {
     internalLocate: boolean;
     internalCopy: boolean;
     internalTarget: boolean;
+    internalAI: boolean;
+    showChatModal: boolean;
+    chatMessages: ChatMessage[];
+    chatInput: string;
+    chatLoading: boolean;
+    chatContext: ChatContext | null;
+    currentTools: Map<string, ToolCall>;
+    chatSessionId: string | null;
+    chatTheme: 'light' | 'dark';
+    turnStatus: 'idle' | 'running' | 'done' | 'interrupt';
+    turnDuration: number;
+    chatModel: string;
+    private chatAbortController;
+    private turnTimerInterval;
+    private turnStartTime;
+    isDragging: boolean;
+    private dragStartX;
+    private dragStartY;
+    private modalStartX;
+    private modalStartY;
+    private wasDragging;
+    private chatPositionCleanup;
     inspectorSwitchRef: HTMLDivElement;
     codeInspectorContainerRef: HTMLDivElement;
     elementInfoRef: HTMLDivElement;
@@ -112,7 +137,12 @@ export declare class CodeInspectorComponent extends LitElement {
         description: string;
         checked: () => boolean;
         onChange: () => void;
+        action: string;
+        fn: () => void;
+        key: number;
+        available: () => boolean;
     }[];
+    private eventListeners;
     isTracking: (e: any) => boolean | "";
     getDomPropertyValue: (target: HTMLElement, property: string) => number;
     calculateElementInfoPosition: (target: HTMLElement) => Promise<{
@@ -146,6 +176,10 @@ export declare class CodeInspectorComponent extends LitElement {
     sendXHR: () => void;
     sendImg: () => void;
     buildTargetUrl: () => string;
+    locateCode: () => void;
+    copyCode: () => void;
+    targetCode: () => void;
+    dispatchCustomEvent: (action: 'locate' | 'copy' | 'target' | 'chat' | string) => void;
     trackCode: () => void;
     private handleModeShortcut;
     showNotification(message: string, type?: 'success' | 'error'): void;
@@ -177,13 +211,39 @@ export declare class CodeInspectorComponent extends LitElement {
     handleMouseLeaveNode: () => void;
     toggleSettingsModal: () => void;
     closeSettingsModal: () => void;
+    private clearAllActions;
     toggleLocate: () => void;
     toggleCopy: () => void;
     toggleTarget: () => void;
+    toggleAICode: () => void;
+    openChatModal: () => void;
+    closeChatModal: () => void;
+    clearChatMessages: () => void;
+    toggleTheme: () => void;
+    handleChatInput: (e: Event) => void;
+    handleChatKeyDown: (e: KeyboardEvent) => void;
+    private scrollPending;
+    private scrollChatToBottom;
+    private startTurnTimer;
+    private stopTurnTimer;
+    interruptChat: () => void;
+    handleChatDragStart: (e: MouseEvent) => void;
+    handleChatDragMove: (e: MouseEvent) => void;
+    handleChatDragEnd: () => void;
+    handleOverlayClick: () => void;
+    sendChatMessage: () => Promise<void>;
+    /**
+     * Attach all event listeners
+     */
+    private attachEventListeners;
+    /**
+     * Detach all event listeners
+     */
+    private detachEventListeners;
     protected firstUpdated(): void;
     disconnectedCallback(): void;
     renderNodeTree: (node: TreeNode) => TemplateResult;
     render(): TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 export {};

package/types/server/ai-provider-claude.d.ts

@@ -0,0 +1,19 @@
+import type { AIOptions } from '../shared';
+import type { AIContext, AIMessage } from './ai';
+export interface ProviderCallbacks {
+    sendSSE: (data: object | string) => void;
+    onEnd: () => void;
+}
+export interface ProviderResult {
+    abort: () => void;
+}
+/**
+ * 获取模型信息
+ * 优先使用用户配置，否则通过 CLI 的 system 事件获取（无 API 消耗）
+ */
+export declare function getModelInfo(aiOptions: AIOptions | undefined): Promise<string>;
+/**
+ * Claude provider 统一入口
+ * ai.ts 只需调用此函数，不感知 CLI/SDK 细节
+ */
+export declare function handleClaudeRequest(message: string, context: AIContext | null, history: AIMessage[], sessionId: string | undefined, cwd: string, aiOptions: AIOptions | undefined, callbacks: ProviderCallbacks): ProviderResult;

package/types/server/ai.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="node" />
+/**
+ * AI 功能模块 - 处理与 AI Agent 的交互
+ * 通过 provider 模式支持不同的 AI 后端
+ */
+import http from 'http';
+import type { AIOptions } from '../shared';
+/**
+ * AI 上下文信息
+ */
+export interface AIContext {
+    file: string;
+    line: number;
+    column: number;
+    name: string;
+}
+/**
+ * AI 消息
+ */
+export interface AIMessage {
+    role: 'user' | 'assistant';
+    content: string;
+}
+/**
+ * AI 请求体
+ */
+export interface AIRequest {
+    message: string;
+    context: AIContext;
+    history: AIMessage[];
+    sessionId?: string;
+}
+/**
+ * 从 behavior 配置中提取 AI 选项
+ */
+export declare function getAIOptions(behavior?: {
+    ai?: {
+        claudeCode?: boolean | AIOptions;
+    };
+}): AIOptions | undefined;
+/**
+ * 处理 AI 请求
+ */
+export declare function handleAIRequest(req: http.IncomingMessage, res: http.ServerResponse, corsHeaders: Record<string, string>, aiOptions: AIOptions | undefined, projectRootPath: string): Promise<void>;
+/**
+ * 处理 AI 模型信息请求
+ */
+export declare function handleAIModelRequest(res: http.ServerResponse, corsHeaders: Record<string, string>, aiOptions: AIOptions | undefined): Promise<void>;

package/types/server/server.d.ts

@@ -1,8 +1,25 @@
 /// <reference types="node" />
+/**
+ * 本地服务器模块 - 处理 IDE 打开和 AI 请求
+ */
 import http from 'http';
-import type { PathType, CodeOptions, RecordInfo } from '../shared';
+import type { CodeOptions, RecordInfo } from '../shared';
+export declare function getEnvVars(): Record<string, string>;
+/** 项目根目录 */
 export declare const ProjectRootPath: string;
+/**
+ * 获取相对路径
+ */
 export declare function getRelativePath(filePath: string): string;
-export declare function getRelativeOrAbsolutePath(filePath: string, pathType?: PathType): string;
-export declare function createServer(callback: (port: number) => any, options?: CodeOptions, record?: RecordInfo): http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
+/**
+ * 根据用户配置返回绝对路径或者相对路径
+ */
+export declare function getRelativeOrAbsolutePath(filePath: string, pathType?: 'relative' | 'absolute'): string;
+/**
+ * 创建 HTTP 服务器
+ */
+export declare function createServer(callback: (port: number) => void, options?: CodeOptions, record?: RecordInfo): http.Server;
+/**
+ * 启动服务器
+ */
 export declare function startServer(options: CodeOptions, record: RecordInfo): Promise<void>;

package/types/server/transform/transform-vue-pug.d.ts

@@ -0,0 +1,29 @@
+import MagicString from 'magic-string';
+import { EscapeTags } from '../../shared';
+import type { ElementNode } from '@vue/compiler-dom';
+export interface PugFileInfo {
+    content: string;
+    offsets: number[];
+}
+export declare const pugMap: Map<string, PugFileInfo>;
+/**
+ * Check if a template node uses Pug syntax
+ * @param templateNode - The template element node to check
+ * @returns true if the template uses Pug, false otherwise
+ */
+export declare function isPugTemplate(templateNode: ElementNode | undefined): boolean;
+/**
+ * Calculate line offsets for content
+ * @param content - The file content
+ * @returns Array of line offsets
+ */
+export declare function calculateLineOffsets(content: string): number[];
+/**
+ * Transform Pug template in Vue SFC
+ * @param content - The file content
+ * @param filePath - The file path
+ * @param templateNode - The template element node
+ * @param escapeTags - Tags to escape from transformation
+ * @param s - MagicString instance for code transformation
+ */
+export declare function transformPugTemplate(content: string, filePath: string, templateNode: ElementNode, escapeTags: EscapeTags, s: MagicString): void;

package/types/shared/browser-chalk.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 浏览器环境 console 彩色输出工具
+ *
+ * 使用方式类似 chalk，基于浏览器 console 的 %c 机制实现：
+ * @example
+ * ```ts
+ * // 单行输出
+ * browserChalk.blue('[plugin]').green(' ready').log();
+ *
+ * // 多行输出
+ * browserChalk
+ *   .blue('[plugin]')
+ *   .line()
+ *   .green('• line1')
+ *   .line()
+ *   .yellow('• line2')
+ *   .log();
+ * ```
+ */
+interface ChainResult {
+    text: string;
+    styles: string[];
+}
+export declare class BrowserChalkChain {
+    private parts;
+    push(text: string, style: string): this;
+    /** 换行 */
+    line(): this;
+    /** 合并另一个 chain 的内容 */
+    merge(other: BrowserChalkChain): this;
+    /** 构建最终的 text 和 styles 数组 */
+    build(): ChainResult;
+    /** 直接 console.log 输出 */
+    log(): void;
+    /** 直接 console.warn 输出 */
+    warn(): void;
+    /** 直接 console.error 输出 */
+    error(): void;
+    /** console.groupCollapsed 输出，label 为当前 chain 内容，fn 中输出 group 内容 */
+    groupCollapsed(fn: () => void): void;
+    group(fn: () => void): void;
+    blue(t: string): this;
+    green(t: string): this;
+    yellow(t: string): this;
+    red(t: string): this;
+    gray(t: string): this;
+    text(t: string): this;
+    styled(t: string, css: string): this;
+    /** 无参数：给上一个 part 追加 bold；有参数：输出纯 bold 文本 */
+    bold(t?: string): this;
+    style(style: string): this;
+}
+type ChalkFactory = {
+    [K in 'blue' | 'green' | 'yellow' | 'red' | 'gray' | 'text']: (t: string) => BrowserChalkChain;
+} & {
+    bold: (t?: string) => BrowserChalkChain;
+    styled: (t: string, css: string) => BrowserChalkChain;
+};
+export declare const browserChalk: ChalkFactory;
+export {};

package/types/shared/type.d.ts

@@ -2,11 +2,57 @@
 import { Server } from 'http';
 import type { Editor } from 'launch-ide';
 export type HotKey = 'ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey';
+export type AIOptions = {
+    /**
+     * @zh 指定使用的 Agent 类型。'cli' 使用本地 Claude Code CLI，'sdk' 使用 Claude Agent SDK。默认为 'cli'
+     * @en Specify the agent type to use. 'cli' uses local Claude Code CLI, 'sdk' uses Claude Agent SDK. Defaults to 'cli'
+     */
+    agent?: 'cli' | 'sdk';
+    /**
+     * @zh SDK 选项，参数格式继承 @anthropic-ai/claude-agent-sdk 官方 SDK 的 Options 类型
+     * @en SDK options, parameter format follows the official @anthropic-ai/claude-agent-sdk Options type
+     * @see https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk
+     */
+    sdkOptions?: {
+        /** 允许自动执行的工具列表 */
+        allowedTools?: string[];
+        /** 禁止的工具列表 */
+        disallowedTools?: string[];
+        /** 使用的模型 */
+        model?: string;
+        /** 最大执行轮数，默认为 20 */
+        maxTurns?: number;
+        /**
+         * 权限模式。默认为 'bypassPermissions'
+         * - 'default' 需要用户确认
+         * - 'acceptEdits' 自动接受编辑
+         * - 'bypassPermissions' 绕过所有权限检查
+         */
+        permissionMode?: 'default' | 'acceptEdits' | 'bypassPermissions';
+        /** 系统提示 */
+        systemPrompt?: string | {
+            type: 'preset';
+            preset: 'claude_code';
+            append?: string;
+        };
+        /** 环境变量，传递给 Claude Code 进程。默认为 process.env */
+        env?: Record<string, string | undefined>;
+        /** MCP 服务器配置 */
+        mcpServers?: Record<string, any>;
+        /** 最大思考 token 数 */
+        maxThinkingTokens?: number;
+        /** 最大预算（美元） */
+        maxBudgetUsd?: number;
+    };
+};
 export type Behavior = {
     locate?: boolean;
     copy?: boolean | string;
     target?: string;
-    defaultAction?: 'copy' | 'locate' | 'target' | 'all';
+    ai?: {
+        claudeCode?: boolean | AIOptions;
+    };
+    defaultAction?: 'copy' | 'locate' | 'target' | 'ai';
 };
 export type RecordInfo = {
     port: number;

package/types/shared/utils.d.ts

@@ -6,14 +6,133 @@ export declare function getFilePathWithoutExt(filePath: string): string;
 export declare function normalizePath(filepath: string): string;
 export declare function isEscapeTags(escapeTags: EscapeTags, tag: string): boolean;
 export declare function getDependenciesMap(): any;
-export declare function getDenpendencies(): string[];
+export declare function getDependencies(): string[];
 type BooleanFunction = () => boolean;
+/**
+ * Determine if the current environment is development mode
+ *
+ * Priority: user-specified environment > system default environment
+ *
+ * @param userDev - User-specified development mode setting:
+ *   - `true`: Force development mode
+ *   - `false`: Force production mode
+ *   - `function`: Dynamic function that returns boolean
+ *   - `undefined`: Use system default
+ * @param systemDev - System default development mode (e.g., from NODE_ENV)
+ * @returns `true` if in development mode, `false` otherwise
+ *
+ * @example
+ * ```typescript
+ * // Force development mode
+ * isDev(true, false) // Returns: true
+ *
+ * // Force production mode
+ * isDev(false, true) // Returns: false
+ *
+ * // Use system default
+ * isDev(undefined, true) // Returns: true
+ *
+ * // Dynamic function
+ * isDev(() => process.env.NODE_ENV === 'development', false)
+ * ```
+ */
 export declare function isDev(userDev: boolean | BooleanFunction | undefined, systemDev: boolean): boolean;
+/**
+ * Check if a file matches the given condition
+ *
+ * Supports multiple condition types for flexible file matching:
+ * - String: Checks if file path contains the string
+ * - RegExp: Tests file path against the regular expression
+ * - Array: Recursively checks if file matches any condition in the array
+ *
+ * @param condition - The condition to match against:
+ *   - `string`: File path must contain this string
+ *   - `RegExp`: File path must match this pattern
+ *   - `Array`: File path must match at least one condition
+ * @param file - The file path to check
+ * @returns `true` if the file matches the condition, `false` otherwise
+ *
+ * @example
+ * ```typescript
+ * // String matching
+ * matchCondition('node_modules', '/path/to/node_modules/pkg') // Returns: true
+ *
+ * // RegExp matching
+ * matchCondition(/\.test\.ts$/, 'file.test.ts') // Returns: true
+ *
+ * // Array matching (OR logic)
+ * matchCondition(['src', /\.tsx$/], 'src/App.tsx') // Returns: true
+ * ```
+ */
 export declare function matchCondition(condition: Condition, file: string): boolean;
+/**
+ * Get the mapped file path based on the provided mappings configuration
+ *
+ * This function resolves file paths by applying mapping rules, which is useful for:
+ * - Resolving module aliases (e.g., '@/components' -> 'src/components')
+ * - Mapping node_modules paths to local source paths
+ * - Handling monorepo package paths
+ *
+ * @param file - The original file path to map
+ * @param mappings - Path mapping configuration, can be either:
+ *   - Object: `{ '@/': 'src/', '~': 'node_modules/' }`
+ *   - Array: `[{ find: '@/', replacement: 'src/' }, { find: /^~/, replacement: 'node_modules/' }]`
+ * @returns The mapped file path if a mapping is found and the file exists, otherwise returns the original path
+ *
+ * @example
+ * ```typescript
+ * // Object mapping
+ * getMappingFilePath('@/components/Button.tsx', { '@/': 'src/' })
+ * // Returns: 'src/components/Button.tsx' (if file exists)
+ *
+ * // Array mapping with RegExp
+ * getMappingFilePath('~/lodash/index.js', [
+ *   { find: /^~/, replacement: 'node_modules/' }
+ * ])
+ * // Returns: 'node_modules/lodash/index.js' (if file exists)
+ * ```
+ */
 export declare function getMappingFilePath(file: string, mappings?: Record<string, string> | Array<{
     find: string | RegExp;
     replacement: string;
 }>): string;
+/**
+ * Check if a file should be excluded from processing
+ *
+ * Determines if a file should be excluded based on exclude/include patterns.
+ * Files in node_modules are always excluded unless explicitly included.
+ *
+ * Logic:
+ * - If file matches exclude pattern AND NOT in include pattern → excluded
+ * - If file matches include pattern → NOT excluded (even if in node_modules)
+ * - node_modules is always in the exclude list by default
+ *
+ * @param file - The file path to check
+ * @param options - Code inspector options containing exclude/include patterns
+ * @returns `true` if the file should be excluded, `false` otherwise
+ *
+ * @example
+ * ```typescript
+ * const options = {
+ *   exclude: [/\.test\.ts$/, 'dist'],
+ *   include: ['src']
+ * };
+ *
+ * isExcludedFile('src/App.test.ts', options) // Returns: true (matches exclude)
+ * isExcludedFile('node_modules/pkg/index.js', options) // Returns: true (node_modules)
+ * isExcludedFile('src/index.ts', options) // Returns: false (in include)
+ * ```
+ */
 export declare function isExcludedFile(file: string, options: CodeOptions): boolean;
 export declare function hasWritePermission(filePath: string): boolean;
+/**
+ * Check if a file should be ignored based on special directives in comments
+ * @param content - The file content to check
+ * @param fileType - The type of file ('vue', 'jsx', 'svelte', or unknown)
+ * @returns true if the file should be ignored, false otherwise
+ */
+export declare function isIgnoredFile({ content, fileType, }: {
+    content: string;
+    fileType: 'vue' | 'jsx' | 'svelte' | unknown;
+}): boolean;
 export {};