@steerable/agent-shell-web 0.6.52 → 0.6.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.52",
+  "version": "0.6.53",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.52",
-    "@steerable/agent-ui": "0.6.52"
+    "@steerable/agent-ui": "0.6.53",
+    "@steerable/agent-protocol": "0.6.53"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.52"
+    "@steerable/pack-sdk": "0.6.53"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/chat/ChatInput.tsx

@@ -32,8 +32,9 @@ import {
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import type { ExecPolicy } from '@/lib/exec-policy';
 import { getWebChatModes, hostToolCapability, settingsChrome } from '@/lib/host-tools';
-import { hostClipboardAvailable, requestHostPaste } from '@/lib/host-paste';
-import type { AttachmentFile } from '@/lib/attachments';
+import { hostClipboardAvailable, requestHostPaste, type HostClipboardFile } from '@/lib/host-paste';
+import { attachmentFromPath, type AttachmentFile } from '@/lib/attachments';
+import { dropPointHitsRect, hostFileDropAvailable, listenHostFileDrop } from '@/lib/host-file-drop';
 import type { SteerOutcome } from '@steerable/agent-ui';
 import {
   isHiddenSlashSkill,
@@ -714,6 +715,23 @@ function clipboardOf(event: ClipboardEvent<HTMLDivElement>): DataTransfer | null
   return native.clipboardData ?? event.clipboardData ?? null;
 }
 
+function fileFromHostClipboard(file: HostClipboardFile): File | null {
+  if (!file.dataBase64) return null;
+  let binary: string;
+  try {
+    binary = atob(file.dataBase64);
+  } catch {
+    return null;
+  }
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new File([bytes], file.name || 'image.png', {
+    type: file.mime || 'application/octet-stream',
+  });
+}
+
 function namePastedImage(file: File, serial: number, now: Date): File {
   if (!file.type.startsWith('image/')) return file;
   if (file.name.trim() && !GENERIC_CLIPBOARD_IMAGE_NAME.test(file.name.trim())) return file;
@@ -835,7 +853,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const compositionEndAtRef = useRef<number>(0);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const dropBoxRef = useRef<HTMLDivElement>(null);
     const pasteSerialRef = useRef(0);
+    const attachDroppedRef = useRef<(paths: string[]) => void>(() => {});
+    const dragHoverRef = useRef<(hovering: boolean) => void>(() => {});
+    const hostPasteFilesRef = useRef<(files: HostClipboardFile[]) => void>(() => {});
     const adoptPastedTextRef = useRef<(text: string) => void>(() => {});
     // 工具栏"空间不足时优先隐藏快捷键提示"的测量 refs，见下方 useLayoutEffect。
     const toolbarRowRef = useRef<HTMLDivElement>(null);
@@ -1240,6 +1262,33 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       path: (file as { path?: string }).path || '',
       file,
     });
+    attachDroppedRef.current = (paths) => {
+      if (disabled || !allowFileAttach) return;
+      addFiles(paths.map(attachmentFromPath));
+    };
+    dragHoverRef.current = (hovering) => {
+      if (disabled || !allowFileAttach) {
+        setIsDragging(false);
+        return;
+      }
+      setIsDragging(hovering);
+    };
+    hostPasteFilesRef.current = (incoming) => {
+      if (disabled || !allowFileAttach) return;
+      const now = new Date();
+      const next: AttachmentFile[] = [];
+      for (const item of incoming) {
+        if (item.path) {
+          next.push(attachmentFromPath(item.path));
+          continue;
+        }
+        const blob = fileFromHostClipboard(item);
+        if (!blob) continue;
+        pasteSerialRef.current += 1;
+        next.push(toAttachment(namePastedImage(blob, pasteSerialRef.current, now)));
+      }
+      if (next.length > 0) addFiles(next);
+    };
 
     // 按钮点击 → 触发隐藏的 <input type="file" multiple>，由浏览器/Electron
     // 直接弹出系统文件选择框（不依赖 IPC，避免「点击无反应」）。
@@ -1449,14 +1498,44 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         event.preventDefault();
         adoptPastedTextRef.current(text);
       };
