seb/toolLooper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
sebseb7
2025-08-12 02:56:13 +02:00
parent edf0d3cffb
commit ce6933377a
4 changed files with 117 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/ui/InkApp.js
View File

@@ -1,83 +0,0 @@
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...'
})
)
)
);
}
}

85
src/ui/InkApp.jsx Normal file
View File

@@ -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>
);
}
}