>;
+}
+
+function ModelNodeConfig({ spec }: SpecConfigProps) {
+ const [showIntrospection, setShowIntrospection] = useState(false);
+
+ return (
+ <>
+
+
+
+
Read-only. Set in study configuration.
+
+
+
+
+
+ {spec.model.sim?.path && (
+
+ )}
+
+ {showIntrospection && spec.model.sim?.path && (
+
+ setShowIntrospection(false)}
+ />
+
+ )}
+
+ );
+}
+
+function SolverNodeConfig({ spec }: SpecConfigProps) {
+ return (
+
+
+
+
Detected from model file.
+
+
+
+
Edit in optimization settings.
+
+
+
+
+
+ );
+}
+
+function SurrogateNodeConfig({ spec }: SpecConfigProps) {
+ const surrogate = spec.optimization.surrogate;
+
+ return (
+ <>
+
+
+
+
+
+ {surrogate?.enabled && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ Edit in optimization settings.
+
+ );
+}
+
+// ============================================================================
+// Editable node configs
+// ============================================================================
+
+interface DesignVarNodeConfigProps {
+ node: DesignVariable;
+ onChange: (field: string, value: unknown) => void;
+}
+
+function DesignVarNodeConfig({ node, onChange }: DesignVarNodeConfigProps) {
+ return (
+ <>
+
+
+ onChange('name', e.target.value)}
+ className={inputClass}
+ />
+
+
+
+
+ onChange('expression_name', e.target.value)}
+ placeholder="NX expression name"
+ className={`${inputClass} font-mono text-sm`}
+ />
+
+
+
+
+ {node.baseline !== undefined && (
+
+
+ onChange('baseline', parseFloat(e.target.value))}
+ className={inputClass}
+ />
+
+ )}
+
+
+
+ onChange('units', e.target.value)}
+ placeholder="mm"
+ className={inputClass}
+ />
+
+
+
+ onChange('enabled', e.target.checked)}
+ className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
+ />
+
+
+
+ );
+}
+
+interface ExtractorNodeConfigProps {
+ node: Extractor;
+ onChange: (field: string, value: unknown) => void;
+}
+
+function ExtractorNodeConfig({ node, onChange }: ExtractorNodeConfigProps) {
+ const extractorOptions = [
+ { id: 'E1', name: 'Displacement', type: 'displacement' },
+ { id: 'E2', name: 'Frequency', type: 'frequency' },
+ { id: 'E3', name: 'Solid Stress', type: 'solid_stress' },
+ { id: 'E4', name: 'BDF Mass', type: 'mass_bdf' },
+ { id: 'E5', name: 'CAD Mass', type: 'mass_expression' },
+ { id: 'E8', name: 'Zernike (OP2)', type: 'zernike_op2' },
+ { id: 'E9', name: 'Zernike (CSV)', type: 'zernike_csv' },
+ { id: 'E10', name: 'Zernike (RMS)', type: 'zernike_rms' },
+ ];
+
+ return (
+ <>
+
+
+ onChange('name', e.target.value)}
+ className={inputClass}
+ />
+
+
+
+
+
+
+
+ {node.type === 'custom_function' && node.function && (
+
+
+
+
Edit custom code in dedicated editor.
+
+
+
o.name).join(', ') || ''}
+ readOnly
+ placeholder="value, unit"
+ className={`${inputClass} bg-dark-900 cursor-not-allowed`}
+ />
+
Outputs are defined by extractor type.
+
+
+ onChange('name', e.target.value)}
+ className={inputClass}
+ />
+
+
+
+
+
+
+
+
+
+ onChange('weight', parseFloat(e.target.value))}
+ className={inputClass}
+ />
+
+
+ {node.target !== undefined && (
+
+
+ onChange('target', parseFloat(e.target.value))}
+ className={inputClass}
+ />
+
+ )}
+
+ );
+}
+
+interface ConstraintNodeConfigProps {
+ node: Constraint;
+ onChange: (field: string, value: unknown) => void;
+}
+
+function ConstraintNodeConfig({ node, onChange }: ConstraintNodeConfigProps) {
+ return (
+ <>
+
+
+ onChange('name', e.target.value)}
+ className={inputClass}
+ />
+
+
+
+
+
+
+
+
+
+ onChange('threshold', parseFloat(e.target.value))}
+ className={inputClass}
+ />
+
+
{/* Minimal Header */}
@@ -55,24 +249,75 @@ export function CanvasView() {
Canvas Builder
- {selectedStudy && (
+ {activeStudyId && (
<>
- {selectedStudy.name || selectedStudy.id}
+ {activeStudyId}
+ {hasUnsavedChanges && (
+ •
+ )}
)}
{/* Stats */}
-
- {nodes.length} node{nodes.length !== 1 ? 's' : ''} • {edges.length} edge{edges.length !== 1 ? 's' : ''}
-
+ {useSpecMode && spec ? (
+
+ {spec.design_variables.length} vars • {spec.extractors.length} ext • {spec.objectives.length} obj
+
+ ) : (
+
+ {nodes.length} node{nodes.length !== 1 ? 's' : ''} • {edges.length} edge{edges.length !== 1 ? 's' : ''}
+
+ )}
+
+ {/* Mode indicator */}
+ {useSpecMode && (
+
+
+ v2.0
+
+ )}
+
+ {(isLoading || specLoading) && (
+
+ )}
+ {/* Save Button - only show when there's a study and changes */}
+ {activeStudyId && (
+
+ )}
+
+ {/* Reload Button */}
+ {activeStudyId && (
+
+ )}
+
+
+ {/* Divider */}
+
+
+ {/* Chat Toggle */}
+
+ {/* Tab buttons (only show when expanded) */}
+ {!paletteCollapsed && (
+
+
+
+
+ )}
+
+ {/* Tab content */}
+
+ {leftSidebarTab === 'components' || paletteCollapsed ? (
+ setPaletteCollapsed(!paletteCollapsed)}
+ showToggle={true}
+ />
+ ) : (
+ {
+ // TODO: Update model path in spec
+ showNotification(`Selected: ${path.split(/[/\\]/).pop()}`);
+ }}
+ />
+ )}
+
+
+ {useSpecMode ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+ )}
+
+ {/* Chat/Assistant Panel */}
+ {showChat && (
+
+ {/* Chat Header */}
+
+
+
+ Assistant
+ {isConnected && (
+
+ )}
+
+
+ {/* Power Mode Toggle */}
+
+
+
+
+ {/* Chat Content */}
+
+