Add Console/Terminal view toggle to ConsoleLogs dashboard page

docs/specs/with-terminal.md

@@ -116,6 +116,37 @@ to connect to an arbitrary local socket — it can only ask for
 `(resource, replica)` pairs that are present in the resource snapshot
 stream.
 
+### Console / Terminal view toggle
+
+For a terminal-enabled resource the dashboard `ConsoleLogs` page mounts
+**both** `LogViewer` (the resource's standard log stream) and
+`TerminalView` (the interactive xterm.js terminal) at the same time and
+flips between them via a small "View" `FluentSelect` in the toolbar:
+
+- The page defaults to **Console** on resource selection so any pre-PTY
+  hosting messages — `WaitFor` notifications, startup failures, image
+  pull progress — are visible immediately.
+- The page **auto-switches to Terminal** the first time the JS terminal
+  reports a non-`connecting` toolbar status (PTY attached). Reconnects do
+  not re-trigger the auto-switch.
+- The page **auto-switches back to Console** when the JS terminal raises
+  `client.onExit` (PTY exited), so the user sees the final log lines
+  including the hosting exit message.
+- Once the user manually picks a view from the dropdown the page
+  **latches** their choice for the rest of that resource's session and
+  ignores subsequent auto-switch triggers. The latch resets when a
+  different resource is selected.
+- Both views stay mounted across flips (visibility is toggled with
+  `display:none` on a wrapper `<div>`); the log subscription and the
+  xterm/HMP1 consumer session are kept alive so neither view loses
+  scrollback or has to re-handshake on toggle. After a `display:none →
+  visible` transition the page calls `refreshLayout` on the JS terminal
+  to guarantee xterm rebinds to the new available space.
+
+The console log stream is now subscribed to for terminal-enabled
+resources too (previously it was suppressed), which is what makes the
+Console view non-empty for a `WithTerminal()` resource.
+
 ## CLI
 
 `aspire terminal <resource> [--replica N]` (`Aspire.Cli/Commands/TerminalCommand.cs`)

src/Aspire.Dashboard/Components/Controls/TerminalView.razor.cs

@@ -20,6 +20,19 @@ public sealed partial class TerminalView : ComponentBase, IAsyncDisposable
     private int _terminalId;
     private string? _connectedResourceName;
     private int _connectedReplicaIndex = -1;
+    // Guards against concurrent or re-entrant initialization. OnAfterRenderAsync
+    // can fire again while the first InitializeTerminalAsync await is still in
+    // flight (Blazor does not serialize OnAfterRenderAsync calls when re-renders
+    // happen during awaits). Without this latch, the non-firstRender branch
+    // below would see _connectedResourceName == null, mistake that for "rebind
+    // needed", call ReconnectAsync, and — because _terminalId is also still 0
+    // — fall through to InitializeTerminalAsync a second time. Each
+    // initTerminal call appends a brand-new xterm host element to the same
+    // Blazor container, leaving multiple stacked terminals in the DOM that
+    // mirror the same input/output stream. This pattern is easy to trigger
+    // on a resource stop+restart where the dashboard fires a burst of
+    // resource-snapshot-driven re-renders right after the page mounts.
+    private bool _initStarted;
 
     /// <summary>
     /// Gets or sets the user-facing display name of the resource that owns the
@@ -45,6 +58,16 @@ public sealed partial class TerminalView : ComponentBase, IAsyncDisposable
     [Parameter]
     public EventCallback<TerminalToolbarState> OnToolbarStateChanged { get; set; }
 
+    /// <summary>
+    /// Raised when the JS side reports that the workload (PTY) has exited.
+    /// The host page subscribes so it can auto-switch the view back to the
+    /// resource's console logs — the workload has stopped producing
+    /// terminal bytes and the final exit code / hosting messages live in
+    /// the console log stream.
+    /// </summary>
+    [Parameter]
+    public EventCallback<TerminalExitInfo> OnExited { get; set; }
+
     [Inject]
     public required IJSRuntime JS { get; init; }
 
@@ -60,12 +83,25 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender)
         {
+            _initStarted = true;
             await InitializeTerminalAsync();
             _connectedResourceName = ResourceName;
             _connectedReplicaIndex = ReplicaIndex;
             return;
         }
 
