@aiti-ai/aiti-devtools-webpack 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 aiti-ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,39 @@
-# Temporary Holding Version
+# @aiti-ai/aiti-devtools-webpack
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> webpack-dev-server 载体插件：setupMiddlewares 挂桥 + html-webpack-plugin 注入；Rspack 同格式零改动直接复用。
+
+## 来源 · Origin
+
+本包是 **aiti** 生态的组成部分——以 [pi](https://pi.dev) 为引擎的个人 AI 开发工作台与本地调试注入生态：**aiti-agent**（自托管 Web 工作台，基于开源项目 [pi-web](https://github.com/aiti-ai/pi-web) 构建，浏览器为主操作面）+ 各开发工具内的调试注入（aiti-devtools）+ 丰富的扩展体系。
+
+This package is part of the **aiti** ecosystem — a personal AI development workbench powered by [pi](https://pi.dev): **aiti-agent** (a self-hosted web workbench built on the open-source [pi-web](https://github.com/aiti-ai/pi-web)) plus debug injection into mainstream dev tools (aiti-devtools) and a rich extension system.
+
+- 工作台 / workbench: <https://github.com/aiti-ai/pi-web>
+- 生态仓库 / monorepo: <https://github.com/aiti-ai/aiti-ai>
+- 官网 / site: <https://aiti.pw>
+
+## 功能定位（中文）
+
+webpack-dev-server 载体插件：setupMiddlewares 挂桥 + html-webpack-plugin 注入；Rspack 同格式零改动直接复用。
+
+## Positioning (English)
+
+webpack-dev-server carrier plugin: bridge via setupMiddlewares + html-webpack-plugin injection; Rspack reuses it unchanged.
+
+## 安装 / 部署
+
+```bash
+npm install -D @aiti-ai/aiti-devtools-webpack
+```
+
+不同载体的接线方式见文档（多数一行接入）。
+
+## 文档 · Documentation
+
+- 中文完整文档（aiti-docs）: <https://aiti.pw/devtools/integrations/webpack-rspack.html>
+- English docs: <https://aiti.pw/en/devtools/integrations/webpack-rspack.html>
+- 扩展注册表 / registry: <https://aiti.pw/extensions.html> · machine-readable <https://aiti.pw/extensions.json>
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@aiti-ai/aiti-devtools-webpack",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "aiti-devtools webpack-dev-server 插件（载体 2）：dev server 内置 MCP（launcher 注入 + 桥 + MCP 端点 + 操作台，同源 /aiti/），启动自动注册到常见 agent 工具。复用 aiti-devtools-core 全部公共能力",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@aiti-ai/aiti-devtools-core": "^0.3.5"
+  },
+  "peerDependencies": {
+    "webpack": "^5.0.0",
+    "webpack-dev-server": "^4.0.0 || ^5.0.0",
+    "html-webpack-plugin": "^5.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aiti-ai/aiti-ai.git",
+    "directory": "packages/aiti-devtools-webpack"
+  },
+  "homepage": "https://github.com/aiti-ai/aiti-ai#readme",
+  "bugs": {
+    "url": "https://github.com/aiti-ai/aiti-ai/issues"
+  },
+  "contentHash": "d1f622a04ca1e4ad"
+}

package/src/index.js

