feat: Migrate BrainVisualizer to common module for multiplatform support, update Android minSdk, and bump app version.

Raoof128 · Raoof128 · commit cd6a4c52ae05 · 2025-12-24T21:39:55.000+11:00
diff --git a/.agent/agent.md b/.agent/agent.md
@@ -185,6 +185,39 @@ Any important notes for future agents.
 
 ---
 
+# 🧠 December 24, 2025 (Session 10k+5) - Cross-Platform Brain Visualizer (Desktop Integration)
+
+### Summary
+Migrated the "Brain" visualizer from Android-specific code to a shared KMP component (`CommonBrainVisualizer`) and integrated it into the Desktop application's "Beat The Bot" training screen, leveraging the common logic for consistent UI across platforms.
+
+## ✅ Changes Made
+
+### Files Updated
+| File | Change |
+|------|--------|
+| `common/.../ui/components/CommonBrainVisualizer.kt` | **New** Shared KMP component for neural net visualization |
+| `desktopApp/.../screens/TrainingScreen.kt` | Integrated `CommonBrainVisualizer` into analysis report |
+| `androidApp/.../screens/BeatTheBotScreen.kt` | Refactored to use shared `CommonBrainVisualizer` |
+| `androidApp/.../ui/components/BrainVisualizerTest.kt` | Updated tests to check `CommonBrainVisualizer` |
+| `androidApp/build.gradle.kts` | Bumped minSdk to 26 (common requirement) & version to 1.17.29 |
+| `CHANGELOG.md` | Added 1.17.29 entry |
+
+### Files Deleted
+| File | Reason |
+|------|--------|
+| `androidApp/.../ui/components/BrainVisualizer.kt` | Replaced by Common KMP version |
+
+## 🔧 Technical Details
+- **Shared Code:** `CommonBrainVisualizer` uses `Canvas` and `MaterialTheme` (Compose Multiplatform) to work on both Android and Desktop.
+- **Desktop Logic:** The visualizer in Desktop mirrors Android's behavior: showing "Calm" (blue) state when safe, and "Pulse" (red) state with badges when threats are detected (based on `training.scenario.insights`).
+- **Build Fix:** `androidApp` required `minSdk 26` because the shared module depends on `java.time` APIs via `kotlinx-datetime` or similar mechanisms in common code.
+
+## ✅ Build Verification
+```bash
+./gradlew :androidApp:assembleDebug :desktopApp:assemble
+# OUTPUT: BUILD SUCCESSFUL
+```
+
 # 🛠️ December 24, 2025 (Session 10k+4) - Android Test Error Resolution
 
 ### Summary
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,22 @@ All notable changes to QR-SHIELD will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.17.29] - 2025-12-24
+
+### 🧠 Cross-Platform Brain Visualizer
+
+Migrated the "Brain" visualizer to a shared KMP component and integrated it into the Desktop application, ensuring identical "Beat The Bot" experience across Android and Desktop.
+
+#### ✨ Features
+- **CommonBrainVisualizer:** Refactored Android-specific implementation into a pure KMP `CommonBrainVisualizer` in `commonMain`.
+- **Desktop Integration:** Enhanced `TrainingScreen.kt` with the brain visualizer in the analysis report section.
+- **Dynamic Signals:** Desktop visualizer now reacts to training scenario insights (Good/Bad signals).
+
+#### 🔧 Technical & Builds
+- **minSdk Update:** Bumped `androidApp` minSdk to 26 to match `common` module requirements.
+- **Test Updates:** Updated `BrainVisualizerTest` to verify the shared component.
+- **Cleanup:** Removed platform-specific `BrainVisualizer.kt` from Android.
+
 ## [1.17.27] - 2025-12-24
 
 ### 🎮 Beat The Bot Training - Visual Upgrades
