refactor: split SocialsDialogViewModel under 500 lines — 500-limit Phase 3, Commit D

SocialsDialogViewModel.cs 515 -> 334. Extracted the DialogEntry record + the
row-level SocialSlotViewModel (service/logo/lock/edit/validate state, computed
Show* flags) into a new SocialSlotViewModel.cs partial. The dialog VM keeps the
sign-in gate, validation orchestration, and commit. DialogEntry stays public in
the same namespace.

Zero behavior change; build 0 warnings; 246 pass, only the 2 known failures.
Docs: ViewModels/index.md Phase 3 tracker updated in same commit.

Controls/BottomBar.xaml

@@ -0,0 +1,64 @@
+<UserControl x:Class="ytLive.Controls.BottomBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Border Background="#0f3460" Padding="16,4">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <!-- Gear icon: far left -->
+            <Button Grid.Column="0" ToolTip="Menu" Style="{StaticResource IconButton}"
+                    VerticalAlignment="Center" Click="GearButton_Click">
+                <Button.ContextMenu>
+                    <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                        <MenuItem Header="App Settings" Command="{Binding OpenSettingsCommand}"/>
+                        <Separator/>
+                        <MenuItem Header="Report Bug" Command="{Binding OpenBugCommand}"/>
+                        <MenuItem Header="Feature Request" Command="{Binding OpenFeatureCommand}"/>
+                        <MenuItem Header="About" Command="{Binding OpenAboutCommand}"/>
+                    </ContextMenu>
+                </Button.ContextMenu>
+                <Path Data="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z"
+                      Fill="#d0d0d0" Width="16" Height="16" Stretch="Uniform"/>
+            </Button>
+
+            <!-- Stream stats: centered under the preview pane -->
+            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
+                <TextBlock Text="Bitrate:" Style="{StaticResource YtLabel}" Margin="0,0,4,0"/>
+                <TextBlock Style="{StaticResource YtLabel}"
+                           Foreground="White" Margin="0,0,20,0">
+                    <Run Text="{Binding CurrentHealth.CurrentBitrate, Mode=OneWay}"/>
+                    <Run Text=" Mbps"/>
+                </TextBlock>
+
+                <TextBlock Text="FPS:" Style="{StaticResource YtLabel}" Margin="0,0,4,0"/>
+                <TextBlock Style="{StaticResource YtLabel}"
+                           Foreground="White" Margin="0,0,24,0">
+                    <Run Text="{Binding CurrentHealth.FPS, Mode=OneWay, StringFormat={}{0:0}}"/>
+                </TextBlock>
+
+                <TextBlock Text="Dropped:" Style="{StaticResource YtLabel}" Margin="0,0,4,0"/>
+                <TextBlock Text="{Binding CurrentHealth.DroppedFrames}" Style="{StaticResource YtLabel}"
+                           Foreground="White" Margin="0,0,20,0"/>
+
+                <TextBlock Text="Duration:" Style="{StaticResource YtLabel}" Margin="0,0,4,0"/>
+                <TextBlock Text="{Binding CurrentHealth.StreamDuration}" Style="{StaticResource YtLabel}"
+                           Foreground="White"/>
+
+                <TextBlock Text="{Binding CurrentHealth.HealthMessage}" Style="{StaticResource YtLabel}"
+                           Foreground="#e94560" Margin="20,0,0,0"/>
+            </StackPanel>
+
+            <!-- Resolution dropdown: far right -->
+            <ComboBox Grid.Column="2" Style="{StaticResource YtComboBox}" MinWidth="150"
+                      ItemsSource="{Binding QualityOptions}"
+                      SelectedItem="{Binding SelectedQuality}"
+                      DisplayMemberPath="Label"
+                      ToolTip="{Binding ResolutionHelp}"
+                      IsEnabled="{Binding IsOffline}"/>
+        </Grid>
+    </Border>
+</UserControl>

Controls/BottomBar.xaml.cs

@@ -0,0 +1,22 @@
+using System.Windows;
+using System.Windows.Controls;
+
+namespace ytLive.Controls;
+
+public partial class BottomBar : UserControl
+{
+    public BottomBar()
+    {
+        InitializeComponent();
+    }
+
+    private void GearButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (sender is Button { ContextMenu: { } menu } button)
+        {
+            menu.PlacementTarget = button;
+            menu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
+            menu.IsOpen = true;
+        }
+    }
+}

Controls/HealthBanner.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="ytLive.Controls.HealthBanner"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- YouTube health banner (TASK 5 item 3): report-by-exception — visible
+         ONLY while a warning/error configuration issue exists. Amber for
+         warning, darker red for error (HealthIssueBackground). -->
+    <Border Background="{Binding HealthIssueBackground}"
+            Visibility="{Binding HealthIssueBanner, Converter={StaticResource NotNullToVis}}">
+        <TextBlock Text="{Binding HealthIssueBanner}" Foreground="White" FontSize="13"
+                   FontWeight="SemiBold" Margin="16,8" TextTrimming="CharacterEllipsis"/>
+    </Border>
+</UserControl>

Controls/HealthBanner.xaml.cs

@@ -0,0 +1,11 @@
+using System.Windows.Controls;
+
+namespace ytLive.Controls;
+
+public partial class HealthBanner : UserControl
+{
+    public HealthBanner()
+    {
+        InitializeComponent();
+    }
+}

Controls/LeftPanel.xaml

@@ -0,0 +1,499 @@
+<UserControl x:Class="ytLive.Controls.LeftPanel"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:Helpers="clr-namespace:ytLive.Helpers"
+             xmlns:models="clr-namespace:ytLive.Models">
+    <Border Background="#16213e" CornerRadius="6" Padding="12">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- Edit mode (offline): layers + properties -->
+                    <Grid Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BoolToVis}}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+
+                        <!-- LAYERS header + Add button -->
+                        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,8,0,0">
+                            <TextBlock Text="LAYERS" Style="{StaticResource SectionHeader}" VerticalAlignment="Center"/>
+                            <Button ToolTip="Add Layer" Style="{StaticResource IconButton}" Margin="4,-4,0,0"
+                                Click="AddSourceButton_Click">
+                            <Button.ContextMenu>
+                                <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                                    <MenuItem Header="Webcam" Command="{Binding AddWebcamCommand}"
+                                              IsEnabled="{Binding CanAddWebcam}"
+                                              ToolTip="One webcam at a time — it's already in your stream"/>
+                                    <MenuItem Header="Image" Command="{Binding AddImageCommand}"/>
+                                    <MenuItem Header="Text" Command="{Binding AddSourceCommand}" CommandParameter="{x:Static models:SourceType.TextOverlay}"/>
+                                    <MenuItem Header="Countdown" Command="{Binding AddSourceCommand}" CommandParameter="{x:Static models:SourceType.Countdown}"
+                                              Visibility="{Binding IsCountdownAvailable, Converter={StaticResource BoolToVis}}"
+                                              ToolTip="Timer overlay — Starting and BRB screens only"/>
+                                    <MenuItem Header="Web Resource" Command="{Binding AddSourceCommand}" CommandParameter="{x:Static models:SourceType.WebSource}"
+                                              ToolTip="Embedded web page — set URI in Properties panel"/>
+                                    <MenuItem Header="YouTube Chat" Command="{Binding AddSourceCommand}" CommandParameter="{x:Static models:SourceType.ChatBox}"
+                                              IsEnabled="{Binding CanAddYouTubeChat}"
+                                              ToolTip="One chat layer at a time — it's already in your stream"/>
+                                </ContextMenu>
+                            </Button.ContextMenu>
+                            <Path Data="M12,4 L12,20 M4,12 L20,12" Stroke="#e94560" StrokeThickness="2"
+                                  Width="14" Height="14" Stretch="Uniform"/>
+                        </Button>
+                    </StackPanel>
+
+                    <Helpers:FocusPreservingListBox x:Name="SourceList" Grid.Row="1" Background="Transparent" BorderThickness="0"
+                             ItemsSource="{Binding StagedScene.Elements}"
+                             SelectedItem="{Binding SelectedElement, Mode=TwoWay}"
+                             PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown"
+                             PreviewMouseMove="List_PreviewMouseMove"
+                             PreviewMouseLeftButtonUp="List_PreviewMouseLeftButtonUp"
+                             Foreground="#e0e0e0" FontSize="13">
+                        <Helpers:FocusPreservingListBox.ItemContainerStyle>
+                            <Style TargetType="ListBoxItem" BasedOn="{StaticResource YtListBoxItem}">
+                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsVisible}" Value="False">
+                                        <Setter Property="Opacity" Value="0.45"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Helpers:FocusPreservingListBox.ItemContainerStyle>
+                        <ListBox.ItemTemplate>
+                            <DataTemplate>
+                                <Grid Margin="0,2"
+                                      Tag="{Binding DataContext.CanChangeBackground, RelativeSource={RelativeSource AncestorType=Window}}">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <Grid.ContextMenu>
+                                        <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                                            <MenuItem Header="Change Capture…" Click="BackgroundMenu_ChangeCapture">
+                                                <MenuItem.Visibility>
+                                                    <MultiBinding Converter="{StaticResource AllTrueToVis}">
+                                                        <Binding Path="IsBackground"/>
+                                                        <Binding Path="PlacementTarget.Tag" RelativeSource="{RelativeSource AncestorType={x:Type ContextMenu}}"/>
+                                                    </MultiBinding>
+                                                </MenuItem.Visibility>
+                                            </MenuItem>
+                                            <MenuItem Header="Refresh Capture" Click="BackgroundMenu_RefreshCapture">
+                                                <MenuItem.Visibility>
+                                                    <MultiBinding Converter="{StaticResource AllTrueToVis}">
+                                                        <Binding Path="IsBackground"/>
+                                                        <Binding Path="PlacementTarget.Tag" RelativeSource="{RelativeSource AncestorType={x:Type ContextMenu}}"/>
+                                                    </MultiBinding>
+                                                </MenuItem.Visibility>
+                                            </MenuItem>
+                                            <Separator>
+                                                <Separator.Visibility>
+                                                    <MultiBinding Converter="{StaticResource AllTrueToVis}">
+                                                        <Binding Path="IsBackground"/>
+                                                        <Binding Path="PlacementTarget.Tag" RelativeSource="{RelativeSource AncestorType={x:Type ContextMenu}}"/>
+                                                    </MultiBinding>
+                                                </Separator.Visibility>
+                                            </Separator>
+                                            <MenuItem Header="Remove Layer" Click="SourceMenu_Remove"
+                                                      Visibility="{Binding IsBackground, Converter={StaticResource InverseBoolToVis}}"/>
+                                        </ContextMenu>
+                                    </Grid.ContextMenu>
+
+                                    <TextBlock Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center"
+                                               Padding="4,2" TextTrimming="CharacterEllipsis">
+                                        <TextBlock.Style>
+                                            <Style TargetType="TextBlock">
+                                                <Setter Property="Visibility" Value="Visible"/>
+                                                <Style.Triggers>
+                                                    <DataTrigger Binding="{Binding IsEditing}" Value="True">
+                                                        <Setter Property="Visibility" Value="Collapsed"/>
+                                                    </DataTrigger>
+                                                </Style.Triggers>
+                                            </Style>
+                                        </TextBlock.Style>
+                                    </TextBlock>
+
+                                    <TextBox Grid.Column="0" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0e0e0" BorderThickness="0"
+                                             Padding="4,2" VerticalContentAlignment="Center"
+                                             IsVisibleChanged="SourceNameBox_IsVisibleChanged"
+                                             KeyDown="SourceNameBox_KeyDown" LostFocus="SourceNameBox_LostFocus">
+                                        <TextBox.Style>
+                                            <Style TargetType="TextBox">
+                                                <Setter Property="Visibility" Value="Collapsed"/>
+                                                <Style.Triggers>
+                                                    <DataTrigger Binding="{Binding IsEditing}" Value="True">
+                                                        <Setter Property="Visibility" Value="Visible"/>
+                                                    </DataTrigger>
+                                                </Style.Triggers>
+                                            </Style>
+                                        </TextBox.Style>
+                                    </TextBox>
+
+                                    <Button Grid.Column="1" ToolTip="Edit Layer Name"
+                                            Command="{Binding DataContext.EditElementCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
+                                            CommandParameter="{Binding}" Style="{StaticResource IconButton}">
+                                        <Path Data="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"
+                                              Fill="#d0d0d0" Width="13" Height="13" Stretch="Uniform"/>
+                                    </Button>
+
+                                    <Button Grid.Column="2" Style="{StaticResource EyeButton}"
+                                            Command="{Binding DataContext.ToggleElementVisibilityCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
+                                            CommandParameter="{Binding}">
+                                        <Path Style="{StaticResource EyeIconStyle}" Fill="#d0d0d0"
+                                              Width="13" Height="13" Stretch="Uniform"/>
+                                    </Button>
+
+                                    <Button Grid.Column="3" ToolTip="Remove Layer"
+                                            Command="{Binding DataContext.RemoveSourceCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
+                                            CommandParameter="{Binding}" Style="{StaticResource IconButton}"
+                                            Visibility="{Binding IsBackground, Converter={StaticResource HiddenBoolToVis}}">
+                                        <Path Data="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z"
+                                              Fill="#d0d0d0" Width="13" Height="13" Stretch="Uniform"/>
+                                    </Button>
+                                </Grid>
+                            </DataTemplate>
+                        </ListBox.ItemTemplate>
+                    </Helpers:FocusPreservingListBox>
+
+                            <TextBlock Grid.Row="2" Text="No layers yet" Foreground="#555" FontSize="12"
+                               HorizontalAlignment="Center" VerticalAlignment="Center"
+                               Visibility="{Binding ShowSourcesEmptyHint, Converter={StaticResource BoolToVis}}"/>
+
+                    <!-- ELEMENTS panel: per-element config beneath Sources.
+                         Collapses entirely when no element is selected. -->
+                    <Rectangle Grid.Row="3" Height="1" Fill="#2c3a5c" Margin="0,10,0,2"
+                               Visibility="{Binding SelectedElement, Converter={StaticResource NotNullToVis}}"/>
+                    <StackPanel Grid.Row="4" Orientation="Horizontal" Margin="0,8,0,0"
+                                Visibility="{Binding SelectedElement, Converter={StaticResource NotNullToVis}}">
+                        <TextBlock Text="PROPERTIES" Style="{StaticResource SectionHeader}" VerticalAlignment="Center"/>
+                    </StackPanel>
+                    <ScrollViewer x:Name="ElementsScrollViewer" Grid.Row="5" VerticalScrollBarVisibility="Auto" Background="Transparent"
+                                  Visibility="{Binding SelectedElement, Converter={StaticResource NotNullToVis}}">
+                        <StackPanel x:Name="ElementsPanel" Margin="0,4,0,0">
+                            <!-- Opacity + mirror/shape (draggable elements: image, webcam) -->
+                            <StackPanel Visibility="{Binding SelectedElement.IsDraggable, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
+                                <StackPanel Visibility="{Binding SelectedElement.IsChatBox, Converter={StaticResource InverseBoolToVis}}">
+                                    <TextBlock Text="Opacity" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                    <DockPanel Margin="0,0,0,6">
+                                        <TextBlock x:Name="OpacityValueText" Text="100%" Foreground="#a0a0b0" FontSize="11"
+                                                   DockPanel.Dock="Right" VerticalAlignment="Center" Margin="8,0,0,0" Width="32"/>
+                                        <Slider x:Name="OpacitySlider" Width="120" Minimum="0" Maximum="1"
+                                                Value="{Binding SelectedElement.Opacity, Mode=TwoWay}"
+                                                ValueChanged="OpacitySlider_ValueChanged" VerticalAlignment="Center"/>
+                                    </DockPanel>
+                                </StackPanel>
+                                <StackPanel Orientation="Horizontal" Margin="0,0,0,4"
+                                            Visibility="{Binding IsWebcamSelected, Converter={StaticResource BoolToVis}}">
+                                    <Button Content="{Binding SelectedElement.MirrorButtonText}"
+                                            Style="{StaticResource YtButtonSecondary}" Padding="10,4"
+                                            Click="MirrorButton_Click"/>
+                                    <Button Content="{Binding SelectedElement.ShapeButtonText}"
+                                            Style="{StaticResource YtButtonSecondary}" Padding="10,4"
+                                            Margin="8,0,0,0" Click="ShapeButton_Click"/>
+                                </StackPanel>
+                                <TextBlock Text="Drag to move · drag the corner dot to resize"
+                                           Foreground="#a0a0b0" FontSize="10" Margin="0,2,0,0"/>
+                            </StackPanel>
+
+                            <!-- Webcam border config -->
+                            <StackPanel Visibility="{Binding SelectedElement.IsWebcam, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
+                                <TextBlock Text="Border Color" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <DockPanel Margin="0,0,0,6">
+                                    <Button DockPanel.Dock="Right" Content="..." Width="24" Height="24"
+                                            Click="WebcamBorderColorPicker_Click" Margin="4,0,0,0"
+                                            ToolTip="Pick color"/>
+                                    <TextBox Text="{Binding SelectedElement.BorderColor, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"
+                                             MaxLength="7" ToolTip="#RRGGBB"/>
+                                </DockPanel>
+                                <TextBlock Text="Border Thickness" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <DockPanel Margin="0,0,0,6">
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" Margin="4,0,0,0"
+                                            Click="WebcamBorderAccept_Click">
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" ToolTip="Revert"
+                                            Click="WebcamBorderRevert_Click" Margin="4,0,0,0">
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <Slider DockPanel.Dock="Left" Width="120" Minimum="0" Maximum="10"
+                                            Value="{Binding SelectedElement.BorderWidth, Mode=TwoWay}"
+                                            VerticalAlignment="Center" TickFrequency="1" IsSnapToTickEnabled="True"/>
+                                    <TextBlock Text="{Binding SelectedElement.BorderWidth}" Foreground="#a0a0b0" FontSize="11"
+                                               VerticalAlignment="Center" Margin="8,0,0,0" Width="20"/>
+                                </DockPanel>
+                            </StackPanel>
+
+                            <!-- Countdown config -->
+                            <StackPanel Visibility="{Binding SelectedElement.IsCountdown, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
+                                <TextBlock Text="Timer (minutes)" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <DockPanel Margin="0,0,0,6">
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" Margin="4,0,0,0"
+                                            Click="CountdownAccept_Click">
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" ToolTip="Revert"
+                                            Click="CountdownRevert_Click" Margin="4,0,0,0">
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <Slider DockPanel.Dock="Left" Width="120" Minimum="1" Maximum="60"
+                                            Value="{Binding SelectedElement.TimerMinutes, Mode=TwoWay}"
+                                            VerticalAlignment="Center" TickFrequency="1" IsSnapToTickEnabled="True"/>
+                                    <TextBlock Text="{Binding SelectedElement.TimerMinutes}" Foreground="#a0a0b0" FontSize="11"
+                                               VerticalAlignment="Center" Margin="8,0,0,0" Width="20"/>
+                                </DockPanel>
+                            </StackPanel>
+
+                            <!-- Web source config -->
+                            <StackPanel Visibility="{Binding SelectedElement.IsWebSource, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
+                                <TextBlock Text="Geometry" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,4"/>
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="X" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBox Text="{Binding SelectedElement.X, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  Y" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBox Text="{Binding SelectedElement.Y, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"/>
+                                </DockPanel>
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="W" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBox Text="{Binding SelectedElement.Width, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  H" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBox Text="{Binding SelectedElement.Height, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"/>
+                                </DockPanel>
+                                <TextBlock Text="URI" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <DockPanel>
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" Margin="4,0,0,0" IsTabStop="False"
+                                            Click="WebAccept_Click">
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+                                            Width="22" Height="22" ToolTip="Revert" IsTabStop="False"
+                                            Click="WebRevert_Click" Margin="4,0,0,0">
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                              Width="14" Height="14" Stretch="Uniform"/>
+                                    </Button>
+                                    <TextBox Text="{Binding SelectedElement.WebUri, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0d0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="12"
+                                             ToolTip="https://example.com"/>
+                                </DockPanel>
+                            </StackPanel>
+
+                            <!-- Chat box config -->
+                            <StackPanel Visibility="{Binding SelectedElement.IsChatBox, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
+                                <TextBlock Text="Chat Overlay" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,6"/>
+
+                                <!-- Font Size -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Font Size" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <Slider x:Name="ChatFontSizeSlider" Width="120" Minimum="8" Maximum="72" TickFrequency="2" IsSnapToTickEnabled="True"
+                                            Value="{Binding SelectedElement.ChatFontSize, Mode=TwoWay}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFontSize, StringFormat={}{0:0}}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
+                                </DockPanel>
+
+                                <!-- Font Family -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Font" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <ComboBox SelectedValue="{Binding SelectedElement.ChatFontFamily, Mode=TwoWay}"
+                                              SelectedValuePath="Content"
+                                              Background="#0f3460" Foreground="#e0e0e0" FontSize="11"
+                                              Width="140" VerticalAlignment="Center">
+                                        <ComboBoxItem Content="Segoe UI"/>
+                                        <ComboBoxItem Content="Arial"/>
+                                        <ComboBoxItem Content="Consolas"/>
+                                        <ComboBoxItem Content="Courier New"/>
+                                        <ComboBoxItem Content="Comic Sans MS"/>
+                                        <ComboBoxItem Content="Mouse Memoirs"/>
+                                    </ComboBox>
+                                </DockPanel>
+
+                                <!-- Font Color -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Font Color" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBox Text="{Binding SelectedElement.ChatFontColor, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0e0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="11" Width="80"/>
+                                </DockPanel>
+
+                                <!-- Member Color -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Member" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBox Text="{Binding SelectedElement.ChatMemberColor, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0e0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="11" Width="80"/>
+                                </DockPanel>
+
+                                <!-- Super Chat Color -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Super Chat" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBox Text="{Binding SelectedElement.ChatSuperChatColor, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0e0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="11" Width="80"/>
+                                </DockPanel>
+
+                                <!-- Max Messages -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Max Msgs" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <Slider x:Name="ChatMaxMsgsSlider" Width="120" Minimum="1" Maximum="20" TickFrequency="1" IsSnapToTickEnabled="True"
+                                            Value="{Binding SelectedElement.ChatMaxMessages, Mode=TwoWay}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatMaxMessages}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
+                                </DockPanel>
+
+                                <!-- Background Color -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Background" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBox Text="{Binding SelectedElement.ChatBackgroundColor, UpdateSourceTrigger=PropertyChanged}"
+                                             Background="#0f3460" Foreground="#e0e0e0" BorderThickness="1"
+                                             BorderBrush="#2c3a5c" Padding="4,2" FontSize="11" Width="80"/>
+                                </DockPanel>
+
+                                <!-- Background Opacity -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Bg Opacity" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <Slider x:Name="ChatBgOpacitySlider" Width="120" Minimum="0" Maximum="1"
+                                            Value="{Binding SelectedElement.ChatBackgroundOpacity, Mode=TwoWay}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatBackgroundOpacity, StringFormat={}{0:0%}}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="32"/>
+                                </DockPanel>
+
+                                <!-- Fade After (seconds) -->
+                                <DockPanel Margin="0,0,0,4">
+                                    <TextBlock DockPanel.Dock="Left" Text="Fade After" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <Slider x:Name="ChatFadeSlider" Width="120" Minimum="0" Maximum="60" TickFrequency="5" IsSnapToTickEnabled="True"
+                                            Value="{Binding SelectedElement.ChatFadeSeconds, Mode=TwoWay}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFadeSeconds, StringFormat='{}{0}s'}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="28"/>
+                                </DockPanel>
+
+                                <!-- Toggles -->
+                                <CheckBox Content="Show timestamps" Foreground="#a0a0b0" FontSize="11" Margin="0,4,0,2"
+                                          IsChecked="{Binding SelectedElement.ChatShowTimestamps, Mode=TwoWay}"/>
+                                <CheckBox Content="Show badges" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"
+                                          IsChecked="{Binding SelectedElement.ChatShowBadges, Mode=TwoWay}"/>
+                            </StackPanel>
+
+                            <!-- Background properties -->
+                            <StackPanel Margin="0,8,0,0"
+                                        Visibility="{Binding SelectedElement.IsBackground, Converter={StaticResource BoolToVis}}">
+                                <TextBlock Text="Background" Style="{StaticResource SubHeader}"/>
+                                <StackPanel Margin="4,0,0,0">
+                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
+                                        <TextBlock Text="Use default background:" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center"/>
+                                        <ToggleButton Style="{StaticResource PillToggle}"
+                                                      IsChecked="{Binding SelectedElement.UseDefaultBackground, Mode=TwoWay}"
+                                                      Margin="8,0,0,0"/>
+                                    </StackPanel>
+                                    <Grid Margin="0,0,0,4"
+                                          Visibility="{Binding SelectedElement.UseDefaultBackground, Converter={StaticResource InverseBoolToVis}}">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                        </Grid.ColumnDefinitions>
+                                        <TextBox Grid.Column="0" Text="{Binding SelectedElement.CustomBackgroundPath, Mode=OneWay}"
+                                                  IsReadOnly="True" Background="#0f3460" Foreground="#a0a0b0"
+                                                  FontSize="11" VerticalAlignment="Center"/>
+                                        <Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseBackgroundCommand}"
+                                                Style="{StaticResource YtButtonSecondary}" Margin="4,0,0,0" Padding="8,2"/>
+                                    </Grid>
+                                    <TextBlock Text="{Binding BackgroundSizeMismatchText}"
+                                               Foreground="#ef4444" FontSize="11" TextWrapping="Wrap"
+                                               Margin="0,4,0,0"
+                                               Visibility="{Binding BackgroundSizeMismatch, Converter={StaticResource BoolToVis}}"/>
+                                </StackPanel>
+                            </StackPanel>
+                        </StackPanel>
+                    </ScrollViewer>
+                </Grid>
+
+                <!-- Live mode: YouTube Live Chat (entire left panel replaced) -->
+                <Grid Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBoolToVis}}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+
+                    <TextBlock Grid.Row="0" Text="LIVE CHAT" Style="{StaticResource SectionHeader}"/>
+
+                    <!-- Inactive overlay (shown when NOT live) -->
+                    <StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"
+                                Visibility="{Binding ShowChatInactiveMessage, Converter={StaticResource BoolToVis}}">
+                        <TextBlock Text="Chat is inactive" Foreground="#a0a0b0" FontSize="13"
+                                   HorizontalAlignment="Center" Margin="0,0,0,4"/>
+                        <TextBlock Text="Chat becomes active once LlamaCasty is connected and streaming on YouTube."
+                                   Foreground="#666" FontSize="11" TextWrapping="Wrap"
+                                   HorizontalAlignment="Center" TextAlignment="Center" MaxWidth="240"/>
+                    </StackPanel>
+
+                    <!-- Message feed (shown when live) -->
+                    <ListBox Grid.Row="1" Background="Transparent" BorderThickness="0"
+                             ItemsSource="{Binding ChatMessages}"
+                             ItemContainerStyle="{StaticResource YtListBoxItem}"
+                             Visibility="{Binding ShowChatInactiveMessage, Converter={StaticResource InverseBoolToVis}}"
+                             x:Name="ChatListBox">
+                        <ListBox.ItemTemplate><DataTemplate>
+                            <Border x:Name="MessageBorder" Padding="6,4" CornerRadius="4">
+                                <Border.Style>
+                                    <Style TargetType="Border">
+                                        <Setter Property="Background" Value="Transparent"/>
+                                        <Style.Triggers>
+                                            <DataTrigger Binding="{Binding IsSuperChat}" Value="True">
+                                                <Setter Property="Background" Value="#2a1a0a"/>
+                                                <Setter Property="BorderBrush" Value="#eab308"/>
+                                                <Setter Property="BorderThickness" Value="1,0,1,0"/>
+                                            </DataTrigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </Border.Style>
+                                <StackPanel>
+                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,2">
+                                        <TextBlock Text="&#x2B50;" FontSize="10" Margin="0,0,4,0"
+                                                   VerticalAlignment="Center"
+                                                   Visibility="{Binding IsMember, Converter={StaticResource BoolToVis}}"/>
+                                        <TextBlock Text="{Binding AuthorName}" Foreground="#e94560"
+                                                   FontWeight="Bold" FontSize="12" VerticalAlignment="Center"/>
+                                        <TextBlock Text="{Binding SuperChatAmount, StringFormat=${0:F2}}"
+                                                   Foreground="#eab308" FontWeight="Bold" FontSize="12"
+                                                   Margin="8,0,0,0" VerticalAlignment="Center"
+                                                   Visibility="{Binding IsSuperChat, Converter={StaticResource BoolToVis}}"/>
+                                        <TextBlock Text="{Binding SuperChatCurrency}" Foreground="#eab308"
+                                                   FontSize="11" Margin="2,0,0,0" VerticalAlignment="Center"
+                                                   Visibility="{Binding IsSuperChat, Converter={StaticResource BoolToVis}}"/>
+                                    </StackPanel>
+                                    <TextBlock Text="{Binding Message}" Foreground="#e0e0e0"
+                                               TextWrapping="Wrap" Margin="0,2,0,0"/>
+                                </StackPanel>
+                            </Border>
+                        </DataTemplate></ListBox.ItemTemplate>
+                    </ListBox>
+                </Grid>
+            </Grid>
+    </Border>
+</UserControl>

Controls/LeftPanel.xaml.cs

