@geminilight/mindos 0.6.29 → 0.6.31

package/app/app/view/[...path]/ViewPageClient.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useTransition, useCallback, useEffect, useRef, useSyncExternalStore, useMemo, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
-import { Edit3, Save, X, Loader2, LayoutTemplate, ArrowLeft, Share2, FileText, Code } from 'lucide-react';
+import { Edit3, Save, X, Loader2, LayoutTemplate, ArrowLeft, Share2, FileText, Code, MoreHorizontal, Copy, Pencil, Trash2, Star, Download } from 'lucide-react';
 import { lazy } from 'react';
 import MarkdownView from '@/components/MarkdownView';
 import JsonView from '@/components/JsonView';
@@ -17,6 +17,11 @@ import { resolveRenderer, isRendererEnabled } from '@/lib/renderers/registry';
 import { encodePath } from '@/lib/utils';
 import { useLocale } from '@/lib/LocaleContext';
 import DirPicker from '@/components/DirPicker';
+import { renameFileAction, deleteFileAction } from '@/lib/actions';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { buildLineDiff } from '@/components/changes/line-diff';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
+import ExportModal from '@/components/ExportModal';
 
 interface ViewPageClientProps {
   filePath: string;
@@ -42,6 +47,9 @@ export default function ViewPageClient({
   createDraftAction,
 }: ViewPageClientProps) {
   const { t } = useLocale();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(filePath);
+  const [exportOpen, setExportOpen] = useState(false);
   const hydrated = useSyncExternalStore(
     () => () => {},
     () => true,
@@ -55,18 +63,85 @@ export default function ViewPageClient({
   const [editing, setEditing] = useState(initialEditing || content === '');
   const [editContent, setEditContent] = useState(content);
   const [savedContent, setSavedContent] = useState(content);
+
+  // Sync savedContent when server re-renders with new content (e.g. after router.refresh)
+  useEffect(() => {
+    if (!editing) {
+      setSavedContent(content);
+    }
+  }, [content, editing]);
   const [isPending, startTransition] = useTransition();
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [mdViewMode, setMdViewMode] = useState<MdViewMode>('wysiwyg');
   const [findOpen, setFindOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLButtonElement>(null);
+  const moreMenuRef = useRef<HTMLDivElement>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+  const [, startRenameTransition] = useTransition();
 
   const inferredName = filePath.split('/').pop() || 'Untitled.md';
   const [showSaveAs, setShowSaveAs] = useState(isDraft);
   const [saveDir, setSaveDir] = useState('');
   const [saveName, setSaveName] = useState(inferredName);
 
+  // Close more menu on outside click
+  useEffect(() => {
+    if (!moreOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        moreRef.current && !moreRef.current.contains(e.target as Node) &&
+        moreMenuRef.current && !moreMenuRef.current.contains(e.target as Node)
+      ) setMoreOpen(false);
+    };
+    const keyHandler = (e: KeyboardEvent) => { if (e.key === 'Escape') setMoreOpen(false); };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('keydown', keyHandler);
+    return () => { document.removeEventListener('mousedown', handler); document.removeEventListener('keydown', keyHandler); };
+  }, [moreOpen]);
+
+  const handleCopyPath = useCallback(() => {
+    navigator.clipboard.writeText(filePath).catch(() => {});
+    setMoreOpen(false);
+  }, [filePath]);
+
+  const handleStartRename = useCallback(() => {
+    setMoreOpen(false);
+    const name = filePath.split('/').pop() ?? '';
+    setRenameValue(name);
+    setRenaming(true);
+  }, [filePath]);
+
+  const handleCommitRename = useCallback(() => {
+    const newName = renameValue.trim();
+    if (!newName || newName === filePath.split('/').pop()) { setRenaming(false); return; }
+    startRenameTransition(async () => {
+      const result = await renameFileAction(filePath, newName);
+      setRenaming(false);
+      if (result.success && result.newPath) {
+        router.push(`/view/${encodePath(result.newPath)}`);
+        router.refresh();
+        window.dispatchEvent(new Event('mindos:files-changed'));
+      }
+    });
+  }, [renameValue, filePath, router]);
+
+  const handleConfirmDelete = useCallback(() => {
+    setShowDeleteConfirm(false);
+    startTransition(async () => {
+      const result = await deleteFileAction(filePath);
+      if (result.success) {
+        router.push('/');
+        router.refresh();
+        window.dispatchEvent(new Event('mindos:files-changed'));
+      }
+    });
+  }, [filePath, router]);
+
   // Keep first paint deterministic between server and client to avoid hydration mismatch.
   const effectiveUseRaw = hydrated ? useRaw : false;
 
@@ -202,6 +277,65 @@ export default function ViewPageClient({
     return () => window.removeEventListener('keydown', handler);
   }, [editing, handleSave, handleEdit, handleCancel]);
 
+  // Auto-refresh when AI agent modifies files + compute changed lines for highlight
+  const [fileUpdated, setFileUpdated] = useState(false);
+  const [changedLines, setChangedLines] = useState<number[]>([]);
+  const prevContentRef = useRef(content);
+  const aiTriggeredRef = useRef(false);
+  const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const updatedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // When content prop changes after an AI-triggered refresh, compute diff highlights
+  useEffect(() => {
+    if (!editing && aiTriggeredRef.current && content !== prevContentRef.current && prevContentRef.current !== '') {
+      aiTriggeredRef.current = false;
+      const diff = buildLineDiff(prevContentRef.current, content);
+      const lines: number[] = [];
+      let lineNum = 1;
+      for (const row of diff) {
+        if (row.type === 'insert') {
+          lines.push(lineNum);
+          lineNum++;
+        } else if (row.type === 'equal') {
+          lineNum++;
+        }
+      }
+      if (lines.length > 0) {
+        setChangedLines(lines);
+        // Clear previous timer if any
+        if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+        highlightTimerRef.current = setTimeout(() => setChangedLines([]), 6000);
+        // Auto-scroll to change banner
+        setTimeout(() => {
+          const el = document.querySelector('[data-highlight-line]');
+          if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        }, 100);
+      }
+    }
+    prevContentRef.current = content;
+  }, [content, editing]);
+
+  useEffect(() => {
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    const handler = () => {
+      if (editing) return;
+      // Debounce rapid file changes (AI may write multiple files in sequence)
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        aiTriggeredRef.current = true;
+        router.refresh();
+        setFileUpdated(true);
+        if (updatedTimerRef.current) clearTimeout(updatedTimerRef.current);
+        updatedTimerRef.current = setTimeout(() => setFileUpdated(false), 3000);
+      }, 300);
+    };
+    window.addEventListener('mindos:files-changed', handler);
+    return () => {
+      window.removeEventListener('mindos:files-changed', handler);
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  }, [editing, router]);
+
   return (
     <div className="flex flex-col min-h-screen">
       {/* Top bar */}
@@ -219,6 +353,12 @@ export default function ViewPageClient({
           </div>
 
           <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
+            {fileUpdated && !editing && (
+              <span className="text-xs flex items-center gap-1.5 text-[var(--amber)] animate-in fade-in-0 duration-200">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)]" />
+                <span className="hidden sm:inline">updated</span>
+              </span>
+            )}
             {saveSuccess && (
               <span className="text-xs flex items-center gap-1.5 font-display" style={{ color: 'var(--success)' }}>
                 <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--success)' }} />
@@ -297,6 +437,54 @@ export default function ViewPageClient({
                 </button>
               </>
             )}
+
+            {/* More menu (rename, copy path, delete) */}
+            {!isDraft && (
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => togglePin(filePath)}
+                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  title={pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+                >
+                  <Star size={16} className={pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''} />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setExportOpen(true)}
+                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  title={t.fileTree.export}
+                >
+                  <Download size={16} />
+                </button>
+                <button
+                  ref={moreRef}
+                  type="button"
+                  onClick={() => setMoreOpen(v => !v)}
+                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  title="More"
+                >
+                  <MoreHorizontal size={16} />
+                </button>
+                {moreOpen && (
+                  <div
+                    ref={moreMenuRef}
+                    className="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-border bg-card shadow-lg py-1"
+                  >
+                    <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors text-left" onClick={handleCopyPath}>
+                      <Copy size={14} className="shrink-0" /> Copy Path
+                    </button>
+                    <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors text-left" onClick={handleStartRename}>
+                      <Pencil size={14} className="shrink-0" /> Rename
+                    </button>
+                    <div className="my-1 border-t border-border/50" />
+                    <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-error hover:bg-error/10 transition-colors text-left" onClick={() => { setMoreOpen(false); setShowDeleteConfirm(true); }}>
+                      <Trash2 size={14} className="shrink-0" /> Delete
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -375,7 +563,7 @@ export default function ViewPageClient({
               <JsonView content={savedContent} />
             ) : (
               <>
-                <MarkdownView content={savedContent} />
+                <MarkdownView content={savedContent} highlightLines={changedLines} onDismissHighlight={() => setChangedLines([])} />
                 <TableOfContents content={savedContent} />
               </>
             )}
@@ -383,6 +571,50 @@ export default function ViewPageClient({
           </div>
         )}
       </div>
+
+      {/* Inline rename dialog */}
+      {renaming && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm">
+          <div className="bg-card border border-border rounded-lg shadow-lg p-4 w-80">
+            <h3 className="text-sm font-medium mb-2">Rename</h3>
+            <input
+              autoFocus
+              value={renameValue}
+              onChange={e => setRenameValue(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter') handleCommitRename();
+                if (e.key === 'Escape') setRenaming(false);
+              }}
+              className="w-full bg-muted border border-border rounded-md px-3 py-1.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <div className="flex justify-end gap-2 mt-3">
+              <button onClick={() => setRenaming(false)} className="px-3 py-1.5 rounded-md text-xs bg-muted text-muted-foreground hover:bg-accent transition-colors">Cancel</button>
+              <button onClick={handleCommitRename} className="px-3 py-1.5 rounded-md text-xs bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors">Rename</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete confirm */}
+      <ConfirmDialog
+        open={showDeleteConfirm}
+        title="Delete"
+        message={`Delete "${filePath.split('/').pop()}"? This cannot be undone.`}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="destructive"
+        onCancel={() => setShowDeleteConfirm(false)}
+        onConfirm={handleConfirmDelete}
+      />
+
+      {/* Export modal */}
+      <ExportModal
+        open={exportOpen}
+        onClose={() => setExportOpen(false)}
+        filePath={filePath}
+        isDirectory={false}
+        fileName={filePath.split('/').pop() ?? filePath}
+      />
     </div>
   );
 }

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/ExportModal.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { X, Download, FileText, Globe, Archive, Check, Loader2 } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
+
+type ExportFormat = 'md' | 'html' | 'zip' | 'zip-html';
+
+interface ExportModalProps {
+  open: boolean;
+  onClose: () => void;
+  filePath: string;
+  isDirectory: boolean;
+  fileName: string;
+}
+
+export default function ExportModal({ open, onClose, filePath, isDirectory, fileName }: ExportModalProps) {
+  const { t } = useLocale();
+  const [format, setFormat] = useState<ExportFormat>(isDirectory ? 'zip' : 'md');
+  const [state, setState] = useState<'idle' | 'exporting' | 'done' | 'error'>('idle');
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  const handleExport = useCallback(() => {
+    setState('exporting');
+    setError('');
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const url = `/api/export?path=${encodeURIComponent(filePath)}&format=${format}`;
+
+    fetch(url, { signal: controller.signal })
+      .then(res => {
+        if (!res.ok) {
+          const ct = res.headers.get('content-type') ?? '';
+          if (ct.includes('json')) {
+            return res.json().then((data: { error?: string }) => { throw new Error(data.error || 'Export failed'); });
+          }
+          throw new Error(`Export failed (${res.status})`);
+        }
+        return res.blob().then(blob => ({ blob, res }));
+      })
+      .then(({ blob, res }) => {
+        const disposition = res.headers.get('Content-Disposition') ?? '';
+        const match = disposition.match(/filename="?([^"]+)"?/);
+        const downloadName = match ? decodeURIComponent(match[1]) : fileName;
+
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = downloadName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+
+        setState('done');
+        toast.success(t.export?.downloaded ?? 'Downloaded');
+      })
+      .catch((err: Error) => {
+        if (err.name === 'AbortError') return; // user cancelled
+        setState('error');
+        setError(err.message ?? 'Export failed');
+      })
+      .finally(() => { abortRef.current = null; });
+  }, [filePath, format, fileName, t]);
+
+  const handleCancel = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (abortRef.current) abortRef.current.abort();
+    abortRef.current = null;
+    setState('idle');
+    setError('');
+    onClose();
+  }, [onClose]);
+
+  if (!open) return null;
+
+  const formats: { value: ExportFormat; label: string; desc: string; icon: React.ReactNode; disabled?: boolean }[] = isDirectory
+    ? [
+        { value: 'zip', label: t.export?.formatZipMd ?? 'Markdown ZIP', desc: t.export?.formatZipMdDesc ?? 'All files in original format', icon: <Archive size={14} /> },
+        { value: 'zip-html', label: t.export?.formatZipHtml ?? 'HTML ZIP', desc: t.export?.formatZipHtmlDesc ?? 'All files as webpages', icon: <Globe size={14} /> },
+      ]
+    : [
+        { value: 'md', label: t.export?.formatMd ?? 'Markdown (.md)', desc: t.export?.formatMdDesc ?? 'Original format, editable', icon: <FileText size={14} /> },
+        { value: 'html', label: t.export?.formatHtml ?? 'HTML (.html)', desc: t.export?.formatHtmlDesc ?? 'Static webpage, shareable', icon: <Globe size={14} /> },
+      ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={state === 'exporting' ? undefined : handleClose}>
+      <div
+        className="bg-card border border-border rounded-xl shadow-xl max-w-md w-full mx-4 animate-in fade-in-0 zoom-in-95 duration-200"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Download size={15} className="text-[var(--amber)]" />
+            <h3 className="text-sm font-semibold font-display">
+              {isDirectory ? (t.export?.exportSpace ?? 'Export Space') : (t.export?.exportFile ?? 'Export File')}
+            </h3>
+          </div>
+          <button onClick={handleClose} className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+            <X size={14} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4">
+          {state === 'done' ? (
+            <div className="text-center py-6">
+              <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-3">
+                <Check size={20} className="text-success" />
+              </div>
+              <p className="text-sm font-medium font-display">{t.export?.done ?? 'Export Complete'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{fileName}</p>
+            </div>
+          ) : state === 'error' ? (
+            <div className="text-center py-6">
+              <p className="text-sm font-medium text-error">{t.export?.error ?? 'Export failed'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{error}</p>
+            </div>
+          ) : (
+            <>
+              <p className="text-xs text-muted-foreground mb-3 truncate" title={filePath}>{filePath}</p>
+              <p className="text-xs font-medium font-display text-foreground mb-2">{t.export?.chooseFormat ?? 'Choose format'}</p>
+              <div className="space-y-1.5">
+                {formats.map(f => (
+                  <label
+                    key={f.value}
+                    className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-all ${
+                      format === f.value
+                        ? 'border-[var(--amber)]/40 bg-[var(--amber-dim)]'
+                        : 'border-border hover:border-border/80 hover:bg-muted/30'
+                    } ${f.disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+                  >
+                    <input
+                      type="radio"
+                      name="export-format"
+                      value={f.value}
+                      checked={format === f.value}
+                      onChange={() => !f.disabled && setFormat(f.value)}
+                      disabled={f.disabled}
+                      className="sr-only"
+                    />
+                    <span className={`mt-0.5 ${format === f.value ? 'text-[var(--amber)]' : 'text-muted-foreground'}`}>
+                      {f.icon}
+                    </span>
+                    <div>
+                      <span className="text-sm font-medium text-foreground">{f.label}</span>
+                      <span className="text-xs text-muted-foreground block mt-0.5">{f.desc}</span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-border">
+          {state === 'done' ? (
+            <>
+              <button onClick={handleRetry} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.downloadAgain ?? 'Download Again'}
+              </button>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors">
+                {t.export?.cancel === 'Cancel' ? 'Done' : (t.export?.done ?? 'Done')}
+              </button>
+            </>
+          ) : state === 'error' ? (
+            <>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button onClick={handleRetry} className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors">
+                {t.export?.retry ?? 'Retry'}
+              </button>
+            </>
+          ) : state === 'exporting' ? (
+            <>
+              <button onClick={handleCancel} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-[var(--amber-text)] opacity-70">
+                <Loader2 size={12} className="animate-spin" /> {t.export?.exporting ?? 'Exporting...'}
+              </span>
+            </>
+          ) : (
+            <>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button
+                onClick={handleExport}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors"
+              >
+                <Download size={12} /> {t.export?.exportButton ?? 'Export'}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}