mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-07 16:09:43 +02:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user