From 2158a330613204a0b3e75662c42d387f4907c4e3 Mon Sep 17 00:00:00 2001
From: Tyler Kron <tylerkron@gmail.com>
Date: Sat, 18 Apr 2026 13:01:24 -0600
Subject: [PATCH 1/4] feat: unified Devices pane matching design philosophy

Redesigns the Devices tab as a tile grid with an inline settings drawer,
replacing the ListView + MahApps DevicesFlyout. Follows the Channels pane
pattern from #479: dark surfaces, USB (cyan) / WiFi (purple) type-coded
stripes, direct tile click opens a right-side drawer with Information /
Data Acquisition / Network / Firmware / Actions sections. Shell-owned
state (firmware path/progress, logging mode, SD format) is exposed via a
Shell passthrough on DevicesPaneViewModel so the drawer binds directly
without cross-VM hops. Removes the now-dead IsDeviceSettingsOpen flag and
OpenDeviceSettings command from DaqifiViewModel.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 Daqifi.Desktop/MainWindow.xaml                | 101 +--
 .../View/Flyouts/DevicesFlyout.xaml           | 534 -------------
 .../View/Flyouts/DevicesFlyout.xaml.cs        |  12 -
 .../View/Prototype/DevicesPanePrototype.xaml  | 756 ++++++++++++++++++
 .../Prototype/DevicesPanePrototype.xaml.cs    |  50 ++
 Daqifi.Desktop/ViewModels/DaqifiViewModel.cs  |  18 -
 .../ViewModels/DeviceTileViewModel.cs         | 116 +++
 .../ViewModels/DevicesPaneViewModel.cs        | 192 +++++
 8 files changed, 1115 insertions(+), 664 deletions(-)
 delete mode 100644 Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml
 delete mode 100644 Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml.cs
 create mode 100644 Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
 create mode 100644 Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
 create mode 100644 Daqifi.Desktop/ViewModels/DeviceTileViewModel.cs
 create mode 100644 Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs

diff --git a/Daqifi.Desktop/MainWindow.xaml b/Daqifi.Desktop/MainWindow.xaml
index 19b1cbc6..060a7afe 100644
--- a/Daqifi.Desktop/MainWindow.xaml
+++ b/Daqifi.Desktop/MainWindow.xaml
@@ -139,9 +139,6 @@
             <!-- Live Graph Flyout -->
             <flyouts:LiveGraphFlyout DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=controls:MetroWindow}}"/>
 
-            <!-- Devices Flyout-->
-            <flyouts:DevicesFlyout DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=controls:MetroWindow}}"/>
-
             <!-- Update Profile Flyout -->
             <flyouts:UpdateProfileFlyout DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=controls:MetroWindow}}"/>
 
@@ -978,103 +975,7 @@
                 <ContentPresenter Content="{Binding}">
                     <ContentPresenter.ContentTemplate>
                         <DataTemplate>
-                            <Grid>
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="*"/>
-                                    <ColumnDefinition Width="Auto"/>
-                                </Grid.ColumnDefinitions>
-                                <ListView Name="ConnectedDeviceList" ItemsSource="{Binding ConnectedDevices}" SelectionMode="Single" Background="Transparent" BorderThickness="0" Grid.Column="0" SelectedItem="{Binding SelectedDevice, Mode=TwoWay}">
-                                    <ListView.ItemTemplate>
-                                        <DataTemplate>
-                                            <Border >
-                                                <Grid>
-                                                    <Grid.ColumnDefinitions>
-                                                        <ColumnDefinition Width="Auto"/>
-                                                        <ColumnDefinition Width="*"/>
-                                                    </Grid.ColumnDefinitions>
-                                                    <Image Grid.Column="0" Source="../Images/1Nq.png" Width="50" Height="50"/>
-                                                    <Grid Grid.Column="1">
-                                                        <Grid.RowDefinitions>
-                                                            <RowDefinition Height="Auto"/>
-                                                            <RowDefinition Height="Auto"/>
-                                                            <RowDefinition Height="Auto"/>
-                                                        </Grid.RowDefinitions>
-                                                        <Grid.ColumnDefinitions>
-                                                            <ColumnDefinition Width="*"/>
-                                                            <ColumnDefinition Width="Auto"/>
-                                                            <ColumnDefinition Width="Auto"/>
-                                                            <ColumnDefinition Width="Auto"/>
-                                                            <ColumnDefinition Width="Auto"/>
-
-                                                        </Grid.ColumnDefinitions>
-                                                        <StackPanel   Grid.Column="0" Grid.Row="0" Margin="5"  Orientation="Vertical">
-                                                            <Label Content="{Binding Name}"  Padding="0"/>
-                                                            <Label Content="{Binding DisplayIdentifier}" FontSize="10" Padding="0"/>
-                                                            <Label Content="{Binding DeviceSerialNo}" FontSize="10"  Padding="0"/>
-                                                            <TextBlock FontSize="10" Padding="0" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Label}}">
-                                                                    <Run Text="Firmware version :" />
-                                                                    <Run Text="{Binding DeviceVersion}" />
-                                                            </TextBlock>
-
-                                                        </StackPanel>
-                                                        <Button Grid.RowSpan="3" Grid.Column="1"
-                                                                HorizontalAlignment="Right" VerticalAlignment="Bottom"
-                                                                Command="{Binding ElementName=ConnectedDeviceList, Path=DataContext.OpenFirmwareUpdateSettingsCommand}"
-                                                                CommandParameter="{Binding}"
-                                                                ToolTip="Update Firmware"
-                                                                Visibility="{Binding IsFirmwareOutdated, Converter={StaticResource BoolToVis}}">
-                                                            <Button.Content>
-                                                                <iconPacks:PackIconMaterial Kind="Update" HorizontalAlignment="Center" Height="20" Width="20"/>
-                                                            </Button.Content>
-                                                        </Button>
-
-                                                        <Button Grid.RowSpan="3" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Command="{Binding ElementName=ConnectedDeviceList, Path=DataContext.OpenDeviceSettingsCommand}" CommandParameter="{Binding}" ToolTip="Device Settings">
-                                                            <Button.Content>
-                                                                <iconPacks:PackIconMaterial Kind="Cog" HorizontalAlignment="Center" Height="20" Width="20"/>
-                                                            </Button.Content>
-                                                        </Button>
-                                                        <Button Grid.RowSpan="3" Grid.Column="3" HorizontalAlignment="Right" VerticalAlignment="Bottom" Command="{Binding ElementName=ConnectedDeviceList, Path=DataContext.DisconnectDeviceCommand}" CommandParameter="{Binding}" ToolTip="Disconnect From Device">
-                                                            <Button.Content>
-                                                                <iconPacks:PackIconMaterial Kind="TrashCanOutline" HorizontalAlignment="Center" Height="20" Width="20"/>
-                                                            </Button.Content>
-                                                        </Button>
-                                                        <Button Grid.RowSpan="3" Grid.Column="4" HorizontalAlignment="Right" VerticalAlignment="Bottom" Command="{Binding ElementName=ConnectedDeviceList, Path=DataContext.RebootDeviceCommand}" CommandParameter="{Binding}" ToolTip="Reboot Device">
-                                                            <Button.Content>
-                                                                <iconPacks:PackIconMaterial Kind="Power" HorizontalAlignment="Center" Height="20" Width="20"/>
-                                                            </Button.Content>
-                                                        </Button>
-                                                    </Grid>
-                                                </Grid>
-                                            </Border>
-                                        </DataTemplate>
-                                    </ListView.ItemTemplate>
-                                </ListView>
-                                <Border Name="EmptyDeviceListLabel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Visibility="Collapsed">
-                                    <Label HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" VerticalContentAlignment="Center" >
-                                        <Label.Content>
-                                            <StackPanel>
-                                                <Label Content="No Devices Connected" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
-                                            </StackPanel>
-                                        </Label.Content>
-                                    </Label>
-                                </Border>
-
-                                <!-- Add Device Button -->
-                                <Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="50" Height="50" Command="{Binding ShowConnectionDialogCommand}" Style="{DynamicResource MetroCircleButtonStyle}" Margin="10" Background="#CC119EDA" >
-                                    <Button.Content>
-                                        <iconPacks:PackIconMaterial Kind="Plus" HorizontalAlignment="Center" Height="20" Width="20 " Foreground="White"/>
-                                    </Button.Content>
-                                    <Button.BitmapEffect>
-                                        <DropShadowBitmapEffect Color="Black" Direction="270" Softness="1" ShadowDepth="15" Opacity="0.25" />
-                                    </Button.BitmapEffect>
-                                </Button>
-                            </Grid>
-                            <DataTemplate.Triggers>
-                                <DataTrigger Binding="{Binding ConnectedDevices.Count}" Value="0">
-                                    <Setter TargetName="ConnectedDeviceList" Property="Visibility" Value="Collapsed"/>
-                                    <Setter TargetName="EmptyDeviceListLabel" Property="Visibility" Value="Visible"/>
-                                </DataTrigger>
-                            </DataTemplate.Triggers>
+                            <prototype:DevicesPanePrototype/>
                         </DataTemplate>
                     </ContentPresenter.ContentTemplate>
                 </ContentPresenter>
