Merge pull request #73 from ai-action/feat/session

Author: remarkablemark

src/components/SessionManager.test.tsx

@@ -1,15 +1,20 @@
-import { Text } from 'ink';
+import { Text, useStdout } from 'ink';
 import { render } from 'ink-testing-library';
 import { useState } from 'react';
 
 import { SessionManager } from './SessionManager';
 
-const selectionState = vi.hoisted(() => ({
-  instanceId: '',
-  mountCount: 0,
-  onCancel: null as (() => void) | null,
-  onChange: null as ((value: string) => void) | null,
-  options: [] as { label: string; value: string }[],
+const { mockColumns, selectionState } = vi.hoisted(() => ({
+  mockColumns: {
+    value: 100,
+  },
+  selectionState: {
+    instanceId: '',
+    mountCount: 0,
+    onCancel: null as (() => void) | null,
+    onChange: null as ((value: string) => void) | null,
+    options: [] as { label: string; value: string }[],
+  },
 }));
 
 const sessions = vi.hoisted(() => [
@@ -29,6 +34,15 @@ const sessions = vi.hoisted(() => [
   },
 ]);
 
+vi.mock('ink', async () => ({
+  ...(await vi.importActual('ink')),
+  useStdout: vi.fn(() => ({
+    stdout: {
+      columns: mockColumns.value,
+    },
+  })),
+}));
+
 vi.mock('./SelectPrompt', () => ({
   SelectPrompt: ({
     onCancel,
@@ -69,6 +83,8 @@ vi.mock('../utils/session', () => ({
 
 describe('SessionManager', () => {
   beforeEach(() => {
+    mockColumns.value = 100;
+    vi.mocked(useStdout).mockClear();
     selectionState.instanceId = '';
     selectionState.mountCount = 0;
     selectionState.onCancel = null;
@@ -94,7 +110,53 @@ describe('SessionManager', () => {
     );
   });
 
-  it('renders the current session, other sessions, and management actions', () => {
+  it('truncates long session labels to the available width', () => {
+    mockColumns.value = 36;
+    sessions[1] = {
+      ...sessions[1],
+      title:
+        'testing a really long input with a lot of words, writing stuff just to fill space',
+    };
+
+    const sessionManager = (
+      <SessionManager
+        currentSessionId="session-1"
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onNew={vi.fn()}
+        onOpen={vi.fn()}
+      />
+    );
+    const { lastFrame, rerender } = render(sessionManager);
+
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
+
+    expect(lastFrame()).toContain('…');
+    expect(lastFrame()).not.toContain('fill space');
+  });
+
+  it('handles extremely narrow terminal by truncating entire label', () => {
+    mockColumns.value = 5;
+
+    const sessionManager = (
+      <SessionManager
+        currentSessionId="session-1"
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onNew={vi.fn()}
+        onOpen={vi.fn()}
+      />
+    );
+    const { lastFrame, rerender } = render(sessionManager);
+
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
+
+    expect(lastFrame()).toContain('…');
+  });
+
+  it('renders the main session actions', () => {
     const { lastFrame } = render(
       <SessionManager
         currentSessionId="session-1"
@@ -107,9 +169,10 @@ describe('SessionManager', () => {
 
     expect(lastFrame()).toContain('Sessions');
     expect(lastFrame()).toContain('Select session');
-    expect(lastFrame()).toContain('Current: First session');
-    expect(lastFrame()).toContain('Second session');
+    expect(lastFrame()).toContain('Open session');
     expect(lastFrame()).toContain('Delete session');
+    expect(lastFrame()).not.toContain('Current: First session');
+    expect(lastFrame()).not.toContain('Second session');
   });
 
   it('shows an error when onOpen throws', () => {
@@ -127,6 +190,8 @@ describe('SessionManager', () => {
     );
     const { lastFrame, rerender } = render(sessionManager);
 
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
     selectionState.onChange?.('open:session-2');
     rerender(sessionManager);
 
@@ -172,6 +237,8 @@ describe('SessionManager', () => {
     );
     const { lastFrame, rerender } = render(sessionManager);
 
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
     selectionState.onChange?.('open:session-2');
     rerender(sessionManager);
 
@@ -204,16 +271,19 @@ describe('SessionManager', () => {
 
   it('opens the selected session', () => {
     const onOpen = vi.fn();
-    render(
+    const sessionManager = (
       <SessionManager
         currentSessionId="session-1"
         onClose={vi.fn()}
         onDelete={vi.fn()}
         onNew={vi.fn()}
         onOpen={onOpen}
-      />,
+      />
     );
+    const { rerender } = render(sessionManager);
 
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
     selectionState.onChange?.('open:session-2');
 
     expect(onOpen).toHaveBeenCalledWith('session-2');
@@ -254,7 +324,7 @@ describe('SessionManager', () => {
     expect(onClose).toHaveBeenCalledTimes(2);
   });
 
-  it('includes the delete-menu option', () => {
+  it('includes the open-menu and delete-menu options', () => {
     render(
       <SessionManager
         currentSessionId="session-1"
@@ -265,11 +335,41 @@ describe('SessionManager', () => {
       />,
     );
 
+    expect(selectionState.options.map(({ value }) => value)).toContain(
+      'open-menu',
+    );
     expect(selectionState.options.map(({ value }) => value)).toContain(
       'delete-menu',
     );
   });
 
+  it('shows sessions in open mode', () => {
+    const sessionManager = (
+      <SessionManager
+        currentSessionId="session-1"
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onNew={vi.fn()}
+        onOpen={vi.fn()}
+      />
+    );
+    const { lastFrame, rerender } = render(sessionManager);
+
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
+
+    expect(lastFrame()).toContain('Open session');
+    expect(lastFrame()).toContain('Second session');
+    expect(lastFrame()).not.toContain('Current: First session');
+    expect(selectionState.options.map(({ value }) => value)).toContain(
+      'open:session-2',
+    );
+    expect(selectionState.options.map(({ value }) => value)).not.toContain(
+      'open:session-1',
+    );
+    expect(selectionState.options.map(({ value }) => value)).toContain('back');
+  });
+
   it('deletes the selected session in delete mode', () => {
     const onDelete = vi.fn();
     render(
@@ -343,7 +443,30 @@ describe('SessionManager', () => {
     );
   });
 
-  it('remounts the select prompt when switching between delete and main views', () => {
+  it('returns to main view when back is selected in open mode', () => {
+    const sessionManager = (
+      <SessionManager
+        currentSessionId="session-1"
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onNew={vi.fn()}
+        onOpen={vi.fn()}
+      />
+    );
+    const { rerender } = render(sessionManager);
+
+    selectionState.onChange?.('open-menu');
+    rerender(sessionManager);
+    expect(selectionState.options.map(({ value }) => value)).toContain('back');
+
+    selectionState.onChange?.('back');
+    rerender(sessionManager);
+    expect(selectionState.options.map(({ value }) => value)).toContain(
+      'open-menu',
+    );
+  });
+
+  it('remounts the select prompt when switching between main, open, and delete views', () => {
     const sessionManager = (
       <SessionManager
         currentSessionId="session-1"
@@ -357,14 +480,20 @@ describe('SessionManager', () => {
 
     const mainInstanceId = selectionState.instanceId;
 
-    selectionState.onChange?.('delete-menu');
+    selectionState.onChange?.('open-menu');
     rerender(sessionManager);
-    const deleteInstanceId = selectionState.instanceId;
+    const openInstanceId = selectionState.instanceId;
 
     selectionState.onChange?.('back');
     rerender(sessionManager);
     const nextMainInstanceId = selectionState.instanceId;
 
+    selectionState.onChange?.('delete-menu');
+    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);
   });

src/components/SessionManager.tsx

@@ -1,6 +1,7 @@
-import { Box, Text } from 'ink';
+import { Box, Text, useStdout } from 'ink';
 import { useCallback, useState } from 'react';
 
+import { UI } from '../constants';
 import { listSessions, type SessionMetadata } from '../utils/session';
 import { SelectPrompt, SelectPromptHint } from './SelectPrompt';
 
@@ -14,6 +15,7 @@ interface Props {
 
 enum VIEW {
   MAIN = 'main',
+  OPEN = 'open',
   DELETE = 'delete',
 }
 
@@ -23,12 +25,32 @@ const ACTION = {
   DELETE_MENU: 'delete-menu',
   DELETE_PREFIX: 'delete:',
   NEW: 'new',
+  OPEN_MENU: 'open-menu',
   OPEN_PREFIX: 'open:',
 } as const;
 
-function formatSessionLabel(session: SessionMetadata): string {
+const SESSION_LABEL_PADDING = 4;
+
+function truncate(value: string, maxLength: number): string {
+  return value.length > maxLength
+    ? `${value.slice(0, maxLength - 1).trimEnd()}${UI.ELLIPSIS}`
+    : value;
+}
+
+function formatSessionLabel(
+  session: SessionMetadata,
+  maxWidth: number,
+  prefix = '',
+): string {
   const timestamp = new Date(session.updatedAt).toLocaleString();
-  return `${session.title} (${timestamp})`;
+  const suffix = ` (${timestamp})`;
+  const availableTitleWidth = maxWidth - prefix.length - suffix.length;
+
+  if (availableTitleWidth < 1) {
+    return truncate(`${prefix}${session.title}${suffix}`, maxWidth);
+  }
+
+  return `${prefix}${truncate(session.title, availableTitleWidth)}${suffix}`;
 }
 
 export function SessionManager({
@@ -41,28 +63,37 @@ export function SessionManager({
   const [view, setView] = useState<VIEW>(VIEW.MAIN);
   const [error, setError] = useState<string>();
   const [, refreshSessionList] = useState(0);
+  const { stdout } = useStdout();
 
   const sessions = listSessions();
+  const maxLabelWidth = Math.max(1, stdout.columns - SESSION_LABEL_PADDING);
   const options =
-    view === VIEW.DELETE
+    view === VIEW.OPEN
       ? [
           ...sessions
             .filter(({ id }) => id !== currentSessionId)
             .map((session) => ({
-              label: `Delete ${formatSessionLabel(session)}`,
-              value: `${ACTION.DELETE_PREFIX}${session.id}`,
+              label: formatSessionLabel(session, maxLabelWidth),
+              value: `${ACTION.OPEN_PREFIX}${session.id}`,
             })),
           { label: 'Back', value: ACTION.BACK },
         ]
-      : [
-          { label: 'New session', value: ACTION.NEW },
-          ...sessions.map((session) => ({
-            label: `${session.id === currentSessionId ? 'Current: ' : ''}${formatSessionLabel(session)}`,
-            value: `${ACTION.OPEN_PREFIX}${session.id}`,
-          })),
-          { label: 'Delete session', value: ACTION.DELETE_MENU },
-          { label: 'Close', value: ACTION.CLOSE },
-        ];
+      : view === VIEW.DELETE
+        ? [
+            ...sessions
+              .filter(({ id }) => id !== currentSessionId)
+              .map((session) => ({
+                label: formatSessionLabel(session, maxLabelWidth, 'Delete '),
+                value: `${ACTION.DELETE_PREFIX}${session.id}`,
+              })),
+            { label: 'Back', value: ACTION.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 },
+          ];
 
   const handleChange = useCallback(
     (value: string) => {
@@ -79,6 +110,10 @@ export function SessionManager({
           setView(VIEW.DELETE);
           break;
 
+        case value === ACTION.OPEN_MENU:
+          setView(VIEW.OPEN);
+          break;
+
         case value === ACTION.BACK:
           setView(VIEW.MAIN);
           break;
@@ -118,7 +153,13 @@ export function SessionManager({
     <Box flexDirection="column">
       <Text>Sessions</Text>
       <SelectPromptHint
-        message={view === VIEW.DELETE ? 'Delete session' : 'Select session'}
+        message={
+          view === VIEW.DELETE
+            ? 'Delete session'
+            : view === VIEW.OPEN
+              ? 'Open session'
+              : 'Select session'
+        }
       />
 
       {error && (

src/constants/ui.ts

@@ -3,3 +3,4 @@ export const PROMPT_PREFIX = '> ';
 export const AGENT_MARGIN_X = 2;
 export const MARKDOWN_HR_CHARACTER = '─';
 export const DIAMOND = '❖';
+export const ELLIPSIS = '…';