pi-web-ui 0.35.0 → 0.36.0

package/dist/server/plugins.js

@@ -24,7 +24,6 @@ import { pathToFileURL } from "node:url";
 const ID_RE = /^[A-Za-z0-9_-]+$/;
 export class PluginManager {
     dataDir;
-    cwd;
     loaded = new Map();
     /** 已 import 过但无入口/失败的目录——避免重复 import 与重复报错。 */
     attempted = new Set();
@@ -36,9 +35,29 @@ export class PluginManager {
     onAgentToolsChanged = undefined;
     /** 服务端重载纪元：每次 reload() +1，前端用作 import 缓存击穿参数。 */
     epochCounter = 0;
+    /** 当前全局工作区（host.cwd 的背后存储）——随 notifyCwd 更新。 */
+    cwdValue;
     constructor(dataDir, cwd) {
         this.dataDir = dataDir;
-        this.cwd = cwd;
+        this.cwdValue = resolve(cwd);
+    }
+    /** index.ts 在客户端 set_cwd 成功后调用：更新全局工作区并扇出给
+     *  所有已激活插件的 onCwdChange 钩子（异常隔离，不炸主进程）。 */
+    notifyCwd(next) {
+        const abs = resolve(next);
+        if (abs === this.cwdValue)
+            return; // 幂等：重复通知/同路径 no-op
+        this.cwdValue = abs;
+        for (const [id, p] of this.loaded) {
+            for (const h of p.cwdHandlers) {
+                try {
+                    h(abs);
+                }
+                catch (err) {
+                    console.error(`[plugin:${id}] cwd-change handler failed:`, err);
+                }
+            }
+        }
     }
     get pluginsDir() {
         return join(this.dataDir, "plugins");
@@ -286,6 +305,19 @@ export class PluginManager {
                     icon: typeof m.icon === "string" && m.icon.trim() ? m.icon.trim() : undefined,
                     hasClient: existsSync(join(dir, "client", "entry.mjs")),
                     error: this.loaded.get(name)?.info.error,
+                    // 安装来源（pi-web-ui install 写入的 .pi-source.json）——
+                    // 设置面板据此显示「更新」按钮；手工拷入的插件没有此文件。
+                    source: await readFile(join(dir, ".pi-source.json"), "utf8")
+                        .then((raw) => {
+                        try {
+                            const s = JSON.parse(raw);
+                            return typeof s.source === "string" && s.source ? s.source : undefined;
+                        }
+                        catch {
+                            return undefined;
+                        }
+                    })
+                        .catch(() => undefined),
                 });
             }
             catch {
@@ -301,8 +333,10 @@ export class PluginManager {
         this.messageHandlers.set(info.id, handlers);
         const toolHandlers = new Set();
         const attachHandlers = new Set();
+        const cwdHandlers = new Set();
         const unregisterTools = [];
-        const p = { info, toolHandlers, attachHandlers };
+        const p = { info, toolHandlers, attachHandlers, cwdHandlers };
+        const self = this; // 对象字面量 getter 里不能用插件宿主的 this
         const host = {
             broadcast: (payload) => this.broadcast(info.id, payload),
             notify: (level, text) => this.notifyAll(level, text),
@@ -319,6 +353,10 @@ export class PluginManager {
                 attachHandlers.add(h);
                 return () => attachHandlers.delete(h);
             },
+            onCwdChange: (h) => {
+                cwdHandlers.add(h);
+                return () => cwdHandlers.delete(h);
+            },
             // 包一层：插件反激活时自动注销它注册的全部 AI 工具，不留悬挂项。
             registerAgentTool: (tool) => {
                 const off = this.registerAgentTool(info.id, tool);
@@ -332,7 +370,9 @@ export class PluginManager {
             },
             dir,
             dataDir: this.dataDir,
-            cwd: this.cwd,
+            get cwd() {
+                return self.cwdValue;
+            },
             log: (...args) => console.log(`[plugin:${info.id}]`, ...args),
         };
         try {
@@ -345,6 +385,7 @@ export class PluginManager {
                 deactivate: typeof ret === "function" ? ret : undefined,
                 toolHandlers,
                 attachHandlers,
+                cwdHandlers,
                 agentToolUnsubscribers: unregisterTools,
             });
             console.log(`[plugin:${info.id}] activated (v${info.version ?? "?"})`);
@@ -354,6 +395,7 @@ export class PluginManager {
                 info: { ...info, error: err.message },
                 toolHandlers,
                 attachHandlers,
+                cwdHandlers,
             });
             console.error(`[plugin:${info.id}] activate failed:`, err);
         }

package/dist/server/protocol-version.js

@@ -8,4 +8,4 @@
  * its own copy in web/src/protocol-version.ts; scripts/check-protocol-sync.mjs
  * verifies the two never drift.
  */
-export const PROTOCOL_VERSION = 7;
+export const PROTOCOL_VERSION = 9;

package/dist/server/terminals.js

@@ -1230,11 +1230,11 @@ export const TERMINAL_TOOL_NAMES = [
 /** System-prompt guidance teaching the model WHEN to prefer the terminal tools
  *  over one-shot bash. Without it models almost never pick them — bash returns
  *  complete output in a single call, so it always wins on convenience. */
-export const TERMINAL_TOOLS_GUIDANCE = `Persistent interactive terminal tools are available (terminal_create / terminal_list / terminal_close / terminal_input / terminal_key / terminal_read / terminal_wait). The one-shot bash tool stays the DEFAULT for ordinary commands - it runs once and returns the full output. Switch to the terminal tools only when:
-- The program is interactive or TUI-based (REPLs like python/node, vim/htop, installers asking y/n, anything waiting on stdin).
-- You start a long-running server or watcher and want to keep watching its output (terminal_read with waitMs), send keys to it later (e.g. interrupt via terminal_key with Ctrl+c), or block until a backgrounded command finishes without polling (terminal_wait).
-- The user explicitly asks you to work in the visible terminal panel.
-Liveness watchdog: terminals you touched (create/input/key) are monitored - if one goes silent with no new output while you are working (default 15s), an automatic system reminder is injected into the conversation. Treat it as a prompt to check that terminal (terminal_read), respond to an input prompt (terminal_input / terminal_key), or close it (terminal_close) if it is no longer needed.
+export const TERMINAL_TOOLS_GUIDANCE = `Persistent interactive terminal tools are available (terminal_create / terminal_list / terminal_close / terminal_input / terminal_key / terminal_read / terminal_wait). The one-shot bash tool stays the DEFAULT for ordinary commands - it runs once and returns the full output. Switch to the terminal tools only when:
+- The program is interactive or TUI-based (REPLs like python/node, vim/htop, installers asking y/n, anything waiting on stdin).
+- You start a long-running server or watcher and want to keep watching its output (terminal_read with waitMs), send keys to it later (e.g. interrupt via terminal_key with Ctrl+c), or block until a backgrounded command finishes without polling (terminal_wait).
+- The user explicitly asks you to work in the visible terminal panel.
+Liveness watchdog: terminals you touched (create/input/key) are monitored - if one goes silent with no new output while you are working (default 15s), an automatic system reminder is injected into the conversation. Treat it as a prompt to check that terminal (terminal_read), respond to an input prompt (terminal_input / terminal_key), or close it (terminal_close) if it is no longer needed.
 Do NOT use them for simple one-shot commands; bash remains cheaper and simpler there.`;
 /** Build the agent-facing persistent terminal tools for one conversation. */
 export function makePersistentTerminalTools(terminals, cwd) {

package/extensions/webui.ts

@@ -1,192 +1,192 @@
-/**
- * pi-web-ui 的 pi 扩展 —— 提供命令行集成。
- *
- * 能力：
- *   /webui                      启动本机 pi-web-ui 服务器，打开浏览器访问
- *   /webui --port 9000          指定端口启动
- *   /webui --no-browser         启动但不开浏览器
- *   /webui stop                 停止已启动的服务器
- *   /webui status               查看运行状态 / URL
- *
- * 实现说明：
- *   - 不依赖全局 bin（pi install 后 pi-web-ui 命令不一定在 PATH），直接用
- *     node 调包内 dist/server/index.js，通过环境变量 PORT / PI_WEB_CWD /
- *     PI_WEB_DATA_DIR 控制。
- *   - 工作目录默认用当前 pi 会话的 ctx.cwd；可用 --cwd / path 覆盖。
- *   - 服务器作为子进程后台运行，/webui 不阻塞 pi。
- *   - 每个 pi 会话管理一个子进程；session_shutdown 时清理，避免孤儿进程。
- */
-
-import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import net from "node:net";
-import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-
-// 本文件位于 <pkg>/extensions/webui.ts → 包根在上一级
-const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-const SERVER_ENTRY = join(PKG_ROOT, "dist", "server", "index.js");
-const NODE = process.execPath;
-
-/** 每个会话的服务器子进程 + 元数据 */
-interface RunningServer {
-	proc: ReturnType<typeof spawn>;
-	port: number;
-	cwd: string;
-	url: string;
-}
-
-// 会话 → 运行实例（模块级 Map；每会话一个会话对象，无需清理全局）
-const running = new Map<string, RunningServer>();
-
-/** 找一个空闲端口 */
-function findFreePort(from = 8787): Promise<number> {
-	return new Promise((resolve_, reject) => {
-		const srv = net.createServer();
-		srv.listen(from, () => {
-			const port = (srv.address() as net.AddressInfo).port;
-			srv.close(() => resolve_(port));
-		});
-		srv.on("error", () => {
-			// 端口被占则顺延
-			findFreePort(from + 1).then(resolve_, reject);
-		});
-	});
-}
-
-/** 解析 --key value / --flag 参数 */
-function parseArgs(args: string): { port?: number; cwd?: string; noBrowser: boolean } {
-	const out: { port?: number; cwd?: string; noBrowser: boolean } = { noBrowser: false };
-	const toks = args.split(/\s+/).filter(Boolean);
-	for (let i = 0; i < toks.length; i++) {
-		const t = toks[i];
-		if ((t === "--port" || t === "-p") && toks[i + 1]) {
-			const n = Number(toks[++i]);
-			if (Number.isInteger(n) && n > 0 && n < 65536) out.port = n;
-		} else if ((t === "--cwd") && toks[i + 1]) {
-			out.cwd = resolve(toks[++i]);
-		} else if (t === "--no-browser") {
-			out.noBrowser = true;
-		}
-	}
-	return out;
-}
-
-/** 打开浏览器 */
-async function openBrowser(url: string): Promise<void> {
-	const { platform } = process;
-	const [cmd, ...rest] =
-		platform === "darwin"
-			? ["open", url]
-			: platform === "win32"
-				? ["cmd", "/c", "start", "", url]
-				: ["xdg-open", url];
-	// 无界面环境缺少 xdg-open 等打开器时，ENOENT 以异步 'error' 事件触发，
-	// try/catch 拦不住会崩掉整个进程 —— 必须挂 error 监听。
-	spawn(cmd, rest, { stdio: "ignore", detached: true })
-		.on("error", (err) => {
-			if ((err as NodeJS.ErrnoException)?.code === "ENOENT") {
-				console.warn(
-					`[webui] 未找到浏览器打开器 (${(err as NodeJS.ErrnoException).path || "command not found"})，请用 --no-browser 关闭自动打开`
-				);
-			} else {
-				console.warn("[webui] 打开浏览器失败:", err.message);
-			}
-		})
-		.unref();
-}
-
-export default function (pi: ExtensionAPI): void {
-	pi.registerCommand("webui", {
-		description: "启动本机 pi-web-ui Web 界面（/webui [--port N] [--cwd PATH] [--no-browser] | stop | status）",
-		handler: async (args: string, ctx: ExtensionCommandContext) => {
-			const sid = ctx.sessionManager.getSessionId();
-			const opts = parseArgs(args);
-			const action = (args.split(/\s+/)[0] || "start").toLowerCase();
-
-			// 停止
-			if (action === "stop" || action === "kill") {
-				const inst = running.get(sid);
-				if (!inst) {
-					ctx.ui.notify("没有正在运行的本机 pi-web-ui 服务器", "info");
-					return;
-				}
-				inst.proc.kill("SIGTERM");
-				running.delete(sid);
-				ctx.ui.notify(`已停止 pi-web-ui (${inst.url})`, "info");
-				return;
-			}
-
-			// 状态
-			if (action === "status") {
-				const inst = running.get(sid);
-				if (!inst) {
-					ctx.ui.notify("本机 pi-web-ui 未运行", "info");
-					return;
-				}
-				const alive = inst.proc.exitCode === null;
-				ctx.ui.notify(
-					alive ? `pi-web-ui 运行中 → ${inst.url}\n端口 ${inst.port} · cwd ${inst.cwd}` : `已退出(exit=${inst.proc.exitCode})`,
-					alive ? "info" : "warning",
-				);
-				return;
-			}
-
-			// 默认 start
-			if (action !== "start" && action !== "run") {
-				ctx.ui.notify(`未知动作 ${action}（可用 start|stop|status）`, "warning");
-				return;
-			}
-
-			// 已运行则提示
-			const existing = running.get(sid);
-			if (existing && existing.proc.exitCode === null) {
-				ctx.ui.notify(`pi-web-ui 已在运行 → ${existing.url}`, "info");
-				return;
-			}
-
-			// 检查是否已构建
-			if (!existsSync(SERVER_ENTRY)) {
-				ctx.ui.notify(
-					"缺少 dist/ 产物（当前安装未包含已构建前端）。请运行 `npm run build` 后重试，或用 pi-web-ui 官方 npm 包。",
-					"warning",
-				);
-				return;
-			}
-
-			const port = opts.port ?? (await findFreePort());
-			const cwd = opts.cwd ?? ctx.cwd;
-			const url = `http://localhost:${port}`;
-
-			const env = {
-				...process.env,
-				PORT: String(port),
-				PI_WEB_CWD: cwd,
-				...(process.env.PI_WEB_DATA_DIR ? {} : { PI_WEB_DATA_DIR: join(cwd, ".pi-web") }),
-			};
-			const proc = spawn(NODE, [SERVER_ENTRY], { cwd, env, stdio: "ignore", detached: true });
-			proc.unref();
-			running.set(sid, { proc, port, cwd, url });
-
-			ctx.ui.notify(`pi-web-ui 启动中 → ${url}\n端口 ${port} · cwd ${cwd}\n(几秒后可用，/webui status 查看)`);
-
-			if (!opts.noBrowser) await openBrowser(url);
-
-			// 进程退出时清理
-			proc.on("exit", () => {
-				if (running.get(sid)?.proc === proc) running.delete(sid);
-			});
-		},
-	});
-
-	// 会话结束清理子进程，避免孤儿
-	pi.on("session_shutdown", async (_event, ctx) => {
-		const sid = ctx.sessionManager.getSessionId();
-		const inst = running.get(sid);
-		if (inst && inst.proc.exitCode === null) {
-			inst.proc.kill("SIGTERM");
-			running.delete(sid);
-		}
-	});
-}
+/**
+ * pi-web-ui 的 pi 扩展 —— 提供命令行集成。
+ *
+ * 能力：
+ *   /webui                      启动本机 pi-web-ui 服务器，打开浏览器访问
+ *   /webui --port 9000          指定端口启动
+ *   /webui --no-browser         启动但不开浏览器
+ *   /webui stop                 停止已启动的服务器
+ *   /webui status               查看运行状态 / URL
+ *
+ * 实现说明：
+ *   - 不依赖全局 bin（pi install 后 pi-web-ui 命令不一定在 PATH），直接用
+ *     node 调包内 dist/server/index.js，通过环境变量 PORT / PI_WEB_CWD /
+ *     PI_WEB_DATA_DIR 控制。
+ *   - 工作目录默认用当前 pi 会话的 ctx.cwd；可用 --cwd / path 覆盖。
+ *   - 服务器作为子进程后台运行，/webui 不阻塞 pi。
+ *   - 每个 pi 会话管理一个子进程；session_shutdown 时清理，避免孤儿进程。
+ */
+
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import net from "node:net";
+import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+
+// 本文件位于 <pkg>/extensions/webui.ts → 包根在上一级
+const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const SERVER_ENTRY = join(PKG_ROOT, "dist", "server", "index.js");
+const NODE = process.execPath;
+
+/** 每个会话的服务器子进程 + 元数据 */
+interface RunningServer {
+	proc: ReturnType<typeof spawn>;
+	port: number;
+	cwd: string;
+	url: string;
+}
+
+// 会话 → 运行实例（模块级 Map；每会话一个会话对象，无需清理全局）
+const running = new Map<string, RunningServer>();
+
+/** 找一个空闲端口 */
+function findFreePort(from = 8787): Promise<number> {
+	return new Promise((resolve_, reject) => {
+		const srv = net.createServer();
+		srv.listen(from, () => {
+			const port = (srv.address() as net.AddressInfo).port;
+			srv.close(() => resolve_(port));
+		});
+		srv.on("error", () => {
+			// 端口被占则顺延
+			findFreePort(from + 1).then(resolve_, reject);
+		});
+	});
+}
+
+/** 解析 --key value / --flag 参数 */
+function parseArgs(args: string): { port?: number; cwd?: string; noBrowser: boolean } {
+	const out: { port?: number; cwd?: string; noBrowser: boolean } = { noBrowser: false };
+	const toks = args.split(/\s+/).filter(Boolean);
+	for (let i = 0; i < toks.length; i++) {
+		const t = toks[i];
+		if ((t === "--port" || t === "-p") && toks[i + 1]) {
+			const n = Number(toks[++i]);
+			if (Number.isInteger(n) && n > 0 && n < 65536) out.port = n;
+		} else if ((t === "--cwd") && toks[i + 1]) {
+			out.cwd = resolve(toks[++i]);
+		} else if (t === "--no-browser") {
+			out.noBrowser = true;
+		}
+	}
+	return out;
+}
+
+/** 打开浏览器 */
+async function openBrowser(url: string): Promise<void> {
+	const { platform } = process;
+	const [cmd, ...rest] =
+		platform === "darwin"
+			? ["open", url]
+			: platform === "win32"
+				? ["cmd", "/c", "start", "", url]
+				: ["xdg-open", url];
+	// 无界面环境缺少 xdg-open 等打开器时，ENOENT 以异步 'error' 事件触发，
+	// try/catch 拦不住会崩掉整个进程 —— 必须挂 error 监听。
+	spawn(cmd, rest, { stdio: "ignore", detached: true })
+		.on("error", (err) => {
+			if ((err as NodeJS.ErrnoException)?.code === "ENOENT") {
+				console.warn(
+					`[webui] 未找到浏览器打开器 (${(err as NodeJS.ErrnoException).path || "command not found"})，请用 --no-browser 关闭自动打开`
+				);
+			} else {
+				console.warn("[webui] 打开浏览器失败:", err.message);
+			}
+		})
+		.unref();
+}
+
+export default function (pi: ExtensionAPI): void {
+	pi.registerCommand("webui", {
+		description: "启动本机 pi-web-ui Web 界面（/webui [--port N] [--cwd PATH] [--no-browser] | stop | status）",
+		handler: async (args: string, ctx: ExtensionCommandContext) => {
+			const sid = ctx.sessionManager.getSessionId();
+			const opts = parseArgs(args);
+			const action = (args.split(/\s+/)[0] || "start").toLowerCase();
+
+			// 停止
+			if (action === "stop" || action === "kill") {
+				const inst = running.get(sid);
+				if (!inst) {
+					ctx.ui.notify("没有正在运行的本机 pi-web-ui 服务器", "info");
+					return;
+				}
+				inst.proc.kill("SIGTERM");
+				running.delete(sid);
+				ctx.ui.notify(`已停止 pi-web-ui (${inst.url})`, "info");
+				return;
+			}
+
+			// 状态
+			if (action === "status") {
+				const inst = running.get(sid);
+				if (!inst) {
+					ctx.ui.notify("本机 pi-web-ui 未运行", "info");
+					return;
+				}
+				const alive = inst.proc.exitCode === null;
+				ctx.ui.notify(
+					alive ? `pi-web-ui 运行中 → ${inst.url}\n端口 ${inst.port} · cwd ${inst.cwd}` : `已退出(exit=${inst.proc.exitCode})`,
+					alive ? "info" : "warning",
+				);
+				return;
+			}
+
+			// 默认 start
+			if (action !== "start" && action !== "run") {
+				ctx.ui.notify(`未知动作 ${action}（可用 start|stop|status）`, "warning");
+				return;
+			}
+
+			// 已运行则提示
+			const existing = running.get(sid);
+			if (existing && existing.proc.exitCode === null) {
+				ctx.ui.notify(`pi-web-ui 已在运行 → ${existing.url}`, "info");
+				return;
+			}
+
+			// 检查是否已构建
+			if (!existsSync(SERVER_ENTRY)) {
+				ctx.ui.notify(
+					"缺少 dist/ 产物（当前安装未包含已构建前端）。请运行 `npm run build` 后重试，或用 pi-web-ui 官方 npm 包。",
+					"warning",
+				);
+				return;
+			}
+
+			const port = opts.port ?? (await findFreePort());
+			const cwd = opts.cwd ?? ctx.cwd;
+			const url = `http://localhost:${port}`;
+
+			const env = {
+				...process.env,
+				PORT: String(port),
+				PI_WEB_CWD: cwd,
+				...(process.env.PI_WEB_DATA_DIR ? {} : { PI_WEB_DATA_DIR: join(cwd, ".pi-web") }),
+			};
+			const proc = spawn(NODE, [SERVER_ENTRY], { cwd, env, stdio: "ignore", detached: true });
+			proc.unref();
+			running.set(sid, { proc, port, cwd, url });
+
+			ctx.ui.notify(`pi-web-ui 启动中 → ${url}\n端口 ${port} · cwd ${cwd}\n(几秒后可用，/webui status 查看)`);
+
+			if (!opts.noBrowser) await openBrowser(url);
+
+			// 进程退出时清理
+			proc.on("exit", () => {
+				if (running.get(sid)?.proc === proc) running.delete(sid);
+			});
+		},
+	});
+
+	// 会话结束清理子进程，避免孤儿
+	pi.on("session_shutdown", async (_event, ctx) => {
+		const sid = ctx.sessionManager.getSessionId();
+		const inst = running.get(sid);
+		if (inst && inst.proc.exitCode === null) {
+			inst.proc.kill("SIGTERM");
+			running.delete(sid);
+		}
+	});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
   "license": "MIT",
   "type": "module",

package/themes/md-preview.css

@@ -961,6 +961,29 @@ body.panel-resizing {
 	font-size: 14px;
 }
 
+/* 全窗口拖放提示（issue #19）：拖入文件时覆盖整个视口，drop 任意位置即附加。
+   pointer-events:none 保证 drop 落在下面的元素上再冒泡到 .app 的 onDrop。 */
+.app-drop-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 300;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
+	border: 2px dashed var(--accent);
+	pointer-events: none;
+}
+.app-drop-overlay span {
+	padding: 14px 26px;
+	border: 1px dashed var(--accent);
+	border-radius: 12px;
+	background: var(--bg-elev2);
+	color: var(--text);
+	font-size: 16px;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+}
+
 .attach-range {
 	font-family: var(--mono);
 	font-size: 10.5px;
@@ -3340,11 +3363,81 @@ body.panel-resizing {
 }
 
 .msg-editor {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 }
 
+/* 编辑重问的图片附件条：原图缩略图 + 新粘贴/拖入的图 */
+.msg-editor-images {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.msg-editor-img {
+	position: relative;
+	display: inline-flex;
+	width: 64px;
+	height: 64px;
+	border-radius: 8px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+	background: var(--bg-elev1);
+}
+.msg-editor-img img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+.msg-editor-img-remove {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	font-size: 10px;
+	line-height: 1;
+	color: #fff;
+	background: rgba(0, 0, 0, 0.55);
+}
+.msg-editor-img-remove:hover {
+	background: rgba(220, 38, 38, 0.85);
+}
+.msg-editor-img-remove svg {
+	width: 12px;
+	height: 12px;
+}
+/* 拖拽悬停时整个编辑器高亮 */
+.msg-editor.drag-over .msg-editor-input {
+	border-color: var(--accent);
+	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
+}
+.msg-editor.drag-over::after {
+	content: "📎";
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 28px;
+	pointer-events: none;
+	z-index: 2;
+}
+/* 提示文案里的内联图标与文字对齐 */
+span.msg-editor-hint svg {
+	vertical-align: -2px;
+	margin-right: 4px;
+}
+
 .msg-editor-input {
 	width: 100%;
 	min-height: 48px;