dev experience

apps/website/components/dev/DevToolbar.tsx

@@ -3,7 +3,7 @@
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { useNotifications } from '@/components/notifications/NotificationProvider';
 import type { NotificationVariant } from '@/components/notifications/notificationTypes';
-import { Wrench, ChevronDown, ChevronUp, X, MessageSquare, Activity, LogIn } from 'lucide-react';
+import { Wrench, ChevronDown, ChevronUp, X, MessageSquare, Activity, LogIn, Play } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
@@ -16,6 +16,7 @@ import { UrgencySection } from './sections/UrgencySection';
 import { NotificationSendSection } from './sections/NotificationSendSection';
 import { APIStatusSection } from './sections/APIStatusSection';
 import { LoginSection } from './sections/LoginSection';
+import { ReplaySection } from './sections/ReplaySection';
 
 // Import types
 import type { DemoNotificationType, DemoUrgency, LoginMode } from './types';
@@ -410,6 +411,16 @@ export default function DevToolbar() {
               onLogout={handleLogout}
             />
           </Accordion>
+
+          {/* Replay Section - Accordion */}
+          <Accordion
+            title="Error Replay"
+            icon={<Play className="w-4 h-4 text-gray-400" />}
+            isOpen={openAccordion === 'replay'}
+            onToggle={() => setOpenAccordion(openAccordion === 'replay' ? null : 'replay')}
+          >
+            <ReplaySection />
+          </Accordion>
         </div>
       )}