@shaykec/app-agent 1.0.8 → 1.0.9

package/.cursor/agents/ios-customizer.md

@@ -86,18 +86,20 @@ iOS templates use a `Colors.swift` theme file:
 - Ensure dark mode variants are provided
 - Use semantic colors where possible (`Color.primary`, `Color.secondary`)
 
-### MockDataProvider Updates
-iOS MockDataProvider uses static methods returning arrays:
+### Data Layer
+Templates use a `DataRepository` protocol with `DataSourceResolver`:
 ```swift
-struct MockDataProvider {
-    static func getServices() -> [Service] { ... }
-    static func getProviders() -> [Provider] { ... }
+// ViewModels depend on the protocol, not MockDataProvider directly
+private let repository: any DataRepository
+init(repository: any DataRepository = DataSourceResolver.repository) {
+    self.repository = repository
 }
+repository.addItem(newItem)
 ```
-- Keep the same function signatures
-- Update return values with domain-specific data
-- Use realistic Swift date formatting: `Date()`, `Calendar.current`
-- Use UUID() for IDs
+- ALWAYS use `DataSourceResolver.repository` in ViewModels, never `MockDataProvider.shared` directly
+- Preserve MockDataProvider CRUD methods and `reset()` function
+- Do NOT modify NetworkMonitor, LocalPersistence, or OfflineBanner
+- Ensure OfflineBanner is integrated into main navigation views
 
 ## Output
 
@@ -116,6 +118,9 @@ POTENTIAL ISSUES:
 - ONLY edit files under `output/` — never touch `templates/`
 - Ensure all imports resolve after your changes
 - Keep `@main` struct and `App` protocol conformance intact
-- Preserve `MockDataProvider` function signatures
+- Preserve `MockDataProvider` CRUD methods and `reset()` function
+- Do NOT modify NetworkMonitor, LocalPersistence, or OfflineBanner
 - Use SF Symbols for tab and navigation icons
+- Preserve ALL `.accessibilityIdentifier()` calls — do NOT remove test IDs
+- Follow `{screen}_{element}_{role}` convention for new test IDs (see `templates/TEST_ID_CONVENTIONS.md`)
 - Test that view hierarchy compiles (no circular references, no missing types)

package/.cursor/agents/react-native-customizer.md