+        // If a re-render fires while the very first initTerminal call is still
+        // in flight, do nothing here. Once that call completes the firstRender
+        // path will set _connectedResourceName / _connectedReplicaIndex and
+        // any future rebind needed will be caught on the next render after
+        // that. Without this guard the rebind branch below would re-enter
+        // initialization and stack a second xterm onto the same container —
+        // see the comment on _initStarted.
+        if (_initStarted && _terminalId == 0)
+        {
+            return;
+        }
+
         // The same TerminalView instance is reused across resource/replica
         // switches in the parent (e.g. ConsoleLogs page selects a different
         // terminal-enabled resource). Detect that here and rebind the
@@ -157,6 +193,26 @@ public async Task ReconnectAsync(string? newResourceName, int newReplicaIndex)
         }
     }
 
+    /// <summary>
+    /// Invoked by the JS terminal when the workload (PTY) exits. The JS side
+    /// also writes a "[workload exited with code N]" line into the xterm
+    /// buffer; this callback exists so the host page can react beyond the
+    /// in-terminal message (e.g. flip the visible view back to console logs).
+    /// </summary>
+    [JSInvokable]
+    public Task OnTerminalExited(int terminalId, int exitCode)
+    {
+        // Drop stale notifications that arrive after this view was rebound to
+        // a different resource/replica — the previous JS terminal id is no
+        // longer relevant to the currently displayed resource.
+        if (_terminalId != 0 && terminalId != _terminalId)
+        {
+            return Task.CompletedTask;
+        }
+
+        return OnExited.InvokeAsync(new TerminalExitInfo { TerminalId = terminalId, ExitCode = exitCode });
+    }
+
     /// <summary>
     /// Invoked by the JS terminal whenever its role/size/font state changes.
     /// Forwards the snapshot to the host page via <see cref="OnToolbarStateChanged"/>.
@@ -279,6 +335,29 @@ public async Task RefreshToolbarStateAsync()
         }
     }
 
