Harden Independent Panel state handling and async safety

- Guard  before syncing  to avoid null access
- Make  robust: clear selection when no valid sessions
- Add  and guard deletion flow to avoid setState after unmount
- Keep debounce and index-based filtering intact for performance

Author: PeterDaveHello

src/components/DeleteButton/index.jsx

@@ -29,12 +29,14 @@ function DeleteButton({ onConfirm, size, text }) {
           fontSize: '10px',
           ...(waitConfirm ? {} : { display: 'none' }),
         }}
+        disabled={confirmingRef.current}
+        aria-busy={confirmingRef.current ? 'true' : 'false'}
         onMouseDown={(e) => {
           e.preventDefault()
           e.stopPropagation()
         }}
         onBlur={() => {
-          setWaitConfirm(false)
+          if (!confirmingRef.current) setWaitConfirm(false)
         }}
         onClick={async (e) => {
           if (confirmingRef.current) return
@@ -43,9 +45,13 @@ function DeleteButton({ onConfirm, size, text }) {
           confirmingRef.current = true
           try {
             await onConfirm()
+            setWaitConfirm(false)
+          } catch (err) {
+            // Keep confirmation visible to allow retry; optionally log
+            // eslint-disable-next-line no-console
+            console.error(err)
           } finally {
             confirmingRef.current = false
-            setWaitConfirm(false)
           }
         }}
       >
@@ -57,7 +63,8 @@ function DeleteButton({ onConfirm, size, text }) {
         role="button"
         tabIndex={0}
         aria-label={text}
-        style={waitConfirm ? { display: 'none' } : {}}
+        aria-hidden={waitConfirm ? 'true' : undefined}
+        style={waitConfirm ? { visibility: 'hidden' } : {}}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault()

src/pages/IndependentPanel/App.jsx

@@ -46,8 +46,14 @@ function App() {
   const setSessionIdSafe = async (sessionId) => {
     stopCurrentPort()
     const { session, currentSessions } = await getSession(sessionId)
-    if (session) setSessionId(sessionId)
-    else if (currentSessions.length > 0) setSessionId(currentSessions[0].sessionId)
+    if (session && session.sessionId) {
+      setSessionId(session.sessionId)
+    } else if (Array.isArray(currentSessions) && currentSessions.length > 0) {
+      setSessionId(currentSessions[0].sessionId)
+    } else {
+      setSessionId(null)
+      setCurrentSession(null)
+    }
   }
 
   useEffect(() => {
@@ -78,10 +84,10 @@ function App() {
 
   // Sync collapsed state from persisted config
   useEffect(() => {
-    if ('independentPanelCollapsed' in config) {
+    if (config && typeof config === 'object' && 'independentPanelCollapsed' in config) {
       setCollapsed(!!config.independentPanelCollapsed)
     }
-  }, [config.independentPanelCollapsed])
+  }, [config && config.independentPanelCollapsed])
 
   useEffect(() => {
     // eslint-disable-next-line
@@ -154,6 +160,15 @@ function App() {
     return () => clearTimeout(id)
   }, [searchQuery])
 
+  // Track mount state to guard async setState after unmount
+  const isMountedRef = useRef(true)
+  useEffect(() => {
+    isMountedRef.current = true
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
   // Keyboard shortcuts: Ctrl/Cmd+F and '/' to focus search
   useEffect(() => {
     const focusSearch = () => {
@@ -298,6 +313,7 @@ function App() {
                       onConfirm={async () => {
                         const deletedId = session.sessionId
                         const updatedSessions = await deleteSession(deletedId)
+                        if (!isMountedRef.current) return
                         setSessions(updatedSessions)
                         if (!updatedSessions || updatedSessions.length === 0) {
                           stopCurrentPort()