@@ -0,0 +1,170 @@
+---
+name: react-native-customizer
+description: Specialized React Native/TypeScript subagent for customizing React Native app templates. Use when the target platform is React Native and the main agent needs to perform deep customization — updating package configs, rewriting React Native components, adjusting React Navigation, applying themes, and handling cross-platform features.
+tools:
+  - Read
+  - Edit
+  - Write
+  - Grep
+  - Glob
+  - LS
+  - Shell
+---
+
+# React Native Customizer
+
+You are an expert React Native developer specializing in TypeScript and modern mobile development. You handle all React Native-specific customization tasks for the AppAgent pipeline.
+
+## Context You Receive
+
+The main agent passes you:
+- **App name** — display name (e.g., "GigWallet")
+- **App directory** — path under `output/` (e.g., `output/gigwallet-rn/`)
+- **Platform** — `react-native`
+- **App description** — what the app does
+- **What has been done** — renaming, AppConfig, mock data updates already completed
+- **Design brief** (from design-system skill) — color palette (light + dark hex codes), icon mapping, visual tone (playful/professional/minimal/bold), corner radius, and typography intent. Apply these tokens to `ThemeContext.tsx`, tab icons, and layout values.
+- **Content brief** (from content-writer skill) — onboarding text, tab labels, section headers, empty state messages, button labels, search placeholders, and error messages. Apply these strings to React Native components.
+
+## Logging Protocol (MANDATORY)
+
+When you start, print:
+`[SUBAGENT:react-native-customizer] Starting — React Native customization for {app-name}`
+
+When you finish, print:
+`[SUBAGENT:react-native-customizer] Completed — {count} files modified`
+
+## Your Expertise
+
+- React Native 0.73+, TypeScript 5+
+- React Navigation 6+ (bottom tabs, native stack, type-safe navigation)
+- MVVM architecture with custom hooks (`useXxxViewModel`)
+- StyleSheet.create() for performant styling
+- FlatList / SectionList for virtualized lists
+- React Context for theming and global state
+- Cross-platform patterns (iOS + Android from a single codebase)
+
+## Tasks You Handle
+
+### Package & Project Renaming
+When renaming a React Native app:
+1. Update `package.json` — `name` field
+2. Update `app.json` — `name` and `displayName`
+3. Update `android/app/build.gradle` — `applicationId`, `namespace`
+4. Update `android/settings.gradle` — `rootProject.name`
+5. Update `android/app/src/main/res/values/strings.xml` — `app_name`
+6. Update `android/app/src/main/java/` — package directory structure, `MainActivity.kt`, `MainApplication.kt`
+7. Update `ios/Podfile` — project target name
+8. Update all `import` statements if module paths changed
+
+### React Native Component Customization
+When modifying components:
+- Use functional components with `React.FC` typing
+- Use custom hooks (`useXxxViewModel`) for state and business logic
+- Use `StyleSheet.create()` for all styles — no inline style objects
+- Use `useTheme()` hook for accessing theme colors and typography
+- Use `FlatList` / `SectionList` for lists (not `map()` on `ScrollView`)
+- Keep components stateless where possible — hoist state to ViewModel hooks
+- Add `testID` props to ALL interactive elements
+
+### Navigation Structure
+Templates use React Navigation with bottom tabs and native stack:
+```tsx
+const Tab = createBottomTabNavigator();
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function MainTabs() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Explore" component={ExploreScreen} />
+    </Tab.Navigator>
+  );
+}
+
+function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="MainTabs" component={MainTabs} />
+        <Stack.Screen name="Detail" component={DetailScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+When adding/removing/renaming tabs:
+- Update tab names and components in `AppNavigator.tsx`
+- Apply tab labels from the content brief
+- Apply icon text/emoji from the design brief
+- Update `RootStackParamList` type for type-safe navigation
+
+### Theme Customization
+React Native templates use a `ThemeContext.tsx`:
+- Apply primary, secondary, accent colors from the design brief (hex values)
+- Provide both light and dark mode variants
+- Apply corner radius and spacing tokens
+- Apply typography settings (font sizes, weights)
+
+```tsx
+const lightColors = {
+  primary: '#007AFF',
+  secondary: '#5856D6',
+  accent: '#FF9500',
+  background: '#FFFFFF',
+  surface: '#F2F2F7',
+  text: '#000000',
+  textSecondary: '#8E8E93',
+  border: '#C6C6C8',
+  error: '#FF3B30',
+  success: '#34C759',
+};
+```
+
+### Data Layer
+Templates use a `DataRepository` interface with `DataSourceResolver`:
+```tsx
+import { DataSourceResolver } from '../data/DataSourceResolver';
+
+export function useHomeViewModel() {
+  const repository = DataSourceResolver.repository;
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    setItems(repository.getItems());
+    const unsubscribe = repository.subscribe(() => setItems(repository.getItems()));
+    return unsubscribe;
+  }, []);
+  return { items };
+}
+```
+- ALWAYS use `DataSourceResolver.repository` in ViewModel hooks, never `MockDataProvider` directly
+- Preserve MockDataProvider CRUD methods and `reset()` function
+- Do NOT modify NetworkMonitor, LocalPersistence, or OfflineBanner
+- Ensure OfflineBanner is integrated into main navigation screens
+
+## Output
+
+When done, report what you changed:
+```
+FILES MODIFIED:
+- {path}: {what changed}
+- {path}: {what changed}
+
+POTENTIAL ISSUES:
+- {any concerns or items needing manual review}
+```
+
+## Rules
+
+- ONLY edit files under `output/` — never touch `templates/`
+- Ensure all imports resolve after your changes
+- Preserve `MockDataProvider` CRUD methods and `reset()` function
+- Do NOT modify NetworkMonitor, LocalPersistence, or OfflineBanner
+- Ensure OfflineBanner is integrated into main navigation screens
+- Use `testID` props on ALL interactive elements
+- Follow `{screen}_{element}_{role}` convention for test IDs (see `templates/TEST_ID_CONVENTIONS.md`)
+- Use `StyleSheet.create()` for styles, not inline objects
+- Use functional components with TypeScript
+- Keep React Navigation structure intact
+- Preserve ThemeContext provider wrapping in App.tsx
+- Do NOT introduce new npm dependencies

package/.cursor/mcp.json

@@ -1,11 +1,3 @@
 {
-  "mcpServers": {
-    "ai-tester": {
-      "command": "node",
-      "args": ["/Users/shayco/ai-tester/dist/mcp/index.js"],
-      "env": {
-        "MCP_LOG_LEVEL": "info"
-      }
-    }
-  }
-}
+  "mcpServers": {}
+}

package/.cursor/skills/android-customizer/SKILL.md

@@ -9,7 +9,7 @@ Use this skill to perform deep Android/Kotlin/Compose customization on a cloned
 
 ## When to Use
 
-- At Step 8 of the AppAgent workflow, when the platform is Android
+- At Step 5 of the AppAgent workflow, when the platform is Android
 - After AppConfig, mock data, and design tokens are already in place
 - When you need to modify Compose screens, navigation, and themes
 
@@ -282,7 +282,7 @@ Write the report to `output/{app-name}/reports/05-customization.md` (append Andr
 ```markdown
 # Customization Report
 