diff --git a/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml b/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml
deleted file mode 100644
index fe9ce309..00000000
--- a/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml
+++ /dev/null
@@ -1,534 +0,0 @@
-<Controls:Flyout x:Class="Daqifi.Desktop.View.Flyouts.DevicesFlyout"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
-             xmlns:vm="clr-namespace:Daqifi.Desktop.ViewModels"
-             xmlns:networkDataModel="clr-namespace:Daqifi.Core.Device.Network;assembly=Daqifi.Core"
-             xmlns:sys="clr-namespace:System;assembly=mscorlib" 
-             xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
-             xmlns:local="clr-namespace:Daqifi.Desktop.Converters"
-             xmlns:converters="clr-namespace:Daqifi.Desktop.Converters"
-             xmlns:sdCard="clr-namespace:Daqifi.Core.Device.SdCard;assembly=Daqifi.Core"
-             mc:Ignorable="d" 
-             d:DataContext="{d:DesignInstance Type=vm:DaqifiViewModel}"
-             Position="Right"
-             Theme="Dark"
-             IsPinned="True"
-             Width="{Binding FlyoutWidth}"
-             Height="{Binding FlyoutHeight}"
-             Background="#1E1E1E"
-             IsOpen="{Binding IsDeviceSettingsOpen, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
-    
-    <Controls:Flyout.Resources>
-        <!-- Color Constants -->
-        <Color x:Key="AccentColor">#4B8FE2</Color>
-        <Color x:Key="BackgroundColor">#333333</Color>
-        <Color x:Key="HeaderBackgroundColor">#2D2D30</Color>
-        
-        <!-- Brushes -->
-        <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>
-        <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>
-        <SolidColorBrush x:Key="HeaderBackgroundBrush" Color="{StaticResource HeaderBackgroundColor}"/>
-        
-        <!-- Data Providers -->
-        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="SdCardLogFormats">
-            <ObjectDataProvider.MethodParameters>
-                <x:Type TypeName="sdCard:SdCardLogFormat" />
-            </ObjectDataProvider.MethodParameters>
-        </ObjectDataProvider>
-        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="WifiModes">
-            <ObjectDataProvider.MethodParameters>
-                <x:Type TypeName="networkDataModel:WifiMode" />
-            </ObjectDataProvider.MethodParameters>
-        </ObjectDataProvider>
-        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="WifiSecurityTypes">
-            <ObjectDataProvider.MethodParameters>
-                <x:Type TypeName="networkDataModel:WifiSecurityType" />
-            </ObjectDataProvider.MethodParameters>
-        </ObjectDataProvider>
-        
-        <!-- Converters -->
-        <local:BoolToConnectionStatusConverter x:Key="BoolToConnectionStatus"/>
-        <local:BoolToStatusColorConverter x:Key="BoolToStatusColor"/>
-        <BooleanToVisibilityConverter x:Key="BoolToVis"/>
-        <converters:ConnectionTypeToUsbConverter x:Key="ConnectionTypeToUsbConverter"/>
-        <local:InvertedBoolToVisibilityConverter x:Key="InvertedBoolToVis" />
-        
-        <!-- Text Styles -->
-        <Style x:Key="HeaderTextBlockStyle" TargetType="TextBlock">
-            <Setter Property="FontSize" Value="24"/>
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="VerticalAlignment" Value="Center"/>
-        </Style>
-        
-        <Style x:Key="SubHeaderTextBlockStyle" TargetType="TextBlock">
-            <Setter Property="FontSize" Value="12"/>
-            <Setter Property="Foreground" Value="#CCCCCC"/>
-            <Setter Property="VerticalAlignment" Value="Center"/>
-        </Style>
-        
-        <Style x:Key="SectionHeaderStyle" TargetType="TextBlock">
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>
-            <Setter Property="Margin" Value="0,0,0,10"/>
-        </Style>
-
-        <Style x:Key="FormLabelStyle" TargetType="TextBlock">
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>
-            <Setter Property="Margin" Value="0,0,0,8"/>
-        </Style>
-        
-        <!-- Control Templates -->
-        <ControlTemplate x:Key="ComboBoxToggleTemplate" TargetType="ToggleButton">
-            <Border Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}">
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="30"/>
-                    </Grid.ColumnDefinitions>
-                    <ContentPresenter Grid.Column="0"
-                                    Content="{Binding Path=SelectionBoxItem, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    ContentTemplate="{Binding Path=SelectionBoxItemTemplate, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Margin="10,0"
-                                    VerticalAlignment="Center"/>
-                    <Path Grid.Column="1" 
-                          Data="M0,0 L8,8 L16,0" 
-                          Stroke="White"
-                          StrokeThickness="2"
-                          VerticalAlignment="Center"
-                          HorizontalAlignment="Center"/>
-                </Grid>
-            </Border>
-            <ControlTemplate.Triggers>
-                <Trigger Property="IsMouseOver" Value="True">
-                    <Setter Property="Background" Value="#404040"/>
-                </Trigger>
-                <Trigger Property="IsChecked" Value="True">
-                    <Setter Property="Background" Value="#404040"/>
-                </Trigger>
-            </ControlTemplate.Triggers>
-        </ControlTemplate>
-
-        <!-- Control Styles -->
-        <Style x:Key="TabControlStyle" TargetType="TabControl">
-            <Setter Property="Background" Value="Transparent"/>
-            <Setter Property="BorderThickness" Value="0"/>
-            <Setter Property="Padding" Value="0"/>
-            <Setter Property="Margin" Value="0"/>
-        </Style>
-
-        <Style x:Key="TabItemStyle" TargetType="TabItem">
-            <Setter Property="Background" Value="Transparent"/>
-            <Setter Property="BorderThickness" Value="0"/>
-            <Setter Property="Foreground" Value="#999999"/>
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="Height" Value="40"/>
-            <Setter Property="MinWidth" Value="125"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="TabItem">
-                        <Border Name="Border" 
-                                Background="Transparent"
-                                BorderThickness="0,0,0,1" 
-                                BorderBrush="{StaticResource BackgroundBrush}"
-                                Height="40">
-                            <Grid>
-                                <Border Name="SelectedBorder"
-                                        BorderThickness="0,0,0,2"
-                                        BorderBrush="Transparent"
-                                        VerticalAlignment="Bottom">
-                                    <ContentPresenter x:Name="ContentSite"
-                                                    VerticalAlignment="Center"
-                                                    HorizontalAlignment="Center"
-                                                    ContentSource="Header"
-                                                    RecognizesAccessKey="True"/>
-                                </Border>
-                            </Grid>
-                        </Border>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsSelected" Value="True">
-                                <Setter TargetName="SelectedBorder" Property="BorderBrush" Value="{StaticResource AccentBrush}"/>
-                                <Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>
-                            </Trigger>
-                            <Trigger Property="IsSelected" Value="False">
-                                <Setter Property="Foreground" Value="#999999"/>
-                            </Trigger>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="Foreground" Value="White"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource MahApps.Styles.Button}">
-            <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="BorderThickness" Value="0"/>
-            <Setter Property="Height" Value="35"/>
-            <Setter Property="MinWidth" Value="80"/>
-            <Setter Property="Padding" Value="15,0"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <Border Background="{TemplateBinding Background}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="2">
-                            <ContentPresenter HorizontalAlignment="Center" 
-                                            VerticalAlignment="Center"/>
-                        </Border>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-        
-        <Style x:Key="AccentButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
-            <Setter Property="Background" Value="{StaticResource AccentBrush}"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <Border x:Name="PART_Border"
-                                Background="{TemplateBinding Background}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="2">
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal"/>
-                                    <VisualState x:Name="MouseOver">
-                                        <Storyboard>
-                                            <!-- Optional: Add slight highlight on hover -->
-                                            <ColorAnimation Storyboard.TargetName="PART_Border" 
-                                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
-                                                            To="#5F9EEA" Duration="0:0:0.1"/> 
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="Pressed">
-                                        <Storyboard>
-                                            <ColorAnimation Storyboard.TargetName="PART_Border" 
-                                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
-                                                            To="#3A7BC8" Duration="0:0:0.05"/>
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="Disabled">
-                                        <Storyboard>
-                                            <ColorAnimation Storyboard.TargetName="PART_Border" 
-                                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
-                                                            To="#666666" Duration="0:0:0.1"/>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                            </VisualStateManager.VisualStateGroups>
-                            <ContentPresenter HorizontalAlignment="Center" 
-                                            VerticalAlignment="Center"/>
-                        </Border>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Input Control Styles -->
-        <Style x:Key="TextBoxStyle" TargetType="TextBox">
-            <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="BorderThickness" Value="0"/>
-            <Setter Property="Height" Value="35"/>
-            <Setter Property="Padding" Value="10,0"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
-        </Style>
-
-        <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
-            <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="BorderThickness" Value="0"/>
-            <Setter Property="Height" Value="35"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="ComboBox">
-                        <Grid>
-                            <ToggleButton x:Name="ToggleButton"
-                                        Background="{TemplateBinding Background}"
-                                        BorderBrush="{TemplateBinding BorderBrush}"
-                                        BorderThickness="{TemplateBinding BorderThickness}"
-                                        IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                        Template="{StaticResource ComboBoxToggleTemplate}"/>
-                            <Popup x:Name="PART_Popup"
-                                   IsOpen="{TemplateBinding IsDropDownOpen}"
-                                   AllowsTransparency="True"
-                                   Placement="Bottom"
-                                   PopupAnimation="Slide"
-                                   PlacementTarget="{Binding ElementName=ToggleButton}">
-                                <Border Background="{StaticResource BackgroundBrush}"
-                                        BorderThickness="0">
-                                    <ScrollViewer MaxHeight="200" 
-                                                VerticalScrollBarVisibility="Auto">
-                                        <StackPanel IsItemsHost="True"/>
-                                    </ScrollViewer>
-                                </Border>
-                            </Popup>
-                        </Grid>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-            <Style.Resources>
-                <Style TargetType="ComboBoxItem">
-                    <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
-                    <Setter Property="Foreground" Value="White"/>
-                    <Setter Property="Height" Value="35"/>
-                    <Setter Property="Template">
-                        <Setter.Value>
-                            <ControlTemplate TargetType="ComboBoxItem">
-                                <Border x:Name="Border"
-                                        Background="{TemplateBinding Background}"
-                                        Padding="10,0">
-                                    <Grid>
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="Auto"/>
-                                            <ColumnDefinition Width="*"/>
-                                        </Grid.ColumnDefinitions>
-                                        <ContentPresenter Grid.Column="0" VerticalAlignment="Center"/>
-                                        <TextBlock x:Name="DisabledMessage"
-                                                 Grid.Column="1"
-                                                 Text="(WiFi Connection - SD Card Not Available)"
-                                                 Foreground="#999999"
-                                                 FontStyle="Italic"
-                                                 VerticalAlignment="Center"
-                                                 HorizontalAlignment="Right"
-                                                 Margin="10,0,0,0"
-                                                 Visibility="Collapsed"/>
-                                    </Grid>
-                                </Border>
-                                <ControlTemplate.Triggers>
-                                    <Trigger Property="IsMouseOver" Value="True">
-                                        <Setter Property="Background" Value="#404040"/>
-                                    </Trigger>
-                                    <Trigger Property="IsSelected" Value="True">
-                                        <Setter Property="Background" Value="{StaticResource AccentBrush}"/>
-                                    </Trigger>
-                                    <Trigger Property="IsEnabled" Value="False">
-                                        <Setter Property="Foreground" Value="#999999"/>
-                                        <Setter TargetName="DisabledMessage" Property="Visibility" Value="Visible"/>
-                                    </Trigger>
-                                </ControlTemplate.Triggers>
-                            </ControlTemplate>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-            </Style.Resources>
-        </Style>
-    </Controls:Flyout.Resources>
-
-    <DockPanel LastChildFill="True">
-        <!-- Header with Device Info -->
-        <Grid DockPanel.Dock="Top" Background="{StaticResource HeaderBackgroundBrush}">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto"/>
-                <RowDefinition Height="Auto"/>
-            </Grid.RowDefinitions>
-            
-            <TextBlock Text="{Binding SelectedDevice.DevicePartNumber}" 
-                      FontSize="24" 
-                      Foreground="White" 
-                      FontWeight="Light"/>
-            
-            <StackPanel Grid.Row="1" 
-                        Orientation="Horizontal" 
-                        Margin="0,5,0,0">
-                <TextBlock Text="{Binding SelectedDevice.DeviceSerialNo}" 
-                          Foreground="#CCCCCC" 
-                          FontSize="14"/>
-                <TextBlock Text=" | v" 
-                          Foreground="#CCCCCC" 
-                          FontSize="14" 
-                          Margin="10,0"/>
-                <TextBlock Text="{Binding SelectedDevice.DeviceVersion}" 
-                          Foreground="#CCCCCC" 
-                          FontSize="14"/>
-                <TextBlock Text=" | " 
-                          Foreground="#CCCCCC" 
-                          FontSize="14" 
-                          Margin="10,0"/>
-                <TextBlock Text="{Binding SelectedDevice.IsConnected, Converter={StaticResource BoolToConnectionStatus}}"
-                          Foreground="{Binding SelectedDevice.IsConnected, Converter={StaticResource BoolToStatusColor}}"
-                          FontSize="14"/>
-            </StackPanel>
-        </Grid>
-
-        <!-- Main Content -->
-        <TabControl Style="{StaticResource TabControlStyle}">
-            <TabItem Header="DATA ACQUISITION" Style="{StaticResource TabItemStyle}">
-                <ScrollViewer VerticalScrollBarVisibility="Auto">
-                    <StackPanel Margin="20">
-                        <!-- Logging Mode -->
-                        <TextBlock Text="LOGGING MODE" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <ComboBox Style="{StaticResource ComboBoxStyle}"
-                                 Margin="0,0,0,20"
-                                 SelectedValue="{Binding SelectedLoggingMode, Mode=TwoWay}"
-                                 SelectedValuePath="Content">
-                            <ComboBoxItem Content="Stream to App"/>
-                            <ComboBoxItem Content="Log to Device" 
-                                         IsEnabled="{Binding SelectedDevice.ConnectionType, 
-                                                   Converter={StaticResource ConnectionTypeToUsbConverter}}">
-                                <ComboBoxItem.ToolTip>
-                                    <ToolTip Background="#333333" 
-                                            Foreground="White"
-                                            BorderBrush="#4B8FE2">
-                                        <TextBlock Text="SD Card logging requires a USB connection. WiFi devices do not support SD card logging."
-                                                 TextWrapping="Wrap"
-                                                 MaxWidth="250"/>
-                                    </ToolTip>
-                                </ComboBoxItem.ToolTip>
-                            </ComboBoxItem>
-                        </ComboBox>
-
-                        <!-- Sampling Configuration -->
-                        <TextBlock Text="SAMPLING CONFIGURATION" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <TextBlock Text="Frequency (Hz)" 
-                                 Foreground="White" 
-                                 Margin="0,0,0,5"/>
-                        <Grid Margin="0,0,0,20">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto"/>
-                                <ColumnDefinition Width="*"/>
-                            </Grid.ColumnDefinitions>
-                            <TextBox Text="{Binding ElementName=FrequencySlider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
-                                    Style="{StaticResource TextBoxStyle}"
-                                    Width="80"
-                                    FontSize="20"
-                                    TextAlignment="Center"
-                                    Margin="0,0,10,0"/>
-                            <Slider Grid.Column="1"
-                                   Name="FrequencySlider"
-                                   Minimum="1" 
-                                   Maximum="1000"
-                                   TickFrequency="1"
-                                   IsSnapToTickEnabled="True"
-                                   Value="{Binding SelectedDevice.StreamingFrequency, Delay=500, UpdateSourceTrigger=PropertyChanged}"/>
-                        </Grid>
-
-                        <!-- Data Format (visible only when logging to device) -->
-                        <TextBlock Text="DATA FORMAT"
-                                 Style="{StaticResource SectionHeaderStyle}"
-                                 Margin="0,0,0,10"
-                                 Visibility="{Binding IsLogToDeviceMode, Converter={StaticResource BoolToVis}}"/>
-                        <ComboBox Style="{StaticResource ComboBoxStyle}"
-                                 Margin="0,0,0,20"
-                                 ItemsSource="{Binding Source={StaticResource SdCardLogFormats}}"
-                                 SelectedItem="{Binding SelectedSdCardLogFormat, Mode=TwoWay}"
-                                 Visibility="{Binding IsLogToDeviceMode, Converter={StaticResource BoolToVis}}"/>
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>
-
-            <TabItem Header="NETWORK" Style="{StaticResource TabItemStyle}">
-                <ScrollViewer VerticalScrollBarVisibility="Auto">
-                    <StackPanel Margin="20">
-                        <TextBlock Text="WIFI MODE" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <ComboBox Style="{StaticResource ComboBoxStyle}"
-                                 Margin="0,0,0,20"
-                                 ItemsSource="{Binding Source={StaticResource WifiModes}}"
-                                 SelectedItem="{Binding SelectedDevice.NetworkConfiguration.Mode}">
-                            <ComboBox.ItemTemplate>
-                                <DataTemplate>
-                                    <TextBlock Text="{Binding Converter={StaticResource EnumDescription}}"/>
-                                </DataTemplate>
-                            </ComboBox.ItemTemplate>
-                        </ComboBox>
-
-                        <TextBlock Text="SECURITY TYPE" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <ComboBox Style="{StaticResource ComboBoxStyle}"
-                                 Margin="0,0,0,20"
-                                 ItemsSource="{Binding Source={StaticResource WifiSecurityTypes}}"
-                                 SelectedItem="{Binding SelectedDevice.NetworkConfiguration.SecurityType}">
-                            <ComboBox.ItemTemplate>
-                                <DataTemplate>
-                                    <TextBlock Text="{Binding Converter={StaticResource EnumDescription}}"/>
-                                </DataTemplate>
-                            </ComboBox.ItemTemplate>
-                        </ComboBox>
-
-                        <TextBlock Text="NETWORK SSID" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <TextBox Style="{StaticResource TextBoxStyle}"
-                                Margin="0,0,0,20"
-                                Text="{Binding SelectedDevice.NetworkConfiguration.Ssid, Mode=TwoWay}"/>
-
-                        <TextBlock Text="PASSWORD" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,10"/>
-                        <TextBox Style="{StaticResource TextBoxStyle}"
-                                Margin="0,0,0,20"
-                                Text="{Binding SelectedDevice.NetworkConfiguration.Password, Mode=TwoWay}"/>
-
-                        <Button Content="APPLY NETWORK SETTINGS"
-                                Style="{StaticResource AccentButtonStyle}"
-                                HorizontalAlignment="Right"
-                                Command="{Binding UpdateNetworkConfigurationCommand}"/>
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>
-
-            <TabItem Header="FIRMWARE" Style="{StaticResource TabItemStyle}">
-                <ScrollViewer VerticalScrollBarVisibility="Auto">
-                    <StackPanel Margin="20">
-                        <TextBlock Text="UPDATE DEVICE FIRMWARE" 
-                                 Style="{StaticResource SectionHeaderStyle}" 
-                                 Margin="0,0,0,15"/>
-                        
-                        <!-- Firmware Update Controls (Visible only for USB) -->
-                        <StackPanel Visibility="{Binding SelectedDeviceSupportsFirmwareUpdate, Converter={StaticResource BoolToVis}}">
-                            <DockPanel LastChildFill="True" Margin="0,0,0,15">
-                                <Button DockPanel.Dock="Right"
-                                        Content="browse"
-                                        Style="{StaticResource ButtonStyle}"
-                                        Margin="10,0,0,0"
-                                        Command="{Binding BrowseForFirmwareCommand}"/>
-                                <TextBox Style="{StaticResource TextBoxStyle}"
-                                         Text="{Binding FirmwareFilePath, Mode=TwoWay}"/>
-                            </DockPanel>
-
-                            <DockPanel LastChildFill="True">
-                                <Button DockPanel.Dock="Right"
-                                        Content="update"
-                                        Style="{StaticResource AccentButtonStyle}"
-                                        Margin="10,0,0,0"
-                                        Width="80"
-                                        Command="{Binding UploadFirmwareCommand}"/>
-                                <controls:MetroProgressBar Height="35"
-                                                         Background="#333333"
-                                                         Foreground="#4B8FE2"
-                                                         Minimum="0"
-                                                         Maximum="100"
-                                                         Value="{Binding UploadFirmwareProgress}"/>
-                            </DockPanel>
-                        </StackPanel>
-
-                        <!-- Informational Message (Visible only for non-USB) -->
-                        <TextBlock Text="Firmware updates require the device to be connected via USB." 
-                                   Foreground="#FFCC00" 
-                                   Margin="0,10,0,0"
-                                   TextWrapping="Wrap"
-                                   Visibility="{Binding SelectedDeviceSupportsFirmwareUpdate, Converter={StaticResource InvertedBoolToVis}}"/>
-
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>
-        </TabControl>
-    </DockPanel>
-</Controls:Flyout>
diff --git a/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml.cs b/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml.cs
deleted file mode 100644
index 17d9bfe5..00000000
--- a/Daqifi.Desktop/View/Flyouts/DevicesFlyout.xaml.cs
+++ /dev/null
@@ -1,12 +0,0 @@
-namespace Daqifi.Desktop.View.Flyouts;
-
-/// <summary>
-/// Interaction logic for DevicesFlyout.xaml
-/// </summary>
-public partial class DevicesFlyout
-{
-    public DevicesFlyout()
-    {
-        InitializeComponent();
-    }
-}
\ No newline at end of file
diff --git a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
new file mode 100644
index 00000000..e3be1690
--- /dev/null
+++ b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
@@ -0,0 +1,756 @@
+<UserControl x:Class="Daqifi.Desktop.View.Prototype.DevicesPanePrototype"
+             x:Name="Root"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:sys="clr-namespace:System;assembly=mscorlib"
+             xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
+             xmlns:vm="clr-namespace:Daqifi.Desktop.ViewModels"
+             xmlns:networkDataModel="clr-namespace:Daqifi.Core.Device.Network;assembly=Daqifi.Core"
+             xmlns:sdCard="clr-namespace:Daqifi.Core.Device.SdCard;assembly=Daqifi.Core"
+             mc:Ignorable="d"
+             d:DataContext="{d:DesignInstance Type=vm:DevicesPaneViewModel}"
+             d:DesignHeight="800" d:DesignWidth="1200">
+    <UserControl.Resources>
+
+        <SolidColorBrush x:Key="Surface" Color="#0D0F12"/>
+        <SolidColorBrush x:Key="SurfaceRaised" Color="#171A20"/>
+        <SolidColorBrush x:Key="SurfaceActive" Color="#1E2530"/>
+        <SolidColorBrush x:Key="BorderDim" Color="#2A2F38"/>
+        <SolidColorBrush x:Key="BorderBright" Color="#3A4252"/>
+        <SolidColorBrush x:Key="TextPrimary" Color="#F5F5F7"/>
+        <SolidColorBrush x:Key="TextSecondary" Color="#8E9199"/>
+        <SolidColorBrush x:Key="TextTertiary" Color="#5A5E66"/>
+        <SolidColorBrush x:Key="Accent" Color="#119EDA"/>
+        <SolidColorBrush x:Key="StatusGreen" Color="#4ADE80"/>
+        <SolidColorBrush x:Key="StatusAmber" Color="#F59E0B"/>
+        <SolidColorBrush x:Key="StatusRed" Color="#F43F5E"/>
+
+        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="SdCardLogFormats">
+            <ObjectDataProvider.MethodParameters>
+                <x:Type TypeName="sdCard:SdCardLogFormat"/>
+            </ObjectDataProvider.MethodParameters>
+        </ObjectDataProvider>
+        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="WifiModes">
+            <ObjectDataProvider.MethodParameters>
+                <x:Type TypeName="networkDataModel:WifiMode"/>
+            </ObjectDataProvider.MethodParameters>
+        </ObjectDataProvider>
+        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="WifiSecurityTypes">
+            <ObjectDataProvider.MethodParameters>
+                <x:Type TypeName="networkDataModel:WifiSecurityType"/>
+            </ObjectDataProvider.MethodParameters>
+        </ObjectDataProvider>
+
+        <Style x:Key="SectionLabel" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="11"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="Foreground" Value="{StaticResource TextSecondary}"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+        </Style>
+
+        <Style x:Key="DrawerSectionLabel" TargetType="TextBlock" BasedOn="{StaticResource SectionLabel}">
+            <Setter Property="Margin" Value="0,22,0,8"/>
+        </Style>
+
+        <Style x:Key="InfoLabel" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="10"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="Foreground" Value="{StaticResource TextTertiary}"/>
+            <Setter Property="Margin" Value="0,0,0,3"/>
+        </Style>
+
+        <Style x:Key="InfoValue" TargetType="TextBlock">
+            <Setter Property="FontFamily" Value="Consolas"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+        </Style>
+
+        <Style x:Key="PillButton" TargetType="Button">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderBrush" Value="{StaticResource BorderDim}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="Foreground" Value="{StaticResource TextSecondary}"/>
+            <Setter Property="Padding" Value="12,4"/>
+            <Setter Property="Margin" Value="0,0,6,0"/>
+            <Setter Property="FontSize" Value="10"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                CornerRadius="14"
+                                Padding="{TemplateBinding Padding}">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+            <Style.Triggers>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="BorderBrush" Value="{StaticResource BorderBright}"/>
+                    <Setter Property="Background" Value="#141821"/>
+                    <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <Style x:Key="AccentPillButton" TargetType="Button" BasedOn="{StaticResource PillButton}">
+            <Setter Property="Background" Value="{StaticResource Accent}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource Accent}"/>
+            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="Padding" Value="16,6"/>
+            <Style.Triggers>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="Background" Value="#1EB3F0"/>
+                    <Setter Property="BorderBrush" Value="#1EB3F0"/>
+                    <Setter Property="Foreground" Value="White"/>
+                </Trigger>
+                <Trigger Property="IsEnabled" Value="False">
+                    <Setter Property="Opacity" Value="0.4"/>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <Style x:Key="DangerPillButton" TargetType="Button" BasedOn="{StaticResource PillButton}">
+            <Setter Property="BorderBrush" Value="#4A1F28"/>
+            <Setter Property="Foreground" Value="{StaticResource StatusRed}"/>
+            <Style.Triggers>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="Background" Value="#2A0F14"/>
+                    <Setter Property="BorderBrush" Value="{StaticResource StatusRed}"/>
+                    <Setter Property="Foreground" Value="{StaticResource StatusRed}"/>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <Style x:Key="DrawerTextBox" TargetType="TextBox">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+            <Setter Property="FontFamily" Value="Consolas"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="VerticalContentAlignment" Value="Center"/>
+            <Setter Property="CaretBrush" Value="{StaticResource TextPrimary}"/>
+        </Style>
+
+        <Style x:Key="DrawerTextField" TargetType="Border">
+            <Setter Property="Background" Value="{StaticResource Surface}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource BorderDim}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="CornerRadius" Value="3"/>
+            <Setter Property="Padding" Value="10,0"/>
+        </Style>
+
+        <Style x:Key="DrawerComboBox" TargetType="ComboBox">
+            <Setter Property="Background" Value="{StaticResource Surface}"/>
+            <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource BorderDim}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="Padding" Value="10,0"/>
+        </Style>
+
+        <Style x:Key="SegmentedToggle" TargetType="RadioButton">
+            <Setter Property="Foreground" Value="{StaticResource TextSecondary}"/>
+            <Setter Property="FontSize" Value="10"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="RadioButton">
+                        <Border x:Name="Bg"
+                                Background="Transparent"
+                                CornerRadius="2"
+                                Padding="10,7">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsChecked" Value="True">
+                                <Setter TargetName="Bg" Property="Background" Value="{StaticResource SurfaceActive}"/>
+                                <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+                            </Trigger>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <DataTemplate x:Key="DeviceTileTemplate" DataType="{x:Type vm:DeviceTileViewModel}">
+            <Border Width="280" Height="116" Margin="0,0,12,12"
+                    Background="{Binding TileBackground}"
+                    BorderBrush="{Binding TileBorderBrush}"
+                    BorderThickness="1"
+                    CornerRadius="4">
+                <Border.InputBindings>
+                    <MouseBinding MouseAction="LeftClick"
+                                  Command="{Binding DataContext.OpenSettingsCommand, ElementName=Root}"
+                                  CommandParameter="{Binding}"/>
+                </Border.InputBindings>
+                <Border.Style>
+                    <Style TargetType="Border">
+                        <Setter Property="Cursor" Value="Hand"/>
+                        <Style.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="Opacity" Value="0.92"/>
+                            </Trigger>
+                        </Style.Triggers>
+                    </Style>
+                </Border.Style>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="3"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Rectangle Grid.Column="0" Fill="{Binding StripeBrush}"/>
+                    <Grid Grid.Column="1" Margin="14,12,12,12">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="*"/>
+                            <RowDefinition Height="Auto"/>
+                        </Grid.RowDefinitions>
+
+                        <!-- Name + connection chip -->
+                        <Grid Grid.Row="0">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            <TextBlock Grid.Column="0"
+                                       Text="{Binding Name}"
+                                       FontFamily="Consolas"
+                                       FontSize="18"
+                                       FontWeight="Medium"
+                                       Foreground="{StaticResource TextPrimary}"/>
+                            <Border Grid.Column="1"
+                                    Background="#141821"
+                                    BorderBrush="{Binding StripeBrush}"
+                                    BorderThickness="1"
+                                    CornerRadius="3"
+                                    Padding="6,2"
+                                    VerticalAlignment="Center">
+                                <TextBlock Text="{Binding ConnectionLabel}"
+                                           FontSize="9"
+                                           FontWeight="SemiBold"
+                                           Foreground="{Binding StripeBrush}"/>
+                            </Border>
+                        </Grid>
+
+                        <!-- Identity -->
+                        <StackPanel Grid.Row="1" Margin="0,6,0,0">
+                            <TextBlock Text="{Binding Identifier}"
+                                       FontFamily="Consolas"
+                                       FontSize="11"
+                                       Foreground="{StaticResource TextSecondary}"/>
+                            <TextBlock Text="{Binding SerialNumber}"
+                                       FontFamily="Consolas"
+                                       FontSize="11"
+                                       Margin="0,2,0,0"
+                                       Foreground="{StaticResource TextTertiary}"/>
+                        </StackPanel>
+
+                        <!-- Bottom row: firmware + gear -->
+                        <Grid Grid.Row="2">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+
+                            <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
+                                <TextBlock Text="FW"
+                                           FontSize="9"
+                                           FontWeight="SemiBold"
+                                           Foreground="{StaticResource TextTertiary}"
+                                           VerticalAlignment="Center"/>
+                                <TextBlock Text="{Binding Version}"
+                                           FontFamily="Consolas"
+                                           FontSize="11"
+                                           Margin="6,0,0,0"
+                                           Foreground="{StaticResource TextSecondary}"
+                                           VerticalAlignment="Center"/>
+                            </StackPanel>
+
+                            <Border Grid.Column="1"
+                                    Background="#2A1A0A"
+                                    BorderBrush="{StaticResource StatusAmber}"
+                                    BorderThickness="1"
+                                    CornerRadius="3"
+                                    Padding="6,2"
+                                    Margin="0,0,8,0"
+                                    VerticalAlignment="Center"
+                                    Visibility="{Binding IsFirmwareOutdated,
+                                                         Converter={StaticResource BoolToVis}}"
+                                    ToolTip="A firmware update is available for this device.">
+                                <TextBlock Text="UPDATE"
+                                           FontSize="9"
+                                           FontWeight="SemiBold"
+                                           Foreground="{StaticResource StatusAmber}"/>
+                            </Border>
+
+                            <Button Grid.Column="2"
+                                    Width="22" Height="22"
+                                    Padding="0"
+                                    Background="Transparent"
+                                    BorderThickness="0"
+                                    Cursor="Hand"
+                                    ToolTip="Device settings"
+                                    Command="{Binding DataContext.OpenSettingsCommand, ElementName=Root}"
+                                    CommandParameter="{Binding}">
+                                <Button.Template>
+                                    <ControlTemplate TargetType="Button">
+                                        <Border x:Name="Bg"
+                                                Background="Transparent"
+                                                CornerRadius="11">
+                                            <iconPacks:PackIconMaterial Kind="Cog"
+                                                                        Width="11" Height="11"
+                                                                        Foreground="{StaticResource TextTertiary}"
+                                                                        HorizontalAlignment="Center"
+                                                                        VerticalAlignment="Center"/>
+                                        </Border>
+                                        <ControlTemplate.Triggers>
+                                            <Trigger Property="IsMouseOver" Value="True">
+                                                <Setter TargetName="Bg" Property="Background" Value="#33000000"/>
+                                            </Trigger>
+                                        </ControlTemplate.Triggers>
+                                    </ControlTemplate>
+                                </Button.Template>
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Border>
+        </DataTemplate>
+
+        <ItemsPanelTemplate x:Key="TileWrap">
+            <WrapPanel/>
+        </ItemsPanelTemplate>
+
+    </UserControl.Resources>
+
+    <Grid Background="{StaticResource Surface}">
+
+        <!-- ========== CONNECTED STATE ========== -->
+        <Grid Visibility="{Binding HasConnectedDevice, Converter={StaticResource BoolToVis}}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+
+            <!-- Header -->
+            <StackPanel Grid.Row="0" Margin="28,22,28,14">
+                <TextBlock Text="DEVICES"
+                           FontSize="10"
+                           FontWeight="Bold"
+                           Foreground="{StaticResource TextTertiary}"
+                           Margin="0,0,0,2"/>
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock FontSize="24"
+                               FontWeight="Light"
+                               Foreground="{StaticResource TextPrimary}">
+                        <Run Text="{Binding Devices.Count, Mode=OneWay}"/>
+                        <Run Text=" CONNECTED"/>
+                    </TextBlock>
+                    <Ellipse Width="6" Height="6"
+                             Fill="{StaticResource StatusGreen}"
+                             VerticalAlignment="Center"
+                             Margin="14,4,0,0"/>
+                </StackPanel>
+            </StackPanel>
+
+            <!-- Tiles -->
+            <ScrollViewer Grid.Row="1"
+                          VerticalScrollBarVisibility="Auto"
+                          HorizontalScrollBarVisibility="Disabled"
+                          Padding="28,0,28,0">
+                <ItemsControl ItemsSource="{Binding Devices}"
+                              ItemTemplate="{StaticResource DeviceTileTemplate}"
+                              ItemsPanel="{StaticResource TileWrap}"
+                              Margin="0,0,0,24"/>
+            </ScrollViewer>
+
+            <!-- Status bar -->
+            <Border Grid.Row="2"
+                    Background="#0A0C10"
+                    BorderBrush="{StaticResource BorderDim}"
+                    BorderThickness="0,1,0,0"
+                    Padding="28,12">
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                        <Ellipse Width="7" Height="7"
+                                 Fill="{StaticResource StatusGreen}"
+                                 Margin="0,0,10,0"/>
+                        <TextBlock FontSize="10"
+                                   FontWeight="SemiBold"
+                                   Foreground="{StaticResource TextSecondary}"
+                                   VerticalAlignment="Center">
+                            <Run Text="{Binding Devices.Count, Mode=OneWay}"/>
+                            <Run Text=" DEVICES CONNECTED"/>
+                        </TextBlock>
+                    </StackPanel>
+                    <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
+                        <Button Style="{StaticResource AccentPillButton}"
+                                Content="+ ADD DEVICE"
+                                Command="{Binding AddDeviceCommand}"/>
+                    </StackPanel>
+                </Grid>
+            </Border>
+        </Grid>
+
+        <!-- ========== SETTINGS DRAWER ========== -->
+        <Grid Visibility="{Binding IsSettingsOpen, Converter={StaticResource BoolToVis}}"
+              Panel.ZIndex="10">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="420"/>
+            </Grid.ColumnDefinitions>
+
+            <!-- Scrim -->
+            <Rectangle Grid.Column="0" Fill="#A0000000">
+                <Rectangle.InputBindings>
+                    <MouseBinding MouseAction="LeftClick" Command="{Binding CloseSettingsCommand}"/>
+                </Rectangle.InputBindings>
+            </Rectangle>
+
+            <!-- Drawer -->
+            <Border Grid.Column="1"
+                    Background="{StaticResource SurfaceRaised}"
+                    BorderBrush="{StaticResource BorderDim}"
+                    BorderThickness="1,0,0,0">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- Header -->
+                    <Grid Grid.Row="0" Margin="22,22,16,18">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+                        <Rectangle Grid.Column="0"
+                                   Width="3" Height="32"
+                                   Fill="{Binding SelectedTile.StripeBrush}"
+                                   Margin="0,0,12,0"/>
+                        <StackPanel Grid.Column="1">
+                            <TextBlock Text="DEVICE"
+                                       FontSize="9"
+                                       FontWeight="Bold"
+                                       Foreground="{StaticResource TextTertiary}"/>
+                            <TextBlock Text="{Binding SelectedTile.Name}"
+                                       FontFamily="Consolas"
+                                       FontSize="20"
+                                       FontWeight="Medium"
+                                       Foreground="{StaticResource TextPrimary}"/>
+                        </StackPanel>
+                        <Button Grid.Column="2"
+                                Width="28" Height="28"
+                                Background="Transparent"
+                                BorderThickness="0"
+                                Foreground="{StaticResource TextSecondary}"
+                                FontSize="16"
+                                Cursor="Hand"
+                                Content="&#xD7;"
+                                Command="{Binding CloseSettingsCommand}">
+                            <Button.Template>
+                                <ControlTemplate TargetType="Button">
+                                    <Border x:Name="Bg" Background="Transparent" CornerRadius="14">
+                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                    </Border>
+                                    <ControlTemplate.Triggers>
+                                        <Trigger Property="IsMouseOver" Value="True">
+                                            <Setter TargetName="Bg" Property="Background" Value="#1FFFFFFF"/>
+                                        </Trigger>
+                                    </ControlTemplate.Triggers>
+                                </ControlTemplate>
+                            </Button.Template>
+                        </Button>
+                    </Grid>
+
+                    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" Padding="22,0,22,22">
+                        <StackPanel>
+
+                            <!-- INFORMATION -->
+                            <TextBlock Text="INFORMATION" Style="{StaticResource SectionLabel}" Margin="0,8,0,10"/>
+                            <Border Background="{StaticResource Surface}"
+                                    BorderBrush="{StaticResource BorderDim}"
+                                    BorderThickness="1"
+                                    CornerRadius="3"
+                                    Padding="14,12">
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="Auto"/>
+                                    </Grid.RowDefinitions>
+                                    <StackPanel Grid.Column="0" Grid.Row="0" Margin="0,0,0,10">
+                                        <TextBlock Text="CONNECTION" Style="{StaticResource InfoLabel}"/>
+                                        <TextBlock Text="{Binding SelectedTile.ConnectionLabel}"
+                                                   Style="{StaticResource InfoValue}"/>
+                                    </StackPanel>
+                                    <StackPanel Grid.Column="1" Grid.Row="0" Margin="0,0,0,10">
+                                        <TextBlock Text="IDENTIFIER" Style="{StaticResource InfoLabel}"/>
+                                        <TextBlock Text="{Binding SelectedTile.Identifier}"
+                                                   Style="{StaticResource InfoValue}"/>
+                                    </StackPanel>
+                                    <StackPanel Grid.Column="0" Grid.Row="1">
+                                        <TextBlock Text="SERIAL" Style="{StaticResource InfoLabel}"/>
+                                        <TextBlock Text="{Binding SelectedTile.SerialNumber}"
+                                                   Style="{StaticResource InfoValue}"/>
+                                    </StackPanel>
+                                    <StackPanel Grid.Column="1" Grid.Row="1">
+                                        <TextBlock Text="FIRMWARE" Style="{StaticResource InfoLabel}"/>
+                                        <TextBlock Text="{Binding SelectedTile.Version}"
+                                                   Style="{StaticResource InfoValue}"/>
+                                    </StackPanel>
+                                </Grid>
+                            </Border>
+
+                            <!-- DATA ACQUISITION -->
+                            <TextBlock Text="DATA ACQUISITION" Style="{StaticResource DrawerSectionLabel}"/>
+
+                            <TextBlock Text="LOGGING MODE" Style="{StaticResource InfoLabel}" Margin="0,0,0,6"/>
+                            <Border Background="{StaticResource Surface}"
+                                    BorderBrush="{StaticResource BorderDim}"
+                                    BorderThickness="1"
+                                    CornerRadius="3"
+                                    Padding="3">
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+                                    <RadioButton Grid.Column="0"
+                                                 Content="STREAM TO APP"
+                                                 GroupName="LoggingMode"
+                                                 IsChecked="{Binding Shell.IsLogToDeviceMode,
+                                                             Converter={StaticResource BooleanToInverse}, Mode=OneWay}"
+                                                 Style="{StaticResource SegmentedToggle}"
+                                                 Tag="Stream to App"
+                                                 Click="LoggingMode_Click"/>
+                                    <RadioButton Grid.Column="1"
+                                                 Content="LOG TO DEVICE"
+                                                 GroupName="LoggingMode"
+                                                 IsEnabled="{Binding SelectedTile.IsUsb}"
+                                                 IsChecked="{Binding Shell.IsLogToDeviceMode, Mode=OneWay}"
+                                                 Style="{StaticResource SegmentedToggle}"
+                                                 Tag="Log to Device"
+                                                 Click="LoggingMode_Click"
+                                                 ToolTip="SD card logging requires USB. WiFi devices do not support SD card logging."/>
+                                </Grid>
+                            </Border>
+
+                            <TextBlock Text="FREQUENCY (Hz)" Style="{StaticResource InfoLabel}" Margin="0,16,0,6"/>
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                </Grid.ColumnDefinitions>
+                                <Border Grid.Column="0"
+                                        Style="{StaticResource DrawerTextField}"
+                                        Width="80"
+                                        Margin="0,0,10,0">
+                                    <TextBox Text="{Binding ElementName=FrequencySlider, Path=Value,
+                                                     UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
+                                             Style="{StaticResource DrawerTextBox}"
+                                             TextAlignment="Center"
+                                             FontSize="16"/>
+                                </Border>
+                                <Slider Grid.Column="1"
+                                        x:Name="FrequencySlider"
+                                        Minimum="1" Maximum="1000"
+                                        TickFrequency="1"
+                                        IsSnapToTickEnabled="True"
+                                        VerticalAlignment="Center"
+                                        Value="{Binding SelectedDevice.StreamingFrequency,
+                                                Delay=500, UpdateSourceTrigger=PropertyChanged}"/>
+                            </Grid>
+
+                            <!-- DATA FORMAT (visible only when logging to device) -->
+                            <StackPanel Visibility="{Binding Shell.IsLogToDeviceMode,
+                                                     Converter={StaticResource BoolToVis}}">
+                                <TextBlock Text="DATA FORMAT" Style="{StaticResource InfoLabel}" Margin="0,16,0,6"/>
+                                <ComboBox Style="{StaticResource DrawerComboBox}"
+                                          ItemsSource="{Binding Source={StaticResource SdCardLogFormats}}"
+                                          SelectedItem="{Binding Shell.SelectedSdCardLogFormat, Mode=TwoWay}"/>
+                            </StackPanel>
+
+                            <!-- NETWORK -->
+                            <TextBlock Text="NETWORK" Style="{StaticResource DrawerSectionLabel}"/>
+
+                            <TextBlock Text="MODE" Style="{StaticResource InfoLabel}" Margin="0,0,0,6"/>
+                            <ComboBox Style="{StaticResource DrawerComboBox}"
+                                      ItemsSource="{Binding Source={StaticResource WifiModes}}"
+                                      SelectedItem="{Binding SelectedDevice.NetworkConfiguration.Mode}">
+                                <ComboBox.ItemTemplate>
+                                    <DataTemplate>
+                                        <TextBlock Text="{Binding Converter={StaticResource EnumDescription}}"/>
+                                    </DataTemplate>
+                                </ComboBox.ItemTemplate>
+                            </ComboBox>
+
+                            <TextBlock Text="SECURITY" Style="{StaticResource InfoLabel}" Margin="0,14,0,6"/>
+                            <ComboBox Style="{StaticResource DrawerComboBox}"
+                                      ItemsSource="{Binding Source={StaticResource WifiSecurityTypes}}"
+                                      SelectedItem="{Binding SelectedDevice.NetworkConfiguration.SecurityType}">
+                                <ComboBox.ItemTemplate>
+                                    <DataTemplate>
+                                        <TextBlock Text="{Binding Converter={StaticResource EnumDescription}}"/>
+                                    </DataTemplate>
+                                </ComboBox.ItemTemplate>
+                            </ComboBox>
+
+                            <TextBlock Text="SSID" Style="{StaticResource InfoLabel}" Margin="0,14,0,6"/>
+                            <Border Style="{StaticResource DrawerTextField}">
+                                <TextBox Style="{StaticResource DrawerTextBox}"
+                                         Text="{Binding SelectedDevice.NetworkConfiguration.Ssid, Mode=TwoWay}"/>
+                            </Border>
+
+                            <TextBlock Text="PASSWORD" Style="{StaticResource InfoLabel}" Margin="0,14,0,6"/>
+                            <Border Style="{StaticResource DrawerTextField}">
+                                <TextBox Style="{StaticResource DrawerTextBox}"
+                                         Text="{Binding SelectedDevice.NetworkConfiguration.Password, Mode=TwoWay}"/>
+                            </Border>
+
+                            <Button Style="{StaticResource AccentPillButton}"
+                                    Content="APPLY NETWORK SETTINGS"
+                                    HorizontalAlignment="Right"
+                                    Margin="0,14,0,0"
+                                    Command="{Binding Shell.UpdateNetworkConfigurationCommand}"/>
+
+                            <!-- FIRMWARE -->
+                            <TextBlock Text="FIRMWARE" Style="{StaticResource DrawerSectionLabel}"/>
+
+                            <!-- USB: file picker + upload -->
+                            <StackPanel Visibility="{Binding SelectedDeviceSupportsFirmwareUpdate,
+                                                     Converter={StaticResource BoolToVis}}">
+                                <TextBlock Text="FIRMWARE FILE" Style="{StaticResource InfoLabel}" Margin="0,0,0,6"/>
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+                                    <Border Grid.Column="0" Style="{StaticResource DrawerTextField}" Margin="0,0,8,0">
+                                        <TextBox Style="{StaticResource DrawerTextBox}"
+                                                 Text="{Binding Shell.FirmwareFilePath, Mode=TwoWay}"/>
+                                    </Border>
+                                    <Button Grid.Column="1"
+                                            Style="{StaticResource PillButton}"
+                                            Content="BROWSE"
+                                            Command="{Binding Shell.BrowseForFirmwareCommand}"/>
+                                </Grid>
+
+                                <TextBlock Text="PROGRESS" Style="{StaticResource InfoLabel}" Margin="0,16,0,6"/>
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+                                    <ProgressBar Grid.Column="0"
+                                                 Height="10"
+                                                 VerticalAlignment="Center"
+                                                 Minimum="0" Maximum="100"
+                                                 Background="{StaticResource Surface}"
+                                                 Foreground="{StaticResource Accent}"
+                                                 BorderBrush="{StaticResource BorderDim}"
+                                                 Value="{Binding Shell.UploadFirmwareProgress}"/>
+                                    <Button Grid.Column="1"
+                                            Style="{StaticResource AccentPillButton}"
+                                            Content="UPDATE"
+                                            Margin="8,0,0,0"
+                                            Command="{Binding Shell.UploadFirmwareCommand}"/>
+                                </Grid>
+                            </StackPanel>
+
+                            <!-- WiFi: informational message -->
+                            <Border Background="#2A1A0A"
+                                    BorderBrush="{StaticResource StatusAmber}"
+                                    BorderThickness="1"
+                                    CornerRadius="3"
+                                    Padding="12,10"
+                                    Visibility="{Binding SelectedDeviceSupportsFirmwareUpdate,
+                                                 Converter={StaticResource InvertedBoolToVis}}">
+                                <TextBlock Text="Firmware updates require a USB connection."
+                                           FontSize="11"
+                                           Foreground="{StaticResource StatusAmber}"
+                                           TextWrapping="Wrap"/>
+                            </Border>
+
+                            <!-- ACTIONS -->
+                            <TextBlock Text="ACTIONS" Style="{StaticResource DrawerSectionLabel}"/>
+                            <StackPanel Orientation="Horizontal">
+                                <Button Style="{StaticResource PillButton}"
+                                        Content="REBOOT"
+                                        Command="{Binding RebootSelectedCommand}"/>
+                                <Button Style="{StaticResource DangerPillButton}"
+                                        Content="DISCONNECT"
+                                        Command="{Binding DisconnectSelectedCommand}"/>
+                            </StackPanel>
+
+                        </StackPanel>
+                    </ScrollViewer>
+                </Grid>
+            </Border>
+        </Grid>
+
+        <!-- ========== EMPTY STATE ========== -->
+        <Grid Visibility="{Binding HasConnectedDevice, Converter={StaticResource InvertedBoolToVis}}">
+            <StackPanel HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        MaxWidth="420">
+                <Border Width="96" Height="96"
+                        CornerRadius="48"
+                        Background="{StaticResource SurfaceRaised}"
+                        BorderBrush="{StaticResource BorderDim}"
+                        BorderThickness="1"
+                        HorizontalAlignment="Center"
+                        Margin="0,0,0,28">
+                    <iconPacks:PackIconMaterial Kind="Chip"
+                                                Width="40" Height="40"
+                                                Foreground="{StaticResource TextTertiary}"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"/>
+                </Border>
+                <TextBlock Text="NO DEVICES CONNECTED"
+                           FontSize="11"
+                           FontWeight="Bold"
+                           Foreground="{StaticResource TextTertiary}"
+                           HorizontalAlignment="Center"
+                           Margin="0,0,0,10"/>
+                <TextBlock Text="Connect a DAQiFi device over USB or WiFi to get started."
+                           FontSize="15"
+                           FontWeight="Light"
+                           Foreground="{StaticResource TextPrimary}"
+                           TextAlignment="Center"
+                           TextWrapping="Wrap"
+                           HorizontalAlignment="Center"
+                           Margin="0,0,0,20"/>
+                <Button Style="{StaticResource AccentPillButton}"
+                        Content="+ ADD DEVICE"
+                        HorizontalAlignment="Center"
+                        Command="{Binding AddDeviceCommand}"/>
+            </StackPanel>
+        </Grid>
+
+    </Grid>
+</UserControl>
diff --git a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
new file mode 100644
index 00000000..6bc74285
--- /dev/null
+++ b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
@@ -0,0 +1,50 @@
+using System.Windows;
+using Daqifi.Desktop.ViewModels;
+using RadioButton = System.Windows.Controls.RadioButton;
+using UserControl = System.Windows.Controls.UserControl;
+
+namespace Daqifi.Desktop.View.Prototype;
+
+public partial class DevicesPanePrototype : UserControl
+{
+    public DevicesPanePrototype()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+        Unloaded += OnUnloaded;
+    }
+
+    private void OnLoaded(object sender, RoutedEventArgs e)
+    {
+        // Tab-switches on the host TabControl trigger Unloaded (which disposes
+        // the VM) and then Loaded when the tab comes back. Recreate the VM so
+        // a returning tab gets a fresh Rebuild and picks up devices connected
+        // while the pane was detached.
+        if (DataContext is not DevicesPaneViewModel)
+        {
+            var shell = Window.GetWindow(this)?.DataContext as DaqifiViewModel;
+            DataContext = new DevicesPaneViewModel(shell);
+        }
+    }
+
+    private void OnUnloaded(object sender, RoutedEventArgs e)
+    {
+        if (DataContext is IDisposable disposable)
+        {
+            disposable.Dispose();
+            DataContext = null;
+        }
+    }
+
+    private void LoggingMode_Click(object sender, RoutedEventArgs e)
+    {
+        // The logging-mode setter on DaqifiViewModel takes the string label and
+        // drives device SwitchMode + manager state; we surface it as a
+        // segmented toggle and write the label back on click.
+        if (sender is RadioButton { Tag: string mode } &&
+            Window.GetWindow(this)?.DataContext is DaqifiViewModel shell)
+        {
+            shell.SelectedLoggingMode = mode;
+        }
+    }
+}
diff --git a/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs b/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
index 835f7f49..6b856b27 100644
--- a/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
+++ b/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
@@ -53,8 +53,6 @@ public partial class DaqifiViewModel : ObservableObject
     [ObservableProperty]
     private bool _isLoggedDataBusy;
     [ObservableProperty]
