Yuzu-GCA/packages/client-android/App.tsx

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import {
  StyleSheet, Text, View, TextInput, TouchableOpacity,
  ScrollView, Switch, FlatList, KeyboardAvoidingView, Platform,
} from 'react-native';
import { DEFAULT_GATEWAY_CONFIG } from '@yuzu-gca/shared';

/** Android Client: Chat + Settings + Connection */

type Msg = { role: 'user' | 'assistant'; text: string; ts: number };

export default function App() {
  const [tab, setTab] = useState<'chat' | 'terminal' | 'settings' | 'device' | 'connection'>('chat');

  // Chat state
  const [messages, setMessages] = useState<Msg[]>([]);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);

  // Settings state
  const [gatewayUrl, setGatewayUrl] = useState(DEFAULT_GATEWAY_CONFIG.url);
  const [deviceName, setDeviceName] = useState('Android Device');
  const [autoConnect, setAutoConnect] = useState(true);
  const [heartbeatInterval, setHeartbeatInterval] = useState(String(DEFAULT_GATEWAY_CONFIG.heartbeatInterval / 1000));
  const [logLevel, setLogLevel] = useState('info');

  // Connection state
  const [connStatus, setConnStatus] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');

  // Terminal state
  const [termCmd, setTermCmd] = useState('');
  const [termOut, setTermOut] = useState('Execute remote commands via Gateway MCP.\nType a shell command and press Execute.\n');
  const [termRunning, setTermRunning] = useState(false);
  const runTermCmd = async () => {
    if (!termCmd.trim() || termRunning) return;
    const c = termCmd.trim(); setTermCmd(''); setTermRunning(true);
    setTermOut(o => o + `$ ${c}\n`);
    try {
      const r = await fetch(`${gatewayUrl}/tools/exec`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({command:c}), signal:AbortSignal.timeout(30000) });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      const d = await r.json() as any;
      setTermOut(o => o + (d.stdout||d.stderr||JSON.stringify(d)) + '\n');
    } catch(e:any) { setTermOut(o => o + `Error: ${e.message}\n`); }
    finally { setTermRunning(false); }
  };

  /** Send chat message to Gateway */
  const sendMessage = async () => {
    const text = input.trim();
    if (!text || sending) return;
    const userMsg: Msg = { role: 'user', text, ts: Date.now() };
    setMessages(prev => [...prev, userMsg]);
    setInput('');
    setSending(true);

    try {
      const resp = await fetch(`${gatewayUrl}/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: text }),
        signal: AbortSignal.timeout(30000),
      });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const data = await resp.json() as { reply?: string; error?: string };
      const aiMsg: Msg = {
        role: 'assistant',
        text: data.reply ?? data.error ?? 'No response',
        ts: Date.now(),
      };
      setMessages(prev => [...prev, aiMsg]);
    } catch (e: any) {
      setMessages(prev => [...prev, {
        role: 'assistant',
        text: `Error: ${e.message}`,
        ts: Date.now(),
      }]);
    } finally {
      setSending(false);
    }
  };

  /** Connect/disconnect toggle */
  const toggleConnection = () => {
    setConnStatus(prev => {
      if (prev === 'disconnected' || prev === 'error') return 'connecting';
      return 'disconnected';
    });
  };

  // ── Render ──────────────────────────────────────────────

  return (
    <KeyboardAvoidingView style={styles.root} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
      <StatusBar style="light" />

      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>Yuzu GCA</Text>
        <View style={[styles.statusDot, styles[`dot_${connStatus}` as keyof typeof styles]]} />
      </View>

      {/* Tabs */}
      <View style={styles.tabBar}>
        {(['chat', 'terminal', 'settings', 'device', 'connection'] as const).map(t => (
          <TouchableOpacity key={t} onPress={() => setTab(t)} style={[styles.tab, tab === t && styles.tabActive]}>
            <Text style={[styles.tabText, tab === t && styles.tabTextActive]}>
              {t === 'chat' ? 'Chat' : t === 'terminal' ? 'Term' : t === 'settings' ? 'Gateway' : t === 'device' ? 'Device' : (connStatus === 'connected' ? '🟢' : '⚫')}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* ── Chat Tab ── */}
      {tab === 'chat' && (
        <View style={styles.chatContainer}>
          <FlatList
            data={messages}
            keyExtractor={(_, i) => String(i)}
            style={styles.chatList}
            renderItem={({ item }) => (
              <View style={[styles.bubble, item.role === 'user' ? styles.bubbleUser : styles.bubbleAI]}>
                <Text style={styles.bubbleRole}>{item.role === 'user' ? 'You' : 'GCA'}</Text>
                <Text style={styles.bubbleText}>{item.text}</Text>
              </View>
            )}
            ListEmptyComponent={
              <Text style={styles.emptyText}>Send a message to control your devices via AI</Text>
            }
          />
          <View style={styles.inputBar}>
            <TextInput
              style={styles.chatInput}
              value={input}
              onChangeText={setInput}
              placeholder="Type a command..."
              placeholderTextColor="#475569"
              onSubmitEditing={sendMessage}
              returnKeyType="send"
            />
            <TouchableOpacity style={[styles.sendBtn, sending && styles.sendBtnDisabled]} onPress={sendMessage} disabled={sending}>
              <Text style={styles.sendBtnText}>{sending ? '...' : 'Send'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}

      {/* ── Terminal Tab ── */}
      {tab === 'terminal' && (
        <View style={styles.chatContainer}>
          <ScrollView style={styles.termOutput}>
            <Text style={styles.termText} selectable>{termOut}</Text>
          </ScrollView>
          <View style={styles.inputBar}>
            <TextInput style={styles.chatInput} value={termCmd} onChangeText={setTermCmd} placeholder="ls -la /home" placeholderTextColor="#475569" autoCapitalize="none" autoCorrect={false} onSubmitEditing={runTermCmd} returnKeyType="send" />
            <TouchableOpacity style={[styles.sendBtn, termRunning && styles.sendBtnDisabled]} onPress={runTermCmd} disabled={termRunning}>
              <Text style={styles.sendBtnText}>{termRunning ? '...' : 'Run'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}

      {/* ── Settings Tab ── */}
      {tab === 'settings' && (
        <ScrollView style={styles.body}>
          <Text style={styles.label}>Gateway URL</Text>
          <TextInput style={styles.input} value={gatewayUrl} onChangeText={setGatewayUrl} placeholder="http://localhost:3000" placeholderTextColor="#475569" autoCapitalize="none" keyboardType="url" />

          <Text style={styles.label}>Heartbeat (seconds)</Text>
          <TextInput style={styles.input} value={heartbeatInterval} onChangeText={setHeartbeatInterval} keyboardType="numeric" placeholder="15" placeholderTextColor="#475569" />

          <View style={styles.switchRow}>
            <Text style={styles.label}>Auto-connect on start</Text>
            <Switch value={autoConnect} onValueChange={setAutoConnect} trackColor={{ true: '#3b82f6' }} />
          </View>

          <Text style={styles.label}>Log Level</Text>
          <View style={styles.chipRow}>
            {(['debug', 'info', 'warn', 'error'] as const).map(lv => (
              <TouchableOpacity key={lv} style={[styles.chip, logLevel === lv && styles.chipActive]} onPress={() => setLogLevel(lv)}>
                <Text style={[styles.chipText, logLevel === lv && styles.chipTextActive]}>{lv}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      )}

      {/* ── Device Tab ── */}
      {tab === 'device' && (
        <ScrollView style={styles.body}>
          <Text style={styles.label}>Device Name</Text>
          <TextInput style={styles.input} value={deviceName} onChangeText={setDeviceName} placeholder="Android Device" placeholderTextColor="#475569" />
          <View style={styles.infoCard}>
            <Text style={styles.infoTitle}>Device Info</Text>
            <Text style={styles.infoText}>Platform: Android</Text>
            <Text style={styles.infoText}>Gateway: {gatewayUrl}</Text>
            <Text style={styles.infoText}>Capabilities: exec, file_list, sysinfo...</Text>
            <Text style={styles.infoText}>MCP Tools: 36 defined, 7 implemented</Text>
          </View>
        </ScrollView>
      )}

      {/* ── Connection Tab ── */}
      {tab === 'connection' && (
        <View style={styles.body}>
          <View style={[styles.connIndicator, styles[`conn_${connStatus}` as keyof typeof styles]]}>
            <Text style={styles.connText}>
              {connStatus === 'connected' ? '🟢 Connected' :
               connStatus === 'connecting' ? '🟡 Connecting...' :
               connStatus === 'error' ? '🔴 Error' : '⚫ Disconnected'}
            </Text>
          </View>
          <TouchableOpacity
            style={[styles.btn, connStatus === 'connected' ? styles.btnDanger : styles.btnPrimary]}
            onPress={toggleConnection}
          >
            <Text style={styles.btnText}>{connStatus === 'disconnected' ? 'Connect' : 'Disconnect'}</Text>
          </TouchableOpacity>
        </View>
      )}
    </KeyboardAvoidingView>
  );
}

// ── Styles ────────────────────────────────────────────────

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#0f172a' },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingTop: 48, paddingBottom: 8 },
  title: { fontSize: 22, fontWeight: '800', color: '#e2e8f0' },
  statusDot: { width: 10, height: 10, borderRadius: 5 },
  dot_connected: { backgroundColor: '#22c55e' },
  dot_connecting: { backgroundColor: '#eab308' },
  dot_error: { backgroundColor: '#ef4444' },
  dot_disconnected: { backgroundColor: '#475569' },

  // Tabs
  tabBar: { flexDirection: 'row', marginHorizontal: 16, marginBottom: 8 },
  tab: { flex: 1, padding: 10, alignItems: 'center', borderBottomWidth: 2, borderBottomColor: '#1e293b' },
  tabActive: { borderBottomColor: '#3b82f6' },
  tabText: { fontSize: 13, color: '#64748b' },
  tabTextActive: { color: '#3b82f6', fontWeight: '600' },

  // Chat
  chatContainer: { flex: 1 },
  chatList: { flex: 1, paddingHorizontal: 12 },
  bubble: { marginVertical: 4, padding: 10, borderRadius: 10, maxWidth: '85%' },
  bubbleUser: { alignSelf: 'flex-end', backgroundColor: '#1e40af' },
  bubbleAI: { alignSelf: 'flex-start', backgroundColor: '#1e293b', borderWidth: 1, borderColor: '#334155' },
  bubbleRole: { fontSize: 10, color: '#94a3b8', marginBottom: 2 },
  bubbleText: { fontSize: 14, color: '#e2e8f0' },
  emptyText: { textAlign: 'center', color: '#475569', marginTop: 40, fontSize: 14 },
  inputBar: { flexDirection: 'row', padding: 8, paddingBottom: 16, gap: 8 },
  chatInput: { flex: 1, backgroundColor: '#1e293b', color: '#e2e8f0', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 10, fontSize: 14 },
  sendBtn: { backgroundColor: '#1e40af', borderRadius: 8, paddingHorizontal: 16, justifyContent: 'center' },
  sendBtnDisabled: { opacity: 0.5 },
  sendBtnText: { color: '#fff', fontWeight: '600', fontSize: 14 },

  // Settings
  body: { flex: 1, paddingHorizontal: 16 },
  label: { fontSize: 12, color: '#94a3b8', marginBottom: 4, marginTop: 12 },
  input: { backgroundColor: '#1e293b', color: '#e2e8f0', borderRadius: 8, padding: 12, fontSize: 14 },
  switchRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 },
  chipRow: { flexDirection: 'row', gap: 8, marginTop: 4 },
  chip: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, backgroundColor: '#1e293b' },
  chipActive: { backgroundColor: '#1e40af' },
  chipText: { fontSize: 12, color: '#94a3b8' },
  chipTextActive: { color: '#fff' },
  infoCard: { backgroundColor: '#1e293b', borderRadius: 8, padding: 16, marginTop: 16 },
  infoTitle: { fontSize: 14, color: '#38bdf8', marginBottom: 8 },
  infoText: { fontSize: 12, color: '#94a3b8', marginTop: 4 },

  // Connection
  connIndicator: { borderRadius: 8, padding: 16, marginTop: 16, alignItems: 'center' },
  conn_connected: { backgroundColor: '#064e3b' },
  conn_connecting: { backgroundColor: '#78350f' },
  conn_error: { backgroundColor: '#7f1d1d' },
  conn_disconnected: { backgroundColor: '#1e293b' },
  connText: { fontSize: 16, color: '#e2e8f0' },
  termOutput: { flex: 1, backgroundColor: '#0a0f1a', margin: 8, borderRadius: 8, padding: 12 },
  termText: { fontFamily: 'monospace', fontSize: 12, color: '#22c55e', lineHeight: 18 },
  btn: { borderRadius: 8, padding: 14, marginTop: 16, alignItems: 'center' },
  btnPrimary: { backgroundColor: '#1e40af' },
  btnDanger: { backgroundColor: '#991b1b' },
  btnText: { fontSize: 16, color: '#fff', fontWeight: '600' },
});