-**Step:** 8
+**Step:** 5
 **Skill:** android-customizer
 **Timestamp:** {ISO 8601}
 **Result:** PASS
@@ -333,7 +333,7 @@ Update `output/{app-name}/reports/summary.json` — read the file, append this s
 
 ```json
 {
-  "step": 8,
+  "step": 5,
   "name": "android-customization",
   "startedAt": "{ISO 8601 timestamp}",
   "durationSeconds": 0,

package/.cursor/skills/ios-customizer/SKILL.md

@@ -9,7 +9,7 @@ Use this skill to perform deep iOS/SwiftUI customization on a cloned template.
 
 ## When to Use
 
-- At Step 8 of the AppAgent workflow, when the platform is iOS
+- At Step 5 of the AppAgent workflow, when the platform is iOS
 - After AppConfig, mock data, and design tokens are already in place
 - When you need to modify SwiftUI views, navigation, and themes
 
@@ -262,7 +262,7 @@ Write the report to `output/{app-name}/reports/05-customization.md` (append iOS
 ```markdown
 # Customization Report
 
-**Step:** 8
+**Step:** 5
 **Skill:** ios-customizer
 **Timestamp:** {ISO 8601}
 **Result:** PASS
@@ -312,7 +312,7 @@ Update `output/{app-name}/reports/summary.json` — read the file, append this s
 
 ```json
 {
-  "step": 8,
+  "step": 5,
   "name": "ios-customization",
   "startedAt": "{ISO 8601 timestamp}",
   "durationSeconds": 0,

package/.cursor/skills/react-native-customizer/SKILL.md

@@ -133,12 +133,15 @@ const lightColors = {
 };
 ```
 
-### Step 5 — Data Layer & Mock Data
+### Step 5 — Data Layer & Offline Infrastructure
 
-Templates use a `MockDataProvider.ts` that implements `DataRepository` interface:
+Templates include an **offline-first data layer**. Understand these components:
 
 **Files you should NOT modify** (generic infrastructure):
 - `src/data/DataRepository.ts` — interface definition
+- `src/data/NetworkMonitor.ts` — connectivity detection
+- `src/data/LocalPersistence.ts` — JSON file persistence
+- `src/components/OfflineBanner.tsx` — offline status banner
 - `src/theme/ThemeContext.tsx` — theme provider
 
 **Files you MAY need to update** (domain-specific):
@@ -147,25 +150,29 @@ Templates use a `MockDataProvider.ts` that implements `DataRepository` interface
   - All CRUD methods work with correct entity types
   - Subscription/onChange pattern is working
   - Reset method references correct defaults
+- `src/data/SyncManager.ts` — if entity types were renamed, update domain methods
 
 **ViewModel patterns** (how screens consume data):
 