+    /// <summary>
+    /// Asks the JS terminal to recompute its layout. Called by the host
+    /// page when the terminal element transitions from hidden back to
+    /// visible (e.g. the user flips the page-level View dropdown from
+    /// Console back to Terminal) — display:none → visible does not always
+    /// trigger ResizeObserver, so forcing a relayout here guarantees the
+    /// terminal fills the available space immediately.
+    /// </summary>
+    public async Task RefreshLayoutAsync()
+    {
+        if (_jsModule is null || _terminalId == 0)
+        {
+            return;
+        }
+        try
+        {
+            await _jsModule.InvokeVoidAsync("refreshLayout", _terminalId);
+        }
+        catch (JSDisconnectedException)
+        {
+        }
+    }
+
     private string BuildWebSocketUrl(string resource, int replica)
     {
         var baseUri = new Uri(NavigationManager.BaseUri);
@@ -364,3 +443,15 @@ public sealed record TerminalToolbarState
 /// host page's size dropdown).
 /// </summary>
 public sealed record TerminalSizePreset(string Value, string Label, int Cols, int Rows);
+
+/// <summary>
+/// Payload pushed up from the JS terminal when the workload (PTY) exits.
+/// </summary>
+public sealed record TerminalExitInfo
+{
+    /// <summary>The JS-side terminal id that emitted the exit notification.</summary>
+    public int TerminalId { get; init; }
+
+    /// <summary>The workload's exit code, or <c>-1</c> when the JS side did not receive one.</summary>
+    public int ExitCode { get; init; }
+}

src/Aspire.Dashboard/Components/Controls/TerminalView.razor.js

@@ -387,6 +387,20 @@ function buildChrome(state) {
     const blazorElement = state.element;
     if (!blazorElement) return;
 
+    // Defense in depth: never leave a previous terminal's chrome attached to
+    // the Blazor container element. The .NET-side OnAfterRenderAsync guard
+    // is the primary protection against re-entrant initialization, but if
+    // anything ever calls initTerminal twice against the same element
+    // (resource stop+restart bursts, lifecycle bugs, future hot-reload, …)
+    // appending another host on top of an existing one leaves multiple
+    // stacked xterm instances all wired to the same WebSocket — input
+    // echoes everywhere and the terminals can render at different sizes.
+    // Clearing the element first means worst-case we drop the previous
+    // (now-orphaned) chrome instead of duplicating it.
+    while (blazorElement.firstChild) {
+        blazorElement.removeChild(blazorElement.firstChild);
+    }
+
     // The Blazor element already has inline width/height: 100%. Wrap
     // it with our own host so we can apply our flex column layout
     // without disturbing whatever else the parent has set on it.
@@ -1079,6 +1093,19 @@ function connectClient(state, wsUrl) {
         try {
             state.term?.write(`\r\n[workload exited with code ${code}]\r\n`);
         } catch { /* ignore */ }
+        // Notify the .NET host that the workload (PTY) has exited so the
+        // page can flip back to the Console logs view. We deliberately use
+        // a separate JSInvokable rather than overloading the toolbar
+        // snapshot because the toolbar status (connecting/primary/viewer/
+        // no-primary) describes the consumer-side WebSocket and primary
+        // ownership — it doesn't directly signal producer exit.
+        if (state.dotNetRef) {
+            try {
+                state.dotNetRef.invokeMethodAsync('OnTerminalExited', state.id, code ?? -1);
+            } catch (e) {
+                dbg(state, 'client.onExit: dotNet invoke failed', { error: e?.message });
+            }
+        }
     };
 
     client.onClose = (ev) => {
@@ -1264,3 +1291,16 @@ export function refreshToolbarState(id) {
     state._lastToolbarJson = null;
     flushToolbarState(state);
 }
+
+// Triggers a layout recompute on demand. Called by the .NET host after the
+// terminal element becomes visible again following a Console/Terminal view
+// flip — the wrapper goes from display:none to visible, which may or may
+// not trigger ResizeObserver depending on the browser's box-tree timing.
+// Forcing applyRoleAwareLayout here guarantees xterm rebinds to the new
+// available space immediately rather than waiting for the next external
+// resize event.
+export function refreshLayout(id) {
+    const state = terminals.get(id);
+    if (!state) return;
+    applyRoleAwareLayout(state);
+}

src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor

@@ -8,7 +8,7 @@
 <PageTitle>
     <ApplicationName
         AdditionalText="@PageViewModel.SelectedResource.Id?.ReplicaSetName"
-        ResourceName="@(_selectedResourceHasTerminal ? nameof(Dashboard.Resources.ConsoleLogs.TerminalPageTitle) : nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsPageTitle))"
+        ResourceName="@(_activeView == ConsoleLogsView.Terminal ? nameof(Dashboard.Resources.ConsoleLogs.TerminalPageTitle) : nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsPageTitle))"
         Loc="@Loc"/>
 </PageTitle>
 
@@ -18,7 +18,7 @@
                              MainContentStyle="margin-top: 10px;"
                              MobileToolbarButtonText="@Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsSelectResourceToolbar)]">
         <PageTitleSection>
-            <h1 class="page-header">@Loc[_selectedResourceHasTerminal ? nameof(Dashboard.Resources.ConsoleLogs.TerminalHeader) : nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsHeader)]</h1>
+            <h1 class="page-header">@Loc[_activeView == ConsoleLogsView.Terminal ? nameof(Dashboard.Resources.ConsoleLogs.TerminalHeader) : nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsHeader)]</h1>
         </PageTitleSection>
         <ToolbarSection>
             <ResourceSelect Resources="_resources"
@@ -27,7 +27,24 @@
                             @bind-SelectedResource:after="HandleSelectedOptionChangedAsync"
                             LabelClass="toolbar-left" />
 
-            @if (!_selectedResourceHasTerminal)
+            @if (_selectedResourceHasTerminal)
+            {
+                // View toggle: only meaningful for terminal-enabled resources.
+                // For non-terminal resources Console is the only thing to look
+                // at, so the dropdown stays hidden — keeping the toolbar
+                // identical to today for the common case.
+                <FluentSelect TOption="string"
+                              Items="@s_viewSelectOptions"
+                              OptionValue="@(o => o)"
+                              OptionText="@(o => string.Equals(o, nameof(ConsoleLogsView.Terminal), StringComparison.Ordinal) ? Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsViewTerminalOption)].Value : Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsViewConsoleOption)].Value)"
+                              Value="@_activeView.ToString()"
+                              ValueChanged="HandleViewChangedAsync"
+                              Width="120px"
+                              Style="min-width: auto; margin-left: 10px;"
+                              AriaLabel="@Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsViewSelectorLabel)]" />
+            }
+
+            @if (_activeView == ConsoleLogsView.Console)
             {
                 <SignalsActionsDisplay HandleClearSignal="@ClearConsoleLogs"
                                       IsPaused="@PauseManager.ConsoleLogsPaused"
@@ -63,7 +80,7 @@
                 }
             }
 
