@geminilight/mindos 0.6.56 → 0.6.58

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>
   );

package/app/components/agents/AgentDetailContent.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
-  ArrowLeft, Activity, Globe, Key, Loader2, Server, Search,
+  ArrowLeft, Activity, Globe, Key, Loader2, MoreHorizontal, Pencil, Server, Search,
   Shield, ShieldCheck, Trash2, Wifi, WifiOff, Zap,
   FileEdit, FilePlus, Clock, Terminal, CheckCircle2, AlertCircle, ChevronDown, BookOpen,
 } from 'lucide-react';
@@ -25,6 +25,7 @@ import {
 } from './agents-content-model';
 import { AgentAvatar, ActionButton, ConfirmDialog, PillButton } from './AgentsPrimitives';
 import SkillDetailPopover from './SkillDetailPopover';
+import CustomAgentModal from './CustomAgentModal';
 
 export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const { t } = useLocale();
@@ -49,6 +50,33 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const [mcpHint, setMcpHint] = useState<string | null>(null);
   const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
 
+  // Custom agent actions
+  const [customEditOpen, setCustomEditOpen] = useState(false);
+  const [confirmCustomRemove, setConfirmCustomRemove] = useState(false);
+
+  const handleCustomRemoveConfirmed = useCallback(async () => {
+    if (!agent?.isCustom) return;
+    try {
+      const res = await fetch('/api/agents/custom', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key: agent.key }),
+      });
+      if (res.ok) {
+        toast.success(a.overview.customAgentRemoved(agent.name));
+        mcp.refresh();
+        window.location.href = '/agents';
+      } else {
+        const data = await res.json();
+        toast.error(data.error || a.overview.customAgentFailedRemove);
+      }
+    } catch {
+      toast.error(a.overview.customAgentNetworkError);
+    } finally {
+      setConfirmCustomRemove(false);
+    }
+  }, [agent, a.overview, mcp]);
+
   const filteredSkills = useMemo(
     () =>
       filterSkillsForAgentDetail(mcp.skills, {
@@ -263,6 +291,28 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
               <span>{agent.skillMode ?? a.na}</span>
             </div>
           </div>
+          {agent.isCustom && (
+            <div className="flex items-center gap-1 shrink-0">
+              <button
+                type="button"
+                onClick={() => setCustomEditOpen(true)}
+                className="w-8 h-8 rounded-lg flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={a.overview.customAgentEdit as string}
+                title={a.overview.customAgentEdit as string}
+              >
+                <Pencil size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmCustomRemove(true)}
+                className="w-8 h-8 rounded-lg flex items-center justify-center text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={a.overview.customAgentRemove as string}
+                title={a.overview.customAgentRemove as string}
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          )}
         </div>
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-2xs text-muted-foreground/50 px-5 py-2 border-t border-border/40">
           <span>{agent.format} <span className="text-muted-foreground/30">·</span> {formatRelativeTime(agent.runtimeLastActivityAt)}</span>
@@ -602,6 +652,29 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         onDelete={handleDeleteSkillFromPopover}
         onRefresh={mcp.refresh}
       />
+
+      {/* Custom agent edit modal */}
+      {agent?.isCustom && (
+        <CustomAgentModal
+          open={customEditOpen}
+          onClose={() => setCustomEditOpen(false)}
+          onSuccess={() => { mcp.refresh(); setCustomEditOpen(false); }}
+          existingAgents={mcp.agents}
+          editAgent={agent}
+        />
+      )}
+
+      {/* Custom agent remove confirmation */}
+      <ConfirmDialog
+        open={confirmCustomRemove}
+        title={agent ? a.overview.customAgentRemoveTitle(agent.name) : ''}
+        message={a.overview.customAgentRemoveMessage as string}
+        confirmLabel={a.overview.customAgentRemoveConfirm as string}
+        cancelLabel={a.detail.skillCancel}
+        onConfirm={handleCustomRemoveConfirmed}
+        onCancel={() => setConfirmCustomRemove(false)}
+        variant="destructive"
+      />
     </div>
   );
 }

