fix: dashboard Details button no longer clipped (v0.3.1)

Trailing DataGridTemplateColumn had Width="Auto"; against the 2* star columns
it collapsed on first layout, clipping the Details button to a sliver. Pin to
Width="120" so the button always fits.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.paul/ROADMAP.md

@@ -6,9 +6,9 @@
 |---------|------|--------|--------|-----------|
 | v0.1 | Walking Skeleton (MTConnect) | 1 | ✅ Shipped | 2026-07-21 |
 | v0.2 | Machine Management UX | 2, 2.1 | ✅ Shipped (2.1 commit pending) | 2026-07-21 |
-| v0.3 | Data-Item Selection + UX | 3, 3.1 | 🚧 Phase 3 done, 3.1 (theming) next | - |
-| v0.4 | OPC UA Protocol | 4 | 📋 Planned | - |
-| v0.5 | Fanuc FOCAS Protocol | 5 | 📋 Planned | - |
+| v0.3 | Data-Item Selection + UX | 3, 3.1 | ✅ Shipped (branch v0.3.1-theming) | 2026-07-22 |
+| v0.4 | OPC UA Protocol | 4 | 🚧 In progress (branch v0.4-opcua) | - |
+| v0.5 | Fanuc FOCAS Protocol | 5 | ⏸️ Deferred (no native/Windows on dev host) | - |
 | v0.6 | History & Trends | 6 | 📋 Planned | - |
 
 ## 🚧 Active Milestone: v0.2 Machine Management UX

.paul/STATE.md

@@ -5,18 +5,24 @@
 See: .paul/PROJECT.md (updated 2026-07-21)
 
 **Core value:** Operators see live state of every configured machine across heterogeneous protocols in one place, adding machines/protocols without code.
-**Current focus:** v0.3 Phase 3 (item selection) shipped → PAUSED. Next: Phase 3.1 theming/UX.
+**Current focus:** Autonomous finish run — branch-per-milestone. v0.3.1 theming SHIPPED. Now v0.4 OPC UA.
 
 ## Current Position
 
-Milestone: v0.3 Data-Item Selection + UX
-Phase: 3 (item selection) ✓ SHIPPED — Phase 3.1 (theming/UX) NOT started
-Plan: v0.3-backend ✓, v0.3-appui ✓
-Status: PAUSED (user requested). Build 0/0, 138 tests + 2 docker-skip.
-Last activity: 2026-07-22 — v0.3 item selection: Machine.MonitoredItemIds (opt-in), IProtocolDriver.ProbeAsync, MTConnect probe+filter, Persistence col+migration, monitor.ProbeAsync, config probe→checklist UI (47 items live), detail empty-state.
+Milestone: v0.4 OPC UA Protocol
+Phase: 4 — IN PROGRESS (branch v0.4-opcua, from v0.3.1-theming)
+Status: Build 0/0, 148 tests + 2 docker-skip (after v0.3.1).
+Last activity: 2026-07-22 — v0.3.1 theming shipped on branch v0.3.1-theming (Fluent light/dark, per-protocol icons, curated layout, +10 converter tests). SDK decided for v0.4: OPCFoundation.NetStandard.Opc.Ua.Client 1.5.378.156 (MIT), plugin retargets net48, IUaClient seam for testability.
 
 Progress:
-- v0.3: Phase 3 done, Phase 3.1 (theming) pending
+- v0.3.1 theming ✓ (branch pushed)
+- v0.4 OPC UA: impl starting
+- v0.5 FOCAS: DEFERRED (no native fwlib32/Windows on Linux dev host)
+
+## Branch-per-milestone (user directive 2026-07-22)
+
+Chain, each branch from previous; user merges one at a time; push branches to origin, NO auto-merge to main:
+v0.3.1-theming (from main) ✓ → v0.4-opcua → v0.6-history (skips deferred v0.5).
 
 ## Loop Position
 

src/Junction.App/App.axaml

@@ -2,15 +2,113 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:Junction.App"
              xmlns:conv="clr-namespace:Junction.App.Converters"
-             x:Class="Junction.App.App">
+             x:Class="Junction.App.App"
+             RequestedThemeVariant="Default">
+    <!-- RequestedThemeVariant="Default" = follow the OS light/dark preference. -->
+
     <Application.Resources>
-        <conv:StatusKindToBrushConverter x:Key="StatusKindToBrush" />
+        <ResourceDictionary>
+            <!-- Per-variant palette. Fluent supplies the base chrome; these are Junction's
+                 accent + surface + status tokens, adapted for Light and Dark. -->
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Light">
+                    <SolidColorBrush x:Key="AccentBrush" Color="#2563EB" />
+                    <SolidColorBrush x:Key="AccentHoverBrush" Color="#1D4FD7" />
+                    <SolidColorBrush x:Key="AppBackgroundBrush" Color="#F4F6F9" />
+                    <SolidColorBrush x:Key="CardBackgroundBrush" Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="CardBorderBrush" Color="#E2E6EC" />
+                    <SolidColorBrush x:Key="HeaderForegroundBrush" Color="#161A1F" />
+                    <SolidColorBrush x:Key="SubtleForegroundBrush" Color="#697586" />
+                    <SolidColorBrush x:Key="DangerBrush" Color="#C62828" />
+                    <SolidColorBrush x:Key="OnAccentBrush" Color="#FFFFFF" />
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <SolidColorBrush x:Key="AccentBrush" Color="#4C8DF6" />
+                    <SolidColorBrush x:Key="AccentHoverBrush" Color="#6BA1F8" />
+                    <SolidColorBrush x:Key="AppBackgroundBrush" Color="#1B1E23" />
+                    <SolidColorBrush x:Key="CardBackgroundBrush" Color="#24282E" />
+                    <SolidColorBrush x:Key="CardBorderBrush" Color="#3A3F46" />
+                    <SolidColorBrush x:Key="HeaderForegroundBrush" Color="#F2F4F7" />
+                    <SolidColorBrush x:Key="SubtleForegroundBrush" Color="#9AA3AF" />
+                    <SolidColorBrush x:Key="DangerBrush" Color="#EF5350" />
+                    <SolidColorBrush x:Key="OnAccentBrush" Color="#FFFFFF" />
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+
+            <!-- Spacing scale (variant-invariant). -->
+            <Thickness x:Key="PageMargin">20</Thickness>
+
+            <!-- Variant-invariant converters. -->
+            <conv:StatusKindToBrushConverter x:Key="StatusKindToBrush" />
+            <conv:ProtocolIdToIconConverter x:Key="ProtocolIdToIcon" />
+        </ResourceDictionary>
     </Application.Resources>