-ViewModels are custom React hooks that use MockDataProvider:
+ViewModels are custom React hooks that use the `DataRepository` interface via `DataSourceResolver`, not `MockDataProvider` directly:
 ```tsx
+import { DataSourceResolver } from '../data/DataSourceResolver';
+
 export function useHomeViewModel() {
+  const repository = DataSourceResolver.repository;
   const [items, setItems] = useState<Item[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     loadData();
-    const unsubscribe = MockDataProvider.subscribe(() => {
-      setItems(MockDataProvider.getItems());
+    const unsubscribe = repository.subscribe(() => {
+      setItems(repository.getItems());
     });
     return unsubscribe;
   }, []);
 
   const loadData = () => {
-    setItems(MockDataProvider.getItems());
+    setItems(repository.getItems());
     setIsLoading(false);
   };
 
@@ -173,6 +180,16 @@ export function useHomeViewModel() {
 }
 ```
 
+When customizing ViewModels, ALWAYS use `DataSourceResolver.repository`, never `MockDataProvider` directly. This ensures the app works with any data source (mock, localStorage, Firebase, Supabase, custom API).
+
+**OfflineBanner integration** — add to main navigation screens:
+```tsx
+<View style={{ flex: 1 }}>
+  <OfflineBanner />
+  {/* ... rest of screen content */}
+</View>
+```
+
 ### Step 6 — Data Layer Verification
 
 Verify the data layer uses correct patterns:
@@ -193,9 +210,36 @@ export interface DataRepository {
 }
 ```
 
+**MockDataProvider (implements DataRepository):**
+```tsx
+class MockDataProvider implements DataRepository {
+  private static instance: MockDataProvider;
+  private listeners: Set<() => void> = new Set();
+
+  getItems(): Item[] { ... }
+  addItem(item: Item): void { ... }
+  subscribe(callback: () => void): () => void { ... }
+  reset(): void { ... }  // Reset to defaults
+}
+```
+
+**DataSourceResolver:**
+```tsx
+export class DataSourceResolver {
+  static get repository(): DataRepository {
+    switch (AppConfig.DataSource.active) {
+      case 'localStorage': return MockDataProvider.getInstance(); // TODO: LocalStorageProvider
+      case 'mock': return MockDataProvider.getInstance();
+    }
+  }
+}
+```
+
 Verify:
-- MockDataProvider implements all DataRepository methods
-- ViewModel hooks use MockDataProvider correctly
+- DataRepository interface matches MockDataProvider's public methods
+- MockDataProvider implements DataRepository
+- DataSourceResolver returns the correct implementation
+- ViewModel hooks use `DataSourceResolver.repository`, not `MockDataProvider` directly
 - Seed data matches the new domain
 - CRUD methods reference correct entity types
 
@@ -237,6 +281,14 @@ import { CelebrationOverlay } from '../shared/CelebrationEffects';
 4. **Wrap all applied animations** with `useMotionPreferences` checks if MotionPreferences is integrated
 5. **Do NOT add animation modifiers** to screens not listed in the manifest
 
+### Step 6.7 — App Icon (if applicable)
+
+React Native apps target both iOS and Android. App icon customization is handled per-platform:
+- **iOS**: If `scripts/generate-app-icon.swift` exists, run it with the SF Symbol and background color from the manifest
+- **Android**: If `templates/android/ICON_VECTORS.md` exists, update `android/app/src/main/res/drawable/ic_launcher_foreground.xml` and `ic_launcher_background` color
+
+If the scripts/resources are not available, skip — the template's default icons will be used.
+
 ## Report Output
 
 Write the report to `output/{app-name}/reports/05-customization.md`:
@@ -269,6 +321,12 @@ React Native (TypeScript)
 - Empty states: {count}
 - CTAs updated: {count}
 
+## Offline Infrastructure
+
+- OfflineBanner integrated: {yes/no}
+- SyncManager methods updated: {list or "no changes needed"}
+- Data persistence verified: {yes/no}
+
 ## Animation Modifiers Applied
 
 - {modifier}: applied to {screen} — {description}
@@ -324,8 +382,10 @@ Templates include `testID` props on all interactive elements and a `TESTING_MANI
 - ONLY edit files under `output/` — never touch `templates/`
 - Ensure all imports resolve after your changes
 - Preserve `MockDataProvider` CRUD methods and `reset()` function
+- Do NOT modify NetworkMonitor, LocalPersistence, or OfflineBanner
+- Ensure OfflineBanner is integrated into main navigation screens
 - Use `testID` props on ALL interactive elements
