feat: Remote Assistance Implementation & Theme Studio Fixes#608
feat: Remote Assistance Implementation & Theme Studio Fixes#608AustinChangLinksys merged 32 commits intodev-2.0.0from
Conversation
Add immutable state class to represent remote read-only mode status. Includes toMap/fromMap/toJson/fromJson methods per constitution Article XI. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add Riverpod provider to centralize remote read-only mode detection. Provider watches authProvider and BuildConfig to determine access mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add banner component to display remote read-only mode notification. Banner appears when isRemoteReadOnly is true, hidden otherwise. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add RemoteReadOnlyBanner to root layout Stack. Banner appears at top when in remote read-only mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Block SET operations when in remote read-only mode at the repository level. This provides a final layer of defense to prevent configuration changes when accessing the router remotely. Changes: - Add _isSetOperation() helper to detect SET operations by URL path - Add _isRemoteReadOnly() helper to check remote access state - Block SET operations in send() method when in remote mode - Block transactions containing SET operations when in remote mode - Throw UnexpectedError with descriptive message when blocked - Add comprehensive test coverage for defensive checks GET operations and non-SET operations remain unaffected in remote mode. All operations are allowed in local mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…pproach Switch from blacklist (checking 'set*' prefix) to allowlist (only allowing 'get*', 'is*', 'check*' operations) to close security vulnerability. The previous implementation only blocked operations starting with "Set", which allowed bypass through destructive operations like reboot, factoryReset, and deleteDevice. This fix uses an allowlist of safe read-only operations instead, blocking all operations that are NOT explicitly safe. Changes: - Rename _isSetOperation() to _isReadOnlyOperation() - Implement allowlist with safePrefixes: get, is, check - Invert defensive check logic (!_isReadOnlyOperation) - Update error messages to reference "Write operations" - Add comprehensive tests for blocking destructive operations - Fix tests to use truly safe operations (getDeviceInfo, getWANSettings) All 10 tests passing. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Create comprehensive usage guide showing developers how to: - Check remote read-only status in UI components - Disable different control types (buttons, switches, text fields) - Follow best practices (use select(), disable vs hide) - Write tests for remote mode behavior - Understand the defensive layer protection Includes code examples, testing patterns, and related file references. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Change RootContainer layout from Stack with Positioned to Column with Expanded. This makes the banner occupy actual space instead of floating over content, preventing UI elements from being obscured. Before: Banner used Positioned(top: 0) - overlays content After: Banner in Column with Expanded content - pushes content down All tests passing. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace hardcoded Colors.orange with theme-aware colors to match application design system: - Background: colorScheme.secondaryContainer - Text/Icon: colorScheme.onSecondaryContainer - Text style: textTheme.bodyMedium This ensures the banner integrates seamlessly with both light and dark themes without appearing jarring or out of place. Update tests to verify theme color usage. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Design comprehensive UI layer protection for remote read-only mode: Architecture: - Layer 1: UI Controls (RemoteAwareSwitch + UiKitBottomBarConfig) - Layer 2: User Notification (existing banner) - Layer 3: Service Defense (existing RouterRepository checks) Key Components: - RemoteAwareSwitch: Wrapper for immediate-effect switches - UiKitBottomBarConfig enhancement: Auto-disable Save buttons Two Operation Modes: - Immediate Mode: Switches trigger JNAP operations directly - Form Mode: Changes batched with Save button Implementation Strategy: - Phase 1: Core components (RemoteAwareSwitch + UiKitBottomBarConfig) - Phase 2: Replace immediate mode switches (15-20 estimated) - Phase 3: Verification & testing Complete with testing strategy, edge cases, migration guide, and success criteria. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete step-by-step implementation plan with 12 tasks: Phase 1 - Core Components (Tasks 1-6): - RemoteAwareSwitch component with TDD approach - UiKitBottomBarConfig enhancement for auto-disable Save buttons Phase 2 - Switch Replacement (Tasks 7-9): - Catalog all AppSwitch usages and categorize by mode - Systematic replacement of immediate-mode switches - Batch commits for reviewability Phase 3 - Verification (Tasks 10-12): - Integration testing - Full test suite validation - Documentation updates Each task includes: - Exact file paths and line numbers - Complete code snippets - Test commands with expected output - Commit messages Estimated effort: 6-11 hours Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace string comparison with nodeType == 'Master' with semantic property check using device.isMaster for better code clarity. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…test Add wrapper component for AppSwitch that auto-disables in remote mode. Initial test verifies switch is enabled in local mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Verify switch is disabled (onChanged = null) in remote mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…sabled Ensure switch value displays correctly even when disabled in remote mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…nges Ensure switch state updates reactively when loginType transitions between local and remote modes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…onfig Add optional parameter to control whether Save button should be disabled in remote mode. Defaults to true for automatic protection. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Modify _buildBottomBarConfig to check remoteAccessProvider and disable positive button when isRemoteReadOnly is true. Respects checkRemoteReadOnly flag for opt-out scenarios. All form pages using UiKitBottomBarConfig now automatically protected. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Comprehensive review of all AppSwitch usages categorized by operation mode. Identifies 10 switches requiring replacement with RemoteAwareSwitch: - instant_admin_view.dart (1): Firmware update toggle - wifi_card.dart (1): WiFi enable/disable - vpn_status_tile.dart (1): VPN service toggle - quick_panel.dart (6): Dashboard quick actions - instant_privacy_view.dart (1): Instant Privacy toggle 13 switches auto-protected by UiKitBottomBarConfig in form pages. 4 switches are UI-only and require no action. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace immediate-mode switches in: - instant_admin_view.dart: Auto firmware update toggle - wifi_card.dart: WiFi network enable/disable toggle - vpn_status_tile.dart: VPN service enable/disable toggle These switches directly trigger JNAP operations and must be disabled in remote mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace immediate-mode switches in: - quick_panel.dart: 6 switches across 3 display modes * Compact mode: Instant Privacy and Night Mode toggles * Normal mode: Instant Privacy and Night Mode toggles * Expanded mode: Instant Privacy and Night Mode toggles - instant_privacy_view.dart: Instant Privacy enable/disable toggle These switches directly trigger JNAP operations and must be disabled in remote mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…KitBottomBarConfig Add comprehensive usage documentation for: - RemoteAwareSwitch component for immediate-effect switches - UiKitBottomBarConfig automatic Save button protection - When to use each approach - Opt-out scenarios Updated Related Files section with new components and tests. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete verification report documenting: - All 10 immediate-mode switches replaced with RemoteAwareSwitch - 13 form pages auto-protected by UiKitBottomBarConfig - All 2756 tests passing (no regressions) - 32 remote-access specific tests passing - Manual testing checklist for final verification - Complete list of affected files and commits Implementation ready for production deployment. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…ol support Enable read-only diagnostic operations in remote mode while maintaining security restrictions on configuration changes. This provides better user experience for remote troubleshooting without compromising device security. Changes: - Add safe operations whitelist for LED blinking, speed test, ping, and traceroute - Remove remote restrictions from SpeedTest widget and external speed test links - Implement topology menu remote mode controls (disable reboot, pair, reset) - Add 26-language translations for featureUnavailableInRemoteMode message - Apply remote read-only checks to IPv4/IPv6 connection and DHCP settings - Enhance RemoteReadOnlyBanner visual styling - Add comprehensive test coverage for safe operations (14 test cases) Read-only operations now allowed in remote mode: - LED blinking (startBlinkingNodeLed, stopBlinkingNodeLed) - Speed test (runHealthCheck, stopHealthCheck) - Network diagnostics (startPing, stopPing, startTraceroute, stopTraceroute) Co-Authored-By: Claude <noreply@anthropic.com>
…istance # Conflicts: # lib/page/instant_admin/views/instant_admin_view.dart
- Wrap dialog content in SingleChildScrollView to support long JSON strings - Move action buttons to AlertDialog actions property to ensure visibility
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||||||||
- Change icon from shield_outlined to info_outline for better visual semantic
- Add missing localization setup for AppLocalizations - Update color expectation to match implementation
This reverts commit b133403. This restores the original merge of dev-2.0.0, resulting in the re-application of changes to specifications, tests, and core logic that were previously reverted.
- Remove fetchRemote: true from getDeviceInfo call in SessionService to ensure correct session verification behavior.
AustinChangLinksys
left a comment
There was a problem hiding this comment.
looks good to me
User description
Summary
This PR merges the Remote Assistance feature set and a fix for the Theme Studio export dialog into dev-2.0.0.
Changes
RemoteAwareSwitch.PR Type
Enhancement, Bug fix, Tests, Documentation
Description
Remote Assistance Feature Implementation: Comprehensive implementation of remote read-only mode protection across the UI layer
RemoteAccessProviderandRemoteAccessStatefor centralized remote mode state managementRemoteAwareSwitchcomponent that automatically disables switches in remote mode while preserving their valuesRouterRepositoryto block write operations (SET, transactions) while allowing safe read-only operations (LED, Speed Test, Ping, Traceroute)UiKitPageViewwithcheckRemoteReadOnlyparameter to auto-disable Save buttons in remote modeRemoteReadOnlyBannerinformational widget displayed at top of app when in remote modeUI Controls Protection: Replaced 10 immediate-mode
AppSwitchinstances withRemoteAwareSwitchacross dashboard, WiFi, VPN, privacy, and topology viewsCritical Settings Protection: Added remote read-only checks and disabled edit buttons for IPv4/IPv6 connection settings, device/node name editing, and IP address reservation
Theme Studio Bug Fix: Fixed export configuration dialog overflow by making content scrollable and moving action buttons to dialog actions parameter
Comprehensive Localization: Added
remoteViewModeActivetranslations for 27 languages (English, Spanish, French, German, Chinese, Japanese, Korean, Arabic, Russian, and others)Documentation & Verification: Created implementation plan, design document, usage guide, switch replacement catalog, and verification report confirming 2756 tests passing with 100% success rate
Diagram Walkthrough
File Walkthrough
5 files
router_repository_test.dart
RouterRepository remote read-only mode defensive teststest/core/jnap/router_repository_test.dart
in remote read-only mode
allowed
permitted in remote mode
remote_aware_switch_test.dart
RemoteAwareSwitch widget teststest/page/components/views/remote_aware_switch_test.dart
mode
remote_access_provider_test.dart
RemoteAccessProvider state teststest/providers/remote_access/remote_access_provider_test.dart
remoteAccessProviderreturns correctisRemoteReadOnlystateBuildConfig.forceCommandTyperemote_access_state_test.dart
RemoteAccessState serialization and equality teststest/providers/remote_access/remote_access_state_test.dart
toJson/fromJson)
remote_read_only_banner_test.dart
RemoteReadOnlyBanner widget teststest/page/components/views/remote_read_only_banner_test.dart
isRemoteReadOnlyis trueisRemoteReadOnlyis false23 files
instant_admin_view.dart
Instant admin view remote access integrationlib/page/instant_admin/views/instant_admin_view.dart
BuildConfig.isRemote()withremoteAccessProviderfor dynamicremote mode detection
mode
AppSwitchwithRemoteAwareSwitchfor DHCP togglecheck
router_repository.dart
RouterRepository defensive checks for remote modelib/core/jnap/router_repository.dart
_isReadOnlyOperation()method to identify safe read-only JNAPactions
_isRemoteReadOnly()method to check remote read-only mode statussend()to block write operations inremote mode
transaction()to block transactionswith write operations
ipv6_connection_view.dart
IPv6 connection view remote access integrationlib/page/advanced_settings/internet_settings/views/ipv6_connection_view.dart
BuildConfig.isRemote()withremoteAccessProviderwatchWidgetReffor provider accessipv4_connection_view.dart
IPv4 connection view remote access integrationlib/page/advanced_settings/internet_settings/views/ipv4_connection_view.dart
BuildConfig.isRemote()withremoteAccessProviderwatchWidgetReffor provider accesstopology_menu_helper.dart
Topology menu helper remote mode restrictionslib/page/instant_topology/helpers/topology_menu_helper.dart
WidgetRefparameter tobuildNodeMenu()methoddevice_detail_view.dart
Device detail view remote access restrictionslib/page/instant_device/views/device_detail_view.dart
local_network_settings_view.dart
Local network settings remote access provider integrationlib/page/advanced_settings/local_network_settings/views/local_network_settings_view.dart
BuildConfig.isRemote()withremoteAccessProviderfor dynamicchecks
detection
ui_kit_page_view.dart
UiKitPageView auto-disable Save button in remote modelib/page/components/ui_kit_page_view.dart
checkRemoteReadOnlyparameter toUiKitBottomBarConfig(defaultsto true)
_buildBottomBarConfig()methodcheckRemoteReadOnlyis trueremoteAccessProviderrelease_and_renew_view.dart
Release and renew view remote access restrictionslib/page/advanced_settings/internet_settings/views/release_and_renew_view.dart
port_and_speed.dart
Port and speed dashboard widget remote access integrationlib/page/dashboard/views/components/widgets/composite/port_and_speed.dart
BuildConfig.isRemote()withremoteAccessProviderwatchstate
instant_verify_view.dart
Instant verify view remote access provider integrationlib/page/instant_verify/views/instant_verify_view.dart
BuildConfig.isRemote()withremoteAccessProviderwatchstate
refparameter for remote checksremote_access_state.dart
RemoteAccessState immutable state classlib/providers/remote_access/remote_access_state.dart
RemoteAccessStateclass withisRemoteReadOnlyproperty
quick_panel.dart
Quick panel dashboard switches remote awarelib/page/dashboard/views/components/widgets/composite/quick_panel.dart
AppSwitchwithRemoteAwareSwitchfor WiFi toggleAppSwitchwithRemoteAwareSwitchfor privacy mode toggleAppSwitchwithRemoteAwareSwitchfor node light toggleremote_read_only_banner.dart
RemoteReadOnlyBanner informational widgetlib/page/components/views/remote_read_only_banner.dart
node_detail_view.dart
Node detail view remote access restrictionslib/page/nodes/views/node_detail_view.dart
root_container.dart
Root container remote banner integrationlib/page/components/layouts/root_container.dart
RemoteReadOnlyBannerat top of layoutremote_access_provider.dart
RemoteAccessProvider state managementlib/providers/remote_access/remote_access_provider.dart
authProviderfor login type changesBuildConfig.forceCommandTypefor compile-time forced remotemode
RemoteAccessStatewithisRemoteReadOnlyflagremote_aware_switch.dart
RemoteAwareSwitch auto-disabling componentlib/page/components/views/remote_aware_switch.dart
RemoteAwareSwitchwrapper component forAppSwitchremoteAccessProviderfor state changesinstant_privacy_view.dart
Instant privacy view switch remote awarelib/page/instant_privacy/views/instant_privacy_view.dart
AppSwitchwithRemoteAwareSwitchfor instant privacy togglewifi_card.dart
WiFi card switch remote awarelib/page/dashboard/views/components/widgets/parts/wifi_card.dart
AppSwitchwithRemoteAwareSwitchfor WiFi enable/disabletoggle
vpn_status_tile.dart
VPN status tile switch remote awarelib/page/vpn/views/vpn_status_tile.dart
AppSwitchwithRemoteAwareSwitchfor VPN enable/disabletoggle
geolocation_provider.dart
Geolocation provider master device lookup refactorlib/core/cloud/providers/geolocation/geolocation_provider.dart
isMasterproperty instead ofchecking
nodeTypenodeDevicesto variableinstant_topology_view.dart
Instant topology view menu builder ref parameterlib/page/instant_topology/views/instant_topology_view.dart
refparameter1 files
theme_studio_panel.dart
Theme Studio export dialog overflow fixlib/demo/theme_studio/theme_studio_panel.dart
SingleChildScrollViewactionsparameter6 files
2026-01-26-remote-ui-controls-implementation.md
Remote UI controls implementation plan documentationdocs/plans/2026-01-26-remote-ui-controls-implementation.md
protection
2026-01-20-remote-read-only-mode-usage.md
Remote read-only mode usage guide and Thai localizationdocs/plans/2026-01-20-remote-read-only-mode-usage.md
app_th.arb
Thai localization for remote view mode bannerlib/l10n/app_th.arb
remoteViewModeActivemessage2026-01-26-remote-ui-controls-design.md
Remote UI Controls Protection Design Documentdocs/plans/2026-01-26-remote-ui-controls-design.md
protection to UI layer
and form mode (deferred save)
RemoteAwareSwitchcomponent for wrapping switches thattrigger immediate JNAP operations
UiKitBottomBarConfigenhancement withcheckRemoteReadOnlyparameter to auto-disable Save buttons
migration guide
2026-01-26-switch-replacement-catalog.md
AppSwitch Usage Analysis and Replacement Catalogdocs/plans/2026-01-26-switch-replacement-catalog.md
AppSwitchusages across the codebaserequiring replacement), FORM mode (13 auto-protected), and UI-only (4
no action needed)
purpose, JNAP impact, and recommended action
switches
2026-01-26-remote-ui-controls-verification.md
Remote UI Controls Implementation Verification Reportdocs/verification/2026-01-26-remote-ui-controls-verification.md
controls protection
RemoteAwareSwitchcomponent andUiKitBottomBarConfigenhancementauto-protected
25 files
app_el.arb
Greek Localization for Remote View Mode Bannerlib/l10n/app_el.arb
remoteViewModeActivekey: "Λειτουργίααπομακρυσμένης προβολής - Οι αλλαγές ρυθμίσεων είναι
απενεργοποιημένες"
app_ja.arb
Japanese Localization for Remote View Mode Bannerlib/l10n/app_ja.arb
remoteViewModeActivekey: "リモート表示モード -設定変更は無効になっています"
app_pl.arb
Polish Localization for Remote View Mode Bannerlib/l10n/app_pl.arb
remoteViewModeActivekey: "Tryb zdalnegowyświetlania - Zmiany ustawień są wyłączone"
app_tr.arb
Turkish Localization for Remote View Mode Bannerlib/l10n/app_tr.arb
remoteViewModeActivekey: "UzaktanGörüntüleme Modu - Ayar değişiklikleri devre dışı"
app_vi.arb
Vietnamese Localization for Remote View Mode Bannerlib/l10n/app_vi.arb
remoteViewModeActivekey: "Chế độ xemtừ xa - Thay đổi cài đặt bị vô hiệu hóa"
app_fi.arb
Finnish Localization for Remote View Mode Bannerlib/l10n/app_fi.arb
remoteViewModeActivekey: "Etäkatselutila- Asetusten muuttaminen on poistettu käytöstä"
app_ar.arb
Arabic Localization for Remote View Mode Bannerlib/l10n/app_ar.arb
remoteViewModeActivekey: "وضع العرض عنبُعد - تغييرات الإعدادات معطلة"
app_ko.arb
Korean Localization for Remote View Mode Bannerlib/l10n/app_ko.arb
remoteViewModeActivekey: "원격 보기 모드 - 설정변경이 비활성화되었습니다"
app_fr_ca.arb
Canadian French Localization for Remote View Mode Bannerlib/l10n/app_fr_ca.arb
remoteViewModeActivekey: "Modeaffichage à distance - Les modifications de paramètres sont
désactivées"
app_zh_TW.arb
Traditional Chinese Localization for Remote View Mode Bannerlib/l10n/app_zh_TW.arb
remoteViewModeActivekey:"遠端檢視模式 - 無法修改設定"
app_ru.arb
Russian Localization for Remote View Mode Bannerlib/l10n/app_ru.arb
remoteViewModeActivekey: "Режимудаленного просмотра - Изменение настроек отключено"
app_sv.arb
Swedish Localization for Remote View Mode Bannerlib/l10n/app_sv.arb
remoteViewModeActivekey:"Fjärrvisningsläge - Inställningsändringar är inaktiverade"
app_da.arb
Danish Localization for Remote View Mode Bannerlib/l10n/app_da.arb
remoteViewModeActivekey: "Fjernsyntilstand - Indstillingsændringer er deaktiveret"
app_pt_pt.arb
European Portuguese Localization for Remote View Mode Bannerlib/l10n/app_pt_pt.arb
remoteViewModeActivekey:"Modo de visualização remota - As alterações de configuração estão
desativadas"
app_it.arb
Italian Localization for Remote View Mode Bannerlib/l10n/app_it.arb
remoteViewModeActivekey: "Modalitàvisualizzazione remota - Le modifiche alle impostazioni sono
disabilitate"
app_fr.arb
French Localization for Remote View Mode Bannerlib/l10n/app_fr.arb
remoteViewModeActivekey: "Mode affichageà distance - Les modifications de paramètres sont désactivées"
app_pt.arb
Brazilian Portuguese Localization for Remote View Mode Bannerlib/l10n/app_pt.arb
remoteViewModeActivekey:"Modo de visualização remota - As alterações de configuração estão
desativadas"
app_nb.arb
Norwegian Bokmål Localization for Remote View Mode Bannerlib/l10n/app_nb.arb
remoteViewModeActivekey:"Ekstern visningsmodus - Innstillingsendringer er deaktivert"
app_es.arb
Spanish Localization for Remote View Mode Bannerlib/l10n/app_es.arb
remoteViewModeActivekey: "Modo devisualización remota - Los cambios de configuración están
deshabilitados"
app_es_ar.arb
Argentine Spanish Localization for Remote View Mode Bannerlib/l10n/app_es_ar.arb
remoteViewModeActivekey: "Modode visualización remota - Los cambios de configuración están
deshabilitados"
app_nl.arb
Dutch Localization for Remote View Mode Bannerlib/l10n/app_nl.arb
remoteViewModeActivekey: "Externeweergavemodus - Instellingswijzigingen zijn uitgeschakeld"
app_de.arb
German Localization for Remote View Mode Bannerlib/l10n/app_de.arb
remoteViewModeActivekey:"Fernansichtsmodus - Einstellungsänderungen sind deaktiviert"
app_id.arb
Indonesian Localization for Remote View Mode Bannerlib/l10n/app_id.arb
remoteViewModeActivekey: "ModeTampilan Jarak Jauh - Perubahan pengaturan dinonaktifkan"
app_zh.arb
Simplified Chinese Localization for Remote View Mode Bannerlib/l10n/app_zh.arb
remoteViewModeActivekey:"远程查看模式 - 无法修改设置"
app_en.arb
English Localization for Remote View Mode Bannerlib/l10n/app_en.arb
remoteViewModeActivekey: "Remote ViewMode - Setting changes are disabled"