-    private bool _isDeviceSettingsOpen;
-    [ObservableProperty]
     private bool _isProfileSettingsOpen;
     [ObservableProperty]
     private bool _isNotificationsOpen;
@@ -1103,21 +1101,6 @@ private void OpenLiveGraphSettings()
         IsLiveGraphSettingsOpen = true;
     }
 
-    [RelayCommand]
-    private void OpenDeviceSettings(IStreamingDevice? device)
-    {
-        if (device == null)
-        {
-            return;
-        }
-
-        SelectedDeviceSupportsFirmwareUpdate = device.ConnectionType == Device.ConnectionType.Usb;
-
-        CloseFlyouts();
-        SelectedDevice = device;
-        IsDeviceSettingsOpen = true;
-    }
-
     [RelayCommand]
     private void OpenFirmwareUpdateSettings(IStreamingDevice? device)
     {
@@ -2204,7 +2187,6 @@ public async Task<MessageDialogResult> ShowMessage(string title, string message,
     public void CloseFlyouts()
     {
         IsProfileSettingsOpen = false;
-        IsDeviceSettingsOpen = false;
         IsLoggingSessionSettingsOpen = false;
         IsLiveGraphSettingsOpen = false;
         IsLogSummaryOpen = false;
diff --git a/Daqifi.Desktop/ViewModels/DeviceTileViewModel.cs b/Daqifi.Desktop/ViewModels/DeviceTileViewModel.cs
new file mode 100644
index 00000000..da63bcc3
--- /dev/null
+++ b/Daqifi.Desktop/ViewModels/DeviceTileViewModel.cs
@@ -0,0 +1,116 @@
+using System.ComponentModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Daqifi.Desktop.Device;
+using Brush = System.Windows.Media.Brush;
+using Color = System.Windows.Media.Color;
+using ColorConverter = System.Windows.Media.ColorConverter;
+using SolidColorBrush = System.Windows.Media.SolidColorBrush;
+
+namespace Daqifi.Desktop.ViewModels;
+
+/// <summary>
+/// View-model for a single device tile. All presentation (stripe, labels,
+/// tile colors) is computed from the underlying device's current state so a
+/// device that reconnects or updates its firmware updates in place.
+/// </summary>
+public sealed class DeviceTileViewModel : ObservableObject, IDisposable
+{
+    private readonly INotifyPropertyChanged? _deviceNotifier;
+
+    /// <summary>The underlying streaming device this tile represents.</summary>
+    public IStreamingDevice Device { get; }
+
+    /// <summary>Primary display name — the device's part number.</summary>
+    public string Name => Device.DevicePartNumber;
+
+    /// <summary>Serial number as shown on the tile.</summary>
+    public string SerialNumber => Device.DeviceSerialNo;
+
+    /// <summary>Firmware version as shown on the tile.</summary>
+    public string Version => Device.DeviceVersion;
+
+    /// <summary>COM port (USB) or IP address (WiFi).</summary>
+    public string Identifier => Device.DisplayIdentifier;
+
+    /// <summary>"USB" or "WIFI" label for the connection chip.</summary>
+    public string ConnectionLabel => Device.ConnectionType == ConnectionType.Usb ? "USB" : "WIFI";
+
+    /// <summary>Whether the device is on a USB connection.</summary>
+    public bool IsUsb => Device.ConnectionType == ConnectionType.Usb;
+
+    /// <summary>Whether the device needs a firmware update.</summary>
+    public bool IsFirmwareOutdated => Device.IsFirmwareOutdated;
+
+    /// <summary>Whether the device is currently connected.</summary>
+    public bool IsConnected => Device.IsConnected;
+
+    /// <summary>
+    /// Type-coded stripe color — cyan for USB, purple for WiFi. Connection
+    /// type is a meaningful dimension operators sort by, so it earns a
+    /// dedicated hue.
+    /// </summary>
+    public Brush StripeBrush => IsUsb ? UsbAccent : WifiAccent;
+
+    /// <summary>Background color for the tile.</summary>
+    public Brush TileBackground => SurfaceRaised;
+
+    /// <summary>Border color — stripe color when connected, dim otherwise.</summary>
+    public Brush TileBorderBrush => IsConnected ? StripeBrush : BorderDim;
+
+    /// <summary>Creates a tile bound to the given device.</summary>
+    public DeviceTileViewModel(IStreamingDevice device)
+    {
+        Device = device;
+        _deviceNotifier = device as INotifyPropertyChanged;
+        if (_deviceNotifier != null)
+        {
+            _deviceNotifier.PropertyChanged += OnDevicePropertyChanged;
+        }
+    }
+
+    private void OnDevicePropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        switch (e.PropertyName)
+        {
+            case nameof(IStreamingDevice.IsConnected):
+                OnPropertyChanged(nameof(IsConnected));
+                OnPropertyChanged(nameof(TileBorderBrush));
+                break;
+            case nameof(IStreamingDevice.IsFirmwareOutdated):
+                OnPropertyChanged(nameof(IsFirmwareOutdated));
+                break;
+            case nameof(IStreamingDevice.DeviceSerialNo):
+                OnPropertyChanged(nameof(SerialNumber));
+                break;
+            case nameof(IStreamingDevice.DeviceVersion):
+                OnPropertyChanged(nameof(Version));
+                break;
+            case nameof(IStreamingDevice.IpAddress):
+            case nameof(IStreamingDevice.DisplayIdentifier):
+                OnPropertyChanged(nameof(Identifier));
+                break;
+        }
+    }
+
+    /// <summary>Detaches the device subscription.</summary>
+    public void Dispose()
+    {
+        if (_deviceNotifier != null)
+        {
+            _deviceNotifier.PropertyChanged -= OnDevicePropertyChanged;
+        }
+    }
+
+    private static readonly Brush SurfaceRaised = MakeBrush("#171A20");
+    private static readonly Brush BorderDim = MakeBrush("#2A2F38");
+    private static readonly Brush UsbAccent = MakeBrush("#06B6D4");
+    private static readonly Brush WifiAccent = MakeBrush("#A855F7");
+
+    private static SolidColorBrush MakeBrush(string hex)
+    {
+        var color = (Color)ColorConverter.ConvertFromString(hex)!;
+        var brush = new SolidColorBrush(color);
+        brush.Freeze();
+        return brush;
+    }
+}
diff --git a/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs b/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs
new file mode 100644
index 00000000..faff1e7a
--- /dev/null
+++ b/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs
@@ -0,0 +1,192 @@
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Windows.Threading;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Daqifi.Desktop.Device;
+
+namespace Daqifi.Desktop.ViewModels;
+
+/// <summary>
+/// Backs the unified Devices pane. Aggregates connected devices into a tile
+/// grid and owns the inline settings drawer state. Delegates side-effecting
+/// commands (connect, disconnect, reboot, firmware, network) to the shell
+/// view-model so the existing service wiring is reused unchanged.
+/// </summary>
+public partial class DevicesPaneViewModel : ObservableObject, IDisposable
+{
+    private readonly DaqifiViewModel? _shell;
+    private readonly Dispatcher _dispatcher;
+    private bool _disposed;
+
+    /// <summary>Device tiles in the order ConnectionManager returns them.</summary>
+    public ObservableCollection<DeviceTileViewModel> Devices { get; } = [];
+
+    /// <summary>
+    /// The shell view-model, exposed so the drawer can bind directly to shell-owned
+    /// state (firmware path/progress, logging mode, SD format) and commands
+    /// (firmware upload, network apply) without a second DataContext hop.
+    /// </summary>
+    public DaqifiViewModel? Shell => _shell;
+
+    [ObservableProperty] private bool _hasConnectedDevice;
+    [ObservableProperty] private DeviceTileViewModel? _selectedTile;
+    [ObservableProperty] private bool _isSettingsOpen;
+
+    /// <summary>The underlying device of the tile shown in the settings drawer.</summary>
+    public IStreamingDevice? SelectedDevice => SelectedTile?.Device;
+
+    /// <summary>True when the selected device is USB-connected (firmware update path).</summary>
+    public bool SelectedDeviceSupportsFirmwareUpdate =>
+        SelectedDevice?.ConnectionType == ConnectionType.Usb;
+
+    /// <summary>Opens the inline settings drawer for a device tile.</summary>
+    public IRelayCommand<DeviceTileViewModel> OpenSettingsCommand { get; }
+
+    /// <summary>Closes the inline settings drawer.</summary>
+    public IRelayCommand CloseSettingsCommand { get; }
+
+    /// <summary>Shows the Add-Device dialog via the shell view-model.</summary>
+    public IRelayCommand AddDeviceCommand { get; }
+
+    /// <summary>Disconnects the currently selected device and closes the drawer.</summary>
+    public IRelayCommand DisconnectSelectedCommand { get; }
+
+    /// <summary>Reboots the currently selected device.</summary>
+    public IRelayCommand RebootSelectedCommand { get; }
+
+    /// <summary>Creates the view-model bound to the shell view-model.</summary>
+    public DevicesPaneViewModel(DaqifiViewModel? shell)
+    {
+        _shell = shell;
+        _dispatcher = Dispatcher.CurrentDispatcher;
+
+        OpenSettingsCommand = new RelayCommand<DeviceTileViewModel>(OpenSettings);
+        CloseSettingsCommand = new RelayCommand(CloseSettings);
+        AddDeviceCommand = new RelayCommand(AddDevice);
+        DisconnectSelectedCommand = new RelayCommand(DisconnectSelected, () => SelectedDevice != null);
+        RebootSelectedCommand = new RelayCommand(RebootSelected, () => SelectedDevice != null);
+
+        ConnectionManager.Instance.PropertyChanged += OnConnectionManagerPropertyChanged;
+        Rebuild();
+    }
+
+    partial void OnSelectedTileChanged(DeviceTileViewModel? value)
+    {
+        OnPropertyChanged(nameof(SelectedDevice));
+        OnPropertyChanged(nameof(SelectedDeviceSupportsFirmwareUpdate));
+        DisconnectSelectedCommand.NotifyCanExecuteChanged();
+        RebootSelectedCommand.NotifyCanExecuteChanged();
+    }
+
+    private void OnConnectionManagerPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName != nameof(ConnectionManager.ConnectedDevices)) return;
+
+        if (_dispatcher.CheckAccess())
+        {
+            Rebuild();
+        }
+        else
+        {
+            _dispatcher.BeginInvoke((Action)Rebuild);
+        }
+    }
+
+    private void Rebuild()
+    {
+        if (_disposed) return;
+
+        var openSerial = SelectedDevice?.DeviceSerialNo;
+
+        foreach (var tile in Devices) tile.Dispose();
+        Devices.Clear();
+
+        foreach (var device in ConnectionManager.Instance.ConnectedDevices)
+        {
+            Devices.Add(new DeviceTileViewModel(device));
+        }
+
+        HasConnectedDevice = Devices.Count > 0;
+
+        // Preserve drawer state across a rebuild if the device is still there;
+        // otherwise close the drawer so it doesn't point at a removed device.
+        if (IsSettingsOpen && openSerial != null)
+        {
+            var match = Devices.FirstOrDefault(d => d.Device.DeviceSerialNo == openSerial);
+            if (match != null)
+            {
+                SelectedTile = match;
+            }
+            else
+            {
+                CloseSettings();
+            }
+        }
+    }
+
+    private void OpenSettings(DeviceTileViewModel? tile)
+    {
+        if (tile == null) return;
+        SelectedTile = tile;
+        // Keep the shell's SelectedDevice in sync so existing commands
+        // (UploadFirmware, UpdateNetworkConfiguration) operate on the
+        // device the drawer is showing.
+        if (_shell != null)
+        {
+            _shell.SelectedDevice = tile.Device;
+            _shell.SelectedDeviceSupportsFirmwareUpdate =
+                tile.Device.ConnectionType == ConnectionType.Usb;
+        }
+        IsSettingsOpen = true;
+    }
+
+    private void CloseSettings()
+    {
+        IsSettingsOpen = false;
+        SelectedTile = null;
+    }
+
+    private void AddDevice()
+    {
+        if (_shell?.ShowConnectionDialogCommand.CanExecute(null) == true)
+        {
+            _shell.ShowConnectionDialogCommand.Execute(null);
+        }
+    }
+
+    private void DisconnectSelected()
+    {
+        var device = SelectedDevice;
+        if (device == null || _shell == null) return;
+        if (_shell.DisconnectDeviceCommand.CanExecute(device))
+        {
+            _shell.DisconnectDeviceCommand.Execute(device);
+        }
+        CloseSettings();
+    }
+
+    private void RebootSelected()
+    {
+        var device = SelectedDevice;
+        if (device == null || _shell == null) return;
+        if (_shell.RebootDeviceCommand.CanExecute(device))
+        {
+            _shell.RebootDeviceCommand.Execute(device);
+        }
+    }
+
+    /// <summary>Detaches the singleton subscription and disposes tiles.</summary>
+    public void Dispose()
+    {
+        if (_disposed) return;
+        _disposed = true;
+
+        ConnectionManager.Instance.PropertyChanged -= OnConnectionManagerPropertyChanged;
+
+        foreach (var tile in Devices) tile.Dispose();
+        Devices.Clear();
+
+        GC.SuppressFinalize(this);
+    }
+}