+
     <Application.DataTemplates>
         <local:ViewLocator />
     </Application.DataTemplates>
+
     <Application.Styles>
         <FluentTheme />
         <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
+
+        <!-- Inter (bundled via WithInterFont) as the shell default for a consistent, crisp face. -->
+        <Style Selector="Window">
+            <Setter Property="FontFamily" Value="avares://Avalonia.Fonts.Inter/Assets#Inter" />
+            <Setter Property="Background" Value="{DynamicResource AppBackgroundBrush}" />
+        </Style>
+
+        <!-- Reusable text roles. -->
+        <Style Selector="TextBlock.h1">
+            <Setter Property="FontSize" Value="22" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="Foreground" Value="{DynamicResource HeaderForegroundBrush}" />
+        </Style>
+        <Style Selector="TextBlock.h2">
+            <Setter Property="FontSize" Value="16" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="Foreground" Value="{DynamicResource HeaderForegroundBrush}" />
+        </Style>
+        <Style Selector="TextBlock.subtle">
+            <Setter Property="Foreground" Value="{DynamicResource SubtleForegroundBrush}" />
+        </Style>
+        <Style Selector="TextBlock.fieldLabel">
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="Foreground" Value="{DynamicResource SubtleForegroundBrush}" />
+        </Style>
+
+        <!-- Card / section container. -->
+        <Style Selector="Border.card">
+            <Setter Property="Background" Value="{DynamicResource CardBackgroundBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource CardBorderBrush}" />
+            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="CornerRadius" Value="6" />
+            <Setter Property="Padding" Value="16" />
+        </Style>
+
+        <!-- Primary (accent) button. -->
+        <Style Selector="Button.accent">
+            <Setter Property="Background" Value="{DynamicResource AccentBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource OnAccentBrush}" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+        </Style>
+        <Style Selector="Button.accent:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource AccentHoverBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource OnAccentBrush}" />
+        </Style>
+
+        <!-- Destructive button. -->
+        <Style Selector="Button.danger">
+            <Setter Property="Background" Value="{DynamicResource DangerBrush}" />
+            <Setter Property="Foreground" Value="#FFFFFF" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+        </Style>
+
+        <!-- Protocol glyph. -->
+        <Style Selector="PathIcon.protocol">
+            <Setter Property="Width" Value="16" />
+            <Setter Property="Height" Value="16" />
+            <Setter Property="Foreground" Value="{DynamicResource AccentBrush}" />
+        </Style>
     </Application.Styles>
 </Application>

src/Junction.App/Converters/ProtocolIdToIconConverter.cs

@@ -0,0 +1,75 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Junction.App.Converters
+{
+    /// <summary>
+    /// Maps a machine's <c>ProtocolId</c> ("mtconnect", future "opcua"/"fanuc", …) to a vector
+    /// glyph (<see cref="Geometry"/>) for a <c>PathIcon</c>. Keeps view-models framework-agnostic:
+    /// the icon decision lives entirely in the view layer, mirroring
+    /// <see cref="StatusKindToBrushConverter"/>. Unknown/empty ids fall back to a generic glyph.
+    /// <para>Glyphs are line-only 24×24 path data (no arcs/curves) so they always parse and read
+    /// as distinct filled shapes. No external image assets — net48 packaging stays a single exe set.</para>
+    /// </summary>
+    public sealed class ProtocolIdToIconConverter : IValueConverter
+    {
+        public static readonly ProtocolIdToIconConverter Instance = new ProtocolIdToIconConverter();
+
+        // Signal-strength bars — a live telemetry feed.
+        private const string MtconnectData = "M4,14 H7 V20 H4 Z M10,10 H13 V20 H10 Z M16,5 H19 V20 H16 Z";
+
+        // Stacked diamonds — the OPC UA layered address space.
+        private const string OpcuaData = "M12,2 L20,7 L12,12 L4,7 Z M12,13 L20,18 L12,23 L4,18 Z";
+
+        // Plus/cross — an industrial CNC controller marker.
+        private const string FanucData = "M10,3 H14 V10 H21 V14 H14 V21 H10 V14 H3 V10 H10 Z";
+
+        // Octagon node — generic / unknown protocol.
+        private const string FallbackData = "M8,4 H16 L20,8 V16 L16,20 H8 L4,16 V8 Z";
+
+        private static Geometry? _mtconnect;
+        private static Geometry? _opcua;
+        private static Geometry? _fanuc;
+        private static Geometry? _fallback;
+
+        /// <summary>
+        /// Pure lookup of the raw path-data string for a protocol id. View-framework-free and
+        /// side-effect-free so it is unit-testable without an Avalonia platform. Known ids return a
+        /// distinct non-empty string; anything else returns the generic fallback. Never throws.
+        /// </summary>
+        public static string PathDataFor(string? protocolId)
+        {
+            switch (protocolId == null ? null : protocolId.Trim().ToLowerInvariant())
+            {
+                case "mtconnect":
+                    return MtconnectData;
+                case "opcua":
+                    return OpcuaData;
+                case "fanuc":
+                    return FanucData;
+                default:
+                    return FallbackData;
+            }
+        }
+
+        public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            switch (PathDataFor(value as string))
+            {
+                case MtconnectData:
+                    return _mtconnect ?? (_mtconnect = Geometry.Parse(MtconnectData));
+                case OpcuaData:
+                    return _opcua ?? (_opcua = Geometry.Parse(OpcuaData));
+                case FanucData:
+                    return _fanuc ?? (_fanuc = Geometry.Parse(FanucData));
+                default:
+                    return _fallback ?? (_fallback = Geometry.Parse(FallbackData));
+            }
+        }
+
+        public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+            => throw new NotSupportedException();
+    }
+}

