working ssh

src/app/index.tsx

@@ -37,7 +37,8 @@ export default function Index() {
 				// 	console.log(data)
 				// })
 				await sshClientConnection.startShell(PtyType.XTERM)
-				const sshConn = sshConnectionManager.addSession({
+				// const sshConn =
+				sshConnectionManager.addSession({
 					client: sshClientConnection,
 				})
 				router.push(`/shell`)

src/app/shell.tsx

@@ -1,8 +1,16 @@
 /**
  * This is the page that is shown after an ssh connection
  */
-import { useEffect, useState } from 'react'
-import { Text, View } from 'react-native'
+import { useEffect, useRef, useState } from 'react'
+import {
+	Platform,
+	Pressable,
+	ScrollView,
+	StyleSheet,
+	Text,
+	TextInput,
+	View,
+} from 'react-native'
 import { sshConnectionManager } from '../lib/ssh-connection-manager'
 
 export default function Shell() {
@@ -15,6 +23,7 @@ export default function Shell() {
 
 	useEffect(() => {
 		sshConn.client.on('Shell', (data) => {
+			console.log('Received data (on Shell):', data)
 			setShellData((prev) => prev + data)
 		})
 		//  return () => {
@@ -22,9 +31,132 @@ export default function Shell() {
 		//  }
 	}, [setShellData, sshConn.client])
 
+	const scrollViewRef = useRef<ScrollView | null>(null)
+
+	useEffect(() => {
+		// Auto-scroll to bottom when new data arrives
+		scrollViewRef.current?.scrollToEnd({ animated: true })
+	}, [shellData])
+
 	return (
-		<View style={{ flex: 1, margin: 16 }}>
-			<Text>{shellData}</Text>
+		<View style={styles.container}>
+			<Text style={styles.title}>SSH Shell</Text>
+			<View style={styles.terminal}>
+				<ScrollView
+					ref={scrollViewRef}
+					contentContainerStyle={styles.terminalContent}
+					keyboardShouldPersistTaps="handled"
+				>
+					<Text selectable style={styles.terminalText}>
+						{shellData || 'Connected. Output will appear here...'}
+					</Text>
+				</ScrollView>
+			</View>
+			<CommandInput
+				executeCommand={(command) => {
+					console.log('Executing command:', command)
+					sshConn.client.writeToShell(command + '\n')
+				}}
+			/>
 		</View>
 	)
 }
+
+function CommandInput(props: { executeCommand: (command: string) => void }) {
+	const [command, setCommand] = useState('')
+
+	function handleExecute() {
+		if (!command.trim()) return
+		props.executeCommand(command)
+		setCommand('')
+	}
+
+	return (
+		<View style={styles.commandBar}>
+			<TextInput
+				style={styles.commandInput}
+				value={command}
+				onChangeText={setCommand}
+				placeholder="Type a command and press Enter or Execute"
+				placeholderTextColor="#9AA0A6"
+				autoCapitalize="none"
+				autoCorrect={false}
+				returnKeyType="send"
+				onSubmitEditing={handleExecute}
+			/>
+			<Pressable style={styles.executeButton} onPress={handleExecute}>
+				<Text style={styles.executeButtonText}>Execute</Text>
+			</Pressable>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#0B1324',
+		padding: 16,
+	},
+	title: {
+		color: '#E5E7EB',
+		fontSize: 18,
+		fontWeight: '700',
+		marginBottom: 12,
+	},
+	terminal: {
+		flex: 1,
+		backgroundColor: '#0E172B',
+		borderRadius: 12,
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		overflow: 'hidden',
+		marginBottom: 12,
+	},
+	terminalContent: {
+		padding: 12,
+	},
+	terminalText: {
+		color: '#D1D5DB',
+		fontSize: 14,
+		lineHeight: 18,
+		fontFamily: Platform.select({
+			ios: 'Menlo',
+			android: 'monospace',
+			default: 'monospace',
+		}),
+	},
+	commandBar: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	commandInput: {
+		flex: 1,
+		backgroundColor: '#0E172B',
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		borderRadius: 10,
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		color: '#E5E7EB',
+		fontSize: 16,
+		fontFamily: Platform.select({
+			ios: 'Menlo',
+			android: 'monospace',
+			default: 'monospace',
+		}),
+	},
+	executeButton: {
+		backgroundColor: '#2563EB',
+		borderRadius: 10,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	executeButtonText: {
+		color: '#FFFFFF',
+		fontWeight: '700',
+		fontSize: 14,
+	},
+})