@@ -0,0 +1,310 @@
+using System.Collections;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using System.Windows.Media;
+using ytLive.Models;
+using ytLive.ViewModels;
+
+namespace ytLive.Controls;
+
+public partial class LeftPanel : UserControl
+{
+    private Models.SceneElement? _snapshotElement;
+    private string _snapshotBorderColor = string.Empty;
+    private int _snapshotBorderWidth;
+    private int _snapshotTimerMinutes = 15;
+    private string? _snapshotWebUri;
+
+    private Point _dragStartPoint;
+    private int _dragIndex = -1;
+    private bool _isDragging;
+    private object? _lastHoveredItem;
+
+    public LeftPanel()
+    {
+        InitializeComponent();
+        Loaded += (_, _) =>
+        {
+            if (DataContext is MainViewModel vm)
+                vm.ChatMessages.CollectionChanged += OnChatMessagesChanged;
+        };
+        Unloaded += (_, _) =>
+        {
+            if (DataContext is MainViewModel vm)
+                vm.ChatMessages.CollectionChanged -= OnChatMessagesChanged;
+        };
+    }
+
+    // Called by the window's UpdateSelectionOverlay (edit mode only).
+    public void OnSelectionChanged(MainViewModel vm)
+    {
+        if (vm.SelectedElement is { } s && PreviewPane.IsDraggableElement(s))
+            OpacityValueText.Text = $"{Math.Round(s.Opacity * 100)}%";
+        TakeSnapshot(vm);
+    }
+
+    // Deselection guard: true when the click is inside the source list or the
+    // element property scroller (window's Window_PreviewMouseLeftButtonDown).
+    public bool IsClickInside(DependencyObject original)
+        => IsDescendantOf(original, SourceList) || IsDescendantOf(original, ElementsScrollViewer);
+
+    private static bool IsDescendantOf(DependencyObject? child, DependencyObject ancestor)
+    {
+        while (child != null && !ReferenceEquals(child, ancestor))
+        {
+            child = child is Visual or System.Windows.Media.Media3D.Visual3D
+                ? VisualTreeHelper.GetParent(child)
+                : LogicalTreeHelper.GetParent(child);
+        }
+        return child != null;
+    }
+
+    private void SourceNameBox_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
+    {
+        if (sender is TextBox { IsVisible: true } box)
+        {
+            box.Focus();
+            box.SelectAll();
+        }
+    }
+
+    private void AddSourceButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (sender is Button { ContextMenu: { } menu } button)
+        {
+            menu.PlacementTarget = button;
+            menu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
+            menu.IsOpen = true;
+        }
+    }
+
+    private void OnChatMessagesChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
+    {
+        if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
+        {
+            ChatListBox.ScrollIntoView(ChatListBox.Items[^1]);
+        }
+    }
+
+    private void MirrorButton_Click(object sender, RoutedEventArgs e)
+    {
+        if ((DataContext as MainViewModel)?.SelectedElement is WebcamSceneConfig webcam)
+            webcam.IsMirrored = !webcam.IsMirrored;
+    }
+
+    private void ShapeButton_Click(object sender, RoutedEventArgs e)
+    {
+        if ((DataContext as MainViewModel)?.SelectedElement is WebcamSceneConfig webcam)
+            webcam.ToggleClipShape();
+    }
+
+    private void SourceMenu_Remove(object sender, RoutedEventArgs e)
+    {
+        if (sender is MenuItem { DataContext: SceneElement element } && DataContext is MainViewModel vm)
+            vm.RemoveSourceCommand.Execute(element);
+    }
+
+    private void BackgroundMenu_ChangeCapture(object sender, RoutedEventArgs e)
+    {
+        _ = (DataContext as MainViewModel)?.ChangeBackgroundCaptureAsync();
+    }
+
+    private void BackgroundMenu_RefreshCapture(object sender, RoutedEventArgs e)
+    {
+        (DataContext as MainViewModel)?.RefreshBackgroundAutoCapture();
+    }
+
+    private void OpacitySlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        => OpacityValueText.Text = $"{Math.Round(e.NewValue * 100)}%";
+
+    private void SourceNameBox_KeyDown(object sender, KeyEventArgs e)
+    {
+        if (e.Key is Key.Enter or Key.Escape)
+        {
+            CommitSourceEdit(sender);
+            e.Handled = true;
+        }
+    }
+
+    private void SourceNameBox_LostFocus(object sender, RoutedEventArgs e)
+    {
+        CommitSourceEdit(sender);
+    }
+
+    private static void CommitSourceEdit(object sender)
+    {
+        if (sender is FrameworkElement { DataContext: SceneElement element })
+            element.IsEditing = false;
+    }
+
+    // ─── List drag-to-reorder (scenes list + sources list) ───
+    private void List_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        var listBox = (ListBox)sender;
+        var item = FindItemContainerAt(listBox, e.GetPosition(listBox));
+        if (item == null)
+        {
+            if (ReferenceEquals(listBox, SourceList))
+                (DataContext as MainViewModel)!.SelectedElement = null;
+            _dragIndex = -1;
+            return;
+        }
+        if (listBox.ItemsSource is not IList items || items.Count == 0)
+        {
+            _dragIndex = -1;
+            return;
+        }
+        _dragIndex = listBox.Items.IndexOf(item.DataContext);
+        _dragStartPoint = e.GetPosition(listBox);
+        _isDragging = false;
+        _lastHoveredItem = null;
+    }
+
+    private void List_PreviewMouseMove(object sender, MouseEventArgs e)
+    {
+        if (_dragIndex < 0) return;
+        var listBox = (ListBox)sender;
+        if (e.LeftButton != MouseButtonState.Pressed || listBox.ItemsSource is not IList items)
+        {
+            EndListDrag(listBox);
+            return;
+        }
+
+        var position = e.GetPosition(listBox);
+        if (!_isDragging)
+        {
+            if (Math.Abs(position.X - _dragStartPoint.X) < SystemParameters.MinimumHorizontalDragDistance &&
+                Math.Abs(position.Y - _dragStartPoint.Y) < SystemParameters.MinimumVerticalDragDistance)
+                return;
+            _isDragging = true;
+            listBox.CaptureMouse();
+        }
+
+        var item = FindItemContainerAt(listBox, position);
+        if (item == null) return;
+
+        var targetItem = item.DataContext;
+        if (ReferenceEquals(targetItem, items[_dragIndex]) || ReferenceEquals(targetItem, _lastHoveredItem))
+            return;
+
+        var targetIndex = listBox.Items.IndexOf(targetItem);
+        if (targetIndex < 0) return;
+
+        var dragged = items[_dragIndex];
+        items.RemoveAt(_dragIndex);
+        items.Insert(targetIndex, dragged);
+        _dragIndex = targetIndex;
+        _lastHoveredItem = targetItem;
+    }
+
+    private void List_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        EndListDrag((ListBox)sender);
+    }
+
+    private void EndListDrag(ListBox listBox)
+    {
+        if (_isDragging)
+            listBox.ReleaseMouseCapture();
+        _dragIndex = -1;
+        _isDragging = false;
+        _lastHoveredItem = null;
+    }
+
+    private static ListBoxItem? FindItemContainerAt(ListBox listBox, Point position)
+    {
+        var hit = listBox.InputHitTest(position) as DependencyObject;
+        while (hit != null && hit != listBox)
+        {
+            if (hit is ListBoxItem item) return item;
+            hit = VisualTreeHelper.GetParent(hit);
+        }
+        return null;
+    }
+
+    private void TakeSnapshot(MainViewModel vm)
+    {
+        if (vm.SelectedElement is Models.Source src)
+        {
+            _snapshotElement = src;
+            _snapshotBorderColor = src.BorderColor;
+            _snapshotBorderWidth = src.BorderWidth;
+            _snapshotTimerMinutes = src.TimerMinutes;
+            _snapshotWebUri = src.WebUri;
+        }
+    }
+
+    private void WebcamBorderColorPicker_Click(object sender, RoutedEventArgs e)
+    {
+        if ((DataContext as MainViewModel)?.SelectedElement is not SceneElement src) return;
+        if (sender is FrameworkElement fe && fe.ContextMenu == null)
+        {
+            var menu = new System.Windows.Controls.ContextMenu();
+            string[] colors = ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF",
+                               "#FFFF00", "#FF00FF", "#00FFFF", "#FF8800", "#8800FF",
+                               "#e94560", "#22c55e", "#3b82f6", "#f59e0b"];
+            foreach (var c in colors)
+            {
+                var item = new System.Windows.Controls.MenuItem { Header = c, ToolTip = c };
+                var brush = new System.Windows.Media.SolidColorBrush(
+                    (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString(c));
+                item.Icon = new System.Windows.Controls.Border
+                {
+                    Width = 16, Height = 16,
+                    Background = brush,
+                    CornerRadius = new System.Windows.CornerRadius(2)
+                };
+                var color = c;
+                item.Click += (_, _) => src.BorderColor = color;
+                menu.Items.Add(item);
+            }
+            fe.ContextMenu = menu;
+        }
+        if (sender is FrameworkElement fe2)
+            fe2.ContextMenu.IsOpen = true;
+    }
+
+    private void WebcamBorderRevert_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+        {
+            src.BorderColor = _snapshotBorderColor;
+            src.BorderWidth = _snapshotBorderWidth;
+        }
+    }
+
+    private void WebcamBorderAccept_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+        {
+            _snapshotBorderColor = src.BorderColor;
+            _snapshotBorderWidth = src.BorderWidth;
+        }
+    }
+
+    private void CountdownRevert_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+            src.TimerMinutes = _snapshotTimerMinutes;
+    }
+
+    private void CountdownAccept_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+            _snapshotTimerMinutes = src.TimerMinutes;
+    }
+
+    private void WebRevert_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+            src.WebUri = string.Empty;
+        _snapshotWebUri = string.Empty;
+    }
+
+    private void WebAccept_Click(object sender, RoutedEventArgs e)
+    {
+        if (_snapshotElement is Models.Source src)
+            _snapshotWebUri = src.WebUri;
+    }
+}

Controls/OverlayHost.xaml

@@ -0,0 +1,172 @@
+<UserControl x:Class="ytLive.Controls.OverlayHost"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:Helpers="clr-namespace:ytLive.Helpers">
+        <Grid Grid.RowSpan="3"
+              Visibility="{Binding IsAnyOverlayOpen, Converter={StaticResource BoolToVis}}">
+            <Button Background="#99000000" BorderThickness="0" Cursor="Hand"
+                    Command="{Binding CloseOverlayCommand}">
+                <Button.Template>
+                    <ControlTemplate TargetType="Button">
+                        <Border Background="{TemplateBinding Background}"/>
+                    </ControlTemplate>
+                </Button.Template>
+            </Button>
+
+            <Border Background="#0A0C1A" CornerRadius="8" Width="650" MaxHeight="700"
+                    VerticalAlignment="Center" HorizontalAlignment="Center"
+                    Padding="28" BorderBrush="#333" BorderThickness="1">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- Header -->
+                    <Grid Grid.Row="0">
+                        <TextBlock Text="{Binding OverlayTitle}" FontSize="18" FontWeight="Bold"
+                                   Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                        <Button HorizontalAlignment="Right" ToolTip="Close" Style="{StaticResource IconButton}"
+                                Command="{Binding CloseOverlayCommand}">
+                            <Path Data="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
+                                  Fill="#d0d0d0" Width="14" Height="14" Stretch="Uniform"/>
+                        </Button>
+                    </Grid>
+
+                    <!-- App Settings: broadcast fields live in the preview's
+                         Text pull-out now — this panel keeps app-level prefs only.
+                         (Currently empty; the overlay shell stays for future use.) -->
+                    <StackPanel Grid.Row="1" Margin="0,16,0,0"
+                                Visibility="{Binding IsSettingsOpen, Converter={StaticResource BoolToVis}}">
+                        <TextBlock Text="Default Location for Recordings" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                        <TextBox Style="{StaticResource YtTextBox}" 
+                                 Text="{Binding RecordFolderDisplay, Mode=OneWay}"
+                                 IsReadOnly="True" Margin="0,0,0,12" Foreground="#a0a0b0"/>
+                        <StackPanel Orientation="Horizontal">
+                            <Button Content="Browse…" Command="{Binding ChooseRecordFolderCommand}"
+                                    Style="{StaticResource YtButtonSecondary}" Margin="0,0,8,0"/>
+                            <Button Content="Use Downloads" Command="{Binding ResetRecordFolderCommand}"
+                                    Style="{StaticResource YtButtonSecondary}"/>
+                        </StackPanel>
+                    </StackPanel>
+
+                    <!-- Report Bug -->
+                    <StackPanel Grid.Row="1" Margin="0,16,0,0"
+                                Visibility="{Binding IsBugOpen, Converter={StaticResource BoolToVis}}">
+                        <TextBlock Text="What went wrong?" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                        <TextBox Style="{StaticResource YtTextBox}" Height="110" AcceptsReturn="True" TextWrapping="Wrap"
+                                 Margin="0,0,0,12"
+                                 Text="{Binding BugReportText, UpdateSourceTrigger=PropertyChanged}"
+                                 VerticalScrollBarVisibility="Auto"/>
+
+                        <TextBlock Text="Email (optional)" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                        <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,12"
+                                 Text="{Binding BugReportEmail, UpdateSourceTrigger=PropertyChanged}"/>
+
+                        <TextBlock Text="Opens a pre-filled email to the LlamaCasty team." Style="{StaticResource YtLabel}"/>
+                        <Button Content="Send Report" Command="{Binding SubmitBugCommand}"
+                                Style="{StaticResource YtButton}" HorizontalAlignment="Right" Margin="0,16,0,0"/>
+                    </StackPanel>
+
+                    <!-- Feature Request -->
+                    <StackPanel Grid.Row="1" Margin="0,16,0,0"
+                                Visibility="{Binding IsFeatureOpen, Converter={StaticResource BoolToVis}}">
+                        <TextBlock Text="What would you like to see?" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                        <TextBox Style="{StaticResource YtTextBox}" Height="110" AcceptsReturn="True" TextWrapping="Wrap"
+                                 Margin="0,0,0,12"
+                                 Text="{Binding FeatureRequestText, UpdateSourceTrigger=PropertyChanged}"
+                                 VerticalScrollBarVisibility="Auto"/>
+
+                        <TextBlock Text="Email (optional)" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                        <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,12"
+                                 Text="{Binding FeatureRequestEmail, UpdateSourceTrigger=PropertyChanged}"/>
+
+                        <TextBlock Text="Opens a pre-filled email to the LlamaCasty team." Style="{StaticResource YtLabel}"/>
+                        <Button Content="Send Request" Command="{Binding SubmitFeatureCommand}"
+                                Style="{StaticResource YtButton}" HorizontalAlignment="Right" Margin="0,16,0,0"/>
+                    </StackPanel>
+
+                    <!-- About -->
+                    <Grid Grid.Row="1" Margin="0,16,0,0"
+                          Background="#171928"
+                          Visibility="{Binding IsAboutOpen, Converter={StaticResource BoolToVis}}">
+
+                        <!-- Hub view -->
+                        <StackPanel Visibility="{Binding IsHubVisible, Converter={StaticResource BoolToVis}}">
+                            <Image Source="/ytLive;component/Assets/llamacasty-logo.jpg" Height="125" Stretch="Uniform"
+                                   HorizontalAlignment="Center" Margin="0,0,0,12"/>
+                            <TextBlock Text="{Binding AppVersionLabel}" Foreground="#a0a0b0" FontSize="12"
+                                       HorizontalAlignment="Center" Margin="0,4,0,0"/>
+                            <TextBlock Text="Live streaming for YouTube — simple enough that even the most right-brained person can intuit it."
+                                       Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" MaxWidth="380"
+                                       TextAlignment="Center" Margin="0,16,0,0"/>
+                            <TextBlock Text="Free forever — live streams carry a brief &quot;made with LlamaCasty!&quot; flash. A subscription removes it and adds alerts."
+                                       Foreground="#888" FontSize="12" TextWrapping="Wrap" MaxWidth="380"
+                                       TextAlignment="Center" Margin="0,12,0,0"/>
+                            <TextBlock Text="Made by gramps · llama chile shop" Foreground="#a0a0b0" FontSize="12"
+                                       HorizontalAlignment="Center" Margin="0,16,0,8"/>
+
+                            <!-- Creator hub links -->
+                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,8">
+                                <Button Content="llama chile shop on YouTube" Command="{Binding OpenChannelCommand}"
+                                        Style="{StaticResource YtButtonSecondary}" Margin="0,0,8,0"/>
+                                <Button Content="Mastodon" Command="{Binding OpenMastodonCommand}"
+                                        Style="{StaticResource YtButtonSecondary}"/>
+                            </StackPanel>
+                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
+                                <Button Content="Buy me a coffee" Command="{Binding OpenCoffeeCommand}"
+                                        Style="{StaticResource YtButtonSecondary}" Margin="0,0,8,0"/>
+                                <Button Content="Unlock Premium" Command="{Binding OpenPremiumCommand}"
+                                        Style="{StaticResource YtButtonSecondary}"
+                                        IsEnabled="{Binding IsPremiumAvailable}"
+                                        ToolTip="Open the LlamaCasty subscription page"/>
+                                <Button Content="Enter License Key" Command="{Binding OpenLicenseEntryCommand}"
+                                        Style="{StaticResource YtButtonSecondary}"
+                                        ToolTip="Activate a license key to remove the watermark"/>
+                            </StackPanel>
+
+                            <Button Content="Licenses &amp; legal" Command="{Binding OpenLicensesCommand}"
+                                    Style="{StaticResource YtButtonSecondary}" HorizontalAlignment="Center"
+                                    Margin="0,16,0,0"/>
+                        </StackPanel>
+
+                        <!-- Licensing/legal panel -->
+                        <StackPanel Visibility="{Binding IsLicensesOpen, Converter={StaticResource BoolToVis}}">
+                            <TextBlock Text="Third-party notices &amp; license texts" FontSize="15" FontWeight="Bold"
+                                       Foreground="#e0e0e0" Margin="0,0,0,8"/>
+                            <Border Background="#10101e" CornerRadius="4" Padding="10" MaxHeight="360"
+                                    BorderBrush="#333" BorderThickness="1">
+                                <ScrollViewer VerticalScrollBarVisibility="Auto">
+                                    <TextBlock Text="{Binding LicensesText}" Foreground="#b8b8c8" FontSize="11"
+                                               FontFamily="Consolas" TextWrapping="Wrap"/>
+                                </ScrollViewer>
+                            </Border>
+                            <Button Content="← Back to About" Style="{StaticResource YtButtonSecondary}"
+                                    HorizontalAlignment="Left" Margin="0,12,0,0"
+                                    Click="BackToAbout_Click"/>
+                        </StackPanel>
+
+                        <!-- License key entry panel -->
+                        <StackPanel Visibility="{Binding IsLicenseEntryOpen, Converter={StaticResource BoolToVis}}">
+                            <TextBlock Text="Activate LlamaCasty Premium" FontSize="15" FontWeight="Bold"
+                                       Foreground="#e0e0e0" Margin="0,0,0,8"/>
+                            <TextBlock Text="Enter your license key to remove the branding watermark."
+                                       Foreground="#a0a0b0" FontSize="12" TextWrapping="Wrap" Margin="0,0,0,12"/>
+                            <TextBlock Text="License Key" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
+                            <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,12"
+                                     Text="{Binding LicenseKey, UpdateSourceTrigger=PropertyChanged}"
+                                     MaxLength="100"/>
+                            <Button Content="Activate" Command="{Binding ActivateLicenseCommand}"
+                                    Style="{StaticResource YtButton}" HorizontalAlignment="Right"
+                                    Margin="0,0,0,8"/>
+                            <TextBlock Text="{Binding LicenseMessage}" Foreground="#a0a0b0" FontSize="12"
+                                       TextWrapping="Wrap" Margin="0,0,0,8"/>
+                            <Button Content="← Back to About" Style="{StaticResource YtButtonSecondary}"
+                                    HorizontalAlignment="Left" Margin="0,8,0,0"
+                                    Click="BackToAbout_Click"/>
+                        </StackPanel>
+                    </Grid>
+                </Grid>
+            </Border>
+        </Grid>
+</UserControl>

Controls/OverlayHost.xaml.cs

@@ -0,0 +1,22 @@
+using System.Windows;
+using System.Windows.Controls;
+using ytLive.ViewModels;
+
+namespace ytLive.Controls;
+
+public partial class OverlayHost : UserControl
+{
+    public OverlayHost()
+    {
+        InitializeComponent();
+    }
+
+    private void BackToAbout_Click(object sender, RoutedEventArgs e)
+    {
+        if (DataContext is MainViewModel vm)
+        {
+            vm.IsLicensesOpen = false;
+            vm.IsLicenseEntryOpen = false;
+        }
+    }
+}

Controls/PreviewPane.xaml

@@ -0,0 +1,664 @@
+<UserControl x:Class="ytLive.Controls.PreviewPane"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:Helpers="clr-namespace:ytLive.Helpers">
+    <Border Background="#0a0a1a" CornerRadius="6" Margin="8,0"
+            BorderBrush="{Binding PreviewGlowBrush}" BorderThickness="{Binding PreviewGlowThickness}">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- Preview monitor -->
+                    <Grid x:Name="PreviewGrid" Grid.Row="0"
+                          PreviewMouseLeftButtonDown="Preview_MouseLeftButtonDown"
+                          PreviewMouseMove="Preview_MouseMove"
+                          PreviewMouseLeftButtonUp="Preview_MouseLeftButtonUp">
+                        <Viewbox Stretch="Uniform">
+                            <Grid x:Name="CanvasGrid" Width="1920" Height="1080" ClipToBounds="True" Background="Transparent">
+                                <Grid.ContextMenu>
+                                    <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                                        <MenuItem Header="Show Desktop" IsCheckable="True"
+                                                  IsChecked="{Binding BackgroundShowDesktop}"
+                                                  Visibility="{Binding CanChangeBackground, Converter={StaticResource BoolToVis}}"
+                                                  ToolTip="Show desktop when no fullscreen game is detected"/>
+                                        <MenuItem Header="Capture Desktop"
+                                                  Visibility="{Binding CanChangeBackground, Converter={StaticResource BoolToVis}}"
+                                                  ItemsSource="{Binding Displays}">
+                                            <MenuItem.ItemContainerStyle>
+                                                <Style TargetType="MenuItem">
+                                                    <Setter Property="Header" Value="{Binding Label}"/>
+                                                    <Setter Property="Command"
+                                                            Value="{Binding DataContext.SetBackgroundDisplayCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
+                                                    <Setter Property="CommandParameter" Value="{Binding}"/>
+                                                </Style>
+                                            </MenuItem.ItemContainerStyle>
+                                        </MenuItem>
+                                        <MenuItem Header="Refresh Desktop" Command="{Binding RefreshCaptureCommand}"
+                                                  Visibility="{Binding CanChangeBackground, Converter={StaticResource BoolToVis}}"/>
+                                    </ContextMenu>
+                                </Grid.ContextMenu>
+                                <!-- Live desktop/game background (bottom layer; the static
+                                     image renders above it). -->
+                                <Image Source="{Binding BackgroundImage}" Stretch="UniformToFill"
+                                       Visibility="{Binding BackgroundVisible, Converter={StaticResource BoolToVis}}"
+                                       IsHitTestVisible="False"/>
+                                <Image Source="{Binding ActiveBackgroundImage}" Stretch="UniformToFill"
+                                       IsHitTestVisible="False"/>
+                                <Rectangle Stroke="#22c55e" StrokeThickness="6" IsHitTestVisible="False"/>
+                                <Canvas x:Name="OverlayCanvas" Width="1920" Height="1080">
+                                    <ItemsControl ItemsSource="{Binding StagedScene.Elements}"
+                                                  Width="1920" Height="1080">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <Canvas/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemContainerStyle>
+                                            <Style TargetType="ContentPresenter">
+                                                <Setter Property="Canvas.Left" Value="{Binding X}"/>
+                                                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
+                                            </Style>
+                                        </ItemsControl.ItemContainerStyle>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <Grid Width="{Binding Width}" Height="{Binding Height}"
+                                                      Opacity="{Binding Opacity}"
+                                                      Background="Transparent"
+                                                      RenderTransformOrigin="0.5,0.5">
+                                                    <Grid.Style>
+                                                        <Style TargetType="Grid">
+                                                            <Setter Property="Visibility" Value="Collapsed"/>
+                                                            <Style.Triggers>
+                                                                <DataTrigger Binding="{Binding IsVisible}" Value="True">
+                                                                    <Setter Property="Visibility" Value="Visible"/>
+                                                                </DataTrigger>
+                                                                <!-- The background is a fixed full-frame layer (rendered separately,
+                                                                     below the static background): never hit-testable, so it can't be
+                                                                     selected, dragged, or bring up the webcam context menu. -->
+                                                                <DataTrigger Binding="{Binding IsBackground}" Value="True">
+                                                                    <Setter Property="IsHitTestVisible" Value="False"/>
+                                                                </DataTrigger>
+                                                            </Style.Triggers>
+                                                        </Style>
+                                                    </Grid.Style>
+                                                    <Grid.RenderTransform>
+                                                        <ScaleTransform ScaleX="{Binding MirrorScale}"/>
+                                                    </Grid.RenderTransform>
+                                                     <Image Source="{Binding DisplaySource}"
+                                                           RenderOptions.BitmapScalingMode="HighQuality">
+                                                        <Image.Style>
+                                                            <Style TargetType="Image">
+                                                                <Setter Property="Visibility" Value="Collapsed"/>
+                                                                <Setter Property="Stretch" Value="UniformToFill"/>
+                                                                <Style.Triggers>
+                                                                    <DataTrigger Binding="{Binding IsImageSource}" Value="True">
+                                                                        <Setter Property="Visibility" Value="Visible"/>
+                                                                    </DataTrigger>
+                                                                    <DataTrigger Binding="{Binding IsChatBox}" Value="True">
+                                                                         <Setter Property="Visibility" Value="Visible"/>
+                                                                     </DataTrigger>
+                                                                     <DataTrigger Binding="{Binding IsWebSource}" Value="True">
+                                                                         <Setter Property="Visibility" Value="Visible"/>
+                                                                         <Setter Property="Stretch" Value="Fill"/>
+                                                                     </DataTrigger>
+                                                                     <MultiDataTrigger>
+                                                                        <MultiDataTrigger.Conditions>
+                                                                            <Condition Binding="{Binding IsWebcam}" Value="True"/>
+                                                                            <Condition Binding="{Binding ClipShape}" Value="Traditional"/>
+                                                                        </MultiDataTrigger.Conditions>
+                                                                        <Setter Property="Visibility" Value="Visible"/>
+                                                                    </MultiDataTrigger>
+                                                                </Style.Triggers>
+                                                            </Style>
+                                                        </Image.Style>
+                                                    </Image>
+                                                    <Viewbox Stretch="Uniform">
+                                                        <Grid Width="1" Height="1">
+                                                            <!-- Round webcam: a plain Image (the same efficient WriteableBitmap
+                                                                 path as Traditional) clipped to a unit circle and scaled by the
+                                                                 Viewbox — deliberately NOT an ImageBrush, whose per-frame
+                                                                 re-rasterization at full scale stalls the preview. -->
+                                                            <Image Stretch="UniformToFill"
+                                                                   Source="{Binding DisplaySource}"
+                                                                   RenderOptions.BitmapScalingMode="HighQuality">
+                                                                <Image.Style>
+                                                                    <Style TargetType="Image">
+                                                                        <Setter Property="Visibility" Value="Collapsed"/>
+                                                                        <Style.Triggers>
+                                                                            <MultiDataTrigger>
+                                                                                <MultiDataTrigger.Conditions>
+                                                                                    <Condition Binding="{Binding IsWebcam}" Value="True"/>
+                                                                                    <Condition Binding="{Binding ClipShape}" Value="Round"/>
+                                                                                </MultiDataTrigger.Conditions>
+                                                                                <Setter Property="Visibility" Value="Visible"/>
+                                                                            </MultiDataTrigger>
+                                                                        </Style.Triggers>
+                                                                    </Style>
+                                                                </Image.Style>
+                                                                <Image.Clip>
+                                                                    <EllipseGeometry Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"/>
+                                                                </Image.Clip>
+                                                            </Image>
+                                                        </Grid>
+                                                    </Viewbox>
+
+                                                    <!-- OBS-style border: stroked rect (Traditional) / centered circle (Round).
+                                                         Animations are driven by code-behind in WebcamMenu_SetBorderAnimation
+                                                         because DataTrigger storyboards in DataTemplates cannot be stopped
+                                                         (no ExitActions namescope support). -->
+                                                    <Rectangle IsHitTestVisible="False"
+                                                               Stroke="{Binding BorderBrush}"
+                                                               StrokeThickness="{Binding BorderWidth}">
+                                                        <Rectangle.Style>
+                                                            <Style TargetType="Rectangle">
+                                                                <Setter Property="Visibility" Value="Collapsed"/>
+                                                                <Style.Triggers>
+                                                                    <MultiDataTrigger>
+                                                                        <MultiDataTrigger.Conditions>
+                                                                            <Condition Binding="{Binding HasBorder}" Value="True"/>
+                                                                            <Condition Binding="{Binding ClipShape}" Value="Traditional"/>
+                                                                        </MultiDataTrigger.Conditions>
+                                                                        <Setter Property="Visibility" Value="Visible"/>
+                                                                    </MultiDataTrigger>
+                                                                </Style.Triggers>
+                                                            </Style>
+                                                        </Rectangle.Style>
+                                                    </Rectangle>
+                                                    <Ellipse IsHitTestVisible="False"
+                                                             Stroke="{Binding BorderBrush}"
+                                                             StrokeThickness="{Binding BorderWidth}"
+                                                             Width="{Binding RoundBorderSize}"
+                                                             Height="{Binding RoundBorderSize}"
+                                                             HorizontalAlignment="Center" VerticalAlignment="Center">
+                                                        <Ellipse.Style>
+                                                            <Style TargetType="Ellipse">
+                                                                <Setter Property="Visibility" Value="Collapsed"/>
+                                                                <Style.Triggers>
+                                                                    <MultiDataTrigger>
+                                                                        <MultiDataTrigger.Conditions>
+                                                                            <Condition Binding="{Binding HasBorder}" Value="True"/>
+                                                                            <Condition Binding="{Binding ClipShape}" Value="Round"/>
+                                                                        </MultiDataTrigger.Conditions>
+                                                                        <Setter Property="Visibility" Value="Visible"/>
+                                                                    </MultiDataTrigger>
+                                                                </Style.Triggers>
+                                                            </Style>
+                                                        </Ellipse.Style>
+                                                    </Ellipse>
+
+                                                    <Grid.ContextMenu>
+                                                        <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                                                            <MenuItem Header="Change Webcam…" Click="WebcamMenu_ChangeWebcam"
+                                                                      Visibility="{Binding IsWebcam, Converter={StaticResource BoolToVis}}"/>
+                                                            <Separator/>
+                                                            <MenuItem Header="Border Thickness">
+                                                                <StackPanel Orientation="Horizontal" Margin="8,2">
+                                                                    <TextBlock Text="Thickness" Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                                                                    <Slider Width="120" Minimum="0" Maximum="20" Margin="8,0,0,0"
+                                                                            Value="{Binding BorderWidth, Mode=TwoWay}"
+                                                                            VerticalAlignment="Center"/>
+                                                                </StackPanel>
+                                                            </MenuItem>
+                                                            <MenuItem Header="Border Opacity">
+                                                                <StackPanel Orientation="Horizontal" Margin="8,2">
+                                                                    <TextBlock Text="Opacity" Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                                                                    <Slider Width="120" Minimum="0" Maximum="1" Margin="8,0,0,0"
+                                                                            Value="{Binding BorderOpacity, Mode=TwoWay}"
+                                                                            VerticalAlignment="Center"/>
+                                                                </StackPanel>
+                                                            </MenuItem>
+                                                            <MenuItem Header="Border Color">
+                                                                <MenuItem Header="None" Tag="" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=''}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#ffffff" Tag="#ffffff" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#ffffff}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#000000" Tag="#000000" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#000000}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#e94560" Tag="#e94560" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#e94560}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#22c55e" Tag="#22c55e" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#22c55e}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#eab308" Tag="#eab308" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#eab308}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                                <MenuItem Header="#38bdf8" Tag="#38bdf8" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#38bdf8}"
+                                                                          Click="WebcamMenu_SetBorderColor"/>
+                                                            </MenuItem>
+                                                            <MenuItem Header="Border Effect">
+                                                                <MenuItem Header="None" Tag="None" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=None}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Pulse" Tag="Pulse" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Pulse}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Chase" Tag="Chase" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Chase}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Rainbow" Tag="Rainbow" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Rainbow}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Shimmer" Tag="Shimmer" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Shimmer}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Marching Ants" Tag="MarchingAnts" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=MarchingAnts}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Glow" Tag="Glow" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Glow}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Electricity" Tag="Electricity" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Electricity}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                                <MenuItem Header="Sparkles" Tag="Sparkles" IsCheckable="True"
+                                                                          IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=Sparkles}"
+                                                                          Click="WebcamMenu_SetBorderAnimation"/>
+                                                            </MenuItem>
+                                                            <Separator/>
+                                                            <MenuItem Header="Hide in this scene" Click="WebcamMenu_HideInScene"/>
+                                                            <MenuItem Header="Remove" Click="WebcamMenu_Remove"/>
+                                                        </ContextMenu>
+                                                    </Grid.ContextMenu>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+
+                                    <Grid x:Name="SelectionOverlay" IsHitTestVisible="False"
+                                          Canvas.Left="{Binding SelectedElement.X}" Canvas.Top="{Binding SelectedElement.Y}"
+                                          Width="{Binding SelectedElement.Width}" Height="{Binding SelectedElement.Height}">
+                                        <Rectangle Stroke="#e94560" StrokeDashArray="4 3" StrokeThickness="3"/>
+                                        <Ellipse Width="26" Height="26" Fill="#e94560" Stroke="White" StrokeThickness="2"
+                                                 HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,-13,-13"/>
+                                    </Grid>
+
+                                    <ItemsControl ItemsSource="{Binding DimRects}" IsHitTestVisible="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <Canvas/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemContainerStyle>
+                                            <Style TargetType="ContentPresenter">
+                                                <Setter Property="Canvas.Left" Value="{Binding X}"/>
+                                                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
+                                            </Style>
+                                        </ItemsControl.ItemContainerStyle>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <Rectangle Width="{Binding Width}" Height="{Binding Height}"
+                                                           Fill="#000000" Opacity="0.55"/>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+
+                                    <Rectangle IsHitTestVisible="False" Stroke="#e94560" StrokeThickness="3"
+                                               Canvas.Left="{Binding OutputRectX}" Canvas.Top="{Binding OutputRectY}"
+                                               Width="{Binding OutputRectWidth}" Height="{Binding OutputRectHeight}"
+                                               Visibility="{Binding IsOutputCropped, Converter={StaticResource BoolToVis}}"/>
+
+                                    <Grid x:Name="BrandFlashLayer" Width="1920" Height="1080" IsHitTestVisible="False" Opacity="0">
+                                        <Grid.Style>
+                                            <Style TargetType="Grid">
+                                                <Setter Property="Opacity" Value="0"/>
+                                                <Style.Triggers>
+                                                    <DataTrigger Binding="{Binding BrandFlashActive}" Value="True">
+                                                        <DataTrigger.EnterActions>
+                                                            <BeginStoryboard>
+                                                                <Storyboard>
+                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                                                                     From="0" To="0.25" Duration="0:0:0.25"/>
+                                                                </Storyboard>
+                                                            </BeginStoryboard>
+                                                        </DataTrigger.EnterActions>
+                                                        <DataTrigger.ExitActions>
+                                                            <BeginStoryboard>
+                                                                <Storyboard>
+                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                                                                     From="0.25" To="0" Duration="0:0:0.25"/>
+                                                                </Storyboard>
+                                                            </BeginStoryboard>
+                                                        </DataTrigger.ExitActions>
+                                                    </DataTrigger>
+                                                </Style.Triggers>
+                                            </Style>
+                                        </Grid.Style>
+                                        <Viewbox Stretch="Uniform" MaxWidth="1600" MaxHeight="800"
+                                                 HorizontalAlignment="Center" VerticalAlignment="Center">
+                                            <TextBlock Text="made with LlamaCasty!" FontWeight="Bold" Foreground="White"
+                                                       FontSize="180" TextAlignment="Center"/>
+                                        </Viewbox>
+                                    </Grid>
+
+                                    <!-- Social bar: one centered horizontal row at the top or bottom of
+                                         the frame, green glow while enabled. Global resource — never a
+                                         Source, no Sources entry. Click toggles top ⇄ bottom. -->
+                                    <Grid x:Name="SocialBarElement" Width="1920" Canvas.Top="{Binding SocialBarTop}"
+                                          Background="Transparent"
+                                          Visibility="{Binding SocialBarVisible, Converter={StaticResource BoolToVis}}"
+                                          MouseLeftButtonDown="SocialBar_MouseLeftButtonDown"
+                                          Cursor="Hand">
+                                        <Grid.Effect>
+                                            <DropShadowEffect Color="{Binding SocialBarGlowBrush.Color}"
+                                                              BlurRadius="18" ShadowDepth="0" Opacity="0.9"/>
+                                        </Grid.Effect>
+                                        <ItemsControl ItemsSource="{Binding Socials.Entries}"
+                                                      HorizontalAlignment="Center" Margin="40,8"
+                                                      IsHitTestVisible="False">
+                                            <ItemsControl.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <StackPanel Orientation="Horizontal"/>
+                                                </ItemsPanelTemplate>
+                                            </ItemsControl.ItemsPanel>
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate>
+                                                    <StackPanel Orientation="Horizontal" Margin="0,0,20,0">
+                                                        <Path Data="{Binding LogoData}" Fill="White" Width="24" Height="24"
+                                                              Stretch="Uniform" VerticalAlignment="Center"/>
+                                                        <TextBlock Text="{Binding Handle}" Foreground="White"
+                                                                   FontSize="14" VerticalAlignment="Center"
+                                                                   Margin="8,0,0,0"/>
+                                                    </StackPanel>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </Grid>
+                                </Canvas>
+                            </Grid>
+                        </Viewbox>
+                        <Border HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,8,0,0"
+                                Background="#CCe94560" CornerRadius="4" Padding="8,3" IsHitTestVisible="False"
+                                Visibility="{Binding WebcamError, Converter={StaticResource NotNullToVis}}">
+                            <TextBlock Text="{Binding WebcamError}" Foreground="White" FontSize="12"
+                                       MaxWidth="520" TextTrimming="CharacterEllipsis"/>
+                        </Border>
+                        <TextBlock Text="Preview" Foreground="#333" FontSize="24"
+                                   HorizontalAlignment="Center" VerticalAlignment="Center"
+                                   Visibility="{Binding ShowPreviewPlaceholder, Converter={StaticResource BoolToVis}}"/>
+                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
+                                    Visibility="{Binding ShowEmptySceneHint, Converter={StaticResource BoolToVis}}">
+                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
+                                <TextBlock Text="🖥️" Foreground="White" FontSize="30" Margin="0,0,20,0"/>
+                                <TextBlock Text="📷" Foreground="White" FontSize="30" Margin="0,0,20,0"/>
+                                <TextBlock Text="🖼️" Foreground="White" FontSize="30" Margin="0,0,20,0"/>
+                                <TextBlock Text="✏️" Foreground="White" FontSize="30"/>
+                            </StackPanel>
+                            <TextBlock Text="Make it yours!" Foreground="#e0e0e0" FontSize="18"
+                                       FontWeight="SemiBold" HorizontalAlignment="Center" Margin="0,18,0,0"/>
+                                    <TextBlock Text="Add layers — your webcam, your screen, images, and text — to craft a brand and identity that's unmistakably you."
+                                       Foreground="#a0a0b0" FontSize="13" Margin="0,8,0,0"
+                                       TextWrapping="Wrap" MaxWidth="440" TextAlignment="Center"
+                                       HorizontalAlignment="Center"/>
+                        </StackPanel>
+                    </Grid>
+
+                    <!-- ═══ BROADCAST TEXT PULL-OUT (always visible) ═══
+                         White "Stream Settings" tab on the preview's right edge; clicking it
+                         toggles the broadcast-metadata form, and any click outside
+                         the form collapses it. Edits persist locally immediately;
+                         Update pushes liveBroadcasts.update. -->
+                    <Grid Grid.Row="0">
+                        <StackPanel x:Name="TextPullOutHost" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Stretch">
+                            <Border Background="#16213e" ClipToBounds="True">
+                                <Border.Style>
+                                    <Style TargetType="Border">
+                                        <Setter Property="Width" Value="0"/>
+                                        <Style.Triggers>
+                                            <DataTrigger Binding="{Binding BroadcastForm.IsDrawerOpen}" Value="True">
+                                                <DataTrigger.EnterActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <DoubleAnimation Storyboard.TargetProperty="Width"
+                                                                             To="320" Duration="0:0:0.2">
+                                                                <DoubleAnimation.EasingFunction>
+                                                                    <CubicEase EasingMode="EaseOut"/>
+                                                                </DoubleAnimation.EasingFunction>
+                                                            </DoubleAnimation>
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </DataTrigger.EnterActions>
+                                                <DataTrigger.ExitActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <DoubleAnimation Storyboard.TargetProperty="Width"
+                                                                             To="0" Duration="0:0:0.2">
+                                                                <DoubleAnimation.EasingFunction>
+                                                                    <CubicEase EasingMode="EaseOut"/>
+                                                                </DoubleAnimation.EasingFunction>
+                                                            </DoubleAnimation>
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </DataTrigger.ExitActions>
+                                            </DataTrigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </Border.Style>
+                                <!-- Fixed-width inner so text never reflows mid-animation -->
+                                <Grid Width="320" Margin="14,10,14,12">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="*"/>
+                                        <RowDefinition Height="Auto"/>
+                                    </Grid.RowDefinitions>
+                                    <Grid Grid.Row="0" Margin="0,0,0,8">
+                                        <TextBlock Text="BROADCAST TEXT" Style="{StaticResource SectionHeader}"
+                                                   HorizontalAlignment="Left"/>
+                                        <Button HorizontalAlignment="Right" VerticalAlignment="Top"
+                                                Background="Transparent" BorderThickness="0" Cursor="Hand"
+                                                Command="{Binding BroadcastForm.CloseDrawerCommand}"
+                                                ToolTip="Close">
+                                            <Button.Template>
+                                                <ControlTemplate TargetType="Button">
+                                                    <ContentPresenter/>
+                                                </ControlTemplate>
+                                            </Button.Template>
+                                            <TextBlock Text="✕" Foreground="#a0a0b0" FontSize="14" FontWeight="Bold"/>
+                                        </Button>
+                                    </Grid>
+                                    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+                                        <StackPanel>
+                                            <TextBlock Text="TITLE" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
+                                            <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,10"
+                                                     Text="{Binding BroadcastForm.Title, UpdateSourceTrigger=PropertyChanged}"/>
+                                            <TextBlock Text="DESCRIPTION" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
+                                            <TextBox Style="{StaticResource YtTextBox}" Height="90" AcceptsReturn="True"
+                                                     TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Margin="0,0,0,10"
+                                                     Text="{Binding BroadcastForm.Description, UpdateSourceTrigger=PropertyChanged}"/>
+                                            <TextBlock Text="TAGS (COMMA-SEPARATED)" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
+                                            <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,10"
+                                                     Text="{Binding BroadcastForm.TagsCsv, UpdateSourceTrigger=PropertyChanged}"/>
+                                            <TextBlock Text="VISIBILITY" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
+                                            <ComboBox Style="{StaticResource YtComboBox}" Margin="0,0,0,10"
+                                                      ItemsSource="{Binding BroadcastForm.VisibilityOptions}"
+                                                      SelectedItem="{Binding BroadcastForm.Visibility}"/>
+                                            <CheckBox Content="Made for kids" Foreground="#e0e0e0" FontSize="12"
+                                                      Margin="0,2,0,10"
+                                                      IsChecked="{Binding BroadcastForm.MadeForKids}"/>
+                                            <TextBlock Text="SCHEDULED START" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
+                                            <TextBlock Text="{Binding BroadcastForm.ScheduledStartText}"
+                                                       Foreground="#888899" FontSize="12" Margin="0,0,0,4"/>
+                                        </StackPanel>
+                                    </ScrollViewer>
+                                    <StackPanel Grid.Row="2" Margin="0,10,0,0">
+                                        <Button Style="{StaticResource YtButton}" Content="Update Broadcast"
+                                                Command="{Binding BroadcastForm.UpdateBroadcastCommand}"/>
+                                        <TextBlock Text="{Binding BroadcastForm.UpdateError}"
+                                                   Foreground="#ef4444" FontSize="11" TextWrapping="Wrap" Margin="0,6,0,0"
+                                                   Visibility="{Binding BroadcastForm.UpdateError, Converter={StaticResource NotNullToVis}}"/>
+                                    </StackPanel>
+                                </Grid>
+                            </Border>
+                            <!-- The white tab -->
+                            <Border Width="30" VerticalAlignment="Center" Background="#ffffff"
+                                    CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand"
+                                    ToolTip="Broadcast text fields">
+                                <Border.InputBindings>
+                                    <MouseBinding Gesture="LeftClick"
+                                                  Command="{Binding BroadcastForm.ToggleDrawerCommand}"/>
+                                </Border.InputBindings>
+                                <TextBlock Text="Stream Settings" Foreground="#e94560" FontWeight="Bold" FontSize="15"
+                                           HorizontalAlignment="Center">
+                                    <TextBlock.LayoutTransform>
+                                        <RotateTransform Angle="90"/>
+                                    </TextBlock.LayoutTransform>
+                                </TextBlock>
+                            </Border>
+                        </StackPanel>
+                    </Grid>
+
+                    <!-- ═══ LIVE CONTROLS (below preview, never overlaps) ═══
+                         Line 1: Socials + TRAX meter (desktop/game audio)
+                         Line 2: Mic meter + volume -->
+                    <StackPanel Grid.Row="2" Orientation="Vertical" HorizontalAlignment="Center"
+                                VerticalAlignment="Center" Margin="0,4">
+                        <!-- Line 1: Socials + TRAX -->
+                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,4">
+                            <!-- Socials button: hover glows the social bar in the preview -->
+                            <Button x:Name="SocialsButton"
+                                    Command="{Binding OpenSocialDialogCommand}"
+                                    Style="{StaticResource YtButtonSecondary}" Padding="12,4"
+                                    FontSize="11" VerticalAlignment="Center" Margin="0,0,12,0"
+                                    ToolTip="Add or manage your social handles"
+                                    MouseEnter="SocialsButton_MouseEnter"
+                                    MouseLeave="SocialsButton_MouseLeave">
+                                <StackPanel Orientation="Horizontal">
+                                    <Ellipse Width="8" Height="8" Fill="{Binding SocialBarDotBrush}"
+                                             Margin="0,0,6,0" VerticalAlignment="Center"/>
+                                    <TextBlock Text="Socials"/>
+                                </StackPanel>
+                            </Button>
+                            <!-- TRAX meter -->
+                            <Border Background="#D9000000" CornerRadius="6" Padding="12,8">
+                                <StackPanel Orientation="Horizontal">
+                                    <Button Style="{StaticResource YtButtonSecondary}" Padding="8,2"
+                                            FontSize="11" VerticalAlignment="Center" Margin="0,0,8,0"
+                                            ToolTipService.ToolTip="{Binding TraxToolTip}"
+                                            ToolTipService.Placement="Top"
+                                            Click="TraxButton_Click"
+                                            PreviewMouseRightButtonUp="TraxButton_PreviewMouseRightButtonUp">
+                                        <StackPanel Orientation="Horizontal">
+                                            <Ellipse Width="8" Height="8" Fill="{Binding TraxDotBrush}"
+                                                     Margin="0,0,6,0" VerticalAlignment="Center"/>
+                                            <TextBlock Text="TRAX"/>
+                                        </StackPanel>
+                                    </Button>
+                                    <TextBlock Text="Desktop Audio" Foreground="#a0a0b0" FontSize="11"
+                                               FontWeight="SemiBold" VerticalAlignment="Center" Margin="0,0,8,0"
+                                               ToolTip="Desktop/game audio via WASAPI loopback (automatic); TRAX music rides the same channel"/>
+                                    <Border Width="288" Height="14" CornerRadius="7" Background="#3a3b52" Margin="0,0,8,0"
+                                            ClipToBounds="True" VerticalAlignment="Center">
+                                        <Grid>
+                                            <Rectangle Width="57" Fill="#4a4520" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                                       VerticalAlignment="Stretch"/>
+                                            <Rectangle Width="58" Fill="#4a2222" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                                       VerticalAlignment="Stretch"/>
+                                            <Border HorizontalAlignment="Left" Width="{Binding GameMeterFillWidth}"
+                                                    Background="{Binding GameMeterBrush}" Opacity="0.75"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
+                                            <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                                       VerticalAlignment="Stretch"/>
+                                            <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                                       VerticalAlignment="Stretch"/>
+                                            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
+                                                          Visibility="{Binding TraxError, Converter={StaticResource NotNullToVis}}"
+                                                          VerticalAlignment="Center" Margin="4,0">
+                                                <TextBlock Text="{Binding TraxError}" Foreground="#e94560" FontSize="9"
+                                                           FontWeight="SemiBold" VerticalAlignment="Center"/>
+                                            </ScrollViewer>
+                                        </Grid>
+                                    </Border>
+                                    <Grid Width="16" Height="16" Cursor="Hand" Margin="0,0,8,0"
+                                          VerticalAlignment="Center" ToolTip="{Binding GameMuteText}"
+                                          MouseLeftButtonUp="GameSpeaker_MouseLeftButtonUp">
+                                        <Path Fill="#d0d0d0" Stretch="Uniform"
+                                              Data="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1,-3.29 -2.5,-4.03v8.05c1.5,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"
+                                              Visibility="{Binding GameMuted, Converter={StaticResource InverseBoolToVis}}"/>
+                                        <Path Fill="#ef4444" Stretch="Uniform"
+                                              Data="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1,-3.29 -2.5,-4.03v8.05c1.5,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"
+                                              Visibility="{Binding GameMuted, Converter={StaticResource BoolToVis}}"/>
+                                        <Path Stroke="#ef4444" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
+                                              Data="M21,3 L3,21"
+                                              Visibility="{Binding GameMuted, Converter={StaticResource BoolToVis}}"/>
+                                    </Grid>
+                                    <Slider Width="130" Minimum="0" Maximum="1"
+                                            Value="{Binding GameAudioVolume, Mode=TwoWay}" VerticalAlignment="Center"
+                                            PreviewMouseLeftButtonDown="GameVolumeSlider_PreviewMouseLeftButtonDown"
+                                            PreviewMouseLeftButtonUp="GameVolumeSlider_PreviewMouseLeftButtonUp"
+                                            LostMouseCapture="GameVolumeSlider_LostMouseCapture"/>
+                                </StackPanel>
+                            </Border>
+                        </StackPanel>
+                        <!-- Line 2: Mic meter + volume -->
+                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
+                            <Button Command="{Binding OpenMicPickerCommand}"
+                                    Style="{StaticResource YtButtonSecondary}" Padding="12,4"
+                                    FontSize="11" VerticalAlignment="Center" Margin="0,0,8,0"
+                                    ToolTip="{Binding MicStatusToolTip}">
+                                <StackPanel Orientation="Horizontal">
+                                    <Ellipse Width="8" Height="8" Fill="{Binding MicStatusBrush}"
+                                             Margin="0,0,6,0" VerticalAlignment="Center"/>
+                                    <TextBlock Text="MIC"/>
+                                </StackPanel>
+                            </Button>
+                            <Border Width="288" Height="14" CornerRadius="7" Background="#3a3b52" Margin="0,0,8,0"
+                                    ClipToBounds="True" VerticalAlignment="Center">
+                                <Grid>
+                                    <Rectangle Width="57" Fill="#4a4520" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                               VerticalAlignment="Stretch"/>
+                                    <Rectangle Width="58" Fill="#4a2222" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                               VerticalAlignment="Stretch"/>
+                                    <TextBlock Text="{Binding MicSourceName}" Foreground="#b8b8c8" FontSize="10"
+                                               VerticalAlignment="Center" Margin="6,0,0,0" MaxWidth="270"
+                                               TextTrimming="CharacterEllipsis"
+                                               Visibility="{Binding MicSourceName, Converter={StaticResource NotNullToVis}}"/>
+                                    <Border HorizontalAlignment="Left" Width="{Binding MeterFillWidth}"
+                                            Background="{Binding MeterBrush}" Opacity="0.75"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
+                                    <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                               VerticalAlignment="Stretch"/>
+                                    <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                               VerticalAlignment="Stretch"/>
+                                </Grid>
+                            </Border>
+                            <Grid Width="16" Height="16" Cursor="Hand" Margin="0,0,8,0"
+                                  VerticalAlignment="Center" ToolTip="{Binding MicMuteText}"
+                                  MouseLeftButtonUp="MicSpeaker_MouseLeftButtonUp">
+                                <Path Fill="#d0d0d0" Stretch="Uniform"
+                                      Data="M12,14c1.66,0 3,-1.34 3,-3V5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6C9,12.66 10.34,14 12,14zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c3.28,-0.49 6,-3.31 6,-6.72H17.3z"
+                                      Visibility="{Binding MicMuted, Converter={StaticResource InverseBoolToVis}}"/>
+                                <Path Fill="#ef4444" Stretch="Uniform"
+                                      Data="M12,14c1.66,0 3,-1.34 3,-3V5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6C9,12.66 10.34,14 12,14zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c3.28,-0.49 6,-3.31 6,-6.72H17.3z"
+                                      Visibility="{Binding MicMuted, Converter={StaticResource BoolToVis}}"/>
+                                <Path Stroke="#ef4444" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
+                                      Data="M21,3 L3,21"
+                                      Visibility="{Binding MicMuted, Converter={StaticResource BoolToVis}}"/>
+                            </Grid>
+                            <Slider Width="130" Minimum="0" Maximum="1"
+                                    Value="{Binding MicVolume, Mode=TwoWay}" VerticalAlignment="Center"
+                                    PreviewMouseLeftButtonDown="VolumeSlider_PreviewMouseLeftButtonDown"
+                                    PreviewMouseLeftButtonUp="VolumeSlider_PreviewMouseLeftButtonUp"
+                                    LostMouseCapture="VolumeSlider_LostMouseCapture"/>
+                        </StackPanel>
+                    </StackPanel>
+                </Grid>
+    </Border>
+</UserControl>

