Merge pull request #80 from ai-action/feat/theme

Author: remarkablemark

AGENTS.md

@@ -47,6 +47,7 @@ Single-test examples:
 - TypeScript is `strict`; avoid implicit `any`
 - Use barrel files (`index.ts`) to consolidate related exports
 - Use `ink-testing-library` in tests and avoid `act()`
+- For Ink keyboard interaction tests, avoid mocking `ink` low-level input hooks and prefer `render(...).stdin.write(...)`
 - Use `// v8 ignore` in tests to exclude unreachable entrypoint guards; use `vi.hoisted()` for mock variables accessed by `vi.mock()` hoisted scopes
 - Use Conventional Commits: type(scope): description
 - Create PR with `.github/PULL_REQUEST_TEMPLATE.md`

src/components/App.test.tsx

@@ -28,6 +28,7 @@ const deleteSession = vi.hoisted(() => vi.fn());
 const deleteSessionIfEmpty = vi.hoisted(() => vi.fn());
 const appendMessage = vi.hoisted(() => vi.fn());
 const updateSessionModel = vi.hoisted(() => vi.fn());
+const saveConfig = vi.hoisted(() => vi.fn());
 
 vi.mock('../utils', async () => ({
   ...(await vi.importActual('../utils')),
@@ -39,8 +40,9 @@ vi.mock('../utils', async () => ({
       host: 'http://localhost:11434',
       model: 'gemma4',
       searxngBaseUrl: undefined,
+      theme: 'github-dark',
     })),
-    saveConfig: vi.fn(),
+    saveConfig,
   },
   screen: {
     clear: clearScreen,
@@ -65,6 +67,8 @@ const capturedCallbacks = vi.hoisted(() => ({
   onModeChange: null as ((mode: string) => void) | null,
   onSelect: null as ((update: { model: string }) => void) | null,
   onSaveSearch: null as ((update: { searxngBaseUrl?: string }) => void) | null,
+  onPreviewTheme: null as ((themeId: string) => void) | null,
+  onSaveTheme: null as ((themeId: string) => void) | null,
   onClose: null as (() => void) | null,
   onToggleMode: null as (() => void) | null,
   onOpenSession: null as ((sessionId: string) => void) | null,
@@ -133,6 +137,24 @@ vi.mock('./SearchSettings', () => ({
   },
 }));
 
+vi.mock('./ThemeSettings', () => ({
+  ThemeSettings: ({
+    onClose,
+    onPreview,
+    onSave,
+  }: {
+    currentTheme: string;
+    onClose: () => void;
+    onPreview: (themeId: string) => void;
+    onSave: (themeId: string) => void;
+  }) => {
+    capturedCallbacks.onClose = onClose;
+    capturedCallbacks.onPreviewTheme = onPreview;
+    capturedCallbacks.onSaveTheme = onSave;
+    return <Text>ThemeSettings</Text>;
+  },
+}));
+
 vi.mock('./Footer', () => ({
   Footer: ({
     mode,
@@ -179,6 +201,8 @@ describe('App', () => {
     capturedCallbacks.onModeChange = null;
     capturedCallbacks.onSelect = null;
     capturedCallbacks.onSaveSearch = null;
+    capturedCallbacks.onPreviewTheme = null;
+    capturedCallbacks.onSaveTheme = null;
     capturedCallbacks.onClose = null;
     capturedCallbacks.onToggleMode = null;
     capturedCallbacks.onOpenSession = null;
@@ -197,6 +221,7 @@ describe('App', () => {
     deleteSessionIfEmpty.mockReset();
     appendMessage.mockReset();
     updateSessionModel.mockReset();
+    saveConfig.mockReset();
 
     let counter = 0;
     createSession.mockImplementation((model: string) => ({
@@ -305,6 +330,14 @@ describe('App', () => {
     expect(lastFrame()).toContain('SearchSettings');
   });
 
+  it('shows ThemeSettings when /theme command is issued', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/theme');
+    rerender(<App />);
+    await time.tick();
+    expect(lastFrame()).toContain('ThemeSettings');
+  });
+
   it('returns to chat when search settings are saved', async () => {
     const { lastFrame, rerender } = render(<App />);
     capturedCallbacks.onCommand?.('/search');
@@ -327,6 +360,37 @@ describe('App', () => {
     expect(lastFrame()).not.toContain('ModelPicker');
   });
 
+  it('previews and saves a theme', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/theme');
+    rerender(<App />);
+    await time.tick();
+
+    capturedCallbacks.onPreviewTheme?.('dracula');
+    capturedCallbacks.onSaveTheme?.('dracula');
+    rerender(<App />);
+    await time.tick();
+
+    expect(saveConfig).toHaveBeenCalledWith({ theme: 'dracula' });
+    expect(lastFrame()).not.toContain('ThemeSettings');
+  });
+
+  it('restores chat without saving when theme settings close', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/theme');
+    rerender(<App />);
+    await time.tick();
+
+    capturedCallbacks.onPreviewTheme?.('nord');
+    capturedCallbacks.onClose?.();
+    rerender(<App />);
+    await time.tick();
+
+    expect(saveConfig).not.toHaveBeenCalled();
+    expect(lastFrame()).not.toContain('ThemeSettings');
+    expect(lastFrame()).toContain('>');
+  });
+
   it('calls exit when /exit command is issued', () => {
     render(<App />);
     capturedCallbacks.onCommand?.('/exit');

src/components/App.tsx

@@ -1,8 +1,8 @@
 import { Box, useApp } from 'ink';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { MODE } from '../constants';
-import type { Config, Mode } from '../types';
+import { MODE, THEME } from '../constants';
+import type { Config, Mode, ThemeId } from '../types';
 import { agents, config, ollama, screen, session, terminal } from '../utils';
 import { Chat } from './Chat';
 import { Footer } from './Footer';
@@ -11,12 +11,14 @@ import { TURN_ABORTED_MESSAGE } from './Messages/constants';
 import { ModelPicker } from './ModelPicker';
 import { SearchSettings } from './SearchSettings';
 import { SessionManager } from './SessionManager';
+import { ThemeSettings } from './ThemeSettings';
 
 enum SCREEN {
   CHAT = 'chat',
   MODEL_PICKER = 'model-picker',
   SEARCH_SETTINGS = 'search-settings',
   SESSION_MANAGER = 'session-manager',
+  THEME_SETTINGS = 'theme-settings',
 }
 
 interface Props {
@@ -35,18 +37,26 @@ function createSession(
 export function App({ sessionId }: Props) {
   const { exit } = useApp();
   const [appConfig, setConfig] = useState(() => config.loadConfig());
+  const [previewThemeId, setPreviewThemeId] = useState<ThemeId | null>(null);
   const [currentScreen, setScreen] = useState<SCREEN>(SCREEN.CHAT);
   const [mode, setMode] = useState<Mode>(MODE.SAFE);
   const [activeSession, setSession] = useState(() =>
     createSession(sessionId, config.loadConfig().model),
   );
   const [isHeaderLoaded, setIsHeaderLoaded] = useState(false);
   const sessionRef = useRef(activeSession);
+  const activeThemeId = previewThemeId ?? appConfig.theme;
+  const activeTheme = THEME.getTheme(activeThemeId);
+  const commandColorRef = useRef(activeTheme.colors.command);
 
   useEffect(() => {
     sessionRef.current = activeSession;
   }, [activeSession]);
 
+  useEffect(() => {
+    commandColorRef.current = activeTheme.colors.command;
+  }, [activeTheme.colors.command]);
+
   useEffect(() => {
     return () => {
       const currentSession = sessionRef.current;
@@ -55,7 +65,7 @@ export function App({ sessionId }: Props) {
       if (!deleted && currentSession.messages.length > 0) {
         const resumeCommand = `code-ollama resume ${currentSession.metadata.id}`;
         terminal.write(
-          `Resume session: ${terminal.color(resumeCommand, 'cyan')}\n`,
+          `Resume session: ${terminal.color(resumeCommand, commandColorRef.current)}\n`,
         );
       }
     };
@@ -156,6 +166,11 @@ export function App({ sessionId }: Props) {
           setScreen(SCREEN.SEARCH_SETTINGS);
           break;
 
+        case '/theme':
+          setPreviewThemeId(appConfig.theme);
+          setScreen(SCREEN.THEME_SETTINGS);
+          break;
+
         case '/clear': {
           agents.resetSystemMessage();
           setScreen(SCREEN.CHAT);
@@ -170,7 +185,7 @@ export function App({ sessionId }: Props) {
           break;
       }
     },
-    [appConfig.model, exit, setActiveSession],
+    [appConfig.model, appConfig.theme, exit, setActiveSession],
   );
 
   const handleUpdateConfig = useCallback((update: Partial<Config>) => {
@@ -195,6 +210,23 @@ export function App({ sessionId }: Props) {
     setScreen(SCREEN.CHAT);
   }, []);
 
+  const handleThemePreview = useCallback((themeId: ThemeId) => {
+    setPreviewThemeId(themeId);
+  }, []);
+
+  const handleThemeClose = useCallback(() => {
+    setPreviewThemeId(null);
+    setScreen(SCREEN.CHAT);
+  }, []);
+
+  const handleThemeSave = useCallback(
+    (themeId: ThemeId) => {
+      setPreviewThemeId(null);
+      handleUpdateConfig({ theme: themeId });
+    },
+    [handleUpdateConfig],
+  );
+
   const handleToggleMode = useCallback(() => {
     setMode((mode) => {
       // Cycle: safe -> auto -> plan -> safe
@@ -221,6 +253,7 @@ export function App({ sessionId }: Props) {
           currentModel={appConfig.model}
           onSelect={handleUpdateConfig}
           onClose={handleClose}
+          theme={activeTheme}
         />
       );
       break;
@@ -231,6 +264,7 @@ export function App({ sessionId }: Props) {
           currentUrl={appConfig.searxngBaseUrl}
           onSave={handleUpdateConfig}
           onClose={handleClose}
+          theme={activeTheme}
         />
       );
       break;
@@ -243,6 +277,18 @@ export function App({ sessionId }: Props) {
           onDelete={handleDeleteSession}
           onNew={handleCreateSession}
           onOpen={handleOpenSession}
+          theme={activeTheme}
+        />
+      );
+      break;
+
+    case SCREEN.THEME_SETTINGS:
+      screenContent = (
+        <ThemeSettings
+          currentTheme={appConfig.theme}
+          onClose={handleThemeClose}
+          onPreview={handleThemePreview}
+          onSave={handleThemeSave}
         />
       );
       break;
@@ -257,21 +303,27 @@ export function App({ sessionId }: Props) {
           mode={mode}
           onModeChange={setMode}
           sessionId={activeSession.metadata.id}
+          theme={activeTheme}
         />
       );
       break;
   }
 
   return (
     <Box flexDirection="column">
-      <Header model={appConfig.model} onLoad={handleHeaderLoad} />
+      <Header
+        model={appConfig.model}
+        onLoad={handleHeaderLoad}
+        theme={activeTheme}
+      />
 
       {isHeaderLoaded && screenContent}
 
       <Footer
         mode={mode}
         model={appConfig.model}
         onToggleMode={handleToggleMode}
+        theme={activeTheme}
       />
     </Box>
   );

src/components/Chat/Chat.test.tsx

@@ -1,7 +1,7 @@
 import { Text } from 'ink';
 import { render } from 'ink-testing-library';
 
-import { DECISION, MODE } from '../../constants';
+import { DECISION, MODE, THEME } from '../../constants';
 import type { Decision } from '../../types';
 import { ollama, time, tools } from '../../utils';
 import { prewarmCodeBlocks } from '../CodeBlock';
@@ -317,9 +317,45 @@ describe('Chat', () => {
     await waitForStream();
     expect(vi.mocked(prewarmCodeBlocks)).toHaveBeenCalledWith(
       'Here:\n```ts\nconst x = 1;\n```',
+      THEME.getTheme(),
     );
   }, 10_000);
 
+  it('formats complete markdown while the assistant is still streaming', async () => {
+    let resumeStream: (() => void) | undefined;
+
+    vi.mocked(ollama.streamChat).mockImplementationOnce(async function* () {
+      yield { type: 'content', content: 'Use **important**' };
+      await new Promise<void>((resolve) => {
+        resumeStream = resolve;
+      });
+      yield { type: 'content', content: ' text' };
+    });
+
+    const chat = (
+      <Chat
+        model="gemma4"
+        onCommand={vi.fn()}
+        mode={MODE.SAFE}
+        onModeChange={onModeChange}
+        sessionId="0"
+      />
+    );
+    const { lastFrame, rerender } = render(chat);
+    await time.tick();
+    submitInput('format this');
+    rerender(chat);
+    await time.tick();
+
+    const streamingFrame = lastFrame() ?? '';
+    expect(streamingFrame).toContain('Use important');
+    expect(streamingFrame).not.toContain('**important**');
+
+    resumeStream?.();
+    await waitForStream();
+    expect(lastFrame()).toContain('Use important text');
+  }, 10_000);
+
   it('calls onCommand when a slash command is submitted', async () => {
     const onCommand = vi.fn();
     const chat = (