feat(canvas): Canvas V3 - Bug fixes and study workflow improvements

Bug Fixes:
- Fix Atomizer Assistant error with reconnect button and error state handling
- Enable connection/edge deletion with keyboard Delete/Backspace keys
- Fix drag & drop positioning using screenToFlowPosition correctly
- Fix loadFromConfig to create all node types and edges properly

UI/UX Improvements:
- Minimal responsive header with context breadcrumb
- Better contrast with white text on dark backgrounds
- Larger font sizes in NodePalette for readability
- Study-aware header showing selected study name

New Features:
- Enhanced ExecuteDialog with Create/Update mode toggle
- Select existing study to update or create new study
- Home page Canvas Builder button for quick access
- Home navigation button in CanvasView header

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

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

@@ -1,17 +1,21 @@
 import { useState } from 'react';
-import { ClipboardList, Download, Trash2 } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { ClipboardList, Download, Trash2, Layers, Home, ChevronRight } from 'lucide-react';
 import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
 import { TemplateSelector } from '../components/canvas/panels/TemplateSelector';
 import { ConfigImporter } from '../components/canvas/panels/ConfigImporter';
 import { useCanvasStore } from '../hooks/useCanvasStore';
+import { useStudy } from '../context/StudyContext';
 import { CanvasTemplate } from '../lib/canvas/templates';
 
 export function CanvasView() {
   const [showTemplates, setShowTemplates] = useState(false);
   const [showImporter, setShowImporter] = useState(false);
   const [notification, setNotification] = useState<string | null>(null);
+  const navigate = useNavigate();
 
-  const { nodes, clear } = useCanvasStore();
+  const { nodes, edges, clear } = useCanvasStore();
+  const { selectedStudy } = useStudy();
 
   const handleTemplateSelect = (template: CanvasTemplate) => {
     showNotification(`Loaded template: ${template.name}`);
@@ -35,38 +39,59 @@ export function CanvasView() {
 
   return (
     <div className="h-screen flex flex-col bg-dark-900">
-      {/* Header with actions */}
-      <header className="bg-dark-850 border-b border-dark-700 px-6 py-3 flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-bold text-white">
-            Optimization Canvas
-          </h1>
-          <p className="text-sm text-dark-400">
-            Drag components from the palette to build your optimization workflow
-          </p>
+      {/* Minimal Header */}
+      <header className="flex-shrink-0 h-12 bg-dark-850 border-b border-dark-700 px-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {/* Home button */}
+          <button
+            onClick={() => navigate('/')}
+            className="p-1.5 rounded-lg text-dark-400 hover:text-white hover:bg-dark-700 transition-colors"
+            title="Back to Home"
+          >
+            <Home size={18} />
+          </button>
+
+          {/* Breadcrumb */}
+          <div className="flex items-center gap-2">
+            <Layers size={18} className="text-primary-400" />
+            <span className="text-sm font-medium text-white">Canvas Builder</span>
+            {selectedStudy && (
+              <>
+                <ChevronRight size={14} className="text-dark-500" />
+                <span className="text-sm text-primary-400 font-medium">
+                  {selectedStudy.name || selectedStudy.id}
+                </span>
+              </>
+            )}
+          </div>
+
+          {/* Stats */}
+          <span className="text-xs text-dark-500 tabular-nums ml-2">
+            {nodes.length} node{nodes.length !== 1 ? 's' : ''} • {edges.length} edge{edges.length !== 1 ? 's' : ''}
+          </span>
         </div>
 
         {/* Action Buttons */}
         <div className="flex items-center gap-2">
           <button
             onClick={() => setShowTemplates(true)}
-            className="px-4 py-2 bg-gradient-to-r from-primary-600 to-purple-600 text-white rounded-lg hover:from-primary-500 hover:to-purple-500 transition-all shadow-sm flex items-center gap-2"
+            className="px-3 py-1.5 bg-primary-600 hover:bg-primary-500 text-white text-sm rounded-lg transition-colors flex items-center gap-1.5"
           >
-            <ClipboardList size={18} />
+            <ClipboardList size={14} />
             Templates
           </button>
           <button
             onClick={() => setShowImporter(true)}
-            className="px-4 py-2 bg-dark-700 text-dark-200 rounded-lg hover:bg-dark-600 hover:text-white transition-colors flex items-center gap-2 border border-dark-600"
+            className="px-3 py-1.5 bg-dark-700 text-dark-200 hover:bg-dark-600 hover:text-white text-sm rounded-lg transition-colors flex items-center gap-1.5 border border-dark-600"
           >
-            <Download size={18} />
+            <Download size={14} />
             Import
           </button>
           <button
             onClick={handleClear}
-            className="px-4 py-2 bg-dark-700 text-dark-200 rounded-lg hover:bg-red-900/50 hover:text-red-400 hover:border-red-500/50 transition-colors flex items-center gap-2 border border-dark-600"
+            className="px-3 py-1.5 bg-dark-700 text-dark-200 hover:bg-red-900/50 hover:text-red-400 text-sm rounded-lg transition-colors flex items-center gap-1.5 border border-dark-600"
           >
-            <Trash2 size={18} />
+            <Trash2 size={14} />
             Clear
           </button>
         </div>

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

@@ -17,7 +17,8 @@ import {
   Folder,
   FolderOpen,
   Maximize2,
-  X
+  X,
+  Layers
 } from 'lucide-react';
 import { useStudy } from '../context/StudyContext';
 import { Study } from '../types';
@@ -172,19 +173,33 @@ const Home: React.FC = () => {
                 className="h-10 md:h-12"
               />
             </div>
-            <button
-              onClick={() => refreshStudies()}
-              disabled={isLoading}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all disabled:opacity-50 hover:border-primary-400/40"
-              style={{
-                background: 'rgba(8, 15, 26, 0.85)',
-                border: '1px solid rgba(0, 212, 230, 0.2)',
-                color: '#fff'
-              }}
-            >
-              <RefreshCw className={`w-4 h-4 text-primary-400 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh
-            </button>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => navigate('/canvas')}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium hover:-translate-y-0.5"
+                style={{
+                  background: 'linear-gradient(135deg, #00d4e6 0%, #0891b2 100%)',
+                  color: '#000',
+                  boxShadow: '0 4px 15px rgba(0, 212, 230, 0.3)'
+                }}
+              >
+                <Layers className="w-4 h-4" />
+                Canvas Builder
+              </button>
+              <button
+                onClick={() => refreshStudies()}
+                disabled={isLoading}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all disabled:opacity-50 hover:border-primary-400/40"
+                style={{
+                  background: 'rgba(8, 15, 26, 0.85)',
+                  border: '1px solid rgba(0, 212, 230, 0.2)',
+                  color: '#fff'
+                }}
+              >
+                <RefreshCw className={`w-4 h-4 text-primary-400 ${isLoading ? 'animate-spin' : ''}`} />
+                Refresh
+              </button>
+            </div>
           </div>
         </div>
       </header>