src/Junction.App/MainWindow.axaml

@@ -5,7 +5,8 @@
         x:DataType="vm:MainWindowViewModel"
         x:CompileBindings="True"
         Title="Junction"
-        Width="800" Height="600">
+        Width="900" Height="640"
+        Background="{DynamicResource AppBackgroundBrush}">
     <!-- Shell: hosts the current page; ViewLocator maps the VM to its View. -->
     <ContentControl Content="{Binding CurrentPage}" />
 </Window>

src/Junction.App/Views/DashboardView.axaml

@@ -8,66 +8,82 @@
              x:DataType="vm:DashboardViewModel"
              x:CompileBindings="True">
 
-  <DockPanel Margin="16">
-    <Grid DockPanel.Dock="Top" ColumnDefinitions="*,Auto" Margin="0,0,0,12">
+  <DockPanel Margin="20">
+    <Grid DockPanel.Dock="Top" ColumnDefinitions="*,Auto" Margin="0,0,0,16">
       <TextBlock Grid.Column="0"
+                 Classes="h1"
                  Text="{Binding Title}"
-                 FontSize="22" FontWeight="SemiBold"
                  VerticalAlignment="Center" />
       <Button Grid.Column="1"
+              Classes="accent"
               Content="+ Add machine"
               Command="{Binding AddMachineCommand}"
               VerticalAlignment="Center" />
     </Grid>
 
-    <DataGrid ItemsSource="{Binding Machines}"
-              AutoGenerateColumns="False"
-              IsReadOnly="True"
-              CanUserReorderColumns="False"
-              CanUserResizeColumns="True"
-              GridLinesVisibility="Horizontal"
-              HeadersVisibility="Column">
-      <DataGrid.Columns>
-        <DataGridTextColumn Header="Machine"
-                            Binding="{Binding Name}"
-                            Width="2*"
-                            x:DataType="vm:MachineRowViewModel" />
+    <Border Classes="card" Padding="0">
+      <DataGrid ItemsSource="{Binding Machines}"
+                AutoGenerateColumns="False"
+                IsReadOnly="True"
+                CanUserReorderColumns="False"
+                CanUserResizeColumns="True"
+                GridLinesVisibility="Horizontal"
+                HeadersVisibility="Column"
+                Background="Transparent">
+        <DataGrid.Columns>
+          <DataGridTemplateColumn Header="Machine" Width="2*">
+            <DataGridTemplateColumn.CellTemplate>
+              <DataTemplate x:DataType="vm:MachineRowViewModel">
+                <StackPanel Orientation="Horizontal" Spacing="10"
+                            VerticalAlignment="Center" Margin="12,0">
+                  <PathIcon Classes="protocol"
+                            Data="{Binding ProtocolId, Converter={StaticResource ProtocolIdToIcon}}"
+                            ToolTip.Tip="{Binding ProtocolId}"
+                            VerticalAlignment="Center" />
+                  <TextBlock Text="{Binding Name}" FontWeight="SemiBold" VerticalAlignment="Center" />
+                </StackPanel>
+              </DataTemplate>
+            </DataGridTemplateColumn.CellTemplate>
+          </DataGridTemplateColumn>
 
-        <DataGridTemplateColumn Header="Status" Width="Auto">
-          <DataGridTemplateColumn.CellTemplate>
-            <DataTemplate x:DataType="vm:MachineRowViewModel">
-              <StackPanel Orientation="Horizontal" Spacing="6"
-                          VerticalAlignment="Center" Margin="8,0">
-                <Ellipse Width="10" Height="10" VerticalAlignment="Center"
-                         Fill="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}" />
-                <TextBlock Text="{Binding ConnectionState}"
-                           Foreground="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}"
-                           FontWeight="SemiBold" VerticalAlignment="Center" />
-              </StackPanel>
-            </DataTemplate>
-          </DataGridTemplateColumn.CellTemplate>
-        </DataGridTemplateColumn>
+          <DataGridTemplateColumn Header="Status" Width="Auto">
+            <DataGridTemplateColumn.CellTemplate>
+              <DataTemplate x:DataType="vm:MachineRowViewModel">
+                <StackPanel Orientation="Horizontal" Spacing="6"
+                            VerticalAlignment="Center" Margin="12,0">
+                  <Ellipse Width="10" Height="10" VerticalAlignment="Center"
+                           Fill="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}" />
+                  <TextBlock Text="{Binding ConnectionState}"
+                             Foreground="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}"
+                             FontWeight="SemiBold" VerticalAlignment="Center" />
+                </StackPanel>
+              </DataTemplate>
+            </DataGridTemplateColumn.CellTemplate>
+          </DataGridTemplateColumn>
 