Controls/PreviewPane.xaml.cs

@@ -0,0 +1,464 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Effects;
+using System.Windows.Media.Animation;
+using System.Windows.Shapes;
+using System.Windows.Threading;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.ViewModels;
+
+namespace ytLive.Controls;
+
+public partial class PreviewPane : UserControl
+{
+    private bool _isDraggingOverlay;
+    private bool _isResizing;
+    private Point _grabOffset;
+    private double _resizeAspect;
+
+    private readonly System.Collections.Generic.Dictionary<string, Storyboard> _activeBorderAnimations =
+        new();
+
+    private DispatcherTimer? _socialGlowTimer;
+    private double _socialGlowAngle;
+
+    public PreviewPane()
+    {
+        InitializeComponent();
+    }
+
+    // Static images and the webcam share the move/resize/selection behavior.
+    public static bool IsDraggableElement(SceneElement element)
+        => element.IsDraggable;
+
+    public void UpdateSelectionOverlay(bool selected)
+    {
+        SelectionOverlay.Visibility = selected ? Visibility.Visible : Visibility.Collapsed;
+    }
+
+    // ─── Clicking inside the preview / pull-out drawer (used by the window's
+    //     Window_PreviewMouseLeftButtonDown deselection logic) ───
+    public bool IsClickInsidePreview(DependencyObject original)
+        => IsDescendantOf(original, PreviewGrid);
+
+    public bool IsClickInsideDrawer(DependencyObject original)
+        => IsDescendantOf(original, TextPullOutHost);
+
+    private static bool IsDescendantOf(DependencyObject? child, DependencyObject ancestor)
+    {
+        while (child != null && !ReferenceEquals(child, ancestor))
+        {
+            child = child is Visual or System.Windows.Media.Media3D.Visual3D
+                ? VisualTreeHelper.GetParent(child)
+                : LogicalTreeHelper.GetParent(child);
+        }
+        return child != null;
+    }
+
+    // ─── Audio meters + TRAX + socials (ROW 2 of the preview pane) ───
+    private void VolumeSlider_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is Slider slider)
+            SetSliderValueFromClick(slider, e);
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetVolumeAdjusting(true);
+    }
+
+    private void VolumeSlider_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetVolumeAdjusting(false);
+    }
+
+    private void VolumeSlider_LostMouseCapture(object sender, MouseEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetVolumeAdjusting(false);
+    }
+
+    private void GameVolumeSlider_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is Slider slider)
+            SetSliderValueFromClick(slider, e);
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetGameVolumeAdjusting(true);
+    }
+
+    private void GameVolumeSlider_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetGameVolumeAdjusting(false);
+    }
+
+    private void GameVolumeSlider_LostMouseCapture(object sender, MouseEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+            vm.SetGameVolumeAdjusting(false);
+    }
+
+    private static void SetSliderValueFromClick(Slider slider, MouseButtonEventArgs e)
+    {
+        if (FindParent<System.Windows.Controls.Primitives.Thumb>(e.OriginalSource as Visual) != null)
+            return;
+        var track = slider.Template.FindName("PART_Track", slider) as System.Windows.Controls.Primitives.Track;
+        if (track == null) return;
+        var pos = e.GetPosition(track);
+        var fraction = Math.Clamp(pos.X / track.RenderSize.Width, 0, 1);
+        slider.Value = slider.Minimum + fraction * (slider.Maximum - slider.Minimum);
+        e.Handled = true;
+    }
+
+    private static T? FindParent<T>(Visual? visual) where T : Visual
+    {
+        while (visual != null)
+        {
+            if (visual is T match) return match;
+            visual = VisualTreeHelper.GetParent(visual) as Visual;
+        }
+        return null;
+    }
+
+    private void MicSpeaker_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+        {
+            vm.ToggleMicMuteCommand.Execute(null);
+        }
+    }
+
+    private void GameSpeaker_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is FrameworkElement { DataContext: MainViewModel vm })
+        {
+            vm.ToggleGameMuteCommand.Execute(null);
+        }
+    }
+
+    // TRAX (TASK 9): left-click toggles play/pause (picks a track when none is
+    // loaded); right-click always opens the picker. The picker is the OS file
+    // dialog — the "never the OS viewer" rule covers the preview, not pickers.
+    private void TraxButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (DataContext is ViewModels.MainViewModel vm)
+            vm.TraxLeftClick();
+    }
+
+    private void TraxButton_PreviewMouseRightButtonUp(object sender, MouseButtonEventArgs e)
+    {
+        if (DataContext is ViewModels.MainViewModel vm)
+            vm.TraxRightClick();
+        e.Handled = true; // the button's right-click context menu must not fire
+    }
+
+    // ─── Webcam / background context menus (right-click on overlay elements) ───
+    private void WebcamMenu_ChangeWebcam(object sender, RoutedEventArgs e)
+        => (DataContext as MainViewModel)?.ChangeWebcamCommand.Execute(null);
+
+    private void WebcamMenu_SetBorderAnimation(object sender, RoutedEventArgs e)
+    {
+        if (sender is not MenuItem { DataContext: SceneElement element, Tag: string tag }
+            || !Enum.TryParse<BorderAnimation>(tag, out var animation))
+            return;
+
+        element.BorderAnimation = animation;
+
+        StopBorderAnimation(element.Id);
+
+        if (animation == BorderAnimation.None) return;
+
+        var shape = FindBorderShape(sender as DependencyObject);
+        if (shape == null) return;
+
+        var sb = CreateBorderAnimation(animation, shape);
+        if (sb == null) return;
+
+        sb.Freeze();
+        _activeBorderAnimations[element.Id] = sb;
+        shape.BeginAnimation(Shape.OpacityProperty, null);
+        Storyboard.SetTarget(sb, shape);
+        sb.Begin();
+    }
+
+    private void StopBorderAnimation(string elementId)
+    {
+        if (_activeBorderAnimations.TryGetValue(elementId, out var old))
+        {
+            old.Stop();
+            _activeBorderAnimations.Remove(elementId);
+        }
+    }
+
+    private static Shape? FindBorderShape(DependencyObject? start)
+    {
+        var current = start;
+        while (current != null)
+        {
+            if (current is ContextMenu cm && cm.PlacementTarget is FrameworkElement target)
+            {
+                for (var i = 0; i < VisualTreeHelper.GetChildrenCount(target); i++)
+                {
+                    var child = VisualTreeHelper.GetChild(target, i);
+                    if (child is Shape s && (s is Rectangle or Ellipse) && !s.IsHitTestVisible)
+                        return s;
+                }
+                return null;
+            }
+            current = VisualTreeHelper.GetParent(current);
+        }
+        return null;
+    }
+
+    private static Storyboard? CreateBorderAnimation(BorderAnimation animation, Shape shape)
+    {
+        var sb = new Storyboard();
+        switch (animation)
+        {
+            case BorderAnimation.Pulse:
+                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.3, TimeSpan.FromSeconds(0.8), true);
+                break;
+            case BorderAnimation.Glow:
+                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.5, TimeSpan.FromSeconds(1.2), true);
+                break;
+            case BorderAnimation.Shimmer:
+                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.15, TimeSpan.FromSeconds(0.5), true);
+                break;
+            case BorderAnimation.Electricity:
+                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.2, TimeSpan.FromSeconds(0.1), true);
+                break;
+            case BorderAnimation.Sparkles:
+                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.4, TimeSpan.FromSeconds(0.3), true);
+                break;
+            case BorderAnimation.MarchingAnts:
+                shape.StrokeDashArray = new DoubleCollection { 4, 2 };
+                AddDoubleAnimation(sb, Shape.StrokeDashOffsetProperty, 0, -20, TimeSpan.FromSeconds(0.8), false);
+                break;
+            case BorderAnimation.Chase:
+                shape.StrokeDashArray = new DoubleCollection { 8, 4 };
+                AddDoubleAnimation(sb, Shape.StrokeDashOffsetProperty, 0, -30, TimeSpan.FromSeconds(1.5), false);
+                break;
+            case BorderAnimation.Rainbow:
+                if (shape.Stroke is SolidColorBrush brush)
+                {
+                    var frozen = brush.IsFrozen;
+                    if (frozen) brush = brush.Clone();
+                    shape.Stroke = brush;
+                    var colorAnim = new ColorAnimationUsingKeyFrames
+                    {
+                        Duration = new Duration(TimeSpan.FromSeconds(3)),
+                        RepeatBehavior = RepeatBehavior.Forever
+                    };
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.Zero)));
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Yellow, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))));
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Green, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.DodgerBlue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.5))));
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.MediumPurple, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))));
+                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))));
+                    Storyboard.SetTargetProperty(colorAnim, new PropertyPath("(Shape.Stroke).(SolidColorBrush.Color)"));
+                    sb.Children.Add(colorAnim);
+                }
+                break;
+            default:
+                return null;
+        }
+        return sb.Children.Count > 0 ? sb : null;
+    }
+
+    private static void AddDoubleAnimation(Storyboard sb, DependencyProperty prop,
+        double from, double to, Duration duration, bool autoReverse)
+    {
+        var anim = new DoubleAnimation(from, to, duration)
+        {
+            AutoReverse = autoReverse,
+            RepeatBehavior = RepeatBehavior.Forever
+        };
+        Storyboard.SetTargetProperty(anim, new PropertyPath(prop));
+        sb.Children.Add(anim);
+    }
+
+    private void WebcamMenu_SetBorderColor(object sender, RoutedEventArgs e)
+    {
+        if (sender is MenuItem { DataContext: SceneElement element, Tag: string color })
+            element.BorderColor = color;
+    }
+
+    private void WebcamMenu_HideInScene(object sender, RoutedEventArgs e)
+    {
+        if (sender is MenuItem { DataContext: SceneElement element })
+            element.IsVisible = false;
+    }
+
+    private void WebcamMenu_Remove(object sender, RoutedEventArgs e)
+    {
+        if (sender is MenuItem { DataContext: SceneElement element })
+            (DataContext as MainViewModel)?.RemoveSourceCommand.Execute(element);
+    }
+
+    // ─── Social bar: click toggles top ⇄ bottom. KISS — the drag variant was
+    // unusable for shaky hands (jitter around the direction deadzone), so the bar
+    // rides on {Binding SocialBarTop} alone and a click flips it. ───
+    private void SocialBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        (DataContext as MainViewModel)?.ToggleSocialBarPosition();
+        e.Handled = true;
+    }
+
+    private void SocialsButton_MouseEnter(object sender, MouseEventArgs e)
+    {
+        if (SocialBarElement == null) return;
+
+        // Kick the social bar to full brightness so it's immediately visible
+        var effect = SocialBarElement.Effect as DropShadowEffect;
+        if (effect != null)
+        {
+            effect.BlurRadius = 40;
+            effect.Opacity = 1.0;
+        }
+
+        // Pulse the glow so it catches the eye
+        _socialGlowAngle = 0;
+        _socialGlowTimer?.Stop();
+        _socialGlowTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(30) };
+        _socialGlowTimer.Tick += SocialGlowTick;
+        _socialGlowTimer.Start();
+    }
+
+    private void SocialsButton_MouseLeave(object sender, MouseEventArgs e)
+    {
+        _socialGlowTimer?.Stop();
+        _socialGlowTimer = null;
+
+        if (SocialBarElement?.Effect is DropShadowEffect effect)
+        {
+            effect.BlurRadius = 18;
+            effect.Opacity = 0.9;
+        }
+    }
+
+    private void SocialGlowTick(object? sender, EventArgs e)
+    {
+        if (SocialBarElement?.Effect is not DropShadowEffect effect) return;
+
+        _socialGlowAngle += 0.18;
+        if (_socialGlowAngle > Math.PI * 2) _socialGlowAngle -= Math.PI * 2;
+
+        // Smooth sine pulse: BlurRadius 24→48, Opacity 0.7→1.0
+        double t = (Math.Sin(_socialGlowAngle) + 1.0) / 2.0; // 0..1
+        effect.BlurRadius = 24 + t * 24;
+        effect.Opacity = 0.7 + t * 0.3;
+    }
+
+    // ─── Preview: element selection / move / resize / hit-testing ───
+    private void Preview_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        var vm = DataContext as MainViewModel;
+        if (vm is null || !vm.IsEditMode) return;
+        var grid = (Grid)sender;
+        var toCanvas = CanvasGrid.TransformToVisual(grid).Inverse;
+        var p = toCanvas.Transform(e.GetPosition(grid));
+        var selected = vm.SelectedElement;
+
+        if (selected is { } sel && IsDraggableElement(sel) && HitHandle(e.GetPosition(grid), sel))
+        {
+            _isResizing = true;
+            _resizeAspect = sel.ClipShape == ClipShape.Round ? 1 : sel.Width / Math.Max(1, sel.Height);
+            grid.CaptureMouse();
+            e.Handled = true;
+            return;
+        }
+
+        var hit = HitElement(vm, p);
+        if (hit != null)
+        {
+            vm.SelectedElement = hit;
+            _isDraggingOverlay = true;
+            _grabOffset = new Point(p.X - hit.X, p.Y - hit.Y);
+            grid.CaptureMouse();
+            e.Handled = true;
+            return;
+        }
+
+        vm.SelectedElement = null;
+    }
+
+    private void Preview_MouseMove(object sender, MouseEventArgs e)
+    {
+        var vm = DataContext as MainViewModel;
+        if (vm is null || !vm.IsEditMode) return;
+        if (!_isDraggingOverlay && !_isResizing) return;
+
+        var grid = (Grid)sender;
+        var toCanvas = CanvasGrid.TransformToVisual(grid).Inverse;
+        var p = toCanvas.Transform(e.GetPosition(grid));
+        var selected = vm.SelectedElement;
+        if (selected == null)
+        {
+            EndPreviewDrag(grid);
+            return;
+        }
+
+        if (_isDraggingOverlay)
+        {
+            var minX = -(selected.Width - 20);
+            var maxX = 1920 - 20;
+            var minY = -(selected.Height - 20);
+            var maxY = 1080 - 20;
+            selected.X = Math.Clamp(p.X - _grabOffset.X, Math.Min(minX, maxX), Math.Max(minX, maxX));
+            selected.Y = Math.Clamp(p.Y - _grabOffset.Y, Math.Min(minY, maxY), Math.Max(minY, maxY));
+        }
+        else if (_isResizing)
+        {
+            var isWebcam = selected is WebcamSceneConfig;
+            var isRound = selected.ClipShape == ClipShape.Round;
+            var proportional = isRound || Keyboard.Modifiers.HasFlag(ModifierKeys.Shift);
+            var maxW = isWebcam ? MainViewModel.MaxWebcamWidthFor(vm.StagedScene?.Name) : 1920;
+            var maxH = isWebcam ? MainViewModel.MaxWebcamHeightFor(vm.StagedScene?.Name) : 1080;
+            var newW = Math.Clamp(p.X - selected.X, 32, maxW);
+            var newH = proportional ? newW / _resizeAspect : Math.Clamp(p.Y - selected.Y, 32, maxH);
+            if (proportional && newH > maxH)
+            {
+                newH = maxH;
+                newW = newH * _resizeAspect;
+            }
+            selected.Width = newW;
+            selected.Height = newH;
+        }
+    }
+
+    private void Preview_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+        => EndPreviewDrag((Grid)sender);
+
+    private void EndPreviewDrag(Grid grid)
+    {
+        if (_isDraggingOverlay || _isResizing)
+            grid.ReleaseMouseCapture();
+        _isDraggingOverlay = false;
+        _isResizing = false;
+    }
+
+    private bool HitHandle(Point mouseScreen, SceneElement element)
+    {
+        var corner = CanvasGrid.TransformToVisual(PreviewGrid).Transform(new Point(element.X + element.Width, element.Y + element.Height));
+        return Math.Abs(mouseScreen.X - corner.X) <= 20 && Math.Abs(mouseScreen.Y - corner.Y) <= 20;
+    }
+
+    private SceneElement? HitElement(MainViewModel vm, Point p)
+    {
+        var scene = vm.StagedScene;
+        if (scene == null) return null;
+        for (var i = scene.Elements.Count - 1; i >= 0; i--)
+        {
+            var element = scene.Elements[i];
+            if (!IsDraggableElement(element)) continue;
+            if (element is Source { IsEnabled: false }) continue;
+            if (element is WebcamSceneConfig { IsVisible: false }) continue;
+            if (p.X >= element.X && p.X <= element.X + element.Width &&
+                p.Y >= element.Y && p.Y <= element.Y + element.Height)
+                return element;
+        }
+        return null;
+    }
+}

Controls/SceneThumbnailStrip.xaml

