refactor(recorder): replace localStorage with IndexedDB for recording data storage and optimize navigation record

apps/chrome-extension/package.json

@@ -29,6 +29,7 @@
     "@rsbuild/plugin-less": "^1.2.4",
     "@rsbuild/plugin-node-polyfill": "1.3.0",
     "@rsbuild/plugin-react": "^1.3.1",
+    "@rsbuild/plugin-type-check": "1.2.3",
     "@types/chrome": "0.0.279",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",

apps/chrome-extension/rsbuild.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from '@rsbuild/core';
 import { pluginLess } from '@rsbuild/plugin-less';
 import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 import { version } from '../../packages/visualizer/package.json';
 
 export default defineConfig({
@@ -78,5 +79,13 @@ export default defineConfig({
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
     },
   },
-  plugins: [pluginReact(), pluginNodePolyfill(), pluginLess()],
+  plugins: [
+    pluginReact(),
+    pluginNodePolyfill(),
+    pluginLess(),
+    pluginTypeCheck({
+      // Enable type checking for both development and production builds
+      enable: true,
+    }),
+  ],
 });

apps/chrome-extension/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './App.less';
 import { PlaygroundPopup } from './extension/popup';
 

apps/chrome-extension/src/extension/recorder/components/RecordDetail.tsx

@@ -6,7 +6,16 @@ import {
 } from '@ant-design/icons';
 import type { ChromeRecordedEvent } from '@midscene/recorder';
 import { RecordTimeline } from '@midscene/recorder';
-import { Alert, Button, Card, Divider, Empty, Space, Typography } from 'antd';
+import {
+  Alert,
+  Button,
+  Card,
+  Divider,
+  Empty,
+  Space,
+  Tooltip,
+  Typography,
+} from 'antd';
 import type React from 'react';
 import {
   type RecordingSession,
@@ -23,7 +32,7 @@ interface RecordDetailProps {
   isRecording: boolean;
   currentTab: chrome.tabs.Tab | null;
   onBack: () => void;
-  onStartRecording: () => void;
+  onStartRecording: (id?: string) => void;
   onStopRecording: () => void;
   onClearEvents: () => void;
   isExtensionMode: boolean;
@@ -78,15 +87,8 @@ export const RecordDetail: React.FC<RecordDetailProps> = ({
         />
       )}
 
-      {/* Header with back button and session info */}
-      <div
-        className="detail-header"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+      {/* Header with back button */}
+      <div className="detail-header">
         <Button
           type="text"
           icon={<ArrowLeftOutlined />}
@@ -95,10 +97,15 @@ export const RecordDetail: React.FC<RecordDetailProps> = ({
         >
           Back to Sessions
         </Button>
-        <div className="session-title" style={{ textAlign: 'center', flex: 1 }}>
-          <Title level={4}>{session.name}</Title>
-        </div>
-        <div style={{ width: '120px' }} /> {/* Spacer to balance the layout */}
+      </div>
+
+      {/* Session title */}
+      <div className="session-title-section">
+        <Tooltip title={session.name} placement="topLeft">
+          <Title level={4} className="session-title-text">
+            {session.name}
+          </Title>
+        </Tooltip>
       </div>
 
       {/* Recording Controls */}
@@ -150,7 +157,7 @@ export const RecordDetail: React.FC<RecordDetailProps> = ({
               <Button
                 type="primary"
                 icon={<PlayCircleOutlined />}
-                onClick={onStartRecording}
+                onClick={()=> onStartRecording(sessionId)}
                 disabled={!currentTab || !isExtensionMode}
               >
                 Start

apps/chrome-extension/src/extension/recorder/hooks/useLifecycleCleanup.ts

@@ -7,14 +7,15 @@ import { recordLogger } from '../logger';
 export const useLifecycleCleanup = (
   isRecording: boolean,
   stopRecording: () => Promise<void>,
-  setIsRecording: (recording: boolean) => void,
+  setIsRecording: (recording: boolean) => Promise<void>,
   currentSessionId: string | null,
   getCurrentSession: () => RecordingSession | null,
   updateSession: (
     sessionId: string,
     updates: Partial<RecordingSession>,
   ) => void,
   events: ChromeRecordedEvent[], // Add events parameter to save current events
+  emergencySaveEvents: (events?: ChromeRecordedEvent[]) => Promise<void>, // Add emergency save function
 ) => {
   // Monitor visibility changes for the extension popup
   useEffect(() => {
@@ -36,10 +37,14 @@ export const useLifecycleCleanup = (
     const handleBeforeUnload = () => {
       if (isRecording) {
         recordLogger.info(
-          'Extension popup closing, stopping recording synchronously',
+          'Extension popup closing, stopping recording synchronously and saving events',
         );
-        // For unload events, we need to stop synchronously
-        setIsRecording(false);
+        // For unload events, we need to stop synchronously and save immediately
+        setIsRecording(false).catch(console.error);
+
+        // Emergency save current events
+        emergencySaveEvents(events).catch(console.error);
+
         if (currentSessionId) {
           const session = getCurrentSession();
           if (session) {
@@ -74,8 +79,12 @@ export const useLifecycleCleanup = (
     return () => {
       // Clean up any ongoing recording when component unmounts
       if (isRecording) {
-        recordLogger.info('Component unmounting, cleaning up recording');
-        setIsRecording(false);
+        recordLogger.info('Component unmounting, cleaning up recording and saving events');
+        setIsRecording(false).catch(console.error);
+
+        // Emergency save current events
+        emergencySaveEvents(events).catch(console.error);
+
         if (currentSessionId) {
           const session = getCurrentSession();
           if (session) {