-        <DataGridTextColumn Header="Last Datum"
-                            Binding="{Binding LastDatum}"
-                            Width="2*"
-                            x:DataType="vm:MachineRowViewModel" />
+          <DataGridTextColumn Header="Last Datum"
+                              Binding="{Binding LastDatum}"
+                              Width="2*"
+                              x:DataType="vm:MachineRowViewModel" />
 
-        <DataGridTextColumn Header="Last Seen"
-                            Binding="{Binding LastSeen}"
-                            Width="Auto"
-                            x:DataType="vm:MachineRowViewModel" />
+          <DataGridTextColumn Header="Last Seen"
+                              Binding="{Binding LastSeen}"
+                              Width="Auto"
+                              x:DataType="vm:MachineRowViewModel" />
 
-        <DataGridTemplateColumn Header="" Width="Auto">
-          <DataGridTemplateColumn.CellTemplate>
-            <DataTemplate x:DataType="vm:MachineRowViewModel">
-              <Button Content="Details"
-                      Command="{Binding OpenDetailCommand}"
-                      VerticalAlignment="Center" Margin="8,2" />
-            </DataTemplate>
-          </DataGridTemplateColumn.CellTemplate>
-        </DataGridTemplateColumn>
-      </DataGrid.Columns>
-    </DataGrid>
+          <!-- Fixed width: a trailing Auto column collapses against the 2* star columns,
+               clipping the Details button to a sliver on first layout. -->
+          <DataGridTemplateColumn Header="" Width="120">
+            <DataGridTemplateColumn.CellTemplate>
+              <DataTemplate x:DataType="vm:MachineRowViewModel">
+                <Button Content="Details"
+                        Command="{Binding OpenDetailCommand}"
+                        VerticalAlignment="Center" Margin="12,4" />
+              </DataTemplate>
+            </DataGridTemplateColumn.CellTemplate>
+          </DataGridTemplateColumn>
+        </DataGrid.Columns>
+      </DataGrid>
+    </Border>
   </DockPanel>
 </UserControl>

src/Junction.App/Views/MachineConfigView.axaml

@@ -8,122 +8,128 @@
              x:DataType="vm:MachineConfigViewModel"
              x:CompileBindings="True">
 
-  <DockPanel Margin="16">
+  <!-- header / body / footer -->
+  <Grid Margin="20" RowDefinitions="Auto,*,Auto">
 
     <!-- Header -->
-    <TextBlock DockPanel.Dock="Top"
+    <TextBlock Grid.Row="0" Classes="h1"
                Text="{Binding Title}"
-               FontSize="22" FontWeight="SemiBold"
                Margin="0,0,0,16" />
 
-    <!-- Action bar -->
-    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Spacing="12" Margin="0,16,0,0">
-      <Button Content="Save" Command="{Binding SaveCommand}" IsDefault="True" />
-      <Button Content="Cancel" Command="{Binding CancelCommand}" />
-    </StackPanel>
+    <!-- Body: fixed form column + stretching data-items column -->
+    <Grid Grid.Row="1" ColumnDefinitions="Auto,*">
 
-    <!-- Inline validation hint -->
-    <TextBlock DockPanel.Dock="Bottom"
-               Text="{Binding ValidationError}"
-               IsVisible="{Binding HasValidationError}"
-               Foreground="#C0392B"
-               TextWrapping="Wrap"
-               Margin="0,12,0,0" />
+      <!-- Form -->
+      <Border Grid.Column="0" Classes="card" Width="380" VerticalAlignment="Top">
+        <StackPanel Spacing="12">
 
-    <!-- Form -->
-    <StackPanel DockPanel.Dock="Top" Spacing="12" MaxWidth="480" HorizontalAlignment="Left">
+          <StackPanel Spacing="4">
+            <TextBlock Classes="fieldLabel" Text="Name" />
+            <TextBox Text="{Binding Name}" Watermark="Machine name" />
+          </StackPanel>
 
-      <StackPanel Spacing="4">
-        <TextBlock Text="Name" FontWeight="SemiBold" />
-        <TextBox Text="{Binding Name}" Watermark="Machine name" />
-      </StackPanel>
+          <StackPanel Spacing="4">
+            <TextBlock Classes="fieldLabel" Text="Protocol" />
+            <ComboBox ItemsSource="{Binding AvailableProtocols}"
+                      SelectedItem="{Binding SelectedProtocol}"
+                      HorizontalAlignment="Stretch"
+                      PlaceholderText="Select a protocol" />
+          </StackPanel>
 
-      <StackPanel Spacing="4">
-        <TextBlock Text="Protocol" FontWeight="SemiBold" />
-        <ComboBox ItemsSource="{Binding AvailableProtocols}"
-                  SelectedItem="{Binding SelectedProtocol}"
-                  HorizontalAlignment="Stretch"
-                  PlaceholderText="Select a protocol" />
-      </StackPanel>
+          <StackPanel Spacing="4">
+            <TextBlock Classes="fieldLabel" Text="Agent URL" />
+            <TextBox Text="{Binding AgentUrl}" Watermark="http://host:5000" />
+          </StackPanel>
 
-      <StackPanel Spacing="4">
-        <TextBlock Text="Agent URL" FontWeight="SemiBold" />
-        <TextBox Text="{Binding AgentUrl}" Watermark="http://host:5000" />
-      </StackPanel>
+          <StackPanel Spacing="4">
+            <TextBlock Classes="fieldLabel" Text="Poll Interval (seconds)" />
+            <TextBox Text="{Binding PollIntervalSeconds}" Width="120" HorizontalAlignment="Left" />
+          </StackPanel>
 