+      const onHostPasteFiles = (event: Event) => {
+        const files = (event as CustomEvent<HostClipboardFile[]>).detail;
+        if (!Array.isArray(files) || files.length === 0) return;
+        event.preventDefault();
+        hostPasteFilesRef.current(files);
+      };
       editor.addEventListener('compositionstart', onCompositionStart, true);
       editor.addEventListener('hostpaste', onHostPaste);
+      editor.addEventListener('hostpastefiles', onHostPasteFiles);
       return () => {
         editor.removeEventListener('compositionstart', onCompositionStart, true);
         editor.removeEventListener('hostpaste', onHostPaste);
+        editor.removeEventListener('hostpastefiles', onHostPasteFiles);
       };
     }, []);
 
+    useEffect(() => {
+      if (!hostFileDropAvailable()) return undefined;
+      return listenHostFileDrop((event) => {
+        const box = dropBoxRef.current;
+        if (event.type === 'leave' || !box || event.x == null || event.y == null) {
+          dragHoverRef.current(false);
+          return;
+        }
+        const hit = dropPointHitsRect(
+          { x: event.x, y: event.y },
+          box.getBoundingClientRect(),
+          window.devicePixelRatio,
+        );
+        if (event.type === 'drop') {
+          dragHoverRef.current(false);
+          if (hit) attachDroppedRef.current(event.paths);
+          return;
+        }
+        dragHoverRef.current(hit);
+      });
+    }, []);
+
     const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
       // Read before preventDefault. WebKit clears clipboardData once the paste is canceled.
       const data = clipboardOf(event);
@@ -1862,6 +1941,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           </div>
         )}
         <div
