@codmir/terminal-ui

Terminal UI components for Codmir CLI using React + Ink, inspired by Google Gemini CLI.

Features

• React + Ink Components: Modern terminal UI using React patterns
• Unified Design System: Consistent theming and styling
• Settings Management: Scoped settings (global/project/workspace)
• Session Management: Persistent chat sessions with history
• Keyboard Handling: Comprehensive keyboard shortcuts and input
• Modular Architecture: Reusable components and hooks

Core Components

AppContainer

Main application container with view management and keyboard shortcuts.

import { AppContainer } from '@codmir/terminal-ui';

<AppContainer>
  <ChatInterface />
</AppContainer>

ChatInterface

Interactive chat interface with message history and tool call display.

<ChatInterface 
  session={session}
  onMessageSend={handleMessageSend}
  showTimestamps={true}
  showToolCalls={true}
/>

SettingsPanel

Interactive settings management with categorized options.

<SettingsPanel 
  currentScope="global"
  onScopeChange={handleScopeChange}
  onSettingsChange={handleSettingsChange}
/>

HelpPanel

Multi-page help system with keyboard navigation.

<HelpPanel 
  currentPage={0}
  onPageChange={handlePageChange}
/>

StatusPanel

System status and session information display.

<StatusPanel 
  session={currentSession}
/>

Hooks

useApp

Global app state and event dispatching.

const { state, actions } = useApp();
actions.changeView('settings');
actions.startSession('session-123');

useSettings

Settings management with scoped updates.

const { settings, actions } = useSettings();
actions.setAIModel('claude-sonnet-4');
actions.toggleDebugMode('project');

useSession

Chat session management.

const { currentSession, actions } = useSession();
actions.sendMessage('Hello, AI!');
actions.executeToolCall('read_file', { path: './file.txt' });

useKeyboard

Keyboard input and shortcut management.

const { registerKeyHandler, utils } = useKeyboard();
registerKeyHandler('q', () => exit(), { ctrl: true });

Utils

Theme System

Consistent theming with light/dark/auto modes.

import { createTheme, themeUtils } from '@codmir/terminal-ui';

const theme = createTheme('dark');
const coloredText = themeUtils.color('Hello', 'primary', theme);

Settings Manager

Persistent settings with validation.

import { SettingsManager } from '@codmir/terminal-ui';

const settings = SettingsManager.getInstance();
settings.updateSetting('global', 'ai.model', 'claude-opus-4');

Session Manager

Chat session persistence and management.

import { SessionManager } from '@codmir/terminal-ui';

const sessions = SessionManager.getInstance();
const session = sessions.createSession({ workingDirectory: './project' });

Keyboard Manager

Raw keyboard mode and input handling.

import { KeyboardManager, KeyCodes } from '@codmir/terminal-ui';

const keyboard = KeyboardManager.getInstance();
keyboard.enableRawMode();
keyboard.registerKeyHandler('c', () => exit(), { ctrl: true });

Architecture

Based on Google Gemini CLI patterns with Codmir-specific extensions:

• Component-driven: React components for UI elements
• Context-based: React context for state management
• Hook-based: Custom hooks for reusable logic
• Event-driven: Event system for state updates
• Modular: Separate packages for different concerns

Usage Example

import React from 'react';
import { render } from 'ink';
import { 
  AppProvider, 
  SettingsProvider, 
  SessionProvider,
  AppContainer,
  ChatInterface 
} from '@codmir/terminal-ui';

const App = () => {
  return (
    <AppProvider>
      <SettingsProvider>
        <SessionProvider>
          <AppContainer>
            <ChatInterface />
          </AppContainer>
        </SessionProvider>
      </SettingsProvider>
    </AppProvider>
  );
};

render(<App />);

Integration with Codmir CLI

This package is designed to replace the fragmented UI systems in the current Codmir CLI with a unified, modern terminal interface inspired by Gemini CLI's design patterns.

Migration Path

1. Phase 1: Create terminal-ui package ✅
2. Phase 2: Refactor interactive commands to use unified UI
3. Phase 3: Simplify command structure
4. Phase 4: Port sandbox and tool execution patterns

Dependencies

• ink: React for CLIs
• react: React library
• chalk: Terminal styling
• ora: Loading spinners
• @codmir/types: Shared type definitions

License

MIT