- {snapshotHistory.map(snap => (
-
-
{snap.name}
-
+ {/* IDLE STATE: Main AI Button */}
+ {status === 'idle' && (
+
+
+
+
+
AI Visual Organizer
+
+ Click to instantly analyze and reorganize your flow for maximum clarity.
+
+
+
+
-
- )}
+ )}
+
+ {/* ANALYZING STATE: Scanning Animation */}
+ {status === 'analyzing' && (
+
+
+
+ Analyzing Layout Logic...
+
+
+ )}
+
+ {/* READY STATE: Suggestion Found */}
+ {status === 'ready' && bestSuggestion && (
+
+
+
+ Optimization Found!
+
+
+
+
+
+
{bestSuggestion.title}
+
+
+ {bestSuggestion.description}
+
+
+
+
+
+
+
+
+ )}
+
+ {/* APPLIED STATE: Success & Undo */}
+ {status === 'applied' && (
+
+
+
+
+
+
+
Beautifully Organized!
+
+ Your graph has been transformed.
+
+
+
+
+
+
+
+
+ )}
+
+
);
};
diff --git a/src/components/editor/EditorHeader.tsx b/src/components/editor/EditorHeader.tsx
index 0d54093..1e9cfaa 100644
--- a/src/components/editor/EditorHeader.tsx
+++ b/src/components/editor/EditorHeader.tsx
@@ -1,12 +1,14 @@
import { Link } from 'react-router-dom';
import {
Edit3, Code, Download, Zap, Sun, Moon, Maximize2, Minimize2, Settings, Save,
- ChevronDown, FileCode, ImageIcon, FileText, Frame
+ ChevronDown, FileCode, ImageIcon, FileText, Frame, Cloud, Server, Cpu, RotateCcw, RotateCw
} from 'lucide-react';
-import { useFlowStore } from '../../store';
+import { useStore } from 'zustand';
+import { useFlowStore, useDiagramStore } from '../../store';
+import { useMobileDetect } from '../../hooks/useMobileDetect';
import {
exportToPng, exportToJpg, exportToSvg,
- exportToTxt, downloadMermaid
+ exportToTxt, downloadMermaid, exportToJson
} from '../../lib/exportUtils';
import { useState } from 'react';
import { SettingsModal } from '../Settings';
@@ -17,23 +19,30 @@ export function EditorHeader() {
rightPanelOpen, setRightPanelOpen,
theme, toggleTheme,
focusMode, setFocusMode,
- saveDiagram
+ saveDiagram,
+ aiMode, onlineProvider
} = useFlowStore();
+ const { isMobile } = useMobileDetect();
const [showSettings, setShowSettings] = useState(false);
- const [isSaving, setIsSaving] = useState(false);
+ const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved'>('idle');
const [showExportMenu, setShowExportMenu] = useState(false);
const handleSave = () => {
- setIsSaving(true);
const name = prompt('Enter diagram name:', `Diagram ${new Date().toLocaleDateString()}`);
if (name) {
+ setSaveStatus('saving');
saveDiagram(name);
+
+ // Show success state
+ setTimeout(() => {
+ setSaveStatus('saved');
+ setTimeout(() => setSaveStatus('idle'), 2000);
+ }, 600);
}
- setTimeout(() => setIsSaving(false), 800);
};
- const handleExport = async (format: 'png' | 'jpg' | 'svg' | 'txt' | 'code') => {
+ const handleExport = async (format: 'png' | 'jpg' | 'svg' | 'txt' | 'code' | 'json') => {
setShowExportMenu(false);
const viewport = document.querySelector('.react-flow__viewport') as HTMLElement;
@@ -46,7 +55,7 @@ export function EditorHeader() {
if (viewport) await exportToJpg(viewport);
break;
case 'svg':
- exportToSvg(nodes, edges);
+ if (viewport) await exportToSvg(viewport);
break;
case 'txt':
exportToTxt(nodes, edges);
@@ -54,6 +63,9 @@ export function EditorHeader() {
case 'code':
downloadMermaid(nodes, edges);
break;
+ case 'json':
+ exportToJson(nodes, edges);
+ break;
}
} catch (error) {
console.error('Export failed:', error);
@@ -67,37 +79,86 @@ export function EditorHeader() {
-
SystemArchitect
+
SystemArchitect
+ {/* Panel toggles - hidden on mobile */}
-
+
+ {/* History Controls */}
+
+
+ {!isMobile && (
+ <>
+
+
+
+
+
+
+ )}
+ {/* AI Mode Status - Desktop Only */}
+ {!isMobile && (
+
+ {aiMode === 'offline' ? (
+ <>
+
+ Local
+
+ ) : aiMode === 'browser' ? (
+ <>
+
+ Browser
+
+ ) : (
+ <>
+
+ Cloud
+
+ )}
+
+ )}
+