-      <StackPanel Spacing="4">
-        <TextBlock Text="Poll Interval (seconds)" FontWeight="SemiBold" />
-        <TextBox Text="{Binding PollIntervalSeconds}" Width="120" HorizontalAlignment="Left" />
-      </StackPanel>
-
-    </StackPanel>
-
-    <!-- Data items to monitor (fills remaining space) -->
-    <Border BorderThickness="1"
-            BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-            CornerRadius="4"
-            Padding="12" Margin="0,16,0,0" MaxWidth="640" HorizontalAlignment="Left">
-      <DockPanel>
-
-        <TextBlock DockPanel.Dock="Top" Text="Data items to monitor"
-                   FontSize="16" FontWeight="SemiBold" Margin="0,0,0,8" />
-
-        <!-- Controls row -->
-        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Spacing="8" Margin="0,0,0,8">
-          <Button Content="Load available items"
-                  Command="{Binding LoadItemsCommand}" />
-          <Button Content="Select all"
-                  Command="{Binding SelectAllCommand}" />
-          <Button Content="Select none"
-                  Command="{Binding SelectNoneCommand}" />
-          <ProgressBar IsIndeterminate="True"
-                       IsVisible="{Binding IsProbing}"
-                       Width="120" VerticalAlignment="Center" />
         </StackPanel>
+      </Border>
 
-        <!-- Status message -->
-        <TextBlock DockPanel.Dock="Top"
-                   Text="{Binding ItemsStatus}"
-                   IsVisible="{Binding HasItemsStatus}"
-                   Opacity="0.85" TextWrapping="Wrap" Margin="0,0,0,8" />
+      <!-- Data items to monitor (fills remaining width + height) -->
+      <Border Grid.Column="1" Classes="card" Margin="16,0,0,0" HorizontalAlignment="Stretch">
+        <DockPanel>
 
-        <!-- Column header -->
-        <Border DockPanel.Dock="Top"
-                BorderThickness="0,0,0,1"
-                BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-                Padding="0,0,0,4" Margin="0,0,0,4">
-          <Grid ColumnDefinitions="Auto,2*,1.2*,1.2*,1*" Margin="0,0,8,0">
-            <TextBlock Grid.Column="0" Text="" Width="28" />
-            <TextBlock Grid.Column="1" Text="Name" FontWeight="Bold" />
-            <TextBlock Grid.Column="2" Text="Type" FontWeight="Bold" />
-            <TextBlock Grid.Column="3" Text="Category" FontWeight="Bold" />
-            <TextBlock Grid.Column="4" Text="Units" FontWeight="Bold" />
-          </Grid>
-        </Border>
+          <TextBlock DockPanel.Dock="Top" Classes="h2" Text="Data items to monitor"
+                     Margin="0,0,0,8" />
 
-        <!-- Scrollable checklist -->
-        <ScrollViewer MaxHeight="320">
-          <ItemsControl ItemsSource="{Binding AvailableItems}">
-            <ItemsControl.ItemTemplate>
-              <DataTemplate x:DataType="vm:SelectableDataItemViewModel">
-                <Grid ColumnDefinitions="Auto,2*,1.2*,1.2*,1*" Margin="0,3">
-                  <CheckBox Grid.Column="0" Width="28"
-                            IsChecked="{Binding IsSelected}"
-                            VerticalAlignment="Center" />
-                  <StackPanel Grid.Column="1" VerticalAlignment="Center">
-                    <TextBlock Text="{Binding Name}" FontWeight="SemiBold" TextWrapping="Wrap" />
-                    <TextBlock Text="{Binding Id}" FontSize="11" Opacity="0.6" TextWrapping="Wrap" />
-                  </StackPanel>
-                  <TextBlock Grid.Column="2" Text="{Binding Type}" VerticalAlignment="Center" TextWrapping="Wrap" />
-                  <TextBlock Grid.Column="3" Text="{Binding Category}" VerticalAlignment="Center" TextWrapping="Wrap" />
-                  <TextBlock Grid.Column="4" Text="{Binding Units}" VerticalAlignment="Center" TextWrapping="Wrap" />
-                </Grid>
-              </DataTemplate>
-            </ItemsControl.ItemTemplate>
-          </ItemsControl>
-        </ScrollViewer>
+          <!-- Controls row -->
+          <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Spacing="8" Margin="0,0,0,8">
+            <Button Content="Load available items"
+                    Command="{Binding LoadItemsCommand}" />
+            <Button Content="Select all"
+                    Command="{Binding SelectAllCommand}" />
+            <Button Content="Select none"
+                    Command="{Binding SelectNoneCommand}" />
+            <ProgressBar IsIndeterminate="True"
+                         IsVisible="{Binding IsProbing}"
+                         Width="120" VerticalAlignment="Center" />
+          </StackPanel>
 
