OTSSignsOrchestrator/OTSSignsOrchestrator.Desktop/Views/HostsView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:OTSSignsOrchestrator.Desktop.ViewModels"
             x:Class="OTSSignsOrchestrator.Desktop.Views.HostsView"
             x:DataType="vm:HostsViewModel">

    <DockPanel>
        <!-- Page header -->
        <StackPanel DockPanel.Dock="Top" Margin="0,0,0,4">
            <TextBlock Text="SSH Hosts" Classes="pageTitle" />
            <TextBlock Text="Manage remote Docker Swarm manager connections" Classes="pageSubtitle" />
        </StackPanel>

        <!-- Toolbar -->
        <Border DockPanel.Dock="Top" Classes="toolbar" Margin="0,0,0,16">
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Add Host" Classes="accent" Command="{Binding NewHostCommand}" />
                <Button Content="Edit" Command="{Binding EditSelectedHostCommand}" />
                <Button Content="Test Connection" Command="{Binding TestConnectionCommand}" />
                <Button Content="Delete" Classes="danger" Command="{Binding DeleteHostCommand}" />
                <Border Width="1" Background="{StaticResource BorderSubtleBrush}" Margin="4,2" />
                <Button Content="Refresh" Command="{Binding LoadHostsCommand}" />
            </StackPanel>
        </Border>

        <!-- Status -->
        <TextBlock DockPanel.Dock="Bottom" Text="{Binding StatusMessage}" Classes="status"
                   Margin="0,10,0,0" />

        <!-- Remote Nodes panel -->
        <Border DockPanel.Dock="Bottom" Classes="card" Margin="0,16,0,0"
                MinHeight="120" MaxHeight="300">
            <DockPanel>
                <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Spacing="10" Margin="0,0,0,10">
                    <TextBlock Text="Cluster Nodes" Classes="sectionTitle" VerticalAlignment="Center" />
                    <Button Content="List Nodes" Command="{Binding ListNodesCommand}" />
                    <TextBlock Text="{Binding NodesStatusMessage}" Classes="status"
                               VerticalAlignment="Center" Margin="4,0,0,0" />
                </StackPanel>

                <DataGrid ItemsSource="{Binding RemoteNodes}"
                          AutoGenerateColumns="False"
                          IsReadOnly="True"
                          GridLinesVisibility="Horizontal"
                          CanUserResizeColumns="True"
                          HeadersVisibility="Column">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="Hostname" Binding="{Binding Hostname}" Width="160" />
                        <DataGridTextColumn Header="IP Address" Binding="{Binding IpAddress}" Width="130" />
                        <DataGridTextColumn Header="Status" Binding="{Binding Status}" Width="80" />
                        <DataGridTextColumn Header="Availability" Binding="{Binding Availability}" Width="100" />
                        <DataGridTextColumn Header="Manager Status" Binding="{Binding ManagerStatus}" Width="120" />
                        <DataGridTextColumn Header="Engine" Binding="{Binding EngineVersion}" Width="100" />
                        <DataGridTextColumn Header="ID" Binding="{Binding Id}" Width="200" />
                    </DataGrid.Columns>
                </DataGrid>
            </DockPanel>
        </Border>

        <!-- Edit panel (shown when editing) -->
        <Border DockPanel.Dock="Right" Width="360" IsVisible="{Binding IsEditing}"
                Classes="card" Margin="16,0,0,0">
            <ScrollViewer>
                <StackPanel Spacing="10">
                    <TextBlock Text="SSH Host" FontSize="17" FontWeight="SemiBold"
                               Foreground="{StaticResource AccentBrush}" Margin="0,0,0,6" />

                    <TextBlock Text="Label" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                    <TextBox Text="{Binding EditLabel}" Watermark="e.g. Production Swarm" />

                    <TextBlock Text="Host" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                    <TextBox Text="{Binding EditHost}" Watermark="hostname or IP" />

                    <TextBlock Text="Port" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                    <NumericUpDown Value="{Binding EditPort}" Minimum="1" Maximum="65535" CornerRadius="6" />

                    <TextBlock Text="Username" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                    <TextBox Text="{Binding EditUsername}" Watermark="ssh username" />

                    <CheckBox Content="Use Key Authentication" IsChecked="{Binding EditUseKeyAuth}"
                              Margin="0,4,0,0" />

                    <TextBlock Text="Private Key Path" FontSize="12"
                               Foreground="{StaticResource TextSecondaryBrush}"
                               IsVisible="{Binding EditUseKeyAuth}" />
                    <TextBox Text="{Binding EditPrivateKeyPath}" Watermark="~/.ssh/id_rsa"
                             IsVisible="{Binding EditUseKeyAuth}" />

                    <TextBlock Text="Key Passphrase (optional)" FontSize="12"
                               Foreground="{StaticResource TextSecondaryBrush}"
                               IsVisible="{Binding EditUseKeyAuth}" />
                    <TextBox Text="{Binding EditKeyPassphrase}" PasswordChar="●"
                             IsVisible="{Binding EditUseKeyAuth}" />

                    <TextBlock Text="Password (if not using key)" FontSize="12"
                               Foreground="{StaticResource TextSecondaryBrush}"
                               IsVisible="{Binding !EditUseKeyAuth}" />
                    <TextBox Text="{Binding EditPassword}" PasswordChar="●"
                             IsVisible="{Binding !EditUseKeyAuth}" />

                    <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,14,0,0">
                        <Button Content="Save" Classes="accent" Command="{Binding SaveHostCommand}" />
                        <Button Content="Cancel" Command="{Binding CancelEditCommand}" />
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </Border>

        <!-- Host list -->
        <DataGrid ItemsSource="{Binding Hosts}"
                  SelectedItem="{Binding SelectedHost}"
                  AutoGenerateColumns="False"
                  IsReadOnly="True"
                  GridLinesVisibility="Horizontal"
                  CanUserResizeColumns="True">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Label" Binding="{Binding Label}" Width="150" />
                <DataGridTextColumn Header="Host" Binding="{Binding Host}" Width="200" />
                <DataGridTextColumn Header="Port" Binding="{Binding Port}" Width="60" />
                <DataGridTextColumn Header="User" Binding="{Binding Username}" Width="100" />
                <DataGridCheckBoxColumn Header="Key Auth" Binding="{Binding UseKeyAuth}" Width="70" />
                <DataGridTextColumn Header="Last Tested" Binding="{Binding LastTestedAt, StringFormat='{}{0:g}'}" Width="150" />
                <DataGridCheckBoxColumn Header="OK" Binding="{Binding LastTestSuccess}" Width="50" />
            </DataGrid.Columns>
        </DataGrid>
    </DockPanel>
</UserControl>