diff --git a/androidApp/build.gradle.kts b/androidApp/build.gradle.kts
@@ -14,10 +14,10 @@ android {
 
     defaultConfig {
         applicationId = "com.qrshield.android"
-        minSdk = 24
+        minSdk = 26
         targetSdk = 35  // Android 16
-        versionCode = 15
-        versionName = "1.17.28"
+        versionCode = 16
+        versionName = "1.17.29"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
diff --git a/androidApp/src/androidTest/kotlin/com/qrshield/android/ui/components/BrainVisualizerTest.kt b/androidApp/src/androidTest/kotlin/com/qrshield/android/ui/components/BrainVisualizerTest.kt
@@ -3,6 +3,7 @@ package com.qrshield.android.ui.components
 import androidx.compose.ui.test.*
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.test.ext.junit.runners.AndroidJUnit4
+import com.qrshield.ui.components.CommonBrainVisualizer
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -16,7 +17,7 @@ class BrainVisualizerTest {
     @Test
     fun brainVisualizer_showsIdleState_whenSignalsEmpty() {
         composeTestRule.setContent {
-            BrainVisualizer(detectedSignals = emptyList())
+            CommonBrainVisualizer(detectedSignals = emptyList())
         }
 
         // Check content description for idle state (Blue brain)
@@ -28,7 +29,7 @@ class BrainVisualizerTest {
     fun brainVisualizer_showsBadges_whenSignalsProvided() {
         val signals = listOf("TLD_ABUSE", "BRAND_IMPERSONATION")
         composeTestRule.setContent {
-            BrainVisualizer(detectedSignals = signals)
+            CommonBrainVisualizer(detectedSignals = signals)
         }
 
         // Check content description for active state (Red pulsing brain)
diff --git a/androidApp/src/main/kotlin/com/qrshield/android/ui/screens/BeatTheBotScreen.kt b/androidApp/src/main/kotlin/com/qrshield/android/ui/screens/BeatTheBotScreen.kt
@@ -43,7 +43,7 @@ import com.qrshield.android.ui.theme.QRShieldColors
 import com.qrshield.android.ui.theme.QRShieldShapes
 import com.qrshield.android.ui.viewmodels.GameResult
 import com.qrshield.android.ui.viewmodels.GameState
-import com.qrshield.android.ui.components.BrainVisualizer
+import com.qrshield.ui.components.CommonBrainVisualizer
 import kotlin.random.Random
 
 /**
@@ -649,7 +649,7 @@ private fun RoundAnalysisCard(
                 // Use the new BrainVisualizer component
                 // We pass signals ONLY if it's phishing. If it's safe, we pass empty list for "Calm" brain.
                 val visualSignals = if (isPhishing) signals else emptyList()
-                BrainVisualizer(
+                CommonBrainVisualizer(
                     detectedSignals = visualSignals,
                     modifier = Modifier.fillMaxWidth()
                 )
diff --git a/androidApp/src/main/kotlin/com/qrshield/android/ui/viewmodels/BeatTheBotViewModel.kt b/androidApp/src/main/kotlin/com/qrshield/android/ui/viewmodels/BeatTheBotViewModel.kt
@@ -27,7 +27,8 @@ data class GameUrl(
     val url: String,
     val isPhishing: Boolean,
     val context: String,
-    val sender: String = "+1 (555) 123-4567"
+    val sender: String = "+1 (555) 123-4567",
+    val signals: List<String> = emptyList()
 )
 
 enum class GameResult {
diff --git a/common/src/commonMain/kotlin/com/qrshield/ui/components/CommonBrainVisualizer.kt b/common/src/commonMain/kotlin/com/qrshield/ui/components/CommonBrainVisualizer.kt
@@ -1,35 +1,35 @@
-package com.qrshield.android.ui.components
+package com.qrshield.ui.components
 
 import androidx.compose.animation.core.*
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
-import com.qrshield.android.ui.theme.QRShieldColors
-import kotlinx.coroutines.launch
-import kotlin.math.cos
 import kotlin.math.sin
 import kotlin.random.Random
 
 /**
  * A "Brain" visualization that lights up specific neural clusters based on detected signals.
  * Designed for immediate visual feedback in the "Beat The Bot" game.
  *
+ * This component is shared between Android and Desktop (KMP).
+ *
  * @param detectedSignals List of signal strings (e.g. "TLD_ABUSE", "BRAND_IMPERSONATION")
  * @param modifier Modifier for layout
  */
 @Composable
-fun BrainVisualizer(
+fun CommonBrainVisualizer(
     detectedSignals: List<String>,
     modifier: Modifier = Modifier
 ) {
@@ -91,9 +91,9 @@ private fun BrainCanvas(
         mapSignalsToNodes(signals, nodes.size)
     }
 
-    // Color definitions
-    val safeColor = QRShieldColors.Primary
-    val dangerColor = QRShieldColors.Red500
+    // Color definitions from Material Theme for KMP compatibility
+    val safeColor = MaterialTheme.colorScheme.primary
+    val dangerColor = MaterialTheme.colorScheme.error
     val inactiveColor = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.3f)
 
     Canvas(modifier = modifier) {
@@ -176,24 +176,29 @@ private fun BrainCanvas(
 
 @Composable
 private fun DetectedSignalsBadges(signals: List<String>) {
+    val errorColor = MaterialTheme.colorScheme.error
+    
+    // Use FlowRow if available in newer Compose, but Row is safer for older versions
+    // For now, we'll wrap in a Row with horizontal scrolling if needed, or simple wrapping isn't easy without FlowRow
+    // Let's use a simple Row for MVP centered
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp),
         horizontalArrangement = Arrangement.Center
     ) {
         signals.forEach { signal ->
-            androidx.compose.material3.Surface(
-                color = QRShieldColors.Red500.copy(alpha = 0.1f),
-                shape = androidx.compose.foundation.shape.RoundedCornerShape(4.dp),
-                border = androidx.compose.foundation.BorderStroke(1.dp, QRShieldColors.Red500.copy(alpha = 0.3f)),
+            Surface(
+                color = errorColor.copy(alpha = 0.1f),
+                shape = RoundedCornerShape(4.dp),
+                border = androidx.compose.foundation.BorderStroke(1.dp, errorColor.copy(alpha = 0.3f)),
                 modifier = Modifier.padding(4.dp)
             ) {
                 Text(
                     text = signal.replace("_", " "),
                     modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                     style = MaterialTheme.typography.labelSmall,
-                    color = QRShieldColors.Red500
+                    color = errorColor
                 )
             }
         }
diff --git a/common/src/commonMain/kotlin/com/qrshield/ui/game/AIBrainVisual.kt b/common/src/commonMain/kotlin/com/qrshield/ui/game/AIBrainVisual.kt
diff --git a/desktopApp/src/desktopMain/kotlin/com/qrshield/desktop/screens/TrainingScreen.kt b/desktopApp/src/desktopMain/kotlin/com/qrshield/desktop/screens/TrainingScreen.kt

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,8 @@ data class GameUrl(`
`27`	`27`	`val url: String,`
`28`	`28`	`val isPhishing: Boolean,`
`29`	`29`	`val context: String,`
`30`		`- val sender: String = "+1 (555) 123-4567"`
	`30`	`+ val sender: String = "+1 (555) 123-4567",`
	`31`	`+ val signals: List<String> = emptyList()`
`31`	`32`	`)`
`32`	`33`
`33`	`34`	`enum class GameResult {`