feat(tui): add terminal user interface with Ink

Add a full TUI for Claudeman using Ink (React for CLI):
- StartScreen: Shows existing sessions from screens.json
- TabBar: Session tabs with status indicators
- TerminalView: PTY output display with scrolling
- StatusBar: Session info and keyboard shortcuts
- HelpOverlay: Full keyboard shortcut reference

Features:
- Session discovery from ~/.claudeman/screens.json
- Tab navigation (Ctrl+Tab, Ctrl+1-9)
- Create new sessions (connects to web API)
- Kill sessions via screen commands
- Keyboard-driven navigation

Usage: claudeman tui

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-21 06:19:02 +01:00
co-authored by Claude Opus 4.5
parent b3dd0bcacb
commit 84dab25f38
15 changed files with 1906 additions and 2 deletions
+99
View File
@@ -0,0 +1,99 @@
/**
* @fileoverview HelpOverlay component
*
* Full-screen overlay showing all keyboard shortcuts.
* Dismissible with Escape, q, or ?.
*/
import React from 'react';
import { Box, Text } from 'ink';
interface HelpOverlayProps {
onClose: () => void;
}
interface ShortcutGroup {
title: string;
shortcuts: Array<{ key: string; description: string }>;
}
const SHORTCUT_GROUPS: ShortcutGroup[] = [
{
title: 'Navigation',
shortcuts: [
{ key: 'Ctrl+Tab', description: 'Next session' },
{ key: 'Ctrl+Shift+Tab', description: 'Previous session' },
{ key: 'Ctrl+1-9', description: 'Go to session N' },
{ key: 'Escape', description: 'Back to start screen' },
],
},
{
title: 'Session Management',
shortcuts: [
{ key: 'Ctrl+N', description: 'New session' },
{ key: 'Ctrl+W', description: 'Close current session' },
{ key: 'Ctrl+K', description: 'Kill all sessions' },
],
},
{
title: 'Start Screen',
shortcuts: [
{ key: '1-9', description: 'Select session by number' },
{ key: 'n', description: 'Create new session' },
{ key: 'r', description: 'Refresh session list' },
{ key: 'q', description: 'Quit' },
],
},
{
title: 'General',
shortcuts: [
{ key: '?', description: 'Toggle this help' },
{ key: 'Ctrl+C', description: 'Exit TUI' },
],
},
];
/**
* HelpOverlay component showing keyboard shortcuts
*/
export function HelpOverlay({ onClose }: HelpOverlayProps): React.ReactElement {
return (
<Box flexDirection="column" padding={2}>
{/* Header */}
<Box
borderStyle="double"
borderColor="cyan"
paddingX={2}
paddingY={1}
marginBottom={1}
justifyContent="center"
>
<Text bold color="cyan">
Keyboard Shortcuts
</Text>
</Box>
{/* Shortcut groups */}
{SHORTCUT_GROUPS.map((group, groupIndex) => (
<Box key={groupIndex} flexDirection="column" marginBottom={1}>
<Text bold color="yellow">
{group.title}
</Text>
<Box flexDirection="column" marginLeft={2}>
{group.shortcuts.map((shortcut, index) => (
<Box key={index}>
<Text color="green">{shortcut.key.padEnd(20)}</Text>
<Text>{shortcut.description}</Text>
</Box>
))}
</Box>
</Box>
))}
{/* Footer */}
<Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
<Text dimColor>Press Escape, q, or ? to close</Text>
</Box>
</Box>
);
}