@@ -0,0 +1,54 @@
+<UserControl x:Class="ytLive.Controls.SceneThumbnailStrip"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Border Background="#0d1117" CornerRadius="4" Margin="0,0,0,4" Padding="4">
+        <ItemsControl ItemsSource="{Binding Scenes}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <UniformGrid Rows="1" Columns="5"/>
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Border CornerRadius="4" Margin="2" Padding="2"
+                            BorderThickness="2"
+                            BorderBrush="Transparent"
+                            Cursor="Hand"
+                            MouseLeftButtonDown="Thumbnail_MouseLeftButtonDown">
+                        <Border.Style>
+                            <Style TargetType="Border">
+                                <Setter Property="BorderBrush" Value="#333344"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsStaged}" Value="True">
+                                        <Setter Property="BorderBrush" Value="#e94560"/>
+                                    </DataTrigger>
+                                    <DataTrigger Binding="{Binding IsLive}" Value="True">
+                                        <Setter Property="BorderBrush" Value="#22c55e"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Border.Style>
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="*"/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
+                            <Border Grid.Row="0" CornerRadius="3"
+                                    Background="#0a0a1a" ClipToBounds="True">
+                                <Image Source="{Binding Snapshot}"
+                                       Stretch="UniformToFill"
+                                       RenderOptions.BitmapScalingMode="LowQuality"/>
+                            </Border>
+                            <TextBlock Grid.Row="1" Foreground="#a0a0b0" FontSize="10"
+                                       HorizontalAlignment="Center"
+                                       Margin="0,2,0,0"
+                                       TextTrimming="CharacterEllipsis">
+                                <Run Text="{Binding Name, Mode=OneWay}"/><Run Text=" "/><Run Text="{Binding HotkeyLabel, Mode=OneWay}" Foreground="#6a6a7a" FontWeight="SemiBold"/>
+                            </TextBlock>
+                        </Grid>
+                    </Border>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </Border>
+</UserControl>

Controls/SceneThumbnailStrip.xaml.cs

@@ -0,0 +1,21 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using ytLive.Models;
+using ytLive.ViewModels;
+
+namespace ytLive.Controls;
+
+public partial class SceneThumbnailStrip : UserControl
+{
+    public SceneThumbnailStrip()
+    {
+        InitializeComponent();
+    }
+
+    private void Thumbnail_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is Border { DataContext: Scene scene } && DataContext is MainViewModel vm)
+            vm.TransitionToScene(scene);
+    }
+}

Controls/TopBar.xaml

@@ -0,0 +1,118 @@
+<UserControl x:Class="ytLive.Controls.TopBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="TopBarRoot">
+    <!-- LOGO / BRAND — clicking opens the in-app About overlay -->
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto"/>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+
+        <!-- Logo / Brand — clicking opens the in-app About overlay -->
+        <Button Grid.Column="0" Background="Transparent" BorderThickness="0" Cursor="Hand"
+                VerticalAlignment="Center" Margin="0,0,24,0" ToolTip="About LlamaCasty"
+                Command="{Binding OpenAboutCommand}">
+            <Button.Template>
+                <ControlTemplate TargetType="Button">
+                    <ContentPresenter/>
+                </ControlTemplate>
+            </Button.Template>
+            <TextBlock FontSize="22" FontWeight="Bold">
+                <Run Text="LlamaCas" Foreground="#e0e0e0"/><Run Text="ty" Foreground="#e94560"/>
+            </TextBlock>
+        </Button>
+
+        <!-- REC / ON-AIR pills (intent) + status signs (reality) -->
+        <StackPanel Grid.Column="1" Orientation="Horizontal"
+                    HorizontalAlignment="Center" VerticalAlignment="Center">
+            <!-- REC pill: local recording needs no sign-in -->
+            <TextBlock Text="REC" Foreground="#e94560" FontWeight="Bold" FontSize="12"
+                       VerticalAlignment="Center" Margin="0,0,6,0"/>
+            <ToggleButton Style="{StaticResource PillToggle}" VerticalAlignment="Center"
+                          IsChecked="{Binding RecordPillOn}"/>
+            <!-- ON-AIR pill: greyed out until signed in -->
+            <TextBlock Text="ON-AIR" Foreground="#e94560" FontWeight="Bold" FontSize="12"
+                       VerticalAlignment="Center" Margin="16,0,6,0"/>
+            <ToggleButton Style="{StaticResource PillToggle}" VerticalAlignment="Center"
+                          IsChecked="{Binding OnAirPillOn}"
+                          IsEnabled="{Binding CanToggleOnAir}"
+                          ToolTip="{Binding AccountStatusLightToolTip}"/>
+            <!-- Status signs: REC dot + ON-AIR dot -->
+            <Ellipse Width="12" Height="12" VerticalAlignment="Center" Margin="16,0,0,0"
+                     Fill="{Binding RecDotBrush}" Opacity="{Binding RecDotOpacity}"/>
+            <TextBlock Text="REC" Style="{StaticResource StatusSignText}"/>
+            <!-- ON-AIR sign: gray offline, red public, green private -->
+            <Ellipse Width="12" Height="12" VerticalAlignment="Center" Margin="16,0,0,0"
+                     Fill="{Binding OnAirBrush}"/>
+            <TextBlock Text="ON-AIR" Style="{StaticResource StatusSignText}"/>
+            <Border Background="#8f1f1f" CornerRadius="3" Padding="6,1" Margin="8,0,0,0"
+                    VerticalAlignment="Center"
+                    Visibility="{Binding IsLivePrivate, Converter={StaticResource BoolToVis}}">
+                <TextBlock Text="PRIVATE" FontSize="11" FontWeight="Bold" Foreground="White"/>
+            </Border>
+            <TextBlock Text="{Binding LiveElapsedText}" Foreground="White" FontSize="14"
+                       FontFamily="Consolas" VerticalAlignment="Center" Margin="14,0,0,0"
+                       Visibility="{Binding IsLive, Converter={StaticResource BoolToVis}}"/>
+        </StackPanel>
+
+        <!-- Three-state top bar: logged-out / idle / live -->
+        <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
+            <!-- Status light -->
+            <Ellipse Width="8" Height="8" Margin="0,0,8,0" VerticalAlignment="Center"
+                     ToolTip="{Binding AccountStatusLightToolTip}">
+                <Ellipse.Style>
+                    <Style TargetType="Ellipse">
+                        <Setter Property="Fill" Value="#ef4444"/>
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding IsConnected}" Value="True">
+                                <Setter Property="Fill" Value="#22c55e"/>
+                            </DataTrigger>
+                            <DataTrigger Binding="{Binding IsLive}" Value="True">
+                                <Setter Property="Fill" Value="#e94560"/>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Ellipse.Style>
+            </Ellipse>
+            <!-- Avatar (connected only); shows the channel initial when
+                 the profile image is missing or fails to download -->
+            <Border Width="26" Height="26" CornerRadius="13" Background="#16213e" ClipToBounds="True"
+                    Margin="0,0,8,0" VerticalAlignment="Center"
+                    ToolTip="{Binding AccountDisplayName}"
+                    Visibility="{Binding IsConnected, Converter={StaticResource BoolToVis}}">
+                <Grid>
+                    <Image x:Name="AvatarImage" Stretch="UniformToFill"/>
+                    <TextBlock x:Name="AvatarInitial" Foreground="#e0e0e0" FontSize="13"
+                               FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"
+                               Visibility="Collapsed"/>
+                </Grid>
+            </Border>
+            <!-- Sign In button (disconnected + offline) -->
+            <Button Content="Sign In" Style="{StaticResource YtButton}"
+                    Margin="0,0,12,0"
+                    Command="{Binding StartStreamCommand}"
+                    Visibility="{Binding ShowLogInButton, Converter={StaticResource BoolToVis}}"/>
+            <!-- Primary Start button (offline): dynamic label from the pills -->
+            <Button Content="Start" Style="{StaticResource YtButton}"
+                    Command="{Binding StartStreamCommand}"
+                    Visibility="{Binding ShowPrimaryStartButton, Converter={StaticResource BoolToVis}}">
+                <Button.ContextMenu>
+                    <ContextMenu>
+                        <MenuItem Header="Choose Record Folder" Command="{Binding ChooseRecordFolderCommand}"/>
+                        <Separator/>
+                        <MenuItem Header="Change Account" Command="{Binding ChangeAccountCommand}"/>
+                        <Separator/>
+                        <MenuItem Header="Logout" Command="{Binding LogoutCommand}"/>
+                    </ContextMenu>
+                </Button.ContextMenu>
+            </Button>
+            <!-- End button (live OR recording) — the only button whose
+                 label changes; "Stop Recording" while recording -->
+            <Button Content="{Binding EndButtonText}" Style="{StaticResource YtButton}"
+                    Background="#333" Command="{Binding EndStreamCommand}"
+                    Visibility="{Binding ShowEndStreamButton, Converter={StaticResource BoolToVis}}"/>
+        </StackPanel>
+    </Grid>
+</UserControl>

Controls/TopBar.xaml.cs

@@ -0,0 +1,72 @@
+using System;
+using System.IO;
+using System.Net.Http;
+using System.Windows.Controls;
+using System.Windows.Media.Imaging;
+using ytLive.Helpers;
+using ytLive.ViewModels;
+
+namespace ytLive.Controls;
+
+public partial class TopBar : UserControl
+{
+    private static readonly HttpClient AvatarHttp = new() { Timeout = TimeSpan.FromSeconds(15) };
+    private string? _loadedAvatarUrl;
+
+    public TopBar()
+    {
+        InitializeComponent();
+        AvatarImage.Source = null;
+        AvatarInitial.Visibility = System.Windows.Visibility.Collapsed;
+    }
+
+    public void RefreshAvatar()
+    {
+        _ = LoadAvatarImageAsync();
+    }
+
+    private async System.Threading.Tasks.Task LoadAvatarImageAsync()
+    {
+        var vm = DataContext as MainViewModel;
+        var url = vm?.AccountAvatarUrl;
+        if (vm is not { IsConnected: true })
+        {
+            ShowAvatarFallback(null);
+            return;
+        }
+        if (string.IsNullOrWhiteSpace(url))
+        {
+            AppLog.Write("Avatar: connected but no profile image URL on the session");
+            ShowAvatarFallback(null);
+            return;
+        }
+        if (url == _loadedAvatarUrl && AvatarImage.Source != null) return;
+        try
+        {
+            var bytes = await AvatarHttp.GetByteArrayAsync(url);
+            using var ms = new MemoryStream(bytes);
+            var bitmap = new BitmapImage();
+            bitmap.BeginInit();
+            bitmap.CacheOption = BitmapCacheOption.OnLoad;
+            bitmap.StreamSource = ms;
+            bitmap.EndInit();
+            bitmap.Freeze();
+            _loadedAvatarUrl = url;
+            AvatarImage.Source = bitmap;
+            AvatarInitial.Visibility = System.Windows.Visibility.Collapsed;
+        }
+        catch (Exception ex)
+        {
+            AppLog.Write($"Avatar load failed ({url}): {ex.Message}");
+            ShowAvatarFallback(vm?.AccountDisplayName);
+        }
+    }
+
+    private void ShowAvatarFallback(string? name)
+    {
+        _loadedAvatarUrl = null;
+        AvatarImage.Source = null;
+        AvatarInitial.Text = string.IsNullOrWhiteSpace(name) ? "?" : name.Substring(0, 1).ToUpperInvariant();
+        AvatarInitial.Visibility = System.Windows.Visibility.Visible;
+    }
+}

Controls/index.md

@@ -0,0 +1,58 @@
+# Controls — index
+
+The phase-2 carved pieces of what used to be one monolithic `MainWindow.xaml`
+(1,681 lines → a 123-line shell). Each is a `UserControl` in the `ytLive.Controls`
+namespace, extracted one roll-back commit at a time (refactor-commit-12..18).
+See [`schema.md`](../schema.md) for the memory-map conventions.
+
+| File | Purpose |
+|------|---------|
+| `BottomBar.xaml(.cs)` | Footer (Row 3): gear menu (stop/mic/game-mute/quality dropdown), stream stats (bitrate/fps/dropped/duration/health), resolution dropdown |
+| `HealthBanner.xaml(.cs)` | Row 1 status banner + the 7 value→visibility converters live in the app theme, not here |
+| `TopBar.xaml(.cs)` | Row 0 stream controls: REC/ON-AIR pills+signs, elapsed timer, start/stop, account avatar/name (`RefreshAvatar()`) |
+| `PreviewPane.xaml(.cs)` | Row 1 Col 1 center: the 1920×1080 `OverlayCanvas`/`SelectionOverlay`/`BrandFlashLayer`/`SocialBarElement`, text pull-out drawer, and the live-controls row (TRAX / game / mic meters + sliders + speakers + socials) |
+| `SceneThumbnailStrip.xaml(.cs)` | Row 0 scene-picker strip (`ItemsControl` over `Scenes`), staged-red / live-green border highlight |
+| `LeftPanel.xaml(.cs)` | Row 1 Col 0 left panel: edit mode → layers+properties; live → YouTube chat. Source add/edit/remove, list drag-to-reorder, snapshot revert-accept |
+| `OverlayHost.xaml(.cs)` | Root-grid overlay dialogs: Settings / Report Bug / Feature Request / About (+ licenses + license-key entry). `BackToAbout_Click` lives here |
+| `SceneThumbnailStrip.xaml.cs` | Code-behind for the strip above |
+| `LeftPanel.xaml.cs` | Code-behind for the panel above |
+
+## Window ↔ control contract
+
+The shell (`MainWindow.xaml(.cs)`) wires up each control and routes the few
+cross-cutting calls through it:
+
+- Ctor finds each control by `x:Name` (`TopBar`, `PreviewPane`, `LeftPanel`)
+  AFTER `InitializeComponent`, **before** any method touches it (null-ref guard).
+- `_previewPane.IsClickInsidePreview/Drawer` + `_leftPanel.IsClickInside` →
+  deselection guard in `Window_PreviewMouseLeftButtonDown`.
+- `_previewPane.UpdateSelectionOverlay(bool)` + `_leftPanel.OnSelectionChanged(vm)`
+  → selection/edit-mode routing from the VM's `SelectedElement` change.
+- `_topBar.RefreshAvatar()` on `IsConnected`/`AccountAvatarUrl` change.
+- Handlers in moved controls cast `(DataContext as MainViewModel)` — controls
+  inherit the window's DataContext; never pass the VM through a property.
+
+## Gotchas learned the hard way
+
+- **A UserControl cannot see `Window.Resources`** (StaticResource resolves by
+  element lookup, so it stops at the control boundary). The 7 converters
+  (`BoolToVis`, `InverseBoolToVis`, `NotNullToVis`, `NullToVis`, `HiddenBoolToVis`,
+  `EnumToBool`, `AllTrueToVis`) were promoted from `MainWindow.Resources` into
+  `Themes/Controls.xaml` (see [`Themes/index.md`](../Themes/index.md)).
+- **Moved XAML can lose its namespace**: a block cut from MainWindow carries no
+  root xmlns, so any `models:`/`Helpers:` ref in it breaks the build with
+  `MC2000: Value cannot be null (key)`. Declare `xmlns:models` / `xmlns:Helpers`
+  on each control's root (LeftPanel hit this).
+- **Name-looked-up host stubs must stay in the window**, not a control:
+  `WebViewHostPanel` (ctor `InitWebView2(WebViewHostPanel)`) and `ToastArea`
+  (`NotificationService.InArea("ToastArea")`) are resolved by name from the
+  window root — so `OverlayHost` deliberately leaves them as thin window-root
+  children (Commit 18).
+- When cutting visual wrappers, don't drop the outer `Border`'s
+  background/glow/margin — Commit 15 initially lost the preview's outer border
+  and had to restore it same-commit.
+
+Related: [`ViewModels/index.md`](../ViewModels/index.md) (MainViewModel the
+controls bind to), [`Themes/index.md`](../Themes/index.md) (styles/converters),
+[`Helpers/index.md`](../Helpers/index.md) (ViewModelBase, converters), the
+`MainWindow.xaml` shell at repo root that hosts these.

HANDOFF.md

@@ -2,62 +2,98 @@
 
 ## Branch / Commit State
 
-**`main`**, working tree is **CLEAN** — all changes committed and pushed.
+**`main`**, working tree is **CLEAN**.
 
-No feature branches pre-1.0: all work lands on `main` per work unit.
+Both split phases are now complete. Phase 1 (view-model partials) is pushed;
+Phase 2 (MainWindow.xaml → UserControls) is complete but **local-only**.
 
-**Latest commit:** `e286719` — Commit 5/12 of the MainViewModel refactor (Webcam partial, tag `refactor-commit-5`).
+**Pushed** (reached `origin/main` == `14d3ed4`, incl. tags): Phase 1 commit `0`
+and refactor commits `1..11` (`refactor-commit-0..11`), plus policy/HANDOFF.
+
+**LOCAL ONLY (Phase 2 — 12, 13, 14, 15, 16, 17, 18)** — policy 2026-08-30: no
+per-commit push; `git push` only at a user-agreed milestone / "push it".
+**Push pending on explicit user approval:**
+
+| Commit | Hash | Tag | Control | From Loc |
+|--------|------|-----|---------|----------|
+| 12 | `bc23b64` | `refactor-commit-12` | `Controls/BottomBar` | footer |
+| 13 | `6914252` | `refactor-commit-13` | `Controls/HealthBanner` | row 1 banner |
+| 14 | `90f5ad5` | `refactor-commit-14` | `Controls/TopBar` | row 0 top bar |
+| 15 | `c5e3466` | `refactor-commit-15` | `Controls/PreviewPane` | center preview |
+| 16 | `73397cf` | `refactor-commit-16` | `Controls/SceneThumbnailStrip` | row 0 strip |
+| 17 | `c9fd1bd` | `refactor-commit-17` | `Controls/LeftPanel` | row 1 col 0 |
+| 18 | `544208e` | `refactor-commit-18` | `Controls/OverlayHost` | overlay dialogs |
 
 ## What's In Flight
 
-**MainViewModel partial split (Phase 1):** 5 of 12 refactor commits landed and pushed.
-Tags `refactor-commit-0…5` = scaffold, Account, License, Scenes, Background, Webcam.
-Latest head `e286719`. Working tree clean.
+Nothing code-in-flight — working tree clean, **Phase 2 complete**.
 
-Remaining partials in order: `Audio` (Commit 6), `Trax` (7), `Socials` (8), `Streaming` (9),
-`Chat` (10), `Overlays` (11). Each lands the same way: cut → build 0 warnings →
-`./scripts/verify.sh` + `./scripts/scope-check.sh "file1" …` → commit titled
-`refactor: split <Area> out of MainViewModel — Commit N/12 (tag refactor-commit-N)`
-with the `ViewModels/index.md` progress update in the SAME commit → `git tag refactor-commit-N`.
-**Do NOT push per commit (policy 2026-08-30):** commits land locally; `git push` only at
-a user-agreed sub-milestone/milestone ("push it"). Tags ride along on that push.
+**Phase 2 result:** `MainWindow.xaml` carved 1,681 → **123 lines** (a shell over
+6 UserControls under `Controls/`, namespace `ytLive.Controls`). Every change:
+0-warning build, `scripts/verify.sh` (246 pass + 2 known only), explicit-file
+`scripts/scope-check.sh`, `ViewModels/index.md` in the SAME commit, tagged
+`refactor-commit-N`, no per-commit push.
 
-Known partial-usings list (grep-verified):
-`Scenes` = ObjectModel+Specialized+ComponentModel+`ytLive`+Models+Services;
-`Background` = ObjectModel+IO+Windows+Input+Media+Media.Imaging+Helpers+Models+Services;
-`Webcam` = Windows+Input+Media.Imaging+`ytLive`+Models+Services.
-`INotificationService.Info/Warning/Error/Success` are default interface methods → any
-partial calling `_notifications.X` needs `using ytLive.Services;`.
+**Next:** 
+- If user says "push": `git push origin main && git push --tags` (7 commits 12-18
+  + their tags).
+- Then optional Phase 3 if queued. Nothing is queued beyond Phase 2.
+
+**Pending bus:** `ViewModels/index.md` Phase 2 tracker has rows 12–18 (closed);
+Phase 1 tracker closed. `Controls/` has `index.md`-style facts only if needed.
 
 ## Landmines
 
-- **TextBox.Mode=OneWay** is required for `RecordFolderDisplay` binding (get-only computed property).
-- **Pre-existing test failures (do not chase):** `AudioPipelineTests.Mix_HonorsProviderGains…` +
-  `RoundClipInteractionTests.Round_Clip_Corner_Is_Grabbable…`.
+- **Pre-existing test failures (do not chase):**
+  `AudioPipelineTests.Mix_HonorsProviderGains_AndGameMute_KillsTheLoopback` +
+  `RoundClipInteractionTests.Round_Clip_Corner_Is_Grabbable_And_Shape_Is_Circle`.
+- **Tests occasionally abort early (236/237)** — known flake, accepted by `verify.sh`.
 - **App running locks `ytLive.exe`** → build fails MSB3027. Kill PID before building.
-- **Test suite hangs** when running full vstest (WPF `RealAppHost` dispatcher deadlock); individual
-  tests pass in isolation. Use `dotnet test` on individual test classes, not the full suite DLL.
-- **Pre-commit gate:** `./scripts/verify.sh` — clean build (0 warnings) + full tests + scope check.
+- **WinForm crash from `Window_PreviewMouseLeftButtonDown`** — handled in-side the
+  preview/left panel; don't add handlers that deref `OriginalSource` unguarded.
+- **Controls cannot see `Window.Resources`** (converter rule, Commit 13): any
+  StaticResource the window once supplied must live at app level in
+  `Themes/Controls.xaml`. The 7 converters were promoted there.
+- **Some control XAML needs its own `xmlns:models` / `xmlns:Helpers`** — a moved
+  block lost its namespace when it left MainWindow's root (LeftPanel hit this,
+  MC2000 "key null"). Always add the model/helper xmlns on each control root.
+- **Name-looked-up host stubs must stay in the window:** `WebViewHostPanel`
+  (ctor `InitWebView2(WebViewHostPanel)`) and `ToastArea`
+  (`NotificationService.InArea("ToastArea")`) are resolved by name from the
+  window — keep them as window-root children, don't bury them in a control.
+  OverlayHost deliberately left them in place (Commit 18) for this reason.
+- **Pre-commit gate:** `scripts/verify.sh` (0-warning build + full tests) and
+  `scripts/scope-check.sh "file1" …` — scope-check REQUIRES explicit file args.
+- Build from WSL with the Windows dotnet host only (see `AGENTS.md`).
 
 ## Todo state
 
-- TASK 3 (Capture Pipeline): 27/30 items done. Open: preview compositor (16), text source (17), alerts (20). Window capture absorbed into Screen picker (done). Background removal excluded from this build.
-- TASK 4 (RTMP Ingest): ✅ Shipped — all 7 items done (compositor, FFmpeg locator, encoder+RTMP, WASAPI audio, frame-pipeline, health stats, one-click go-live).
-- TASK 9 (Stream Management): items 1–3 shipped (reusable stream, health monitoring). Items 4–7 open: live chat, error handling, visibility picker, full broadcast form.
-- TASK 10 (Monetization): steps 1–7 shipped. Velopack auto-update pending.
-- TASK 18: shipped. Remaining = running-app verification (creator).
-- TASK 19/23 (Control Surface UX): ✅ Shipped — thumbnails, transitions (Cut/Fade/Move), edit mode, left panel two-state.
-- TASK 20 (Hotkeys): ✅ Shipped — F1-F5 scenes, F6-F9 actions, config UI, global hotkeys, conflict detection, persistence.
-- TASK 21 (Media source): Increment A shipped (model + persistence). Slices 4–12 open (decoder, FramePump wiring, compositor, loop/volume, UI, tests). Blocked on ffmpeg for integration test.
-- TASK 22 (Audio sync offset): not started — required for v1.
-- TASK 30: gear cleanup + record location + single Start + preview layout restructure — shipped across commits `6031a56` + `61b850f` + `455a409`.
-- Monetization: deferred (creator rethinking price/subscription model).
-- **File refactor (in progress — Commit 5/12 done):** MainViewModel.cs (3,900 lines) split into functional partials (Scenes, Background, Webcam ✔; Audio, Trax, Socials, Streaming, Chat, Overlays pending; Account, License ✔). One commit per partial, each a roll-back point (`refactor-commit-N` tags), `verify.sh` + `scope-check.sh` before each, docs in the same commit. MainWindow.xaml (1,681 lines) will be split into UserControls after Phase 1. Zero behavior change, tests stay green.
-- Monitoring: partials must re-declare their own `using`s — core file's usings do NOT carry across partial files. Field-initializer order across parts is compiler-ordered but no moved field has interdependent initializers.
+- MainViewModel refactor: **Phase 1 complete (11/11 partials)**, pushed.
+- MainWindow.xaml refactor: **Phase 2 complete (6/6 controls)**, local-only.
+- TASK 3: 27/30 (preview compositor 16, text source 17, alerts 20 still open).
+- TASK 4: ✅ shipped. TASK 9: items 1–3 shipped; 4–7 open. TASK 10: steps 1–7; Velopack pending.
+- TASK 18: shipped, creator verification pending. TASK 19/23, 20, 21-A: shipped.
+- TASK 22 (audio sync offset): not started — required for v1.
 
 ## Session summary (2026-08-30)
 
-- Completed refactor Commits 3/12 (Scenes, `dcdfcb9`), 4/12 (Background, `db068ab`), 5/12 (Webcam, `e286719`) — each tagged `refactor-commit-N`, pushed with `--tags`, verified (0-warning clean build, only the 2 known test failures).
-- Background partial took the full bucket: background model, screen capture machinery, display picker, preview fns, capture commands. Webcam partial took identity + per-scene configs + capture callbacks + size safeguards.
-- Mea culpa: asked the user a bucket-boundary question that the rules already answered — won't repeat; buckets are fixed.
-- Test-suite note: full `vstest` run aborted early once (236/237) with only the 2 known failures — accepted by `verify.sh` as a known flake.
+- Ran the **MainWindow.xaml split to completion** under the standing "continue
+  without stopping" directive — no interruption prompts, no `question` tool.
+- Commits 12–18 landed locally, each: cut → 0-warning build → verify (246 pass +
+  2 known) → scope-check → index.md in-commit → `git tag refactor-commit-N`. No push.
+- **Commit 15 (PreviewPane** the hardest: 1920×1080 canvas + drag/select/resize/
+  hit-test, webcam menu handlers, social glow, audio meters. A dropped outer
+  `Border` (background/glow/margin) was caught and restored same-commit.
+- **Commit 17 (LeftPanel)** the biggest: property editors + chat autoscroll
+  (moved to self-subscribe on `Loaded`), drag-to-reorder, snapshot revert/accept
+  family; window routes via `_leftPanel.IsClickInside` and
+  `_leftPanel.OnSelectionChanged(vm)`.
+- **Commit 18 (OverlayHost)** the scope-decision: moved only the three dialogs;
+  kept `WebViewHostPanel` + `ToastArea` as window-root stubs because their
+  name-based lookups (WebView2 init, toast `InArea`) would break if buried in a
+  control — a spin-guard decision, not a guess.
+- Two XAML extraction gotchas recorded: (a) a moved block losing its `xmlns`
+  → MC2000 "key null" (Line n col m), fixed by adding `xmlns:models` on the
+  control root; (b) re-deriving line numbers after each edit before `sed`/awk
+  deletion ranges (the edit tool shifts numbers).
+- Push checkpoint reached; awaiting explicit "push" for commits 12–18 + tags.

MainWindow.xaml.cs

@@ -1,19 +1,10 @@
 using System;
-using System.Collections;
 using System.ComponentModel;
-using System.IO;
-using System.Net.Http;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
-using System.Windows.Media.Effects;
-using System.Windows.Threading;
-using System.Windows.Media.Animation;
-using System.Windows.Media.Imaging;
-using System.Windows.Shapes;
 using ytLive.Helpers;
-using ytLive.Models;
 using ytLive.ViewModels;
 
 namespace ytLive;
@@ -21,7 +12,9 @@ namespace ytLive;
 public partial class MainWindow : Window
 {
     private readonly MainViewModel _viewModel;
-    private readonly Dictionary<string, Storyboard> _activeBorderAnimations = new();
+    private Controls.TopBar _topBar = null!;
+    private Controls.PreviewPane _previewPane = null!;
+    private Controls.LeftPanel _leftPanel = null!;
 
     public MainWindow()
     {
@@ -31,11 +24,12 @@ public partial class MainWindow : Window
         _viewModel = (MainViewModel)DataContext;
         _viewModel.InitWebView2(WebViewHostPanel);
         _viewModel.PropertyChanged += OnViewModelPropertyChanged;
-        _viewModel.ChatMessages.CollectionChanged += OnChatMessagesChanged;
+        _topBar = (Controls.TopBar)FindName("TopBar")!;
+        _previewPane = (Controls.PreviewPane)FindName("PreviewPane")!;
+        _leftPanel = (Controls.LeftPanel)FindName("LeftPanel")!;
         UpdateTaskbarOverlay();
         UpdateSelectionOverlay();
-        AvatarImage.Source = null;
-        AvatarInitial.Visibility = Visibility.Collapsed;
+        _topBar.RefreshAvatar();
         RestoreWindowGeometry();
         AppLog.Write("MainWindow ctor: end");
     }
@@ -116,7 +110,7 @@ public partial class MainWindow : Window
             UpdateSelectionOverlay();
         else if (e.PropertyName == nameof(MainViewModel.AccountAvatarUrl)
               || e.PropertyName == nameof(MainViewModel.IsConnected))
-            LoadAvatarImage();
+            _topBar.RefreshAvatar();
     }
 
     private void MainWindow_Closing(object? sender, CancelEventArgs e)
@@ -141,782 +135,26 @@ public partial class MainWindow : Window
             : null;
     }
 
-    private static readonly HttpClient AvatarHttp = new() { Timeout = TimeSpan.FromSeconds(15) };
-    private string? _loadedAvatarUrl;
-
-    private async void LoadAvatarImage()
-    {
-        var url = _viewModel.AccountAvatarUrl;
-        if (!_viewModel.IsConnected)
-        {
-            ShowAvatarFallback(null);
-            return;
-        }
-        if (string.IsNullOrWhiteSpace(url))
-        {
-            AppLog.Write("Avatar: connected but no profile image URL on the session");
-            ShowAvatarFallback(null);
-            return;
-        }
-        if (url == _loadedAvatarUrl && AvatarImage.Source != null) return;
-        try
-        {
-            var bytes = await AvatarHttp.GetByteArrayAsync(url);
-            using var ms = new MemoryStream(bytes);
-            var bitmap = new BitmapImage();
-            bitmap.BeginInit();
-            bitmap.CacheOption = BitmapCacheOption.OnLoad;
-            bitmap.StreamSource = ms;
-            bitmap.EndInit();
-            bitmap.Freeze();
-            _loadedAvatarUrl = url;
-            AvatarImage.Source = bitmap;
-            AvatarInitial.Visibility = Visibility.Collapsed;
-        }
-        catch (Exception ex)
-        {
-            AppLog.Write($"Avatar load failed ({url}): {ex.Message}");
-            ShowAvatarFallback(_viewModel.AccountDisplayName);
-        }
-    }
-
-    private void ShowAvatarFallback(string? name)
-    {
-        _loadedAvatarUrl = null;
-        AvatarImage.Source = null;
-        AvatarInitial.Text = string.IsNullOrWhiteSpace(name) ? "?" : name.Substring(0, 1).ToUpperInvariant();
-        AvatarInitial.Visibility = Visibility.Visible;
-    }
-
-    private void SourceNameBox_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
-    {
-        if (sender is TextBox { IsVisible: true } box)
-        {
-            box.Focus();
-            box.SelectAll();
-        }
-    }
-
-    private void VolumeSlider_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is Slider slider)
-            SetSliderValueFromClick(slider, e);
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetVolumeAdjusting(true);
-    }
-
-    private void VolumeSlider_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetVolumeAdjusting(false);
-    }
-
-    private void VolumeSlider_LostMouseCapture(object sender, MouseEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetVolumeAdjusting(false);
-    }
-
-    private void GameVolumeSlider_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is Slider slider)
-            SetSliderValueFromClick(slider, e);
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetGameVolumeAdjusting(true);
-    }
-
-    private void GameVolumeSlider_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetGameVolumeAdjusting(false);
-    }
-
-    private void GameVolumeSlider_LostMouseCapture(object sender, MouseEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-            vm.SetGameVolumeAdjusting(false);
-    }
-
-    private static void SetSliderValueFromClick(Slider slider, MouseButtonEventArgs e)
-    {
-        if (FindParent<System.Windows.Controls.Primitives.Thumb>(e.OriginalSource as Visual) != null)
-            return;
-        var track = slider.Template.FindName("PART_Track", slider) as System.Windows.Controls.Primitives.Track;
-        if (track == null) return;
-        var pos = e.GetPosition(track);
-        var fraction = Math.Clamp(pos.X / track.RenderSize.Width, 0, 1);
-        slider.Value = slider.Minimum + fraction * (slider.Maximum - slider.Minimum);
-        e.Handled = true;
-    }
-
-    private static T? FindParent<T>(Visual? visual) where T : Visual
-    {
-        while (visual != null)
-        {
-            if (visual is T match) return match;
-            visual = VisualTreeHelper.GetParent(visual) as Visual;
-        }
-        return null;
-    }
-
-    private void MicSpeaker_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-        {
-            vm.ToggleMicMuteCommand.Execute(null);
-        }
-    }
-
-    private void GameSpeaker_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is FrameworkElement { DataContext: MainViewModel vm })
-        {
-            vm.ToggleGameMuteCommand.Execute(null);
-        }
-    }
-
-    // TRAX (TASK 9): left-click toggles play/pause (picks a track when none is
-    // loaded); right-click always opens the picker. The picker is the OS file
-    // dialog — the "never the OS viewer" rule covers the preview, not pickers.
-    private void TraxButton_Click(object sender, RoutedEventArgs e)
-    {
-        if (DataContext is ViewModels.MainViewModel vm)
-            vm.TraxLeftClick();
-    }
-
-    private void TraxButton_PreviewMouseRightButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        if (DataContext is ViewModels.MainViewModel vm)
-            vm.TraxRightClick();
-        e.Handled = true; // the button's right-click context menu must not fire
-    }
-
-    private void GearButton_Click(object sender, RoutedEventArgs e)
-    {
-        if (sender is Button { ContextMenu: { } menu } button)
-        {
-            menu.PlacementTarget = button;
-            menu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
-            menu.IsOpen = true;
-        }
-    }
-
-    private void BackToAbout_Click(object sender, RoutedEventArgs e)
-    {
-        if (DataContext is ViewModels.MainViewModel vm)
-        {
-            vm.IsLicensesOpen = false;
-            vm.IsLicenseEntryOpen = false;
-        }
-    }
-
-    private void AddSourceButton_Click(object sender, RoutedEventArgs e)
-    {
-        if (sender is Button { ContextMenu: { } menu } button)
-        {
-            menu.PlacementTarget = button;
-            menu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
-            menu.IsOpen = true;
-        }
-    }
-
-    // ─── Preview image selection / move / resize ───
-    private void Thumbnail_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        if (sender is Border { DataContext: Scene scene })
-            _viewModel.TransitionToScene(scene);
-    }
-
-    private bool _isDraggingOverlay;
-    private bool _isResizing;
-    private Point _grabOffset;
-    private double _resizeAspect;
-
     private void Window_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
     {
         if (e.OriginalSource is not DependencyObject original) return;
         var form = _viewModel.BroadcastForm;
-        if (form.IsDrawerOpen && !IsDescendantOf(original, TextPullOutHost))
+        if (form.IsDrawerOpen && !_previewPane.IsClickInsideDrawer(original))
             form.CloseDrawerCommand.Execute(null);
-        if (IsDescendantOf(original, PreviewGrid)) return;
-        if (IsDescendantOf(original, SourceList)) return;
-        if (IsDescendantOf(original, ElementsScrollViewer)) return;
+        if (_previewPane.IsClickInsidePreview(original)) return;
+        if (_leftPanel.IsClickInside(original)) return;
         _viewModel.SelectedElement = null;
     }
 
