Say how far a connection has got while it is still being made

The connecting card set its status string once, when the tab was created, and
never touched it again. Every connection therefore looked identical from the
outside: one three seconds into a key exchange, one waiting out a fifteen-second
timeout against a machine that is asleep, and one that had hung all drew the
same "connecting…". The card now draws the five steps of getting there, each lit
at the moment the handshake reports reaching it, over an amber track that fills
as they finish.

◆ NOTHING ON THE LIST IS INVENTED. Every row changes state because a layer below
it said so, at the instant the thing it names actually began.

That is the whole reason it is worth showing, and it is why most of this commit
is plumbing rather than XAML: there was no progress reporting anywhere in the
stack to hook a step list onto, and a card animating plausible progress would
have been indistinguishable from one that had stopped receiving any.

SshConnectionPhase names four phases and deliberately not more. SSH.NET runs the
entire handshake inside one ConnectAsync and raises exactly one event from the
middle of it — HostKeyReceived, once the key exchange has produced a key to show
— so that event is the only interior moment there is to report. Everything
before it is Reaching and everything after it is Authenticating. A fifth phase
in that assembly would have to be a timer, so there is not one. OpeningShell is
reported by TerminalWorkspace instead, because that is where it happens: the
factory's work ends with an authenticated connection, and asking for a
pseudo-terminal on one is a separate round trip. The SFTP path passes null — a
second connection opened behind an already-open shell has nobody watching a step
list for it.

The card's fifth step, "Starting the terminal", is the renderer wait and lives
in the shell rather than in the SSH assembly, which has never heard of a
renderer. On the first connection after a cold start it is a real wait with a
real failure mode of its own — a missing WebView2 runtime — so a list that began
at "reaching the host" would leave the one wait most likely to hang unnamed.

Amber for the step in flight, and that follows the palette's rule rather than
bending it. Green is what is true and purple is what you can press; a step still
happening is neither, and it is exactly the caveat-worth-reading that amber
exists for. Steps behind it go green as they become true. Nothing animates,
which is the argument TransfersScreen.axaml already makes for its own track,
reaching a screen with far more reason to want a spinner: a spinner is furniture
invented to fill a state nobody measured, and these states are measured, so the
track fills to what has finished and then waits there.

A refusal keeps the step it stopped on, in red, with the ones behind it still
green. That is the half a progress bar could not do, and it is the difference
between "that host is not there" and "that host is there and would not have me"
— a question the reason sentence alone frequently does not settle.

The strip's dot goes amber while a tab is connecting, on both heads. It was
grey, and so is a tab whose shell has exited: the two states in that strip with
the least in common, one worth waiting for and one over. PhoneShell's own
comment already recorded half of this — the dot stopped being green before
anything had answered — and this is the other half.

Progress is raised inline rather than through System.Progress<T>, which captures
whatever synchronisation context it was constructed on and posts to it. That
reads like a convenience and is really a second place the marshalling decision
gets made: silently, differently under a test with no context, and out of order
with respect to the failure that follows a phase. The shell marshals once, in
one handler, through a new optional post parameter on MainWindowViewModel — the
same seam TransfersViewModel already uses, and for the reason its own remark
gives. The three Dispatcher.UIThread.Post calls that predate it are the ones
this suite's comments record as out of reach; they are left alone rather than
swept in here.

Both heads draw the list. They differ in one place: Phone.axaml's mono class
sets a colour and a size along with the family, so the caption rule names its
own family instead of composing the two and asking two rules for one Foreground.
The desktop's mono sets the family alone, which is why ConnectingCard does
compose them. Each head also gains SHOW LOGS beside the button that gives up —
the step list is this attempt and the log is every other one, which is what a
connection taking too long actually raises.

Seven tests, and the two that matter most run against the container rather than
a fake: a real handshake reports its phases in order, and a host-key refusal
never claims to have authenticated. A fake asserting what it was written to
assert would have established nothing about either. The rest cover the tab
advancing while the connection is gated, the step a refusal stops on, and a
phase reported after the user has given up on the tab. 1,861 tests, none
failing.

The Android head's layout is not verified by anything. It compiles, and
compiled bindings mean every new binding path resolves, but that project is not
in DodoSSH.slnx, there is no test project for it and no device here — so unlike
the desktop card, whose shapes the layout harness measures, these rows have not
been drawn. Vertical fit is reasoned, not observed.