-      </DockPanel>
-    </Border>
-  </DockPanel>
+          <!-- Status message -->
+          <TextBlock DockPanel.Dock="Top" Classes="subtle"
+                     Text="{Binding ItemsStatus}"
+                     IsVisible="{Binding HasItemsStatus}"
+                     TextWrapping="Wrap" Margin="0,0,0,8" />
+
+          <!-- Column header -->
+          <Border DockPanel.Dock="Top"
+                  BorderThickness="0,0,0,1"
+                  BorderBrush="{DynamicResource CardBorderBrush}"
+                  Padding="0,0,0,4" Margin="0,0,0,4">
+            <Grid ColumnDefinitions="Auto,2*,1.2*,1.2*,1*" Margin="0,0,8,0">
+              <TextBlock Grid.Column="0" Text="" Width="28" />
+              <TextBlock Grid.Column="1" Classes="fieldLabel" Text="Name" />
+              <TextBlock Grid.Column="2" Classes="fieldLabel" Text="Type" />
+              <TextBlock Grid.Column="3" Classes="fieldLabel" Text="Category" />
+              <TextBlock Grid.Column="4" Classes="fieldLabel" Text="Units" />
+            </Grid>
+          </Border>
+
+          <!-- Scrollable checklist (fills remaining height) -->
+          <ScrollViewer>
+            <ItemsControl ItemsSource="{Binding AvailableItems}">
+              <ItemsControl.ItemTemplate>
+                <DataTemplate x:DataType="vm:SelectableDataItemViewModel">
+                  <Grid ColumnDefinitions="Auto,2*,1.2*,1.2*,1*" Margin="0,3">
+                    <CheckBox Grid.Column="0" Width="28"
+                              IsChecked="{Binding IsSelected}"
+                              VerticalAlignment="Center" />
+                    <StackPanel Grid.Column="1" VerticalAlignment="Center">
+                      <TextBlock Text="{Binding Name}" FontWeight="SemiBold" TextWrapping="Wrap" />
+                      <TextBlock Text="{Binding Id}" Classes="subtle" FontSize="11" TextWrapping="Wrap" />
+                    </StackPanel>
+                    <TextBlock Grid.Column="2" Text="{Binding Type}" VerticalAlignment="Center" TextWrapping="Wrap" />
+                    <TextBlock Grid.Column="3" Text="{Binding Category}" VerticalAlignment="Center" TextWrapping="Wrap" />
+                    <TextBlock Grid.Column="4" Text="{Binding Units}" VerticalAlignment="Center" TextWrapping="Wrap" />
+                  </Grid>
+                </DataTemplate>
+              </ItemsControl.ItemTemplate>
+            </ItemsControl>
+          </ScrollViewer>
+
+        </DockPanel>
+      </Border>
+    </Grid>
+
+    <!-- Footer: validation hint + action bar, full width -->
+    <StackPanel Grid.Row="2" Spacing="0">
+      <!-- Inline validation hint -->
+      <TextBlock Text="{Binding ValidationError}"
+                 IsVisible="{Binding HasValidationError}"
+                 Foreground="{DynamicResource DangerBrush}"
+                 TextWrapping="Wrap"
+                 Margin="0,12,0,0" />
+
+      <!-- Action bar -->
+      <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,16,0,0">
+        <Button Classes="accent" Content="Save" Command="{Binding SaveCommand}" IsDefault="True" />
+        <Button Content="Cancel" Command="{Binding CancelCommand}" />
+      </StackPanel>
+    </StackPanel>
+
+  </Grid>
 </UserControl>

src/Junction.App/Views/MachineDetailView.axaml

@@ -9,71 +9,70 @@
              x:CompileBindings="True">
 
   <Grid>
-  <DockPanel Margin="16">
+  <DockPanel Margin="20">
 
-    <!-- Header bar: Back + machine name + status badge + Edit/Delete -->
-    <Grid DockPanel.Dock="Top" ColumnDefinitions="Auto,Auto,*,Auto,Auto" Margin="0,0,0,12">
+    <!-- Header bar: Back + protocol glyph + machine name + status badge + Edit/Delete -->
+    <Grid DockPanel.Dock="Top" ColumnDefinitions="Auto,Auto,Auto,*,Auto,Auto" Margin="0,0,0,16">
       <Button Grid.Column="0" Content="← Back" Command="{Binding BackCommand}" VerticalAlignment="Center" />
-      <TextBlock Grid.Column="1" Text="{Binding MachineName}"
-                 FontSize="22" FontWeight="SemiBold"
-                 VerticalAlignment="Center" Margin="12,0" />
-      <Border Grid.Column="2"
+      <PathIcon Grid.Column="1" Classes="protocol" Width="20" Height="20"
+                Data="{Binding ProtocolId, Converter={StaticResource ProtocolIdToIcon}}"
+                ToolTip.Tip="{Binding ProtocolId}"
+                VerticalAlignment="Center" Margin="14,0,0,0" />
+      <TextBlock Grid.Column="2" Classes="h1" Text="{Binding MachineName}"
+                 VerticalAlignment="Center" Margin="10,0" />
+      <Border Grid.Column="3"
               Background="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}"
               CornerRadius="4" Padding="8,3" HorizontalAlignment="Left" VerticalAlignment="Center">
         <TextBlock Text="{Binding ConnectionState}" Foreground="White" FontWeight="SemiBold" FontSize="12" />
       </Border>
-      <Button Grid.Column="3" Content="Edit" Command="{Binding EditCommand}"
+      <Button Grid.Column="4" Content="Edit" Command="{Binding EditCommand}"
               VerticalAlignment="Center" Margin="0,0,8,0" />
-      <Button Grid.Column="4" Content="Delete" Command="{Binding RequestDeleteCommand}"
+      <Button Grid.Column="5" Classes="danger" Content="Delete" Command="{Binding RequestDeleteCommand}"
               VerticalAlignment="Center" />
     </Grid>
 
     <!-- Machine info panel -->
-    <Border DockPanel.Dock="Top"
-            BorderThickness="1"
-            BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-            CornerRadius="4"
-            Padding="12" Margin="0,0,0,12">
+    <Border DockPanel.Dock="Top" Classes="card" Margin="0,0,0,16">
       <Grid ColumnDefinitions="Auto,*,Auto,*" RowDefinitions="Auto,Auto,Auto,Auto" >
-        <TextBlock Grid.Row="0" Grid.Column="0" Text="Protocol" FontWeight="Bold" Margin="0,0,12,4" />
-        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ProtocolId}" Margin="0,0,24,4" />
-        <TextBlock Grid.Row="0" Grid.Column="2" Text="Poll Interval" FontWeight="Bold" Margin="0,0,12,4" />
-        <TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding PollInterval}" Margin="0,0,0,4" />
+        <TextBlock Grid.Row="0" Grid.Column="0" Classes="fieldLabel" Text="Protocol" Margin="0,0,12,6" />
+        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ProtocolId}" Margin="0,0,24,6" />
+        <TextBlock Grid.Row="0" Grid.Column="2" Classes="fieldLabel" Text="Poll Interval" Margin="0,0,12,6" />
+        <TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding PollInterval}" Margin="0,0,0,6" />
 
