feat: companion app improvements and intro overlay

Android: NES controller/keyboard enhancements, WebSocket reconnect,
portrait mode. Backend: remote input handler updates. UI: companion
intro overlay on dashboard, relay improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Android/app/build.gradle.kts

@@ -11,8 +11,8 @@ android {
         applicationId = "com.archipelago.app"
         minSdk = 26
         targetSdk = 35
-        versionCode = 1
-        versionName = "0.1.0"
+        versionCode = 4
+        versionName = "0.4.0"
 
         vectorDrawables {
             useSupportLibrary = true

Android/app/src/main/java/com/archipelago/app/network/InputWebSocket.kt

@@ -32,6 +32,9 @@ class InputWebSocket(
     private var password: String = ""
     private var sessionCookie: String? = null
 
+    /** Player ID for arcade mode (0 = broadcast, 1 = P1, 2 = P2) */
+    var playerId: Int = 0
+
     private val _state = MutableStateFlow(ConnectionState.DISCONNECTED)
     val state: StateFlow<ConnectionState> = _state
 
@@ -109,10 +112,11 @@ class InputWebSocket(
     }
 
     private fun doConnect() {
+        val basePath = "/ws/remote-input" + if (playerId > 0) "?p=$playerId" else ""
         val wsUrl = serverUrl
             .replace("https://", "wss://")
             .replace("http://", "ws://")
-            .trimEnd('/') + "/ws/remote-input"
+            .trimEnd('/') + basePath
 
         val reqBuilder = Request.Builder().url(wsUrl)
         sessionCookie?.let { reqBuilder.header("Cookie", "session=$it") }
@@ -160,7 +164,8 @@ class InputWebSocket(
     // ─── Input senders ──────────────────────────────────────────
 
     fun sendKey(key: String) {
-        ws?.send("""{"t":"k","k":"$key"}""")
+        val pField = if (playerId > 0) ""","p":$playerId""" else ""
+        ws?.send("""{"t":"k","k":"$key"$pField}""")
     }
 
     fun sendMouseMove(dx: Int, dy: Int) {

Android/app/src/main/java/com/archipelago/app/ui/components/NESController.kt

@@ -101,8 +101,10 @@ fun paletteFor(style: ControllerStyle) = if (style == ControllerStyle.CLASSIC) C
 @Composable
 fun NESController(
     style: ControllerStyle = ControllerStyle.CLASSIC,
+    playerId: Int = 0,
     onKey: (String) -> Unit,
     onMenu: () -> Unit,
+    onPlayerToggle: () -> Unit = {},
     modifier: Modifier = Modifier,
 ) {
     val c = paletteFor(style)
@@ -205,8 +207,15 @@ fun NESController(
                     }
                 }
 
-                // Settings button (bottom center)
-                SettingsBtn(c, Modifier.align(Alignment.BottomCenter).padding(bottom = 4.dp), onMenu)
+                // Player toggle + settings (bottom center)
+                Row(
+                    Modifier.align(Alignment.BottomCenter).padding(bottom = 4.dp),
+                    horizontalArrangement = Arrangement.spacedBy(10.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    PlayerPill(c, playerId, onPlayerToggle)
+                    SettingsBtn(c, Modifier, onMenu)
+                }
             }
         }
     }
@@ -370,19 +379,39 @@ fun CapsuleBtn(label: String, c: NESPalette, w: Dp = 64.dp, h: Dp = 28.dp, onCli
     }
 }
 
-/** Small settings gear button */
+/** Settings gear button (48dp — large enough for easy tap on TV) */
 @Composable
 fun SettingsBtn(c: NESPalette, modifier: Modifier = Modifier, onClick: () -> Unit) {
     var p by remember { mutableStateOf(false) }
     Box(
         modifier = modifier
-            .size(24.dp)
+            .size(48.dp)
             .clip(CircleShape)
             .background(if (p) c.capsulePress else c.capsule)
             .pointerInput(Unit) { detectTapGestures(onPress = { p = true; onClick(); tryAwaitRelease(); p = false }) },
         contentAlignment = Alignment.Center,
     ) {
-        Icon(Icons.Default.Settings, "Settings", Modifier.size(14.dp), tint = c.labelMuted)
+        Icon(Icons.Default.Settings, "Settings", Modifier.size(28.dp), tint = c.labelMuted)
+    }
+}
+
+/** Player ID toggle pill (P1/P2/ALL) */
+@Composable
+fun PlayerPill(c: NESPalette, playerId: Int, onToggle: () -> Unit) {
+    val label = when (playerId) { 1 -> "P1"; 2 -> "P2"; else -> "ALL" }
+    val accent = when (playerId) { 1 -> Color(0xFF00F0FF); 2 -> Color(0xFFFF0080); else -> c.labelMuted }
+    var p by remember { mutableStateOf(false) }
+    Box(
+        modifier = Modifier
+            .height(28.dp)
+            .width(44.dp)
+            .clip(RoundedCornerShape(6.dp))
+            .background(if (p) c.capsulePress else c.capsule)
+            .border(1.dp, accent.copy(alpha = 0.5f), RoundedCornerShape(6.dp))
+            .pointerInput(Unit) { detectTapGestures(onPress = { p = true; onToggle(); tryAwaitRelease(); p = false }) },
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(label, color = accent, fontSize = 10.sp, fontWeight = FontWeight.Bold, letterSpacing = 1.sp)
     }
 }
 

Android/app/src/main/java/com/archipelago/app/ui/components/NESKeyboard.kt

@@ -55,9 +55,15 @@ fun NESKeyboard(
     var layer by remember { mutableStateOf(NKLayer.ALPHA) }
     var shifted by remember { mutableStateOf(false) }
     var capsLock by remember { mutableStateOf(false) }
+    var ctrlHeld by remember { mutableStateOf(false) }
     val up = shifted || capsLock
 
-    fun emit(k: String) { onKey(k); if (shifted && !capsLock) shifted = false }
+    fun emit(k: String) {
+        val key = if (ctrlHeld) "ctrl+$k" else k
+        onKey(key)
+        if (shifted && !capsLock) shifted = false
+        if (ctrlHeld) ctrlHeld = false
+    }
     fun ch(cc: String) { emit(if (up && layer == NKLayer.ALPHA) "shift+$cc" else cc) }
 
     // NES body wrapping keyboard
@@ -113,9 +119,12 @@ fun NESKeyboard(
             NKey(if (layer == NKLayer.ALPHA) "123" else "ABC", Modifier.weight(1.4f), keyBg, keyBgP, keyTxt) {
                 layer = if (layer == NKLayer.ALPHA) NKLayer.NUM else NKLayer.ALPHA; shifted = false; capsLock = false
             }
-            NKey(",", Modifier.weight(1f), keyBg, keyBgP, keyTxt) { emit("comma") }
-            NKey("space", Modifier.weight(5f), keyBg, keyBgP, keyTxt, 12) { emit("space") }
-            NKey(".", Modifier.weight(1f), keyBg, keyBgP, keyTxt) { emit("period") }
+            NKey("Ctrl", Modifier.weight(1.2f), keyBg, keyBgP, if (ctrlHeld) accent else keyTxt, 11) {
+                ctrlHeld = !ctrlHeld
+            }
+            NKey(",", Modifier.weight(0.8f), keyBg, keyBgP, keyTxt) { emit("comma") }
+            NKey("space", Modifier.weight(4f), keyBg, keyBgP, keyTxt, 12) { emit("space") }
+            NKey(".", Modifier.weight(0.8f), keyBg, keyBgP, keyTxt) { emit("period") }
             NKey("\u23CE", Modifier.weight(1.4f), keyBg, keyBgP, accent, 15) { emit("Return") }
         }
     }

Android/app/src/main/java/com/archipelago/app/ui/components/NESPortraitController.kt

@@ -36,11 +36,13 @@ import com.archipelago.app.ui.theme.NES
 @Composable
 fun NESPortraitController(
     style: ControllerStyle = ControllerStyle.CLASSIC,
+    playerId: Int = 0,
     onKey: (String) -> Unit,
     onMouseMove: (Int, Int) -> Unit = { _, _ -> },
     onMouseClick: (Int) -> Unit = { _ -> },
     onMouseScroll: (Int) -> Unit = { _ -> },
     onMenu: () -> Unit,
+    onPlayerToggle: () -> Unit = {},
 ) {
     val c = paletteFor(style)
     val isClassic = style == ControllerStyle.CLASSIC
@@ -139,8 +141,16 @@ fun NESPortraitController(
 
                 Spacer(Modifier.height(6.dp))
 
-                // Settings
-                SettingsBtn(c, Modifier, onMenu)
+                // Player toggle + Settings
+                Row(
+                    Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    PlayerPill(c, playerId, onPlayerToggle)
+                    Spacer(Modifier.width(10.dp))
+                    SettingsBtn(c, Modifier, onMenu)
+                }
             }
         }
     }

Android/app/src/main/java/com/archipelago/app/ui/screens/RemoteInputScreen.kt

@@ -59,8 +59,14 @@ fun RemoteInputScreen(onBack: () -> Unit) {
     var isGamepadMode by remember { mutableStateOf(true) }
     var showModal by remember { mutableStateOf(false) }
     var controllerStyle by remember { mutableStateOf(ControllerStyle.CLASSIC) }
+    var playerId by remember { mutableStateOf(0) }  // 0 = broadcast, 1 = P1, 2 = P2
 
     val ws = remember { InputWebSocket(scope) }
+
+    fun togglePlayer() {
+        playerId = when (playerId) { 0 -> 1; 1 -> 2; else -> 0 }
+        ws.playerId = playerId
+    }
     val connectionState by ws.state.collectAsState()
     val lifecycleOwner = LocalLifecycleOwner.current
 
@@ -98,32 +104,44 @@ fun RemoteInputScreen(onBack: () -> Unit) {
         when {
             isGamepadMode && isLandscape -> NESController(
                 style = controllerStyle,
+                playerId = playerId,
                 onKey = { ws.sendKey(it) },
                 onMenu = { showModal = true },
+                onPlayerToggle = ::togglePlayer,
             )
             isGamepadMode && !isLandscape -> NESPortraitController(
                 style = controllerStyle,
+                playerId = playerId,
                 onKey = { ws.sendKey(it) },
                 onMouseMove = { dx, dy -> ws.sendMouseMove(dx, dy) },
                 onMouseClick = { ws.sendClick(it) },
                 onMouseScroll = { ws.sendScroll(it) },
                 onMenu = { showModal = true },
+                onPlayerToggle = ::togglePlayer,
             )
             else -> {
                 // Keyboard mode: trackpad fills top, keyboard pinned bottom
-                Column(Modifier.fillMaxSize()) {
-                    Trackpad(
-                        onMove = { dx, dy -> ws.sendMouseMove(dx, dy) },
-                        onClick = { ws.sendClick(it) },
-                        onScroll = { ws.sendScroll(it) },
-                        onTwoFingerHold = { showModal = true },
-                        modifier = Modifier.fillMaxWidth().weight(1f)
-                            .padding(horizontal = 16.dp, vertical = 8.dp),
-                    )
-                    NESKeyboard(
-                        style = controllerStyle,
-                        onKey = { ws.sendKey(it) },
-                        modifier = Modifier.fillMaxWidth(),
+                Box(Modifier.fillMaxSize()) {
+                    Column(Modifier.fillMaxSize()) {
+                        Trackpad(
+                            onMove = { dx, dy -> ws.sendMouseMove(dx, dy) },
+                            onClick = { ws.sendClick(it) },
+                            onScroll = { ws.sendScroll(it) },
+                            onTwoFingerHold = { showModal = true },
+                            modifier = Modifier.fillMaxWidth().weight(1f)
+                                .padding(horizontal = 16.dp, vertical = 8.dp),
+                        )
+                        NESKeyboard(
+                            style = controllerStyle,
+                            onKey = { ws.sendKey(it) },
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                    }
+                    // Settings icon top-right in keyboard mode
+                    com.archipelago.app.ui.components.SettingsBtn(
+                        c = com.archipelago.app.ui.components.paletteFor(controllerStyle),
+                        modifier = Modifier.align(Alignment.TopEnd).padding(8.dp),
+                        onClick = { showModal = true },
                     )
                 }
             }