src/DodoSSH.Client.Android/Views/TerminalScreen.axaml

@@ -33,6 +33,85 @@
     gesture does the same thing the arrow does.
   -->
 
+  <UserControl.Styles>
+
+    <!--
+      ── the connecting step list ─────────────────────────────────────────────────────────────────────
+      The same five rows the desktop's ConnectingCard draws, from the same reported phases, in this head's
+      own sizes. Kept here rather than in Phone.axaml because nothing else on this head has a step list —
+      the theme file is for what more than one screen shares, and a rule that exists for one control is
+      easier to read beside it.
+
+      Amber for the step in flight, green behind it, red where it stopped. That is the palette's rule
+      rather than an exception to it: green is what is true and purple is what you can press, and a step
+      still happening is neither. See ConnectingCard.axaml for the longer version of this argument, and
+      Palette.axaml for the rule itself.
+
+      A phone needs this more than a desktop does, which is the same thing the connecting block below
+      already says about itself: mobile links are slower and drop more often, so the stretch this describes
+      is longer here and more likely to end badly.
+    -->
+    <!--
+      Its own FontFamily rather than the row also carrying the mono class, which is this head's convention
+      and not a stylistic preference: Phone.axaml's mono sets a colour and a size along with the family, so
+      a caption wearing both classes would be asking two rules for one Foreground and settling it on style
+      ordering. Every other text class here — body, label, title, detail — names its own family for exactly
+      that reason. The desktop's mono sets the family alone, which is why ConnectingCard composes the two
+      and this does not.
+    -->
+    <Style Selector="TextBlock.stepcaption">
+      <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+      <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
+      <Setter Property="FontSize" Value="11" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="TextBlock.stepcaption.done">
+      <Setter Property="Foreground" Value="{StaticResource TextDim}" />
+    </Style>
+    <Style Selector="TextBlock.stepcaption.running">
+      <Setter Property="Foreground" Value="{StaticResource WarnText}" />
+      <Setter Property="FontWeight" Value="SemiBold" />
+    </Style>
+    <Style Selector="TextBlock.stepcaption.stopped">
+      <Setter Property="Foreground" Value="{StaticResource DangerText}" />
+    </Style>
+
+    <!-- Fixed width and centred: four different characters on a ragged edge is a list that looks broken. -->
+    <Style Selector="TextBlock.stepmark">
+      <Setter Property="Foreground" Value="{StaticResource BorderMid}" />
+      <Setter Property="FontSize" Value="11" />
+      <Setter Property="Width" Value="13" />
+      <Setter Property="TextAlignment" Value="Center" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="TextBlock.stepmark.done">
+      <Setter Property="Foreground" Value="{StaticResource Live}" />
+    </Style>
+    <Style Selector="TextBlock.stepmark.running">
+      <Setter Property="Foreground" Value="{StaticResource Warn}" />
+    </Style>
+    <Style Selector="TextBlock.stepmark.stopped">
+      <Setter Property="Foreground" Value="{StaticResource Danger}" />
+    </Style>
+
+    <!--
+      4 rather than the desktop's 5, which is the only deliberate difference between the two heads here:
+      this bar sits in a column 24 from each edge of a 360dp screen rather than under a 460-wide card, so
+      the same height reads as a heavier rule across a narrower span.
+    -->
+    <Style Selector="ProgressBar.steptrack">
+      <Setter Property="Height" Value="4" />
+      <Setter Property="MinHeight" Value="4" />
+      <Setter Property="CornerRadius" Value="2" />
+      <Setter Property="Background" Value="{StaticResource Chip}" />
+      <Setter Property="Foreground" Value="{StaticResource Warn}" />
+    </Style>
+    <Style Selector="ProgressBar.steptrack.stopped">
+      <Setter Property="Foreground" Value="{StaticResource Danger}" />
+    </Style>
+
+  </UserControl.Styles>
+
   <Panel>
 
   <Grid RowDefinitions="Auto,*,Auto">
@@ -97,8 +176,12 @@
                             Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
                             CommandParameter="{Binding}">
                       <StackPanel Orientation="Horizontal" Spacing="7" VerticalAlignment="Center">
