@geminilight/mindos 0.6.55 → 0.6.57

package/_standalone/.next/types/routes.d.ts

@@ -2,7 +2,7 @@
 // Do not edit this file manually
 
 type AppRoutes = "/" | "/agents" | "/agents/[agentKey]" | "/changes" | "/echo" | "/echo/[segment]" | "/explore" | "/help" | "/inbox/history" | "/login" | "/setup" | "/trash" | "/view/[...path]" | "/wiki"
-type AppRouteHandlerRoutes = "/.well-known/agent-card.json" | "/api/a2a" | "/api/a2a/agents" | "/api/a2a/delegations" | "/api/a2a/discover" | "/api/acp/config" | "/api/acp/detect" | "/api/acp/install" | "/api/acp/registry" | "/api/acp/session" | "/api/agent-activity" | "/api/ask" | "/api/ask-sessions" | "/api/auth" | "/api/backlinks" | "/api/bootstrap" | "/api/changes" | "/api/export" | "/api/extract-pdf" | "/api/file" | "/api/file/import" | "/api/file/raw" | "/api/files" | "/api/git" | "/api/graph" | "/api/health" | "/api/inbox" | "/api/init" | "/api/mcp/agents" | "/api/mcp/install" | "/api/mcp/install-skill" | "/api/mcp/restart" | "/api/mcp/status" | "/api/mcp/uninstall" | "/api/monitoring" | "/api/recent-files" | "/api/restart" | "/api/search" | "/api/settings" | "/api/settings/list-models" | "/api/settings/reset-token" | "/api/settings/test-key" | "/api/setup" | "/api/setup/check-path" | "/api/setup/check-port" | "/api/setup/generate-token" | "/api/setup/ls" | "/api/skills" | "/api/sync" | "/api/tree-version" | "/api/uninstall" | "/api/update" | "/api/update-check" | "/api/update-status" | "/api/workflows"
+type AppRouteHandlerRoutes = "/.well-known/agent-card.json" | "/api/a2a" | "/api/a2a/agents" | "/api/a2a/delegations" | "/api/a2a/discover" | "/api/acp/config" | "/api/acp/detect" | "/api/acp/install" | "/api/acp/registry" | "/api/acp/session" | "/api/agent-activity" | "/api/agents/custom" | "/api/agents/custom/detect" | "/api/ask" | "/api/ask-sessions" | "/api/auth" | "/api/backlinks" | "/api/bootstrap" | "/api/changes" | "/api/export" | "/api/extract-pdf" | "/api/file" | "/api/file/import" | "/api/file/raw" | "/api/files" | "/api/git" | "/api/graph" | "/api/health" | "/api/inbox" | "/api/init" | "/api/mcp/agents" | "/api/mcp/install" | "/api/mcp/install-skill" | "/api/mcp/restart" | "/api/mcp/status" | "/api/mcp/uninstall" | "/api/monitoring" | "/api/recent-files" | "/api/restart" | "/api/search" | "/api/settings" | "/api/settings/list-models" | "/api/settings/reset-token" | "/api/settings/test-key" | "/api/setup" | "/api/setup/check-path" | "/api/setup/check-port" | "/api/setup/generate-token" | "/api/setup/ls" | "/api/skills" | "/api/sync" | "/api/tree-version" | "/api/uninstall" | "/api/update" | "/api/update-check" | "/api/update-status" | "/api/workflows"
 type PageRoutes = never
 type LayoutRoutes = "/"
 type RedirectRoutes = never
@@ -25,6 +25,8 @@ interface ParamMap {
   "/api/acp/registry": {}
   "/api/acp/session": {}
   "/api/agent-activity": {}
+  "/api/agents/custom": {}
+  "/api/agents/custom/detect": {}
   "/api/ask": {}
   "/api/ask-sessions": {}
   "/api/auth": {}

package/_standalone/.next/types/validator.ts

@@ -272,6 +272,24 @@ type RouteHandlerConfig<Route extends AppRouteHandlerRoutes = AppRouteHandlerRou
   type __Unused = __Check
 }
 
