build(package): render TUI with Ink and React

Author: remarkablemark

package-lock.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "build": "tsc --project tsconfig.build.json && chmod +x dist/cli.js",
-    "start": "tsx src/cli.ts",
+    "start": "tsx --tsconfig tsconfig.test.json src/cli.tsx",
     "clean": "rm -rf coverage dist docs",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
@@ -39,20 +39,24 @@
     "ai"
   ],
   "dependencies": {
-    "cac": "7.0.0"
+    "cac": "7.0.0",
+    "ink": "7.0.1",
+    "react": "19.2.5"
   },
   "devDependencies": {
     "@commitlint/cli": "20.5.3",
     "@commitlint/config-conventional": "20.5.3",
     "@eslint/compat": "2.0.5",
     "@eslint/js": "10.0.1",
     "@types/node": "25.6.0",
+    "@types/react": "19.2.14",
     "@vitest/coverage-v8": "4.1.5",
     "eslint": "10.3.0",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-simple-import-sort": "13.0.0",
     "globals": "17.6.0",
     "husky": "9.1.7",
+    "ink-testing-library": "4.0.0",
     "lint-staged": "16.4.0",
     "prettier": "3.8.3",
     "publint": "0.3.18",

package.json

@@ -0,0 +1,10 @@
+import { render } from 'ink-testing-library';
+
+import App from './App';
+
+describe('App', () => {
+  it('renders', () => {
+    const { lastFrame } = render(<App />);
+    expect(lastFrame()).toContain('code-ollama');
+  });
+});

src/App.test.tsx

@@ -0,0 +1,9 @@
+import { Box, Text } from 'ink';
+
+export default function App() {
+  return (
+    <Box>
+      <Text>🦙 code-ollama</Text>
+    </Box>
+  );
+}

src/App.tsx

@@ -1,10 +1,13 @@
 import { type MockInstance, vi } from 'vitest';
 
-const { outputHelp, parse } = vi.hoisted(() => ({
+const { outputHelp, parse, render } = vi.hoisted(() => ({
   outputHelp: vi.fn(),
   parse: vi.fn(),
+  render: vi.fn(),
 }));
 
+vi.mock('ink', () => ({ render }));
+
 vi.mock('cac', () => ({
   default: () => ({
     version: vi.fn(),
@@ -30,9 +33,9 @@ describe('cli', () => {
     stdoutSpy.mockRestore();
   });
 
-  it('calls outputHelp with no args', () => {
+  it('renders TUI with no args', () => {
     main([]);
-    expect(outputHelp).toHaveBeenCalledOnce();
+    expect(render).toHaveBeenCalledOnce();
     expect(parse).not.toHaveBeenCalled();
   });
 

src/cli.test.ts

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 
 import cac from 'cac';
+import { render } from 'ink';
 
 import pkg from '../package.json' with { type: 'json' };
+import App from './App.js';
 
 const cli = cac('code-ollama');
 
@@ -11,7 +13,7 @@ cli.help();
 
 export function main(args: string[] = process.argv.slice(2)): void {
   if (!args.length) {
-    cli.outputHelp();
+    render(<App />);
     return;
   }
 

src/cli.ts src/cli.tsxsrc/cli.ts renamed to src/cli.tsx

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.test.json",
   "compilerOptions": {
     "composite": false,
+    "allowImportingTsExtensions": false,
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "rewriteRelativeImportExtensions": true,
@@ -13,5 +14,5 @@
     "types": ["node"]
   },
   "include": ["src"],
-  "exclude": ["src/**/*.test.ts"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
 }

tsconfig.build.json

@@ -11,8 +11,11 @@
     "sourceMap": true,
     "strict": true,
     "types": ["vitest/globals"],
+    "allowImportingTsExtensions": true,
     "noEmit": true,
     "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "skipLibCheck": true
   },
   "include": ["src", "vitest.config.mts", "eslint.config.mts", "*.mjs", "*.ts"]

tsconfig.test.json

@@ -3,9 +3,10 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     globals: true,
+    exclude: ['dist/**', 'node_modules/**'],
     coverage: {
       include: ['src'],
-      exclude: ['src/**/*.test.ts'],
+      exclude: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
       thresholds: {
         100: true,
       },