@geminilight/mindos 0.6.56 → 0.6.57

package/app/app/api/agents/custom/detect/route.ts

@@ -0,0 +1,31 @@
+export const dynamic = 'force-dynamic';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { detectBaseDir } from '@/lib/custom-agents';
+
+/** POST — Auto-detect config files in a baseDir. */
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { baseDir } = body as { baseDir?: string };
+
+    if (!baseDir?.trim()) {
+      return NextResponse.json({ error: 'baseDir is required' }, { status: 400 });
+    }
+
+    const dir = baseDir.trim();
+
+    // Security: restrict to home directory only
+    if (!dir.startsWith('~/')) {
+      return NextResponse.json(
+        { error: 'baseDir must start with ~/ (e.g. ~/.qclaw/)' },
+        { status: 400 },
+      );
+    }
+
+    const result = detectBaseDir(dir);
+    return NextResponse.json(result);
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}

package/app/app/api/agents/custom/route.ts

@@ -0,0 +1,150 @@
+export const dynamic = 'force-dynamic';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { MCP_AGENTS } from '@/lib/mcp-agents';
+import {
+  loadCustomAgents,
+  saveCustomAgents,
+  inferDefaults,
+  slugify,
+  generateUniqueKey,
+  validateCustomAgentInput,
+  type CustomAgentDef,
+} from '@/lib/custom-agents';
+
+/** POST — Create a new custom agent. */
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { name, baseDir, ...overrides } = body as Partial<CustomAgentDef> & { name?: string; baseDir?: string };
+
+    if (!name?.trim() || !baseDir?.trim()) {
+      return NextResponse.json({ error: 'name and baseDir are required' }, { status: 400 });
+    }
+
+    const customs = loadCustomAgents();
+    const existingKeys = new Set([
+      ...Object.keys(MCP_AGENTS),
+      ...customs.map(c => c.key),
+    ]);
+
+    const key = overrides.key && !existingKeys.has(overrides.key)
+      ? overrides.key
+      : generateUniqueKey(name.trim(), existingKeys);
+
+    const error = validateCustomAgentInput({ name, baseDir, key }, existingKeys);
+    if (error) {
+      return NextResponse.json({ error }, { status: 400 });
+    }
+
+    const defaults = inferDefaults(name.trim(), baseDir.trim());
+    const agent: CustomAgentDef = {
+      ...defaults,
+      key,
+      ...(overrides.global && { global: overrides.global }),
+      ...(overrides.project !== undefined && { project: overrides.project }),
+      ...(overrides.configKey && { configKey: overrides.configKey }),
+      ...(overrides.format && { format: overrides.format }),
+      ...(overrides.preferredTransport && { preferredTransport: overrides.preferredTransport }),
+      ...(overrides.presenceDirs && { presenceDirs: overrides.presenceDirs }),
+      ...(overrides.presenceCli && { presenceCli: overrides.presenceCli }),
+      ...(overrides.globalNestedKey && { globalNestedKey: overrides.globalNestedKey }),
+    };
+
+    customs.push(agent);
+    saveCustomAgents(customs);
+
+    return NextResponse.json({ agent }, { status: 201 });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}
+
+/** PUT — Update an existing custom agent. */
+export async function PUT(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { key, ...updates } = body as Partial<CustomAgentDef> & { key: string };
+
+    if (!key) {
+      return NextResponse.json({ error: 'key is required' }, { status: 400 });
+    }
+
+    const customs = loadCustomAgents();
+    const idx = customs.findIndex(c => c.key === key);
+
+    if (idx === -1) {
+      return NextResponse.json({ error: `Custom agent "${key}" not found` }, { status: 404 });
+    }
+
+    const existing = customs[idx];
+
+    // Validate enum fields
+    if (updates.format && !['json', 'toml'].includes(updates.format)) {
+      return NextResponse.json({ error: 'format must be "json" or "toml"' }, { status: 400 });
+    }
+    if (updates.preferredTransport && !['stdio', 'http'].includes(updates.preferredTransport)) {
+      return NextResponse.json({ error: 'preferredTransport must be "stdio" or "http"' }, { status: 400 });
+    }
+
+    // Validate baseDir if changed
+    if (updates.baseDir) {
+      const dir = updates.baseDir.trim();
+      if (!dir.startsWith('~/') && !dir.startsWith('/')) {
+        return NextResponse.json({ error: 'baseDir must be an absolute path' }, { status: 400 });
+      }
+    }
+
+    const updated: CustomAgentDef = {
+      ...existing,
+      ...(updates.name && { name: updates.name }),
+      ...(updates.baseDir && { baseDir: updates.baseDir }),
+      ...(updates.global && { global: updates.global }),
+      ...(updates.project !== undefined && { project: updates.project }),
+      ...(updates.configKey && { configKey: updates.configKey }),
+      ...(updates.format && { format: updates.format }),
+      ...(updates.preferredTransport && { preferredTransport: updates.preferredTransport }),
+      ...(updates.presenceCli !== undefined && { presenceCli: updates.presenceCli || undefined }),
+      ...(updates.globalNestedKey !== undefined && { globalNestedKey: updates.globalNestedKey || undefined }),
+    };
+
+    // Update presenceDirs: explicit override takes priority, then baseDir-derived default
+    if (updates.presenceDirs) {
+      updated.presenceDirs = updates.presenceDirs;
+    } else if (updates.baseDir) {
+      updated.presenceDirs = [updates.baseDir.endsWith('/') ? updates.baseDir : updates.baseDir + '/'];
+    }
+
+    customs[idx] = updated;
+    saveCustomAgents(customs);
+
+    return NextResponse.json({ agent: updated });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}
+
+/** DELETE — Remove a custom agent. */
+export async function DELETE(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { key } = body as { key: string };
+
+    if (!key) {
+      return NextResponse.json({ error: 'key is required' }, { status: 400 });
+    }
+
+    const customs = loadCustomAgents();
+    const filtered = customs.filter(c => c.key !== key);
+
+    if (filtered.length === customs.length) {
+      return NextResponse.json({ error: `Custom agent "${key}" not found` }, { status: 404 });
+    }
+
+    saveCustomAgents(filtered);
+
+    return NextResponse.json({ removed: key });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}