From cad553c9d8ea6f463f972e059e7282264deff8b1 Mon Sep 17 00:00:00 2001
From: Tyler Kron <tylerkron@gmail.com>
Date: Sat, 18 Apr 2026 13:08:19 -0600
Subject: [PATCH 2/4] style: dark ComboBox template for Devices drawer

The MahApps Light.Blue theme paints the default ComboBox toggle button
white regardless of the Background setter, so the NETWORK MODE / SECURITY
(and SD format) combos were rendering light against the dark drawer.
Replaces the ControlTemplate with a full dark version sourced from the
drawer palette, matches the chevron to TextSecondary, routes popup items
through a dark ComboBoxItem style with SurfaceActive hover, and adds
Accent focus + BorderBright hover borders for consistency with the other
drawer inputs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../View/Prototype/DevicesPanePrototype.xaml  | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)

diff --git a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
index e3be1690..cde4f5a2 100644
--- a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
+++ b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
@@ -147,6 +147,36 @@
             <Setter Property="Padding" Value="10,0"/>
         </Style>
 
+        <!-- ComboBox item container: dark row with active-surface hover -->
+        <Style x:Key="DrawerComboBoxItem" TargetType="ComboBoxItem">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
+            <Setter Property="Padding" Value="10,6"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ComboBoxItem">
+                        <Border x:Name="Bg"
+                                Background="{TemplateBinding Background}"
+                                Padding="{TemplateBinding Padding}">
+                            <ContentPresenter VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsHighlighted" Value="True">
+                                <Setter TargetName="Bg" Property="Background" Value="{StaticResource SurfaceActive}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!--
+            Full dark ComboBox template. The app's MahApps Light.Blue theme
+            paints the default ComboBox toggle button white regardless of the
+            Background setter, so we replace the ControlTemplate outright and
+            drive color from our palette.
+        -->
         <Style x:Key="DrawerComboBox" TargetType="ComboBox">
             <Setter Property="Background" Value="{StaticResource Surface}"/>
             <Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