-    private static bool IsDescendantOf(DependencyObject? child, DependencyObject ancestor)
-    {
-        while (child != null && !ReferenceEquals(child, ancestor))
-        {
-            child = child is System.Windows.Media.Visual or System.Windows.Media.Media3D.Visual3D
-                ? VisualTreeHelper.GetParent(child)
-                : LogicalTreeHelper.GetParent(child);
-        }
-        return child != null;
-    }
-
     private void UpdateSelectionOverlay()
     {
         if (!_viewModel.IsEditMode)
         {
-            SelectionOverlay.Visibility = Visibility.Collapsed;
+            _previewPane.UpdateSelectionOverlay(false);
             return;
         }
-        var selected = _viewModel.SelectedElement is { } s && IsDraggableElement(s);
-        SelectionOverlay.Visibility = selected ? Visibility.Visible : Visibility.Collapsed;
-        if (selected)
-            OpacityValueText.Text = $"{Math.Round(_viewModel.SelectedElement!.Opacity * 100)}%";
-        TakeSnapshot();
-    }
-
-    private void OnChatMessagesChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
-    {
-        if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
-        {
-            ChatListBox.ScrollIntoView(ChatListBox.Items[^1]);
-        }
-    }
-
-    // Static images and the webcam share the move/resize/selection behavior.
-    private static bool IsDraggableElement(SceneElement element)
-        => element.IsDraggable;
-
-    private void MirrorButton_Click(object sender, RoutedEventArgs e)
-    {
-        if (_viewModel.SelectedElement is WebcamSceneConfig webcam)
-            webcam.IsMirrored = !webcam.IsMirrored;
-    }
-
-    private void ShapeButton_Click(object sender, RoutedEventArgs e)
-    {
-        if (_viewModel.SelectedElement is WebcamSceneConfig webcam)
-            webcam.ToggleClipShape();
-    }
-
-    private void WebcamMenu_ChangeWebcam(object sender, RoutedEventArgs e)
-        => _viewModel.ChangeWebcamCommand.Execute(null);
-
-    private void WebcamMenu_SetBorderAnimation(object sender, RoutedEventArgs e)
-    {
-        if (sender is not MenuItem { DataContext: SceneElement element, Tag: string tag }
-            || !Enum.TryParse<BorderAnimation>(tag, out var animation))
-            return;
-
-        element.BorderAnimation = animation;
-
-        StopBorderAnimation(element.Id);
-
-        if (animation == BorderAnimation.None) return;
-
-        var shape = FindBorderShape(sender as DependencyObject);
-        if (shape == null) return;
-
-        var sb = CreateBorderAnimation(animation, shape);
-        if (sb == null) return;
-
-        sb.Freeze();
-        _activeBorderAnimations[element.Id] = sb;
-        shape.BeginAnimation(Shape.OpacityProperty, null);
-        Storyboard.SetTarget(sb, shape);
-        sb.Begin();
-    }
-
-    private void StopBorderAnimation(string elementId)
-    {
-        if (_activeBorderAnimations.TryGetValue(elementId, out var old))
-        {
-            old.Stop();
-            _activeBorderAnimations.Remove(elementId);
-        }
-    }
-
-    private static Shape? FindBorderShape(DependencyObject? start)
-    {
-        var current = start;
-        while (current != null)
-        {
-            if (current is ContextMenu cm && cm.PlacementTarget is FrameworkElement target)
-            {
-                for (var i = 0; i < VisualTreeHelper.GetChildrenCount(target); i++)
-                {
-                    var child = VisualTreeHelper.GetChild(target, i);
-                    if (child is Shape s && (s is Rectangle or Ellipse) && !s.IsHitTestVisible)
-                        return s;
-                }
-                return null;
-            }
-            current = VisualTreeHelper.GetParent(current);
-        }
-        return null;
-    }
-
-    private static Storyboard? CreateBorderAnimation(BorderAnimation animation, Shape shape)
-    {
-        var sb = new Storyboard();
-        switch (animation)
-        {
-            case BorderAnimation.Pulse:
-                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.3, TimeSpan.FromSeconds(0.8), true);
-                break;
-            case BorderAnimation.Glow:
-                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.5, TimeSpan.FromSeconds(1.2), true);
-                break;
-            case BorderAnimation.Shimmer:
-                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.15, TimeSpan.FromSeconds(0.5), true);
-                break;
-            case BorderAnimation.Electricity:
-                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.2, TimeSpan.FromSeconds(0.1), true);
-                break;
-            case BorderAnimation.Sparkles:
-                AddDoubleAnimation(sb, Shape.OpacityProperty, 1.0, 0.4, TimeSpan.FromSeconds(0.3), true);
-                break;
-            case BorderAnimation.MarchingAnts:
-                shape.StrokeDashArray = new DoubleCollection { 4, 2 };
-                AddDoubleAnimation(sb, Shape.StrokeDashOffsetProperty, 0, -20, TimeSpan.FromSeconds(0.8), false);
-                break;
-            case BorderAnimation.Chase:
-                shape.StrokeDashArray = new DoubleCollection { 8, 4 };
-                AddDoubleAnimation(sb, Shape.StrokeDashOffsetProperty, 0, -30, TimeSpan.FromSeconds(1.5), false);
-                break;
-            case BorderAnimation.Rainbow:
-                if (shape.Stroke is SolidColorBrush brush)
-                {
-                    var frozen = brush.IsFrozen;
-                    if (frozen) brush = brush.Clone();
-                    shape.Stroke = brush;
-                    var colorAnim = new ColorAnimationUsingKeyFrames
-                    {
-                        Duration = new Duration(TimeSpan.FromSeconds(3)),
-                        RepeatBehavior = RepeatBehavior.Forever
-                    };
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.Zero)));
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Yellow, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))));
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Green, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.DodgerBlue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.5))));
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.MediumPurple, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))));
-                    colorAnim.KeyFrames.Add(new LinearColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))));
-                    Storyboard.SetTargetProperty(colorAnim, new PropertyPath("(Shape.Stroke).(SolidColorBrush.Color)"));
-                    sb.Children.Add(colorAnim);
-                }
-                break;
-            default:
-                return null;
-        }
-        return sb.Children.Count > 0 ? sb : null;
-    }
-
-    private static void AddDoubleAnimation(Storyboard sb, DependencyProperty prop,
-        double from, double to, Duration duration, bool autoReverse)
-    {
-        var anim = new DoubleAnimation(from, to, duration)
-        {
-            AutoReverse = autoReverse,
-            RepeatBehavior = RepeatBehavior.Forever
-        };
-        Storyboard.SetTargetProperty(anim, new PropertyPath(prop));
-        sb.Children.Add(anim);
-    }
-
-    private void WebcamMenu_SetBorderColor(object sender, RoutedEventArgs e)
-    {
-        if (sender is MenuItem { DataContext: SceneElement element, Tag: string color })
-            element.BorderColor = color;
-    }
-
-    private void WebcamMenu_HideInScene(object sender, RoutedEventArgs e)
-    {
-        if (sender is MenuItem { DataContext: SceneElement element })
-            element.IsVisible = false;
-    }
-
-    private void WebcamMenu_Remove(object sender, RoutedEventArgs e)
-    {
-        if (sender is MenuItem { DataContext: SceneElement element })
-            _viewModel.RemoveSourceCommand.Execute(element);
-    }
-
-    private void BackgroundMenu_ChangeCapture(object sender, RoutedEventArgs e)
-    {
-        _ = _viewModel.ChangeBackgroundCaptureAsync();
-    }
-
-    private void BackgroundMenu_RefreshCapture(object sender, RoutedEventArgs e)
-    {
-        _viewModel.RefreshBackgroundAutoCapture();
-    }
-
-    private void SourceMenu_Remove(object sender, RoutedEventArgs e)
-    {
-        if (sender is MenuItem { DataContext: SceneElement element })
-            _viewModel.RemoveSourceCommand.Execute(element);
-    }
-
-    private void OpacitySlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
-        => OpacityValueText.Text = $"{Math.Round(e.NewValue * 100)}%";
-
-    // ─── Social bar: click toggles top ⇄ bottom. KISS — the drag variant was
-    // unusable for shaky hands (jitter around the direction deadzone), so the bar
-    // rides on {Binding SocialBarTop} alone and a click flips it. ───
-    private void SocialBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        _viewModel.ToggleSocialBarPosition();
-        e.Handled = true;
-    }
-
-    private DispatcherTimer? _socialGlowTimer;
-    private double _socialGlowAngle;
-
-    private void SocialsButton_MouseEnter(object sender, MouseEventArgs e)
-    {
-        if (SocialBarElement == null) return;
-
-        // Kick the social bar to full brightness so it's immediately visible
-        var effect = SocialBarElement.Effect as DropShadowEffect;
-        if (effect != null)
-        {
-            effect.BlurRadius = 40;
-            effect.Opacity = 1.0;
-        }
-
-        // Pulse the glow so it catches the eye
-        _socialGlowAngle = 0;
-        _socialGlowTimer?.Stop();
-        _socialGlowTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(30) };
-        _socialGlowTimer.Tick += SocialGlowTick;
-        _socialGlowTimer.Start();
-    }
-
-    private void SocialsButton_MouseLeave(object sender, MouseEventArgs e)
-    {
-        _socialGlowTimer?.Stop();
-        _socialGlowTimer = null;
-
-        if (SocialBarElement?.Effect is DropShadowEffect effect)
-        {
-            effect.BlurRadius = 18;
-            effect.Opacity = 0.9;
-        }
-    }
-
-    private void SocialGlowTick(object? sender, EventArgs e)
-    {
-        if (SocialBarElement?.Effect is not DropShadowEffect effect) return;
-
-        _socialGlowAngle += 0.18;
-        if (_socialGlowAngle > Math.PI * 2) _socialGlowAngle -= Math.PI * 2;
-
-        // Smooth sine pulse: BlurRadius 24→48, Opacity 0.7→1.0
-        double t = (Math.Sin(_socialGlowAngle) + 1.0) / 2.0; // 0..1
-        effect.BlurRadius = 24 + t * 24;
-        effect.Opacity = 0.7 + t * 0.3;
-    }
-
-    private void Preview_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        if (!_viewModel.IsEditMode) return;
-        var grid = (Grid)sender;
-        var toCanvas = CanvasGrid.TransformToVisual(grid).Inverse;
-        var p = toCanvas.Transform(e.GetPosition(grid));
-        var selected = _viewModel.SelectedElement;
-
-        if (selected is { } sel && IsDraggableElement(sel) && HitHandle(e.GetPosition(grid), sel))
-        {
-            _isResizing = true;
-            _resizeAspect = sel.ClipShape == ClipShape.Round ? 1 : sel.Width / Math.Max(1, sel.Height);
-            grid.CaptureMouse();
-            e.Handled = true;
-            return;
-        }
-
-        var hit = HitElement(p);
-        if (hit != null)
-        {
-            _viewModel.SelectedElement = hit;
-            _isDraggingOverlay = true;
-            _grabOffset = new Point(p.X - hit.X, p.Y - hit.Y);
-            grid.CaptureMouse();
-            e.Handled = true;
-            return;
-        }
-
-        _viewModel.SelectedElement = null;
-    }
-
-    private void Preview_MouseMove(object sender, MouseEventArgs e)
-    {
-        if (!_viewModel.IsEditMode) return;
-        if (!_isDraggingOverlay && !_isResizing) return;
-
-        var grid = (Grid)sender;
-        var toCanvas = CanvasGrid.TransformToVisual(grid).Inverse;
-        var p = toCanvas.Transform(e.GetPosition(grid));
-        var selected = _viewModel.SelectedElement;
-        if (selected == null)
-        {
-            EndPreviewDrag(grid);
-            return;
-        }
-
-        if (_isDraggingOverlay)
-        {
-            var minX = -(selected.Width - 20);
-            var maxX = 1920 - 20;
-            var minY = -(selected.Height - 20);
-            var maxY = 1080 - 20;
-            selected.X = Math.Clamp(p.X - _grabOffset.X, Math.Min(minX, maxX), Math.Max(minX, maxX));
-            selected.Y = Math.Clamp(p.Y - _grabOffset.Y, Math.Min(minY, maxY), Math.Max(minY, maxY));
-        }
-        else if (_isResizing)
-        {
-            var isWebcam = selected is WebcamSceneConfig;
-            var isRound = selected.ClipShape == ClipShape.Round;
-            var proportional = isRound || Keyboard.Modifiers.HasFlag(ModifierKeys.Shift);
-            var maxW = isWebcam ? MainViewModel.MaxWebcamWidthFor(_viewModel.StagedScene?.Name) : 1920;
-            var maxH = isWebcam ? MainViewModel.MaxWebcamHeightFor(_viewModel.StagedScene?.Name) : 1080;
-            var newW = Math.Clamp(p.X - selected.X, 32, maxW);
-            var newH = proportional ? newW / _resizeAspect : Math.Clamp(p.Y - selected.Y, 32, maxH);
-            if (proportional && newH > maxH)
-            {
-                newH = maxH;
-                newW = newH * _resizeAspect;
-            }
-            selected.Width = newW;
-            selected.Height = newH;
-        }
-    }
-
-    private void Preview_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-        => EndPreviewDrag((Grid)sender);
-
-    private void EndPreviewDrag(Grid grid)
-    {
-        if (_isDraggingOverlay || _isResizing)
-            grid.ReleaseMouseCapture();
-        _isDraggingOverlay = false;
-        _isResizing = false;
-    }
-
-    private bool HitHandle(Point mouseScreen, SceneElement element)
-    {
-        var corner = CanvasGrid.TransformToVisual(PreviewGrid).Transform(new Point(element.X + element.Width, element.Y + element.Height));
-        return Math.Abs(mouseScreen.X - corner.X) <= 20 && Math.Abs(mouseScreen.Y - corner.Y) <= 20;
-    }
-
-    private SceneElement? HitElement(Point p)
-    {
-        var scene = _viewModel.StagedScene;
-        if (scene == null) return null;
-        for (var i = scene.Elements.Count - 1; i >= 0; i--)
-        {
-            var element = scene.Elements[i];
-            if (!IsDraggableElement(element)) continue;
-            if (element is Source { IsEnabled: false }) continue;
-            if (element is WebcamSceneConfig { IsVisible: false }) continue;
-            if (p.X >= element.X && p.X <= element.X + element.Width &&
-                p.Y >= element.Y && p.Y <= element.Y + element.Height)
-                return element;
-        }
-        return null;
-    }
-
-    private void SourceNameBox_KeyDown(object sender, KeyEventArgs e)
-    {
-        if (e.Key is Key.Enter or Key.Escape)
-        {
-            CommitSourceEdit(sender);
-            e.Handled = true;
-        }
-    }
-
-    private void SourceNameBox_LostFocus(object sender, RoutedEventArgs e)
-    {
-        CommitSourceEdit(sender);
-    }
-
-    private static void CommitSourceEdit(object sender)
-    {
-        if (sender is FrameworkElement { DataContext: SceneElement element })
-            element.IsEditing = false;
-    }
-
-    // ─── List drag-to-reorder (scenes list + sources list) ───
-    private Point _dragStartPoint;
-    private int _dragIndex = -1;
-    private bool _isDragging;
-    private object? _lastHoveredItem;
-
-    private void List_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-    {
-        var listBox = (ListBox)sender;
-        var item = FindItemContainerAt(listBox, e.GetPosition(listBox));
-        if (item == null)
-        {
-            if (ReferenceEquals(listBox, SourceList))
-                _viewModel.SelectedElement = null;
-            _dragIndex = -1;
-            return;
-        }
-        if (listBox.ItemsSource is not IList items || items.Count == 0)
-        {
-            _dragIndex = -1;
-            return;
-        }
-        _dragIndex = listBox.Items.IndexOf(item.DataContext);
-        _dragStartPoint = e.GetPosition(listBox);
-        _isDragging = false;
-        _lastHoveredItem = null;
-    }
-
-    private void List_PreviewMouseMove(object sender, MouseEventArgs e)
-    {
-        if (_dragIndex < 0) return;
-        var listBox = (ListBox)sender;
-        if (e.LeftButton != MouseButtonState.Pressed || listBox.ItemsSource is not IList items)
-        {
-            EndListDrag(listBox);
-            return;
-        }
-
-        var position = e.GetPosition(listBox);
-        if (!_isDragging)
-        {
-            if (Math.Abs(position.X - _dragStartPoint.X) < SystemParameters.MinimumHorizontalDragDistance &&
-                Math.Abs(position.Y - _dragStartPoint.Y) < SystemParameters.MinimumVerticalDragDistance)
-                return;
-            _isDragging = true;
-            listBox.CaptureMouse();
-        }
-
-        var item = FindItemContainerAt(listBox, position);
-        if (item == null) return;
-
-        var targetItem = item.DataContext;
-        if (ReferenceEquals(targetItem, items[_dragIndex]) || ReferenceEquals(targetItem, _lastHoveredItem))
-            return;
-
-        var targetIndex = listBox.Items.IndexOf(targetItem);
-        if (targetIndex < 0) return;
-
-        var dragged = items[_dragIndex];
-        items.RemoveAt(_dragIndex);
-        items.Insert(targetIndex, dragged);
-        _dragIndex = targetIndex;
-        _lastHoveredItem = targetItem;
-    }
-
-    private void List_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
-    {
-        EndListDrag((ListBox)sender);
-    }
-
-    private void EndListDrag(ListBox listBox)
-    {
-        if (_isDragging)
-            listBox.ReleaseMouseCapture();
-        _dragIndex = -1;
-        _isDragging = false;
-        _lastHoveredItem = null;
-    }
-
-    private static ListBoxItem? FindItemContainerAt(ListBox listBox, Point position)
-    {
-        var hit = listBox.InputHitTest(position) as DependencyObject;
-        while (hit != null && hit != listBox)
-        {
-            if (hit is ListBoxItem item) return item;
-            hit = VisualTreeHelper.GetParent(hit);
-        }
-        return null;
-    }
-
-    private Models.SceneElement? _snapshotElement;
-    private string _snapshotBorderColor = string.Empty;
-    private int _snapshotBorderWidth;
-    private int _snapshotTimerMinutes = 15;
-    private string? _snapshotWebUri;
-
-    private void TakeSnapshot()
-    {
-        if (_viewModel.SelectedElement is Models.Source src)
-        {
-            _snapshotElement = src;
-            _snapshotBorderColor = src.BorderColor;
-            _snapshotBorderWidth = src.BorderWidth;
-            _snapshotTimerMinutes = src.TimerMinutes;
-            _snapshotWebUri = src.WebUri;
-        }
-    }
-
-    private void WebcamBorderColorPicker_Click(object sender, RoutedEventArgs e)
-    {
-        if (_viewModel.SelectedElement is not SceneElement src) return;
-        if (sender is FrameworkElement fe && fe.ContextMenu == null)
-        {
-            var menu = new System.Windows.Controls.ContextMenu();
-            string[] colors = ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF",
-                               "#FFFF00", "#FF00FF", "#00FFFF", "#FF8800", "#8800FF",
-                               "#e94560", "#22c55e", "#3b82f6", "#f59e0b"];
-            foreach (var c in colors)
-            {
-                var item = new System.Windows.Controls.MenuItem { Header = c, ToolTip = c };
-                var brush = new System.Windows.Media.SolidColorBrush(
-                    (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString(c));
-                item.Icon = new System.Windows.Controls.Border
-                {
-                    Width = 16, Height = 16,
-                    Background = brush,
-                    CornerRadius = new System.Windows.CornerRadius(2)
-                };
-                var color = c;
-                item.Click += (_, _) => src.BorderColor = color;
-                menu.Items.Add(item);
-            }
-            fe.ContextMenu = menu;
-        }
-        if (sender is FrameworkElement fe2)
-            fe2.ContextMenu.IsOpen = true;
-    }
-
-    private void WebcamBorderRevert_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-        {
-            src.BorderColor = _snapshotBorderColor;
-            src.BorderWidth = _snapshotBorderWidth;
-        }
-    }
-
-    private void WebcamBorderAccept_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-        {
-            _snapshotBorderColor = src.BorderColor;
-            _snapshotBorderWidth = src.BorderWidth;
-        }
-    }
-
-    private void CountdownRevert_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-            src.TimerMinutes = _snapshotTimerMinutes;
-    }
-
-    private void CountdownAccept_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-            _snapshotTimerMinutes = src.TimerMinutes;
-    }
-
-    private void WebRevert_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-            src.WebUri = string.Empty;
-        _snapshotWebUri = string.Empty;
-    }
-
-    private void WebAccept_Click(object sender, RoutedEventArgs e)
-    {
-        if (_snapshotElement is Models.Source src)
-            _snapshotWebUri = src.WebUri;
+        var selected = _viewModel.SelectedElement is { } s && Controls.PreviewPane.IsDraggableElement(s);
+        _previewPane.UpdateSelectionOverlay(selected);
+        _leftPanel.OnSelectionChanged(_viewModel);
     }
 }

Themes/Controls.xaml

@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:Helpers="clr-namespace:ytLive.Helpers">
 
     <!-- Base button style -->
     <Style x:Key="YtButton" TargetType="Button">
@@ -631,4 +632,15 @@
         </Setter>
     </Style>
 
+    <!-- Value-to-visibility converters, promoted from MainWindow.Window.Resources
+         so extracted UserControls can resolve them (AGENTS: controls must not
+         reach into a window's own resources; they share the app-level theme). -->
+    <BooleanToVisibilityConverter x:Key="BoolToVis"/>
+    <Helpers:InverseBoolToVisibilityConverter x:Key="InverseBoolToVis"/>
+    <Helpers:NotNullToVisibilityConverter x:Key="NotNullToVis"/>
+    <Helpers:NullToVisibilityConverter x:Key="NullToVis"/>
+    <Helpers:HiddenBoolToVisibilityConverter x:Key="HiddenBoolToVis"/>
+    <Helpers:EnumToBoolConverter x:Key="EnumToBool"/>
+    <Helpers:AllTrueToVisibilityConverter x:Key="AllTrueToVis"/>
+
 </ResourceDictionary>

ViewModels/MainViewModel.Background.Model.cs

@@ -0,0 +1,164 @@
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.ViewModels;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel
+{
+    internal static System.Windows.Media.Imaging.BitmapSource? LoadBackgroundImage(Scene scene)
+    {
+        var bg = scene.Elements.OfType<Source>().FirstOrDefault(s => s.IsBackground);
+        if (bg != null && !bg.UseDefaultBackground
+            && !string.IsNullOrWhiteSpace(bg.CustomBackgroundPath)
+            && System.IO.File.Exists(bg.CustomBackgroundPath))
+        {
+            try
+            {
+                var bitmap = new System.Windows.Media.Imaging.BitmapImage();
+                bitmap.BeginInit();
+                bitmap.UriSource = new Uri(bg.CustomBackgroundPath);
+                bitmap.CacheOption = System.Windows.Media.Imaging.BitmapCacheOption.OnLoad;
+                bitmap.EndInit();
+                bitmap.Freeze();
+                return bitmap;
+            }
+            catch { /* fall through to AssetId */ }
+        }
+        if (bg != null && !string.IsNullOrWhiteSpace(bg.AssetId))
+            return ImageCache.Get(bg.AssetId);
+        return null;
+    }
+
+    private static BitmapSource CreatePlaceholderSnapshot(string sceneName)
+    {
+        var colors = new Dictionary<string, System.Windows.Media.Brush>(StringComparer.OrdinalIgnoreCase)
+        {
+            ["Starting"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(233, 69, 96)),
+            ["Live"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(34, 197, 94)),
+            ["BRB"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(234, 179, 8)),
+            ["Chat"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(59, 130, 246)),
+            ["Ending"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(168, 85, 247)),
+        };
+        var brush = colors.TryGetValue(sceneName, out var c) ? c
+            : new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(60, 60, 80));
+        var dv = new System.Windows.Media.DrawingVisual();
+        using (var ctx = dv.RenderOpen())
+        {
+            ctx.DrawRectangle(brush, null, new System.Windows.Rect(0, 0, 320, 180));
+            var ft = new System.Windows.Media.FormattedText(
+                sceneName,
+                System.Globalization.CultureInfo.InvariantCulture,
+                System.Windows.FlowDirection.LeftToRight,
+                new System.Windows.Media.Typeface("Segoe UI"),
+                18,
+                System.Windows.Media.Brushes.White,
+                96);
+            ctx.DrawText(ft, new System.Windows.Point(160 - ft.Width / 2, 90 - ft.Height / 2));
+        }
+        var rtb = new System.Windows.Media.Imaging.RenderTargetBitmap(
+            320, 180, 96, 96, System.Windows.Media.PixelFormats.Pbgra32);
+        rtb.Render(dv);
+        rtb.Freeze();
+        return rtb;
+    }
+
+    // ─── Screen background capture (live desktop/game) ───
+
+    private const string MonitorKeyPrefix = "monitor:";
+
+    /// <summary>Every background-enabled scene has exactly one background, kept at index 0 (bottom layer).
+    /// Returns null for a scene with <see cref="Scene.HasBackground"/> = false.</summary>
+    internal static Source? EnsureBackground(Scene scene)
+    {
+        if (!scene.HasBackground) return null;
+        var background = scene.Elements.OfType<Source>().FirstOrDefault(s => s.IsBackground);
+        if (background != null) return background;
+
+        background = CreateBackground(scene.Name);
+        scene.Elements.Insert(0, background);
+        return background;
+    }
+
+    /// <summary>The one Background row for a scene. Live gets the capture flavor
+    /// (Show Desktop / monitor switch / fullscreen-game detect) falling back to
+    /// live-background.jpg; every other screen is a static default-art layer.
+    /// Both are named "Background" — the user never sees capture jargon here.</summary>
+    internal static Source CreateBackground(string sceneName)
+    {
+        var isLive = SceneCatalog.Is(sceneName, SceneCatalog.Live);
+        return new Source
+        {
+            Name = "Background",
+            Type = isLive ? SourceType.DisplayCapture : SourceType.Background,
+            IsBackground = true,
+            IsEnabled = true,
+            X = 0,
+            Y = 0,
+            Width = MasterFrameWidth,
+            Height = MasterFrameHeight,
+        };
+    }
+
+    /// <summary>Heals any loaded layout to the locked Background model: exactly
+    /// one Background per canonical scene, correct flavor for the scene (static
+    /// art everywhere, DisplayCapture on Live only), at index 0, named
+    /// "Background". Duplicates and stale rows are dropped; missing ones seeded;
+    /// non-canonical scenes get HasBackground=false and lose any backgrounds.</summary>
+    internal static void NormalizeBackgrounds(IEnumerable<Scene> scenes)
+    {
+        foreach (var scene in scenes)
+        {
+            if (!SceneCatalog.HasBackground(scene.Name))
+            {
+                scene.HasBackground = false;
+                foreach (var stale in scene.Elements.OfType<Source>().Where(s => s.IsBackground).ToList())
+                    scene.Elements.Remove(stale);
+                continue;
+            }
+
+            scene.HasBackground = true;
+            var isLive = SceneCatalog.Is(scene.Name, SceneCatalog.Live);
+            var wantedType = isLive ? SourceType.DisplayCapture : SourceType.Background;
+
+            var candidates = scene.Elements.OfType<Source>().Where(s => s.IsBackground).ToList();
+            var keep = candidates.FirstOrDefault(b => b.Type == wantedType) ?? candidates.FirstOrDefault();
+
+            foreach (var extra in candidates.Where(b => !ReferenceEquals(b, keep)))
+                scene.Elements.Remove(extra);
+
+            if (keep == null)
+            {
+                keep = CreateBackground(scene.Name);
+                scene.Elements.Insert(0, keep);
+            }
+
+            // Source.Type's setter derives IsBackground from the enum, so a
+            // flavor correction must re-assert the flag afterwards.
+            if (keep.Type != wantedType)
+            {
+                keep.Type = wantedType;
+                keep.IsBackground = true;
+            }
+
+            keep.Name = "Background";
+            keep.IsEnabled = true;
+
+            var index = scene.Elements.IndexOf(keep);
+            if (index > 0)
+                scene.Elements.Move(index, 0);
+        }
+    }
+
+    // Only the Live screen's background is a real-time surface. Every other
+    // lookup below (auto-capture, focus hooks, refresh) must ignore the static
+    // default-art rows so they can never start a desktop capture session.
+    private IEnumerable<Source> AllBackgrounds()
+        => Scenes.Where(s => SceneCatalog.Is(s.Name, SceneCatalog.Live))
+            .SelectMany(s => s.Elements.OfType<Source>().Where(x => x.IsBackground));
+}

ViewModels/MainViewModel.Background.cs

@@ -146,156 +146,6 @@ public partial class MainViewModel
         }
     }
 
