@evolve.labs/devflow 0.8.0

package/web/components/editor/EditorTabs.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useFileStore } from '@/lib/stores/fileStore';
+import { cn, getFileName } from '@/lib/utils';
+import { X, FileText, FileCode, FileJson, Settings, Loader2, Pin, ChevronLeft, ChevronRight } from 'lucide-react';
+import { TabContextMenu } from './TabContextMenu';
+
+// Get icon by language
+function getLanguageIcon(language: string) {
+  switch (language) {
+    case 'markdown':
+      return FileText;
+    case 'typescript':
+    case 'javascript':
+      return FileCode;
+    case 'json':
+      return FileJson;
+    case 'yaml':
+      return Settings;
+    default:
+      return FileText;
+  }
+}
+
+// Get color by language
+function getLanguageColor(language: string): string {
+  switch (language) {
+    case 'typescript':
+      return 'text-blue-400';
+    case 'javascript':
+      return 'text-yellow-400';
+    case 'markdown':
+      return 'text-gray-400';
+    case 'json':
+      return 'text-amber-400';
+    case 'yaml':
+      return 'text-purple-400';
+    default:
+      return 'text-gray-400';
+  }
+}
+
+interface ContextMenuState {
+  path: string;
+  position: { x: number; y: number };
+}
+
+export function EditorTabs() {
+  const {
+    openFiles,
+    activeFile,
+    setActiveFile,
+    closeFile,
+    isSaving,
+    savingFile,
+    pinnedFiles,
+    navigateBack,
+    navigateForward,
+    canGoBack,
+    canGoForward,
+  } = useFileStore();
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+  const handleNavigateBack = useCallback(() => {
+    if (canGoBack()) {
+      navigateBack();
+    }
+  }, [canGoBack, navigateBack]);
+
+  const handleNavigateForward = useCallback(() => {
+    if (canGoForward()) {
+      navigateForward();
+    }
+  }, [canGoForward, navigateForward]);
+
+  const handleClose = useCallback((e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+
+    // Check if dirty
+    const file = openFiles.find((f) => f.path === path);
+    if (file?.isDirty) {
+      const shouldClose = confirm('File has unsaved changes. Close anyway?');
+      if (!shouldClose) return;
+    }
+
+    closeFile(path);
+  }, [openFiles, closeFile]);
+
+  const handleMiddleClick = useCallback((e: React.MouseEvent, path: string) => {
+    if (e.button === 1) {
+      handleClose(e, path);
+    }
+  }, [handleClose]);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, path: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({
+      path,
+      position: { x: e.clientX, y: e.clientY },
+    });
+  }, []);
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  return (
+    <>
+      {/* Navigation buttons */}
+      <div className="flex items-center gap-0.5 px-1 border-r border-white/10">
+        <button
+          onClick={handleNavigateBack}
+          disabled={!canGoBack()}
+          className={cn(
+            'p-1.5 rounded transition-colors',
+            canGoBack()
+              ? 'text-gray-400 hover:text-white hover:bg-white/10'
+              : 'text-gray-600 cursor-not-allowed'
+          )}
+          aria-label="Go back"
+          title="Go back (Alt+Left)"
+        >
+          <ChevronLeft className="w-4 h-4" aria-hidden="true" />
+        </button>
+        <button
+          onClick={handleNavigateForward}
+          disabled={!canGoForward()}
+          className={cn(
+            'p-1.5 rounded transition-colors',
+            canGoForward()
+              ? 'text-gray-400 hover:text-white hover:bg-white/10'
+              : 'text-gray-600 cursor-not-allowed'
+          )}
+          aria-label="Go forward"
+          title="Go forward (Alt+Right)"
+        >
+          <ChevronRight className="w-4 h-4" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div
+        className="flex-1 flex items-center overflow-x-auto"
+        role="tablist"
+        aria-label="Open files"
+      >
+        {openFiles.map((file) => {
+          const Icon = getLanguageIcon(file.language);
+          const iconColor = getLanguageColor(file.language);
+          const isActive = activeFile === file.path;
+          const isPinned = pinnedFiles.includes(file.path);
+
+          return (
+            <div
+              key={file.path}
+              className={cn(
+                'group flex items-center gap-2 px-3 py-2 border-r border-white/10 cursor-pointer transition-colors',
+                isActive
+                  ? 'bg-[#0a0a0f] text-white'
+                  : 'bg-[#08080c] text-gray-400 hover:text-white hover:bg-white/5',
+                isPinned && 'border-l-2 border-l-purple-500/50'
+              )}
+              onClick={() => setActiveFile(file.path)}
+              onMouseDown={(e) => handleMiddleClick(e, file.path)}
+              onContextMenu={(e) => handleContextMenu(e, file.path)}
+              role="tab"
+              aria-selected={isActive}
+              aria-label={`${file.name}${file.isDirty ? ' (unsaved)' : ''}${isPinned ? ' (pinned)' : ''}`}
+              tabIndex={isActive ? 0 : -1}
+            >
+              {/* Pin indicator */}
+              {isPinned && (
+                <Pin
+                  className="w-3 h-3 text-purple-400 flex-shrink-0"
+                  aria-hidden="true"
+                />
+              )}
+
+              <Icon className={cn('w-4 h-4 flex-shrink-0', iconColor)} aria-hidden="true" />
+
+              <span className="text-sm truncate max-w-[120px]">
+                {file.name}
+              </span>
+
+              {/* Saving/Dirty indicator */}
+              {isSaving && savingFile === file.path ? (
+                <Loader2
+                  className="w-3 h-3 animate-spin text-purple-400 flex-shrink-0"
+                  aria-label="Saving"
+                />
+              ) : file.isDirty ? (
+                <span
+                  className="w-2 h-2 rounded-full bg-purple-500 flex-shrink-0"
+                  aria-label="Unsaved changes"
+                />
+              ) : null}
+
+              {/* Close button - hidden for pinned tabs unless hovered */}
+              <button
+                onClick={(e) => handleClose(e, file.path)}
+                className={cn(
+                  'p-0.5 rounded hover:bg-white/10 transition-colors flex-shrink-0',
+                  isPinned
+                    ? 'opacity-0 group-hover:opacity-100'
+                    : isActive
+                    ? 'opacity-100'
+                    : 'opacity-0 group-hover:opacity-100'
+                )}
+                aria-label={`Close ${file.name}`}
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Context Menu */}
+      {contextMenu && (
+        <TabContextMenu
+          path={contextMenu.path}
+          position={contextMenu.position}
+          onClose={closeContextMenu}
+        />
+      )}
+    </>
+  );
+}

package/web/components/editor/MarkdownPreview.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useMemo, Suspense, lazy } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// Lazy load Mermaid - only loaded when markdown contains mermaid blocks
+const MermaidDiagram = lazy(() => import('./MermaidDiagram').then(m => ({ default: m.MermaidDiagram })));
+
+interface MarkdownPreviewProps {
+  content: string;
+}
+
+function MermaidFallback() {
+  return (
+    <div className="my-4 p-4 bg-muted rounded-lg animate-pulse">
+      <div className="h-32 bg-white/5 rounded" />
+    </div>
+  );
+}
+
+export function MarkdownPreview({ content }: MarkdownPreviewProps) {
+  // Memoize components object to prevent recreation on every render
+  const components = useMemo(() => ({
+    // Custom heading styles
+    h1: ({ children }: { children?: React.ReactNode }) => (
+      <h1 className="text-2xl font-bold border-b border-border pb-2 mb-4">
+        {children}
+      </h1>
+    ),
+    h2: ({ children }: { children?: React.ReactNode }) => (
+      <h2 className="text-xl font-semibold mt-6 mb-3">{children}</h2>
+    ),
+    h3: ({ children }: { children?: React.ReactNode }) => (
+      <h3 className="text-lg font-semibold mt-4 mb-2">{children}</h3>
+    ),
+
+    // Code blocks
+    code: ({ className, children, ...props }: { className?: string; children?: React.ReactNode }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      const language = match ? match[1] : '';
+      const codeContent = String(children).replace(/\n$/, '');
+
+      // Handle mermaid diagrams with lazy loading
+      if (language === 'mermaid') {
+        return (
+          <Suspense fallback={<MermaidFallback />}>
+            <MermaidDiagram chart={codeContent} className="my-4" />
+          </Suspense>
+        );
+      }
+
+      // Inline code (no className and no newlines)
+      const isInline = !className && !codeContent.includes('\n');
+      if (isInline) {
+        return (
+          <code
+            className="px-1.5 py-0.5 rounded bg-muted text-sm font-mono"
+            {...props}
+          >
+            {children}
+          </code>
+        );
+      }
+
+      // Block code with optional language label
+      return (
+        <div className="relative group my-4">
+          {language && (
+            <div className="absolute top-2 right-2 px-2 py-0.5 text-xs text-gray-500 bg-black/30 rounded">
+              {language}
+            </div>
+          )}
+          <code
+            className="block p-4 rounded-lg bg-muted text-sm font-mono overflow-x-auto"
+            {...props}
+          >
+            {children}
+          </code>
+        </div>
+      );
+    },
+
+    // Tables
+    table: ({ children }: { children?: React.ReactNode }) => (
+      <div className="overflow-x-auto my-4">
+        <table className="min-w-full border-collapse border border-border">
+          {children}
+        </table>
+      </div>
+    ),
+    th: ({ children }: { children?: React.ReactNode }) => (
+      <th className="border border-border bg-muted px-3 py-2 text-left font-semibold">
+        {children}
+      </th>
+    ),
+    td: ({ children }: { children?: React.ReactNode }) => (
+      <td className="border border-border px-3 py-2">{children}</td>
+    ),
+
+    // Links
+    a: ({ href, children }: { href?: string; children?: React.ReactNode }) => (
+      <a
+        href={href}
+        className="text-primary hover:underline"
+        target={href?.startsWith('http') ? '_blank' : undefined}
+        rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+      >
+        {children}
+      </a>
+    ),
+
+    // Blockquotes
+    blockquote: ({ children }: { children?: React.ReactNode }) => (
+      <blockquote className="border-l-4 border-primary/50 pl-4 italic text-muted-foreground my-4">
+        {children}
+      </blockquote>
+    ),
+
+    // Lists
+    ul: ({ children }: { children?: React.ReactNode }) => (
+      <ul className="list-disc list-inside my-2 space-y-1">{children}</ul>
+    ),
+    ol: ({ children }: { children?: React.ReactNode }) => (
+      <ol className="list-decimal list-inside my-2 space-y-1">{children}</ol>
+    ),
+
+    // Checkboxes (GFM)
+    input: ({ type, checked }: { type?: string; checked?: boolean }) => {
+      if (type === 'checkbox') {
+        return (
+          <input
+            type="checkbox"
+            checked={checked}
+            readOnly
+            className="mr-2 rounded"
+          />
+        );
+      }
+      return null;
+    },
+  }), []);
+
+  return (
+    <div className="p-6 prose prose-invert prose-sm max-w-none">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/web/components/editor/MermaidDiagram.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface MermaidDiagramProps {
+  chart: string;
+  className?: string;
+}
+
+let mermaidInitialized = false;
+
+function initMermaid() {
+  if (mermaidInitialized) return;
+
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    securityLevel: 'strict',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    themeVariables: {
+      primaryColor: '#8b5cf6',
+      primaryTextColor: '#fff',
+      primaryBorderColor: '#6d28d9',
+      lineColor: '#64748b',
+      secondaryColor: '#1e1b4b',
+      tertiaryColor: '#1a1a24',
+      background: '#0a0a0f',
+      mainBkg: '#1a1a24',
+      nodeBorder: '#6d28d9',
+      clusterBkg: '#1e1b4b',
+      clusterBorder: '#4c1d95',
+      titleColor: '#e2e8f0',
+      edgeLabelBackground: '#1a1a24',
+      textColor: '#e2e8f0',
+      nodeTextColor: '#fff',
+    },
+  });
+
+  mermaidInitialized = true;
+}
+
+export function MermaidDiagram({ chart, className }: MermaidDiagramProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const idRef = useRef(`mermaid-${Math.random().toString(36).substring(2, 11)}`);
+
+  useEffect(() => {
+    initMermaid();
+
+    const renderDiagram = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const { svg } = await mermaid.render(idRef.current, chart);
+        setSvg(svg);
+      } catch (err) {
+        console.error('Mermaid render error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to render diagram');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    renderDiagram();
+  }, [chart]);
+
+  if (isLoading) {
+    return (
+      <div className={cn('flex items-center justify-center p-8 bg-[#1a1a24] rounded-lg', className)}>
+        <RefreshCw className="w-5 h-5 animate-spin text-purple-400" />
+        <span className="ml-2 text-sm text-gray-400">Rendering diagram...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn('p-4 bg-red-500/10 border border-red-500/30 rounded-lg', className)}>
+        <div className="flex items-center gap-2 text-red-400 mb-2">
+          <AlertCircle className="w-4 h-4" />
+          <span className="text-sm font-medium">Diagram Error</span>
+        </div>
+        <pre className="text-xs text-red-300/80 overflow-x-auto whitespace-pre-wrap">{error}</pre>
+        <details className="mt-3">
+          <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-400">
+            Show source code
+          </summary>
+          <pre className="mt-2 p-3 text-xs text-gray-400 bg-black/20 rounded overflow-x-auto">
+            {chart}
+          </pre>
+        </details>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'mermaid-diagram bg-[#1a1a24] rounded-lg p-4 overflow-x-auto',
+        '[&_svg]:max-w-full [&_svg]:h-auto',
+        className
+      )}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

package/web/components/editor/MonacoEditor.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useCallback, useEffect, useRef, memo } from 'react';
+import dynamic from 'next/dynamic';
+import { useFileStore } from '@/lib/stores/fileStore';
+import { useSettingsStore } from '@/lib/stores/settingsStore';
+import { Skeleton, SkeletonText } from '@/components/ui/Skeleton';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import type { OpenFile } from '@/lib/types';
+import type { editor } from 'monaco-editor';
+import type * as Monaco from 'monaco-editor';
+
+// Editor Loading Skeleton
+function EditorSkeleton() {
+  return (
+    <div className="h-full bg-[#0a0a0f] p-4">
+      {/* Line numbers + code skeleton */}
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-2 w-8">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <Skeleton key={i} className="h-4 w-6" />
+          ))}
+        </div>
+        <div className="flex-1 space-y-2">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <Skeleton
+              key={i}
+              className="h-4"
+              style={{ width: `${Math.random() * 40 + 30}%` }}
+            />
+          ))}
+        </div>
+      </div>
+      {/* Loading indicator */}
+      <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-sm">
+        <div className="flex flex-col items-center gap-3">
+          <LoadingSpinner size="lg" />
+          <span className="text-sm text-gray-400">Loading editor...</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Lazy load Monaco Editor
+const Editor = dynamic(() => import('@monaco-editor/react'), {
+  ssr: false,
+  loading: () => <EditorSkeleton />,
+});
+
+interface MonacoEditorProps {
+  file: OpenFile;
+}
+
+function MonacoEditorComponent({ file }: MonacoEditorProps) {
+  const { updateFileContent, saveFile, scrollToLine, setScrollToLine } = useFileStore();
+  const {
+    editorFontSize,
+    editorTabSize,
+    editorWordWrap,
+    editorMinimap,
+    editorLineNumbers,
+  } = useSettingsStore();
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<typeof Monaco | null>(null);
+
+  const handleEditorDidMount = useCallback(
+    (editor: editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+
+      // Add save command (Cmd/Ctrl + S)
+      editor.addCommand(
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+        () => {
+          saveFile(file.path);
+        }
+      );
+
+      // Focus the editor
+      editor.focus();
+    },
+    [file.path, saveFile]
+  );
+
+  // Scroll to specific line when requested
+  useEffect(() => {
+    if (scrollToLine && editorRef.current && monacoRef.current) {
+      const editor = editorRef.current;
+      const monaco = monacoRef.current;
+
+      // Set cursor position to the line
+      editor.setPosition({ lineNumber: scrollToLine, column: 1 });
+
+      // Reveal the line in the center of the viewport
+      editor.revealLineInCenter(scrollToLine);
+
+      // Add a highlight decoration
+      const decorations = editor.deltaDecorations([], [
+        {
+          range: new monaco.Range(scrollToLine, 1, scrollToLine, 1),
+          options: {
+            isWholeLine: true,
+            className: 'highlight-line-animation',
+            linesDecorationsClassName: 'highlight-line-margin',
+          },
+        },
+      ]);
+
+      // Remove decoration after animation
+      setTimeout(() => {
+        editor.deltaDecorations(decorations, []);
+      }, 2000);
+
+      // Clear the scrollToLine state
+      setScrollToLine(null);
+    }
+  }, [scrollToLine, setScrollToLine]);
+
+  const handleChange = useCallback(
+    (value: string | undefined) => {
+      if (value !== undefined) {
+        updateFileContent(file.path, value);
+      }
+    },
+    [file.path, updateFileContent]
+  );
+
+  // Focus editor when file changes
+  useEffect(() => {
+    editorRef.current?.focus();
+  }, [file.path]);
+
+  return (
+    <Editor
+      height="100%"
+      language={file.language}
+      value={file.content}
+      theme="vs-dark"
+      onChange={handleChange}
+      onMount={handleEditorDidMount}
+      options={{
+        fontSize: editorFontSize,
+        fontFamily: 'JetBrains Mono, Fira Code, Menlo, Monaco, monospace',
+        minimap: { enabled: editorMinimap },
+        wordWrap: editorWordWrap ? 'on' : 'off',
+        lineNumbers: editorLineNumbers ? 'on' : 'off',
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        tabSize: editorTabSize,
+        insertSpaces: true,
+        renderWhitespace: 'selection',
+        bracketPairColorization: { enabled: true },
+        guides: {
+          indentation: true,
+          bracketPairs: true,
+        },
+        padding: { top: 16, bottom: 16 },
+        smoothScrolling: true,
+        cursorBlinking: 'smooth',
+        cursorSmoothCaretAnimation: 'on',
+      }}
+    />
+  );
+}
+
+// Memoize to prevent unnecessary re-renders
+// Note: Settings changes will trigger re-render via useSettingsStore hook
+export const MonacoEditor = memo(MonacoEditorComponent, (prevProps, nextProps) => {
+  // Only re-render if file path or language changes
+  // Content updates are handled internally by Monaco
+  // Settings updates are handled via Zustand subscription
+  return (
+    prevProps.file.path === nextProps.file.path &&
+    prevProps.file.language === nextProps.file.language
+  );
+});