@@ -155,6 +185,83 @@
             <Setter Property="Height" Value="32"/>
             <Setter Property="FontSize" Value="12"/>
             <Setter Property="Padding" Value="10,0"/>
+            <Setter Property="SnapsToDevicePixels" Value="True"/>
+            <Setter Property="ItemContainerStyle" Value="{StaticResource DrawerComboBoxItem}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ComboBox">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="28"/>
+                            </Grid.ColumnDefinitions>
+
+                            <Border x:Name="Bg"
+                                    Grid.ColumnSpan="2"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    CornerRadius="3"/>
+
+                            <ContentPresenter Grid.Column="0"
+                                              Margin="{TemplateBinding Padding}"
+                                              VerticalAlignment="Center"
+                                              HorizontalAlignment="Left"
+                                              IsHitTestVisible="False"
+                                              Content="{TemplateBinding SelectionBoxItem}"
+                                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
+                                              ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
+                                              TextElement.Foreground="{TemplateBinding Foreground}"/>
+
+                            <ToggleButton Grid.Column="1"
+                                          Background="Transparent"
+                                          BorderThickness="0"
+                                          Focusable="False"
+                                          ClickMode="Press"
+                                          IsChecked="{Binding Path=IsDropDownOpen,
+                                                      Mode=TwoWay,
+                                                      RelativeSource={RelativeSource TemplatedParent}}">
+                                <ToggleButton.Template>
+                                    <ControlTemplate TargetType="ToggleButton">
+                                        <Border Background="Transparent">
+                                            <Path HorizontalAlignment="Center"
+                                                  VerticalAlignment="Center"
+                                                  Data="M 0 0 L 4 4 L 8 0 Z"
+                                                  Fill="{StaticResource TextSecondary}"/>
+                                        </Border>
+                                    </ControlTemplate>
+                                </ToggleButton.Template>
+                            </ToggleButton>
+
+                            <Popup x:Name="Popup"
+                                   IsOpen="{TemplateBinding IsDropDownOpen}"
+                                   AllowsTransparency="True"
+                                   Focusable="False"
+                                   PopupAnimation="Slide"
+                                   Placement="Bottom">
+                                <Border Background="{StaticResource SurfaceRaised}"
+                                        BorderBrush="{StaticResource BorderDim}"
+                                        BorderThickness="1"
+                                        CornerRadius="3"
+                                        MinWidth="{TemplateBinding ActualWidth}"
+                                        MaxHeight="{TemplateBinding MaxDropDownHeight}">
+                                    <ScrollViewer>
+                                        <ItemsPresenter/>
+                                    </ScrollViewer>
+                                </Border>
+                            </Popup>
+                        </Grid>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bg" Property="BorderBrush" Value="{StaticResource BorderBright}"/>
+                            </Trigger>
+                            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                                <Setter TargetName="Bg" Property="BorderBrush" Value="{StaticResource Accent}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
         </Style>
 
         <Style x:Key="SegmentedToggle" TargetType="RadioButton">