@@ -0,0 +1,113 @@
+/**
+ * aiti-devtools-webpack —— webpack-dev-server 插件（载体 2）
+ *
+ * 与 aiti-devtools-vite 同能力、薄载体层：
+ *   - devServer.setupMiddlewares 挂 connectBridge（复用 core 的 connect 中间件适配，webpack-dev-server 中间件格式兼容）
+ *   - html-webpack-plugin 注入 <script src="/aiti/aiti-launcher.js" data-ai-url data-bridge-url>
+ *   - 端口就绪后解析端点 + 自动注册 MCP + 打印启动输出
+ *
+ * 资产/桥/注册/协商全部来自 @aiti-ai/aiti-devtools-core（loadAssets / createBridge / registerMcp / resolveEndpoints）。
+ */
+import { createRequire } from 'node:module';
+import { join, resolve } from 'node:path';
+import { homedir } from 'node:os';
+import { createBridge, connectBridge, resolveEndpoints, registerMcp, loadAssets } from '@aiti-ai/aiti-devtools-core';
+
+const require = createRequire(import.meta.url);
+
+export class AitiDevtoolsWebpackPlugin {
+  constructor(opts = {}) {
+    this.opts = opts;
+    this.prefix = (opts.prefix || '/aiti').replace(/\/+$/, '') || '/aiti';
+    this.name = opts.name || 'aiti-devtools';
+    this.log = opts.log || ((l) => console.log(l));
+    this.staticFiles = loadAssets(opts.assetsDir);
+    this.bridge = createBridge(opts.dataDir || join(homedir(), '.pi', 'aiti-bridge'), { name: this.name });
+  }
+
+  apply(compiler) {
+    const opts = this.opts;
+
+    // ---- 1. dev server 中间件 + 端口就绪后注册 MCP ----
+    compiler.options.devServer = compiler.options.devServer || {};
+    const origSetup = compiler.options.devServer.setupMiddlewares;
+    compiler.options.devServer.setupMiddlewares = (middlewares, devServer) => {
+      middlewares.unshift(connectBridge(this.bridge, { prefix: this.prefix, staticFiles: this.staticFiles }));
+      const server = devServer && devServer.server;
+      const registerOnce = () => {
+        try {
+          const addr = server.address && server.address();
+          const port = (addr && typeof addr === 'object' && addr.port) || devServer.options?.port || 8080;
+          const host = (devServer.options?.host && devServer.options.host !== '0.0.0.0' && devServer.options.host) || 'localhost';
+          const e = resolveEndpoints({ bridgeUrl: opts.bridgeUrl, aiUrl: opts.aiUrl, serverUrl: `http://${host}:${port}`, prefix: this.prefix });
+          this.printBanner(e, host, port);
+          this.doRegisterMcp(e, compiler.context || process.cwd());
+        } catch (err) {
+          this.log(`[${this.name}] ⚠ 启动后处理失败：${err.message}`);
+        }
+      };
+      if (server && typeof server.once === 'function') server.once('listening', registerOnce);
+      else registerOnce();
+      return origSetup ? origSetup(middlewares, devServer) : middlewares;
+    };
+
+    // ---- 2. HTML 注入（html-webpack-plugin）——仅 dev（webpack build 生产产物不注入）----
+    if (opts.inject === false) return;
+    const isDev = !!compiler.options.devServer && compiler.options.mode !== 'production';
+    if (!isDev) return;
+    // html-webpack-plugin 装在使用方项目：从 compiler.context 解析（插件源码位置解析不到）
+    const userRequire = createRequire(join(compiler.context || process.cwd(), 'package.json'));
+    compiler.hooks.compilation.tap('@aiti-ai/aiti-devtools-webpack', (compilation) => {
+      let HtmlWebpackPlugin = null;
+      try { HtmlWebpackPlugin = userRequire('html-webpack-plugin'); } catch {}
+      if (!HtmlWebpackPlugin || !HtmlWebpackPlugin.getHooks) return;
+      const hooks = HtmlWebpackPlugin.getHooks(compilation);
+      hooks.alterAssetTagGroups.tapAsync('@aiti-ai/aiti-devtools-webpack', (data, cb) => {
+        // dev 模式端口未知 → 相对路径（同源 /aiti/）；bridge/aiUrl 同源相对，用户自定义则绝对
+        const bridgeBase = opts.bridgeUrl ? resolveEndpoints({ bridgeUrl: opts.bridgeUrl, aiUrl: '', serverUrl: 'http://localhost', prefix: this.prefix }).bridgeBase : this.prefix;
+        const aiUrl = opts.aiUrl || `${this.prefix}/cockpit.html`;
+        data.headTags.unshift({
+          tagName: 'script',
+          closeTag: true,
+          attributes: {
+            src: `${this.prefix}/aiti-launcher.js`,
+            'data-ai-url': aiUrl,
+            'data-bridge-url': bridgeBase,
+            'data-name': this.name,
+          },
+        });
+        cb(null, data);
+      });
+    });
+  }
+
+  printBanner(e, host, port) {
+    const kindLabel = e.kind === 'same-origin' ? '同源模式' : '外部桥模式';
+    this.log('');
+    this.log(`[${this.name}] 🧰 ${this.name}-webpack 已启动（${kindLabel} · name=${this.name} · ${host}:${port}）`);
+    this.log(`  launcher:  ${e.launcherUrl}`);
+    this.log(`  操作台:    ${e.cockpitUrl}`);
+    this.log(`  MCP:       ${e.mcpUrl}   ← agent 的 mcp 配置 url 指这里`);
+    this.log(`  bridge:    ${e.bridgeBase}`);
+    this.log(`  AI 窗:     ${e.aiUrl}${this.opts.aiUrl ? '（aiti-agent）' : '（同源 cockpit，可用 aiUrl 指定 aiti-agent）'}`);
+    for (const n of e.notes) this.log(`  · ${n}`);
+  }
+
+  doRegisterMcp(e, projectDir) {
+    const m = this.opts.mcp || {};
+    if (m.register === false || m.targets === false) return;
+    const r = registerMcp({
+      url: e.mcpUrl,
+      serverName: this.name,
+      targets: m.targets === false ? undefined : (m.targets || 'auto'),
+      configPaths: m.configPaths || [],
+      projectDir,
+      dryRun: !!m.dryRun,
+      log: this.log,
+    });
+    this.log(`[${this.name}] MCP 注册：${r.summary}`);
+    if (r.ok && !r.changed) this.log(`[${this.name}]    （全部已是最新，未写盘）`);
+  }
+}
+
+export default AitiDevtoolsWebpackPlugin;