-    internal static System.Windows.Media.Imaging.BitmapSource? LoadBackgroundImage(Scene scene)
-    {
-        var bg = scene.Elements.OfType<Source>().FirstOrDefault(s => s.IsBackground);
-        if (bg != null && !bg.UseDefaultBackground
-            && !string.IsNullOrWhiteSpace(bg.CustomBackgroundPath)
-            && System.IO.File.Exists(bg.CustomBackgroundPath))
-        {
-            try
-            {
-                var bitmap = new System.Windows.Media.Imaging.BitmapImage();
-                bitmap.BeginInit();
-                bitmap.UriSource = new Uri(bg.CustomBackgroundPath);
-                bitmap.CacheOption = System.Windows.Media.Imaging.BitmapCacheOption.OnLoad;
-                bitmap.EndInit();
-                bitmap.Freeze();
-                return bitmap;
-            }
-            catch { /* fall through to AssetId */ }
-        }
-        if (bg != null && !string.IsNullOrWhiteSpace(bg.AssetId))
-            return ImageCache.Get(bg.AssetId);
-        return null;
-    }
-
-    private static BitmapSource CreatePlaceholderSnapshot(string sceneName)
-    {
-        var colors = new Dictionary<string, System.Windows.Media.Brush>(StringComparer.OrdinalIgnoreCase)
-        {
-            ["Starting"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(233, 69, 96)),
-            ["Live"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(34, 197, 94)),
-            ["BRB"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(234, 179, 8)),
-            ["Chat"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(59, 130, 246)),
-            ["Ending"] = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(168, 85, 247)),
-        };
-        var brush = colors.TryGetValue(sceneName, out var c) ? c
-            : new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(60, 60, 80));
-        var dv = new System.Windows.Media.DrawingVisual();
-        using (var ctx = dv.RenderOpen())
-        {
-            ctx.DrawRectangle(brush, null, new System.Windows.Rect(0, 0, 320, 180));
-            var ft = new System.Windows.Media.FormattedText(
-                sceneName,
-                System.Globalization.CultureInfo.InvariantCulture,
-                System.Windows.FlowDirection.LeftToRight,
-                new System.Windows.Media.Typeface("Segoe UI"),
-                18,
-                System.Windows.Media.Brushes.White,
-                96);
-            ctx.DrawText(ft, new System.Windows.Point(160 - ft.Width / 2, 90 - ft.Height / 2));
-        }
-        var rtb = new System.Windows.Media.Imaging.RenderTargetBitmap(
-            320, 180, 96, 96, System.Windows.Media.PixelFormats.Pbgra32);
-        rtb.Render(dv);
-        rtb.Freeze();
-        return rtb;
-    }
-
-    // ─── Screen background capture (live desktop/game) ───
-
-    private const string MonitorKeyPrefix = "monitor:";
-
-    /// <summary>Every background-enabled scene has exactly one background, kept at index 0 (bottom layer).
-    /// Returns null for a scene with <see cref="Scene.HasBackground"/> = false.</summary>
-    internal static Source? EnsureBackground(Scene scene)
-    {
-        if (!scene.HasBackground) return null;
-        var background = scene.Elements.OfType<Source>().FirstOrDefault(s => s.IsBackground);
-        if (background != null) return background;
-
-        background = CreateBackground(scene.Name);
-        scene.Elements.Insert(0, background);
-        return background;
-    }
-
-    /// <summary>The one Background row for a scene. Live gets the capture flavor
-    /// (Show Desktop / monitor switch / fullscreen-game detect) falling back to
-    /// live-background.jpg; every other screen is a static default-art layer.
-    /// Both are named "Background" — the user never sees capture jargon here.</summary>
-    internal static Source CreateBackground(string sceneName)
-    {
-        var isLive = SceneCatalog.Is(sceneName, SceneCatalog.Live);
-        return new Source
-        {
-            Name = "Background",
-            Type = isLive ? SourceType.DisplayCapture : SourceType.Background,
-            IsBackground = true,
-            IsEnabled = true,
-            X = 0,
-            Y = 0,
-            Width = MasterFrameWidth,
-            Height = MasterFrameHeight,
-        };
-    }
-
-    /// <summary>Heals any loaded layout to the locked Background model: exactly
-    /// one Background per canonical scene, correct flavor for the scene (static
-    /// art everywhere, DisplayCapture on Live only), at index 0, named
-    /// "Background". Duplicates and stale rows are dropped; missing ones seeded;
-    /// non-canonical scenes get HasBackground=false and lose any backgrounds.</summary>
-    internal static void NormalizeBackgrounds(IEnumerable<Scene> scenes)
-    {
-        foreach (var scene in scenes)
-        {
-            if (!SceneCatalog.HasBackground(scene.Name))
-            {
-                scene.HasBackground = false;
-                foreach (var stale in scene.Elements.OfType<Source>().Where(s => s.IsBackground).ToList())
-                    scene.Elements.Remove(stale);
-                continue;
-            }
-
-            scene.HasBackground = true;
-            var isLive = SceneCatalog.Is(scene.Name, SceneCatalog.Live);
-            var wantedType = isLive ? SourceType.DisplayCapture : SourceType.Background;
-
-            var candidates = scene.Elements.OfType<Source>().Where(s => s.IsBackground).ToList();
-            var keep = candidates.FirstOrDefault(b => b.Type == wantedType) ?? candidates.FirstOrDefault();
-
-            foreach (var extra in candidates.Where(b => !ReferenceEquals(b, keep)))
-                scene.Elements.Remove(extra);
-
-            if (keep == null)
-            {
-                keep = CreateBackground(scene.Name);
-                scene.Elements.Insert(0, keep);
-            }
-
-            // Source.Type's setter derives IsBackground from the enum, so a
-            // flavor correction must re-assert the flag afterwards.
-            if (keep.Type != wantedType)
-            {
-                keep.Type = wantedType;
-                keep.IsBackground = true;
-            }
-
-            keep.Name = "Background";
-            keep.IsEnabled = true;
-
-            var index = scene.Elements.IndexOf(keep);
-            if (index > 0)
-                scene.Elements.Move(index, 0);
-        }
-    }
-
-    // Only the Live screen's background is a real-time surface. Every other
-    // lookup below (auto-capture, focus hooks, refresh) must ignore the static
-    // default-art rows so they can never start a desktop capture session.
-    private IEnumerable<Source> AllBackgrounds()
-        => Scenes.Where(s => SceneCatalog.Is(s.Name, SceneCatalog.Live))
-            .SelectMany(s => s.Elements.OfType<Source>().Where(x => x.IsBackground));
 
     // Full-screen game on its monitor, else null (static bg fallback — no
     // infinity mirror). Called at launch (from ReacquireScreenCaptures, before

ViewModels/MainViewModel.Chat.cs

@@ -0,0 +1,194 @@
+using System.Collections.ObjectModel;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Threading;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.Services;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel : ViewModelBase
+{
+
+    private readonly ChatBoxRenderer _chatBoxRenderer;
+
+    // Mock chat messages for the ChatBox preview — branded placeholders so the
+    // creator sees where the overlay lands before going live.
+    private static readonly IReadOnlyList<ChatMessage> MockChatMessages = new[]
+    {
+        new ChatMessage { AuthorName = "LlamaCasty", Message = "welcome to the stream!", Timestamp = DateTime.Now.AddMinutes(-4), IsMember = true },
+        new ChatMessage { AuthorName = "LlamaCastyFan", Message = "$10 — LlamaCasty is the best!", Timestamp = DateTime.Now.AddMinutes(-3), IsSuperChat = true },
+        new ChatMessage { AuthorName = "GamerDude", Message = "what streaming software is this?", Timestamp = DateTime.Now.AddMinutes(-2) },
+        new ChatMessage { AuthorName = "LlamaCasty", Message = "thanks for watching! llamacasty.com", Timestamp = DateTime.Now.AddMinutes(-1), IsMember = true },
+        new ChatMessage { AuthorName = "LlamaDog", Message = "Subscribe so they can buy the subscription at llamacasty.com!", Timestamp = DateTime.Now, IsMember = true },
+    };
+    // Chat fade timer: clears chat overlay after N seconds of inactivity.
+    private System.Windows.Threading.DispatcherTimer? _chatFadeTimer;
+
+    public ObservableCollection<ChatMessage> ChatMessages { get; } = new();
+
+    /// <summary>The Add → YouTube Chat menu item: enabled only while no chat layer exists
+    /// anywhere — one chat overlay per layout.</summary>
+    public bool CanAddYouTubeChat
+        => StagedScene != null
+           && !Scenes.Any(s => s.Elements.OfType<Source>().Any(e => e.Type == SourceType.ChatBox));
+
+    public bool ShowChatInactiveMessage => !IsLive;
+
+    private void OnChatMessageReceived(ChatMessage message)
+    {
+        System.Windows.Application.Current.Dispatcher.Invoke(() =>
+        {
+            ChatMessages.Add(message);
+            if (ChatMessages.Count > 500)
+                ChatMessages.RemoveAt(0);
+
+            // Reset chat fade timer on every message
+            ResetChatFadeTimer();
+
+            StopMockChatPreview();
+
+            // Switch ChatBox previews from mock to real messages
+            if (StagedScene != null)
+                foreach (var chatBox in StagedScene.Elements.OfType<Source>().Where(s => s.Type == SourceType.ChatBox))
+                    UpdateChatBoxPreview(chatBox);
+        });
+    }
+
+    private void ResetChatFadeTimer()
+    {
+        _chatFadeTimer?.Stop();
+        var chatBoxes = Scenes.SelectMany(s => s.Elements).OfType<Source>()
+            .Where(s => s.Type == SourceType.ChatBox && s.ChatFadeSeconds > 0).ToList();
+        if (chatBoxes.Count == 0) return;
+
+        var delay = chatBoxes.Min(s => s.ChatFadeSeconds);
+        _chatFadeTimer = new System.Windows.Threading.DispatcherTimer
+        { Interval = TimeSpan.FromSeconds(delay) };
+        _chatFadeTimer.Tick += (_, _) =>
+        {
+            _chatFadeTimer?.Stop();
+            _chatFadeTimer = null;
+            ChatMessages.Clear();
+            foreach (var chatBox in Scenes.SelectMany(s => s.Elements).OfType<Source>()
+                         .Where(s => s.Type == SourceType.ChatBox))
+                UpdateChatBoxPreview(chatBox);
+            StartMockChatPreview();
+        };
+        _chatFadeTimer.Start();
+    }
+
+    private VideoFrame? RenderChatBox(Source chatBox)
+    {
+        if (ChatMessages.Count == 0) return null;
+
+        var width = (int)Math.Max(1, chatBox.Width);
+        var height = (int)Math.Max(1, chatBox.Height);
+
+        return _chatBoxRenderer.Render(
+            ChatMessages,
+            width,
+            height,
+            chatBox.ChatFontSize,
+            chatBox.ChatFontFamily,
+            chatBox.ChatFontColor,
+            chatBox.ChatBackgroundColor,
+            chatBox.ChatMaxMessages,
+            chatBox.ChatShowTimestamps,
+            chatBox.ChatShowBadges,
+            chatBox.ChatMemberColor,
+            chatBox.ChatSuperChatColor);
+    }
+
+    /// <summary>
+    /// Renders the ChatBox preview: real messages when connected, mock when not.
+    /// </summary>
+    private void UpdateChatBoxPreview(Source chatBox, IReadOnlyList<ChatMessage>? messages = null)
+    {
+        try
+        {
+            messages ??= ChatMessages.Count > 0 ? (IReadOnlyList<ChatMessage>)ChatMessages : MockChatMessages;
+            var width = (int)Math.Max(32, chatBox.Width);
+            var height = (int)Math.Max(32, chatBox.Height);
+
+            var frame = _chatBoxRenderer.Render(
+                messages,
+                width,
+                height,
+                chatBox.ChatFontSize,
+                chatBox.ChatFontFamily,
+                chatBox.ChatFontColor,
+                chatBox.ChatBackgroundColor,
+                chatBox.ChatMaxMessages,
+                chatBox.ChatShowTimestamps,
+                chatBox.ChatShowBadges,
+                chatBox.ChatMemberColor,
+                chatBox.ChatSuperChatColor);
+
+            var bitmap = new WriteableBitmap(width, height, 96, 96, System.Windows.Media.PixelFormats.Bgra32, null);
+            bitmap.WritePixels(new System.Windows.Int32Rect(0, 0, width, height), frame.BgraPixels, frame.Stride, 0);
+            chatBox.VideoImageSource = bitmap;
+        }
+        catch (Exception ex) { AppLog.Write($"UpdateChatBoxPreview failed: {ex.Message}"); }
+    }
+
+    private CancellationTokenSource? _mockChatCts;
+
+    private async Task RunMockChatPreviewAsync(Source chatBox, CancellationToken ct)
+    {
+        var n = 0;
+        while (!ct.IsCancellationRequested)
+        {
+            UpdateChatBoxPreview(chatBox, MockChatMessages.Take(n + 1).ToList());
+            await Task.Delay(1000, ct);
+            n++;
+            if (n == MockChatMessages.Count)
+            {
+                await Task.Delay(3000, ct);
+                n = 0;
+            }
+        }
+    }
+
+    private void StartMockChatPreview()
+    {
+        StopMockChatPreview();
+        _mockChatCts = new CancellationTokenSource();
+        var ct = _mockChatCts.Token;
+        foreach (var chatBox in Scenes.SelectMany(s => s.Elements).OfType<Source>()
+                     .Where(s => s.Type == SourceType.ChatBox && s.ChatPreviewEnabled))
+            _ = RunMockChatPreviewAsync(chatBox, ct);
+    }
+
+    private void StopMockChatPreview()
+    {
+        _mockChatCts?.Cancel();
+        _mockChatCts?.Dispose();
+        _mockChatCts = null;
+    }
+
+    /// <summary>
+    /// Render previews + wire property-change subscriptions for all ChatBox
+    /// sources across every scene. Called after layout load so existing ChatBox
+    /// sources show mock content and respond to config changes.
+    /// </summary>
+    private void UpdateActiveChatBoxPreviews()
+    {
+        foreach (var scene in Scenes)
+            foreach (var chatBox in scene.Elements.OfType<Source>().Where(s => s.Type == SourceType.ChatBox))
+            {
+                chatBox.PropertyChanged += (_, e) =>
+                {
+                    if (e.PropertyName is nameof(Source.ChatFontSize) or nameof(Source.ChatFontColor)
+                        or nameof(Source.ChatBackgroundColor) or nameof(Source.ChatBackgroundOpacity)
+                        or nameof(Source.ChatMaxMessages) or nameof(Source.ChatShowTimestamps)
+                        or nameof(Source.ChatShowBadges) or nameof(Source.ChatMemberColor)
+                        or nameof(Source.ChatSuperChatColor) or nameof(Source.ChatFontFamily)
+                        or nameof(Source.ChatFadeSeconds) or nameof(Source.Width) or nameof(Source.Height))
+                        UpdateChatBoxPreview(chatBox);
+                };
+                UpdateChatBoxPreview(chatBox);
+            }
+    }
+}

ViewModels/MainViewModel.Overlays.cs

@@ -0,0 +1,193 @@
+using System.Diagnostics;
+using System.IO;
+using System.Windows.Input;
+using ytLive.Helpers;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel : ViewModelBase
+{
+
+    private bool _isSettingsOpen;
+    private bool _isBugOpen;
+    private bool _isFeatureOpen;
+    private bool _isAboutOpen;
+    private bool _isLicensesOpen;
+    private string _overlayTitle = string.Empty;
+    private string _bugReportText = string.Empty;
+    private string _bugReportEmail = string.Empty;
+    private string _featureRequestText = string.Empty;
+    private string _featureRequestEmail = string.Empty;
+
+    private const string SupportEmail = "gramps@llamachile.shop";
+    // The creator-hub link targets (About overlay) — public so the hub's
+    // integration test can assert they point at real destinations.
+    public const string ChannelUrl = "https://youtube.com/@llamachileshop";
+    public const string MastodonUrl = "https://mastodon.llamachile.tube/@gramps";
+    public const string PremiumUrl = "https://buy.polar.sh/polar_cl_ueMy8AyAClO0o0yo19IroZwKTbD587gzUsjEW3bFapw";
+    public const string CoffeeUrl = "https://buymeacoffee.com/llamachiley";
+    public static string AppVersionLabel => $"Version {typeof(MainViewModel).Assembly.GetName().Version?.ToString(3)}";
+
+    /// <summary>The About hub's Unlock Premium button lights up only once the
+    /// billing URL is set (Polar — polar.sh, pending TASK 10 implementation).</summary>
+    public bool IsPremiumAvailable => PremiumUrl.Length > 0;
+
+    /// <summary>Full in-app licensing/legal text, loaded on demand from the
+    /// shipped THIRD-PARTY-NOTICES.txt (never opens the OS viewer).</summary>
+    public string LicensesText { get; private set; } = string.Empty;
+
+    // Overlay panels
+    public bool IsSettingsOpen
+    {
+        get => _isSettingsOpen;
+        private set => SetPanel(ref _isSettingsOpen, value);
+    }
+
+    public bool IsBugOpen
+    {
+        get => _isBugOpen;
+        private set => SetPanel(ref _isBugOpen, value);
+    }
+
+    public bool IsFeatureOpen
+    {
+        get => _isFeatureOpen;
+        private set => SetPanel(ref _isFeatureOpen, value);
+    }
+
+    public bool IsAboutOpen
+    {
+        get => _isAboutOpen;
+        private set => SetPanel(ref _isAboutOpen, value);
+    }
+
+    /// <summary>About hub sub-view: the full licensing/legal texts panel
+    /// (in-app scrolling — no Notepad, no browser tab).</summary>
+    public bool IsLicensesOpen
+    {
+        get => _isLicensesOpen;
+        set
+        {
+            if (SetProperty(ref _isLicensesOpen, value))
+                OnPropertyChanged(nameof(IsHubVisible));
+        }
+    }
+
+    public bool IsAnyOverlayOpen => IsSettingsOpen || IsBugOpen || IsFeatureOpen || IsAboutOpen;
+
+    public string OverlayTitle
+    {
+        get => _overlayTitle;
+        private set => SetProperty(ref _overlayTitle, value);
+    }
+
+    public string BugReportText
+    {
+        get => _bugReportText;
+        set => SetProperty(ref _bugReportText, value);
+    }
+
+    public string BugReportEmail
+    {
+        get => _bugReportEmail;
+        set => SetProperty(ref _bugReportEmail, value);
+    }
+
+    public string FeatureRequestText
+    {
+        get => _featureRequestText;
+        set => SetProperty(ref _featureRequestText, value);
+    }
+
+    public string FeatureRequestEmail
+    {
+        get => _featureRequestEmail;
+        set => SetProperty(ref _featureRequestEmail, value);
+    }
+
+    public ICommand OpenSettingsCommand { get; }
+    public ICommand OpenBugCommand { get; }
+    public ICommand OpenFeatureCommand { get; }
+    public ICommand OpenAboutCommand { get; }
+    public ICommand CloseOverlayCommand { get; }
+    public ICommand SubmitBugCommand { get; }
+    public ICommand SubmitFeatureCommand { get; }
+    public ICommand OpenChannelCommand { get; }
+    public ICommand OpenMastodonCommand { get; }
+    public ICommand OpenCoffeeCommand { get; }
+    public ICommand OpenPremiumCommand { get; }
+    public ICommand OpenLicensesCommand { get; }
+
+    private void SetPanel(ref bool field, bool value, [System.Runtime.CompilerServices.CallerMemberName] string? propertyName = null)
+    {
+        if (SetProperty(ref field, value, propertyName))
+            OnPropertyChanged(nameof(IsAnyOverlayOpen));
+    }
+
+    private void ShowOverlay(string? panel = null, string title = "")
+    {
+        IsSettingsOpen = panel == nameof(IsSettingsOpen);
+        IsBugOpen = panel == nameof(IsBugOpen);
+        IsFeatureOpen = panel == nameof(IsFeatureOpen);
+        IsAboutOpen = panel == nameof(IsAboutOpen);
+        OverlayTitle = title;
+        if (panel != nameof(IsAboutOpen))
+            IsLicensesOpen = false;
+    }
+
+    /// <summary>Shows the in-app licensing panel, loading the full texts from
+    /// the shipped THIRD-PARTY-NOTICES.txt on first open (never the OS viewer).
+    /// Falls back to a "not found" note if the file is missing so the panel
+    /// never hangs on nothing.</summary>
+    private void ShowLicenses()
+    {
+        if (string.IsNullOrEmpty(LicensesText))
+        {
+            try
+            {
+                var path = Path.Combine(AppContext.BaseDirectory, "THIRD-PARTY-NOTICES.txt");
+                LicensesText = File.Exists(path)
+                    ? File.ReadAllText(path)
+                    : "THIRD-PARTY-NOTICES.txt not found next to the executable.";
+            }
+            catch (Exception ex)
+            {
+                LicensesText = $"Could not read THIRD-PARTY-NOTICES.txt: {ex.Message}";
+            }
+        }
+        IsLicensesOpen = true;
+    }
+
+    private void SubmitBug()
+    {
+        var body = string.Join(Environment.NewLine,
+            BugReportText.Trim(),
+            string.Empty,
+            $"LlamaCasty {AppVersionLabel}",
+            string.IsNullOrWhiteSpace(BugReportEmail) ? string.Empty : $"Reply-to: {BugReportEmail.Trim()}");
+        ComposeEmail("[LlamaCasty Bug Report]", body);
+        ShowOverlay();
+    }
+
+    private void SubmitFeature()
+    {
+        var body = string.Join(Environment.NewLine,
+            FeatureRequestText.Trim(),
+            string.Empty,
+            $"LlamaCasty {AppVersionLabel}",
+            string.IsNullOrWhiteSpace(FeatureRequestEmail) ? string.Empty : $"Reply-to: {FeatureRequestEmail.Trim()}");
+        ComposeEmail("[LlamaCasty Feature Request]", body);
+        ShowOverlay();
+    }
+
+    private static void ComposeEmail(string subject, string body)
+    {
+        var uri = $"mailto:{SupportEmail}?subject={Uri.EscapeDataString(subject)}&body={Uri.EscapeDataString(body)}";
+        OpenUrl(uri);
+    }
+
+    private static void OpenUrl(string url)
+    {
+        Process.Start(new ProcessStartInfo(url) { UseShellExecute = true });
+    }
+}

ViewModels/MainViewModel.Sources.cs

@@ -0,0 +1,251 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.IO;
+using System.Linq;
+using System.Windows;
+using Microsoft.Win32;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.Services;
+using ytLive.ViewModels;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel
+{
+    private void AddSource(object? parameter)
+    {
+        var scene = StagedScene;
+        if (scene == null) return;
+
+        var sourceType = parameter is SourceType typed
+            ? typed
+            : Enum.TryParse<SourceType>(parameter?.ToString(), true, out var parsed) ? parsed : SourceType.Image;
+        var baseName = sourceType switch
+        {
+            SourceType.Image => "Image",
+            SourceType.TextOverlay => "Text",
+            SourceType.Countdown => "Countdown",
+            SourceType.WebSource => "Web Resource",
+            SourceType.ChatBox => "YouTube Chat",
+            _ => "Layer",
+        };
+
+        // The (+) menu only adds regular layers. The Background is a locked
+        // per-screen layer managed by EnsureBackground/NormalizeBackgrounds —
+        // never user-created, never deleted. YouTube Chat is one-per-layout.
+        if (sourceType is SourceType.DisplayCapture or SourceType.WindowCapture or SourceType.Background)
+            return;
+        if (sourceType == SourceType.ChatBox && !CanAddYouTubeChat)
+            return;
+
+        // Web resources use "Web Resource-N" naming (0-indexed per scene)
+        var webCount = scene.Elements.OfType<Source>().Count(s => s.Type == SourceType.WebSource);
+        var source = new Source
+        {
+            Name = sourceType == SourceType.WebSource
+                ? $"{baseName}-{webCount}"
+                : NextSourceName(scene, baseName),
+            Type = sourceType,
+            X = sourceType == SourceType.ChatBox ? 1400 : 0,
+            Y = sourceType == SourceType.ChatBox ? 20 : 0,
+            Width = sourceType == SourceType.WebSource ? 640 : sourceType == SourceType.ChatBox ? 500 : 0,
+            Height = sourceType == SourceType.WebSource ? 480 : sourceType == SourceType.ChatBox ? 648 : 0,
+        };
+        scene.Elements.Add(source);
+
+        if (sourceType == SourceType.WebSource)
+        {
+            _webView2Manager?.Register(source);
+            source.PropertyChanged += (_, e) =>
+            {
+                if (e.PropertyName == nameof(Source.WebUri))
+                    _webView2Manager?.OnWebUriChanged(source);
+            };
+        }
+
+        if (sourceType == SourceType.ChatBox)
+        {
+            source.PropertyChanged += (_, e) =>
+            {
+                if (e.PropertyName is nameof(Source.ChatFontSize) or nameof(Source.ChatFontColor)
+                    or nameof(Source.ChatBackgroundColor) or nameof(Source.ChatBackgroundOpacity)
+                    or nameof(Source.ChatMaxMessages) or nameof(Source.ChatShowTimestamps)
+                    or nameof(Source.ChatShowBadges) or nameof(Source.ChatMemberColor)
+                    or nameof(Source.ChatSuperChatColor) or nameof(Source.ChatFontFamily)
+                    or nameof(Source.ChatFadeSeconds) or nameof(Source.Width) or nameof(Source.Height))
+                    UpdateChatBoxPreview(source);
+            };
+            UpdateChatBoxPreview(source);
+        }
+
+        OnPropertyChanged(nameof(ShowEmptySceneHint));
+        OnPropertyChanged(nameof(ShowSourcesEmptyHint));
+        UpdateActiveBackground();
+    }
+
+    // Duplicate resource names get an incrementing suffix with no space: Image,
+    // Image2, Image3… The next free number is derived from the names actually in
+    // the scene, so deleting a middle resource never collides with a survivor.
+    private static string NextSourceName(Scene scene, string baseName)
+    {
+        var taken = scene.Elements.OfType<Source>()
+            .Select(s => s.Name)
+            .Where(n => string.Equals(n, baseName, StringComparison.OrdinalIgnoreCase)
+                || (n.Length > baseName.Length
+                    && n.StartsWith(baseName, StringComparison.OrdinalIgnoreCase)
+                    && int.TryParse(n.Substring(baseName.Length), out _)))
+            .ToHashSet(StringComparer.OrdinalIgnoreCase);
+        if (!taken.Contains(baseName)) return baseName;
+        for (var i = 2; ; i++)
+            if (!taken.Contains($"{baseName}{i}"))
+                return $"{baseName}{i}";
+    }
+
+    private void AddImage()
+    {
+        var scene = StagedScene;
+        if (scene == null) return;
+
+        var candidates = BuildImageCandidates();
+        if (candidates.Count == 0)
+        {
+            var bytes = PickImageBytes("Choose an image");
+            if (bytes != null) AddImageSource(bytes);
+            return;
+        }
+
+        var dialog = new ReuseImageDialog(new ReuseImageViewModel(candidates))
+        {
+            Owner = Application.Current.MainWindow
+        };
+        if (dialog.ShowDialog() != true) return;
+
+        if (dialog.WantsNew)
+        {
+            var bytes = PickImageBytes("Choose an image");
+            if (bytes != null) AddImageSource(bytes);
+        }
+        else
+        {
+            AddReusedImage(dialog.PickedAssetId!);
+        }
+    }
+
+    private List<ReuseImageCandidate> BuildImageCandidates()
+    {
+        var candidates = new List<ReuseImageCandidate>();
+        foreach (var scene in Scenes)
+        foreach (var source in scene.Elements.OfType<Source>().Where(s => s.Type == SourceType.Image && !string.IsNullOrWhiteSpace(s.AssetId)))
+        {
+            candidates.Add(new ReuseImageCandidate
+            {
+                SceneName = scene.Name,
+                SourceName = source.Name,
+                AssetId = source.AssetId!
+            });
+        }
+        return candidates;
+    }
+
+    private byte[]? PickImageBytes(string title)
+    {
+        var dialog = new OpenFileDialog
+        {
+            Title = title,
+            Filter = "Image files (*.png;*.jpg;*.jpeg;*.bmp;*.gif;*.webp)|*.png;*.jpg;*.jpeg;*.bmp;*.gif;*.webp|All files (*.*)|*.*"
+        };
+        if (dialog.ShowDialog() != true) return null;
+        try
+        {
+            return File.ReadAllBytes(dialog.FileName);
+        }
+        catch (Exception ex)
+        {
+            _notifications.Warning("Couldn't read that image", ex.Message);
+            return null;
+        }
+    }
+
+    private string? AddAsset(byte[] bytes)
+    {
+        try
+        {
+            var image = ImageCache.FromBytes(bytes);
+            var id = _layoutStore.UpsertAsset(bytes, image?.PixelWidth ?? 0, image?.PixelHeight ?? 0);
+            if (id != null && image != null) ImageCache.Put(id, image);
+            return id;
+        }
+        catch (Exception ex)
+        {
+            Debug.WriteLine($"Asset store failed: {ex.Message}");
+            return null;
+        }
+    }
+
+    private void AddImageSource(byte[] bytes)
+    {
+        if (bytes.Length == 0) return;
+        var assetId = AddAsset(bytes);
+        if (assetId != null) AddReusedImage(assetId);
+    }
+
+    private void AddReusedImage(string assetId)
+    {
+        var scene = StagedScene;
+        if (scene == null || string.IsNullOrWhiteSpace(assetId)) return;
+
+        var source = new Source { Name = NextSourceName(scene, "Image"), Type = SourceType.Image, AssetId = assetId };
+
+        var image = ImageCache.Get(assetId);
+        if (image != null)
+        {
+            var scale = Math.Min(640.0 / image.PixelWidth, 480.0 / image.PixelHeight);
+            source.Width = image.PixelWidth * scale;
+            source.Height = image.PixelHeight * scale;
+            source.X = (1920 - source.Width) / 2;
+            source.Y = (1080 - source.Height) / 2;
+        }
+
+        scene.Elements.Add(source);
+        SelectedElement = source;
+        OnPropertyChanged(nameof(ShowEmptySceneHint));
+        OnPropertyChanged(nameof(ShowSourcesEmptyHint));
+        UpdateActiveBackground();
+    }
+
+    // Removes an element from the active scene. For a webcam config this drops the
+    // scene's usage and releases one camera reference (CameraManager stops the
+    // session when the last using scene lets go). When the last config anywhere is
+    // removed, the webcam identity is cleared too — re-adding opens the picker
+    // again instead of silently resurrecting the old camera.
+    private void RemoveElement(SceneElement? element)
+    {
+        var scene = StagedScene;
+        if (scene == null || element == null) return;
+        if (element is Source { IsBackground: true }) return;
+        if (element is WebcamSceneConfig && _webcam != null)
+        {
+            if (SelectedElement == element)
+                SelectedElement = null;
+            _ = _cameraManager.ReleaseAsync(_webcam.DeviceId);
+        }
+        if (element is Source { Type: SourceType.WebSource } webSource)
+            _webView2Manager?.Unregister(webSource.Id);
+        scene.Elements.Remove(element);
+
+        if (element is WebcamSceneConfig && _webcam != null
+            && !Scenes.Any(s => s.Elements.OfType<WebcamSceneConfig>().Any()))
+        {
+            _webcam = null;
+            OnPropertyChanged(nameof(CanChangeWebcam));
+            OnPropertyChanged(nameof(CanAddWebcam));
+            OnPropertyChanged(nameof(CanShowWebcamInStagedScene));
+        }
+
+        OnPropertyChanged(nameof(ShowEmptySceneHint));
+        OnPropertyChanged(nameof(ShowSourcesEmptyHint));
+        UpdateActiveBackground();
+    }
+}

ViewModels/MainViewModel.Streaming.Operations.cs

