Independent Panel: move invalid-session guard into filteredSessions\n\n- Exclude items without a valid sessionId inside useMemo to avoid extra render-time filter\n- Render maps directly over filteredSessions; behavior unchanged, fewer iterations\n\nWhy: Align with review to keep data shaping in one place and avoid double filtering on each render.

Author: PeterDaveHello

src/pages/IndependentPanel/App.jsx

@@ -188,9 +188,14 @@ function App() {
 
   const filteredSessions = useMemo(() => {
     const query = normalizeForSearch(debouncedQuery).trim()
-    if (!query) return sessions
+    // Always exclude items without a valid sessionId first
+    const validSessions = Array.isArray(sessions)
+      ? sessions.filter((s) => Boolean(s?.sessionId))
+      : []
 
-    return sessions.filter((session) => {
+    if (!query) return validSessions
+
+    return validSessions.filter((session) => {
       // Search in session name
       const sessionName = normalizeForSearch(session.sessionName)
       if (sessionName.includes(query)) {
@@ -254,69 +259,67 @@ function App() {
                 {t('No conversations found')}
               </div>
             )}
-            {filteredSessions
-              .filter((session) => Boolean(session.sessionId))
-              .map((session) => (
-                <div role="listitem" key={session.sessionId}>
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    aria-pressed={sessionId === session.sessionId}
-                    className={`normal-button chat-list-item ${
-                      sessionId === session.sessionId ? 'active' : ''
-                    }`}
-                    onClick={() => {
+            {filteredSessions.map((session) => (
+              <div role="listitem" key={session.sessionId}>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  aria-pressed={sessionId === session.sessionId}
+                  className={`normal-button chat-list-item ${
+                    sessionId === session.sessionId ? 'active' : ''
+                  }`}
+                  onClick={() => {
+                    setSessionIdSafe(session.sessionId)
+                  }}
+                  onKeyDown={(e) => {
+                    if ((e.key === 'Enter' || e.key === ' ') && e.currentTarget === e.target) {
+                      e.preventDefault()
                       setSessionIdSafe(session.sessionId)
+                    }
+                  }}
+                >
+                  {session.sessionName}
+                  <span
+                    className="gpt-util-group"
+                    onClick={(e) => {
+                      e.stopPropagation()
                     }}
                     onKeyDown={(e) => {
-                      if ((e.key === 'Enter' || e.key === ' ') && e.currentTarget === e.target) {
+                      if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault()
-                        setSessionIdSafe(session.sessionId)
+                        e.stopPropagation()
                       }
                     }}
                   >
-                    {session.sessionName}
-                    <span
-                      className="gpt-util-group"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault()
-                          e.stopPropagation()
+                    <DeleteButton
+                      size={14}
+                      text={t('Delete Conversation')}
+                      onConfirm={async () => {
+                        const deletedId = session.sessionId
+                        const updatedSessions = await deleteSession(deletedId)
+                        setSessions(updatedSessions)
+                        if (!updatedSessions || updatedSessions.length === 0) {
+                          stopCurrentPort()
+                          setSessionId(null)
+                          setCurrentSession(null)
+                          return
                         }
-                      }}
-                    >
-                      <DeleteButton
-                        size={14}
-                        text={t('Delete Conversation')}
-                        onConfirm={async () => {
-                          const deletedId = session.sessionId
-                          const updatedSessions = await deleteSession(deletedId)
-                          setSessions(updatedSessions)
-                          if (!updatedSessions || updatedSessions.length === 0) {
-                            stopCurrentPort()
+                        // Only change active session if the deleted one was active
+                        if (sessionId === deletedId) {
+                          const next = updatedSessions.find((s) => s && s.sessionId)
+                          if (next) {
+                            await setSessionIdSafe(next.sessionId)
+                          } else {
                             setSessionId(null)
                             setCurrentSession(null)
-                            return
                           }
-                          // Only change active session if the deleted one was active
-                          if (sessionId === deletedId) {
-                            const next = updatedSessions.find((s) => s && s.sessionId)
-                            if (next) {
-                              await setSessionIdSafe(next.sessionId)
-                            } else {
-                              setSessionId(null)
-                              setCurrentSession(null)
-                            }
-                          }
-                        }}
-                      />
-                    </span>
-                  </div>
+                        }
+                      }}
+                    />
+                  </span>
                 </div>
-              ))}
+              </div>
+            ))}
           </div>
           <hr />
           <div className="chat-sidebar-button-group">