@geminilight/mindos 0.6.28 → 0.6.30

package/app/app/api/ask/route.ts

@@ -15,7 +15,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import fs from 'fs';
 import path from 'path';
 import { getFileContent, getMindRoot } from '@/lib/fs';
-import { getModelConfig } from '@/lib/agent/model';
+import { getModelConfig, hasImages } from '@/lib/agent/model';
 import { getRequestScopedTools, getOrganizeTools, WRITE_TOOLS, truncate } from '@/lib/agent/tools';
 import { AGENT_SYSTEM_PROMPT, ORGANIZE_SYSTEM_PROMPT } from '@/lib/agent/prompt';
 import { toAgentMessages } from '@/lib/agent/to-agent-messages';
@@ -25,8 +25,16 @@ import { MindOSError, apiError, ErrorCodes } from '@/lib/errors';
 import { metrics } from '@/lib/metrics';
 import { assertNotProtected } from '@/lib/core';
 import { scanExtensionPaths } from '@/lib/pi-integration/extensions';
+import { createSession, promptStream, closeSession } from '@/lib/acp/session';
+import type { AcpSessionUpdate } from '@/lib/acp/types';
 import type { Message as FrontendMessage } from '@/lib/types';
 
+/** Safe JSON parse — returns {} on invalid input */
+function safeParseJson(raw: string | undefined): Record<string, unknown> {
+  if (!raw) return {};
+  try { return JSON.parse(raw); } catch { return {}; }
+}
+
 // ---------------------------------------------------------------------------
 // MindOS SSE format — 6 event types (front-back contract)
 // ---------------------------------------------------------------------------
@@ -254,6 +262,8 @@ export async function POST(req: NextRequest) {
     maxSteps?: number;
     /** 'organize' = lean prompt for file import organize; default = full prompt */
     mode?: 'organize' | 'default';
+    /** ACP agent selection: if present, route to ACP instead of MindOS */
+    selectedAcpAgent?: { id: string; name: string } | null;
   };
   try {
     body = await req.json();
@@ -261,7 +271,7 @@ export async function POST(req: NextRequest) {
     return apiError(ErrorCodes.INVALID_REQUEST, 'Invalid JSON body', 400);
   }
 
-  const { messages, currentFile, attachedFiles, uploadedFiles } = body;
+  const { messages, currentFile, attachedFiles, uploadedFiles, selectedAcpAgent } = body;
   const isOrganizeMode = body.mode === 'organize';
 
   // Read agent config from settings
@@ -433,15 +443,18 @@ export async function POST(req: NextRequest) {
   }
 
   try {
-    const { model, modelName, apiKey, provider } = getModelConfig();
+    const { model, modelName, apiKey, provider } = getModelConfig({ hasImages: hasImages(messages) });
 
     // Convert frontend messages to AgentMessage[]
     const agentMessages = toAgentMessages(messages);
 
     // Extract the last user message for agent.prompt()
-    const lastUserContent = messages.length > 0 && messages[messages.length - 1].role === 'user'
-      ? messages[messages.length - 1].content
-      : '';
+    const lastMsg = messages.length > 0 ? messages[messages.length - 1] : null;
+    const lastUserContent = lastMsg?.role === 'user' ? lastMsg.content : '';
+    // Extract images for prompt options (pi-ai ImageContent format, skip stripped)
+    const lastUserImages = lastMsg?.role === 'user' && lastMsg.images?.length
+      ? lastMsg.images.filter((img: any) => img.data).map((img: any) => ({ type: 'image' as const, data: img.data, mimeType: img.mimeType }))
+      : undefined;
 
     // History = all messages except the last user message (agent.prompt adds it)
     const historyMessages = agentMessages.slice(0, -1);
@@ -603,15 +616,105 @@ export async function POST(req: NextRequest) {
           }
         });
 
