fix: load button location, preparing label, debug logs/panels

Author: MaddieWright

frontend/components/ui-header/settings-bar.tsx

@@ -46,6 +46,7 @@ export default function SettingsBar() {
     );
     const [sessions, setSessions] = useState<SessionSummary[]>([]);
     const [isFetchingSessions, setIsFetchingSessions] = useState(false);
+    const [fetchingFor, setFetchingFor] = useState<'save' | 'load' | null>(null);
     const [isSaving, setIsSaving] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
 
@@ -153,6 +154,7 @@ export default function SettingsBar() {
         }
 
         setIsFetchingSessions(true);
+        setFetchingFor('save');
         try {
             const fetchedSessions = await getSessions();
             setSessions(fetchedSessions);
@@ -165,6 +167,7 @@ export default function SettingsBar() {
             });
         } finally {
             setIsFetchingSessions(false);
+            setFetchingFor(null);
         }
     };
 
@@ -174,6 +177,7 @@ export default function SettingsBar() {
         }
 
         setIsFetchingSessions(true);
+        setFetchingFor('load');
         try {
             const fetchedSessions = await getSessions();
             setSessions(fetchedSessions);
@@ -186,6 +190,7 @@ export default function SettingsBar() {
             });
         } finally {
             setIsFetchingSessions(false);
+            setFetchingFor(null);
         }
     };
 
@@ -296,25 +301,25 @@ export default function SettingsBar() {
                 </Dialog>
                 <Button
                     variant="outline"
-                    onClick={handleLoadClick}
+                    onClick={handleSaveClick}
                     disabled={isSaving || isLoading || isFetchingSessions}
                 >
-                    {isLoading
-                        ? 'Loading...'
-                        : isFetchingSessions && sessionModalMode === 'load'
+                    {isSaving
+                        ? 'Saving...'
+                        : fetchingFor === 'save'
                           ? 'Preparing...'
-                          : 'Load'}
+                          : 'Save'}
                 </Button>
                 <Button
                     variant="outline"
-                    onClick={handleSaveClick}
+                    onClick={handleLoadClick}
                     disabled={isSaving || isLoading || isFetchingSessions}
                 >
-                    {isSaving
-                        ? 'Saving...'
-                        : isFetchingSessions && sessionModalMode === 'save'
+                    {isLoading
+                        ? 'Loading...'
+                        : fetchingFor === 'load'
                           ? 'Preparing...'
-                          : 'Save'}
+                          : 'Load'}
                 </Button>
             </div>
 

frontend/components/ui-react-flow/react-flow-view.tsx

@@ -184,7 +184,6 @@ const ReactFlowInterface = () => {
         event.preventDefault();
 
         const nodeType = event.dataTransfer.getData('application/reactflow');
-        console.log('🎯 Dropped nodeType:', nodeType);
 
         if (!nodeType) {
             return;
@@ -202,16 +201,7 @@ const ReactFlowInterface = () => {
             data: { label: `${nodeType}` },
         };
 
-        console.log('🆕 Creating new node:', newNode);
-
-        setNodes((nds) => {
-            const updatedNodes = [...nds, newNode];
-            console.log(
-                '📋 Updated nodes list:',
-                updatedNodes.map((n) => ({ id: n.id, type: n.type }))
-            );
-            return updatedNodes;
-        });
+        setNodes((nds) => [...nds, newNode]);
     };
 
     const isValidConnection = useCallback(
@@ -307,19 +297,6 @@ const ReactFlowInterface = () => {
                     <Sidebar />
                 </Panel>
 
-                {/* Debug Panel */}
-                <Panel position="bottom-right">
-                    <div className="bg-white p-2 rounded border text-xs">
-                        <div>Nodes: {nodes.length}</div>
-                        <div>Edges: {edges.length}</div>
-                        <div className="mt-1 max-w-[260px]">
-                            {edges.map((e) => (
-                                <div key={e.id || `${e.source}-${e.target}`}>{`${e.source} → ${e.target}`}</div>
-                            ))}
-                        </div>
-                    </div>
-                </Panel>
-
                 <Background />
             </ReactFlow>
         </div>