@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs-viewer/code-editor/notes-mode.js

@@ -0,0 +1,1338 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import Editor from '@monaco-editor/react';
+import { File, Folder, FolderOpen, X, FloppyDisk, CaretRight, CaretDown, Spinner, Plus, Minus, Eye, Code, Trash, ArrowsOut, ArrowClockwise } from '@phosphor-icons/react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useModeContext, useWorkspace, useNotes, useEditorState, getMonacoLanguage, getFileType, supportsPreview } from '@/lib/api-docs/code-editor';
+// VSCode-style file icon with color coding
+function FileIcon({ path, className }) {
+    const type = getFileType(path);
+    const colorMap = {
+        'javascript': 'text-yellow-400',
+        'typescript': 'text-blue-400',
+        'python': 'text-green-500',
+        'go': 'text-cyan-400',
+        'ruby': 'text-red-400',
+        'php': 'text-purple-400',
+        'shell': 'text-green-400',
+        'markdown': 'text-blue-300',
+        'mermaid': 'text-pink-400',
+        'json': 'text-yellow-500',
+        'yaml': 'text-red-300',
+        'text': 'text-zinc-400'
+    };
+    return /*#__PURE__*/ _jsx(File, {
+        className: cn('h-4 w-4 flex-shrink-0', colorMap[type] || 'text-zinc-400', className),
+        weight: "fill"
+    });
+}
+function buildFileTree(files) {
+    const root = [];
+    // Filter out .folder placeholder files - they're only used internally to create folder structure
+    const visibleFiles = files.filter((f)=>!f.path.endsWith('.folder') && !f.path.includes('/.folder'));
+    const sortedFiles = [
+        ...visibleFiles
+    ].sort((a, b)=>a.path.localeCompare(b.path));
+    for (const file of sortedFiles){
+        const parts = file.path.split('/');
+        let current = root;
+        for(let i = 0; i < parts.length; i++){
+            const part = parts[i];
+            const isLastPart = i === parts.length - 1;
+            const currentPath = parts.slice(0, i + 1).join('/');
+            let existing = current.find((n)=>n.name === part);
+            if (!existing) {
+                existing = {
+                    name: part,
+                    path: currentPath,
+                    isFolder: !isLastPart,
+                    children: isLastPart ? undefined : [],
+                    file: isLastPart ? file : undefined
+                };
+                current.push(existing);
+            }
+            if (!isLastPart && existing.children) {
+                current = existing.children;
+            }
+        }
+    }
+    // Sort: folders first, then alphabetically
+    const sortNodes = (nodes)=>{
+        return nodes.sort((a, b)=>{
+            if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
+            return a.name.localeCompare(b.name);
+        }).map((node)=>({
+                ...node,
+                children: node.children ? sortNodes(node.children) : undefined
+            }));
+    };
+    return sortNodes(root);
+}
+function FileTreeItem({ node, depth, activeFile, expandedFolders, onFileClick, onFolderToggle, onDelete }) {
+    const isExpanded = expandedFolders.has(node.path);
+    const isActive = activeFile === node.path;
+    const [showContextMenu, setShowContextMenu] = useState(null);
+    // Close context menu
+    useEffect(()=>{
+        if (showContextMenu) {
+            const handleClick = ()=>setShowContextMenu(null);
+            const handleKeyDown = (e)=>{
+                if (e.key === 'Escape') setShowContextMenu(null);
+            };
+            document.addEventListener('click', handleClick);
+            document.addEventListener('keydown', handleKeyDown);
+            return ()=>{
+                document.removeEventListener('click', handleClick);
+                document.removeEventListener('keydown', handleKeyDown);
+            };
+        }
+    }, [
+        showContextMenu
+    ]);
+    const handleClick = (e)=>{
+        e.preventDefault();
+        if (node.isFolder) {
+            onFolderToggle(node.path);
+        } else {
+            onFileClick(node.path);
+        }
+    };
+    const handleContextMenu = (e)=>{
+        e.preventDefault();
+        setShowContextMenu({
+            x: e.clientX,
+            y: e.clientY
+        });
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative",
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                onClick: handleClick,
+                onContextMenu: handleContextMenu,
+                className: cn('w-full flex items-center gap-1 text-[13px] text-left transition-colors group', isActive && 'sandbox-file-active', !isActive && 'sandbox-file-hover'),
+                style: {
+                    height: '22px',
+                    paddingLeft: `${depth * 8 + 4}px`,
+                    paddingRight: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "w-4 h-4 flex items-center justify-center flex-shrink-0",
+                        children: node.isFolder && (isExpanded ? /*#__PURE__*/ _jsx(CaretDown, {
+                            className: "h-3 w-3 text-zinc-400",
+                            weight: "bold"
+                        }) : /*#__PURE__*/ _jsx(CaretRight, {
+                            className: "h-3 w-3 text-zinc-400",
+                            weight: "bold"
+                        }))
+                    }),
+                    node.isFolder ? isExpanded ? /*#__PURE__*/ _jsx(FolderOpen, {
+                        className: "h-4 w-4 text-amber-400 flex-shrink-0",
+                        weight: "fill"
+                    }) : /*#__PURE__*/ _jsx(Folder, {
+                        className: "h-4 w-4 text-amber-400 flex-shrink-0",
+                        weight: "fill"
+                    }) : /*#__PURE__*/ _jsx(FileIcon, {
+                        path: node.path
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn('truncate ml-1', isActive && 'text-white', !isActive && 'text-zinc-300'),
+                        children: node.name
+                    })
+                ]
+            }),
+            showContextMenu && !node.isFolder && /*#__PURE__*/ _jsx("div", {
+                className: "fixed z-50 min-w-[140px] py-1 sandbox-context-menu rounded shadow-xl",
+                style: {
+                    left: showContextMenu.x,
+                    top: showContextMenu.y
+                },
+                onClick: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ _jsxs("button", {
+                    onClick: ()=>{
+                        onDelete?.(node.path);
+                        setShowContextMenu(null);
+                    },
+                    className: "w-full flex items-center gap-2 px-3 py-1.5 text-[13px] sandbox-context-menu-delete text-left",
+                    children: [
+                        /*#__PURE__*/ _jsx(Trash, {
+                            className: "h-4 w-4"
+                        }),
+                        "Delete"
+                    ]
+                })
+            }),
+            node.isFolder && isExpanded && node.children && /*#__PURE__*/ _jsx("div", {
+                children: node.children.map((child)=>/*#__PURE__*/ _jsx(FileTreeItem, {
+                        node: child,
+                        depth: depth + 1,
+                        activeFile: activeFile,
+                        expandedFolders: expandedFolders,
+                        onFileClick: onFileClick,
+                        onFolderToggle: onFolderToggle,
+                        onDelete: onDelete
+                    }, child.path))
+            })
+        ]
+    });
+}
+// Editor tabs
+function EditorTabs({ tabs, activeTab, onTabClick, onTabClose }) {
+    if (tabs.length === 0) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center h-[35px] sandbox-tabs overflow-x-auto",
+        children: [
+            tabs.map((path)=>{
+                const fileName = path.split('/').pop() || path;
+                const isActive = path === activeTab;
+                return /*#__PURE__*/ _jsxs("div", {
+                    className: cn('relative flex items-center gap-1.5 px-3 h-full text-[13px] cursor-pointer group min-w-0', isActive ? 'sandbox-tab-active' : 'sandbox-tab-inactive'),
+                    onClick: ()=>onTabClick(path),
+                    children: [
+                        isActive && /*#__PURE__*/ _jsx("div", {
+                            className: "absolute top-0 left-0 right-0 h-[2px] sandbox-tab-indicator"
+                        }),
+                        /*#__PURE__*/ _jsx(FileIcon, {
+                            path: path,
+                            className: "h-4 w-4 flex-shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "truncate",
+                            children: fileName
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                onTabClose(path);
+                            },
+                            className: cn('p-0.5 rounded flex-shrink-0 ml-1 sandbox-tab-close', isActive ? '' : 'opacity-0 group-hover:opacity-100'),
+                            children: /*#__PURE__*/ _jsx(X, {
+                                className: "h-3 w-3"
+                            })
+                        })
+                    ]
+                }, path);
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1 h-full sandbox-tabs"
+            })
+        ]
+    });
+}
+// Note type templates
+const noteTemplates = [
+    {
+        ext: '.py',
+        name: 'Python',
+        color: 'text-green-400',
+        bg: 'bg-green-500/10 hover:bg-green-500/20 border-green-500/30',
+        desc: 'Python script'
+    },
+    {
+        ext: '.ts',
+        name: 'TypeScript',
+        color: 'text-blue-400',
+        bg: 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30',
+        desc: 'TypeScript code'
+    },
+    {
+        ext: '.js',
+        name: 'JavaScript',
+        color: 'text-yellow-400',
+        bg: 'bg-yellow-500/10 hover:bg-yellow-500/20 border-yellow-500/30',
+        desc: 'JavaScript code'
+    },
+    {
+        ext: '.md',
+        name: 'Markdown',
+        color: 'text-blue-300',
+        bg: 'bg-blue-400/10 hover:bg-blue-400/20 border-blue-400/30',
+        desc: 'Documentation'
+    },
+    {
+        ext: '.mmd',
+        name: 'Mermaid',
+        color: 'text-pink-400',
+        bg: 'bg-pink-500/10 hover:bg-pink-500/20 border-pink-500/30',
+        desc: 'Diagrams'
+    },
+    {
+        ext: '.json',
+        name: 'JSON',
+        color: 'text-yellow-500',
+        bg: 'bg-yellow-500/10 hover:bg-yellow-500/20 border-yellow-500/30',
+        desc: 'Data/Config'
+    },
+    {
+        ext: '.go',
+        name: 'Go',
+        color: 'text-cyan-400',
+        bg: 'bg-cyan-500/10 hover:bg-cyan-500/20 border-cyan-500/30',
+        desc: 'Go code'
+    },
+    {
+        ext: '.rb',
+        name: 'Ruby',
+        color: 'text-red-400',
+        bg: 'bg-red-500/10 hover:bg-red-500/20 border-red-500/30',
+        desc: 'Ruby script'
+    }
+];
+// New file dialog - VSCode style command palette
+function NewNoteDialog({ open, onOpenChange, onCreateNote }) {
+    const [fileName, setFileName] = useState('');
+    const [selectedTemplate, setSelectedTemplate] = useState(null);
+    const inputRef = useRef(null);
+    // Reset on open
+    useEffect(()=>{
+        if (open) {
+            setFileName('');
+            setSelectedTemplate(null);
+            setTimeout(()=>inputRef.current?.focus(), 50);
+        }
+    }, [
+        open
+    ]);
+    // Detect file type from name
+    const detectedType = useMemo(()=>{
+        const ext = fileName.match(/\.[^.]+$/)?.[0];
+        return noteTemplates.find((t)=>t.ext === ext) || null;
+    }, [
+        fileName
+    ]);
+    const handleCreate = ()=>{
+        if (!fileName.trim()) return;
+        let finalName = fileName.trim();
+        // Add extension if not present and template selected
+        if (selectedTemplate && !finalName.includes('.')) {
+            finalName += selectedTemplate.ext;
+        }
+        onCreateNote(finalName);
+        setFileName('');
+        setSelectedTemplate(null);
+        onOpenChange(false);
+    };
+    const handleTemplateClick = (template)=>{
+        setSelectedTemplate(template);
+        // Update file name with new extension
+        const baseName = fileName.replace(/\.[^.]+$/, '') || 'untitled';
+        setFileName(baseName + template.ext);
+        inputRef.current?.focus();
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' && fileName.trim()) {
+            handleCreate();
+        }
+        if (e.key === 'Escape') {
+            onOpenChange(false);
+        }
+    };
+    const activeTemplate = detectedType || selectedTemplate;
+    if (!open) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "absolute inset-0 bg-black/50",
+                onClick: ()=>onOpenChange(false)
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative w-full max-w-lg mx-4 bg-[#1e1e1e] border border-[#454545] rounded-lg shadow-2xl overflow-hidden",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-3 p-3 border-b border-[#3c3c3c]",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: cn("w-8 h-8 rounded flex items-center justify-center flex-shrink-0 transition-colors", activeTemplate ? activeTemplate.bg : "bg-[#2d2d2d]"),
+                                children: /*#__PURE__*/ _jsx(File, {
+                                    className: cn("h-4 w-4", activeTemplate?.color || "text-zinc-400"),
+                                    weight: "fill"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                ref: inputRef,
+                                type: "text",
+                                value: fileName,
+                                onChange: (e)=>setFileName(e.target.value),
+                                onKeyDown: handleKeyDown,
+                                placeholder: "Enter file name...",
+                                className: "flex-1 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500 outline-none"
+                            }),
+                            fileName.trim() && /*#__PURE__*/ _jsx("button", {
+                                onClick: handleCreate,
+                                className: "px-3 py-1.5 text-xs font-medium bg-[#007acc] hover:bg-[#006bb3] text-white rounded transition-colors",
+                                children: "Create"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "p-3",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-[11px] uppercase tracking-wider text-zinc-500 mb-2 px-1",
+                                children: "Select type"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "grid grid-cols-4 gap-2",
+                                children: noteTemplates.map((template)=>{
+                                    const isActive = activeTemplate?.ext === template.ext;
+                                    return /*#__PURE__*/ _jsxs("button", {
+                                        onClick: ()=>handleTemplateClick(template),
+                                        className: cn("flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all", isActive ? `${template.bg} border-current` : "bg-[#2d2d2d] border-[#3c3c3c] hover:bg-[#333333] hover:border-[#4c4c4c]"),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(File, {
+                                                className: cn("h-5 w-5", template.color),
+                                                weight: "fill"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: cn("text-[11px] font-medium", isActive ? template.color : "text-zinc-300"),
+                                                children: template.name
+                                            })
+                                        ]
+                                    }, template.ext);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "px-4 py-2.5 bg-[#252526] border-t border-[#3c3c3c] flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsxs("p", {
+                                className: "text-[11px] text-zinc-500",
+                                children: [
+                                    "Tip: Use ",
+                                    /*#__PURE__*/ _jsx("code", {
+                                        className: "px-1 py-0.5 bg-[#3c3c3c] rounded text-zinc-400",
+                                        children: "folder/file.ext"
+                                    }),
+                                    " for nested files"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2 text-[11px] text-zinc-500",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "px-1.5 py-0.5 bg-[#3c3c3c] rounded text-[10px]",
+                                        children: "↵"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Create"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "px-1.5 py-0.5 bg-[#3c3c3c] rounded text-[10px]",
+                                        children: "Esc"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Cancel"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+// Error Boundary for Mermaid Preview
+class MermaidErrorBoundary extends React.Component {
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error: error.message
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('[MermaidErrorBoundary] Error:', error, errorInfo);
+    }
+    // Reset error when code changes
+    componentDidUpdate(prevProps) {
+        if (prevProps.code !== this.props.code && this.state.hasError) {
+            this.setState({
+                hasError: false,
+                error: null
+            });
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col items-center justify-center h-full text-zinc-400 text-sm p-4 gap-4",
+                children: [
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-red-400",
+                        children: [
+                            "Render Error: ",
+                            this.state.error
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "w-full max-w-lg",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-xs text-zinc-500 mb-2",
+                                children: "Source:"
+                            }),
+                            /*#__PURE__*/ _jsx("pre", {
+                                className: "p-4 bg-[#2d2d2d] rounded text-xs overflow-auto max-h-[200px] text-zinc-300",
+                                children: this.props.code
+                            })
+                        ]
+                    })
+                ]
+            });
+        }
+        return this.props.children;
+    }
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null
+        };
+    }
+}
+// Mermaid preview component with zoom/pan
+function MermaidPreviewInner({ code }) {
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [svg, setSvg] = useState('');
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const renderIdRef = useRef(0);
+    // Zoom and pan state
+    const [scale, setScale] = useState(1);
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStart = useRef({
+        x: 0,
+        y: 0
+    });
+    const positionStart = useRef({
+        x: 0,
+        y: 0
+    });
+    useEffect(()=>{
+        if (!code.trim()) {
+            setLoading(false);
+            setSvg('');
+            setError(null);
+            return;
+        }
+        const currentRenderId = ++renderIdRef.current;
+        setLoading(true);
+        setError(null);
+        const renderDiagram = async ()=>{
+            try {
+                const mermaid = (await import('mermaid')).default;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: 'dark',
+                    themeVariables: {
+                        // Force dark backgrounds everywhere
+                        background: '#1e1e1e',
+                        primaryColor: '#3b82f6',
+                        primaryTextColor: '#ffffff',
+                        primaryBorderColor: '#60a5fa',
+                        secondaryColor: '#3b82f6',
+                        secondaryTextColor: '#ffffff',
+                        secondaryBorderColor: '#60a5fa',
+                        tertiaryColor: '#3b82f6',
+                        tertiaryTextColor: '#ffffff',
+                        tertiaryBorderColor: '#60a5fa',
+                        // Node backgrounds - force blue
+                        mainBkg: '#3b82f6',
+                        nodeBkg: '#3b82f6',
+                        nodeBorder: '#60a5fa',
+                        nodeTextColor: '#ffffff',
+                        // Cluster styling
+                        clusterBkg: '#27272a',
+                        clusterBorder: '#52525b',
+                        titleColor: '#ffffff',
+                        // Lines
+                        lineColor: '#94a3b8',
+                        // Font
+                        fontFamily: 'system-ui, sans-serif',
+                        fontSize: '14px'
+                    },
+                    flowchart: {
+                        htmlLabels: true,
+                        useMaxWidth: true
+                    }
+                });
+                // Use unique ID to avoid conflicts
+                const { svg: renderedSvg } = await mermaid.render(`mermaid-${currentRenderId}-${Date.now()}`, code);
+                // Only update if this is still the latest render
+                if (currentRenderId === renderIdRef.current) {
+                    setSvg(renderedSvg);
+                    setError(null);
+                    // Reset zoom/pan when diagram changes
+                    setScale(1);
+                    setPosition({
+                        x: 0,
+                        y: 0
+                    });
+                }
+            } catch (err) {
+                if (currentRenderId === renderIdRef.current) {
+                    // Extract meaningful error message from mermaid errors
+                    let errorMessage = 'Failed to render diagram';
+                    if (err instanceof Error) {
+                        // Mermaid errors often have detailed messages
+                        errorMessage = err.message;
+                        // Clean up common mermaid error prefixes
+                        if (errorMessage.includes('Parse error')) {
+                            const match = errorMessage.match(/Parse error on line (\d+)/);
+                            if (match) {
+                                errorMessage = `Syntax error on line ${match[1]}`;
+                            }
+                        }
+                    } else if (typeof err === 'string') {
+                        errorMessage = err;
+                    } else if (err && typeof err === 'object' && 'str' in err) {
+                        // Mermaid sometimes returns {str: "error message"}
+                        errorMessage = String(err.str);
+                    }
+                    setError(errorMessage);
+                    setSvg(''); // Clear any previous SVG
+                }
+            } finally{
+                if (currentRenderId === renderIdRef.current) {
+                    setLoading(false);
+                }
+            }
+        };
+        // Debounce rendering
+        const timer = setTimeout(renderDiagram, 300);
+        return ()=>clearTimeout(timer);
+    }, [
+        code
+    ]);
+    // Handle mouse wheel zoom
+    const handleWheel = useCallback((e)=>{
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        setScale((prev)=>Math.min(Math.max(0.25, prev + delta), 3));
+    }, []);
+    // Handle mouse down for pan
+    const handleMouseDown = useCallback((e)=>{
+        if (e.button !== 0) return; // Only left click
+        setIsDragging(true);
+        dragStart.current = {
+            x: e.clientX,
+            y: e.clientY
+        };
+        positionStart.current = position;
+    }, [
+        position
+    ]);
+    // Handle mouse move for pan
+    const handleMouseMove = useCallback((e)=>{
+        if (!isDragging) return;
+        const dx = e.clientX - dragStart.current.x;
+        const dy = e.clientY - dragStart.current.y;
+        setPosition({
+            x: positionStart.current.x + dx,
+            y: positionStart.current.y + dy
+        });
+    }, [
+        isDragging
+    ]);
+    // Handle mouse up
+    const handleMouseUp = useCallback(()=>{
+        setIsDragging(false);
+    }, []);
+    // Handle zoom controls
+    const zoomIn = useCallback(()=>setScale((prev)=>Math.min(prev + 0.25, 3)), []);
+    const zoomOut = useCallback(()=>setScale((prev)=>Math.max(prev - 0.25, 0.25)), []);
+    const resetView = useCallback(()=>{
+        setScale(1);
+        setPosition({
+            x: 0,
+            y: 0
+        });
+    }, []);
+    if (loading) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center justify-center h-full text-zinc-500 text-sm",
+            children: [
+                /*#__PURE__*/ _jsx(Spinner, {
+                    className: "h-5 w-5 animate-spin mr-2"
+                }),
+                "Rendering diagram..."
+            ]
+        });
+    }
+    if (error) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col items-center justify-center h-full text-zinc-400 text-sm p-4 gap-4",
+            children: [
+                /*#__PURE__*/ _jsxs("p", {
+                    className: "text-red-400",
+                    children: [
+                        "Syntax Error: ",
+                        error
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "w-full max-w-lg",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs text-zinc-500 mb-2",
+                            children: "Source:"
+                        }),
+                        /*#__PURE__*/ _jsx("pre", {
+                            className: "p-4 bg-[#2d2d2d] rounded text-xs overflow-auto max-h-[200px] text-zinc-300",
+                            children: code
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative h-full w-full bg-[#1e1e1e]",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "absolute top-3 right-3 z-10 flex items-center gap-1 bg-[#2d2d2d] rounded-md border border-[#3c3c3c] p-1",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: zoomOut,
+                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
+                        title: "Zoom out",
+                        children: /*#__PURE__*/ _jsx(Minus, {
+                            className: "h-4 w-4"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "text-xs text-zinc-400 min-w-[3rem] text-center",
+                        children: [
+                            Math.round(scale * 100),
+                            "%"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: zoomIn,
+                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
+                        title: "Zoom in",
+                        children: /*#__PURE__*/ _jsx(Plus, {
+                            className: "h-4 w-4"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "w-px h-4 bg-[#3c3c3c] mx-1"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: resetView,
+                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
+                        title: "Reset view",
+                        children: /*#__PURE__*/ _jsx(ArrowsOut, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                ref: containerRef,
+                className: "h-full w-full overflow-hidden cursor-grab active:cursor-grabbing",
+                onWheel: handleWheel,
+                onMouseDown: handleMouseDown,
+                onMouseMove: handleMouseMove,
+                onMouseUp: handleMouseUp,
+                onMouseLeave: handleMouseUp,
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: contentRef,
+                    className: "h-full w-full flex items-center justify-center [&_svg]:max-w-none",
+                    style: {
+                        transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+                        transformOrigin: 'center center',
+                        transition: isDragging ? 'none' : 'transform 0.1s ease-out'
+                    },
+                    dangerouslySetInnerHTML: {
+                        __html: svg
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "absolute bottom-3 left-3 text-[10px] text-zinc-600",
+                children: "Scroll to zoom • Drag to pan"
+            })
+        ]
+    });
+}
+// Mermaid preview with error boundary wrapper
+function MermaidPreview({ code }) {
+    return /*#__PURE__*/ _jsx(MermaidErrorBoundary, {
+        code: code,
+        children: /*#__PURE__*/ _jsx(MermaidPreviewInner, {
+            code: code
+        })
+    });
+}
+// Main Notes Mode component
+export function NotesMode({ apiSpecUrl, apiName }) {
+    const { activeFilePath, setActiveFilePath, streamingContent, setStreamingContent, notesRefreshTrigger } = useModeContext();
+    const { workspace, loading: workspaceLoading } = useWorkspace(apiSpecUrl, apiName);
+    const { notes, loading: notesLoading, createNote, readNote, updateNote, deleteNote, refresh } = useNotes(workspace?.id || null);
+    const { state: editorState, openTab, closeTab, setActiveTab, clearAllTabs } = useEditorState(workspace?.id || null);
+    // Editor refs
+    const editorRef = useRef(null);
+    // Local state
+    const [fileContent, setFileContent] = useState('');
+    const [isModified, setIsModified] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isLoadingContent, setIsLoadingContent] = useState(false);
+    const [expandedFolders, setExpandedFolders] = useState(new Set());
+    const [showNewNote, setShowNewNote] = useState(false);
+    const [showPreview, setShowPreview] = useState(false);
+    // Build file tree
+    const fileTree = useMemo(()=>buildFileTree(notes), [
+        notes
+    ]);
+    // Refresh notes when triggered by agent (delete, update operations)
+    useEffect(()=>{
+        if (notesRefreshTrigger > 0) {
+            refresh();
+        }
+    }, [
+        notesRefreshTrigger,
+        refresh
+    ]);
+    // Clear tabs when all notes are deleted
+    useEffect(()=>{
+        if (!notesLoading && notes.length === 0 && editorState?.openTabs && editorState.openTabs.length > 0) {
+            clearAllTabs();
+            setFileContent('');
+        }
+    }, [
+        notes.length,
+        notesLoading,
+        editorState?.openTabs,
+        clearAllTabs
+    ]);
+    // State validation: Clean up orphaned tabs (pointing to deleted files)
+    useEffect(()=>{
+        if (notesLoading || !editorState?.openTabs || editorState.openTabs.length === 0) return;
+        const notePaths = new Set(notes.map((n)=>n.path));
+        const orphanedTabs = editorState.openTabs.filter((tab)=>!notePaths.has(tab));
+        if (orphanedTabs.length > 0) {
+            console.log('[NotesMode] Cleaning up orphaned tabs:', orphanedTabs);
+            // Close each orphaned tab
+            orphanedTabs.forEach((tab)=>closeTab(tab));
+        }
+    }, [
+        notes,
+        notesLoading,
+        editorState?.openTabs,
+        closeTab
+    ]);
+    // State validation: Clear stuck streaming state (no active streaming after 30s)
+    useEffect(()=>{
+        if (!streamingContent?.isStreaming) return;
+        const timeout = setTimeout(()=>{
+            if (streamingContent?.isStreaming) {
+                console.log('[NotesMode] Clearing stuck streaming state');
+                setStreamingContent(null);
+            }
+        }, 30000) // 30 second timeout
+        ;
+        return ()=>clearTimeout(timeout);
+    }, [
+        streamingContent?.isStreaming,
+        setStreamingContent
+    ]);
+    // Load file content when active tab changes
+    useEffect(()=>{
+        if (!editorState?.activeTab) {
+            setFileContent('');
+            setIsLoadingContent(false);
+            return;
+        }
+        setIsLoadingContent(true);
+        const loadContent = async ()=>{
+            const content = await readNote(editorState.activeTab);
+            setFileContent(content);
+            setIsModified(false);
+            setIsLoadingContent(false);
+        };
+        loadContent();
+    }, [
+        editorState?.activeTab,
+        readNote
+    ]);
+    // Track last processed path to avoid re-processing
+    const lastProcessedPath = useRef(null);
+    // Handle file navigation from agent
+    useEffect(()=>{
+        if (activeFilePath && workspace) {
+            // Strip timestamp from path if present (used to force refresh)
+            const cleanPath = activeFilePath.split('?')[0];
+            const hasTimestamp = activeFilePath.includes('?t=');
+            // Skip if we've already processed this path (unless it has a timestamp for force refresh)
+            if (lastProcessedPath.current === cleanPath && !hasTimestamp) {
+                return;
+            }
+            lastProcessedPath.current = cleanPath;
+            // Refresh notes first to ensure file is in the list
+            refresh().then(async ()=>{
+                openTab(cleanPath);
+                // Auto-enable preview for mermaid files
+                if (cleanPath.endsWith('.mmd')) {
+                    setShowPreview(true);
+                }
+                // If this was a write operation (has timestamp), force content reload
+                if (hasTimestamp) {
+                    setIsLoadingContent(true);
+                    const content = await readNote(cleanPath);
+                    setFileContent(content);
+                    setIsModified(false);
+                    setIsLoadingContent(false);
+                    // Clear streaming content after file is loaded (prevents flash of empty content)
+                    if (streamingContent?.path === cleanPath) {
+                        setStreamingContent(null);
+                    }
+                }
+                // Expand parent folders
+                const parts = cleanPath.split('/');
+                if (parts.length > 1) {
+                    const foldersToExpand = parts.slice(0, -1).map((_, i)=>parts.slice(0, i + 1).join('/'));
+                    setExpandedFolders((prev)=>{
+                        const next = new Set(prev);
+                        foldersToExpand.forEach((f)=>next.add(f));
+                        return next;
+                    });
+                }
+            });
+        }
+    }, [
+        activeFilePath,
+        workspace,
+        openTab,
+        refresh,
+        readNote,
+        streamingContent,
+        setStreamingContent
+    ]);
+    // Handle folder toggle
+    const handleFolderToggle = useCallback((path)=>{
+        setExpandedFolders((prev)=>{
+            const next = new Set(prev);
+            if (next.has(path)) {
+                next.delete(path);
+            } else {
+                next.add(path);
+            }
+            return next;
+        });
+    }, []);
+    // Handle content change
+    const handleContentChange = useCallback((value)=>{
+        if (value !== undefined) {
+            setFileContent(value);
+            setIsModified(true);
+        }
+    }, []);
+    // Handle save
+    const handleSave = useCallback(async ()=>{
+        if (!editorState?.activeTab || !isModified) return;
+        setIsSaving(true);
+        try {
+            await updateNote(editorState.activeTab, fileContent);
+            setIsModified(false);
+        } finally{
+            setIsSaving(false);
+        }
+    }, [
+        editorState?.activeTab,
+        fileContent,
+        isModified,
+        updateNote
+    ]);
+    // Keyboard shortcuts
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+                e.preventDefault();
+                handleSave();
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
+                e.preventDefault();
+                setShowNewNote(true);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        handleSave
+    ]);
+    // Handle create note
+    const handleCreateNote = useCallback(async (path)=>{
+        await createNote(path, '');
+        await refresh();
+        await openTab(path);
+    }, [
+        createNote,
+        refresh,
+        openTab
+    ]);
+    // Handle delete note
+    const handleDeleteNote = useCallback(async (path)=>{
+        await deleteNote(path);
+        closeTab(path);
+        await refresh();
+    }, [
+        deleteNote,
+        closeTab,
+        refresh
+    ]);
+    // Handle reset workspace (clears all state)
+    const handleResetWorkspace = useCallback(async ()=>{
+        if (!window.confirm('Reset workspace? This will clear all notes and tabs.')) {
+            return;
+        }
+        try {
+            // Clear all notes from IndexedDB
+            for (const note of notes){
+                await deleteNote(note.path);
+            }
+            // Clear all tabs
+            clearAllTabs();
+            // Clear streaming content
+            setStreamingContent(null);
+            // Clear file content
+            setFileContent('');
+            setIsModified(false);
+            // Refresh notes list
+            await refresh();
+            console.log('[NotesMode] Workspace reset complete');
+        } catch (err) {
+            console.error('[NotesMode] Failed to reset workspace:', err);
+        }
+    }, [
+        notes,
+        deleteNote,
+        clearAllTabs,
+        setStreamingContent,
+        refresh
+    ]);
+    // Handle editor mount
+    const handleEditorMount = (editor)=>{
+        editorRef.current = editor;
+    };
+    // Check if current file supports preview
+    const currentFileSupportsPreview = editorState?.activeTab ? supportsPreview(editorState.activeTab) : false;
+    const currentFileType = editorState?.activeTab ? getFileType(editorState.activeTab) : null;
+    // Auto-enable preview for mermaid files when tab changes
+    useEffect(()=>{
+        if (editorState?.activeTab?.endsWith('.mmd')) {
+            setShowPreview(true);
+        }
+    }, [
+        editorState?.activeTab
+    ]);
+    // Auto-scroll editor to end while streaming
+    useEffect(()=>{
+        if (streamingContent?.isStreaming && editorRef.current) {
+            const model = editorRef.current.getModel();
+            if (model) {
+                const lineCount = model.getLineCount();
+                editorRef.current.revealLine(lineCount);
+                // Also position cursor at the end
+                editorRef.current.setPosition({
+                    lineNumber: lineCount,
+                    column: 1
+                });
+            }
+        }
+    }, [
+        streamingContent?.content,
+        streamingContent?.isStreaming
+    ]);
+    // Loading state
+    if (workspaceLoading || notesLoading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center h-full sandbox-bg",
+            children: /*#__PURE__*/ _jsx(Spinner, {
+                className: "h-6 w-6 animate-spin sandbox-text-muted"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col h-full sandbox-bg",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between px-3 py-1.5 sandbox-header",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs sandbox-text-secondary",
+                                children: workspace?.name || 'Notes'
+                            }),
+                            isModified && /*#__PURE__*/ _jsx("span", {
+                                className: "text-[11px] sandbox-text-warning font-medium",
+                                children: "● Unsaved"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-1.5",
+                        children: [
+                            currentFileSupportsPreview && /*#__PURE__*/ _jsxs(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>setShowPreview(!showPreview),
+                                className: cn("h-7 px-2 sandbox-btn", showPreview ? "sandbox-btn-active" : ""),
+                                children: [
+                                    showPreview ? /*#__PURE__*/ _jsx(Code, {
+                                        className: "h-3.5 w-3.5 mr-1"
+                                    }) : /*#__PURE__*/ _jsx(Eye, {
+                                        className: "h-3.5 w-3.5 mr-1"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs",
+                                        children: showPreview ? 'Code' : 'Preview'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>setShowNewNote(true),
+                                className: "sandbox-btn h-7 px-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Plus, {
+                                        className: "h-3.5 w-3.5 mr-1"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs",
+                                        children: "New"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: handleSave,
+                                disabled: !isModified || isSaving,
+                                className: "sandbox-btn h-7 px-2 disabled:opacity-40",
+                                children: [
+                                    /*#__PURE__*/ _jsx(FloppyDisk, {
+                                        className: "h-3.5 w-3.5 mr-1"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs",
+                                        children: "Save"
+                                    })
+                                ]
+                            }),
+                            (notes.length > 0 || (editorState?.openTabs?.length ?? 0) > 0) && /*#__PURE__*/ _jsxs(Tooltip, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ _jsx(Button, {
+                                            variant: "ghost",
+                                            size: "sm",
+                                            onClick: handleResetWorkspace,
+                                            className: "sandbox-btn-danger h-7 w-7 p-0",
+                                            children: /*#__PURE__*/ _jsx(ArrowClockwise, {
+                                                className: "h-3.5 w-3.5"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TooltipContent, {
+                                        side: "bottom",
+                                        children: "Reset workspace"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-1 overflow-hidden",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "w-52 flex-shrink-0 border-r border-[#3c3c3c] flex flex-col bg-[#181818]",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "px-2.5 py-1.5 border-b border-[#3c3c3c] bg-[#252526]",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-[11px] font-medium uppercase tracking-wider text-zinc-400",
+                                    children: "Notes"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex-1 overflow-y-auto",
+                                children: notes.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                                    className: "px-3 py-4 text-xs text-zinc-500 text-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: "mb-2",
+                                            children: "No notes yet"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "link",
+                                            size: "sm",
+                                            className: "text-xs text-blue-400 hover:text-blue-300",
+                                            onClick: ()=>setShowNewNote(true),
+                                            children: "Create your first note"
+                                        })
+                                    ]
+                                }) : fileTree.map((node)=>/*#__PURE__*/ _jsx(FileTreeItem, {
+                                        node: node,
+                                        depth: 0,
+                                        activeFile: editorState?.activeTab || null,
+                                        expandedFolders: expandedFolders,
+                                        onFileClick: (path)=>{
+                                            openTab(path);
+                                            setActiveFilePath(path); // Update URL
+                                        },
+                                        onFolderToggle: handleFolderToggle,
+                                        onDelete: handleDeleteNote
+                                    }, node.path))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]",
+                        children: [
+                            /*#__PURE__*/ _jsx(EditorTabs, {
+                                tabs: editorState?.openTabs || [],
+                                activeTab: editorState?.activeTab || null,
+                                onTabClick: (path)=>{
+                                    setActiveTab(path);
+                                    setActiveFilePath(path); // Update URL
+                                },
+                                onTabClose: closeTab
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex-1 overflow-hidden relative",
+                                children: [
+                                    isLoadingContent && !streamingContent?.isStreaming && /*#__PURE__*/ _jsx("div", {
+                                        className: "absolute inset-0 bg-[#1e1e1e] z-10 flex items-center justify-center",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-2 text-zinc-400",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Spinner, {
+                                                    className: "h-5 w-5 animate-spin"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: "text-sm",
+                                                    children: "Loading content..."
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    streamingContent?.isStreaming && streamingContent.path === editorState?.activeTab && /*#__PURE__*/ _jsxs("div", {
+                                        className: "absolute top-2 right-2 z-10 flex items-center gap-2 px-2 py-1 rounded bg-blue-600/80 text-white text-xs",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Spinner, {
+                                                className: "h-3 w-3 animate-spin"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: "AI writing..."
+                                            })
+                                        ]
+                                    }),
+                                    editorState?.activeTab ? showPreview && currentFileType === 'mermaid' ? /*#__PURE__*/ _jsx(MermaidPreview, {
+                                        code: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab ? streamingContent.content : fileContent
+                                    }) : /*#__PURE__*/ _jsx(Editor, {
+                                        height: "100%",
+                                        language: getMonacoLanguage(editorState.activeTab),
+                                        value: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab ? streamingContent.content : fileContent,
+                                        onChange: handleContentChange,
+                                        onMount: handleEditorMount,
+                                        options: {
+                                            minimap: {
+                                                enabled: false
+                                            },
+                                            fontSize: 13,
+                                            fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                                            lineNumbers: 'on',
+                                            scrollBeyondLastLine: false,
+                                            wordWrap: 'on',
+                                            tabSize: 2,
+                                            automaticLayout: true,
+                                            padding: {
+                                                top: 8,
+                                                bottom: 8
+                                            },
+                                            renderWhitespace: 'selection',
+                                            bracketPairColorization: {
+                                                enabled: true
+                                            },
+                                            cursorBlinking: 'smooth',
+                                            smoothScrolling: true,
+                                            lineHeight: 20,
+                                            readOnly: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab
+                                        },
+                                        theme: "vs-dark"
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        className: "flex items-center justify-center h-full",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "text-center",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: "w-16 h-16 mx-auto mb-4 rounded-lg bg-[#2d2d2d] flex items-center justify-center",
+                                                    children: /*#__PURE__*/ _jsx(File, {
+                                                        className: "h-8 w-8 text-zinc-600"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("p", {
+                                                    className: "text-sm text-zinc-500 mb-1",
+                                                    children: "No file open"
+                                                }),
+                                                /*#__PURE__*/ _jsx("p", {
+                                                    className: "text-xs text-zinc-600",
+                                                    children: "Create a note or select one from the sidebar"
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between h-[22px] px-2.5 border-t border-[#3c3c3c] bg-[#007acc] text-white text-[11px]",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-3",
+                        children: editorState?.activeTab && /*#__PURE__*/ _jsx("span", {
+                            className: "opacity-90",
+                            children: getFileType(editorState.activeTab)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-3",
+                        children: /*#__PURE__*/ _jsxs("span", {
+                            className: "opacity-70",
+                            children: [
+                                notes.length,
+                                " note",
+                                notes.length !== 1 ? 's' : ''
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(NewNoteDialog, {
+                open: showNewNote,
+                onOpenChange: setShowNewNote,
+                onCreateNote: handleCreateNote
+            })
+        ]
+    });
+}