-        session.prompt(lastUserContent).then(() => {
-          metrics.recordRequest(Date.now() - requestStartTime);
-          if (!hasContent && lastModelError) {
-            send({ type: 'error', message: lastModelError });
+        // ── Route to ACP agent if selected, otherwise use MindOS agent ──
+        const runAgent = async () => {
+          if (selectedAcpAgent) {
+            // Route to ACP agent with real-time streaming
+            let acpSessionId: string | undefined;
+            try {
+              const acpSession = await createSession(selectedAcpAgent.id, {
+                cwd: getMindRoot(),
+              });
+              acpSessionId = acpSession.id;
+
+              await promptStream(acpSessionId, lastUserContent, (update: AcpSessionUpdate) => {
+                switch (update.type) {
+                  // Text chunks → standard text_delta
+                  case 'agent_message_chunk':
+                  case 'text':
+                    if (update.text) {
+                      hasContent = true;
+                      send({ type: 'text_delta', delta: update.text });
+                    }
+                    break;
+
+                  // Agent thinking → thinking_delta (reuses existing Anthropic thinking UI)
+                  case 'agent_thought_chunk':
+                    if (update.text) {
+                      hasContent = true;
+                      send({ type: 'thinking_delta', delta: update.text });
+                    }
+                    break;
+
+                  // Tool calls → tool_start (reuses existing tool call UI)
+                  case 'tool_call':
+                    if (update.toolCall) {
+                      hasContent = true;
+                      send({
+                        type: 'tool_start',
+                        toolCallId: update.toolCall.toolCallId,
+                        toolName: update.toolCall.title ?? update.toolCall.kind ?? 'tool',
+                        args: safeParseJson(update.toolCall.rawInput),
+                      });
+                    }
+                    break;
+
+                  // Tool call updates → tool_end when completed/failed
+                  case 'tool_call_update':
+                    if (update.toolCall && (update.toolCall.status === 'completed' || update.toolCall.status === 'failed')) {
+                      send({
+                        type: 'tool_end',
+                        toolCallId: update.toolCall.toolCallId,
+                        output: update.toolCall.rawOutput ?? '',
+                        isError: update.toolCall.status === 'failed',
+                      });
+                    }
+                    break;
+
+                  // Plan → emit as text with structured format
+                  case 'plan':
+                    if (update.plan?.entries) {
+                      const planText = update.plan.entries
+                        .map(e => {
+                          const icon = e.status === 'completed' ? '\u2705' : e.status === 'in_progress' ? '\u26a1' : '\u23f3';
+                          return `${icon} ${e.content}`;
+                        })
+                        .join('\n');
+                      send({ type: 'text_delta', delta: `\n\n${planText}\n\n` });
+                    }
+                    break;
+
+                  // Error → stream error
+                  case 'error':
+                    send({ type: 'error', message: update.error ?? 'ACP agent error' });
+                    break;
+                }
+              });
+
+              send({ type: 'done' });
+            } catch (acpErr) {
+              const errMsg = acpErr instanceof Error ? acpErr.message : String(acpErr);
+              send({ type: 'error', message: `ACP Agent Error: ${errMsg}` });
+            } finally {
+              if (acpSessionId) {
+                await closeSession(acpSessionId).catch(() => {});
+              }
+            }
+            controller.close();
           } else {
-            send({ type: 'done' });
+            // Route to MindOS agent (existing logic)
+            await session.prompt(lastUserContent, lastUserImages ? { images: lastUserImages } : undefined);
+            metrics.recordRequest(Date.now() - requestStartTime);
+            if (!hasContent && lastModelError) {
+              send({ type: 'error', message: lastModelError });
+            } else {
+              send({ type: 'done' });
+            }
+            controller.close();
           }
-          controller.close();
-        }).catch((err) => {
+        };
+
+        runAgent().catch((err) => {
           metrics.recordRequest(Date.now() - requestStartTime);
           metrics.recordError();
           send({ type: 'error', message: err instanceof Error ? err.message : String(err) });

package/app/app/api/workflows/route.ts

@@ -0,0 +1,156 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import YAML from 'js-yaml';
+import { getMindRoot } from '@/lib/fs';
+
+const WORKFLOWS_DIR = '.mindos/workflows';
+
+function getWorkflowsDir(): string {
+  return path.join(getMindRoot(), WORKFLOWS_DIR);
+}
+
+interface WorkflowListItem {
+  path: string;
+  fileName: string;
+  title: string;
+  description?: string;
+  stepCount: number;
+  mtime: number;
+  error?: string;
+}
+
+function listWorkflows(): WorkflowListItem[] {
+  const dir = getWorkflowsDir();
+  if (!fs.existsSync(dir)) return [];
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const items: WorkflowListItem[] = [];
+
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    if (!/\.flow\.(yaml|yml)$/i.test(entry.name)) continue;
+
+    const fullPath = path.join(dir, entry.name);
+    const relativePath = path.join(WORKFLOWS_DIR, entry.name);
+    const stat = fs.statSync(fullPath);
+
+    try {
+      const content = fs.readFileSync(fullPath, 'utf-8');
+      const parsed = YAML.load(content, { schema: YAML.JSON_SCHEMA }) as Record<string, unknown> | null;
+
+      if (!parsed || typeof parsed !== 'object') {
+        items.push({
+          path: relativePath,
+          fileName: entry.name,
+          title: entry.name.replace(/\.flow\.(yaml|yml)$/i, ''),
+          stepCount: 0,
+          mtime: stat.mtimeMs,
+          error: 'Invalid YAML',
+        });
+        continue;
+      }
+
+      const steps = Array.isArray(parsed.steps) ? parsed.steps : [];
+      items.push({
+        path: relativePath,
+        fileName: entry.name,
+        title: typeof parsed.title === 'string' ? parsed.title : entry.name.replace(/\.flow\.(yaml|yml)$/i, ''),
+        description: typeof parsed.description === 'string' ? parsed.description : undefined,
+        stepCount: steps.length,
+        mtime: stat.mtimeMs,
+      });
+    } catch (err) {
+      items.push({
+        path: relativePath,
+        fileName: entry.name,
+        title: entry.name.replace(/\.flow\.(yaml|yml)$/i, ''),
+        stepCount: 0,
+        mtime: stat.mtimeMs,
+        error: err instanceof Error ? err.message : 'Parse error',
+      });
+    }
+  }
+
+  // Sort by mtime descending (most recent first)
+  items.sort((a, b) => b.mtime - a.mtime);
+  return items;
+}
+
+const BLANK_TEMPLATE = `title: {TITLE}
+description: ""
+
+steps:
+  - id: step-1
+    name: Step 1
+    prompt: |
+      Describe what this step should do.
+`;
+
+export async function GET() {
+  try {
+    const workflows = listWorkflows();
+    return NextResponse.json({ workflows });
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'Failed to list workflows' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const name = typeof body.name === 'string' ? body.name.trim() : '';
+    if (!name) {
+      return NextResponse.json({ error: 'name is required' }, { status: 400 });
+    }
+
+    // Sanitize filename
+    const safeName = name.replace(/[/\\:*?"<>|]/g, '-');
+    const fileName = `${safeName}.flow.yaml`;
+    const dir = getWorkflowsDir();
+
+    // Create Workflows dir if needed
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    const fullPath = path.join(dir, fileName);
+    if (fs.existsSync(fullPath)) {
+      return NextResponse.json({ error: 'Workflow already exists' }, { status: 409 });
+    }
+
+    // Generate content from template or blank
+    const template = typeof body.template === 'string' ? body.template : 'blank';
+    let content: string;
+
+    if (template !== 'blank') {
+      // Try to read template from templates dir
+      const templateDir = path.join(getMindRoot(), WORKFLOWS_DIR);
+      const templateFile = fs.readdirSync(templateDir).find(f =>
+        f.toLowerCase().includes(template.toLowerCase()) && /\.workflow\.(yaml|yml)$/i.test(f)
+      );
+      if (templateFile) {
+        content = fs.readFileSync(path.join(templateDir, templateFile), 'utf-8');
+        // Replace title with user's name
+        content = content.replace(/^title:.*$/m, `title: ${name}`);
+      } else {
+        content = BLANK_TEMPLATE.replace('{TITLE}', name);
+      }
+    } else {
+      content = BLANK_TEMPLATE.replace('{TITLE}', name);
+    }
+
+    fs.writeFileSync(fullPath, content, 'utf-8');
+
+    const relativePath = path.join(WORKFLOWS_DIR, fileName);
+    return NextResponse.json({ path: relativePath });
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'Failed to create workflow' },
+      { status: 500 },
+    );
+  }
+}

package/app/app/layout.tsx

@@ -6,6 +6,7 @@ import ShellLayout from '@/components/ShellLayout';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { LocaleProvider } from '@/lib/LocaleContext';
 import ErrorBoundary from '@/components/ErrorBoundary';
+import Toaster from '@/components/ui/Toaster';
 import RegisterSW from './register-sw';
 import UpdateOverlay from '@/components/UpdateOverlay';
 import { cookies } from 'next/headers';
@@ -113,6 +114,7 @@ export default async function RootLayout({
               </ShellLayout>
             </ErrorBoundary>
           </TooltipProvider>
+          <Toaster />
           <RegisterSW />
           <UpdateOverlay />
         </LocaleProvider>

package/app/app/page.tsx

@@ -1,6 +1,8 @@
 import { redirect } from 'next/navigation';
+import fs from 'fs';
+import path from 'path';
 import { readSettings } from '@/lib/settings';
-import { getRecentlyModified, getFileContent, getFileTree } from '@/lib/fs';
+import { getRecentlyModified, getFileContent, getFileTree, getMindRoot } from '@/lib/fs';
 import { getAllRenderers } from '@/lib/renderers/registry';
 import HomeContent from '@/components/HomeContent';
 import type { FileNode } from '@/lib/core/types';
@@ -52,8 +54,11 @@ function getTopLevelDirs(): SpaceInfo[] {
 }
 
 function getExistingFiles(paths: string[]): string[] {
+  const root = getMindRoot();
   return paths.filter(p => {
-    try { getFileContent(p); return true; } catch { return false; }
+    try {
+      return fs.existsSync(path.join(root, p));
+    } catch { return false; }
   });
 }
 

package/app/components/ActivityBar.tsx

@@ -2,13 +2,13 @@
 
 import { useRef, useCallback, useState, useEffect } from 'react';
 import Link from 'next/link';
-import { FolderTree, Search, Settings, RefreshCw, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight, Radio } from 'lucide-react';
+import { FolderTree, Search, Settings, RefreshCw, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight, Radio, Zap } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { DOT_COLORS, getStatusLevel } from './SyncStatusBar';
 import type { SyncStatus } from './settings/SyncTab';
 import Logo from './Logo';
 
-export type PanelId = 'files' | 'search' | 'echo' | 'agents' | 'discover';
+export type PanelId = 'files' | 'search' | 'echo' | 'agents' | 'discover' | 'workflows';
 
 export const RAIL_WIDTH_COLLAPSED = 48;
 export const RAIL_WIDTH_EXPANDED = 180;
@@ -19,6 +19,7 @@ interface ActivityBarProps {
   onEchoClick?: () => void;
   onAgentsClick?: () => void;
   onDiscoverClick?: () => void;
+  onWorkflowsClick?: () => void;
   syncStatus: SyncStatus | null;
   expanded: boolean;
   onExpandedChange: (expanded: boolean) => void;
@@ -82,6 +83,7 @@ export default function ActivityBar({
   onEchoClick,
   onAgentsClick,
   onDiscoverClick,
+  onWorkflowsClick,
   syncStatus,
   expanded,
   onExpandedChange,
@@ -191,8 +193,8 @@ export default function ActivityBar({
         {/* ── Middle: Core panel toggles ── */}
         <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
           <RailButton icon={<FolderTree size={18} />} label={t.sidebar.files} active={activePanel === 'files'} expanded={expanded} onClick={() => toggle('files')} walkthroughId="files-panel" />
-          <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} />
           <RailButton icon={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => onEchoClick ? debounced(onEchoClick) : toggle('echo')} walkthroughId="echo-panel" />
+          <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} />
           <RailButton
             icon={<Bot size={18} />}
             label={t.sidebar.agents}
@@ -201,12 +203,18 @@ export default function ActivityBar({
             onClick={() => onAgentsClick ? debounced(onAgentsClick) : toggle('agents')}
             walkthroughId="agents-panel"
           />
-          <RailButton icon={<Compass size={18} />} label={t.sidebar.discover} active={activePanel === 'discover'} expanded={expanded} onClick={() => onDiscoverClick ? debounced(onDiscoverClick) : toggle('discover')} />
+          <RailButton icon={<Zap size={18} />} label={t.sidebar.workflows ?? 'Flows'} active={activePanel === 'workflows'} expanded={expanded} onClick={() => onWorkflowsClick ? debounced(onWorkflowsClick) : toggle('workflows')} />
         </div>
 
         {/* ── Spacer ── */}
         <div className="flex-1" />
 
+        {/* ── Secondary: Explore ── */}
+        <div className={`${expanded ? 'mx-3' : 'mx-auto w-6'} border-t border-border`} />
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton icon={<Compass size={18} />} label={t.sidebar.discover} active={activePanel === 'discover'} expanded={expanded} onClick={() => onDiscoverClick ? debounced(onDiscoverClick) : toggle('discover')} />
+        </div>
+
         {/* ── Bottom: Action buttons (not panel toggles) ── */}
         <div className={`${expanded ? 'mx-3' : 'mx-auto w-6'} border-t border-border`} />
         <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>

package/app/components/AskModal.tsx

@@ -2,18 +2,20 @@
 
 import { useLocale } from '@/lib/LocaleContext';
 import AskContent from '@/components/ask/AskContent';
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
 
 interface AskModalProps {
   open: boolean;
   onClose: () => void;
   currentFile?: string;
   initialMessage?: string;
+  initialAcpAgent?: AcpAgentSelection | null;
   onFirstMessage?: () => void;
   askMode?: 'panel' | 'popup';
   onModeSwitch?: () => void;
 }
 
-export default function AskModal({ open, onClose, currentFile, initialMessage, onFirstMessage, askMode, onModeSwitch }: AskModalProps) {
+export default function AskModal({ open, onClose, currentFile, initialMessage, initialAcpAgent, onFirstMessage, askMode, onModeSwitch }: AskModalProps) {
   const { t } = useLocale();
 
   if (!open) return null;
@@ -35,6 +37,7 @@ export default function AskModal({ open, onClose, currentFile, initialMessage, o
           onClose={onClose}
           currentFile={currentFile}
           initialMessage={initialMessage}
+          initialAcpAgent={initialAcpAgent}
           onFirstMessage={onFirstMessage}
           askMode={askMode}
           onModeSwitch={onModeSwitch}

package/app/components/DirView.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useSyncExternalStore, useMemo } from 'react';
+import { useSyncExternalStore, useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import Link from 'next/link';
-import { FileText, Table, Folder, FolderOpen, LayoutGrid, List, FilePlus, ScrollText, BookOpen } from 'lucide-react';
+import { FileText, Table, Folder, FolderOpen, LayoutGrid, List, FilePlus, ScrollText, BookOpen, Copy } from 'lucide-react';
 import Breadcrumb from '@/components/Breadcrumb';
 import { encodePath, relativeTime } from '@/lib/utils';
 import { FileNode } from '@/lib/types';
@@ -11,6 +11,10 @@ import { useLocale } from '@/lib/LocaleContext';
 
 const SYSTEM_FILES = new Set(['INSTRUCTION.md', 'README.md']);
 
+async function copyPathToClipboard(path: string) {
+  try { await navigator.clipboard.writeText(path); } catch { /* noop */ }
+}
+
 interface DirViewProps {
   dirPath: string;
   entries: FileNode[];
@@ -126,12 +130,57 @@ function SpacePreviewSection({ preview, dirPath }: {
   );
 }
 
+// ─── Context Menu for DirView entries ─────────────────────────────────────────
+
+function DirContextMenu({ x, y, path, label, onClose }: {
+  x: number; y: number; path: string; label: string; onClose: () => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => { document.removeEventListener('mousedown', handleClick); document.removeEventListener('keydown', handleKey); };
+  }, [onClose]);
+
+  // Keep within viewport
+  const adjX = typeof window !== 'undefined' ? Math.min(x, window.innerWidth - 200) : x;
+  const adjY = typeof window !== 'undefined' ? Math.min(y, window.innerHeight - 60) : y;
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 min-w-[160px] bg-card border border-border rounded-lg shadow-lg py-1"
+      style={{ top: adjY, left: adjX }}
+    >
+      <button
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+        onClick={() => { copyPathToClipboard(path); onClose(); }}
+      >
+        <Copy size={14} className="shrink-0" /> {t.fileTree.copyPath}
+      </button>
+    </div>
+  );
+}
+
 // ─── DirView ──────────────────────────────────────────────────────────────────
 
 export default function DirView({ dirPath, entries, spacePreview }: DirViewProps) {
   const [view, setView] = useDirViewPref();
   const { t } = useLocale();
   const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; path: string } | null>(null);
+
+  const handleCtx = useCallback((e: React.MouseEvent, path: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCtxMenu({ x: e.clientX, y: e.clientY, path });
+  }, []);
 
   const visibleEntries = useMemo(() => {
     if (spacePreview) {
@@ -198,6 +247,7 @@ export default function DirView({ dirPath, entries, spacePreview }: DirViewProps
                 <Link
                   key={entry.path}
                   href={`/view/${encodePath(entry.path)}`}
+                  onContextMenu={(e) => handleCtx(e, entry.path)}
                   className={
                     entry.type === 'directory'
                       ? 'flex flex-col items-center gap-1.5 p-3 rounded-xl border border-border bg-card hover:bg-accent hover:border-border/80 transition-all duration-100 text-center'
@@ -227,6 +277,7 @@ export default function DirView({ dirPath, entries, spacePreview }: DirViewProps
                 <Link
                   key={entry.path}
                   href={`/view/${encodePath(entry.path)}`}
+                  onContextMenu={(e) => handleCtx(e, entry.path)}
                   className="flex items-center gap-3 px-4 py-3 bg-card hover:bg-accent transition-colors duration-100"
                 >
                   <FileIcon node={entry} />
@@ -246,6 +297,17 @@ export default function DirView({ dirPath, entries, spacePreview }: DirViewProps
           )}
         </div>
       </div>
+
+      {/* Context menu */}
+      {ctxMenu && (
+        <DirContextMenu
+          x={ctxMenu.x}
+          y={ctxMenu.y}
+          path={ctxMenu.path}
+          label={t.fileTree.copyPath}
+          onClose={() => setCtxMenu(null)}
+        />
+      )}
     </div>
   );
 }

package/app/components/FileTree.tsx

@@ -6,7 +6,7 @@ import { FileNode } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import {
   ChevronDown, FileText, Table, Folder, FolderOpen, Plus, Loader2,
-  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy,
+  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy, MoreHorizontal,
 } from 'lucide-react';
 import { createFileAction, deleteFileAction, renameFileAction, renameSpaceAction, deleteSpaceAction, convertToSpaceAction, deleteFolderAction } from '@/lib/actions';
 import { useLocale } from '@/lib/LocaleContext';
@@ -567,10 +567,11 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
   const [renaming, setRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(node.name);
   const [isPending, startTransition] = useTransition();
-  const [isPendingDelete, startDeleteTransition] = useTransition();
+  const [, startDeleteTransition] = useTransition();
   const renameRef = useRef<HTMLInputElement>(null);
   const { t } = useLocale();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
 
   const handleClick = useCallback(() => {
     if (renaming) return;
@@ -611,6 +612,12 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
     e.dataTransfer.effectAllowed = 'copy';
   }, [node.path]);
 
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
   if (renaming) {
     return (
       <div className="relative px-2 py-0.5" style={{ paddingLeft: `${depth * 12 + 8}px` }}>
@@ -636,6 +643,7 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
       <button
         onClick={handleClick}
         onDoubleClick={startRename}
+        onContextMenu={handleContextMenu}
         draggable
         onDragStart={handleDragStart}
         data-filepath={node.path}
@@ -653,16 +661,38 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
         <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
       </button>
       <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/file:flex items-center gap-0.5">
-        <button onClick={() => copyPathToClipboard(node.path)} className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.fileTree.copyPath}>
-          <Copy size={12} />
-        </button>
-        <button onClick={startRename} className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.fileTree.rename}>
-          <Pencil size={12} />
-        </button>
-        <button onClick={handleDelete} className="p-0.5 rounded text-muted-foreground hover:text-error hover:bg-muted transition-colors" title={t.fileTree.delete}>
-          {isPendingDelete ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            const rect = e.currentTarget.getBoundingClientRect();
+            setContextMenu({ x: rect.left, y: rect.bottom + 4 });
+          }}
+          className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          title="More"
+        >
+          <MoreHorizontal size={14} />
         </button>
       </div>
+      {contextMenu && (
+        <ContextMenuShell
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          menuHeight={140}
+        >
+          <button className={MENU_ITEM} onClick={() => { copyPathToClipboard(node.path); setContextMenu(null); }}>
+            <Copy size={14} className="shrink-0" /> {t.fileTree.copyPath}
+          </button>
+          <button className={MENU_ITEM} onClick={(e) => { setContextMenu(null); startRename(e); }}>
+            <Pencil size={14} className="shrink-0" /> {t.fileTree.rename}
+          </button>
+          <div className={MENU_DIVIDER} />
+          <button className={MENU_DANGER} onClick={(e) => { setContextMenu(null); handleDelete(e); }}>
+            <Trash2 size={14} className="shrink-0" /> {t.fileTree.delete}
+          </button>
+        </ContextMenuShell>
+      )}
       <ConfirmDialog
         open={showDeleteConfirm}
         title={t.fileTree.delete}