-                        <!-- Green only while there is a shell behind it; see the same dot in PhoneShell. -->
-                        <Ellipse Classes="dot" Classes.live="{Binding IsLive}" Width="6" Height="6"
+                        <!--
+                          Green only while there is a shell behind it, amber while one is being made; see
+                          the same dot in PhoneShell, and Phone.axaml for why amber is not a rule broken.
+                        -->
+                        <Ellipse Classes="dot" Classes.live="{Binding IsLive}"
+                                 Classes.connecting="{Binding IsConnecting}" Width="6" Height="6"
                                  VerticalAlignment="Center" />
                         <TextBlock Classes="mono" FontSize="12" FontWeight="SemiBold"
                                    Text="{Binding Label}" />
@@ -284,11 +367,70 @@
         <TextBlock Classes="title" FontSize="13" Text="{Binding SelectedTab.Label}" />
         <TextBlock Classes="detail" FontSize="11" Foreground="{StaticResource TextDim}"
                    TextWrapping="Wrap" Text="{Binding SelectedTab.Address}" />
-        <TextBlock Classes="body" Text="{Binding SelectedTab.Status}" />
-        <Button Classes="row" MinHeight="44" Padding="14,0" HorizontalAlignment="Left"
-                Command="{Binding CloseTabCommand}" CommandParameter="{Binding SelectedTab}">
-          <TextBlock Classes="label" FontSize="9" Text="CLOSE THIS TAB" />
-        </Button>
+
+        <!--
+          Where a single unchanging "connecting…" used to be. The track counts steps that really finished
+          against the five there are — StepsDone over StepCount, never a percentage, because the arithmetic
+          that makes a percentage is the arithmetic that starts inventing one. See TerminalTabViewModel.
+
+          Drawn for both states rather than once per state: a refused connection has the same five rows and
+          the same track, and the only differences are that one row is red and the track stops where it got
+          to. Two templates kept identical for the sake of a colour is how the two drift apart.
+        -->
+        <ProgressBar Classes="steptrack" Classes.stopped="{Binding SelectedTab.IsFailed}"
+                     Minimum="0" Maximum="{Binding SelectedTab.StepCount}"
+                     Value="{Binding SelectedTab.StepsDone, Mode=OneWay}" />
+
+        <ItemsControl ItemsSource="{Binding SelectedTab.Steps}">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <StackPanel Spacing="6" />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.ItemTemplate>
+            <DataTemplate x:DataType="vm:ConnectionStepViewModel">
+              <StackPanel Orientation="Horizontal" Spacing="9">
+                <TextBlock Classes="stepmark"
+                           Classes.done="{Binding IsDone}"
+                           Classes.running="{Binding IsRunning}"
+                           Classes.stopped="{Binding IsStopped}"
+                           Text="{Binding Mark}" />
+                <TextBlock Classes="stepcaption"
+                           Classes.done="{Binding IsDone}"
+                           Classes.running="{Binding IsRunning}"
+                           Classes.stopped="{Binding IsStopped}"
+                           Text="{Binding Caption}" />
+              </StackPanel>
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+
+        <!--
+          Only for a refusal now. While a connection is being made this used to be the whole of what this
+          screen said, and it is now the step list's running row said twice — so it is shown for the one
+          state the list cannot put into words: why it stopped.
+        -->
+        <TextBlock Classes="body" Text="{Binding SelectedTab.Status}"
+                   Foreground="{StaticResource Danger}"
+                   IsVisible="{Binding SelectedTab.IsFailed}" />
+
+        <!--
+          Two 44-high targets side by side rather than one, and the second is the logs: the step list is
+          this attempt and the log is every other one, which is the question a connection that is taking too
+          long on a mobile link actually raises — has this machine ever worked from here. Reached the
+          ordinary way, through ShowScreenCommand, exactly as the rail and MORE reach it.
+        -->
+        <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Left">
+          <Button Classes="row" MinHeight="44" Padding="14,0"
+                  Command="{Binding CloseTabCommand}" CommandParameter="{Binding SelectedTab}">
+            <TextBlock Classes="label" FontSize="9" Text="CLOSE THIS TAB" />
+          </Button>
+          <Button Classes="row" MinHeight="44" Padding="14,0"
+                  Command="{Binding ShowScreenCommand}"
+                  CommandParameter="{x:Static vm:ShellScreen.Logs}">
+            <TextBlock Classes="label" FontSize="9" Text="SHOW LOGS" />
+          </Button>
+        </StackPanel>
       </StackPanel>
 
       <!--