fix issues

apps/website/components/dev/Accordion.tsx

@@ -1,22 +1,21 @@
 'use client';
 
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 interface AccordionProps {
   title: string;
   icon: ReactNode;
   children: ReactNode;
-  defaultOpen?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
 }
 
-export function Accordion({ title, icon, children, defaultOpen = false }: AccordionProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
+export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
   return (
     <div className="border border-charcoal-outline rounded-lg overflow-hidden bg-iron-gray/30">
       <button
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={onToggle}
         className="w-full flex items-center justify-between px-3 py-2 hover:bg-iron-gray/50 transition-colors"
       >
         <div className="flex items-center gap-2">

apps/website/components/dev/DevToolbar.tsx

@@ -38,6 +38,9 @@ export default function DevToolbar() {
   const [circuitBreakers, setCircuitBreakers] = useState(() => CircuitBreakerRegistry.getInstance().getStatus());
   const [checkingHealth, setCheckingHealth] = useState(false);
   
+  // Accordion state - only one open at a time
+  const [openAccordion, setOpenAccordion] = useState<string | null>('notifications');
+  
   const currentDriverId = useEffectiveDriverId();
 
   // Sync login mode with actual session state on mount
@@ -350,17 +353,18 @@ export default function DevToolbar() {
       {isExpanded && (
         <div className="p-4 space-y-3">
           {/* Notification Section - Accordion */}
-          <Accordion 
-            title="Notifications" 
+          <Accordion
+            title="Notifications"
             icon={<MessageSquare className="w-4 h-4 text-gray-400" />}
-            defaultOpen={true}
+            isOpen={openAccordion === 'notifications'}
+            onToggle={() => setOpenAccordion(openAccordion === 'notifications' ? null : 'notifications')}
           >
             <div className="space-y-3">
-              <NotificationTypeSection 
+              <NotificationTypeSection
                 selectedType={selectedType}
                 onSelectType={setSelectedType}
               />
-              <UrgencySection 
+              <UrgencySection
                 selectedUrgency={selectedUrgency}
                 onSelectUrgency={setSelectedUrgency}
               />
@@ -375,10 +379,11 @@ export default function DevToolbar() {
           </Accordion>
 
           {/* API Status Section - Accordion */}
-          <Accordion 
-            title="API Status" 
+          <Accordion
+            title="API Status"
             icon={<Activity className="w-4 h-4 text-gray-400" />}
-            defaultOpen={false}
+            isOpen={openAccordion === 'apiStatus'}
+            onToggle={() => setOpenAccordion(openAccordion === 'apiStatus' ? null : 'apiStatus')}
           >
             <APIStatusSection
               apiStatus={apiStatus}
@@ -392,10 +397,11 @@ export default function DevToolbar() {
           </Accordion>
 
           {/* Login Section - Accordion */}
-          <Accordion 
-            title="Demo Login" 
+          <Accordion
+            title="Demo Login"
             icon={<LogIn className="w-4 h-4 text-gray-400" />}
-            defaultOpen={false}
+            isOpen={openAccordion === 'login'}
+            onToggle={() => setOpenAccordion(openAccordion === 'login' ? null : 'login')}
           >
             <LoginSection
               loginMode={loginMode}