-        <TextBlock Grid.Row="1" Grid.Column="0" Text="Connection" FontWeight="Bold" Margin="0,0,12,4" />
+        <TextBlock Grid.Row="1" Grid.Column="0" Classes="fieldLabel" Text="Connection" Margin="0,0,12,6" />
         <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ConnectionState}"
                    Foreground="{Binding StatusKind, Converter={StaticResource StatusKindToBrush}}"
-                   FontWeight="SemiBold" Margin="0,0,24,4" />
-        <TextBlock Grid.Row="1" Grid.Column="2" Text="Captured At" FontWeight="Bold" Margin="0,0,12,4" />
-        <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding CapturedAt}" Margin="0,0,0,4" />
+                   FontWeight="SemiBold" Margin="0,0,24,6" />
+        <TextBlock Grid.Row="1" Grid.Column="2" Classes="fieldLabel" Text="Captured At" Margin="0,0,12,6" />
+        <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding CapturedAt}" Margin="0,0,0,6" />
 
-        <TextBlock Grid.Row="2" Grid.Column="0" Text="Last Seen" FontWeight="Bold" Margin="0,0,12,4" />
-        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding LastSeen}" Margin="0,0,24,4" />
-        <TextBlock Grid.Row="2" Grid.Column="2" Text="Machine Id" FontWeight="Bold" Margin="0,0,12,4" />
-        <TextBlock Grid.Row="2" Grid.Column="3" Text="{Binding MachineIdText}" Margin="0,0,0,4"
+        <TextBlock Grid.Row="2" Grid.Column="0" Classes="fieldLabel" Text="Last Seen" Margin="0,0,12,6" />
+        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding LastSeen}" Margin="0,0,24,6" />
+        <TextBlock Grid.Row="2" Grid.Column="2" Classes="fieldLabel" Text="Machine Id" Margin="0,0,12,6" />
+        <TextBlock Grid.Row="2" Grid.Column="3" Text="{Binding MachineIdText}" Margin="0,0,0,6"
                    FontSize="11" Opacity="0.7" TextWrapping="Wrap" />
 
-        <TextBlock Grid.Row="3" Grid.Column="0" Text="Agent URL" FontWeight="Bold" Margin="0,0,12,0" />
+        <TextBlock Grid.Row="3" Grid.Column="0" Classes="fieldLabel" Text="Agent URL" Margin="0,0,12,0" />
         <TextBlock Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding AgentUrl}"
                    Margin="0,0,0,0" TextWrapping="Wrap" />
       </Grid>
     </Border>
 
     <!-- Data-items header -->
-    <TextBlock DockPanel.Dock="Top"
+    <TextBlock DockPanel.Dock="Top" Classes="h2"
                Text="{Binding ItemCount, StringFormat='Data Items ({0})'}"
-               FontSize="16" FontWeight="SemiBold" Margin="0,0,0,6" />
+               Margin="0,0,0,8" />
 
     <Border DockPanel.Dock="Top"
             BorderThickness="0,0,0,1"
-            BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
+            BorderBrush="{DynamicResource CardBorderBrush}"
             Padding="0,0,0,6" Margin="0,0,0,4"
             IsVisible="{Binding HasItems}">
       <Grid ColumnDefinitions="2*,2*,1.2*,1.2*">
-        <TextBlock Grid.Column="0" Text="Name" FontWeight="Bold" />
-        <TextBlock Grid.Column="1" Text="Value" FontWeight="Bold" />
-        <TextBlock Grid.Column="2" Text="Category" FontWeight="Bold" />
-        <TextBlock Grid.Column="3" Text="Timestamp" FontWeight="Bold" />
+        <TextBlock Grid.Column="0" Classes="fieldLabel" Text="Name" />
+        <TextBlock Grid.Column="1" Classes="fieldLabel" Text="Value" />
+        <TextBlock Grid.Column="2" Classes="fieldLabel" Text="Category" />
+        <TextBlock Grid.Column="3" Classes="fieldLabel" Text="Timestamp" />
       </Grid>
     </Border>
 
@@ -86,7 +85,7 @@
               <Grid ColumnDefinitions="2*,2*,1.2*,1.2*" Margin="0,5">
                 <StackPanel Grid.Column="0">
                   <TextBlock Text="{Binding Name}" FontWeight="SemiBold" TextWrapping="Wrap" />
-                  <TextBlock Text="{Binding Id}" FontSize="11" Opacity="0.6" TextWrapping="Wrap" />
+                  <TextBlock Text="{Binding Id}" Classes="subtle" FontSize="11" TextWrapping="Wrap" />
                 </StackPanel>
                 <TextBlock Grid.Column="1" Text="{Binding Value}" VerticalAlignment="Center" TextWrapping="Wrap" />
                 <TextBlock Grid.Column="2" Text="{Binding Category}" VerticalAlignment="Center" />
@@ -101,11 +100,10 @@
       <StackPanel IsVisible="{Binding HasNoItems}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   Spacing="6" MaxWidth="420">
-        <TextBlock Text="No monitored items"
-                   FontSize="16" FontWeight="SemiBold"
+        <TextBlock Classes="h2" Text="No monitored items"
                    HorizontalAlignment="Center" />
-        <TextBlock Text="Edit this machine to select which data items to monitor."
-                   Opacity="0.75" TextWrapping="Wrap" TextAlignment="Center" />
+        <TextBlock Classes="subtle" Text="Edit this machine to select which data items to monitor."
+                   TextWrapping="Wrap" TextAlignment="Center" />
       </StackPanel>
     </Grid>
   </DockPanel>
