Refactor CLI input handling in cli-ink.js to improve ESC key detection for clean exit. Update InkApp import to .jsx extension and change start:ink script to use tsx for better compatibility. Remove deprecated InkApp.js file to streamline codebase.

src/ui/InkApp.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+
+class Pane extends React.Component {
+    render() {
+        const { title, lines } = this.props;
+        return (
+            <Box flexDirection="column" borderStyle="round" paddingX={1} paddingY={0} flexGrow={1}>
+                <Text color="cyan">{title}</Text>
+                <Box flexDirection="column">
+                    {(lines && lines.length > 0)
+                        ? lines.map((line, index) => (
+                            <Text key={index}>{line}</Text>
+                        ))
+                        : <Text dimColor>—</Text>
+                    }
+                </Box>
+            </Box>
+        );
+    }
+}
+
+export default class InkApp extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            input: '',
+            logs: [],
+            terminal: [],
+            chainOfThought: [],
+            llmOutput: []
+        };
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    componentDidMount() { }
+    componentWillUnmount() { }
+
+    handleChange(value) {
+        this.setState({ input: value });
+    }
+
+    handleSubmit() {
+        const { input } = this.state;
+        if (!input) return;
+        this.setState((state) => ({
+            logs: [...state.logs, `> ${input}`],
+            terminal: [...state.terminal, `echo ${input}`],
+            chainOfThought: [...state.chainOfThought, `(internal) Thought about: ${input}`],
+            llmOutput: [...state.llmOutput, `Model says: ${input}`],
+            input: ''
+        }));
+    }
+
+    render() {
+        const { input, logs, terminal, chainOfThought, llmOutput } = this.state;
+        return (
+            <Box flexDirection="column" height="100%">
+                <Box flexGrow={1} flexDirection="row">
+                    <Box flexGrow={1} flexDirection="column">
+                        <Pane title="LLM Output" lines={llmOutput} />
+                        <Pane title="Chain of Thought" lines={chainOfThought} />
+                    </Box>
+                    <Box flexGrow={1} flexDirection="column">
+                        <Pane title="Terminal" lines={terminal} />
+                        <Pane title="Logging" lines={logs} />
+                    </Box>
+                </Box>
+                <Box marginTop={1}>
+                    <Text>Input: </Text>
+                    <TextInput
+                        value={input}
+                        onChange={this.handleChange}
+                        onSubmit={this.handleSubmit}
+                        placeholder="Type and press Enter..."
+                    />
+                </Box>
+            </Box>
+        );
+    }
+}
+
+