From 15094a1d4f0f5329f1402f093820db36ee3622b7 Mon Sep 17 00:00:00 2001
From: Tyler Kron <tylerkron@gmail.com>
Date: Sat, 18 Apr 2026 13:19:02 -0600
Subject: [PATCH 3/4] chore: remove orphaned DeviceSettingsViewModel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DeviceSettingsViewModel had no remaining references — no bindings, no
instantiations, no tests — and was throwing an MVVMTK0033 warning for
using [ObservableObject] without an ObservableObject base. All of its
state (SelectedDevice, IsLoggingToDevice, CanAccessSdCard, SdCard message)
is provided by the shell view-model and the new DevicesPaneViewModel.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../ViewModels/DeviceSettingsViewModel.cs     | 52 -------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 Daqifi.Desktop/ViewModels/DeviceSettingsViewModel.cs

diff --git a/Daqifi.Desktop/ViewModels/DeviceSettingsViewModel.cs b/Daqifi.Desktop/ViewModels/DeviceSettingsViewModel.cs
deleted file mode 100644
index cf28643e..00000000
--- a/Daqifi.Desktop/ViewModels/DeviceSettingsViewModel.cs
+++ /dev/null
@@ -1,52 +0,0 @@
-using CommunityToolkit.Mvvm.ComponentModel;
-using Daqifi.Desktop.Device;
-
-namespace Daqifi.Desktop.ViewModels;
-
-[ObservableObject]
-public partial class DeviceSettingsViewModel
-{
-    [ObservableProperty]
-    private IStreamingDevice _selectedDevice;
-
-    [ObservableProperty]
-    private bool _isLoggingToDevice;
-
-    [ObservableProperty]
-    private string _logFileName;
-
-    public bool CanAccessSdCard => SelectedDevice?.ConnectionType == ConnectionType.Usb;
-
-    public string SdCardMessage => GetSdCardMessage();
-
-    partial void OnSelectedDeviceChanged(IStreamingDevice value)
-    {
-        // If switching to WiFi or no device, ensure logging is disabled
-        if (value == null || value.ConnectionType != ConnectionType.Usb)
-        {
-            IsLoggingToDevice = false;
-            LogFileName = string.Empty;
-        }
-    }
-
-    partial void OnIsLoggingToDeviceChanging(bool value)
-    {
-        // Prevent enabling logging if not on USB
-        if (value && (SelectedDevice == null || SelectedDevice.ConnectionType != ConnectionType.Usb))
-        {
-            throw new InvalidOperationException("Cannot enable logging when not connected via USB");
-        }
-    }
-
-    private string GetSdCardMessage()
-    {
-        if (SelectedDevice == null)
-        {
-            return string.Empty;
-        }
-
-        return SelectedDevice.ConnectionType == ConnectionType.Usb
-            ? "SD Card logging available"
-            : "SD Card logging is not available on WiFi devices";
-    }
-}
\ No newline at end of file

