detail screen changes

apps/mobile/src/app/(tabs)/shell/detail.tsx

@@ -36,6 +36,8 @@ function ShellDetail() {
 			: undefined;
 
 	const [shellData, setShellData] = useState('');
+	const [inputValue, setInputValue] = useState('');
+	const hiddenInputRef = useRef<TextInput | null>(null);
 
 	useEffect(() => {
 		if (!connection) return;
@@ -59,26 +61,46 @@ function ShellDetail() {
 		scrollViewRef.current?.scrollToEnd({ animated: true });
 	}, [shellData]);
 
+	useEffect(() => {
+		const focusTimeout = setTimeout(() => {
+			hiddenInputRef.current?.focus();
+		}, 0);
+		return () => clearTimeout(focusTimeout);
+	}, []);
+
+	async function sendChunk(chunk: string) {
+		if (!shell || !chunk) return;
+		const bytes = Uint8Array.from(new TextEncoder().encode(chunk)).buffer;
+		try {
+			await shell.sendData(bytes);
+		} catch {}
+	}
+
 	return (
 		<SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.background }}>
 			<Stack.Screen
 				options={{
 					headerBackVisible: true,
-					headerLeft: () => (
-						<Pressable
-							onPress={() => router.back()}
-							hitSlop={10}
-							style={{ paddingHorizontal: 4, paddingVertical: 4 }}
-						>
-							<Ionicons
-								name="chevron-back"
-								size={22}
-								color={theme.colors.textPrimary}
-							/>
-						</Pressable>
-					),
+					headerLeft:
+						Platform.OS === 'android'
+							? () => (
+									<Pressable
+										onPress={() => router.back()}
+										hitSlop={10}
+										style={{ paddingHorizontal: 4, paddingVertical: 4 }}
+									>
+										<Ionicons
+											name="chevron-back"
+											size={22}
+											color={theme.colors.textPrimary}
+										/>
+									</Pressable>
+								)
+							: undefined,
 					headerRight: () => (
 						<Pressable
+							accessibilityLabel="Disconnect"
+							hitSlop={10}
 							onPress={async () => {
 								try {
 									await connection?.disconnect();
@@ -86,9 +108,7 @@ function ShellDetail() {
 								router.replace('/shell');
 							}}
 						>
-							<Text style={{ color: theme.colors.primary, fontWeight: '700' }}>
-								Disconnect
-							</Text>
+							<Ionicons name="power" size={20} color={theme.colors.primary} />
 						</Pressable>
 					),
 				}}
@@ -96,7 +116,13 @@ function ShellDetail() {
 			<View
 				style={[styles.container, { backgroundColor: theme.colors.background }]}
 			>
-				<View style={styles.terminal}>
+				<View
+					style={styles.terminal}
+					onStartShouldSetResponder={() => {
+						hiddenInputRef.current?.focus();
+						return false;
+					}}
+				>
 					<ScrollView
 						ref={scrollViewRef}
 						contentContainerStyle={styles.terminalContent}
@@ -106,60 +132,43 @@ function ShellDetail() {
 							{shellData || 'Connected. Output will appear here...'}
 						</Text>
 					</ScrollView>
+					<TextInput
+						ref={hiddenInputRef}
+						value={inputValue}
+						onChangeText={async (text) => {
+							if (!text) return;
+							await sendChunk(text);
+							setInputValue('');
+						}}
+						onKeyPress={async (e) => {
+							const key = e.nativeEvent.key;
+							if (key === 'Backspace') {
+								await sendChunk('\b');
+							}
+						}}
+						onSubmitEditing={async () => {
+							await sendChunk('\n');
+						}}
+						style={styles.hiddenInput}
+						autoFocus
+						multiline
+						caretHidden
+						autoCorrect={false}
+						autoCapitalize="none"
+						keyboardType="visible-password"
+						blurOnSubmit={false}
+					/>
 				</View>
-				<CommandInput
-					executeCommand={async (command) => {
-						await shell?.sendData(
-							Uint8Array.from(new TextEncoder().encode(command + '\n')).buffer,
-						);
-					}}
-				/>
 			</View>
 		</SafeAreaView>
 	);
 }
 
-function CommandInput(props: {
-	executeCommand: (command: string) => Promise<void>;
-}) {
-	const [command, setCommand] = useState('');
-
-	async function handleExecute() {
-		if (!command.trim()) return;
-		await props.executeCommand(command);
-		setCommand('');
-	}
-
-	return (
-		<View>
-			<TextInput
-				testID="command-input"
-				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, { marginTop: 8 }]}
-				onPress={handleExecute}
-				testID="execute-button"
-			>
-				<Text style={styles.executeButtonText}>Execute</Text>
-			</Pressable>
-		</View>
-	);
-}
-
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#0B1324',
-		padding: 16,
+		padding: 12,
 	},
 	terminal: {
 		flex: 1,
@@ -171,7 +180,9 @@ const styles = StyleSheet.create({
 		marginBottom: 12,
 	},
 	terminalContent: {
-		padding: 12,
+		paddingHorizontal: 12,
+		paddingTop: 4,
+		paddingBottom: 12,
 	},
 	terminalText: {
 		color: '#D1D5DB',
@@ -183,33 +194,13 @@ const styles = StyleSheet.create({
 			default: 'monospace',
 		}),
 	},
-	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,
+	hiddenInput: {
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		opacity: 0,
+		color: 'transparent',
 	},
 });