+// Validate ../../app/api/agents/custom/detect/route.ts
+{
+  type __IsExpected<Specific extends RouteHandlerConfig<"/api/agents/custom/detect">> = Specific
+  const handler = {} as typeof import("../../app/api/agents/custom/detect/route.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
+
+// Validate ../../app/api/agents/custom/route.ts
+{
+  type __IsExpected<Specific extends RouteHandlerConfig<"/api/agents/custom">> = Specific
+  const handler = {} as typeof import("../../app/api/agents/custom/route.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
+
 // Validate ../../app/api/ask-sessions/route.ts
 {
   type __IsExpected<Specific extends RouteHandlerConfig<"/api/ask-sessions">> = Specific

package/_standalone/components/Breadcrumb.tsx

@@ -13,23 +13,27 @@ function FileTypeIcon({ name }: { name: string }) {
 export default function Breadcrumb({ filePath }: { filePath: string }) {
   const parts = filePath.split('/');
   return (
-    <nav className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap">
-      <Link href="/" className="hover:text-foreground transition-colors">
+    <nav className="flex items-center gap-0.5 text-xs text-muted-foreground flex-wrap">
+      <Link
+        href="/"
+        className="p-1.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors"
+        title="Home"
+      >
         <Home size={14} />
       </Link>
       {parts.map((part, i) => {
         const isLast = i === parts.length - 1;
         const href = '/view/' + parts.slice(0, i + 1).map(encodeURIComponent).join('/');
         return (
-          <span key={i} className="flex items-center gap-1">
-            <ChevronRight size={12} className="text-muted-foreground/50" />
+          <span key={i} className="flex items-center gap-0.5">
+            <ChevronRight size={12} className="text-muted-foreground/50 shrink-0" />
             {isLast ? (
-              <span className="flex items-center gap-1.5 text-foreground font-medium">
+              <span className="flex items-center gap-1.5 px-2 py-1 text-foreground font-medium">
                 <FileTypeIcon name={part} />
                 <span suppressHydrationWarning>{part}</span>
               </span>
             ) : (
-              <Link href={href} className="px-2 py-0.5 rounded-md hover:bg-muted/50 transition-colors truncate max-w-[200px]" title={part}>
+              <Link href={href} className="px-2 py-1 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors truncate max-w-[200px]" title={part}>
                 <span suppressHydrationWarning>{part}</span>
               </Link>
             )}

package/_standalone/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/_standalone/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/_standalone/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/_standalone/components/agents/AgentsOverviewSection.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import Link from 'next/link';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   AlertTriangle,
   Cable,
   ChevronDown,
   Globe,
+  MoreHorizontal,
+  Plus,
   Server,
   Zap,
 } from 'lucide-react';
@@ -66,6 +68,9 @@ export default function AgentsOverviewSection({
   allAgents,
   pulseCopy,
   a2aCount,
+  onAddCustomAgent,
+  onEditCustomAgent,
+  onRemoveCustomAgent,
 }: {
   copy: OverviewCopy;
   buckets: AgentBuckets;
@@ -78,6 +83,9 @@ export default function AgentsOverviewSection({
   allAgents: AgentInfo[];
   pulseCopy: PulseCopy;
   a2aCount?: number;
+  onAddCustomAgent?: () => void;
+  onEditCustomAgent?: (agent: AgentInfo) => void;
+  onRemoveCustomAgent?: (agent: AgentInfo) => void;
 }) {
   const allHealthy = riskQueue.length === 0 && (!mcpEnabled || mcpRunning);
   const [riskOpen, setRiskOpen] = useState(false);
@@ -85,7 +93,7 @@ export default function AgentsOverviewSection({
   const sortedAgents = useMemo(
     () =>
       [...allAgents]
-        .filter(a => a.present) // hide not-found agents from overview
+        .filter(a => a.present || a.isCustom) // custom agents always visible
         .sort((a, b) => {
           const rank = (x: AgentInfo) => (x.installed ? 0 : 1);
           return rank(a) - rank(b) || a.name.localeCompare(b.name);
@@ -216,8 +224,36 @@ export default function AgentsOverviewSection({
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             {sortedAgents.map((agent, i) => (
-              <AgentCard key={agent.key} agent={agent} copy={copy} index={i} mcpEnabled={mcpEnabled} />
+              <AgentCard
+                key={agent.key}
+                agent={agent}
+                copy={copy}
+                index={i}
+                mcpEnabled={mcpEnabled}
+                onEdit={agent.isCustom ? onEditCustomAgent : undefined}
+                onRemove={agent.isCustom ? onRemoveCustomAgent : undefined}
+              />
             ))}
+            {onAddCustomAgent && (
+              <button
+                type="button"
+                onClick={onAddCustomAgent}
+                className="group rounded-xl border-2 border-dashed border-border/60 bg-transparent p-3.5
+                  hover:border-[var(--amber)]/30 hover:bg-muted/20
+                  active:scale-[0.98]
+                  transition-all duration-150
+                  flex flex-col items-center justify-center gap-2 min-h-[100px]
+                  cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={copy.addCustomAgent as string}
+              >
+                <div className="w-8 h-8 rounded-full border-2 border-dashed border-muted-foreground/30 flex items-center justify-center group-hover:border-[var(--amber)]/50 transition-colors duration-150">
+                  <Plus size={16} className="text-muted-foreground/50 group-hover:text-[var(--amber)] transition-colors duration-150" />
+                </div>
+                <span className="text-xs text-muted-foreground/60 group-hover:text-muted-foreground transition-colors duration-150">
+                  {copy.addCustomAgent as string}
+                </span>
+              </button>
+            )}
           </div>
         </section>
       ) : (
@@ -298,16 +334,23 @@ function AgentCard({
   copy,
   index,
   mcpEnabled = true,
+  onEdit,
+  onRemove,
 }: {
   agent: AgentInfo;
   copy: OverviewCopy;
   index: number;
   mcpEnabled?: boolean;
+  onEdit?: (agent: AgentInfo) => void;
+  onRemove?: (agent: AgentInfo) => void;
 }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
   const status = resolveAgentStatus(agent);
   const mcpCount = agent.configuredMcpServerCount ?? agent.configuredMcpServers?.length ?? 0;
   const skillCount = agent.installedSkillCount ?? agent.installedSkillNames?.length ?? 0;
   const hasRuntime = agent.runtimeConversationSignal || agent.runtimeUsageSignal;
+  const isCustom = agent.isCustom;
 
   const statusLabel =
     status === 'connected' ? copy.connected : status === 'detected' ? copy.detected : copy.notFound;
@@ -318,15 +361,64 @@ function AgentCard({
         ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
         : 'bg-error/10 text-error';
 
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [menuOpen]);
+
   return (
     <Link
       href={`/agents/${encodeURIComponent(agent.key)}`}
-      className={`group rounded-xl border border-border bg-card p-3.5
-        hover:border-[var(--amber)]/30 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]
-        active:scale-[0.98]
-        transition-all duration-150
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+      className={cn(
+        'group relative rounded-xl border border-border bg-card p-3.5',
+        'hover:border-[var(--amber)]/30 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]',
+        'active:scale-[0.98]',
+        'transition-all duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        isCustom && 'border-l-2 border-l-[var(--amber)]/40',
+      )}
     >
+      {/* Custom agent "..." menu */}
+      {isCustom && (onEdit || onRemove) && (
+        <div ref={menuRef} className="absolute top-2.5 right-2.5 z-10">
+          <button
+            type="button"
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(!menuOpen); }}
+            className="w-6 h-6 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted opacity-0 group-hover:opacity-100 transition-all duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100"
+            aria-label="Agent options"
+          >
+            <MoreHorizontal size={14} />
+          </button>
+          {menuOpen && (
+            <div className="absolute right-0 top-full mt-1 w-32 bg-card border border-border rounded-lg shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100">
+              {onEdit && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(false); onEdit(agent); }}
+                  className="w-full text-left px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors duration-100 cursor-pointer"
+                >
+                  {copy.customAgentEdit as string}
+                </button>
+              )}
+              {onRemove && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(false); onRemove(agent); }}
+                  className="w-full text-left px-3 py-1.5 text-sm text-destructive hover:bg-muted transition-colors duration-100 cursor-pointer"
+                >
+                  {copy.customAgentRemove as string}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Top row: avatar + name + status */}
       <div className="flex items-center gap-2.5 mb-3">
         <AgentAvatar name={agent.name} status={status} size="sm" />