-- Follow `{screen}_{element}_{role}` convention for new test IDs
+- Follow `{screen}_{element}_{role}` convention for new test IDs (see `templates/TEST_ID_CONVENTIONS.md`)
 - Use `StyleSheet.create()` for styles, not inline objects
 - Use functional components with TypeScript
 - Keep React Navigation structure intact

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaykec/app-agent",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "AI-powered mobile app generator using Cursor CLI and templates",
   "type": "module",
   "main": "dist/index.js",

package/templates/android/Skeleton/TESTING_MANIFEST.md

@@ -48,7 +48,8 @@ This document catalogs all test tags in the Skeleton template for automated test
 - `profile_name` — User name
 - `profile_email` — User email
 - `profile_notifications` — Notifications setting
-- `profile_appearance` — Appearance setting
+- `profile_appearance` — Appearance / Dark Mode row
+- `profile_dark_mode_toggle` — Dark mode toggle switch
 - `profile_motion_preferences` — Motion Preferences / Animations link
 - `profile_version` — App version
 - `profile_privacy` — Privacy policy

package/templates/android/Skeleton/app/src/main/kotlin/com/appship/skeleton/MainActivity.kt

@@ -4,18 +4,39 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import com.appship.skeleton.core.theme.AppearanceManager
+import com.appship.skeleton.core.theme.LocalAppearanceManager
 import com.appship.skeleton.core.theme.SkeletonTheme
+import com.appship.skeleton.core.theme.resolveIsDarkTheme
 import com.appship.skeleton.features.navigation.MainScreen
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
+    @OptIn(ExperimentalComposeUiApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
         setContent {
-            SkeletonTheme {
-                MainScreen()
+            val appearanceManager = remember { AppearanceManager(this) }
+            CompositionLocalProvider(LocalAppearanceManager provides appearanceManager) {
+                SkeletonTheme(darkTheme = resolveIsDarkTheme(appearanceManager)) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .semantics { testTagsAsResourceId = true }
+                    ) {
+                        MainScreen()
+                    }
+                }
             }
         }
     }

package/templates/android/Skeleton/app/src/main/kotlin/com/appship/skeleton/core/theme/AppearanceManager.kt

@@ -0,0 +1,42 @@
+package com.appship.skeleton.core.theme
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.*
+import androidx.compose.runtime.staticCompositionLocalOf
+
+// CUSTOMIZE:APPEARANCE - Dark mode and appearance management
+enum class AppearanceMode { SYSTEM, LIGHT, DARK }
+
+class AppearanceManager(context: Context) {
+    private val prefs: SharedPreferences =
+        context.getSharedPreferences("appearance_prefs", Context.MODE_PRIVATE)
+
+    var appearanceMode: AppearanceMode by mutableStateOf(
+        try {
+            AppearanceMode.valueOf(prefs.getString("appearance_mode", "SYSTEM") ?: "SYSTEM")
+        } catch (_: Exception) {
+            AppearanceMode.SYSTEM
+        }
+    )
+        private set
+
+    fun setMode(mode: AppearanceMode) {
+        appearanceMode = mode
+        prefs.edit().putString("appearance_mode", mode.name).apply()
+    }
+}
+
+val LocalAppearanceManager = staticCompositionLocalOf<AppearanceManager> {
+    error("No AppearanceManager provided")
+}
+
+@Composable
+fun resolveIsDarkTheme(appearanceManager: AppearanceManager): Boolean {
+    return when (appearanceManager.appearanceMode) {
+        AppearanceMode.SYSTEM -> isSystemInDarkTheme()
+        AppearanceMode.LIGHT -> false
+        AppearanceMode.DARK -> true
+    }
+}

package/templates/android/Skeleton/app/src/main/kotlin/com/appship/skeleton/features/profile/ProfileScreen.kt

@@ -17,6 +17,8 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.appship.skeleton.AppConfig
 import com.appship.skeleton.R
+import com.appship.skeleton.core.theme.AppearanceMode
+import com.appship.skeleton.core.theme.LocalAppearanceManager
 
 // PLACEHOLDER: Customize this screen for user profile and settings.
 
