feat(canvas): Auto-load optimization config from study

Phase 3 of Canvas Professional Upgrade:
- Fix ConfigImporter API endpoint URL (/api/optimization/studies/...)
- Add currentStudyId prop to auto-select study in importer
- Parse response correctly (data.config instead of raw response)
- Replace file upload emoji with FolderOpen Lucide icon
- Add "Load Study Config" button to Setup canvas tab header
- Show button only when canvas is empty

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

atomizer-dashboard/frontend/src/components/canvas/panels/ConfigImporter.tsx

@@ -7,16 +7,18 @@
  * - Load from study directory
  */
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { FolderOpen } from 'lucide-react';
 import { useCanvasStore, OptimizationConfig } from '../../../hooks/useCanvasStore';
 
 interface ConfigImporterProps {
   isOpen: boolean;
   onClose: () => void;
   onImport: (source: string) => void;
+  currentStudyId?: string; // Auto-load this study when provided
 }
 
-export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProps) {
+export function ConfigImporter({ isOpen, onClose, onImport, currentStudyId }: ConfigImporterProps) {
   const [tab, setTab] = useState<'file' | 'paste' | 'study'>('file');
   const [jsonText, setJsonText] = useState('');
   const [studyPath, setStudyPath] = useState('');
@@ -26,6 +28,14 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
 
   const { loadFromConfig } = useCanvasStore();
 
+  // Set study path from current study when provided
+  useEffect(() => {
+    if (currentStudyId) {
+      setStudyPath(currentStudyId);
+      setTab('study');
+    }
+  }, [currentStudyId, isOpen]);
+
   if (!isOpen) return null;
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -69,13 +79,14 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
 
     try {
       // Call backend API to load study config
-      const response = await fetch(`/api/studies/${encodeURIComponent(studyPath)}/config`);
+      const response = await fetch(`/api/optimization/studies/${encodeURIComponent(studyPath)}/config`);
 
       if (!response.ok) {
         throw new Error(`Study not found: ${studyPath}`);
       }
 
-      const config = await response.json() as OptimizationConfig;
+      const data = await response.json();
+      const config = data.config as OptimizationConfig;
       validateConfig(config);
       loadFromConfig(config);
       onImport(`Study: ${studyPath}`);
@@ -165,7 +176,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
                 disabled={isLoading}
                 className="w-full py-8 border-2 border-dashed border-dark-600 rounded-lg hover:border-primary-500/50 hover:bg-dark-800 transition-colors flex flex-col items-center gap-2"
               >
-                <span className="text-3xl">📁</span>
+                <FolderOpen size={32} className="text-primary-400" />
                 <span className="text-dark-300">
                   {isLoading ? 'Loading...' : 'Click to select file'}
                 </span>

atomizer-dashboard/frontend/src/pages/Setup.tsx

@@ -28,6 +28,8 @@ import { Card } from '../components/common/Card';
 import { Button } from '../components/common/Button';
 import { apiClient, ModelFile } from '../api/client';
 import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
+import { ConfigImporter } from '../components/canvas/panels/ConfigImporter';
+import { useCanvasStore } from '../hooks/useCanvasStore';
 
 interface StudyConfig {
   study_name: string;
@@ -88,6 +90,9 @@ export default function Setup() {
   );
   const [modelFiles, setModelFiles] = useState<ModelFile[]>([]);
   const [modelDir, setModelDir] = useState<string>('');
+  const [showImporter, setShowImporter] = useState(false);
+  const [canvasNotification, setCanvasNotification] = useState<string | null>(null);
+  const { nodes } = useCanvasStore();
 
   // Redirect if no study selected
   useEffect(() => {
@@ -256,6 +261,11 @@ export default function Setup() {
 
   // Canvas tab - full height and full width
   if (activeTab === 'canvas') {
+    const handleImport = (source: string) => {
+      setCanvasNotification(`Loaded: ${source}`);
+      setTimeout(() => setCanvasNotification(null), 3000);
+    };
+
     return (
       <div className="w-full h-[calc(100vh-6rem)] flex flex-col -mx-6 -my-6 px-4 pt-4">
         {/* Tab Bar */}
@@ -275,6 +285,15 @@ export default function Setup() {
             Canvas Builder
           </button>
           <div className="flex-1" />
+          {nodes.length === 0 && (
+            <button
+              onClick={() => setShowImporter(true)}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm transition-colors"
+            >
+              <Download className="w-4 h-4" />
+              Load Study Config
+            </button>
+          )}
           <span className="text-dark-400 text-sm">
             {selectedStudy?.name || 'Study'}
           </span>
@@ -283,6 +302,21 @@ export default function Setup() {
         <div className="flex-1 min-h-0 rounded-lg overflow-hidden border border-dark-700">
           <AtomizerCanvas />
         </div>
+
+        {/* Config Importer Modal */}
+        <ConfigImporter
+          isOpen={showImporter}
+          onClose={() => setShowImporter(false)}
+          onImport={handleImport}
+          currentStudyId={selectedStudy?.id}
+        />
+
+        {/* Notification Toast */}
+        {canvasNotification && (
+          <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-dark-800 text-white rounded-lg shadow-lg z-50 border border-dark-600">
+            {canvasNotification}
+          </div>
+        )}
       </div>
     );
   }