feat: Phase 1 - Canvas with React Flow

- 8 node types (Model, Solver, DesignVar, Extractor, Objective, Constraint, Algorithm, Surrogate)
- Drag-drop from palette to canvas
- Node configuration panels
- Graph validation with error/warning display
- Intent JSON serialization
- Zustand state management

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

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

@@ -0,0 +1,52 @@
+import { DragEvent } from 'react';
+import { NodeType } from '../../../lib/canvas/schema';
+
+interface PaletteItem {
+  type: NodeType;
+  label: string;
+  icon: string;
+  description: string;
+}
+
+const PALETTE_ITEMS: PaletteItem[] = [
+  { type: 'model', label: 'Model', icon: '📦', description: 'NX model file' },
+  { type: 'solver', label: 'Solver', icon: '⚙️', description: 'Nastran solution' },
+  { type: 'designVar', label: 'Design Variable', icon: '📐', description: 'Parameter to vary' },
+  { type: 'extractor', label: 'Extractor', icon: '🔬', description: 'Physics extraction' },
+  { type: 'objective', label: 'Objective', icon: '🎯', description: 'Optimization goal' },
+  { type: 'constraint', label: 'Constraint', icon: '🚧', description: 'Limit condition' },
+  { type: 'algorithm', label: 'Algorithm', icon: '🧠', description: 'Optimization method' },
+  { type: 'surrogate', label: 'Surrogate', icon: '🚀', description: 'Neural acceleration' },
+];
+
+export function NodePalette() {
+  const onDragStart = (event: DragEvent, nodeType: NodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div className="w-64 bg-gray-50 border-r border-gray-200 p-4 overflow-y-auto">
+      <h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">
+        Components
+      </h3>
+      <div className="space-y-2">
+        {PALETTE_ITEMS.map((item) => (
+          <div
+            key={item.type}
+            draggable
+            onDragStart={(e) => onDragStart(e, item.type)}
+            className="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200
+                       cursor-grab hover:border-blue-300 hover:shadow-sm transition-all"
+          >
+            <span className="text-xl">{item.icon}</span>
+            <div>
+              <div className="font-medium text-gray-800">{item.label}</div>
+              <div className="text-xs text-gray-500">{item.description}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}