@@ -94,14 +96,24 @@ fun ProfileScreen(
                             .testTag("profile_notifications")
                     )
                     HorizontalDivider()
-                    ListItem(
-                        headlineContent = { Text("Appearance") },
-                        leadingContent = { Icon(Icons.Default.Palette, contentDescription = null) },
-                        trailingContent = { Icon(Icons.Default.ChevronRight, contentDescription = null) },
-                        modifier = Modifier
-                            .clickable { /* Navigate to appearance */ }
-                            .testTag("profile_appearance")
-                    )
+                    run {
+                        val appearanceManager = LocalAppearanceManager.current
+                        val isDark = appearanceManager.appearanceMode == AppearanceMode.DARK
+                        ListItem(
+                            headlineContent = { Text("Dark Mode") },
+                            leadingContent = { Icon(Icons.Default.DarkMode, contentDescription = null) },
+                            trailingContent = {
+                                Switch(
+                                    checked = isDark,
+                                    onCheckedChange = { checked ->
+                                        appearanceManager.setMode(if (checked) AppearanceMode.DARK else AppearanceMode.SYSTEM)
+                                    },
+                                    modifier = Modifier.testTag("profile_dark_mode_toggle")
+                                )
+                            },
+                            modifier = Modifier.testTag("profile_appearance")
+                        )
+                    }
                     if (AppConfig.Features.ENABLE_ANIMATIONS) {
                         HorizontalDivider()
                         ListItem(

package/templates/android/Skeleton/tests/03_detail_screen.yaml

@@ -7,7 +7,8 @@ appId: ${APP_PACKAGE_NAME}
     timeout: 3000
 - assertVisible: "Home"
 - extendedWaitUntil:
-    visible: "home_item_0_card"
+    visible:
+        id: "home_item_0_card"
     timeout: 2000
 - tapOn:
     id: "home_item_0_card"

package/templates/android/Skeleton/tests/04_favorites.yaml

@@ -7,7 +7,8 @@ appId: ${APP_PACKAGE_NAME}
     timeout: 3000
 - assertVisible: "Home"
 - extendedWaitUntil:
-    visible: "home_item_0_card"
+    visible:
+        id: "home_item_0_card"
     timeout: 2000
 # Favorite an item first
 - tapOn:

package/templates/android/Skeleton/tests/08_full_e2e.yaml

@@ -8,7 +8,8 @@ appId: ${APP_PACKAGE_NAME}
 # Home tab
 - assertVisible: "Home"
 - extendedWaitUntil:
-    visible: "home_item_0_card"
+    visible:
+        id: "home_item_0_card"
     timeout: 2000
 # Detail from home
 - tapOn:

package/templates/android/Skeleton/tests/09_dark_mode.yaml

@@ -0,0 +1,50 @@
+appId: ${APP_PACKAGE_NAME}
+---
+- clearState
+- launchApp
+- extendedWaitUntil:
+    visible: "Home"
+    timeout: 3000
+# Navigate to Profile
+- tapOn: "Profile"
+- extendedWaitUntil:
+    visible:
+        id: "profile_avatar"
+    timeout: 3000
+# Verify dark mode toggle is visible
+- assertVisible:
+    id: "profile_dark_mode_toggle"
+# Toggle dark mode ON
+- tapOn:
+    id: "profile_dark_mode_toggle"
+# Verify profile still renders in dark mode
+- assertVisible:
+    id: "profile_avatar"
+    optional: true
+- assertVisible:
+    id: "profile_name"
+    optional: true
+# Navigate to Home to verify dark mode persists across tabs
+- tapOn: "Home"
+- extendedWaitUntil:
+    visible: "Home"
+    timeout: 3000
+# Navigate back to Profile
+- tapOn: "Profile"
+- extendedWaitUntil:
+    visible:
+        id: "profile_avatar"
+    timeout: 3000
+# Verify toggle is still ON (dark mode persisted)
+- assertVisible:
+    id: "profile_dark_mode_toggle"
+# Toggle dark mode OFF (back to system)
+- tapOn:
+    id: "profile_dark_mode_toggle"
+# Verify profile renders normally
+- assertVisible:
+    id: "profile_avatar"
+    optional: true
+- assertVisible:
+    id: "profile_name"
+    optional: true