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/components/canvas/AtomizerCanvas.tsx

@@ -1,13 +1,14 @@
-import { useCallback, useRef, useState, DragEvent } from 'react';
+import { useCallback, useRef, useState, useEffect, DragEvent } from 'react';
 import ReactFlow, {
   Background,
   Controls,
   MiniMap,
   ReactFlowProvider,
   ReactFlowInstance,
+  Edge,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { MessageCircle, Plug, X } from 'lucide-react';
+import { MessageCircle, Plug, X, AlertCircle, RefreshCw } from 'lucide-react';
 
 import { nodeTypes } from './nodes';
 import { NodePalette } from './palette/NodePalette';
@@ -29,16 +30,21 @@ function CanvasFlow() {
     nodes,
     edges,
     selectedNode,
+    selectedEdge,
     onNodesChange,
     onEdgesChange,
     onConnect,
     addNode,
     selectNode,
+    selectEdge,
+    deleteSelected,
     validation,
     validate,
     toIntent,
   } = useCanvasStore();
 
+  const [chatError, setChatError] = useState<string | null>(null);
+
   const {
     messages,
     isThinking,
@@ -49,9 +55,19 @@ function CanvasFlow() {
     analyzeIntent,
     sendMessage,
   } = useCanvasChat({
-    onError: (error) => console.error('Canvas chat error:', error),
+    onError: (error) => {
+      console.error('Canvas chat error:', error);
+      setChatError(error);
+    },
   });
 
+  const handleReconnect = useCallback(() => {
+    setChatError(null);
+    // Force refresh chat connection by toggling panel
+    setShowChat(false);
+    setTimeout(() => setShowChat(true), 100);
+  }, []);
+
   const onDragOver = useCallback((event: DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = 'move';
@@ -62,12 +78,12 @@ function CanvasFlow() {
       event.preventDefault();
 
       const type = event.dataTransfer.getData('application/reactflow') as NodeType;
-      if (!type || !reactFlowInstance.current || !reactFlowWrapper.current) return;
+      if (!type || !reactFlowInstance.current) return;
 
-      const bounds = reactFlowWrapper.current.getBoundingClientRect();
+      // screenToFlowPosition expects screen coordinates directly
       const position = reactFlowInstance.current.screenToFlowPosition({
-        x: event.clientX - bounds.left,
-        y: event.clientY - bounds.top,
+        x: event.clientX,
+        y: event.clientY,
       });
 
       addNode(type, position);
@@ -84,7 +100,32 @@ function CanvasFlow() {
 
   const onPaneClick = useCallback(() => {
     selectNode(null);
-  }, [selectNode]);
+    selectEdge(null);
+  }, [selectNode, selectEdge]);
+
+  const onEdgeClick = useCallback(
+    (_: React.MouseEvent, edge: Edge) => {
+      selectEdge(edge.id);
+    },
+    [selectEdge]
+  );
+
+  // Keyboard handler for Delete/Backspace
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Don't delete if focus is on an input
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          return;
+        }
+        deleteSelected();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [deleteSelected]);
 
   const handleValidate = () => {
     const result = validate();
@@ -112,8 +153,9 @@ function CanvasFlow() {
     }
   };
 
-  const handleExecute = async (studyName: string, autoRun: boolean) => {
+  const handleExecute = async (studyName: string, autoRun: boolean, _mode: 'create' | 'update', _existingStudyId?: string) => {
     const intent = toIntent();
+    // For now, both modes use the same executeIntent - backend will handle the mode distinction
     await executeIntent(intent, studyName, autoRun);
     setShowExecuteDialog(false);
     setShowChat(true);
@@ -128,7 +170,14 @@ function CanvasFlow() {
       <div className="flex-1 relative" ref={reactFlowWrapper}>
         <ReactFlow
           nodes={nodes}
-          edges={edges}
+          edges={edges.map(e => ({
+            ...e,
+            style: {
+              stroke: e.id === selectedEdge ? '#60a5fa' : '#6b7280',
+              strokeWidth: e.id === selectedEdge ? 3 : 2,
+            },
+            animated: e.id === selectedEdge,
+          }))}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
@@ -136,9 +185,11 @@ function CanvasFlow() {
           onDragOver={onDragOver}
           onDrop={onDrop}
           onNodeClick={onNodeClick}
+          onEdgeClick={onEdgeClick}
           onPaneClick={onPaneClick}
           nodeTypes={nodeTypes}
           fitView
+          deleteKeyCode={null}
           className="bg-dark-900"
         >
           <Background color="#374151" gap={20} />
@@ -211,12 +262,27 @@ function CanvasFlow() {
               <X size={18} />
             </button>
           </div>
-          <ChatPanel
-            messages={messages}
-            isThinking={isThinking || isExecuting}
-            onSendMessage={sendMessage}
-            isConnected={isConnected}
-          />
+          {chatError ? (
+            <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
+              <AlertCircle size={32} className="text-red-400 mb-3" />
+              <p className="text-white font-medium mb-1">Connection Error</p>
+              <p className="text-sm text-dark-400 mb-4">{chatError}</p>
+              <button
+                onClick={handleReconnect}
+                className="flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-500 text-white rounded-lg transition-colors"
+              >
+                <RefreshCw size={16} />
+                Reconnect
+              </button>
+            </div>
+          ) : (
+            <ChatPanel
+              messages={messages}
+              isThinking={isThinking || isExecuting}
+              onSendMessage={sendMessage}
+              isConnected={isConnected}
+            />
+          )}
         </div>
       ) : selectedNode ? (
         <NodeConfigPanel nodeId={selectedNode} />

atomizer-dashboard/frontend/src/components/canvas/nodes/BaseNode.tsx

@@ -25,9 +25,9 @@ function BaseNodeComponent({
   return (
     <div
       className={`
-        relative px-3 py-2.5 rounded-lg border min-w-[160px] max-w-[200px]
-        bg-dark-850 shadow-lg transition-all duration-150
-        ${selected ? 'border-primary-400 ring-2 ring-primary-400/20' : 'border-dark-600'}
+        relative px-4 py-3 rounded-xl border min-w-[180px] max-w-[220px]
+        bg-dark-800 shadow-xl transition-all duration-150
+        ${selected ? 'border-primary-400 ring-2 ring-primary-400/30 shadow-primary-500/20' : 'border-dark-600'}
         ${!data.configured ? 'border-dashed border-dark-500' : ''}
         ${hasErrors ? 'border-red-500/70' : ''}
       `}
@@ -36,31 +36,31 @@ function BaseNodeComponent({
         <Handle
           type="target"
           position={Position.Left}
-          className="!w-2.5 !h-2.5 !bg-dark-500 !border-2 !border-dark-700 hover:!bg-primary-400 hover:!border-primary-500 transition-colors"
+          className="!w-3 !h-3 !bg-dark-400 !border-2 !border-dark-600 hover:!bg-primary-400 hover:!border-primary-500 transition-colors"
         />
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2.5">
         <div className={`${iconColor} flex-shrink-0`}>
           {icon}
         </div>
         <div className="flex-1 min-w-0">
-          <div className="font-medium text-white text-sm truncate">{data.label}</div>
+          <div className="font-semibold text-white text-sm truncate">{data.label}</div>
         </div>
         {!data.configured && (
-          <div className="w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0" />
+          <div className="w-2 h-2 rounded-full bg-amber-400 flex-shrink-0 animate-pulse" />
         )}
       </div>
 
       {children && (
-        <div className="mt-1.5 text-xs text-dark-400 truncate">
+        <div className="mt-2 text-xs text-dark-300 truncate">
           {children}
         </div>
       )}
 
       {hasErrors && (
-        <div className="mt-1.5 flex items-center gap-1 text-xs text-red-400">
-          <AlertCircle size={10} />
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-red-400">
+          <AlertCircle size={12} />
           <span className="truncate">{data.errors![0]}</span>
         </div>
       )}
@@ -69,7 +69,7 @@ function BaseNodeComponent({
         <Handle
           type="source"
           position={Position.Right}
-          className="!w-2.5 !h-2.5 !bg-dark-500 !border-2 !border-dark-700 hover:!bg-primary-400 hover:!border-primary-500 transition-colors"
+          className="!w-3 !h-3 !bg-dark-400 !border-2 !border-dark-600 hover:!bg-primary-400 hover:!border-primary-500 transition-colors"
         />
       )}
     </div>

atomizer-dashboard/frontend/src/components/canvas/palette/NodePalette.tsx

@@ -37,31 +37,31 @@ export function NodePalette() {
   };
 
   return (
-    <div className="w-56 bg-dark-850 border-r border-dark-700 flex flex-col">
+    <div className="w-60 bg-dark-850 border-r border-dark-700 flex flex-col">
       <div className="p-4 border-b border-dark-700">
-        <h3 className="text-xs font-semibold text-dark-400 uppercase tracking-wider">
+        <h3 className="text-sm font-semibold text-dark-300 uppercase tracking-wider">
           Components
         </h3>
-        <p className="text-xs text-dark-500 mt-1">
+        <p className="text-xs text-dark-400 mt-1">
           Drag to canvas
         </p>
       </div>
-      <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
+      <div className="flex-1 overflow-y-auto p-3 space-y-2">
         {PALETTE_ITEMS.map((item) => (
           <div
             key={item.type}
             draggable
             onDragStart={(e) => onDragStart(e, item.type)}
-            className="flex items-center gap-2.5 px-3 py-2.5 bg-dark-800/50 rounded-lg border border-dark-700/50
+            className="flex items-center gap-3 px-3 py-3 bg-dark-800/50 rounded-lg border border-dark-700/50
                        cursor-grab hover:border-primary-500/50 hover:bg-dark-800
                        active:cursor-grabbing transition-all group"
           >
-            <div className={`${item.color} opacity-80 group-hover:opacity-100 transition-opacity`}>
+            <div className={`${item.color} opacity-90 group-hover:opacity-100 transition-opacity`}>
               {item.icon}
             </div>
             <div className="flex-1 min-w-0">
-              <div className="font-medium text-dark-200 text-sm leading-tight">{item.label}</div>
-              <div className="text-[10px] text-dark-500 truncate">{item.description}</div>
+              <div className="font-semibold text-white text-sm leading-tight">{item.label}</div>
+              <div className="text-xs text-dark-400 truncate">{item.description}</div>
             </div>
           </div>
         ))}

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

@@ -1,14 +1,19 @@
 /**
- * Execute Dialog - Prompts for study name before executing canvas intent
+ * Execute Dialog - Choose to update existing study or create new one
  */
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { FilePlus, RefreshCw, FolderOpen } from 'lucide-react';
+import { useStudy } from '../../../context/StudyContext';
+
+type ExecuteMode = 'create' | 'update';
 
 interface ExecuteDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  onExecute: (studyName: string, autoRun: boolean) => void;
+  onExecute: (studyName: string, autoRun: boolean, mode: ExecuteMode, existingStudyId?: string) => void;
   isExecuting: boolean;
+  defaultStudyId?: string; // Pre-selected study when editing
 }
 
 export function ExecuteDialog({
@@ -16,31 +21,68 @@ export function ExecuteDialog({
   onClose,
   onExecute,
   isExecuting,
+  defaultStudyId,
 }: ExecuteDialogProps) {
+  const { studies } = useStudy();
+  const [mode, setMode] = useState<ExecuteMode>('create');
   const [studyName, setStudyName] = useState('');
+  const [selectedStudyId, setSelectedStudyId] = useState<string>('');
   const [autoRun, setAutoRun] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      if (defaultStudyId) {
+        setMode('update');
+        setSelectedStudyId(defaultStudyId);
+      } else {
+        setMode('create');
+        setSelectedStudyId(studies[0]?.id || '');
+      }
+      setStudyName('');
+      setAutoRun(false);
+      setError(null);
+    }
+  }, [isOpen, defaultStudyId, studies]);
+
   if (!isOpen) return null;
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
-    // Validate study name
-    const trimmed = studyName.trim();
-    if (!trimmed) {
-      setError('Study name is required');
-      return;
-    }
+    if (mode === 'create') {
+      // Validate study name
+      const trimmed = studyName.trim();
+      if (!trimmed) {
+        setError('Study name is required');
+        return;
+      }
 
-    // Check for valid snake_case
-    if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
-      setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
-      return;
-    }
+      // Check for valid snake_case
+      if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
+        setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
+        return;
+      }
 
-    setError(null);
-    onExecute(trimmed, autoRun);
+      setError(null);
+      onExecute(trimmed, autoRun, 'create');
+    } else {
+      // Update mode
+      if (!selectedStudyId) {
+        setError('Please select a study to update');
+        return;
+      }
+
+      const selectedStudy = studies.find(s => s.id === selectedStudyId);
+      if (!selectedStudy) {
+        setError('Selected study not found');
+        return;
+      }
+
+      setError(null);
+      onExecute(selectedStudy.id, autoRun, 'update', selectedStudyId);
+    }
   };
 
   const handleClose = () => {
@@ -52,39 +94,106 @@ export function ExecuteDialog({
 
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
-      <div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-md p-6 border border-dark-700">
-        <h2 className="text-xl font-semibold text-white mb-4">
+      <div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-lg p-6 border border-dark-700">
+        <h2 className="text-xl font-semibold text-white mb-2">
           Execute with Claude
         </h2>
+        <p className="text-dark-400 text-sm mb-6">
+          Choose to create a new study or update an existing one
+        </p>
+
+        {/* Mode Tabs */}
+        <div className="flex gap-2 mb-6">
+          <button
+            type="button"
+            onClick={() => { setMode('create'); setError(null); }}
+            className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
+              mode === 'create'
+                ? 'bg-primary-600/20 border-primary-500 text-primary-400'
+                : 'bg-dark-800 border-dark-600 text-dark-400 hover:border-dark-500'
+            }`}
+          >
+            <FilePlus size={18} />
+            <span className="font-medium">Create New Study</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => { setMode('update'); setError(null); }}
+            disabled={studies.length === 0}
+            className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
+              mode === 'update'
+                ? 'bg-amber-600/20 border-amber-500 text-amber-400'
+                : 'bg-dark-800 border-dark-600 text-dark-400 hover:border-dark-500'
+            } ${studies.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
+          >
+            <RefreshCw size={18} />
+            <span className="font-medium">Update Existing</span>
+          </button>
+        </div>
 
         <form onSubmit={handleSubmit}>
-          <div className="mb-4">
-            <label
-              htmlFor="study-name"
-              className="block text-sm font-medium text-dark-300 mb-1"
-            >
-              Study Name
-            </label>
-            <input
-              id="study-name"
-              type="text"
-              value={studyName}
-              onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
-              placeholder="my_optimization_study"
-              className="w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
-              disabled={isExecuting}
-              autoFocus
-            />
-            {error && (
-              <p className="mt-1 text-sm text-red-400">{error}</p>
-            )}
-            <p className="mt-1 text-xs text-dark-500">
-              Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
-            </p>
-          </div>
+          {mode === 'create' ? (
+            /* Create New Study */
+            <div className="mb-4">
+              <label
+                htmlFor="study-name"
+                className="block text-sm font-medium text-dark-300 mb-2"
+              >
+                Study Name
+              </label>
+              <input
+                id="study-name"
+                type="text"
+                value={studyName}
+                onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
+                placeholder="my_optimization_study"
+                className="w-full px-3 py-2.5 bg-dark-800 border border-dark-600 text-white placeholder-dark-500 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
+                disabled={isExecuting}
+                autoFocus
+              />
+              <p className="mt-2 text-xs text-dark-500">
+                Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
+              </p>
+            </div>
+          ) : (
+            /* Update Existing Study */
+            <div className="mb-4">
+              <label
+                htmlFor="existing-study"
+                className="block text-sm font-medium text-dark-300 mb-2"
+              >
+                Select Study to Update
+              </label>
+              <div className="relative">
+                <FolderOpen size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500 pointer-events-none" />
+                <select
+                  id="existing-study"
+                  value={selectedStudyId}
+                  onChange={(e) => setSelectedStudyId(e.target.value)}
+                  className="w-full pl-10 pr-3 py-2.5 bg-dark-800 border border-dark-600 text-white rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 focus:outline-none transition-colors appearance-none cursor-pointer"
+                  disabled={isExecuting}
+                >
+                  {studies.map((study) => (
+                    <option key={study.id} value={study.id}>
+                      {study.name || study.id} ({study.progress.current} trials)
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <p className="mt-2 text-xs text-amber-500/80">
+                Warning: This will overwrite the study's optimization_config.json
+              </p>
+            </div>
+          )}
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
 
           <div className="mb-6">
-            <label className="flex items-center gap-2">
+            <label className="flex items-center gap-2 cursor-pointer">
               <input
                 type="checkbox"
                 checked={autoRun}
@@ -93,7 +202,7 @@ export function ExecuteDialog({
                 className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
               />
               <span className="text-sm text-dark-300">
-                Start optimization immediately after creation
+                Start optimization immediately after {mode === 'create' ? 'creation' : 'update'}
               </span>
             </label>
           </div>
@@ -103,23 +212,33 @@ export function ExecuteDialog({
               type="button"
               onClick={handleClose}
               disabled={isExecuting}
-              className="px-4 py-2 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
+              className="px-4 py-2.5 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={isExecuting}
-              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
+              className={`px-5 py-2.5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors font-medium ${
+                mode === 'create'
+                  ? 'bg-primary-600 text-white hover:bg-primary-500'
+                  : 'bg-amber-600 text-white hover:bg-amber-500'
+              }`}
             >
               {isExecuting ? (
                 <>
                   <span className="animate-spin">⏳</span>
-                  Executing...
+                  Processing...
+                </>
+              ) : mode === 'create' ? (
+                <>
+                  <FilePlus size={16} />
+                  Create & Send to Claude
                 </>
               ) : (
                 <>
-                  Send to Claude
+                  <RefreshCw size={16} />
+                  Update & Send to Claude
                 </>
               )}
             </button>