-            @if (_selectedResourceHasTerminal && _terminalToolbarState is { } terminalState)
+            @if (_activeView == ConsoleLogsView.Terminal && _terminalToolbarState is { } terminalState)
             {
                 <FluentDivider Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
 
@@ -111,7 +128,7 @@
             @if (ViewportInformation.IsDesktop)
             {
                 // This takes up too much horizontal space on mobile, so show on a new line on mobile
-                @if (!_selectedResourceHasTerminal)
+                @if (_activeView == ConsoleLogsView.Console)
                 {
                     <FluentLabel Typo="Typography.Body" aria-live="polite" aria-label="@Loc[nameof(Dashboard.Resources.ConsoleLogs.LogStatusLabel)]" slot="end">@PageViewModel.Status</FluentLabel>
 
@@ -123,7 +140,7 @@
                         slot="end"/>
                 }
             }
-            else if (!_selectedResourceHasTerminal)
+            else if (_activeView == ConsoleLogsView.Console)
             {
                 <AspireMenuButton
                     Icon="@(new Icons.Regular.Size20.Options())"
@@ -135,7 +152,7 @@
         </ToolbarSection>
 
         <MobilePageTitleToolbarSection>
-            @if (!_selectedResourceHasTerminal)
+            @if (_activeView == ConsoleLogsView.Console)
             {
                 <FluentLabel Typo="Typography.Body" aria-live="polite" aria-label="@Loc[nameof(Dashboard.Resources.ConsoleLogs.LogStatusLabel)]">
                     @if (PageViewModel.SelectedResource?.Id is not null)
@@ -151,24 +168,45 @@
         </MobilePageTitleToolbarSection>
 
         <MainSection>
+            @* For terminal-enabled resources we keep BOTH views mounted and
+               flip visibility via CSS. Unmounting TerminalView on every flip
+               would tear down xterm.js, the WebSocket, and the PTY consumer
+               session — destroying scrollback and forcing an HMP1
+               StateSync round-trip on every toggle. Unmounting LogViewer
+               would drop the rendered log buffer for the same reason.
+               `display:none` keeps the DOM, JS state, and Blazor component
+               state alive while only one view is visible at a time. *@
             @if (_selectedResourceHasTerminal && _terminalResourceName is not null)
             {
-                <TerminalView
-                    @ref="_terminalViewRef"
-                    ResourceName="@_terminalResourceName"
-                    ReplicaIndex="@_terminalReplicaIndex"
-                    OnToolbarStateChanged="OnTerminalToolbarStateChangedAsync" />
+                <div style="@(_activeView == ConsoleLogsView.Console ? "display: contents;" : "display: none;")">
+                    <LogViewer
+                        @ref="_logViewerRef"
+                        LogEntries="@_logEntries"
+                        ShowTimestamp="@_showTimestamp"
+                        IsTimestampUtc="@_isTimestampUtc"
+                        NoWrapLogs="@_noWrapLogs"
+                        ShowNoLogsMessage="@_showNoLogsMessage"
+                        ShowResourcePrefix="@_isSubscribedToAll"/>
+                </div>
+                <div style="@(_activeView == ConsoleLogsView.Terminal ? "display: contents;" : "display: none;")">
+                    <TerminalView
+                        @ref="_terminalViewRef"
+                        ResourceName="@_terminalResourceName"
+                        ReplicaIndex="@_terminalReplicaIndex"
+                        OnToolbarStateChanged="OnTerminalToolbarStateChangedAsync"
+                        OnExited="OnTerminalExitedAsync" />
+                </div>
             }
             else
             {
                 <LogViewer
-                @ref="_logViewerRef"
-                LogEntries="@_logEntries"
-                ShowTimestamp="@_showTimestamp"
-                IsTimestampUtc="@_isTimestampUtc"
-                NoWrapLogs="@_noWrapLogs"
-                ShowNoLogsMessage="@_showNoLogsMessage"
-                ShowResourcePrefix="@_isSubscribedToAll"/>
+                    @ref="_logViewerRef"
+                    LogEntries="@_logEntries"
+                    ShowTimestamp="@_showTimestamp"
+                    IsTimestampUtc="@_isTimestampUtc"
+                    NoWrapLogs="@_noWrapLogs"
+                    ShowNoLogsMessage="@_showNoLogsMessage"
+                    ShowResourcePrefix="@_isSubscribedToAll"/>
             }
         </MainSection>
     </AspirePageContentLayout>