feat: add Ink-based fullscreen TUI components

src/frontends/tui/components/MessageList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { Message } from '../../../models/types.js';
+
+export interface MessageListProps {
+  messages: Message[];
+  maxHeight?: number;
+}
+
+export function MessageList({ messages, maxHeight = 20 }: MessageListProps): React.ReactElement {
+  // Show only recent messages that fit
+  const visibleMessages = messages.slice(-maxHeight);
+
+  return (
+    <Box flexDirection="column" flexGrow={1} paddingX={1}>
+      {visibleMessages.length === 0 ? (
+        <Text color="gray">No messages yet. Start typing to chat with Flynn.</Text>
+      ) : (
+        visibleMessages.map((message, index) => (
+          <Box key={index} marginBottom={1}>
+            <Text color={message.role === 'user' ? 'blue' : 'green'}>
+              {message.role === 'user' ? 'You: ' : 'Flynn: '}
+            </Text>
+            <Text wrap="wrap">{message.content}</Text>
+          </Box>
+        ))
+      )}
+    </Box>
+  );
+}