Terminal Mode Interface

[olucasandrade]

Task: Terminal Mode Interface

Description

Build a full-screen terminal-style interface overlay that reuses existing request/response logic but presents it with CLI aesthetics. Include syntax highlighting, command history navigation, and VI/Emacs keybindings (configurable).

Acceptance Criteria

• Terminal mode component created and lazy-loaded
• Toggle between GUI and terminal mode (URL state: ?terminal=true)
• Syntax-highlighted terminal output using Prism.js or Shiki
• Command-line input for API requests
• History browsable with arrow keys (↑/↓)
• VI keybindings support (configurable)
• Emacs keybindings support (configurable)
• All GUI functionality preserved in terminal mode
• Terminal loads in <200ms
• Keyboard shortcut to toggle (Cmd/Ctrl + T)
• Respects theme system colors
• i18n support for terminal prompts (en/pt)

Technical Details

Implementation Approach

1. Install syntax highlighter (prism-react-renderer or shiki)
2. Create src/components/TerminalMode/ directory:

   TerminalMode/
   ├── index.tsx          # Main terminal component (lazy)
   ├── TerminalInput.tsx  # Command input with autocomplete
   ├── TerminalOutput.tsx # Response display
   ├── CommandParser.tsx  # Parse CLI commands to API requests
   └── useTerminalHistory.tsx # Arrow key navigation
   

3. Implement command syntax:

   GET https://api.example.com/users
   POST https://api.example.com/users --data '{"name":"John"}'
   PUT https://api.example.com/users/1 --data '{"name":"Jane"}'
   DELETE https://api.example.com/users/1
   

4. Reuse existing apiService.ts for actual requests
5. Add URL state management (?terminal=true)
6. Lazy load with React.lazy() to reduce initial bundle

Key Considerations

• Terminal should feel authentic (green text on dark bg, monospace font)
• Command history stored in localStorage (same as GUI history)
• Syntax errors shown in terminal style
• Response streaming animation (character by character)
• Performance: lazy load the entire terminal component
• Cursor blink animation
• Support ANSI color codes in responses (if applicable)

Files Affected

• package.json (add prism-react-renderer or shiki)
• src/components/TerminalMode/ (new directory)
• src/app/[locale]/page.tsx (add terminal toggle)
• src/services/apiService.ts (potentially extend for CLI)
• messages/en.json (add terminal prompts)
• messages/pt.json (add terminal prompts)

Dependencies

• Task 001 (Theme System) - terminal needs theme colors
• Task 002 (Animation Foundation) - terminal transitions
• Task 003 (Keyboard Navigation) - Cmd+T shortcut
• Syntax highlighting library (Prism.js or Shiki)

Effort Estimate

• Size: L (Large)
• Hours: 20-24 hours
• Parallel: false (depends on Tasks 001, 002, 003)

Definition of Done

• Terminal mode fully functional
• All request types supported (GET, POST, PUT, DELETE, etc.)
• Command history navigation working
• VI/Emacs keybindings configurable
• Lazy loading verified (<200ms load)
• Syntax highlighting working
• Tests written for command parsing
• Documentation added for terminal commands
• Code reviewed
• Merged to main branch