Update package dependencies to include 'ink' and 'ink-text-input' for enhanced terminal UI capabilities. Add new script 'start:ink' for launching the ink-based CLI interface. Clean up example.js by removing unnecessary whitespace for improved readability.

src/example.js

@@ -17,18 +17,18 @@ termSession.on('close', (code) => {
 
 termSession.on('ready', () => {
   console.log('Terminal ready\n');
-  
+
   // Ping starten
   console.log('--- Ping starten ---');
   termSession.input('ping 127.0.0.1\n');
-  
+
   // Nach 3 Sekunden abbrechen
   setTimeout(() => {
     console.log('\n--- Ping abbrechen mit ^C ---');
     termSession.input('^C');
-    
+
   }, 3000);
-  
+
   // Nach 4 Sekunden beenden
   setTimeout(() => {
     console.log('\n--- Terminal beenden ---');

src/ui/InkApp.js

@@ -0,0 +1,83 @@
+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 (
+            React.createElement(Box, { flexDirection: 'column', borderStyle: 'round', paddingX: 1, paddingY: 0, flexGrow: 1 },
+                React.createElement(Text, { color: 'cyan' }, title),
+                React.createElement(Box, { flexDirection: 'column' },
+                    (lines && lines.length > 0)
+                        ? lines.map((l, idx) => React.createElement(Text, { key: idx }, l))
+                        : React.createElement(Text, { dimColor: true }, '—')
+                )
+            )
+        );
+    }
+}
+
+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}`],
+            // placeholders for now
+            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 (
+            React.createElement(Box, { flexDirection: 'column', height: '100%' },
+                React.createElement(Box, { flexGrow: 1, flexDirection: 'row' },
+                    React.createElement(Box, { flexGrow: 1, flexDirection: 'column' },
+                        React.createElement(Pane, { title: 'LLM Output', lines: llmOutput }),
+                        React.createElement(Pane, { title: 'Chain of Thought', lines: chainOfThought })
+                    ),
+                    React.createElement(Box, { flexGrow: 1, flexDirection: 'column' },
+                        React.createElement(Pane, { title: 'Terminal', lines: terminal }),
+                        React.createElement(Pane, { title: 'Logging', lines: logs })
+                    )
+                ),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, null, 'Input: '),
+                    React.createElement(TextInput, {
+                        value: input,
+                        onChange: this.handleChange,
+                        onSubmit: this.handleSubmit,
+                        placeholder: 'Type and press Enter...'
+                    })
+                )
+            )
+        );
+    }
+}
+
+