@@ -113,19 +111,16 @@
   <!-- Delete-confirmation overlay: dims the screen, names the machine, requires an explicit choice. -->
   <Border IsVisible="{Binding IsDeleteConfirmVisible}"
           Background="#99000000">
-    <Border Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
-            BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-            BorderThickness="1" CornerRadius="6"
-            Padding="20" MaxWidth="420"
+    <Border Classes="card" MaxWidth="420"
             HorizontalAlignment="Center" VerticalAlignment="Center">
       <StackPanel Spacing="14">
-        <TextBlock Text="{Binding DeleteConfirmPrompt}" FontSize="16" FontWeight="SemiBold" TextWrapping="Wrap" />
-        <TextBlock Text="This permanently removes the machine and stops monitoring it. This cannot be undone."
-                   Opacity="0.75" TextWrapping="Wrap" />
+        <TextBlock Classes="h2" Text="{Binding DeleteConfirmPrompt}" TextWrapping="Wrap" />
+        <TextBlock Classes="subtle"
+                   Text="This permanently removes the machine and stops monitoring it. This cannot be undone."
+                   TextWrapping="Wrap" />
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="8">
           <Button Content="Cancel" Command="{Binding CancelDeleteCommand}" />
-          <Button Content="Delete" Command="{Binding ConfirmDeleteCommand}"
-                  Background="#C62828" Foreground="White" FontWeight="SemiBold" />
+          <Button Classes="danger" Content="Delete" Command="{Binding ConfirmDeleteCommand}" />
         </StackPanel>
       </StackPanel>
     </Border>

tests/Junction.Tests/Junction.Tests.csproj

@@ -26,6 +26,8 @@
     <ProjectReference Include="..\..\src\Junction.Core\Junction.Core.csproj" />
     <ProjectReference Include="..\..\src\Junction.Persistence\Junction.Persistence.csproj" />
     <ProjectReference Include="..\..\src\Junction.Protocols.MTConnect\Junction.Protocols.MTConnect.csproj" />
+    <!-- App reference resolves its net8.0 target (tests are net8.0-only); covers view-layer converters. -->
+    <ProjectReference Include="..\..\src\Junction.App\Junction.App.csproj" />
   </ItemGroup>
 
   <ItemGroup>

tests/Junction.Tests/Unit/ProtocolIdToIconConverterTests.cs

@@ -0,0 +1,78 @@
+using Junction.App.Converters;
+using Xunit;
+
+namespace Junction.Tests.Unit
+{
+    /// <summary>
+    /// Data-level tests for the protocol → glyph mapping. Targets the pure
+    /// <see cref="ProtocolIdToIconConverter.PathDataFor"/> so no Avalonia platform is required
+    /// (the geometry parse in Convert needs a render backend). Mirrors the intent of the
+    /// StatusKind converter: known ids → distinct non-empty data, unknown → fallback, never throws.
+    /// </summary>
+    public class ProtocolIdToIconConverterTests
+    {
+        [Theory]
+        [InlineData("mtconnect")]
+        [InlineData("opcua")]
+        [InlineData("fanuc")]
+        public void KnownProtocol_ReturnsNonEmptyData(string protocolId)
+        {
+            var data = ProtocolIdToIconConverter.PathDataFor(protocolId);
+
+            Assert.False(string.IsNullOrWhiteSpace(data));
+        }
+
+        [Fact]
+        public void KnownProtocols_AreMutuallyDistinct()
+        {
+            var mtc = ProtocolIdToIconConverter.PathDataFor("mtconnect");
+            var opc = ProtocolIdToIconConverter.PathDataFor("opcua");
+            var fan = ProtocolIdToIconConverter.PathDataFor("fanuc");
+
+            Assert.NotEqual(mtc, opc);
+            Assert.NotEqual(mtc, fan);
+            Assert.NotEqual(opc, fan);
+        }
+
+        [Fact]
+        public void Lookup_IsCaseAndWhitespaceInsensitive()
+        {
+            var canonical = ProtocolIdToIconConverter.PathDataFor("mtconnect");
+
+            Assert.Equal(canonical, ProtocolIdToIconConverter.PathDataFor("  MtConnect  "));
+        }
+
+        [Theory]
+        [InlineData("unknown")]
+        [InlineData("modbus")]
+        [InlineData("")]
+        public void UnknownOrEmpty_ReturnsFallback(string protocolId)
+        {
+            var fallback = ProtocolIdToIconConverter.PathDataFor("definitely-not-a-protocol");
+            var data = ProtocolIdToIconConverter.PathDataFor(protocolId);
+
+            Assert.False(string.IsNullOrWhiteSpace(data));
+            Assert.Equal(fallback, data);
+        }
+
+        [Fact]
+        public void Null_ReturnsFallback_DoesNotThrow()
+        {
+            var fallback = ProtocolIdToIconConverter.PathDataFor("definitely-not-a-protocol");
+            var data = ProtocolIdToIconConverter.PathDataFor(null);
+
+            Assert.False(string.IsNullOrWhiteSpace(data));
+            Assert.Equal(fallback, data);
+        }
+
+        [Fact]
+        public void Fallback_DiffersFromEveryKnownProtocol()
+        {
+            var fallback = ProtocolIdToIconConverter.PathDataFor("unknown");
+
+            Assert.NotEqual(fallback, ProtocolIdToIconConverter.PathDataFor("mtconnect"));
+            Assert.NotEqual(fallback, ProtocolIdToIconConverter.PathDataFor("opcua"));
+            Assert.NotEqual(fallback, ProtocolIdToIconConverter.PathDataFor("fanuc"));
+        }
+    }
+}