package/app/components/agents/AgentsContentPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { toast } from '@/lib/toast';
 import { useLocale } from '@/lib/stores/locale-store';
 import { useMcpData } from '@/lib/stores/mcp-store';
@@ -18,6 +18,9 @@ import AgentsSkillsSection from './AgentsSkillsSection';
 import AgentsPanelA2aTab from './AgentsPanelA2aTab';
 import AgentsPanelSessionsTab from './AgentsPanelSessionsTab';
 import AgentActivitySection from './AgentActivitySection';
+import CustomAgentModal from './CustomAgentModal';
+import { ConfirmDialog } from './AgentsPrimitives';
+import type { AgentInfo } from '@/components/settings/types';
 
 export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab }) {
   const { t } = useLocale();
@@ -80,6 +83,54 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
     [mcp.skills],
   );
 
+  /* ─── Custom Agent Modal State ─── */
+  const [customModalOpen, setCustomModalOpen] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<AgentInfo | null>(null);
+  const [removeAgent, setRemoveAgent] = useState<AgentInfo | null>(null);
+  const [removing, setRemoving] = useState(false);
+
+  const handleAddCustomAgent = useCallback(() => {
+    setEditingAgent(null);
+    setCustomModalOpen(true);
+  }, []);
+
+  const handleEditCustomAgent = useCallback((agent: AgentInfo) => {
+    setEditingAgent(agent);
+    setCustomModalOpen(true);
+  }, []);
+
+  const handleRemoveCustomAgent = useCallback((agent: AgentInfo) => {
+    setRemoveAgent(agent);
+  }, []);
+
+  const handleConfirmRemove = useCallback(async () => {
+    if (!removeAgent) return;
+    setRemoving(true);
+    try {
+      const res = await fetch('/api/agents/custom', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key: removeAgent.key }),
+      });
+      if (res.ok) {
+        toast.success(a.overview.customAgentRemoved(removeAgent.name));
+        mcp.refresh();
+      } else {
+        const data = await res.json();
+        toast.error(data.error || a.overview.customAgentFailedRemove);
+      }
+    } catch {
+      toast.error(a.overview.customAgentNetworkError);
+    } finally {
+      setRemoving(false);
+      setRemoveAgent(null);
+    }
+  }, [removeAgent, mcp, a.overview]);
+
+  const handleCustomAgentSuccess = useCallback(() => {
+    mcp.refresh();
+  }, [mcp]);
+
   const copySnippet = async (agentKey: string) => {
     const agent = mcp.agents.find((item) => item.key === agentKey);
     if (!agent) return;
@@ -111,6 +162,9 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
           allAgents={mcp.agents}
           pulseCopy={a.workspacePulse}
           a2aCount={a2a.agents.length}
+          onAddCustomAgent={handleAddCustomAgent}
+          onEditCustomAgent={handleEditCustomAgent}
+          onRemoveCustomAgent={handleRemoveCustomAgent}
         />
       )}
 
@@ -147,6 +201,27 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
       {tab === 'activity' && (
         <AgentActivitySection />
       )}
+
+      {/* Custom Agent Modal */}
+      <CustomAgentModal
+        open={customModalOpen}
+        onClose={() => { setCustomModalOpen(false); setEditingAgent(null); }}
+        onSuccess={handleCustomAgentSuccess}
+        existingAgents={mcp.agents}
+        editAgent={editingAgent}
+      />
+
+      {/* Remove Confirmation */}
+      <ConfirmDialog
+        open={!!removeAgent}
+        title={removeAgent ? a.overview.customAgentRemoveTitle(removeAgent.name) : ''}
+        message={a.overview.customAgentRemoveMessage as string}
+        confirmLabel={a.overview.customAgentRemoveConfirm as string}
+        cancelLabel={a.overview.customAgentCancel as string}
+        onConfirm={handleConfirmRemove}
+        onCancel={() => setRemoveAgent(null)}
+        variant="destructive"
+      />
     </div>
   );
 }