From d3cd857573d383c6cbe6cd689d8b42d0c90157cd Mon Sep 17 00:00:00 2001
From: Tyler Kron <tylerkron@gmail.com>
Date: Sat, 18 Apr 2026 13:25:57 -0600
Subject: [PATCH 4/4] =?UTF-8?q?fix(devices):=20address=20Qodo=20review=20?=
 =?UTF-8?q?=E2=80=94=20MVVM,=20guards,=20notify-for?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the LoggingMode_Click code-behind with a RelayCommand<string>
  on DevicesPaneViewModel (SetLoggingModeCommand) and bind the
  RadioButtons to it via CommandParameter. Removes the Click handler
  (which also had a non-PascalCase name) and keeps all interaction in
  the view-model.

- Route the frequency slider through a new DevicesPaneViewModel.FrequencyHz
  proxy that reads from SelectedDevice.StreamingFrequency but writes
  through DaqifiViewModel.SelectedStreamingFrequency. That shell setter
  already blocks changes while LoggingManager.Active and surfaces an
  error dialog — so the drawer can no longer silently bypass the
  mid-session guard.

- Guard DaqifiViewModel.UpdateNetworkConfiguration against null
  SelectedDevice and disconnected devices, and wrap the call in
  try/catch so a transport failure surfaces as an error dialog instead
  of propagating out of the RelayCommand.

