refactor(SessionManager): stabilize props and remove forced remount

The change keeps `SelectPrompt` mounted instead of forcing a remount
on every view/session-count change, and memoizes the menu `options`
so `@inkjs/ui` only sees a new array when the actual session-menu
inputs change.

Kept an explicit `sessionListVersion` bump after deletion so the delete
menu refreshes even when tests mutate the mocked session list in place.

Author: remarkablemark

src/components/SessionManager/SessionManager.test.tsx

@@ -175,6 +175,29 @@ describe('SessionManager', () => {
     expect(lastFrame()).not.toContain('Second session');
   });
 
+  it('keeps the prompt mounted while navigating between views', () => {
+    const sessionManager = (
+      <SessionManager
+        currentSessionId="session-1"
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onNew={vi.fn()}
+        onOpen={vi.fn()}
+      />
+    );
+    const { rerender } = render(sessionManager);
+
+    expect(selectionState.instanceId).toBe('instance-1');
+
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
+    expect(selectionState.instanceId).toBe('instance-1');
+
+    selectionState.onChange?.('back');
+    rerender(sessionManager);
+    expect(selectionState.instanceId).toBe('instance-1');
+  });
+
   it('shows an error when onOpen throws', () => {
     const onOpen = vi.fn().mockImplementation(() => {
       throw new Error('Session not found');
@@ -466,7 +489,7 @@ describe('SessionManager', () => {
     );
   });
 
-  it('remounts the select prompt when switching between main, open, and delete views', () => {
+  it('keeps the select prompt mounted when switching between main, open, and delete views', () => {
     const sessionManager = (
       <SessionManager
         currentSessionId="session-1"
@@ -492,9 +515,9 @@ describe('SessionManager', () => {
     rerender(sessionManager);
     const deleteInstanceId = selectionState.instanceId;
 
-    expect(openInstanceId).not.toBe(mainInstanceId);
-    expect(nextMainInstanceId).not.toBe(openInstanceId);
-    expect(deleteInstanceId).not.toBe(mainInstanceId);
-    expect(nextMainInstanceId).not.toBe(deleteInstanceId);
+    expect(openInstanceId).toBe(mainInstanceId);
+    expect(nextMainInstanceId).toBe(openInstanceId);
+    expect(deleteInstanceId).toBe(mainInstanceId);
+    expect(nextMainInstanceId).toBe(deleteInstanceId);
   });
 });

src/components/SessionManager/SessionManager.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useStdout } from 'ink';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { OPTION, THEME, UI } from '@/constants';
 import type { ThemeDefinition } from '@/types';
@@ -32,6 +32,12 @@ const ACTION = {
 } as const;
 
 const SESSION_LABEL_PADDING = 4;
+const MAIN_OPTIONS = [
+  { label: 'New session', value: ACTION.NEW },
+  { label: 'Open session', value: ACTION.OPEN_MENU },
+  { label: 'Delete session', value: ACTION.DELETE_MENU },
+  { label: 'Close', value: ACTION.CLOSE },
+];
 
 function truncate(value: string, maxLength: number): string {
   return value.length > maxLength
@@ -65,38 +71,40 @@ export function SessionManager({
 }: Props) {
   const [view, setView] = useState<View>(View.Main);
   const [error, setError] = useState<string>();
-  const [, refreshSessionList] = useState(0);
+  const [sessionListVersion, refreshSessionList] = useState(0);
   const { stdout } = useStdout();
 
   const sessions = listSessions();
   const maxLabelWidth = Math.max(1, stdout.columns - SESSION_LABEL_PADDING);
-  const options =
-    view === View.Open
-      ? [
+  const options = useMemo(() => {
+    switch (view) {
+      case View.Open:
+        return [
           ...sessions
             .filter(({ id }) => id !== currentSessionId)
             .map((session) => ({
               label: formatSessionLabel(session, maxLabelWidth),
               value: `${ACTION.OPEN_PREFIX}${session.id}`,
             })),
           OPTION.BACK,
-        ]
-      : view === View.Delete
-        ? [
-            ...sessions
-              .filter(({ id }) => id !== currentSessionId)
-              .map((session) => ({
-                label: formatSessionLabel(session, maxLabelWidth, 'Delete '),
-                value: `${ACTION.DELETE_PREFIX}${session.id}`,
-              })),
-            OPTION.BACK,
-          ]
-        : [
-            { label: 'New session', value: ACTION.NEW },
-            { label: 'Open session', value: ACTION.OPEN_MENU },
-            { label: 'Delete session', value: ACTION.DELETE_MENU },
-            { label: 'Close', value: ACTION.CLOSE },
-          ];
+        ];
+
+      case View.Delete:
+        return [
+          ...sessions
+            .filter(({ id }) => id !== currentSessionId)
+            .map((session) => ({
+              label: formatSessionLabel(session, maxLabelWidth, 'Delete '),
+              value: `${ACTION.DELETE_PREFIX}${session.id}`,
+            })),
+          OPTION.BACK,
+        ];
+
+      case View.Main:
+      default:
+        return MAIN_OPTIONS;
+    }
+  }, [currentSessionId, maxLabelWidth, sessionListVersion, sessions, view]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -172,7 +180,6 @@ export function SessionManager({
       )}
 
       <SelectPrompt
-        key={`${view}:${String(sessions.length)}`}
         options={options}
         onCancel={onClose}
         onChange={handleChange}