+          ref={dropBoxRef}
           className={`chat-input-box flex flex-col rounded-agent-lg border bg-agent-canvas shadow-sm transition-all duration-200 ${
             isDragging
               ? 'border-blue-500 ring-2 ring-blue-500/20'

package/src/components/settings/McpSettingsPanel.tsx

@@ -26,10 +26,15 @@ import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 export interface McpServerInfo {
   id: string;
   name: string;
-  command: string;
-  args: string[];
-  env: Record<string, string>;
+  transport: 'stdio' | 'streamable-http';
+  command?: string;
+  args?: string[];
+  envKeys?: string[];
   cwd?: string;
+  url?: string;
+  headerNames?: string[];
+  headersFromEnv?: Record<string, string>;
+  bearerTokenEnvVar?: string;
   enabled: boolean;
   serverKey: string;
   toolCount: number;
@@ -46,11 +51,16 @@ export function McpSettingsPanel() {
   const [mcpImportStatus, setMcpImportStatus] = useState<string | null>(null);
   const [mcpFormOpen, setMcpFormOpen] = useState(false);
   const [mcpEditingId, setMcpEditingId] = useState<string | null>(null);
+  const [mcpFormTransport, setMcpFormTransport] = useState<'stdio' | 'streamable-http'>('stdio');
   const [mcpFormName, setMcpFormName] = useState('');
   const [mcpFormCommand, setMcpFormCommand] = useState('');
   const [mcpFormArgs, setMcpFormArgs] = useState('');
   const [mcpFormEnv, setMcpFormEnv] = useState('');
   const [mcpFormCwd, setMcpFormCwd] = useState('');
+  const [mcpFormUrl, setMcpFormUrl] = useState('');
+  const [mcpFormHeaders, setMcpFormHeaders] = useState('');
+  const [mcpFormHeadersFromEnv, setMcpFormHeadersFromEnv] = useState('');
+  const [mcpFormBearerEnv, setMcpFormBearerEnv] = useState('');
   const [mcpSaving, setMcpSaving] = useState(false);
   const [mcpTestingId, setMcpTestingId] = useState<string | null>(null);
   const [mcpDeletingId, setMcpDeletingId] = useState<string | null>(null);
@@ -80,11 +90,16 @@ export function McpSettingsPanel() {
 
   const resetMcpForm = () => {
     setMcpEditingId(null);
+    setMcpFormTransport('stdio');
     setMcpFormName('');
     setMcpFormCommand('');
     setMcpFormArgs('');
     setMcpFormEnv('');
     setMcpFormCwd('');
+    setMcpFormUrl('');
+    setMcpFormHeaders('');
+    setMcpFormHeadersFromEnv('');
+    setMcpFormBearerEnv('');
   };
 
   const parseEnvLines = (raw: string): Record<string, string> => {
@@ -104,13 +119,27 @@ export function McpSettingsPanel() {
     setMcpSaving(true);
     setError(null);
     try {
-      const body = {
-        name: mcpFormName.trim(),
-        command: mcpFormCommand.trim(),
-        args: mcpFormArgs.split('\n').map((s) => s.trim()).filter(Boolean),
-        env: parseEnvLines(mcpFormEnv),
-        cwd: mcpFormCwd.trim() || undefined,
-      };
+      const body = mcpFormTransport === 'stdio'
+        ? {
+            name: mcpFormName.trim(),
+            transport: 'stdio',
+            command: mcpFormCommand.trim(),
+            args: mcpFormArgs.split('\n').map((s) => s.trim()).filter(Boolean),
+            ...(!mcpEditingId || mcpFormEnv.trim()
+              ? { env: parseEnvLines(mcpFormEnv) }
+              : {}),
+            cwd: mcpFormCwd.trim() || undefined,
+          }
+        : {
+            name: mcpFormName.trim(),
+            transport: 'streamable-http',
+            url: mcpFormUrl.trim(),
+            ...(!mcpEditingId || mcpFormHeaders.trim()
+              ? { headers: parseEnvLines(mcpFormHeaders) }
+              : {}),
+            headersFromEnv: parseEnvLines(mcpFormHeadersFromEnv),
+            bearerTokenEnvVar: mcpFormBearerEnv.trim() || undefined,
+          };
       if (mcpEditingId) {
         await getElectronBridge()!.localBackend.request({
           method: 'PUT',
@@ -136,15 +165,22 @@ export function McpSettingsPanel() {
 
   const handleEditMcpServer = (server: McpServerInfo) => {
     setMcpEditingId(server.id);
+    setMcpFormTransport(server.transport ?? 'stdio');
     setMcpFormName(server.name);
-    setMcpFormCommand(server.command);
+    setMcpFormCommand(server.command ?? '');
     setMcpFormArgs((server.args || []).join('\n'));
-    setMcpFormEnv(
-      Object.entries(server.env || {})
-        .map(([k, v]) => `${k}=${v}`)
+    // Stored values never return through the settings API. Blank preserves
+    // the existing env map; entering lines replaces it deliberately.
+    setMcpFormEnv('');
+    setMcpFormCwd(server.cwd || '');
+    setMcpFormUrl(server.url || '');
+    setMcpFormHeaders('');
+    setMcpFormHeadersFromEnv(
+      Object.entries(server.headersFromEnv ?? {})
+        .map(([header, variable]) => `${header}=${variable}`)
         .join('\n'),
     );
-    setMcpFormCwd(server.cwd || '');
+    setMcpFormBearerEnv(server.bearerTokenEnvVar || '');
     setMcpFormOpen(true);
   };
 
@@ -275,6 +311,16 @@ export function McpSettingsPanel() {
           <h4 className="text-xs font-semibold text-agent-foreground">
             {mcpEditingId ? '编辑 MCP 服务' : '手动添加 MCP 服务'}
           </h4>
+          <select
+            value={mcpFormTransport}
+            onChange={(event) =>
+              setMcpFormTransport(event.target.value as 'stdio' | 'streamable-http')
+            }
+            className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+          >
+            <option value="stdio">本地进程（stdio）</option>
+            <option value="streamable-http">远程服务（Streamable HTTP）</option>
+          </select>
           <div className="grid grid-cols-2 gap-2">
             <input
               type="text"
@@ -283,35 +329,73 @@ export function McpSettingsPanel() {
               placeholder="名称，如 filesystem"
               className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
             />
-            <input
-              type="text"
-              value={mcpFormCommand}
-              onChange={(e) => setMcpFormCommand(e.target.value)}
-              placeholder="启动命令，如 npx / uvx / node"
-              className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
-            />
+            {mcpFormTransport === 'stdio' ? (
+              <input
+                type="text"
+                value={mcpFormCommand}
+                onChange={(e) => setMcpFormCommand(e.target.value)}
+                placeholder="启动命令，如 npx / uvx / node"
+                className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+            ) : (
+              <input
+                type="url"
+                value={mcpFormUrl}
+                onChange={(e) => setMcpFormUrl(e.target.value)}
+                placeholder="https://example.com/mcp"
+                className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+            )}
           </div>
-          <textarea
-            value={mcpFormArgs}
-            onChange={(e) => setMcpFormArgs(e.target.value)}
-            placeholder="参数（每行一个），如：&#10;-y&#10;@modelcontextprotocol/server-filesystem&#10;C:/"
-            rows={3}
-            className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
-          />
-          <textarea
-            value={mcpFormEnv}
-            onChange={(e) => setMcpFormEnv(e.target.value)}
-            placeholder="环境变量（每行一个 KEY=VALUE，可留空）"
-            rows={2}
-            className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
-          />
-          <input
-            type="text"
-            value={mcpFormCwd}
-            onChange={(e) => setMcpFormCwd(e.target.value)}
-            placeholder="工作目录（可选）"
-            className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
-          />
+          {mcpFormTransport === 'stdio' ? (
+            <>
+              <textarea
+                value={mcpFormArgs}
+                onChange={(e) => setMcpFormArgs(e.target.value)}
+                placeholder="参数（每行一个）"
+                rows={3}
+                className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+              <textarea
+                value={mcpFormEnv}
+                onChange={(e) => setMcpFormEnv(e.target.value)}
+                placeholder={mcpEditingId ? '环境变量；留空保留现有值' : '环境变量（每行 KEY=VALUE）'}
+                rows={2}
+                className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+              <input
+                type="text"
+                value={mcpFormCwd}
+                onChange={(e) => setMcpFormCwd(e.target.value)}
+                placeholder="工作目录（可选）"
+                className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+            </>
+          ) : (
+            <>
+              <textarea
+                value={mcpFormHeaders}
+                onChange={(e) => setMcpFormHeaders(e.target.value)}
+                placeholder={mcpEditingId ? '普通请求头；留空保留现有值' : '普通请求头（每行 Header=Value）'}
+                rows={2}
+                className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+              <textarea
+                value={mcpFormHeadersFromEnv}
+                onChange={(e) => setMcpFormHeadersFromEnv(e.target.value)}
+                placeholder="环境变量请求头（每行 Header=ENV_NAME）"
+                rows={2}
+                className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+              <input
+                type="text"
+                value={mcpFormBearerEnv}
+                onChange={(e) => setMcpFormBearerEnv(e.target.value)}
+                placeholder="Bearer token 环境变量名（可选）"
+                className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+              />
+            </>
+          )}
           <div className="flex justify-end gap-2">
             <button
               type="button"
@@ -323,9 +407,19 @@ export function McpSettingsPanel() {
             <button
               type="button"
               onClick={handleSaveMcpServer}
-              disabled={mcpSaving || !mcpFormName.trim() || !mcpFormCommand.trim()}
+              disabled={
+                mcpSaving ||
+                !mcpFormName.trim() ||
+                (mcpFormTransport === 'stdio'
+                  ? !mcpFormCommand.trim()
+                  : !mcpFormUrl.trim())
+              }
               className={`h-8 px-4 rounded-full text-xs font-medium transition-all ${
-                mcpSaving || !mcpFormName.trim() || !mcpFormCommand.trim()
+                mcpSaving ||
+                !mcpFormName.trim() ||
+                (mcpFormTransport === 'stdio'
+                  ? !mcpFormCommand.trim()
+                  : !mcpFormUrl.trim())
                   ? 'bg-agent-muted text-agent-muted-foreground cursor-not-allowed'
                   : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
               }`}
@@ -386,7 +480,9 @@ export function McpSettingsPanel() {
                     )}
                   </div>
                   <p className="text-[11px] text-agent-muted-foreground font-mono truncate">
-                    {server.command} {(server.args || []).join(' ')}
+                    {server.transport === 'streamable-http'
+                      ? server.url
+                      : `${server.command ?? ''} ${(server.args ?? []).join(' ')}`}
                   </p>
                   {server.lastError && (
                     <p className="text-[10px] text-agent-destructive line-clamp-2">
@@ -453,7 +549,7 @@ export function McpSettingsPanel() {
         )}
       </div>
       <p className="text-[10px] text-agent-muted-foreground">
-        已启用服务的工具会以 mcp__服务名__工具名 的形式直接提供给助手调用；新导入或修改后点「测试连接」即可生效。
+        支持 stdio 与 Streamable HTTP。密钥请填写环境变量名，不要写进普通请求头；已启用服务的工具通过 tool_search 提供给助手。
       </p>
 
       {error && (

package/src/lib/attachments.ts

@@ -19,6 +19,14 @@ export interface AttachmentFile {
   file?: File;
 }
 
+/** 宿主拖放 / 粘贴只给出绝对路径时，用最后一段作为展示名。 */
+export function attachmentFromPath(path: string): AttachmentFile {
+  const trimmed = path.trim();
+  const parts = trimmed.split(/[/\\]/).filter((part) => part.length > 0);
+  const name = parts[parts.length - 1] ?? trimmed;
+  return { name, path: trimmed };
+}
+
 const IMAGE_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp']);
 
 /** 扩展名是否为图像（renderer 侧预过滤，后端 image-attachment 会二次校验）。 */

package/src/lib/electron-bridge.ts

@@ -197,10 +197,24 @@ export interface HostBridge {
   /**
    * App menu IPC — `Cmd+V` / 编辑 → 粘贴 fires `menu:paste`.
    * WKWebView does not expose that pasteboard to the page, so the renderer
-   * reads it through `readClipboardText`.
+   * reads it through `readClipboard`.
    */
   onMenuPaste?: (callback: () => void) => void;
   offMenuPaste?: () => void;
+  /**
+   * OS pasteboard. `files` are copied paths or a screenshot PNG.
+   * Text is empty when the pasteboard holds files, so the path is not
+   * inserted into the composer as well.
+   */
+  readClipboard?: () => Promise<{
+    text: string;
+    files: Array<{
+      name: string;
+      path?: string;
+      dataBase64?: string;
+      mime?: string;
+    }>;
+  }>;
   /** Plain text from the OS pasteboard. Empty when the clipboard has no text. */
   readClipboardText?: () => Promise<string>;
   /**

package/src/lib/host-file-drop.ts

@@ -0,0 +1,68 @@
+/**
+ * Tauri consumes OS file drags before they become HTML5 drop events.
+ * The webview reports paths through `onDragDropEvent` instead.
+ *
+ * macOS labels AppKit points as a physical position. Windows reports device
+ * pixels. Checking both against the composer rectangle accepts the drop on
+ * either scale.
+ */
+import { getCurrentWebview, type DragDropEvent } from '@tauri-apps/api/webview';
+
+export interface HostFileDrop {
+  type: 'enter' | 'over' | 'drop' | 'leave';
+  paths: string[];
+  x?: number;
+  y?: number;
+}
+
+export function hostFileDropAvailable(): boolean {
+  return typeof window !== 'undefined' && window.__TAURI_INTERNALS__ != null;
+}
+
+export function dropPointHitsRect(
+  position: { x: number; y: number },
+  rect: { left: number; right: number; top: number; bottom: number },
+  devicePixelRatio: number,
+): boolean {
+  const scale = devicePixelRatio > 0 ? devicePixelRatio : 1;
+  return (
+    contains(rect, position.x, position.y) ||
+    contains(rect, position.x / scale, position.y / scale)
+  );
+}
+
+/** Subscribe while a composer is mounted. The returned function removes it. */
+export function listenHostFileDrop(onEvent: (event: HostFileDrop) => void): () => void {
+  if (!hostFileDropAvailable()) return () => {};
+  let unlisten: (() => void) | undefined;
+  let cancelled = false;
+  const pending = getCurrentWebview().onDragDropEvent((event) => {
+    onEvent(hostFileDropFrom(event.payload));
+  });
+  void pending.then((stop) => {
+    if (cancelled) stop();
+    else unlisten = stop;
+  });
+  return () => {
+    cancelled = true;
+    unlisten?.();
+  };
+}
+
+function contains(
+  rect: { left: number; right: number; top: number; bottom: number },
+  x: number,
+  y: number,
+): boolean {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+
+function hostFileDropFrom(payload: DragDropEvent): HostFileDrop {
+  if (payload.type === 'leave') return { type: 'leave', paths: [] };
+  return {
+    type: payload.type,
+    paths: payload.type === 'over' ? [] : payload.paths,
+    x: payload.position.x,
+    y: payload.position.y,
+  };
+}

package/src/lib/host-paste.ts

@@ -1,8 +1,20 @@
 /**
- * WKWebView paste does not carry clipboard text into the page. The Edit menu
- * shortcut emits `menu:paste`; this module reads the OS pasteboard and writes
- * it into the focused field.
+ * WKWebView paste does not carry clipboard text or files into the page. The
+ * Edit menu shortcut emits `menu:paste`; this module reads the OS pasteboard
+ * and writes it into the focused field.
  */
+
+export interface HostClipboardFile {
+  name: string;
+  path?: string;
+  dataBase64?: string;
+  mime?: string;
+}
+
+export interface HostClipboard {
+  text: string;
+  files: HostClipboardFile[];
+}
 import { getHostBridge } from './electron-bridge';
 
 let pending = false;
@@ -25,12 +37,18 @@ export function installHostPaste(): void {
 
 /** Read the OS pasteboard and insert it into `target` or the focused field. */
 export function requestHostPaste(target?: HTMLElement | null): void {
-  const read = getHostBridge()?.readClipboardText;
-  if (!read || pending) return;
+  const bridge = getHostBridge();
+  const readClipboard = bridge?.readClipboard;
+  const readText = bridge?.readClipboardText;
+  if ((!readClipboard && !readText) || pending) return;
   pending = true;
-  void read()
-    .then((text) => {
-      if (text) insertHostText(text, target ?? null);
+  const read = readClipboard
+    ? readClipboard()
+    : readText!().then((text) => ({ text, files: [] as HostClipboardFile[] }));
+  void read
+    .then((clip) => {
+      if (clip.files.length > 0) insertHostFiles(clip.files, target ?? null);
+      if (clip.text) insertHostText(clip.text, target ?? null);
     })
     .catch((error: unknown) => {
       console.warn('[host-paste] clipboard read failed', error);
@@ -41,7 +59,10 @@ export function requestHostPaste(target?: HTMLElement | null): void {
 }
 
 export function hostClipboardAvailable(): boolean {
-  return typeof getHostBridge()?.readClipboardText === 'function';
+  const bridge = getHostBridge();
+  return (
+    typeof bridge?.readClipboard === 'function' || typeof bridge?.readClipboardText === 'function'
+  );
 }
 
 function isEditable(target: EventTarget | null): target is HTMLElement {
@@ -58,6 +79,14 @@ function focusedEditable(): HTMLElement | null {
   return null;
 }
 
+function insertHostFiles(files: HostClipboardFile[], preferred: HTMLElement | null): void {
+  const el = preferred?.isConnected ? preferred : focusedEditable();
+  if (!el) return;
+  if (el.isContentEditable || el.getAttribute('contenteditable') === 'true') {
+    el.dispatchEvent(new CustomEvent('hostpastefiles', { detail: files, cancelable: true }));
+  }
+}
+
 function insertHostText(text: string, preferred: HTMLElement | null): void {
   const el = preferred?.isConnected ? preferred : focusedEditable();
   if (!el) return;

package/src/lib/tauri-bridge.ts

@@ -92,6 +92,11 @@ export function createTauriBridge(): HostBridge {
     offMenuOpenTerminal: terminalMenu.off,
     onMenuPaste: pasteMenu.on,
     offMenuPaste: pasteMenu.off,
+    readClipboard: () =>
+      invoke<{
+        text: string;
+        files: Array<{ name: string; path?: string; dataBase64?: string; mime?: string }>;
+      }>('host_read_clipboard'),
     readClipboardText: () => invoke<string>('host_read_clipboard_text'),
     app: {
       snapshot: () => invoke<AppReleaseSnapshot>('app_release_snapshot'),