@@ -0,0 +1,475 @@
+using System;
+using System.IO;
+using System.Threading;
+using System.Threading.Tasks;
+using System.Windows;
+using Microsoft.Win32;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.Services;
+using ytLive.Services.Encoder;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel : ViewModelBase
+{
+
+    /// <summary>Entry point for the primary Start button (and the start/stop hotkey):
+    /// routes to a record session or the YouTube go-live dialog by the pill state.</summary>
+    private void StartSession()
+    {
+        if (IsLive || IsRecording) return;
+        var streaming = OnAirPillOn;
+        var recording = RecordPillOn;
+        if (!streaming && !recording) return;
+
+        if (!streaming)
+        {
+            BeginRecordOnly();
+            return;
+        }
+        BeginGoLive(recording);
+    }
+
+    /// <summary>Record-only (REC pill on, ON-AIR off): no YouTube dialog — recording
+    /// is local and works signed-out. Generates the auto-named file and starts the
+    /// pipeline immediately.</summary>
+    private async void BeginRecordOnly()
+    {
+        var path = StartRecordFile();
+        if (path == null)
+        {
+            _notifications.Error("Couldn't record", "No record output path could be created.");
+            return;
+        }
+        _recordStartTime = DateTime.Now;
+        _liveElapsed = TimeSpan.Zero;
+        _recordLength = TimeSpan.Zero;
+        ResetHealth(StreamStatus.Offline);
+        _audioMixer.StartLive(EncoderOptions.DefaultAudioPipeName);
+        IsRecording = true;
+        await _framePump.StartAsync();
+    }
+
+    private void BeginGoLive(bool alsoRecord)
+    {
+        var dialog = new GoLiveViewModel(() => SignInAsync(), _youtubeAuth.CurrentChannel)
+        {
+            StreamTitle = BroadcastForm.Title,
+            StreamDescription = BroadcastForm.Description,
+        };
+        var window = new ytLive.GoLiveWindow(dialog) { Owner = System.Windows.Application.Current.MainWindow };
+        if (window.ShowDialog() == true)
+        {
+            StreamTitle = dialog.StreamTitle;
+            StreamDescription = dialog.StreamDescription;
+            StreamVisibility = dialog.Visibility; // always "Private" (ship step 7)
+            BroadcastForm.CaptureGoLive(dialog.StreamTitle, dialog.StreamDescription, DateTime.UtcNow);
+            WindowTitle = string.IsNullOrWhiteSpace(dialog.StreamTitle)
+                ? "LlamaCasty"
+                : $"{dialog.StreamTitle} — LlamaCasty";
+            StreamStatus = StreamStatus.Streaming;
+            ResetHealth(StreamStatus.Streaming);
+            _audioMixer.StartLive(EncoderOptions.DefaultAudioPipeName);
+            _liveElapsed = TimeSpan.Zero;
+            _recordLength = TimeSpan.Zero;
+
+            var recordStarted = false;
+            if (alsoRecord)
+            {
+                if (StartRecordFile() == null)
+                {
+                    _notifications.Error("Couldn't record",
+                        "No record output path could be created — streaming continues without recording.");
+                }
+                else
+                {
+                    _recordStartTime = DateTime.Now;
+                    recordStarted = true;
+                }
+            }
+            IsRecording = recordStarted;
+
+            _ = PrepareAndStartLiveAsync();
+        }
+    }
+
+    /// <summary>Creates the record file (auto-named <c>ty-…-0000.mp4</c> in the record
+    /// folder) and returns its path, or null when the folder can't be prepared.</summary>
+    private string? StartRecordFile()
+    {
+        try
+        {
+            var folder = _recordFolder ?? DefaultRecordFolder();
+            Directory.CreateDirectory(folder);
+            var name = RecordingFile.BuildStartName(DateTime.Now) + ".mp4";
+            var path = Path.Combine(folder, name);
+            _activeRecordPath = path;
+            return path;
+        }
+        catch (Exception ex)
+        {
+            AppLog.Write(ex, "Recording: failed to prepare output path");
+            return null;
+        }
+    }
+
+    /// <summary>One-click go-live (TASK 5): ensure the reusable stream, create a
+    /// broadcast bound to it, then start the frame pump. The pump reads the RTMP
+    /// URL once at startup (FramePump.StartAsync), so the stream URL must be set
+    /// before the pump starts — hence the ordering here. Failures surface as an
+    /// error health state, never a crash.</summary>
+    private async Task PrepareAndStartLiveAsync()
+    {
+        try
+        {
+            var stream = await _youtubeStream.GetOrCreateReusableStreamAsync();
+            if (stream == null)
+            {
+                AppLog.Write("Reusable stream unavailable; check the OAuth session");
+                _notifications.Error("Couldn't go live",
+                    "The reusable stream is unavailable — check the YouTube sign-in and try again.");
+                StreamStatus = StreamStatus.Error;
+                return;
+            }
+            _reusableStream = stream;
+            _reusableStreamUrl = stream.RtmpUrl;
+            _layoutStore.SaveReusableStream(stream);
+
+            _currentBroadcastId = await _youtubeStream.CreateBroadcast(
+                StreamTitle, StreamDescription, DateTime.UtcNow, stream.Id);
+            if (_currentBroadcastId == null)
+            {
+                AppLog.Write("Broadcast creation failed; check the OAuth session");
+                _notifications.Error("Couldn't go live", "YouTube rejected the broadcast — check the sign-in and try again.");
+                StreamStatus = StreamStatus.Error;
+                return;
+            }
+            AppLog.Write($"Broadcast created: {_currentBroadcastId}");
+            OnPropertyChanged(nameof(CurrentBroadcastId));
+
+            if (string.IsNullOrWhiteSpace(StreamTitle) && string.IsNullOrWhiteSpace(StreamDescription))
+            {
+                BroadcastForm.IsDrawerOpen = true;
+                _notifications.Warning("Complete your broadcast details",
+                    "Your title and description are empty — fill them in from the Text panel on the right.");
+            }
+
+            // Start chat polling (TASK 9.4): fetch the liveChatId from the broadcast's
+            // contentDetails, then start the poll loop. Chat is non-fatal — if it fails,
+            // the stream continues without on-panel chat.
+            try
+            {
+                var liveChatId = await _youtubeStream.GetBroadcastLiveChatIdAsync(_currentBroadcastId);
+                if (liveChatId != null)
+                {
+                    _youtubeChat.Start(liveChatId);
+                    AppLog.Write($"Chat polling started: {liveChatId}");
+                }
+                else
+                {
+                    AppLog.Write("Could not retrieve liveChatId; chat polling disabled");
+                }
+            }
+            catch (Exception chatEx)
+            {
+                AppLog.Write($"Chat start failed (non-fatal): {chatEx.Message}");
+            }
+        }
+        catch (Exception ex)
+        {
+            AppLog.Write($"Go-live preparation failed: {ex.Message}");
+            _notifications.Error("Couldn't go live", ex.Message);
+            StreamStatus = StreamStatus.Error;
+            return;
+        }
+
+        await _framePump.StartAsync(); // never throws; failures log + surface via Failed
+
+        // Health polling (TASK 5 item 3): poll immediately, then every 30s while
+        // live. Report-by-exception — a banner appears only on warning/error.
+        _healthPollTimer.Start();
+        _ = PollHealthAsync();
+    }
+
+    private void OnHealthPollTick(object? sender, EventArgs e) => _ = PollHealthAsync();
+
+    /// <summary>One liveStreams.list poll (TASK 5 item 3): updates the YouTube
+    /// health state + the report-by-exception banner. Never throws — a poll
+    /// failure logs and leaves the last state untouched.</summary>
+    private async Task PollHealthAsync()
+    {
+        if (_reusableStream == null || !IsLive) return;
+        try
+        {
+            var health = await _youtubeStream.GetStreamHealthAsync(_reusableStream.Id);
+            if (health == null)
+            {
+                AppLog.Write("Stream health poll failed; check the OAuth session");
+                return;
+            }
+            CurrentHealth.HealthStatus = health.HealthStatus;
+            CurrentHealth.HealthMessage = health.HealthStatus;
+            CurrentHealth.ConfigurationIssues.Clear();
+            CurrentHealth.ConfigurationIssues.AddRange(health.ConfigurationIssues);
+            OnPropertyChanged(nameof(CurrentHealth));
+            ApplyHealthIssue(health.ConfigurationIssues);
+        }
+        catch (Exception ex)
+        {
+            AppLog.Write($"Stream health poll failed: {ex.Message}");
+        }
+    }
+
+    // Report-by-exception: good/ok/noData (or info-only issues) clear the banner;
+    // the first warning/error issue raises it, colored by the worst severity.
+    private void ApplyHealthIssue(List<StreamConfigurationIssue> issues)
+    {
+        var report = StreamHealthReporter.BannerFor(issues);
+        if (report.Text == null)
+        {
+            HealthIssueBanner = null;
+            HealthIssueBackground = "Transparent";
+            return;
+        }
+
+        HealthIssueBackground = report.IsError ? "#8f1f1f" : "#b8860b";
+        HealthIssueBanner = report.Text;
+    }
+
+    private async void StopStream()
+    {
+        var wasLive = IsLive;
+        var wasRecording = IsRecording;
+
+        StreamStatus = StreamStatus.Offline;
+        IsRecording = false;
+        WindowTitle = "LlamaCasty";
+        ResetHealth(StreamStatus.Offline);
+        // Stop chat polling first (TASK 9.4) — no more messages arriving while
+        // we're tearing down the stream.
+        _youtubeChat.Stop();
+        // Close the audio pipe FIRST so ffmpeg sees EOF on the audio input,
+        // then stop the pump (stdin EOF) — both inputs end and the encoder
+        // finalizes the output. Audio capture itself is always-on (preview
+        // monitoring); only the live/report pipe, the pump, and the session stop here.
+        _audioMixer.StopLive();
+        await _framePump.StopAsync();
+        _currentBroadcastId = null;
+        OnPropertyChanged(nameof(CurrentBroadcastId));
+
+        if (wasRecording) await FinalizeRecordingAsync();
+
+        // Explicit sign-out only (TASK 18): stopping the stream does NOT clear
+        // the session/token — the creator signs out deliberately via the
+        // Logout / Change Account commands.
+        AppLog.Write(wasLive ? "Stream ended" : "Recording ended");
+    }
+
+    /// <summary>On stop the auto-named <c>ty-…-0000.mp4</c> file is renamed to carry
+    /// the real recording length (<c>ty-…-hh2mm2.mp4</c>), with a numeric suffix on
+    /// name collisions. Runs only after the pump has fully closed the file.</summary>
+    private async Task FinalizeRecordingAsync()
+    {
+        var startPath = _activeRecordPath;
+        _activeRecordPath = null;
+        if (string.IsNullOrEmpty(startPath)) return;
+        try
+        {
+            while (_framePump.IsRunning) await Task.Delay(50);
+
+            if (!File.Exists(startPath))
+            {
+                AppLog.Write($"Recording: output not found for rename: {startPath}");
+                return;
+            }
+            _recordLength = _liveElapsed;
+            var autoStem = RecordingFile.BuildFinalName(_recordStartTime, _recordLength);
+            var dir = Path.GetDirectoryName(startPath)!;
+
+            // Manual rename modal: give the creator a chance to name the recording;
+            // null = keep the auto name (or the default recorded above).
+            string stem = autoStem;
+            var dialog = new RenameRecordingDialog(autoStem);
+            if (dialog.ShowDialog() == true && !string.IsNullOrEmpty(dialog.ResultFileName))
+                stem = dialog.ResultFileName;
+
+            var finalPath = UniquePath(Path.Combine(dir, stem + ".mp4"));
+            File.Move(startPath, finalPath);
+            AppLog.Write($"Recording saved: {finalPath}");
+            _notifications.Info("Recording saved",
+                Path.GetFileName(finalPath) + " — you can rename it in your videos folder at any time.");
+        }
+        catch (Exception ex)
+        {
+            AppLog.Write(ex, "Recording: rename-on-stop failed");
+            _notifications.Error("Recording saved",
+                $"The recording was written but couldn't be renamed: {Path.GetFileName(startPath)}");
+        }
+    }
+
+    private static string UniquePath(string path)
+    {
+        if (!File.Exists(path)) return path;
+        var dir = Path.GetDirectoryName(path)!;
+        var name = Path.GetFileNameWithoutExtension(path);
+        var ext = Path.GetExtension(path);
+        for (var i = 2; ; i++)
+        {
+            var candidate = Path.Combine(dir, $"{name}-{i}{ext}");
+            if (!File.Exists(candidate)) return candidate;
+        }
+    }
+
+    private void ChooseRecordFolder()
+    {
+        var dialog = new Microsoft.Win32.OpenFolderDialog
+        {
+            Title = "Choose a folder for local recordings",
+            InitialDirectory = _recordFolder ?? DefaultRecordFolder(),
+        };
+        if (dialog.ShowDialog() == true)
+        {
+            _recordFolder = dialog.FolderName;
+            _layoutStore.SaveRecordFolder(_recordFolder);
+            OnPropertyChanged(nameof(RecordFolderDisplay));
+            _notifications.Info("Record folder set", _recordFolder);
+        }
+    }
+
+    private void ResetRecordFolder()
+    {
+        _recordFolder = null;
+        _layoutStore.SaveRecordFolder(null);
+        OnPropertyChanged(nameof(RecordFolderDisplay));
+        _notifications.Info("Record folder reset", RecordFolderDisplay);
+    }
+
+    /// <summary>Falls back to the user's Downloads folder when no preference is set;
+    /// returns MyVideos if Downloads doesn't exist.</summary>
+    internal static string DefaultRecordFolder()
+    {
+        var downloads = Path.Combine(
+            Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads");
+        return Directory.Exists(downloads)
+            ? downloads
+            : Environment.GetFolderPath(Environment.SpecialFolder.MyVideos);
+    }
+
+    // Full encoder options for the current tier, or null when no RTMP URL is
+    // available — the pump then skips the encoder entirely (TASK 5 fills the seam).
+    private EncoderOptions? BuildEncoderOptions()
+    {
+        var url = _rtmpUrlProvider();
+        var quality = SelectedQuality;
+        return new EncoderOptions
+        {
+            RtmpUrl = url ?? string.Empty,
+            StreamEnabled = OnAirPillOn,
+            RecordEnabled = RecordPillOn,
+            RecordPath = _activeRecordPath,
+            Width = quality.Width,
+            Height = quality.Height,
+            Fps = quality.Fps,
+            BitrateKbps = (int)Math.Round(quality.Bitrate * 1000),
+        };
+    }
+
+    private void OnFramePumpFailed(object? sender, string message)
+    {
+        AppLog.Write($"Frame pump failed: {message}");
+        _notifications.Error("The stream pipeline stopped", message);
+        if (IsLive) StreamStatus = StreamStatus.Error;
+    }
+
+    // TASK 4 ship step 6: the encoder's parsed health (bitrate/FPS/dropped/
+    // duration) lands in the bottom bar. The stderr loop raises on a background
+    // thread — marshal to the UI thread like the audio level handlers.
+    private void OnFramePumpHealthUpdated(object? sender, StreamHealth health)
+    {
+        var dispatcher = System.Windows.Application.Current?.Dispatcher;
+        if (dispatcher != null && !dispatcher.CheckAccess())
+            dispatcher.BeginInvoke(() => ApplyHealth(health));
+        else
+            ApplyHealth(health);
+    }
+
+    private void ApplyHealth(StreamHealth health)
+    {
+        CurrentHealth.Status = health.Status;
+        CurrentHealth.CurrentBitrate = health.CurrentBitrate;
+        CurrentHealth.FPS = health.FPS;
+        CurrentHealth.DroppedFrames = health.DroppedFrames;
+        CurrentHealth.StreamDuration = health.StreamDuration;
+        CurrentHealth.LastError = health.LastError;
+        CurrentHealth.HealthMessage = health.HealthMessage;
+        OnPropertyChanged(nameof(CurrentHealth));
+    }
+
+    // Keeps the bottom-bar stats honest across sessions: dropped frames and the
+    // elapsed duration must not linger from a previous go-live (bitrate/FPS stay
+    // on the tier's targets — ApplyStreamQuality sets them on pick).
+    private void ResetHealth(StreamStatus status)
+    {
+        CurrentHealth.Status = status;
+        CurrentHealth.DroppedFrames = 0;
+        CurrentHealth.StreamDuration = TimeSpan.Zero;
+        CurrentHealth.LastError = null;
+        CurrentHealth.HealthStatus = null;
+        CurrentHealth.HealthMessage = null;
+        CurrentHealth.ConfigurationIssues.Clear();
+        HealthIssueBanner = null;
+        HealthIssueBackground = "Transparent";
+        OnPropertyChanged(nameof(CurrentHealth));
+    }
+
+    private void UpdateLiveVisuals()
+    {
+        var live = IsLive;
+        TopBarBackground = live ? "#e94560" : "#16213e";
+        PreviewGlowBrush = live ? "#e94560" : "Transparent";
+        PreviewGlowThickness = live ? new Thickness(3) : new Thickness(0);
+
+        if (live)
+        {
+            if (BrandFlashEnabled) StartBrandFlashTimer();
+        }
+        else
+        {
+            _healthPollTimer.Stop();
+            _brandFlashTimer.Stop();
+            _brandFlashOffTimer.Stop();
+            BrandFlashActive = false;
+        }
+        UpdateSessionTimer();
+    }
+
+    /// <summary>Runs the elapsed/rec-dot-pulse timer while a session is active —
+    /// live (Streaming) OR recording. Reset the elapsed when a new session starts.</summary>
+    private void UpdateSessionTimer()
+    {
+        var active = IsLive || IsRecording;
+        if (active)
+        {
+            _recDotPulse = 1.0;
+            _liveTimer.Start();
+        }
+        else
+        {
+            _liveTimer.Stop();
+            LiveElapsedText = "00:00:00";
+            _recDotPulse = 1.0;
+        }
+        OnPropertyChanged(nameof(RecDotOpacity));
+        OnPropertyChanged(nameof(LiveElapsedText));
+    }
+
+    private void OnLiveTimerTick(object? sender, EventArgs e)
+    {
+        _liveElapsed = _liveElapsed.Add(TimeSpan.FromSeconds(1));
+        LiveElapsedText = _liveElapsed.ToString(@"hh\:mm\:ss");
+        _recordLength = _liveElapsed;
+        _recDotPulse = _recDotPulse > 0.5 ? 0.35 : 1.0;
+        OnPropertyChanged(nameof(RecDotOpacity));
+    }
+}

ViewModels/MainViewModel.Streaming.cs

@@ -0,0 +1,328 @@
+using System.Collections.ObjectModel;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Threading;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.Services;
+using ytLive.Services.Encoder;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel : ViewModelBase
+{
+
+    private readonly DispatcherTimer _liveTimer;
+    private readonly DispatcherTimer _healthPollTimer;
+
+    private StreamStatus _streamStatus = StreamStatus.Offline;
+    private StreamHealth _currentHealth = new();
+    private string _streamTitle = string.Empty;
+    private string _streamDescription = string.Empty;
+    private string _streamVisibility = "Private";
+    private string? _currentBroadcastId;
+    private string? _reusableStreamUrl;
+    private ReusableStream? _reusableStream;
+    private string? _healthIssueBanner;
+    private string _healthIssueBackground = "Transparent";
+    private string _windowTitle = "LlamaCasty";
+    private string _topBarBackground = "#16213e";
+    private string _previewGlowBrush = "Transparent";
+    private Thickness _previewGlowThickness = new(0);
+    private string _liveElapsedText = "00:00:00";
+    private double _recDotPulse = 1.0;
+    private TimeSpan _liveElapsed;
+
+    // ─── Recording (TASK 18): independent REC / ON-AIR pills. The pills are
+    // ─── intent; IsRecording / IsLive are reality. ON-AIR needs a sign-in.
+    private bool _recordPillOn;
+    private bool _onAirPillOn;
+    private bool _isRecording;
+    private string? _recordFolder;
+
+    /// <summary>Resolved record folder — the configured choice, or Downloads (0th case).</summary>
+    public string RecordFolderDisplay => _recordFolder ?? DefaultRecordFolder();
+
+    private string? _activeRecordPath;
+    private DateTime _recordStartTime;
+    private TimeSpan _recordLength;
+
+    private readonly FramePump _framePump;
+
+    public StreamStatus StreamStatus
+    {
+        get => _streamStatus;
+        set
+        {
+            if (SetProperty(ref _streamStatus, value))
+            {
+                OnPropertyChanged(nameof(IsOffline));
+                OnPropertyChanged(nameof(IsLive));
+                OnPropertyChanged(nameof(IsEditMode));
+                OnPropertyChanged(nameof(RecDotBrush));
+                OnPropertyChanged(nameof(RecTextBrush));
+                OnPropertyChanged(nameof(RecDotOpacity));
+                OnPropertyChanged(nameof(OnAirBrush));
+                OnPropertyChanged(nameof(IsLivePrivate));
+                OnPropertyChanged(nameof(ShowPrimaryStartButton));
+                OnPropertyChanged(nameof(ShowLogInButton));
+                OnPropertyChanged(nameof(ShowEndStreamButton));
+                OnPropertyChanged(nameof(EndButtonText));
+                OnPropertyChanged(nameof(AccountStatusLightToolTip));
+                OnPropertyChanged(nameof(ShowChatInactiveMessage));
+                OnPropertyChanged(nameof(ShowPreviewPlaceholder));
+                UpdateLiveVisuals();
+            }
+        }
+    }
+
+    public bool IsOffline => StreamStatus == StreamStatus.Offline;
+    public bool IsLive => StreamStatus == StreamStatus.Streaming;
+    public bool IsLivePrivate => IsLive && string.Equals(StreamVisibility, "Private", StringComparison.OrdinalIgnoreCase);
+    public string RecDotBrush => !IsRecording ? "#555555" : "#e94560";
+    public string RecTextBrush => (IsLive || IsRecording) ? "#ffffff" : "#888888";
+    public double RecDotOpacity => IsRecording ? _recDotPulse : 0.55;
+    public string OnAirBrush => !IsLive ? "#555555" : IsLivePrivate ? "#22c55e" : "#e94560";
+
+    // ─── REC / ON-AIR pills (TASK 18) ───
+    public bool RecordPillOn
+    {
+        get => _recordPillOn;
+        set
+        {
+            if (!SetProperty(ref _recordPillOn, value)) return;
+            OnPropertyChanged(nameof(ShowPrimaryStartButton));
+            OnPropertyChanged(nameof(CanStartSession));
+        }
+    }
+
+    public bool OnAirPillOn
+    {
+        get => _onAirPillOn;
+        set
+        {
+            if (value && !CanToggleOnAir) return; // needs a sign-in
+            if (!SetProperty(ref _onAirPillOn, value)) return;
+            OnPropertyChanged(nameof(ShowPrimaryStartButton));
+            OnPropertyChanged(nameof(CanStartSession));
+        }
+    }
+
+    /// <summary>The ON-AIR pill (and thus live streaming) needs a YouTube sign-in.</summary>
+    public bool CanToggleOnAir => IsConnected;
+
+    /// <summary>Whether the session is actively recording — the REC status light
+    /// turns green only when this is true (the pill is intent, this is reality).</summary>
+    public bool IsRecording
+    {
+        get => _isRecording;
+        private set
+        {
+            if (!SetProperty(ref _isRecording, value)) return;
+            OnPropertyChanged(nameof(RecDotBrush));
+            OnPropertyChanged(nameof(RecTextBrush));
+            OnPropertyChanged(nameof(RecDotOpacity));
+            OnPropertyChanged(nameof(IsEditMode));
+            OnPropertyChanged(nameof(ShowEndStreamButton));
+            OnPropertyChanged(nameof(ShowPrimaryStartButton));
+            OnPropertyChanged(nameof(EndButtonText));
+            UpdateSessionTimer();
+        }
+    }
+
+    /// <summary>The primary button shows when there's something to start, but never
+    /// while a session is running — once recording/live the ONLY control is the End
+    /// button.</summary>
+    public bool ShowPrimaryStartButton =>
+        IsOffline && !IsRecording && !IsLive
+        && (IsConnected || (RecordPillOn && !OnAirPillOn));
+
+    /// <summary>Either output selected makes the button actionable.</summary>
+    public bool CanStartSession => RecordPillOn || OnAirPillOn;
+
+    /// <summary>The End button shows while recording OR live.</summary>
+    public bool ShowEndStreamButton => IsLive || IsRecording;
+
+    /// <summary>The one button whose label changes: while recording it reads
+    /// "Stop Recording", while live "End Stream".</summary>
+    public string EndButtonText => IsRecording && !IsLive ? "Stop Recording" : "End Stream";
+
+    public bool ShowLogInButton => !IsConnected && IsOffline && !IsRecording;
+
+    public StreamHealth CurrentHealth
+    {
+        get => _currentHealth;
+        set => SetProperty(ref _currentHealth, value);
+    }
+
+    /// <summary>Report-by-exception YouTube health (TASK 5 item 3): non-null only
+    /// while a warning/error configuration issue exists — the banner's text.
+    /// good/ok/noData keep it null so nothing renders.</summary>
+    public string? HealthIssueBanner
+    {
+        get => _healthIssueBanner;
+        private set => SetProperty(ref _healthIssueBanner, value);
+    }
+
+    /// <summary>Banner background: app red (#8f1f1f) for an error issue, amber
+    /// (#b8860b) for a warning. Transparent when no banner is shown.</summary>
+    public string HealthIssueBackground
+    {
+        get => _healthIssueBackground;
+        private set => SetProperty(ref _healthIssueBackground, value);
+    }
+
+    public string StreamTitle
+    {
+        get => _streamTitle;
+        set => SetProperty(ref _streamTitle, value);
+    }
+
+    public string StreamDescription
+    {
+        get => _streamDescription;
+        set => SetProperty(ref _streamDescription, value);
+    }
+
+    public string StreamVisibility
+    {
+        get => _streamVisibility;
+        set
+        {
+            if (SetProperty(ref _streamVisibility, value))
+            {
+                OnPropertyChanged(nameof(RecDotBrush));
+                OnPropertyChanged(nameof(RecTextBrush));
+                OnPropertyChanged(nameof(OnAirBrush));
+                OnPropertyChanged(nameof(IsLivePrivate));
+            }
+        }
+    }
+
+    public string WindowTitle
+    {
+        get => _windowTitle;
+        set => SetProperty(ref _windowTitle, value);
+    }
+
+    public string TopBarBackground
+    {
+        get => _topBarBackground;
+        set => SetProperty(ref _topBarBackground, value);
+    }
+
+    public string PreviewGlowBrush
+    {
+        get => _previewGlowBrush;
+        set => SetProperty(ref _previewGlowBrush, value);
+    }
+
+    public Thickness PreviewGlowThickness
+    {
+        get => _previewGlowThickness;
+        set => SetProperty(ref _previewGlowThickness, value);
+    }
+
+    public string LiveElapsedText
+    {
+        get => _liveElapsedText;
+        set => SetProperty(ref _liveElapsedText, value);
+    }
+
+    // ─── Broadcast metadata pull-out (the "Text" tab on the Live screen) ───
+
+    /// <summary>The broadcast id of the current/last session; null until Go Live
+    /// succeeds. Gates the pull-out's Update button (nothing remote to patch).</summary>
+    public string? CurrentBroadcastId => _currentBroadcastId;
+
+    public Services.LiveBroadcastFormViewModel BroadcastForm { get; }
+
+    // ─── Resolution quality dropdown (bottom bar) ───
+    // Tiers offered to the creator before going live. First = default. The
+    // dropdown is disabled while live because YouTube stream resolution is
+    // immutable after stream creation (see TASKS.md compliance notes).
+
+    // The composition master frame. Every tier is an output rect + target
+    // resolution over this frame (see ai.md "Resolution tiers"): 16:9 tiers
+    // use the full frame; the vertical tier uses a centered 9:16 window and
+    // the preview dims the cropped strips (semi-crop).
+    private const double MasterFrameWidth = 1920;
+    private const double MasterFrameHeight = 1080;
+
+    public QualityOption[] QualityOptions { get; } =
+    {
+        new("1080p60", 60, 8.0, 1920, 1080),
+        new("1080p30", 30, 8.0, 1920, 1080),
+        new("720p60", 60, 6.0, 1280, 720),
+        new("720p30", 30, 6.0, 1280, 720),
+        new("Vertical 1080p60", 60, 8.0, 1080, 1920),
+    };
+
+    public string ResolutionHelp { get; } =
+        "Pick the highest resolution your upload bandwidth can comfortably sustain. " +
+        "Find your upload speed on your ISP plan or with a speed test (e.g. fast.com), " +
+        "then choose a tier your upload comfortably exceeds. 1080p60 is the default.";
+
+    private QualityOption _selectedQuality;
+    public QualityOption SelectedQuality
+    {
+        get => _selectedQuality;
+        set
+        {
+            if (SetProperty(ref _selectedQuality, value))
+                ApplyStreamQuality(value);
+        }
+    }
+
+    // Output frame of the selected tier over the 1920x1080 master. The strips
+    // outside it are dimmed in the preview so the cropped area stays visible.
+    public double OutputRectX { get; private set; }
+    public double OutputRectY { get; private set; }
+    public double OutputRectWidth { get; private set; }
+    public double OutputRectHeight { get; private set; }
+    public bool IsOutputCropped { get; private set; }
+    public string ResolutionBadgeText { get; private set; } = string.Empty;
+    public ObservableCollection<Rect> DimRects { get; } = new();
+
+    private void ApplyStreamQuality(QualityOption quality)
+    {
+        var health = CurrentHealth;
+        health.CurrentBitrate = quality.Bitrate;
+        health.FPS = quality.Fps;
+        OnPropertyChanged(nameof(CurrentHealth));
+
+        var scale = Math.Min(MasterFrameWidth / quality.Width, MasterFrameHeight / quality.Height);
+        var rectW = quality.Width * scale;
+        var rectH = quality.Height * scale;
+        var rectX = (MasterFrameWidth - rectW) / 2;
+        var rectY = (MasterFrameHeight - rectH) / 2;
+
+        OutputRectX = rectX;
+        OutputRectY = rectY;
+        OutputRectWidth = rectW;
+        OutputRectHeight = rectH;
+
+        DimRects.Clear();
+        if (rectX > 0) DimRects.Add(new Rect(0, 0, rectX, MasterFrameHeight));
+        if (rectX + rectW < MasterFrameWidth)
+            DimRects.Add(new Rect(rectX + rectW, 0, MasterFrameWidth - rectX - rectW, MasterFrameHeight));
+        if (rectY > 0) DimRects.Add(new Rect(0, 0, MasterFrameWidth, rectY));
+        if (rectY + rectH < MasterFrameHeight)
+            DimRects.Add(new Rect(0, rectY + rectH, MasterFrameWidth, MasterFrameHeight - rectY - rectH));
+
+        IsOutputCropped = DimRects.Count > 0;
+        ResolutionBadgeText = $"{quality.Label} · {quality.Width}×{quality.Height}";
+
+        OnPropertyChanged(nameof(OutputRectX));
+        OnPropertyChanged(nameof(OutputRectY));
+        OnPropertyChanged(nameof(OutputRectWidth));
+        OnPropertyChanged(nameof(OutputRectHeight));
+        OnPropertyChanged(nameof(IsOutputCropped));
+        OnPropertyChanged(nameof(ResolutionBadgeText));
+    }
+
+    public ICommand StartStreamCommand { get; }
+    public ICommand EndStreamCommand { get; }
+    public ICommand ChooseRecordFolderCommand { get; }
+    public ICommand ResetRecordFolderCommand { get; }
+}

ViewModels/MainViewModel.Web.cs

@@ -0,0 +1,41 @@
+using System.Linq;
+using System.Windows.Controls;
+using System.Windows.Media.Imaging;
+using ytLive.Models;
+using ytLive.Services;
+using ytLive.ViewModels;
+
+namespace ytLive.ViewModels;
+
+public partial class MainViewModel
+{
+    private void RegisterLoadedWebSources()
+    {
+        if (_webView2Manager == null) return;
+
+        foreach (var source in Scenes.SelectMany(s => s.Elements).OfType<Source>()
+                     .Where(s => s.Type == SourceType.WebSource))
+        {
+            _webView2Manager.Register(source);
+            source.PropertyChanged += (_, e) =>
+            {
+                if (e.PropertyName == nameof(Source.WebUri))
+                    _webView2Manager.OnWebUriChanged(source);
+            };
+        }
+    }
+
+    public void InitWebView2(Panel hostPanel)
+    {
+        _webView2Manager = new WebView2Manager(hostPanel, System.Windows.Application.Current.Dispatcher);
+        _webView2Manager.PreviewBitmapChanged += OnWebView2PreviewBitmapChanged;
+        RegisterLoadedWebSources();
+    }
+
+    private void OnWebView2PreviewBitmapChanged(string sourceId, WriteableBitmap bitmap)
+    {
+        foreach (var scene in Scenes)
+            foreach (var el in scene.Elements.OfType<Source>().Where(s => s.Id == sourceId))
+                el.VideoImageSource = bitmap;
+    }
+}

ViewModels/SocialSlotViewModel.cs

@@ -0,0 +1,183 @@
+using System.ComponentModel;
+using ytLive.Helpers;
+using ytLive.Models;
+using ytLive.ViewModels;
+
+namespace ytLive.ViewModels;
+public sealed record DialogEntry(SocialService Service, string Handle, string ProfileUrl, string? FediverseSoftware = null);
+
+/// <summary>
+/// One of the six fixed dialog rows. Row 0 is always YouTube (signed-in account
+/// or a sign-in prompt); rows 1-5 hold validated entries, an empty slot, or — on
+/// the free tier — a locked "Premium" slot. Rows are a positional projection of
+/// the dialog's working list, so deleting an entry makes the ones above advance up.
+/// </summary>
+public sealed class SocialSlotViewModel : ViewModelBase
+{
+    public int Index { get; }
+    public bool IsYoutube => Index == 0;
+
+    private SocialService _service = SocialService.Link;
+    public SocialService Service
+    {
+        get => _service;
+        set { if (SetProperty(ref _service, value)) OnPropertyChanged(nameof(LogoData)); }
+    }
+
+    public string LogoData => Service == SocialService.Fediverse
+        ? SocialServiceIcons.LogoDataForFediverse(FediverseSoftware)
+        : SocialServiceIcons.LogoDataFor(Service);
+    public string LockedIconData => SocialServiceIcons.LockedIconData;
+    public string DoNotIconData => SocialServiceIcons.DoNotIconData;
+
+    private bool _isLocked;
+    public bool IsLocked
+    {
+        get => _isLocked;
+        set
+        {
+            if (SetProperty(ref _isLocked, value))
+            {
+                OnPropertyChanged(nameof(ShowAddButton));
+                OnPropertyChanged(nameof(ShowDoNot));
+                OnPropertyChanged(nameof(DisplayText));
+            }
+        }
+    }
+
+    private bool _isFilled;
+    public bool IsFilled
+    {
+        get => _isFilled;
+        set
+        {
+            if (SetProperty(ref _isFilled, value))
+            {
+                OnPropertyChanged(nameof(ShowEditButton));
+                OnPropertyChanged(nameof(ShowDeleteButton));
+                OnPropertyChanged(nameof(ShowAddButton));
+                OnPropertyChanged(nameof(ShowDoNot));
+                OnPropertyChanged(nameof(DisplayText));
+            }
+        }
+    }
+
+    private bool _isSignIn;
+    public bool IsSignIn
+    {
+        get => _isSignIn;
+        set
+        {
+            if (SetProperty(ref _isSignIn, value))
+            {
+                OnPropertyChanged(nameof(ShowSignInButton));
+                OnPropertyChanged(nameof(ShowDeleteButton));
+                OnPropertyChanged(nameof(ShowLogo));
+                OnPropertyChanged(nameof(DisplayText));
+            }
+        }
+    }
+
+    private bool _isEditing;
+    public bool IsEditing
+    {
+        get => _isEditing;
+        set
+        {
+            if (SetProperty(ref _isEditing, value))
+            {
+                OnPropertyChanged(nameof(ShowEditBox));
+                OnPropertyChanged(nameof(ShowDisplay));
+                OnPropertyChanged(nameof(ShowEditButton));
+                OnPropertyChanged(nameof(ShowDeleteButton));
+                OnPropertyChanged(nameof(ShowAddButton));
+                OnPropertyChanged(nameof(ShowDoNot));
+            }
+        }
+    }
+
+    private bool _isValidating;
+    public bool IsValidating
+    {
+        get => _isValidating;
+        set
+        {
+            if (SetProperty(ref _isValidating, value))
+            {
+                OnPropertyChanged(nameof(ShowBusy));
+                OnPropertyChanged(nameof(ShowDoNot));
+            }
+        }
+    }
+
+    private string _handle = string.Empty;
+    public string Handle
+    {
+        get => _handle;
+        set
+        {
+            if (SetProperty(ref _handle, value))
+                OnPropertyChanged(nameof(DisplayText));
+        }
+    }
+
+    private string? _fediverseSoftware;
+    public string? FediverseSoftware
+    {
+        get => _fediverseSoftware;
+        set
+        {
+            if (SetProperty(ref _fediverseSoftware, value))
+                OnPropertyChanged(nameof(LogoData));
+        }
+    }
+
+    public string ProfileUrl { get; set; } = string.Empty;
+
+    private string? _error;
+    public string? Error
+    {
+        get => _error;
+        set
+        {
+            if (SetProperty(ref _error, value))
+            {
+                OnPropertyChanged(nameof(HasError));
+                OnPropertyChanged(nameof(ShowError));
+                OnPropertyChanged(nameof(ShowDoNot));
+            }
+        }
+    }
+
+    private string _editText = string.Empty;
+    public string EditText
+    {
+        get => _editText;
+        set => SetProperty(ref _editText, value);
+    }
+
+    /// <summary>The last text submitted for validation (used to skip re-validating
+    /// identical input — e.g. a LostFocus firing as the user clicks Cancel).</summary>
+    public string? LastValidatedInput { get; set; }
+
+    public string DisplayText =>
+        IsYoutube
+            ? (IsSignIn ? "Sign in to YouTube" : Handle)
+            : IsLocked ? "Unlock with Premium"
+            : IsFilled ? Handle
+            : "No social yet";
+
+    public bool HasError => !string.IsNullOrEmpty(Error);
+    public bool ShowError => HasError;
+    public bool ShowLogo => IsYoutube ? !IsSignIn : IsFilled;
+    public bool ShowBusy => IsValidating;
+    public bool ShowEditBox => IsEditing;
+    public bool ShowDisplay => !IsEditing && !IsValidating;
+    public bool ShowSignInButton => IsYoutube && IsSignIn && !IsValidating;
+    public bool ShowAddButton => !IsYoutube && !IsLocked && !IsFilled && !IsEditing && !IsValidating;
+    public bool ShowEditButton => !IsYoutube && IsFilled && !IsEditing && !IsValidating;
+    public bool ShowDeleteButton => (IsFilled || IsYoutube) && !IsEditing && !IsValidating;
+    public bool ShowDoNot => !IsYoutube && !IsLocked && (!IsFilled || HasError || IsValidating);
+
+    public SocialSlotViewModel(int index) => Index = index;
+}

ViewModels/SocialsDialogViewModel.cs

@@ -8,187 +8,6 @@ using ytLive.Services;
 
 namespace ytLive.ViewModels;
 
-/// <summary>
-/// A validated social entry in the dialog's working copy (non-YouTube slots).
-/// </summary>
-public sealed record DialogEntry(SocialService Service, string Handle, string ProfileUrl, string? FediverseSoftware = null);
-
-/// <summary>
-/// One of the six fixed dialog rows. Row 0 is always YouTube (signed-in account
-/// or a sign-in prompt); rows 1-5 hold validated entries, an empty slot, or — on
-/// the free tier — a locked "Premium" slot. Rows are a positional projection of
-/// the dialog's working list, so deleting an entry makes the ones above advance up.
-/// </summary>
-public sealed class SocialSlotViewModel : ViewModelBase
-{
-    public int Index { get; }
-    public bool IsYoutube => Index == 0;
-
-    private SocialService _service = SocialService.Link;
-    public SocialService Service
-    {
-        get => _service;
-        set { if (SetProperty(ref _service, value)) OnPropertyChanged(nameof(LogoData)); }
-    }
-
-    public string LogoData => Service == SocialService.Fediverse
-        ? SocialServiceIcons.LogoDataForFediverse(FediverseSoftware)
-        : SocialServiceIcons.LogoDataFor(Service);
-    public string LockedIconData => SocialServiceIcons.LockedIconData;
-    public string DoNotIconData => SocialServiceIcons.DoNotIconData;
-
-    private bool _isLocked;
-    public bool IsLocked
-    {
-        get => _isLocked;
-        set
-        {
-            if (SetProperty(ref _isLocked, value))
-            {
-                OnPropertyChanged(nameof(ShowAddButton));
-                OnPropertyChanged(nameof(ShowDoNot));
-                OnPropertyChanged(nameof(DisplayText));
-            }
-        }
-    }
-
-    private bool _isFilled;
-    public bool IsFilled
-    {
-        get => _isFilled;
-        set
-        {
-            if (SetProperty(ref _isFilled, value))
-            {
-                OnPropertyChanged(nameof(ShowEditButton));
-                OnPropertyChanged(nameof(ShowDeleteButton));
-                OnPropertyChanged(nameof(ShowAddButton));
-                OnPropertyChanged(nameof(ShowDoNot));
-                OnPropertyChanged(nameof(DisplayText));
-            }
-        }
-    }
-
-    private bool _isSignIn;
-    public bool IsSignIn
-    {
-        get => _isSignIn;
-        set
-        {
-            if (SetProperty(ref _isSignIn, value))
-            {
-                OnPropertyChanged(nameof(ShowSignInButton));
-                OnPropertyChanged(nameof(ShowDeleteButton));
-                OnPropertyChanged(nameof(ShowLogo));
-                OnPropertyChanged(nameof(DisplayText));
-            }
-        }
-    }
-
-    private bool _isEditing;
-    public bool IsEditing
-    {
-        get => _isEditing;
-        set
-        {
-            if (SetProperty(ref _isEditing, value))
-            {
-                OnPropertyChanged(nameof(ShowEditBox));
-                OnPropertyChanged(nameof(ShowDisplay));
-                OnPropertyChanged(nameof(ShowEditButton));
-                OnPropertyChanged(nameof(ShowDeleteButton));
-                OnPropertyChanged(nameof(ShowAddButton));
-                OnPropertyChanged(nameof(ShowDoNot));
-            }
-        }
-    }
-
-    private bool _isValidating;
-    public bool IsValidating
-    {
-        get => _isValidating;
-        set
-        {
-            if (SetProperty(ref _isValidating, value))
-            {
-                OnPropertyChanged(nameof(ShowBusy));
-                OnPropertyChanged(nameof(ShowDoNot));
-            }
-        }
-    }
-
-    private string _handle = string.Empty;
-    public string Handle
-    {
-        get => _handle;
-        set
-        {
-            if (SetProperty(ref _handle, value))
-                OnPropertyChanged(nameof(DisplayText));
-        }
-    }
-
-    private string? _fediverseSoftware;
-    public string? FediverseSoftware
-    {
-        get => _fediverseSoftware;
-        set
-        {
-            if (SetProperty(ref _fediverseSoftware, value))
-                OnPropertyChanged(nameof(LogoData));
-        }
-    }
-
-    public string ProfileUrl { get; set; } = string.Empty;
-
-    private string? _error;
-    public string? Error
-    {
-        get => _error;
-        set
-        {
-            if (SetProperty(ref _error, value))
-            {
-                OnPropertyChanged(nameof(HasError));
-                OnPropertyChanged(nameof(ShowError));
-                OnPropertyChanged(nameof(ShowDoNot));
-            }
-        }
-    }
-
-    private string _editText = string.Empty;
-    public string EditText
-    {
-        get => _editText;
-        set => SetProperty(ref _editText, value);
-    }
-
-    /// <summary>The last text submitted for validation (used to skip re-validating
-    /// identical input — e.g. a LostFocus firing as the user clicks Cancel).</summary>
-    public string? LastValidatedInput { get; set; }
-
-    public string DisplayText =>
-        IsYoutube
-            ? (IsSignIn ? "Sign in to YouTube" : Handle)
-            : IsLocked ? "Unlock with Premium"
-            : IsFilled ? Handle
-            : "No social yet";
-
-    public bool HasError => !string.IsNullOrEmpty(Error);
-    public bool ShowError => HasError;
-    public bool ShowLogo => IsYoutube ? !IsSignIn : IsFilled;
-    public bool ShowBusy => IsValidating;
-    public bool ShowEditBox => IsEditing;
-    public bool ShowDisplay => !IsEditing && !IsValidating;
-    public bool ShowSignInButton => IsYoutube && IsSignIn && !IsValidating;
-    public bool ShowAddButton => !IsYoutube && !IsLocked && !IsFilled && !IsEditing && !IsValidating;
-    public bool ShowEditButton => !IsYoutube && IsFilled && !IsEditing && !IsValidating;
-    public bool ShowDeleteButton => (IsFilled || IsYoutube) && !IsEditing && !IsValidating;
-    public bool ShowDoNot => !IsYoutube && !IsLocked && (!IsFilled || HasError || IsValidating);
-
-    public SocialSlotViewModel(int index) => Index = index;
-}
-
 /// <summary>
 /// View model for the Social Media Site Promotion dialog. Owns the working copy
 /// of the social bar config: the six fixed slots, the sign-in gate, per-row

ViewModels/index.md

@@ -8,7 +8,7 @@ areas' docs in their own rows keeps this index small to read.
 
 | File | Purpose |
 |------|---------|
-| `MainViewModel.cs` | Core. `public partial class MainViewModel : ViewModelBase`. **Broadcast/stream state:** go-live (`BeginGoLive` accepts the GoLive dialog → `StreamVisibility` always "Private" → `CreateBroadcastAsync` storing `_currentBroadcastId` for the bind/transition; failure → `StreamStatus.Error` + `_framePump.StartAsync()`), End (`StopStream` — signs out, clears session/token/`_currentBroadcastId`, crash-safe), `StreamStatus`/`StreamVisibility` setters, `IsOffline`/`IsLive`/`IsLivePrivate`. **Health stats:** `CurrentHealth`/`ResetHealth`/`OnFramePumpHealthUpdated` marshal `FramePump.HealthUpdated` (encoder bitrate/FPS/dropped/duration) off the stderr thread onto the UI thread. **Start/End UI:** REC/ON-AIR pills (`RecordPillOn`/`OnAirPillOn`, `CanStartSession`, `ShowPrimaryStartButton`/`ShowEndStreamButton`/`EndButtonText`), REC sign (`RecDotBrush`/`RecTextBrush`/`RecDotOpacity`, pulsing live via `_recDotPulse`), `ShowLogInButton`, `ChooseRecordFolder`/`ResetRecordFolder`/`_recordFolder`. **Resolution dropdown:** `QualityOptions`/`SelectedQuality`/`ResolutionHelp`/`ApplyStreamQuality` computes the output rect over the 1920×1080 master (`OutputRectX/Y/W/H`, `DimRects`, `IsOutputCropped`, `ResolutionBadgeText`). **Source commands + element rows:** scenes are pure selection rows; sources carry edit/visibility/trash (`EditElementCommand` sets `element.IsEditing`, `ToggleElementVisibilityCommand` flips `IsVisible`, `RemoveSourceCommand`; Backdrop trash slot reserved via `HiddenBoolToVisibilityConverter` — TASK 13); shared `NextSourceName` (Image, Image2, Image3… no-space increment from actual names — used by `AddSource` + `AddReusedImage`), `AddImageCommand`. **Overlays/lifecycle:** fields + ctor wiring (all command assignments, mixer/camera/chat/hotkey/subscription hookups), `Shutdown`/`SaveLayoutNow`/`ScheduleSave`/`LoadLayout`, `SetPanel`/`ShowOverlay`/`ShowLicenses`, `CreateBrush` + shared `BarOnBrush`/`BarOffBrush` (referenced by Audio/Trax partials), `OpenUrl`/`ComposeEmail`/`SubmitBug`/`SubmitFeature`, window-geometry pass-through, `SelectedElement`/`OnSelectedElementPropertyChanged`, `ShowPreviewPlaceholder`/`ShowChatInactiveMessage`, `BrandFlash*`, WebView2 hosting (`InitWebView2`/`RegisterLoadedWebSources`/`OnWebView2PreviewBitmapChanged`). |
+| `MainViewModel.cs` | Core. `public partial class MainViewModel : ViewModelBase`. **Source commands + element rows:** scenes are pure selection rows; sources carry edit/visibility/trash (`EditElementCommand` sets `element.IsEditing`, `ToggleElementVisibilityCommand` flips `IsVisible`, `RemoveSourceCommand`; Backdrop trash slot reserved via `HiddenBoolToVisibilityConverter` — TASK 13); shared `NextSourceName` (Image, Image2, Image3… no-space increment from actual names — used by `AddSource` + `AddReusedImage`), `AddImageCommand`. **Lifecycle/ctor wiring:** fields + ctor wiring (all command assignments, mixer/camera/chat/hotkey/subscription hookups), `Shutdown`/`SaveLayoutNow`/`ScheduleSave`/`LoadLayout`, `CreateBrush` + shared `BarOnBrush`/`BarOffBrush` (referenced by Audio/Trax/Socials partials), window-geometry pass-through, `SelectedElement`/`OnSelectedElementPropertyChanged`, `ShowPreviewPlaceholder`, `BrandFlash*`, WebView2 hosting (`InitWebView2`/`RegisterLoadedWebSources`/`OnWebView2PreviewBitmapChanged`), frame-pump wiring (construction + `_rtmpUrlProvider` seam + `Dispose`, plus `ResolveOutputFrame` → `RenderChatBox` for chat layers) — the pump's stream-state consumers live in the Streaming partial. |
 | `MainViewModel.Account.cs` | Session + connected account: `LoadSavedSessionAsync` (DPAPI restore at startup), `SignInAsync`/`ChangeAccountAsync`/`SignOutYouTubeAsync`, `IsConnected`/`AccountAvatarUrl`/`AccountDisplayName`/`AccountStatusLightToolTip` via `SyncConnectedAccount` (cleared on End). |
 | `MainViewModel.License.cs` | Polar license (freemium): `LicenseKey`/`LicenseMessage`/`IsLicenseValidating`/`IsLicenseEntryOpen`/`IsHubVisible`/`IsPremium`, `OfflineGracePeriod`, `ValidateLicenseAtStartupAsync`/`ActivateLicenseAsync`. |
 | `MainViewModel.Scenes.cs` | Five-scene catalog: `Scenes` + `StagedScene`/`LiveScene`/`IsEditMode`, `AddScene` (canonical names only), `MissingScenes`/`ShowAddScene`/`AddSceneCommand`; scene wiring `OnScenesChanged`/`WireScene`/`UnwireScene`; transitions `SelectedTransitionType`/`TransitionDurationMs`/`TransitionToScene`/`ApplyTransitionToLive`; global hotkeys `HandleHotkey`/`OpenHotkeyConfig`/`RefreshHotkeyLabels`; scene-gating hints (`CanChangeBackground`). |
@@ -17,8 +17,11 @@ areas' docs in their own rows keeps this index small to read.
 | `MainViewModel.Audio.cs` | **Mic bar:** read-only realtime meter `AudioLevel`/`MeterFillWidth`/`MeterBrush` (fill = `Math.Min(1, AudioLevelMeter.ToDisplay((float)AudioLevel) * MicVolume)`, green→yellow→red at 60%/80% zones), `MicVolume` (0.8 default; drives `MicMuted` ⇔ volume 0; unmute flash `BeginVolumeFlash`/`EndVolumeFlash`/`CancelVolumeFlash`), `MicSourceName` (left-justified inside the bar, persists via `LayoutStore.Settings`), `ToggleMicMute`/`PickMicrophone` (`MicPickerDialog`; picked device swaps the live source via `_audioMixer.RestartMic()`, loopback keeps running), status dot `MicStatus`/`MicStatusBrush`/`MicStatusToolTip` (`Models.MicStatus`: green Connected / yellow Problem / red no-device), capture starts once at startup (`StartMicCaptureAsync`) — NOT go-live. **Game audio bar:** overlaid bottom-center, always visible (show/hide gating removed 2026-08-15); `GameAudioLevel` (loopback via `OnLoopbackLevelChanged`), `GameAudioVolume`/`GameMuted`/`GameMuteText`/`ToggleGameMute`/`PushSystemVolume`, mirror volume flash `SetGameVolumeAdjusting`/`BeginGameVolumeFlash`/`EndGameVolumeFlash`/`CancelGameVolumeFlash`. Mixer handlers `OnMicLevelChanged`/`OnLoopbackLevelChanged`/`OnMicConnected`/`OnMicFailed`. |
 | `MainViewModel.Trax.cs` | Background music (TASK 9, rides the loopback into the stream): `_musicPlayer` (`MusicPlayer`), `IsMusicPlaying`/`TraxError`/`TraxDotBrush`/`TraxToolTip`, interaction `TraxLeftClick`/`TraxRightClick`/`PickTraxTrack`, playback `LoadTrax`/`PlayTrax`/`PauseTrax`/`OnTraxPlaybackEnded`/`RefreshTraxUi`, `UpdateTraxLocalGain` (mirrors the game bar's mute onto `MusicPlayer.LocalGain` so the track ducks/restores with desktop audio). |
 | `MainViewModel.Socials.cs` | Social bar (global resource, overlaid on every scene): `_socials`/`_socialBarFrame`/`_socialValidator` (`ISocialValidator`/`HttpSocialValidator`), `HasSocials`/`SocialBarVisible`/`SocialBarDotBrush`/`SocialBarGlowBrush`/`Socials`/`SocialBarTop`, `OpenSocialDialogCommand`/`OpenSocialDialog` (spawns `SocialsDialogViewModel` + window; saved copy replaces `_socials`), `NotifySocialsChanged`/`RenderSocialBarFrame` (`SocialBarRenderer` → immutable `_socialBarFrame` the frame pump reads), fediverse heal `HealFediverseSoftwareAsync` (static, test-facing) + `HealFediverseSoftwareInBackground`, bar edge toggle `SetSocialBarPosition`/`ToggleSocialBarPosition`. `BarOnBrush`/`BarOffBrush`/`CreateBrush` stay in core (shared tokens). |
+| `MainViewModel.Streaming.cs` | Go-live/record + health + quality tiers + session UI. **Stream state:** `StreamStatus`/`StreamVisibility` setters + `_streamStatus` field, `IsOffline`/`IsLive`/`IsLivePrivate`. **Go-live flow:** `StartSession` (routes by pill state) → `BeginRecordOnly` (signed-out local recording) or `BeginGoLive` (GoLive dialog → captures title/description/visibility + `BroadcastForm.CaptureGoLive` → `PrepareAndStartLiveAsync`: reusable stream → `CreateBroadcast` (stores `_currentBroadcastId`) → empty-metadata warn → chat poll start (liveChatId) → `_framePump.StartAsync()` + health poll; failures → `StreamStatus.Error`, never a crash); `StartRecordFile` (auto-named `ty-…-0000.mp4`) + `FinalizeRecordingAsync` (rename modal, `UniquePath`); `StopStream` (posts Offline, stops chat/audio pipe/pump, clears `_currentBroadcastId`; session/token deliberately NOT cleared — sign-out stays explicit). **Health:** `CurrentHealth`/`ResetHealth`/`ApplyHealth`/`OnFramePumpHealthUpdated` (marshal `FramePump.HealthUpdated` off the stderr thread), `PollHealthAsync`/`OnHealthPollTick`/`ApplyHealthIssue` (report-by-exception banner `HealthIssueBanner`/`HealthIssueBackground` via `StreamHealthReporter`). **Session timer:** `_liveTimer` (ctor-wired) `UpdateSessionTimer`/`OnLiveTimerTick`/`LiveElapsedText`/`_recDotPulse`. **Start/End UI:** REC/ON-AIR pills (`RecordPillOn`/`OnAirPillOn`/`CanToggleOnAir`), `ShowPrimaryStartButton`/`CanStartSession`/`ShowEndStreamButton`/`EndButtonText`/`ShowLogInButton`, REC sign `RecDotBrush`/`RecTextBrush`/`RecDotOpacity`/`OnAirBrush`, live window tokens `WindowTitle`/`TopBarBackground`/`PreviewGlow*` via `UpdateLiveVisuals`; `ChooseRecordFolder`/`ResetRecordFolder`/`_recordFolder`/`RecordFolderDisplay`/`DefaultRecordFolder`. **Resolution dropdown:** `QualityOptions`/`SelectedQuality`/`ResolutionHelp`/`ApplyStreamQuality` + `OutputRect*`/`DimRects`/`IsOutputCropped`/`ResolutionBadgeText` over the 1920×1080 master. **Pipeline bits:** `_framePump`/`_liveTimer`/`_healthPollTimer` fields, `BuildEncoderOptions`. Commands `StartStreamCommand`/`EndStreamCommand`/`ChooseRecordFolderCommand`/`ResetRecordFolderCommand`. Broadcast pull-out: `CurrentBroadcastId`/`BroadcastForm`. |
+| `MainViewModel.Overlays.cs` | Settings/bug/feature/about panels + creator-hub links: panel state `IsSettingsOpen`/`IsBugOpen`/`IsFeatureOpen`/`IsAboutOpen` (via `SetPanel` → `IsAnyOverlayOpen`), `IsLicensesOpen` (flips `IsHubVisible`), `OverlayTitle`, `ShowOverlay` (one-panel exclusivity) + `ShowLicenses` (loads shipped `THIRD-PARTY-NOTICES.txt` into `LicensesText` on first open, never the OS viewer); bug/feature report `BugReportText`/`BugReportEmail`/`FeatureRequestText`/`FeatureRequestEmail` + `SubmitBug`/`SubmitFeature`/`ComposeEmail`/`OpenUrl`; About hub consts `ChannelUrl`/`MastodonUrl`/`CoffeeUrl` (public, integration-test live) + `PremiumUrl` (tabled billing seam — TASK 12 → greyed "Unlock Premium" lights up when filled) + `IsPremiumAvailable` + `SupportEmail` + `AppVersionLabel`; commands `OpenSettingsCommand`/`OpenBugCommand`/`OpenFeatureCommand`/`OpenAboutCommand`/`CloseOverlayCommand`/`SubmitBugCommand`/`SubmitFeatureCommand`/`OpenChannelCommand`/`OpenMastodonCommand`/`OpenCoffeeCommand`/`OpenPremiumCommand`/`OpenLicensesCommand`. Ctor command assignments stay in core. |
+| `MainViewModel.Chat.cs` | Chat overlay + preview pipeline: `ChatMessages` (500-message cap; clear-on-fade), `OnChatMessageReceived` (marshal `_youtubeChat.MessageReceived` onto the dispatcher, switch previews mock→real), fade `_chatFadeTimer`/`ResetChatFadeTimer` (shortest `ChatFadeSeconds` across chat layers); live render `RenderChatBox` (called from `ResolveOutputFrame`, stays in core) + preview render `UpdateChatBoxPreview` (bitmap onto `chatBox.VideoImageSource`); mock preview `MockChatMessages`/`StartMockChatPreview`/`StopMockChatPreview`/`RunMockChatPreviewAsync`/`_mockChatCts`; `UpdateActiveChatBoxPreviews` (wires Chat* property-change subscriptions + first render); `CanAddYouTubeChat` (one-per-layout gate), `ShowChatInactiveMessage` (`!IsLive`). `_chatBoxRenderer` field. Ctor wiring (`MessageReceived` hookup, `new ChatBoxRenderer()`, `LoadLayout` preview start, `_youtubeChat.Dispose`) stays in core. |
 | `GoLiveViewModel.cs` | Start Stream dialog: **account row** (saved channel shown with Change Account, or Sign in to YouTube; Start gated on `IsSignedIn`/`IsBusy`) + title/description + **locked Visibility (always "Private" — ship step 7, no dropdown)**, start/cancel requests |
-| **About hub (TASK 11, in `MainViewModel`)** | the About overlay is the in-app creator hub: `ChannelUrl`/`MastodonUrl`/`CoffeeUrl` (public consts, live) + `PremiumUrl` (tabled billing seam — TASK 12 → the greyed "Unlock Premium" button lights up when filled); `OpenLicensesCommand` → `ShowLicenses()` loads the shipped `THIRD-PARTY-NOTICES.txt` into `LicensesText` and sets `IsLicensesOpen` (in-app scrolling panel, never the OS viewer); `BackToAbout_Click` in `MainWindow.xaml.cs` flips it off. |
+| **About hub (TASK 11, in `MainViewModel.Overlays.cs`)** | the About overlay is the in-app creator hub: `ChannelUrl`/`MastodonUrl`/`CoffeeUrl` (public consts, live) + `PremiumUrl` (tabled billing seam — TASK 12 → the greyed "Unlock Premium" button lights up when filled); `OpenLicensesCommand` → `ShowLicenses()` loads the shipped `THIRD-PARTY-NOTICES.txt` into `LicensesText` and sets `IsLicensesOpen` (in-app scrolling panel, never the OS viewer); `BackToAbout_Click` in `MainWindow.xaml.cs` flips it off. |
 | `ReuseImageViewModel.cs` | Add Image dialog: candidate list (`ReuseImageCandidate`), reuse/new/cancel |
 | `CameraPickerViewModel.cs` | Add Webcam dialog: async camera list (loading / has / none states), `UseRequested(CameraDeviceInfo)`/`CancelRequested` |
 | `MicPickerViewModel.cs` | Select Microphone dialog (voice source): async mic list (loading / has / none states), `UseRequested(MicrophoneDeviceInfo)`/`CancelRequested` |
@@ -45,9 +48,27 @@ Progress (Commit N/12 · tag):
 - [x] **Commit 6/12 · `refactor-commit-6`** — **Audio** → `MainViewModel.Audio.cs`
 - [x] **Commit 7/12 · `refactor-commit-7`** — **Trax** → `MainViewModel.Trax.cs`
 - [x] **Commit 8/12 · `refactor-commit-8`** — **Socials** → `MainViewModel.Socials.cs`
-- [ ] **Commit 9/12** — **Streaming** (go-live/record + health + quality tiers + media source pipeline)
-- [ ] **Commit 10/12** — **Chat** (YouTube chat + mock preview + chatbox render)
-- [ ] **Commit 11/12** — **Overlays** (settings/bug/feature/about panels + license entry)
+- [x] **Commit 9/12 · `refactor-commit-9`** — **Streaming** → `MainViewModel.Streaming.cs`
+- [x] **Commit 10/12 · `refactor-commit-10`** — **Chat** → `MainViewModel.Chat.cs`
+- [x] **Commit 11/12 · `refactor-commit-11`** — **Overlays** → `MainViewModel.Overlays.cs`
+- [x] **Phase 1 complete:** core `MainViewModel.cs` split into 10 functional partials (1,890 → 758 lines).
 
+**Phase 2 — `MainWindow.xaml` split into UserControls** (new `Controls/` folder, namespace `ytLive.Controls`):
+- [x] **Commit 12 · `refactor-commit-12`** — **BottomBar** → `Controls/BottomBar.xaml(.cs)` (gear menu + stream stats + quality dropdown; `GearButton_Click` moved to the control's code-behind).
+- [x] **Commit 13 · `refactor-commit-13`** — **HealthBanner** → `Controls/HealthBanner.xaml` (Row 1). Also promoted the 7 value↔visibility converters out of `MainWindow.Window.Resources` into `Themes/Controls.xaml` so extracted controls can resolve them (app-level, not window-level).
+- [x] **Commit 14 · `refactor-commit-14`** — **TopBar** → `Controls/TopBar.xaml(.cs)` (Row 0: logo, REC/ON-AIR pills + signs, avatar, Sign In/Start/End buttons). Avatar fetch moved (async-preserved) into the control; window exposes `_topBar.RefreshAvatar()` invoked on `IsConnected`/`AccountAvatarUrl` changes.
+- [x] **Commit 15 · `refactor-commit-15`** — **PreviewPane** → `Controls/PreviewPane.xaml(.cs)` (Row 1 Col 1 center preview pane). Moved the 1920×1080 canvas (OverlayCanvas/SelectionOverlay/BrandFlashLayer/SocialBarElement), text pull-out, and the live-controls row (TRAX/game/mic meters + sliders + speakers + socials button). Code-behind moved: preview drag/select/resize/hit-test (Preview_Mouse*, HitHandle, HitElement), webcam-context-menu handlers (WebcamMenu_*), social-bar glow (SocialBar_*, SocialsButton_*, SocialGlowTick), audio sliders/speakers (VolumeSlider_*, GameVolumeSlider_*, MicSpeaker_*, GameSpeaker_*, SetSliderValueFromClick, FindParent), TraxButton_*. Window keeps the source-list left panel + thumbnail strip + edit UI, and routes selection-overlay via `_previewPane.UpdateSelectionOverlay(bool)` plus `_previewPane.IsClickInsidePreview/Drawer`. `BackgroundMenu_*` stayed in the window (used by the left-panel source context menu).
+- [x] **Commit 16 · `refactor-commit-16`** — **SceneThumbnailStrip** → `Controls/SceneThumbnailStrip.xaml(.cs)` (Row 0 scene-picker strip). `Thumbnail_MouseLeftButtonDown` moved into the control (transitions via `DataContext.TransitionToScene`).
+- [x] **Commit 17 · `refactor-commit-17`** — **LeftPanel** → `Controls/LeftPanel.xaml(.cs)` (Row 1 Col 0 left panel: layers/properties edit UI + live chat list). Moved ALL property-editor and chat handlers: `SourceNameBox_*`/`CommitSourceEdit`, `AddSourceButton_Click`, `OnChatMessagesChanged` (now self-subscribed on Loaded), `MirrorButton_Click`, `ShapeButton_Click`, `SourceMenu_Remove`, `BackgroundMenu_*`, `OpacitySlider_ValueChanged`, list drag-to-reorder (`_dragStartPoint`+`List_Preview*`+`EndListDrag`+`FindItemContainerAt`), and the snapshot family (`TakeSnapshot`, `WebcamBorder*`, `Countdown*`, `Web*`). Window exposes via `_leftPanel.IsClickInside(original)` (deselect guard) and `_leftPanel.OnSelectionChanged(vm)` (opacity label + snapshot). Pending: overlay host region.
+- [x] **Commit 18 · `refactor-commit-18`** — **OverlayHost** → `Controls/OverlayHost.xaml(.cs)` (settings/bug/feature/about dialogs). `BackToAbout_Click` moved with it (uses inherited `DataContext`). Window keeps the thin `WebViewHostPanel` + `ToastArea` root stubs so name lookups are untouched (WebView2 ctor init, `NotificationService.InArea("ToastArea")`) — toast/WebView2 behavior unchanged. **Phase 2 COMPLETE** — MainWindow.xaml carved down to a 123-line shell over 6 controls (TopBar, HealthBanner, BottomBar, SceneThumbnailStrip, LeftPanel, PreviewPane, OverlayHost). Pending: session wrap-up (HANDOFF.md) + push on approval.
+
+**Phase 3 — 500-line compliance (production `.cs` only).** Bring all production
+source files under 500 lines. One roll-back commit per file; same drill
+(0-warning build, `verify.sh` 246+2, explicit-file scope-check, tracker in same
+commit, tag `refactor-commit-N`, no per-commit push).
+- [x] **Commit A · `refactor-commit-A`** — **core** → `MainViewModel.cs` 758 → **495**. Moved source add/remove/image block to new **`MainViewModel.Sources.cs`** (234 lines: `AddSource`, `NextSourceName`, `AddImage`, `BuildImageCandidates`, `PickImageBytes`, `AddAsset`, `AddImageSource`, `AddReusedImage`, `RemoveElement`) and WebView2 hosting (`RegisterLoadedWebSources`, `InitWebView2`, `OnWebView2PreviewBitmapChanged`) to new **`MainViewModel.Web.cs`**. Pruned now-dead usings (`Microsoft.Win32`, `NAudio.CoreAudioApi`, `System.Windows.Media.Imaging`, `Collections.ObjectModel/Specialized`). Pending: Streaming, Background, SocialsDialogViewModel, LayoutStore.
+- [x] **Commit B · `refactor-commit-B`** — **Streaming** → `MainViewModel.Streaming.cs` 789 → **330** + new **`MainViewModel.Streaming.Operations.cs`** (459 lines). Moved the go-live/record/health operation bodies (`StartSession`, `BeginRecordOnly`, `BeginGoLive`, `StartRecordFile`, `PrepareAndStartLiveAsync`, `PollHealthAsync`/`OnHealthPollTick`/`ApplyHealthIssue`, `StopStream`, `FinalizeRecordingAsync`, `UniquePath`, `ChooseRecordFolder`, `ResetRecordFolder`, `DefaultRecordFolder`, `OnFramePumpFailed`, `OnFramePumpHealthUpdated`, `ApplyHealth`, `ResetHealth`, `BuildEncoderOptions`) into the Operations partial; Streaming.cs keeps state + quality/resolution tiers + session timer + command declarations. Pruned dead usings both files. Pending: Background, SocialsDialogViewModel, LayoutStore.
+- [x] **Commit C · `refactor-commit-C`** — **Background** → `MainViewModel.Background.cs` 567 → **418** + new **`MainViewModel.Background.Model.cs`** (163 lines). Moved the static scene-model helpers (`LoadBackgroundImage`, `CreatePlaceholderSnapshot`, `EnsureBackground`, `CreateBackground`, `NormalizeBackgrounds`, `AllBackgrounds`, `ResolveAutoCaptureKey`, `MonitorKeyPrefix`) into the Model partial; Background.cs keeps capture/live state + operations (`UpdateActiveBackground`, `UpdateBackgroundImage`, `RefreshSnapshotsAsync`, `ReacquireScreenCaptures`, `OnScreenPreviewBitmapChanged`, `OnFullscreenMonitorChanged`, `RefreshBackgroundAutoCapture`, `BrowseBackground`, `ClearBackgroundCaptureAsync`, `RedesignateBackgroundAsync`, `ChangeBackgroundCaptureAsync`, `SetBackgroundCapture`, `DefaultBackgroundAsset`, `HealBackgrounds`, `StampDefaultBackgroundAsset`). Pending: SocialsDialogViewModel, LayoutStore.
+- [x] **Commit D · `refactor-commit-D`** — **SocialsDialog** → `SocialsDialogViewModel.cs` 515 → **334** + new **`SocialSlotViewModel.cs`** (183 lines). Moved the `DialogEntry` record + the row-level `SocialSlotViewModel` (six-fixed-slot row VM: service/logo/lock/edit/validate state + computed `Show*` flags) into its own file; `SocialsDialogViewModel.cs` keeps the dialog VM (sign-in gate, validation orchestration, commit). `DialogEntry` stays `public` in the same namespace so both files see it. Pending: LayoutStore.
 The partial `.cs` files land next to `MainViewModel.cs` in this folder as the split
 proceeds; each partial carries its own `using`s and re-declares nothing from core.