- Declare SelectedTile's dependent-property notifications via
  [NotifyPropertyChangedFor] attributes (SelectedDevice,
  SelectedDeviceSupportsFirmwareUpdate, FrequencyHz) and trim the
  partial to only the CanExecute bookkeeping the source generator
  can't emit.

- Add missing XML docs on DevicesPanePrototype and its constructor.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../View/Prototype/DevicesPanePrototype.xaml  | 10 ++--
 .../Prototype/DevicesPanePrototype.xaml.cs    | 21 ++++-----
 Daqifi.Desktop/ViewModels/DaqifiViewModel.cs  | 30 +++++++++++-
 .../ViewModels/DevicesPaneViewModel.cs        | 47 +++++++++++++++++--
 4 files changed, 85 insertions(+), 23 deletions(-)

diff --git a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
index cde4f5a2..6c2062df 100644
--- a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
+++ b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml
@@ -653,16 +653,16 @@
                                                  IsChecked="{Binding Shell.IsLogToDeviceMode,
                                                              Converter={StaticResource BooleanToInverse}, Mode=OneWay}"
                                                  Style="{StaticResource SegmentedToggle}"
-                                                 Tag="Stream to App"
-                                                 Click="LoggingMode_Click"/>
+                                                 Command="{Binding SetLoggingModeCommand}"
+                                                 CommandParameter="Stream to App"/>
                                     <RadioButton Grid.Column="1"
                                                  Content="LOG TO DEVICE"
                                                  GroupName="LoggingMode"
                                                  IsEnabled="{Binding SelectedTile.IsUsb}"
                                                  IsChecked="{Binding Shell.IsLogToDeviceMode, Mode=OneWay}"
                                                  Style="{StaticResource SegmentedToggle}"
-                                                 Tag="Log to Device"
-                                                 Click="LoggingMode_Click"
+                                                 Command="{Binding SetLoggingModeCommand}"
+                                                 CommandParameter="Log to Device"
                                                  ToolTip="SD card logging requires USB. WiFi devices do not support SD card logging."/>
                                 </Grid>
                             </Border>
@@ -689,7 +689,7 @@
                                         TickFrequency="1"
                                         IsSnapToTickEnabled="True"
                                         VerticalAlignment="Center"
-                                        Value="{Binding SelectedDevice.StreamingFrequency,
+                                        Value="{Binding FrequencyHz,
                                                 Delay=500, UpdateSourceTrigger=PropertyChanged}"/>
                             </Grid>
 
diff --git a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
index 6bc74285..9c789db7 100644
--- a/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
+++ b/Daqifi.Desktop/View/Prototype/DevicesPanePrototype.xaml.cs
@@ -1,12 +1,19 @@
 using System.Windows;
 using Daqifi.Desktop.ViewModels;
-using RadioButton = System.Windows.Controls.RadioButton;
 using UserControl = System.Windows.Controls.UserControl;
 
 namespace Daqifi.Desktop.View.Prototype;
 
+/// <summary>
+/// Host UserControl for the unified Devices pane. Owns the
+/// <see cref="DevicesPaneViewModel"/> lifecycle — recreates the VM on
+/// Loaded (since TabControl switches trigger Unloaded → Loaded) so a
+/// returning tab picks up devices connected while it was detached, and
+/// disposes the VM on Unloaded to detach the singleton subscription.
+/// </summary>
 public partial class DevicesPanePrototype : UserControl
 {
+    /// <summary>Creates the pane and wires the Loaded/Unloaded VM lifecycle.</summary>
     public DevicesPanePrototype()
     {
         InitializeComponent();
@@ -35,16 +42,4 @@ private void OnUnloaded(object sender, RoutedEventArgs e)
             DataContext = null;
         }
     }
-
-    private void LoggingMode_Click(object sender, RoutedEventArgs e)
-    {
-        // The logging-mode setter on DaqifiViewModel takes the string label and
-        // drives device SwitchMode + manager state; we surface it as a
-        // segmented toggle and write the label back on click.
-        if (sender is RadioButton { Tag: string mode } &&
-            Window.GetWindow(this)?.DataContext is DaqifiViewModel shell)
-        {
-            shell.SelectedLoggingMode = mode;
-        }
-    }
 }
diff --git a/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs b/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
index 6b856b27..2fe123d8 100644
--- a/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
+++ b/Daqifi.Desktop/ViewModels/DaqifiViewModel.cs
@@ -1077,8 +1077,34 @@ public void Shutdown()
     [RelayCommand]
     public async Task UpdateNetworkConfiguration()
     {
-        await SelectedDevice.UpdateNetworkConfiguration();
-        _dialogService.ShowDialog<SuccessDialog>(this, new SuccessDialogViewModel("WiFi settings updated."));
+        // Guard the happy-path below: a device can disappear while the drawer
+        // is open (disconnect, tab switch, etc.), and the underlying
+        // UpdateNetworkConfiguration() throws when the connection is gone.
+        var device = SelectedDevice;
+        if (device == null)
+        {
+            _dialogService.ShowDialog<ErrorDialog>(this,
+                new ErrorDialogViewModel("Select a device before applying WiFi settings."));
+            return;
+        }
+        if (!device.IsConnected)
+        {
+            _dialogService.ShowDialog<ErrorDialog>(this,
+                new ErrorDialogViewModel("Cannot apply WiFi settings — the device is not connected."));
+            return;
+        }
+
+        try
+        {
+            await device.UpdateNetworkConfiguration();
+            _dialogService.ShowDialog<SuccessDialog>(this, new SuccessDialogViewModel("WiFi settings updated."));
+        }
+        catch (Exception ex)
+        {
+            _appLogger.Error(ex, "Failed to update network configuration");
+            _dialogService.ShowDialog<ErrorDialog>(this,
+                new ErrorDialogViewModel($"Failed to apply WiFi settings: {ex.Message}"));
+        }
     }
 
     [RelayCommand]
diff --git a/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs b/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs
index faff1e7a..48202484 100644
--- a/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs
+++ b/Daqifi.Desktop/ViewModels/DevicesPaneViewModel.cs
@@ -30,7 +30,13 @@ public partial class DevicesPaneViewModel : ObservableObject, IDisposable
     public DaqifiViewModel? Shell => _shell;
 
     [ObservableProperty] private bool _hasConnectedDevice;
-    [ObservableProperty] private DeviceTileViewModel? _selectedTile;
+
+    [ObservableProperty]
+    [NotifyPropertyChangedFor(nameof(SelectedDevice))]
+    [NotifyPropertyChangedFor(nameof(SelectedDeviceSupportsFirmwareUpdate))]
+    [NotifyPropertyChangedFor(nameof(FrequencyHz))]
+    private DeviceTileViewModel? _selectedTile;
+
     [ObservableProperty] private bool _isSettingsOpen;
 
     /// <summary>The underlying device of the tile shown in the settings drawer.</summary>
@@ -40,6 +46,24 @@ public partial class DevicesPaneViewModel : ObservableObject, IDisposable
     public bool SelectedDeviceSupportsFirmwareUpdate =>
         SelectedDevice?.ConnectionType == ConnectionType.Usb;
 
+    /// <summary>
+    /// Sampling frequency shown on the drawer's FREQUENCY slider.
+    /// Reads straight off the device so the slider reflects the real value,
+    /// but writes go through the shell's guarded <c>SelectedStreamingFrequency</c>
+    /// setter — which blocks changes and shows an error dialog while a
+    /// logging session is active.
+    /// </summary>
+    public int FrequencyHz
+    {
+        get => SelectedDevice?.StreamingFrequency ?? 0;
+        set
+        {
+            if (_shell == null || SelectedDevice == null) return;
+            _shell.SelectedStreamingFrequency = value;
+            OnPropertyChanged();
+        }
+    }
+
     /// <summary>Opens the inline settings drawer for a device tile.</summary>
     public IRelayCommand<DeviceTileViewModel> OpenSettingsCommand { get; }
 
@@ -55,6 +79,13 @@ public partial class DevicesPaneViewModel : ObservableObject, IDisposable
     /// <summary>Reboots the currently selected device.</summary>
     public IRelayCommand RebootSelectedCommand { get; }
 
+    /// <summary>
+    /// Writes the chosen logging-mode label ("Stream to App" or "Log to
+    /// Device") to the shell. Parameterized so the XAML can wire both
+    /// segmented-toggle RadioButtons to the same command.
+    /// </summary>
+    public IRelayCommand<string> SetLoggingModeCommand { get; }
+
     /// <summary>Creates the view-model bound to the shell view-model.</summary>
     public DevicesPaneViewModel(DaqifiViewModel? shell)
     {
@@ -66,6 +97,7 @@ public DevicesPaneViewModel(DaqifiViewModel? shell)
         AddDeviceCommand = new RelayCommand(AddDevice);
         DisconnectSelectedCommand = new RelayCommand(DisconnectSelected, () => SelectedDevice != null);
         RebootSelectedCommand = new RelayCommand(RebootSelected, () => SelectedDevice != null);
+        SetLoggingModeCommand = new RelayCommand<string>(SetLoggingMode);
 
         ConnectionManager.Instance.PropertyChanged += OnConnectionManagerPropertyChanged;
         Rebuild();
@@ -73,8 +105,9 @@ public DevicesPaneViewModel(DaqifiViewModel? shell)
 
     partial void OnSelectedTileChanged(DeviceTileViewModel? value)
     {
-        OnPropertyChanged(nameof(SelectedDevice));
-        OnPropertyChanged(nameof(SelectedDeviceSupportsFirmwareUpdate));
+        // Derived-property change notifications are declared via
+        // [NotifyPropertyChangedFor] attributes above; the partial is only
+        // for imperative work the source generator can't do.
         DisconnectSelectedCommand.NotifyCanExecuteChanged();
         RebootSelectedCommand.NotifyCanExecuteChanged();
     }
@@ -166,6 +199,14 @@ private void DisconnectSelected()
         CloseSettings();
     }
 
+    private void SetLoggingMode(string? mode)
+    {
+        // The shell setter takes the label, drives device SwitchMode, and
+        // refuses changes mid-session — we just forward the click.
+        if (string.IsNullOrEmpty(mode) || _shell == null) return;
+        _shell.SelectedLoggingMode = mode;
+    }
+
     private void RebootSelected()
     {
         var device = SelectedDevice;