package/app/app/api/file/import/route.ts

@@ -15,6 +15,19 @@ import { invalidateCache } from '@/lib/fs';
 const MAX_FILES = 20;
 const MAX_CONTENT_LENGTH = 5 * 1024 * 1024;
 
+/** File extensions that are binary and should be written as raw buffers, not text. */
+const BINARY_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.ico',
+  '.mp3', '.wav', '.m4a', '.ogg', '.flac', '.aac',
+  '.mp4', '.webm', '.mov', '.mkv',
+  '.pdf',
+]);
+
+function isBinaryFile(name: string): boolean {
+  const ext = path.extname(name).toLowerCase();
+  return BINARY_EXTENSIONS.has(ext);
+}
+
 type ConflictMode = 'skip' | 'rename' | 'overwrite';
 
 interface ImportRequest {
@@ -136,6 +149,35 @@ export async function POST(req: NextRequest) {
 
       const sanitized = sanitizeFileName(entry.name);
       const encoding = entry.encoding === 'base64' ? 'base64' : 'text';
+
+      // Binary files (images, audio, video, PDF): write raw buffer, skip text conversion
+      if (encoding === 'base64' && isBinaryFile(sanitized)) {
+        const buf = Buffer.from(entry.content, 'base64');
+
+        let relPath = targetSpaceNorm
+          ? path.posix.join(targetSpaceNorm, sanitized)
+          : sanitized;
+
+        const { relPath: finalRel, resolved, skipped: skipReason } = resolveUniquePath(
+          mindRoot,
+          relPath,
+          conflict,
+        );
+
+        if (skipReason) {
+          skipped.push({ name: entry.name, reason: skipReason });
+          continue;
+        }
+
+        fs.mkdirSync(path.dirname(resolved), { recursive: true });
+        fs.writeFileSync(resolved, buf);
+
+        created.push({ original: entry.name, path: finalRel });
+        createdPaths.push(finalRel);
+        continue;
+      }
+
+      // Text files: decode and convert to markdown
       const raw = decodeFileContent(encoding, entry.content, sanitized);
       const convertResult = convertToMarkdown(sanitized, raw);
 

package/app/app/api/mcp/agents/route.ts

@@ -3,8 +3,10 @@ import os from 'os';
 import fs from 'fs';
 import path from 'path';
 import { NextResponse } from 'next/server';
+import { execSync } from 'child_process';
 import {
   MCP_AGENTS,
+  expandHome,
   detectInstalled,
   detectAgentPresence,
   detectAgentRuntimeSignals,
@@ -12,6 +14,7 @@ import {
   detectAgentInstalledSkills,
   resolveSkillWorkspaceProfile,
 } from '@/lib/mcp-agents';
+import { getAllAgents, loadCustomAgents } from '@/lib/custom-agents';
 import { readSettings } from '@/lib/settings';
 import { scanSkillDirs } from '@/lib/pi-integration/skills';
 import { getMindRoot } from '@/lib/fs';
@@ -59,13 +62,60 @@ function enrichMindOsAgent(agent: Record<string, unknown>) {
 
 export async function GET() {
   try {
-    const agents = Object.entries(MCP_AGENTS).map(([key, agent]) => {
-      const status = detectInstalled(key);
-      const present = detectAgentPresence(key);
+    const allAgents = getAllAgents();
+    const customDefs = loadCustomAgents();
+    const customKeySet = new Set(customDefs.map(c => c.key));
+    const customByKey = Object.fromEntries(customDefs.map(c => [c.key, c]));
+
+    const agents = Object.entries(allAgents).map(([key, agent]) => {
+      const isCustom = customKeySet.has(key) && !(key in MCP_AGENTS);
+
+      // Built-in agents: use standard detection. Custom agents: detect using their AgentDef directly.
+      let present: boolean;
+      let status: { installed: boolean; scope?: string; transport?: string; configPath?: string; url?: string };
+
+      if (isCustom) {
+        present = agent.presenceDirs?.some((d: string) => fs.existsSync(expandHome(d))) ?? false;
+        if (agent.presenceCli) {
+          try {
+            execSync(
+              process.platform === 'win32' ? `where ${agent.presenceCli}` : `which ${agent.presenceCli}`,
+              { stdio: 'pipe' },
+            );
+            present = true;
+          } catch { /* not in PATH */ }
+        }
+        status = { installed: false };
+        const globalPath = expandHome(agent.global);
+        try {
+          if (fs.existsSync(globalPath)) {
+            const raw = fs.readFileSync(globalPath, 'utf-8');
+            const parsed = JSON.parse(raw);
+            const configObj = agent.globalNestedKey
+              ? agent.globalNestedKey.split('.').reduce((o: Record<string, unknown>, k: string) => (o?.[k] as Record<string, unknown>) ?? {}, parsed)
+              : parsed;
+            const servers = configObj?.[agent.key] ?? {};
+            if (servers && typeof servers === 'object' && 'mindos' in servers) {
+              status = { installed: true, scope: 'global', configPath: globalPath };
+            }
+          }
+        } catch { /* config not parseable */ }
+      } else {
+        present = detectAgentPresence(key);
+        status = detectInstalled(key);
+      }
+
       const skillProfile = resolveSkillWorkspaceProfile(key);
-      const runtime = detectAgentRuntimeSignals(key);
-      const configuredMcp = detectAgentConfiguredMcpServers(key);
-      const installedSkills = detectAgentInstalledSkills(key);
+      const runtime = isCustom
+        ? { hiddenRootPath: '', hiddenRootPresent: false, conversationSignal: false, usageSignal: false, lastActivityAt: undefined }
+        : detectAgentRuntimeSignals(key);
+      const configuredMcp = isCustom
+        ? { servers: [] as string[], sources: [] as string[] }
+        : detectAgentConfiguredMcpServers(key);
+      const installedSkills = isCustom
+        ? { skills: [] as string[], sourcePath: '' }
+        : detectAgentInstalledSkills(key);
+
       return {
         key,
         name: agent.name,
@@ -74,7 +124,7 @@ export async function GET() {
         scope: status.scope,
         transport: status.transport,
         configPath: status.configPath,
-        url: status.url, // Store URL for verification
+        url: status.url,
         hasProjectScope: !!agent.project,
         hasGlobalScope: !!agent.global,
         preferredTransport: agent.preferredTransport,
@@ -97,6 +147,8 @@ export async function GET() {
         installedSkillNames: installedSkills.skills,
         installedSkillCount: installedSkills.skills.length,
         installedSkillSourcePath: installedSkills.sourcePath,
+        isCustom,
+        customBaseDir: isCustom ? customByKey[key]?.baseDir : undefined,
       };
     });
 

package/app/app/api/settings/list-models/route.ts

@@ -1,7 +1,8 @@
 export const dynamic = 'force-dynamic';
 import { NextRequest, NextResponse } from 'next/server';
+import { getModels as piGetModels } from '@mariozechner/pi-ai';
 import { effectiveAiConfig } from '@/lib/settings';
-import { type ProviderId, isProviderId, PROVIDER_PRESETS, getDefaultBaseUrl } from '@/lib/agent/providers';
+import { type ProviderId, isProviderId, PROVIDER_PRESETS, toPiProvider, getDefaultBaseUrl } from '@/lib/agent/providers';
 
 const TIMEOUT = 10_000;
 
@@ -19,8 +20,11 @@ export async function POST(req: NextRequest) {
     }
 
     const preset = PROVIDER_PRESETS[provider as ProviderId];
+
+    // Providers without remote list-models API: return static list from pi-ai registry
     if (!preset.supportsListModels) {
-      return NextResponse.json({ ok: false, error: 'This provider does not support listing models' });
+      const models = getRegistryModels(provider as ProviderId);
+      return NextResponse.json({ ok: true, models });
     }
 
     const cfg = effectiveAiConfig(provider as ProviderId);
@@ -52,6 +56,16 @@ export async function POST(req: NextRequest) {
   }
 }
 
+/** Return model IDs from pi-ai's static registry for providers without a remote /models API. */
+function getRegistryModels(provider: ProviderId): string[] {
+  try {
+    const models = piGetModels(toPiProvider(provider) as any);
+    return models.map((m: any) => m.id as string).filter(Boolean).sort();
+  } catch {
+    return [];
+  }
+}
+
 async function fetchModels(provider: ProviderId, apiKey: string, baseUrl: string, signal: AbortSignal): Promise<string[]> {
   if (provider === 'anthropic') {
     return fetchAnthropicModels(apiKey, signal);

package/app/components/Editor.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
 import { EditorView, basicSetup } from 'codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { EditorState } from '@codemirror/state';
+import { Image as ImageIcon } from 'lucide-react';
+import { useEditorImageUpload } from '@/hooks/useEditorImageUpload';
+import { toast } from '@/lib/toast';
 
 interface EditorProps {
   value: string;
@@ -65,6 +68,54 @@ export default function Editor({ value, onChange, language = 'markdown' }: Edito
   // Track whether update is from external value change
   const isExternalUpdate = useRef(false);
 
+  const { uploadToMedia, isUploading } = useEditorImageUpload();
+  const uploadRef = useRef(uploadToMedia);
+  uploadRef.current = uploadToMedia;
+  const [isMarkdown] = useState(language === 'markdown');
+
+  // Stable image insertion function via ref
+  const insertImagesRef = useRef(async (files: File[]) => {});
+  insertImagesRef.current = async (files: File[]) => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    try {
+      const uploadedPaths = await uploadRef.current(files);
+
+      for (const p of uploadedPaths) {
+        const md = `![image](${p})\n`;
+        view.dispatch({
+          changes: {
+            from: view.state.selection.main.head,
+            insert: md,
+          },
+        });
+      }
+
+      toast.success('Images inserted');
+    } catch (err) {
+      toast.error('Failed to insert images');
+      console.error(err);
+    }
+  };
+
+  // Handle file picker (image button click)
+  const handlePickImages = useCallback(() => {
+    if (!isMarkdown) return;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.accept = 'image/*';
+    input.onchange = (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files ?? []);
+      if (files.length > 0) {
+        insertImagesRef.current(files);
+      }
+    };
+    input.click();
+  }, [isMarkdown]);
+
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -100,6 +151,52 @@ export default function Editor({ value, onChange, language = 'markdown' }: Edito
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Set up paste and drag/drop handlers
+  useEffect(() => {
+    if (!isMarkdown) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handlePaste = (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      const files: File[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+
+      if (files.length > 0) {
+        e.preventDefault();
+        insertImagesRef.current(files);
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      const files = Array.from(e.dataTransfer?.files ?? []).filter((f) =>
+        f.type.startsWith('image/'),
+      );
+      if (files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        insertImagesRef.current(files);
+      }
+    };
+
+    container.addEventListener('paste', handlePaste as EventListener);
+    container.addEventListener('drop', handleDrop as EventListener);
+
+    return () => {
+      container.removeEventListener('paste', handlePaste as EventListener);
+      container.removeEventListener('drop', handleDrop as EventListener);
+    };
+  }, [isMarkdown]);
+
   // Sync external value changes to editor
   useEffect(() => {
     const view = viewRef.current;
@@ -115,10 +212,31 @@ export default function Editor({ value, onChange, language = 'markdown' }: Edito
   }, [value]);
 
   return (
-    <div
-      ref={containerRef}
-      className="h-full w-full overflow-hidden rounded-lg border border-zinc-800"
-      style={{ minHeight: '400px' }}
-    />
+    <div className="relative h-full w-full flex flex-col">
+      {/* Image insert button for markdown mode */}
+      {isMarkdown && (
+        <div className="px-2 py-1.5 border-b border-zinc-800 bg-zinc-900/50 flex items-center gap-1">
+          <button
+            onClick={handlePickImages}
+            disabled={isUploading}
+            className="p-1.5 rounded hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+            title="Insert images (Ctrl+V or drag & drop)"
+          >
+            <ImageIcon size={14} />
+            <span>Images</span>
+          </button>
+          {isUploading && (
+            <span className="text-xs text-muted-foreground ml-2">Uploading...</span>
+          )}
+        </div>
+      )}
+
+      {/* Editor container */}
+      <div
+        ref={containerRef}
+        className="h-full w-full overflow-hidden rounded-lg border border-zinc-800"
+        style={{ minHeight: '400px' }}
+      />
+    </div>
   );
 }

package/app/components/MarkdownView.tsx

@@ -9,6 +9,7 @@ import { useState, useCallback } from 'react';
 import { Copy, Check, X } from 'lucide-react';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
+import { resolveImagePath } from '@/lib/image';
 import type { Components } from 'react-markdown';
 
 interface MarkdownViewProps {
@@ -118,8 +119,9 @@ const components: Components = {
   img({ src, alt, node, ...rest }) {
     void node;
     if (!src) return null;
+    const resolvedSrc = typeof src === 'string' ? resolveImagePath(src) : src;
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt ?? ''} {...stripNonDom(rest)} />;
+    return <img src={resolvedSrc} alt={alt ?? ''} {...stripNonDom(rest)} />;
   },
 };
 

package/app/components/WysiwygEditor.tsx

@@ -7,11 +7,27 @@ import Placeholder from '@tiptap/extension-placeholder';
 import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
 import { Table } from '@tiptap/extension-table';
 import { TableRow } from '@tiptap/extension-table';
 import { TableCell } from '@tiptap/extension-table';
 import { TableHeader } from '@tiptap/extension-table';
 import { Markdown } from 'tiptap-markdown';
+import { useEditorImageUpload } from '@/hooks/useEditorImageUpload';
+import { resolveImagePath } from '@/lib/image';
+import { toast } from '@/lib/toast';
+
+/**
+ * Custom Image extension that resolves `/.media/` paths to API URLs in the DOM,
+ * while keeping the raw path in the markdown serialization.
+ */
+const ResolvedImage = Image.extend({
+  renderHTML({ HTMLAttributes }) {
+    const src = HTMLAttributes.src;
+    const resolvedSrc = typeof src === 'string' ? resolveImagePath(src) : src;
+    return ['img', { ...HTMLAttributes, src: resolvedSrc }];
+  },
+});
 
 interface WysiwygEditorProps {
   value: string;
@@ -22,6 +38,10 @@ export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
 
+  const { uploadToMedia, isUploading } = useEditorImageUpload();
+  const uploadRef = useRef(uploadToMedia);
+  uploadRef.current = uploadToMedia;
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -36,6 +56,9 @@ export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
       TaskList,
       TaskItem.configure({ nested: true }),
       Link.configure({ openOnClick: false, autolink: true }),
+      ResolvedImage.configure({
+        HTMLAttributes: { class: 'rounded-md max-w-full' },
+      }),
       Table.configure({ resizable: false }),
       TableRow,
       TableHeader,
@@ -55,6 +78,65 @@ export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
     immediatelyRender: false,
   });
 
+  // Set up drag/drop and paste handlers on editor mount
+  useEffect(() => {
+    if (!editor) return;
+
+    const editorDom = editor.view.dom;
+
+    const handleImageInsert = async (files: File[]) => {
+      if (!editor) return;
+      try {
+        const uploadedPaths = await uploadRef.current(files);
+        for (const p of uploadedPaths) {
+          editor.chain().focus().setImage({ src: p }).run();
+        }
+        toast.success('Images inserted');
+      } catch (err) {
+        toast.error('Failed to insert images');
+        console.error(err);
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      const files = Array.from(e.dataTransfer?.files ?? []).filter((f) =>
+        f.type.startsWith('image/'),
+      );
+      if (files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleImageInsert(files);
+      }
+    };
+
+    const handlePaste = (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      const files: File[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+
+      if (files.length > 0) {
+        e.preventDefault();
+        handleImageInsert(files);
+      }
+    };
+
+    editorDom.addEventListener('drop', handleDrop as EventListener);
+    editorDom.addEventListener('paste', handlePaste as EventListener);
+
+    return () => {
+      editorDom.removeEventListener('drop', handleDrop as EventListener);
+      editorDom.removeEventListener('paste', handlePaste as EventListener);
+    };
+  }, [editor]);
+
   // Sync external value changes (e.g. cancel → revert) without full re-mount
   const lastMd = useRef(value);
   useEffect(() => {
@@ -69,6 +151,14 @@ export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
 
   return (
     <div className="wysiwyg-wrapper h-full overflow-y-auto px-8 py-6">
+      {isUploading && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg px-6 py-4 text-center shadow-lg">
+            <div className="animate-spin inline-block w-5 h-5 border-2 border-primary border-t-transparent rounded-full" />
+            <p className="mt-2 text-sm text-muted-foreground">Uploading images...</p>
+          </div>
+        </div>
+      )}
       <EditorContent editor={editor} />
     </div>
   );