Merge pull request #86 from ai-action/fix/check

Author: remarkablemark

src/components/App/App.test.tsx

@@ -29,6 +29,7 @@ const deleteSessionIfEmpty = vi.hoisted(() => vi.fn());
 const appendMessage = vi.hoisted(() => vi.fn());
 const updateSessionModel = vi.hoisted(() => vi.fn());
 const saveConfig = vi.hoisted(() => vi.fn());
+const listModels = vi.hoisted(() => vi.fn());
 
 vi.mock('@/utils', async () => ({
   ...(await vi.importActual('@/utils')),
@@ -44,6 +45,9 @@ vi.mock('@/utils', async () => ({
     })),
     saveConfig,
   },
+  ollama: {
+    listModels,
+  },
   screen: {
     clear: clearScreen,
   },
@@ -193,6 +197,34 @@ vi.mock('@/components/SessionManager', () => ({
   },
 }));
 
+vi.mock('./ReadinessCheck', async () => {
+  const actual =
+    await vi.importActual<typeof import('./ReadinessCheck')>(
+      './ReadinessCheck',
+    );
+
+  return {
+    ...actual,
+    ReadinessCheck: (props: {
+      errorMessage?: string | null;
+      onCommand: (command: string) => void;
+      setupState: string;
+    }) => {
+      const { errorMessage, onCommand, setupState } = props;
+      capturedCallbacks.onCommand = onCommand;
+      const message =
+        setupState === 'missing-model-config'
+          ? 'Select or download a model'
+          : setupState === 'no-installed-models'
+            ? 'Download a model'
+            : errorMessage
+              ? `Unable to load models: ${errorMessage}`
+              : setupState;
+      return <Text>{`Setup Required ${message}`}</Text>;
+    },
+  };
+});
+
 import { App } from './App';
 
 describe('App', () => {
@@ -222,6 +254,8 @@ describe('App', () => {
     appendMessage.mockReset();
     updateSessionModel.mockReset();
     saveConfig.mockReset();
+    listModels.mockReset();
+    listModels.mockResolvedValue(['gemma4']);
 
     let counter = 0;
     createSession.mockImplementation((model: string) => ({
@@ -409,6 +443,7 @@ describe('App', () => {
   it('prints a resume command when the app exits with session messages', async () => {
     deleteSessionIfEmpty.mockReturnValue(false);
     const { unmount } = render(<App />);
+    await time.tick();
 
     capturedCallbacks.onMessagesChange?.([
       { role: 'user', content: 'saved message' },
@@ -429,6 +464,7 @@ describe('App', () => {
 
   it('resets the chat session when /clear is issued', async () => {
     const { lastFrame, rerender } = render(<App />);
+    await time.tick();
 
     expect(lastFrame()).toContain('session:session-0');
 
@@ -453,6 +489,7 @@ describe('App', () => {
 
   it('opens a selected saved session', async () => {
     const { lastFrame, rerender } = render(<App />);
+    await time.tick();
     capturedCallbacks.onCommand?.('/session');
     rerender(<App />);
     await time.tick();
@@ -469,6 +506,7 @@ describe('App', () => {
 
   it('returns to chat when the current session is selected', async () => {
     const { lastFrame, rerender } = render(<App />);
+    await time.tick();
     capturedCallbacks.onCommand?.('/session');
     rerender(<App />);
     await time.tick();
@@ -489,6 +527,55 @@ describe('App', () => {
     expect(loadSession).toHaveBeenCalledWith('resumed-session');
   });
 
+  it('renders setup-needed content when no model is configured', async () => {
+    const { config } = await import('@/utils');
+    vi.mocked(config.loadConfig).mockReturnValueOnce({
+      host: 'http://localhost:11434',
+      model: undefined,
+      searxngBaseUrl: undefined,
+      theme: 'github-dark',
+    });
+
+    const { lastFrame } = render(<App />);
+    await time.tick();
+
+    expect(lastFrame()).toContain('Setup Required');
+    expect(lastFrame()).toContain('Select or download a model');
+    expect(lastFrame()).not.toContain('session:');
+    expect(listModels).not.toHaveBeenCalled();
+  });
+
+  it('renders setup-needed content when no models are installed', async () => {
+    listModels.mockResolvedValueOnce([]);
+
+    const { lastFrame } = render(<App />);
+    await time.tick();
+    await time.tick();
+
+    expect(lastFrame()).toContain('Setup Required');
+    expect(lastFrame()).toContain('Download a model');
+    expect(lastFrame()).not.toContain('session:');
+  });
+
+  it('routes to ModelManager from setup-needed state', async () => {
+    const { config } = await import('@/utils');
+    vi.mocked(config.loadConfig).mockReturnValueOnce({
+      host: 'http://localhost:11434',
+      model: undefined,
+      searxngBaseUrl: undefined,
+      theme: 'github-dark',
+    });
+
+    const { lastFrame, rerender } = render(<App />);
+    await time.tick();
+
+    capturedCallbacks.onCommand?.('/model');
+    rerender(<App />);
+    await time.tick();
+
+    expect(lastFrame()).toContain('ModelManager');
+  });
+
   it('creates a new session from SessionManager', async () => {
     const { lastFrame, rerender } = render(<App />);
     capturedCallbacks.onCommand?.('/session');
@@ -534,6 +621,7 @@ describe('App', () => {
 
   it('persists newly committed messages and skips turn_aborted markers', async () => {
     render(<App />);
+    await time.tick();
     appendMessage.mockClear();
 
     capturedCallbacks.onMessagesChange?.([
@@ -560,13 +648,16 @@ describe('App', () => {
   });
 
   it('does not append when transcript length does not grow', async () => {
-    render(<App />);
+    const { rerender } = render(<App />);
+    await time.tick();
 
     capturedCallbacks.onMessagesChange?.([{ role: 'user', content: 'saved' }]);
+    rerender(<App />);
     await time.tick();
     appendMessage.mockClear();
 
     capturedCallbacks.onMessagesChange?.([{ role: 'user', content: 'saved' }]);
+    rerender(<App />);
     await time.tick();
 
     expect(appendMessage).not.toHaveBeenCalled();
@@ -612,6 +703,7 @@ describe('App', () => {
 
   it('updates footer mode when Chat changes execution mode', async () => {
     const { lastFrame, rerender } = render(<App />);
+    await time.tick();
 
     expect(lastFrame()).toContain('Mode: Safe');
 

src/components/App/App.tsx

@@ -1,5 +1,5 @@
 import { Box } from 'ink';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { Chat } from '@/components/Chat';
 import { Footer } from '@/components/Footer';
@@ -10,10 +10,11 @@ import { SessionManager } from '@/components/SessionManager';
 import { ThemeSettings } from '@/components/ThemeSettings';
 import { MODE, THEME } from '@/constants';
 import type { Config, Mode } from '@/types';
-import { config, session } from '@/utils';
+import { config, ollama, session } from '@/utils';
 
 import { SCREEN } from './constants';
 import { useScreenRouter, useSessionManager, useThemeSettings } from './hooks';
+import { ReadinessCheck, ReadinessState } from './ReadinessCheck';
 
 interface Props {
   sessionId?: string;
@@ -23,6 +24,12 @@ export function App({ sessionId }: Props) {
   const [appConfig, setConfig] = useState(() => config.loadConfig());
   const [mode, setMode] = useState<Mode>(MODE.SAFE);
   const [isHeaderLoaded, setIsHeaderLoaded] = useState(false);
+  const [setupState, setSetupState] = useState<ReadinessState>(() =>
+    appConfig.model ? ReadinessState.Ready : ReadinessState.MissingModelConfig,
+  );
+  const [setupErrorMessage, setSetupErrorMessage] = useState<string | null>(
+    null,
+  );
 
   const { currentScreen, setScreen, handleClose, handleCommand } =
     useScreenRouter();
@@ -36,10 +43,66 @@ export function App({ sessionId }: Props) {
     handleMessagesChange,
   } = useSessionManager({
     sessionId,
-    model: appConfig.model,
+    model: appConfig.model ?? '',
     commandColor: THEME.getTheme(appConfig.theme).colors.command,
   });
 
+  useEffect(() => {
+    let isMounted = true;
+
+    async function refreshSetupState() {
+      if (!appConfig.model) {
+        // v8 ignore next
+        if (isMounted) {
+          setSetupErrorMessage(null);
+          setSetupState(ReadinessState.MissingModelConfig);
+        }
+        return;
+      }
+
+      if (currentScreen !== SCREEN.CHAT) {
+        return;
+      }
+
+      // v8 ignore next
+      if (isMounted) {
+        setSetupErrorMessage(null);
+        setSetupState(ReadinessState.Checking);
+      }
+
+      try {
+        const installedModels = await ollama.listModels();
+        if (!isMounted) {
+          return;
+        }
+
+        setSetupState(
+          installedModels.length > 0
+            ? ReadinessState.Ready
+            : ReadinessState.NoInstalledModels,
+        );
+      } catch (error) {
+        // v8 ignore start
+        if (!isMounted) {
+          return;
+        }
+
+        setSetupErrorMessage(
+          error instanceof Error ? error.message : String(error),
+        );
+
+        setSetupState(ReadinessState.ModelLoadError);
+        // v8 ignore stop
+      }
+    }
+
+    void refreshSetupState();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [appConfig.model, currentScreen]);
+
   const handleUpdateConfig = useCallback(
     (update: Partial<Config>) => {
       setConfig((current) => ({
@@ -97,7 +160,7 @@ export function App({ sessionId }: Props) {
   const handleChatCommand = useCallback(
     (command: string) => {
       handleCommand(command, {
-        model: appConfig.model,
+        model: appConfig.model ?? '',
         theme: appConfig.theme,
         onCreateSession: handleCreateSession,
         onSetPreviewThemeId: setPreviewThemeId,
@@ -139,7 +202,7 @@ export function App({ sessionId }: Props) {
     case SCREEN.MODEL_MANAGER:
       screenContent = (
         <ModelManager
-          currentModel={appConfig.model}
+          currentModel={appConfig.model ?? ''}
           onSelect={handleUpdateConfig}
           onClose={handleClose}
           theme={activeTheme}
@@ -183,25 +246,33 @@ export function App({ sessionId }: Props) {
       break;
 
     case SCREEN.CHAT:
-      screenContent = (
-        <Chat
-          initialMessages={activeSession.messages}
-          model={appConfig.model}
-          onCommand={handleChatCommand}
-          onMessagesChange={handleMessagesChange}
-          mode={mode}
-          onModeChange={setMode}
-          sessionId={activeSession.metadata.id}
-          theme={activeTheme}
-        />
-      );
+      screenContent =
+        setupState === ReadinessState.Ready ? (
+          <Chat
+            initialMessages={activeSession.messages}
+            model={appConfig.model}
+            onCommand={handleChatCommand}
+            onMessagesChange={handleMessagesChange}
+            mode={mode}
+            onModeChange={setMode}
+            sessionId={activeSession.metadata.id}
+            theme={activeTheme}
+          />
+        ) : (
+          <ReadinessCheck
+            errorMessage={setupErrorMessage}
+            onCommand={handleChatCommand}
+            setupState={setupState}
+            theme={activeTheme}
+          />
+        );
       break;
   }
 
   return (
     <Box flexDirection="column">
       <Header
-        model={appConfig.model}
+        model={appConfig.model ?? ''}
         onLoad={handleHeaderLoad}
         theme={activeTheme}
       />
@@ -210,7 +281,7 @@ export function App({ sessionId }: Props) {
 
       <Footer
         mode={mode}
-        model={appConfig.model}
+        model={appConfig.model ?? ''}
         onToggleMode={handleToggleMode}
         theme={activeTheme}
       />